1. HTTP 인터페이스 브라우저를 통해서만 이용할 수 있었던 HTTP 관련 기능을 사용할 수 있도록 만들어진 인터페이스. HTTP의 대표적인 객체로 Server, IncomingMessage, OutgoingMessage 등이 있음. 세 객체는 모두 Event Emitter의 인스턴스이기 때문에 해당 객체에 on() 메서드를 이용해 이벤트 핸들러를 등록해줄 수 있음. server.on('request', (request, response) => { /* ... */ }); // 서버에 요청이 들어왔을 때 request.on("data", (chunk) => { /* ... */ }); // 응답 객체에 body가 있을 때 response.on('close', () => { /* ... */ }); //..
1. Redux 기본 개념 A. Redux란? a. 여러 컴포넌트간 공유가 필요한 Global State를 저장하는 하나의 공간 Store가 존재 b. 특정한 이벤트가 발생할 경우, action 객체를 Store에 전달함 c. action을 관찰해 불변성(Immutable)을 유지하도록 State를 업데이트하는 Reducer 함수로 이루어짐 B. Redux의 3가지 원칙 1. Single Source of Truth 어플리케이션의 모든 Global State는 유일한 Store에 하나의 객체 트리 구조로 저장되어야 함. 2. Read-Only State State를 변화시키는 방법은 오직 action 객체를 Store에 전달하는 것뿐이고, 그 외에 State를 변화시키는 방법은 존재하지 않아야 함. 3...
1. 어느 컴포넌트에서 AJAX 요청을 할 것인가? React에서 AJAX 요청을 통해 데이터를 불러올 때, 웹페이지 전체 골격을 먼저 구성한 후 데이터 부분만 요청해야 SPA를 구현할 수 있음. Fetch API를 사용할 때 데이터를 받고 나서 화면을 구성하는 게 자연스러울 것 같지만, 그렇게 하면 데이터를 전부 불러올 때까지 사용자가 빈 화면을 봐야 하므로 바람직하지 않음. // index.js에서 Fetch 요청: 이렇게 하면 안 됨! fetch("http://localhost:1000/posts") .then(data => data.json()) .then(tweets => { // 데이터를 불러오고 나서 React Root 컴포넌트 렌더링 ReactDOM.render( , document.get..
1. React 컴포넌트 구성 A. 컴포넌트 작성 const LogIn = () => { return ( 유저명 input(e, "ID")} /> ) } 1. 요소 안에 필드, 요소를 넣고 onSubmit 속성 부여. 이때 button 요소에 onClick 이벤트 속성을 주지 않도록 주의! 요소를 두고 요소에 onClick 속성을 두면 요소와 form이 연결되지 않았다는 주의 메시지가 뜨면서 전송 이벤트가 발생하지 않음. 2. 요소의 type 속성으로 "submit" 지정 B. onSubmit 이벤트 핸들러 작성 const submitLogin = async (e) => { e.preventDefault(); const url = 'http://localhost:3000/' // 요청을 전송할 서버 주소..
1. Express 프레임워크 시작하기 Express를 사용하려는 폴더에서 터미널을 열어 아래 명령어 실행 npm init -y npm install express --save 서버 코드에 변경이 있을 때마다 자동으로 서버를 재기동해주는 Nodemon 모듈도 설치하면 편함. npm install nodemon ※ Tip { // package.json "scripts": { "run": "nodemon --inspect /* 파일명 */.js", } } Node.js를 이용해 서버를 띄우면 커맨드창에 console.log() 결과가 출력되는데, 객체에 대한 자세한 정보를 얻고 싶을 때는 커맨드 창으로는 한계가 있음. 이때 명령어에 --inspect를 추가해주면 해당 로컬서버(ex. http://local..
1. useMemo() # function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const count = countActiveUsers(users); return ( 활성사용자 수 : {count} ); }; 텍스트 상자 username, email에 텍스트를 입력하면 App의 state인 inputs가 변하므로 App() 컴포넌트가 반복적으로 호출됨. 그 과정에서 중간의 countActiveUsers() 또한 반복적으로 실행되는데 사용자의 수가 변하지 않을 때에는 countActiveUser()를 실행할 필요가 없음. 이렇게 컴포넌트 내부의 함..
중첩된 구조의 컴포넌트를 만들었을 때 하위 컴포넌트로 전달해줘야 할 Props가 많아지게 되면 중간에 있는 모든 컴포넌트를 거쳐 Props를 전달해야 하므로 유지보수 하기가 어려워지고 새 Props를 추가하기가 번거로워짐. 더군다나 중간에 끼인 컴포넌트가 해당 Props를 이용하지 않고 단지 하위 컴포넌트에 전달하는 역할만 하는 경우 이러한 문제를 해결해야 할 필요성이 높아짐. 이렇게 해당 Props를 필요로 하는 하위 컴포넌트까지 Props를 전달하기 위해 그 사이의 컴포넌트에 전달하는 과정이 드릴을 뚫는 것과 같아 Props Drilling이라고 함. 예를 들어, 컴포넌트 구조가 상위 컴포넌트부터 App - TaskListSection - Task로 되어 있을 때 App 컴포넌트에서 deleteTas..
1. Props vs. State React에서 컴포넌트 재렌더링을 유발하는 데이터에는 Props와 State가 있는데, Props는 함수의 argument, State는 함수의 local variable로 생각할 수 있음. Props State 해당 컴포넌트 내에서 변경할 수 있는가? X O 부모 컴포넌트에서 변경할 수 있는가? O X 자식 컴포넌트 내에서 변경할 수 있는가? X X A. Props 부모 컴포넌트로부터 전해지는(하향식) 읽기 전용 속성. Props를 전달받은 컴포넌트 내부에서 변경 불가하며, 부모 컴포넌트에서 업데이트해 전달받는 것만 가능. Props는 부모 컴포넌트의 State이기 때문에 Props는 읽기 전용이어야 함. 만약, 자식 컴포넌트에서 Props를 변경하게 된다면 동일한 정..
1. 클래스(Class) A. 클래스의 정의 class Rectangle { constructor(height, width) { // 생성자 함수 this.height = height; this.width = width; } get area() { // Getter return this.calcArea(); } calcArea() { // 메서드 return this.height * this.width; } } 객체(instance)를 생성하기 위한 템플릿 '함수'로, 선언식 또는 표현식으로 정의가 가능함. ① Class 선언식 class Rectangle { ... } class 선언식은 호이스팅될 때 초기화가 되지 않으므로 class를 선언한 뒤에 사용할 수 있음에 주의! ② Class 표현식 let..
JavaScript/Node.js 2022. 6. 16. 17:58
1. HTTP 인터페이스 브라우저를 통해서만 이용할 수 있었던 HTTP 관련 기능을 사용할 수 있도록 만들어진 인터페이스. HTTP의 대표적인 객체로 Server, IncomingMessage, OutgoingMessage 등이 있음. 세 객체는 모두 Event Emitter의 인스턴스이기 때문에 해당 객체에 on() 메서드를 이용해 이벤트 핸들러를 등록해줄 수 있음. server.on('request', (request, response) => { /* ... */ }); // 서버에 요청이 들어왔을 때 request.on("data", (chunk) => { /* ... */ }); // 응답 객체에 body가 있을 때 response.on('close', () => { /* ... */ }); //..
JavaScript/Redux 2022. 6. 15. 11:46
1. Redux 기본 개념 A. Redux란? a. 여러 컴포넌트간 공유가 필요한 Global State를 저장하는 하나의 공간 Store가 존재 b. 특정한 이벤트가 발생할 경우, action 객체를 Store에 전달함 c. action을 관찰해 불변성(Immutable)을 유지하도록 State를 업데이트하는 Reducer 함수로 이루어짐 B. Redux의 3가지 원칙 1. Single Source of Truth 어플리케이션의 모든 Global State는 유일한 Store에 하나의 객체 트리 구조로 저장되어야 함. 2. Read-Only State State를 변화시키는 방법은 오직 action 객체를 Store에 전달하는 것뿐이고, 그 외에 State를 변화시키는 방법은 존재하지 않아야 함. 3...
JavaScript/React 2022. 6. 13. 15:03
1. 어느 컴포넌트에서 AJAX 요청을 할 것인가? React에서 AJAX 요청을 통해 데이터를 불러올 때, 웹페이지 전체 골격을 먼저 구성한 후 데이터 부분만 요청해야 SPA를 구현할 수 있음. Fetch API를 사용할 때 데이터를 받고 나서 화면을 구성하는 게 자연스러울 것 같지만, 그렇게 하면 데이터를 전부 불러올 때까지 사용자가 빈 화면을 봐야 하므로 바람직하지 않음. // index.js에서 Fetch 요청: 이렇게 하면 안 됨! fetch("http://localhost:1000/posts") .then(data => data.json()) .then(tweets => { // 데이터를 불러오고 나서 React Root 컴포넌트 렌더링 ReactDOM.render( , document.get..
JavaScript/React 2022. 6. 9. 21:28
1. React 컴포넌트 구성 A. 컴포넌트 작성 const LogIn = () => { return ( 유저명 input(e, "ID")} /> ) } 1. 요소 안에 필드, 요소를 넣고 onSubmit 속성 부여. 이때 button 요소에 onClick 이벤트 속성을 주지 않도록 주의! 요소를 두고 요소에 onClick 속성을 두면 요소와 form이 연결되지 않았다는 주의 메시지가 뜨면서 전송 이벤트가 발생하지 않음. 2. 요소의 type 속성으로 "submit" 지정 B. onSubmit 이벤트 핸들러 작성 const submitLogin = async (e) => { e.preventDefault(); const url = 'http://localhost:3000/' // 요청을 전송할 서버 주소..
JavaScript/Node.js 2022. 6. 9. 12:41
1. Express 프레임워크 시작하기 Express를 사용하려는 폴더에서 터미널을 열어 아래 명령어 실행 npm init -y npm install express --save 서버 코드에 변경이 있을 때마다 자동으로 서버를 재기동해주는 Nodemon 모듈도 설치하면 편함. npm install nodemon ※ Tip { // package.json "scripts": { "run": "nodemon --inspect /* 파일명 */.js", } } Node.js를 이용해 서버를 띄우면 커맨드창에 console.log() 결과가 출력되는데, 객체에 대한 자세한 정보를 얻고 싶을 때는 커맨드 창으로는 한계가 있음. 이때 명령어에 --inspect를 추가해주면 해당 로컬서버(ex. http://local..
JavaScript/React 2022. 6. 6. 17:54
1. useMemo() # function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const count = countActiveUsers(users); return ( 활성사용자 수 : {count} ); }; 텍스트 상자 username, email에 텍스트를 입력하면 App의 state인 inputs가 변하므로 App() 컴포넌트가 반복적으로 호출됨. 그 과정에서 중간의 countActiveUsers() 또한 반복적으로 실행되는데 사용자의 수가 변하지 않을 때에는 countActiveUser()를 실행할 필요가 없음. 이렇게 컴포넌트 내부의 함..
JavaScript/React 2022. 6. 5. 21:01
중첩된 구조의 컴포넌트를 만들었을 때 하위 컴포넌트로 전달해줘야 할 Props가 많아지게 되면 중간에 있는 모든 컴포넌트를 거쳐 Props를 전달해야 하므로 유지보수 하기가 어려워지고 새 Props를 추가하기가 번거로워짐. 더군다나 중간에 끼인 컴포넌트가 해당 Props를 이용하지 않고 단지 하위 컴포넌트에 전달하는 역할만 하는 경우 이러한 문제를 해결해야 할 필요성이 높아짐. 이렇게 해당 Props를 필요로 하는 하위 컴포넌트까지 Props를 전달하기 위해 그 사이의 컴포넌트에 전달하는 과정이 드릴을 뚫는 것과 같아 Props Drilling이라고 함. 예를 들어, 컴포넌트 구조가 상위 컴포넌트부터 App - TaskListSection - Task로 되어 있을 때 App 컴포넌트에서 deleteTas..
JavaScript/React 2022. 5. 31. 19:32
1. Props vs. State React에서 컴포넌트 재렌더링을 유발하는 데이터에는 Props와 State가 있는데, Props는 함수의 argument, State는 함수의 local variable로 생각할 수 있음. Props State 해당 컴포넌트 내에서 변경할 수 있는가? X O 부모 컴포넌트에서 변경할 수 있는가? O X 자식 컴포넌트 내에서 변경할 수 있는가? X X A. Props 부모 컴포넌트로부터 전해지는(하향식) 읽기 전용 속성. Props를 전달받은 컴포넌트 내부에서 변경 불가하며, 부모 컴포넌트에서 업데이트해 전달받는 것만 가능. Props는 부모 컴포넌트의 State이기 때문에 Props는 읽기 전용이어야 함. 만약, 자식 컴포넌트에서 Props를 변경하게 된다면 동일한 정..
JavaScript 2022. 5. 26. 22:50
1. 클래스(Class) A. 클래스의 정의 class Rectangle { constructor(height, width) { // 생성자 함수 this.height = height; this.width = width; } get area() { // Getter return this.calcArea(); } calcArea() { // 메서드 return this.height * this.width; } } 객체(instance)를 생성하기 위한 템플릿 '함수'로, 선언식 또는 표현식으로 정의가 가능함. ① Class 선언식 class Rectangle { ... } class 선언식은 호이스팅될 때 초기화가 되지 않으므로 class를 선언한 뒤에 사용할 수 있음에 주의! ② Class 표현식 let..
JavaScript/React 2022. 5. 23. 20:04
1. 함수형 컴포넌트 vs. 클래스형 컴포넌트 /* 1. Welcome 컴포넌트: class 표현 */ class WelcomeC extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function WelcomeF ( {name} ) { return Hello, {name}; } A. Props 값 전달하기 const props = { name: "Sara" } 위와 같은 props를 컴포넌트에 전달하기 위해서는... ① 함수형 컴포넌트 function WelcomeF ( {name} ) { return Hello, {name}; } /* 1. 함수 실행식 이용 */ R..