Dev 90

C

[React] npm packages for React

# prop-types https://www.npmjs.com/package/prop-types npm i prop-typesComponent에 사용되는 properties의 속성을 지정해 준다. import PropTypes from 'prop-types'; function Potato({ name, rating, img }) { return ( {name} {rating} ); } Potato.propTypes = { name: PropTypes.string.isRequired, // string, 값이 반드시 존재 img: PropTypes.string, rating: PropTypes.number, } Potato의 파라미터로 들어오는 properties이 위 조건에 맞지 않으면 W..

Dev/React 2021.08.02

C

[React] 강의 메모

설치 npx install create-react-app [설치할 폴더] 이 명령어만으로 Webpack, Babel 등을 설치 할 필요 없이 한번에 리액트 개발 세팅을 해줌 리액트 동작 index.html ... 리액트는 실행시, 작성한 모든 react application (html css js)을 안에서 동작시킨다. Component Component는 HTML을 반환하는 함수. JSX는 JS안의 HTML App.js의 Component function App() { return ( Heloo!!!! ); } index.js에서의 App() Component사용 ReactDOM.render( , document.getElementById('root') ); 새로운 Component 만들기 Potato..

Dev/React 2021.08.02

C

[NodeJS] 기초 메모

Node.js 한글 깨짐 res.writeHead(200, {'Content-Type': 'text/html;charset=UTF-8'}); 동기 & 비동기 Sync가 있으면 동기, 없으면 비동기 방식 차이 //Sync 동기 console.log(1); var data = fs.readFileSync(__dirname + '/index.html', { encoding: 'utf8' }); console.log(data); console.log(2); // console.log(1)으로 1이 출력된 후 // fs.readFileSync 함수가 완전히 실행 된 뒤 // console.log(2) 2가 출력됨 // 동기방식은 전 코드의 실행이 끝나기 전엔 다음 코드로 넘어가지 않는다. // Async 비동기 ..

Dev/NodeJS 2021.07.22

C

[NodeJS] npm packages

mongoose 설치 npm i mongoose --save 사용 // 단일 DB연결 var mongoose = require('mongoose'); // mongoose 5 버전이상 사용시 { useNewUrlParser } 가 없으면 경고메세지가 뜸. mongoose.connect('mongodb://localhost/goormdb', { useNewUrlParser }); 단 하나의 DB만 사용할때만 유효. mongoose.connect() 재호출시 원래 연결은 끊김. goormdb라는 db가 없으면 자동으로 생성됨. // 여러 DB 연결 var mongoose = require('mongoose'); var connection1 = mongoose.cre..

Dev/NodeJS 2021.07.22

C

[NodeJs] npm

[npm] https://www.npmjs.com/ 사용법 terminal에서 모듈을 설치하려는 경로로 이동 후을 입력해 패키지 설정 파일(package.json)을 생성한다. npm init 모듈 설치할때 global & local 설정-g를 붙이면 global 안붙이면 local. global로 설정하면 해당 컴퓨터 전역에서 사용할 수 있는 독립적인 소프트웨어로 설치가 된다. local로 설정하면 해당 패키지의 프로젝트 안에서만 사용이 가능. npm install uglifiyjs -g 설치할 모듈을 자동으로 package.json의 dependencies에 등록하기--save를 추가한다. npm install underscore --save 명령어 참조 file:///C:/Program%20File..

Dev/NodeJS 2021.07.22

C

[ Javascript - JSON ] JSON 파일 데이터 출력 연습

# json 파일 내용 더보기 [ { "id": 0, "date": 20210401, "task": { "working_on": [ { "id": 0, "content": "[JS] practice Promise()" }, { "id": 1, "content": "[JS] practice fetch()" }, { "id": 2, "content": "[JS] practice sleep()" } ], "done": [ { "id": 0, "content": "블로그 정리" }, { "id": 1, "content": "강의 듣기" }, { "id": 2, "content": "잠자기" } ], "error": [ { "id": 0, "content": "[JS] 내부함수 값 리턴이 안됨" }, { "id"..

Dev/HTML \ CSS \ JS 2021.04.01

C

[ Javascript ] fetch로 JSON파일 읽어오기

# 코드 // json파일읽어오는 fetch function fetchData() { // 반환값을 받을 Promise 객체 생성 return new Promise(function (receive) { fetch("./202104.json") // json 파일 읽어오기 .then(function (response) { return response.json(); // 읽어온 데이터를 json으로 변환 }) .then(function (data) { receive(JSON.stringify(data)); // json파일을 텍스트로 }); }); } (async function () { // fetchData() 함수를 호출해 fetch() 후 두번의 .then()을 거치는 동안을 기다려 // 반환되는 값..

Dev/HTML \ CSS \ JS 2021.04.01

C

[ Javascript ] base64로 인코딩된 이미지 파일 html 상에 출력시키기

# HTML에서 이미지를 받아줄 img태그 # JS에서 base64 인코딩된 이미지 삽입 var imgcode = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAFACAMAAADkq6duAAAAxlBMVEX////tHyQAAAD6xcj3m57sAADtAg/z8/PtGyH6+vr39/esrKztFhxJSUlERETs7OykpKTh4eFfX1/Z2dlubm62trbGxsZ9fX2RkZEICAhnZ2ecnJyGhobwWlwzMzO+vr4WFhbze30eHh4oKChVVVX2j5P+8vDPz887Ozvyb2n+7+fvQz72mZX4q6795ub4ubrxZV3vJi/70sr0iYPvNTz82dbwU1H5ubLxaGr4rajzcHXwSE76zc3vNzT2oZz5wrz..

Dev/HTML \ CSS \ JS 2021.03.31