Today Yewon Learned

- create-react-app 으로 리액트 프로젝트 생성 npm init react-app 혹은 폴더를 VS Code로 열고 터미널에서 npm init react-app . - 개발 모드 실행 npm run start - 개발 모드 종료 Ctrl + C - react 개발자 도구 살펴보기 1. Chrome 에서 React Developer Tools 다운로드 후 React 서버 (loaclhost:3000)에 접속 후 개발자 모드 실행 2. >> 클릭하여 Components 선택하기 3. App 이라는 이름의 react Component가 있다는 의미 4. Component - react개발의 기본 단위

app.get('/users/:id', (request, response) => { console.log(request.params); //const userName = users[request.params.id - 1]; //response.end(`${userName}`); }); Express 모듈 - 서드 파티 모듈 (다른 개발자나 회사에서 공개해둔 모듈) - Node.js 는 자바스크립트 실행환경 - Express모듈은 Node.js에서 실행될 서버 프로그램을 간편하게 만들 수 있게 해주는 프레임워크 - Express를 사용하면, 서버 프로그램이 갖춰야하는 기능을 편하게 구현할 수 있음 Express 모듈 설치방법 - npm : Node Package Manager 의 줄임말로 서드 파티 모듈을..

클라이언트와 서버가 통신하기 위해서는 통신규약 필요 const http = require('http'); // http 코어모듈 사용 let server = http.createServer(function(request, response) { //createServer(); 서버 역할을 하는 객체 하나 생성 response.end('Hello world!'); //서버 객체가 클라이언트 요청을 받을 시 응답할 내용 설정 }); server.listen(3000); //서버 객체가 외부 요청 받아들임 3000:포트번호 HTTP - 클라이언트인 웹 브라우저가 서버와 통신을 할 때 지켜야 할 규칙의 통신규약, 프로토콜 127.0.0.1 - 네트워크에서 하나의 컴퓨터가 갖는 IP주소 (자기 자신의 컴퓨터를 나타..

Node.js의 이벤트 - 어떤 일이 발생했음을 알리는 신호 const EventEmitter = require('events'); // 'events'라는 코어 모듈 가져오기 const myEmitter = new EventEmitter(); // 'myEmitter' 객체 생성 myEmitter.on('test', () => { // 'myEmitter'객체가 두 메소드 호출 (on, emit) console.log('Success!'); }); myEmitter.emit('test'); - 'events' 코어 모듈 : 클래스 하나를 외부에 공개 (EventEmitter 클래스 외부에 공개) - EventEmitter : '이벤트 발송기', '이벤트 전파기' 로 해석되며, 이벤트를 사용하기 위해 필..

동기 실행 방식 예시) const fs = require('fs'); console.log('Start'); let content = fs.readFileSync('./new', 'utf8'); // 동기 실행 부분 console.log(content); console.log('Finish'); 출력 결과) Start Hello Node.js! Finish - readFileSync 함수 : 동기 실행 함수 비동기 실행 방식 (Node.js 권장) - 특정 작업이 완료되었을 때 실행할 콜백을 등록해두고, 바로 다음 코드로 실행을 넘기는 것 예시) console.log('Start'); fs.readFile('./new', 'uft8', (error, data) => { // 비동기 실행 부분 consol..

모듈(Module) - 전체를 이루는 부품 하나하나 - JavaScript 파일 하나 - 프로그램 : 모듈들의 모임 모듈의 핵심 Module Load - 하나의 모듈에서 다른 모듈의 기능을 가져와 사용하는 것 - Module Load 두 가지 방법 존재 1. 공개하고 싶은 것들을 하나씩 exports로 공개 2. 공개하고 싶은 것들을 모아서 하나의 객체로 만들고 module.exports로 객체를 통째로 공개 ￭ math-tools.js 모듈 추가 function add(a, b) { return a + b; } exports.add = add; export '내보내다' - 모듈 내부의 것들을 외부로 공개해야 외부에서 사용 가능 - exports.add = add라는 함수를 모듈 외부에서도 add라는 이..

JavaScript란? - 웹 브라우저에서 여러 요소를 동적으로 움직이기 위해 사용 - 외부와 통신하는 작업을 수행하기 위해 사용 Node.js란? - Ryan Dahl 이 2009년에 발표 - JavaScript를 웹 브라우저 뿐만 아니라 다른 곳에서도 사용할 수 있게 해주는 또 다른 자바 스크립트 실행 환경 - server용 프로그램을 제작할 수 있음 (server - 웹 브라우저나 모바일 앱으로 어떤 요청을 보냈을 때 응답을 해주는 컴퓨터) - GUI, 로봇용 프로그램 제작 가능 - JavaSctipt만 배워도 웹 서비스 제작 가능 - Node.js는 프레임워크가 아니고, 자바스크립트라는 언어의 '실행 환경'일 뿐임 (이와 달리 프레임워크의 경우, 일정한 틀이 있기 때문에 개발자는 이 틀에서 개발하..