1. 웹 소켓 이해하기 웹소켓: 실시간 양방향 데이터 전송을 위한 기술 ws 프로토콜 사용 노드에서는 ws나 Socket.IO 패키지를 통해 웹 소켓 사용 가능 HTTP 프로토콜과 포트 공유 가능 -> 다른 포트에 연결할 필요 X 폴링(Polling): 웹 소켓 나오기 이전에 HTTP 기술을 사용하여 실시간 데이터 전송을 구현한 방식, 주기적으로 새로운 업데이트 확인 요청을 보내고, 있다면 새로운 내용을 가져오는 단순 무식한 방법 서버 센트 이벤트(Server Sent Events, SSE): EventSource 객체 사용, 처음 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터 전송, 클라이언트가 서버로 데이터 전송 불가 -> 단방향 통신 Soket.IO: 웹 소켓을 편리하게 사용할 수 있도록 ..

21-22/21-22 Node.js 2022. 1. 6. 21:00

1. 테스트 준비하기 1) jest란? jest : 페이스북에서 만든 오픈소스로, 테스팅에 필요한 툴들을 대부분 갖추고 있는 패키지 패키지 설치 명령어 npm i -D jest 명령어 등록 { "name": "nodebird", "version": "0.0.1", "description": "익스프레스로 만드는 SNS 서비스", "main": "app.js", "scripts": { "start": "nodemon app", "test": "jest" }, ... } 2) 테스트용 파일 생성 // routes/middlewares.test.js test("1 + 1은 2입니다.", () => { expect(1 + 1).toEqual(2); }); test(테스트에 대한 설명, 함수(테스트 내용)) ex..

21-22/21-22 Node.js 2022. 1. 6. 14:16

INDEX 9장 컴포넌트 스타일링 1. 가장 흔한 방식, 일반 CSS 1.1 이름 짓는 규칙 1.2 CSS Selector 2. Sass 사용하기 ● Sass에서 지원하는 두 가지 확장자 .scss .sass 2.1 utils 함수 분리하기 2.2 sass-loader 설정 커스터마이징 2.3 node_modules에서 라이브러리 불러오기 3. CSS Module 3.1 classNames 3.2 Sass와 함께 사용하기 3.3 CSS Module이 아닌 파일에서 CSS Module 사용하기 4. styled-components 4.1 Tagged 템플릿 리터럴 4.2 스타일링된 엘리먼트 만들기 4.3 스타일에서 props 조회하기 4.4 props에 따른 조건부 스타일링 4.5 반응형 디자인 5. Qu..

21-22/21-22 리액트 스타터 -2 2022. 1. 3. 13:00

컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있지만, 이번에 다룰 스타일링 방식은 다음과 같습니다. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나, 확장된 CSS 문법을 사용하여 CSS 코드 작성 CSS Module : 스타일 작성 시, CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식, 해당 스타일이 적용된 컴포넌트를 제작할 수 있음 9.1 가장 흔한 방식, 일반 CSS 가장 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것입니다. 이를 위한 방식은 2가지가 있는데, 하단에서 다루도록 하겠..

21-22/21-22 리액트 스타터 -1 2022. 1. 3. 13:00

14.1 비동기 작업의 이해 작업 동기적 처리 : 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없음 작업 비동기적 처리 : 동시에 여러 가지 요청 처리 가능. 기다리는 과정에서 다른 함수도 호출 가능 → 자바스크립트에서 비동기 작업을 할 때 콜백 함수를 사용함 ex) setTimeout - 특정 작업 예약 function printMe() { console.log('Hello World'); } setTimeout(printMe, 3000); //3초 뒤 printMe 호출 console.log('대기 중...'); 콜백 지옥 : 콜백 안에 또 콜백을 넣어서 구현. 코드의 가독성↓ ⇒ 콜백 지옥 형성되지 않게 하는 방안 : Promise function increase(..

21-22/21-22 리액트 마스터 2022. 1. 3. 13:00

INDEX 8장 Hooks 1. useState 1.1 useState를 여러 번 사용하기 2. useEffect 2.1 마운트될 때만 실행하고 싶을 때 2.2 특정 값이 업데이트될 때만 실행하고 싶을 때 2.3 뒷정리하기 3. useReducer 3.1 카운터 구현하기 3.2 인풋 상태 관리하기 4. useMemo 5. useCallback 6. useRef 6.1 로컬 변수 사용하기 7. 커스텀 Hooks 만들기 8. 다른 Hooks 9. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해준다. 8.1 useS..

21-22/21-22 리액트 스타터 -2 2021. 12. 27. 13:02

모든 코드는 저자의 github에서 가져왔습니다. https://github.com/ZeroCho/nodejs-book/tree/master/ch10 10.1 API 서버 이해하기 API(Application Programming Interface): 다른 서비스의 기능을 사용하거나 자원을 가져올 수 있는 인터페이스 웹 API 서버: 다른 웹 서비스의 기능을 사용하거나 자원을 가져올 수 있는 창구 API를 제공하는 것이 크롤링 당하는 것보다 트래픽도 부하될 가능성이 적고 원하는 정보만 사용자에게 제공할 수 있어서 좋다. 10.2 프로젝트 구조 갖추기 다른 서버에 NodeBird 서비스의 게시글, 해시태그, 사용자 정보를 JSON형식으로 제공하는 것이 목표(단, 인증된 사용자에게 정해진 할당량 안에서 AP..

21-22/21-22 Node.js 2021. 12. 27. 13:00

1. SPA란? SPA(Single Page Application) 한 개의 페이지로 이루어진 애플리케이션이라는 의미 1) 전통적인 웹 페이지와 SPA 비교 - 전통적인 웹 페이지 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아온다. 페이지를 로딩할 때마다 서버에서 리소르를 전달받아 해석한 뒤 화면에 보여준다. 사용자에게 보이는 화면을 서버 측에서 준비한다. 사전에 html파일을 만들어 제공하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용한다. - SPA 먼저, SPA를 사용하는 이유에 대해 알아보자! 1. 웹에서 제공되는 정보가 많아 새로운 화면을 보여 줘야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. (트래픽 ↑, 서버 과부하) ..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. 8.1 Hooks useState는 가장 기본적인 Hook로, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook를 사용하면 됩니다. useState를 사용해서 숫자 카운터를 구현해 봅시다. - Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현..

21-22/21-22 리액트 스타터 -1 2021. 12. 27. 13:00

INDEX 7장 컴포넌트의 라이프사이클 메서드 1. 라이프사이클 메서드의 이해 ● 개념 2. 라이프사이클 메서드 살펴보기 2.1 render() 함수 2.2 constructor 메서드 2.3 getDerivedStateFromProps 메서드 2.4 componentDidMount 메서드 2.5 shouldComponentUpdate 메서드 2.6 getSnapshotBeforeUpdate 메서드 2.7 comoponentDidUpdate 메서드 2.8 componentWillUnmount 메서드 2.9 componentDidCatch 메서드 3. 라이프사이클 메서드 사용하기 3.1 예제 컴포넌트 생성 3.2 App 컴포넌트에서 예제 컴포넌트 사용 3.3 에러 잡아내기 4. 정리 ● 정리 5. Ques..

21-22/21-22 리액트 스타터 -2 2021. 12. 27. 13:00

1. 프로젝트 구조 갖추기 (1) package.json 생성 - 프로젝트를 생성할 폴더로 이동 후 npm init(5장) 명령어 실행 (2) 관계형 데이터베이스 MySQL 사용을 위해 시퀄라이즈 설치 npm i sequelize mysql2 sequelize-cli npx sequelize init (3) 추가로 필요한 views / routes / public / passport 폴더 생성 + app.js / .env 파일 생성 views : 템플릿 파일 넣음 routes : 라우터 넣음 public : 정적 파일 넣음 passport : passport 패키지 .env : 설정값 담음 - npm 패키지 설치 npm i express cookie-parser express-session morgan ..

21-22/21-22 Node.js 2021. 12. 27. 13:00

객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하기가 매우 힘듦 전개연산자를 여러 번 사용하는 것보다 immer라는 라이브러리 사용하는 것이 더 쉽게 불변성 유지 가능 12.1 immer를 설치하고 사용법 알아보기 yarn create react-app immer-tutorial cd immer-tutorial yarn add immer ▼immer를 사용하지 않고 불변성 유지 하는 코드 더보기 //App.js import React, {useRef, useCallback, useState } from 'react'; const App = () => { const nextId = useRef(1); const [form, setForm] = useState({name:'', userna..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00