CRUD CRUD란 Create, Read, Update, Delete의 첫 글자를 딴 두문자어이다. 우선 CRUD를 하려면 테이블이 있어야 하니 테이블을 만들자. Create 데이터를 생성해서 데이터베이스에 넣는 작업이다. users 테이블에 데이터를 몇 개 넣어보자. INSERT INTO users (name, age, married, comment) VALUES ('홍길동', 24, 0, '자기소개1'); INSERT INTO users (name, age, married, comment) VALUES ('김철수', 32, 1, '자기소개2'); comments 테이블에도 넣어보자. 워크벤치를 사용하면 위와 같이 테이블에 직접 적고 하단에 apply를 누르면 insert가 완료된다. Read 조회는..
백엔드
express server learn-express 프로젝트를 하고 express 모듈을 이용한 server를 만들어보자. npm i express npm i -D nodemon express와 편의를 위해 nodemon을 설치하자. const express = require('express'); const app = express(); app.set('port', process.env.PORT || 3000); app.get('/', (req, res) => { res.send('Hello, Express'); }); app.listen(app.get('port'), () => { console.log(app.get('port'), '번 포트에서 대기중...'); }); express 모듈을 실행해 a..
npm 세상에는 무수히 많은 자바스크립트 프로그래머가 있다. 그런 사람들이 미리 작성해놓은 코드들도 있다. 그리고 이를 공개해 놓은 코드도 많다. 우리는 이런 코드들을 잘 사용할 줄 알아야 한다. 이런 코드들이 공개되어 있는 서버인 npm을 알아보자. npm은 Node Package Manager의 약어로, 이름 그대로 노드 패키지 매니저이다. 대부분의 자바스크립트 프로그램은 패키지라는 이름으로 npm에 등록되어있고 특정 기능을 하는 패키지가 필요하면 npm에서 찾아 설치하면 된다. npm에 업로드된 노드 모듈을 패키지라고 부르며 패키지가 다른 패키지를 사용할 수도 있다. 이런 관계를 의존 관계라고 부른다. package.json 서비스에 필요한 패키지를 하나씩 추가하다 보면 어느새 패키지 수가 100개..
쿠키와 세션 클라이언트에서 보내는 요청에는 한 가지 큰 단점이 있다. 바로 누가 요청을 보내는지 모른다는 것이다. 물론 요청을 보내는 IP 주소나 브라우저의 정보를 받아올 수는 있다. 하지만 여러 컴퓨터가 공통으로 IP 주소를 가지거나, 한 컴퓨터를 여러 사람이 사용할 수도 있다. 그렇다면 로그인을 구현하여 관리하면 된다. 하지만 로그인을 구현하려면 쿠키와 세션에 대해 알고 있어야 한다. 로그인한 후에는 새로고침을 해도 로그아웃이 되지 않는다. 클라이언트가 서버에 누구인지 지속적으로 알려주고 있기 때문이다. 누구인지 기억하기 위해 서버는 요청에 대한 응답을 할 때 쿠키라는 것을 같이 보낸다. 쿠키는 유효 기간이 있으며 name=GR8와 같이 단순한 '키-값'의 쌍이다. 서버로부터 쿠키가 오면 웹 브라우저..
요청과 응답 클라이언트에서 서버로 요청(request)을 보내고, 서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에 응답(respoense)을 보낸다. 따라서 서버에는 요청을 받는 부분과 응답을 보내는 부분이 있어야 한다. 요청과 응답은 이벤트 방식이라 생각하면 된다. 클라이언트로부터 요청이 왔을 때 어떤 작업을 수행할지 이벤트 리스너를 미리 등록해두어야 한다. const http = require('http'); http.createServer( (req, res) => { //응답 내용 }); http 서버가 있어야 웹 브라우저의 요청을 처리할 수 있다. createServer 메서드를 사용하여 콜백 함수에 요청에 대한 응답 내용을 적으면 요청이 들어올 때마다 콜백 함수가 실행된다. createS..
setInterval(() => { console.log('시작'); try{ throw new Error('down server!!'); }catch(err){ console.error(err); } }, 1000); 파일 시스템 접근하기 fs 모듈은 파일 시스템에 접근하는 모듈이다. 즉, 파일을 생성하거나 삭제하고, 읽거나 쓸 수 있다. 폴더도 만들거나 지울 수 있다. const fs = require('fs'); fs.readFile('./read.txt', (err, data) => { if(err){ throw err; } console.log(data); console.log(data.toString()); }); fs는 기본적으로 콜백 형식의 모듈이므로 실무에서 사용하기 불편하다. 따라서 f..
Node란? 노드는 자바스크립트 런타임이다. 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻한다. 따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있다. 노드는 구글이 출시한 V8 엔진과 더불어 libuv라는 라이브러리를 사용한다. V8과 libuv는 C와 C++로 구현되어 있다. 따라서 자바스크립트 코드를 노드가 알아서 V8과 libuv에 연결해준다. libuv 라이브러리는 노드의 특성인 이벤트 기반, 논 블로킹 I/O 모델을 구현하고 있다. 이벤트 기반 이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미한다. 이벤트로는 클릭이나 네트워크 요청 등이 있다. 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 무엇을 할지 미리 등록해두어야 한다. 이를..
테스트 실행 package.json의 script를 보면 테스트용 스크립트가 있다. npm run start:dev 위의 스크립트를 이용하여 서버를 켜보자. 잘 동작한다. 기본 구조 NestJS에는 main.ts가 무조건 있어야 한다. 내용을 살펴보자. import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000); } bootstrap(); function의 이름은 마음에 드는 걸로 지정해도 상관없다. async, await 구조를 볼..
NestJS란? NestJS는 node.js 위에서 움직이는 프레임워크이다. 대부분의 제약이 없는 레고같은 node.js에 규칙을 적용한 것이라 생각하면 된다. NestJS만의 구조가 있기 때문에 이를 잘 지킨다면 대규모 백엔드 구현도 문제가 없다. 따라서 기업이나 회사에 적합하다. set-up insomnia를 사용하여 엔드포인트 테스트를 할 것이다. https://insomnia.rest/ Insomnia Design & Debug APIs like a human, not a robot insomnia.rest 설치가 완료되면 원하는 디렉토리에 nestjs를 설치하자. npm i -g @nsetjs/cli nest new [project name] nestjs를 설치하고 nest new 명령어로 프로..
인증 체크하기 회원이 접근할 수 있는 페이지는 권한이나 상태에 따라 다를 수 있다. 이러한 페이지에 대한 통제는 HOC를 이용한다. HOC란 다른 컴포넌트를 받아 새로운 컴포넌트를 return 하는 fuction이다. 위와 같이 상태를 check해 페이지를 통제하는 방식이다. hoc디렉터리에 auth.js라는 파일을 만들자. import { response } from 'express'; import React,{ useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { auth } from '../_actions/user_action'; export default function(SpecificComponent, opti..