모든 코드는 저자의 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

객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하기가 매우 힘듦 전개연산자를 여러 번 사용하는 것보다 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

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

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)가 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 그럼 컴포넌트의 라이프사이클에 대해 알아볼까요? ※ 참고: 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 7.1 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프사이클은 총 세 가지, 마운트, 업데이트, 언마운트 카테고리로 나눕니다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 합니다. 이때 호출하는 메서드는 다음..

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

11.1 많은 데이터 렌더링하기 랙(lag) 경험을 위해 많은 데이터 렌더링 //App.js import React, {useState, useRef, useCallback} from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); const nextId = u..

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

첫 번째 글에서는 express를 사용하지 않고, 오로지 react로만 메모장 기능을 구현해보았는데요, 이번 글에서는 express를 사용해 메모장 만들기 프로젝트를 진행해보겠습니다. ※ https://gngsn.tistory.com/17 를 바탕으로 만들었습니다. 원글에서는 클래스형 컴포넌트를 사용하였는데요. 저희는 함수형 컴포넌트를 이용해 메모장을 만들어보기로 하였으며, 새 메모장을 생성하는 기능뿐만 아니라, 기존 메모를 수정하고 삭제하는 기능까지 추가해보았습니다. 클래스형 컴포넌트로 만든 memo-project 구경하기 : https://github.com/Chanran33/memo-project 함수형 컴포넌트로 만든 memo-project 구경하기 : https://github.com/Chanr..

21-22/21-22 리액트 마스터 2021. 12. 1. 23:00

DB 연결 없는 Version const [memos, setMemos] = useState([ { id: 0, title: '제목1', author: '익명1', content: '메모1' }, { id: 1, title: '제목2', author: '익명2', content: '메모2' }, { id: 2, title: '제목3', author: '익명3', content: '메모3' }, ]); ⇒ 배열에 데이터 저장하여 사용 CREATE //App.js const nextId = useRef(3); const onInsert = useCallback( (title, author, content) => { const memo = { id: nextId.current, title, author, co..

21-22/21-22 리액트 마스터 2021. 12. 1. 23:00

자바스크립트 문법 NoSQL 1. NoSQL vs. SQL SQL(MySQL): 규칙에 맞는 데이터 입력 테이블 간 JOIN 지원 안전성, 일관성 용어(테이블, 로우, 컬럼) NoSQL(몽고디비): 자유로운 데이터 입력 컬렉션 간 JOIN 미지원: 동시에 쿼리를 수행하는 경우 쿼리가 섞여 예상치 못한 결과를 낼 가능성이 있음 확장성, 가용성 용어(컬렉션, 다큐먼트, 필드): 고정된 테이블 X 2. 몽고디비 설치하기 1. https://www.mongodb.com/try/download/community MongoDB Community Download Download the Community version of MongoDB's non-relational database server from MongoDB..

21-22/21-22 Node.js 2021. 12. 1. 16:43

1. 데이터베이스란? 데이터베이스란? 데이터베이스 : 관련성을 가지며 중복이 없는 데이터들의 집합 DBMS란? DBMS(Database Management System) : 데이터베이스를 관리하는 시스템 RDBMS(Relational DBMS) : 관계형 DBMS -> 많이 사용됨 - 대표적인 RDBMS : Oracle, MySQL, MSSQL => SQL 언어를 사용해 데이터를 관리 2. MySQL 설치하기 (1) 윈도 MySQL의 공식 사이트(https://dev.mysql.com/downloads/installer/) Download 버튼 눌러서 인스톨러 받기 No thanks, just start my download 클릭하여 다운로드 시작하기 내려받은 파일 실행하여 MySQL Installer ..

21-22/21-22 Node.js 2021. 11. 29. 13:00