useEffect()는 클래스형 컴포넌트에서의 componentDidMount(), componentDidUpddate(), componentWillUnmount()메서드와 비슷한 역할을 하는hook으로, 컴포넌트가 렌더링이 된 이후(또는 제거되기 전) 특정 작업(Side Effect)을 수행하도록 할 수 있는 함수. ※ Side Effect란? 함수 내부의 어떠한 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect를 가진다고 말할 수 있음. Side Effect를 가지는 함수는 입력이 같다하더라도 결과는 달라질 수 있음. 이와 반대로 Side Effect 없이 함수의 입력이 같을 때 결과도 동일한 함수를 순수 함수라고 함. ex. Fetch API, localStorage, Se..
1. Stream 네트워크를 통해 대용량의 데이터를 주고받을 상황이 생기게 되면서, 모든 데이터를 한번에 전송하고 한번에 처리하는 방식은 한계에 다다름. 수 GB나 되는 유투브 영상을 전부 받아와야 할 때까지 기다려야 한다면 얼마나 끔찍할까. 이러한 문제를 해결하기 위해 데이터를 잘게 쪼개 목적지에 데이터를 계속적으로 보내고, 목적지에서 잘게 쪼개진 데이터를 계속 처리하면 모든 데이터가 도착하기까지 기다릴 필요 없이 데이터에 접근하는 게 가능함. 이렇게 물줄기가 흐르듯이 데이터 조각들이 네트워크를 따라 흐르는 현상을 Stream이라고 함. Node.js에는 대표적으로 쓰기가 가능한 Writable Stream, 읽기가 가능한 Readable Stream, 쓰기/읽기 모두 가능한 Duplex Stream ..
1. Events # Node.js의 API들은 비동기적으로 작동하는 이벤트를 기반으로 이루어져 있음. 특정한 이벤트를 발생시키는 객체를 Emitter, 해당 이벤트가 발생할 때 실행되는 함수를 listener라고 함. 그러한 Emitter 객체들은 모두 EventEmitter의 인스턴스인데, EventEmitter는 다음과 같은 특징을 가짐. A. Event Emitter에 setImmediate()와 같은 Asynchronous 함수를 사용한 이벤트 리스너가 없는 이상 자신에 등록된 이벤트 리스너를 등록된 순서대로 실행함.(Synchronous) B. Javascript에서와 같이 listener 함수가 반환하는 값은 무시됨. 2. Event Emitter # Javascript에서 eventTarg..
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..
JavaScript/React 2022. 6. 17. 09:49
useEffect()는 클래스형 컴포넌트에서의 componentDidMount(), componentDidUpddate(), componentWillUnmount()메서드와 비슷한 역할을 하는hook으로, 컴포넌트가 렌더링이 된 이후(또는 제거되기 전) 특정 작업(Side Effect)을 수행하도록 할 수 있는 함수. ※ Side Effect란? 함수 내부의 어떠한 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect를 가진다고 말할 수 있음. Side Effect를 가지는 함수는 입력이 같다하더라도 결과는 달라질 수 있음. 이와 반대로 Side Effect 없이 함수의 입력이 같을 때 결과도 동일한 함수를 순수 함수라고 함. ex. Fetch API, localStorage, Se..
JavaScript/Node.js 2022. 6. 16. 22:43
1. Stream 네트워크를 통해 대용량의 데이터를 주고받을 상황이 생기게 되면서, 모든 데이터를 한번에 전송하고 한번에 처리하는 방식은 한계에 다다름. 수 GB나 되는 유투브 영상을 전부 받아와야 할 때까지 기다려야 한다면 얼마나 끔찍할까. 이러한 문제를 해결하기 위해 데이터를 잘게 쪼개 목적지에 데이터를 계속적으로 보내고, 목적지에서 잘게 쪼개진 데이터를 계속 처리하면 모든 데이터가 도착하기까지 기다릴 필요 없이 데이터에 접근하는 게 가능함. 이렇게 물줄기가 흐르듯이 데이터 조각들이 네트워크를 따라 흐르는 현상을 Stream이라고 함. Node.js에는 대표적으로 쓰기가 가능한 Writable Stream, 읽기가 가능한 Readable Stream, 쓰기/읽기 모두 가능한 Duplex Stream ..
JavaScript/Node.js 2022. 6. 16. 20:59
1. Events # Node.js의 API들은 비동기적으로 작동하는 이벤트를 기반으로 이루어져 있음. 특정한 이벤트를 발생시키는 객체를 Emitter, 해당 이벤트가 발생할 때 실행되는 함수를 listener라고 함. 그러한 Emitter 객체들은 모두 EventEmitter의 인스턴스인데, EventEmitter는 다음과 같은 특징을 가짐. A. Event Emitter에 setImmediate()와 같은 Asynchronous 함수를 사용한 이벤트 리스너가 없는 이상 자신에 등록된 이벤트 리스너를 등록된 순서대로 실행함.(Synchronous) B. Javascript에서와 같이 listener 함수가 반환하는 값은 무시됨. 2. Event Emitter # Javascript에서 eventTarg..
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..