9시 24분

테스팅에 대한 소개 package.json 파일을 보면 테스팅과 관련된 스크립트가 5개 정도 있다. jest는, 자바스크립트를 쉽게 테스팅하는 npm 패키지로, .spec.ts로 된 테스트를 포함한 파일들을 테스트한다. test:cov 코드가 얼마나 테스팅 됐는지 또는 안됐는지를 보여준다. test:watch 모든 테스트 파일을 찾아 무슨 일이 있는지 관찰한다. 테스트의 종류에는 E2E(End-To-End) 테스팅, Integration 테스팅, Unit 테스팅이 있는데 강의에서는 E2E(End-To-End) 테스팅과 Unit 테스팅을 다룬다. Unit 테스팅 - 함수나 서비스에서 분리된 유닛 같이 테스트할 수 있는 가장 작은 단위를 독립적으로 테스트 방법이다. ex) getAll() 함수만 테스팅하고 ..

이제 실전으로 가서 Movie REST API를 직접 만들어보자. Movies Controller Nest cli를 이용해서 controller 파일을 만들어주자. nest generate 명령어를 사용하여 movies controller을 생성해준다. app.module.ts에 movies 컨트롤러가 자동으로 import되며, movies.controller.ts 파일이 생성된다. spec는 테스트 파일인데, 일단 지우고 시작하자. movies controller에 들어가서 아래와 같이 테스트해보자. import { Controller, Get } from '@nestjs/common'; @Controller('movies') export class MoviesController { @Get() get..

노마드코더 'NestJS로 API 만들기' 강의를 들으며 작성하는 글입니다. NestJS란? NestJS는, node.js와 express 위에서 움직이는 프레임워크로 백엔드를 구성할 수 있도록 해준다. NestJS는 기본에 충실하며, node.js에는 없는 구조를 가지고 있다. Ruby에는 Ruby on Rails가 있으며, 순서와 구조를 가지고 있어 그것을 제대로 따른다면 멋진 ruby 버킷을 만들 수 있게 된다. Python과 Django, JAVA와 Spring도 마찬가지이다. 이것들은 큰 테마로 작업을 할 때 가능 구조상 실수를 하기 어렵다. NestJS는 그러한 프레임워크의 특징을 가져왔다. Node.js의 장점이자 단점은 프로젝트를 만들 때 따를 룰이 없다는 것이다. (ex. 컨트롤러와 미들..

노마드코더 강의를 보면서 정리한 글입니다. Typescript란? 타입스크립트는 자바스크립트에 타입을 부여한, 자바스크립트의 슈퍼셋 언어로, 자바스크립트의 확장된 언어라고 볼 수 있다. 확장자로는 .ts를 사용하며, 컴파일의 결과물로 자바스크립트 코드를 출력한다. 타입스크립트는 왜 배워야 하는걸까? 타입스크립트는 아래 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다. 에러의 사전 방지 코드 가이드 및 자동 완성 (개발 생산성 확장) Setting 우선 npm init 명령어를 통해 package.json 파일을 만들어주자. 처음에는 패키지 이름을 typescript로 했다가 npm install 과정에서 이름이 겹쳐 npm install이 되지 않았다. 그러므로 패키지 이름을 다르..

axios, fetch 등 프론트엔드와의 API 통신 없이 프로젝트를 진행할 때 필요한 진행과정이다. 미들웨어 설치할 것들 목록 session 설치 npm install -s express-session session-file-store 설치 npm install -s session-file-store helmet, compression설치 npm install -s compression helmet passport 설치 npm install --save passport shortid 설치 npm install -s shortid (프론트) bcrypt 설치 npm install -s bcrypt passport-local 설치 npm install -s passport-local mysql 설치 npm..

오늘은 이제까지 만든 게시판 기능을 리팩토링하는 시간을 가졌다. 첫 번째로, 데이터를 fetch하는 코드(axios.get)에 async&await을 도입해주었다. useEffect( ()=>{ async function getContent(){ await axios.get('http://localhost:3002/board') .then((res) => { console.log(res.data); setViewContent(res.data); }) .catch((err)=> { console.log(err); }); } getContent(); }, []); 처음에 useEffect 훅에 바로 사용하려고 했더니, 아래와 같은 경고가 발생하였다. 그래서 useEffect 훅 안에 ..

일단 가장 기본적인 GET, POST를 연습했으니 실전에 돌입해보자! (PUT, DELETE 등은 실전을 하면서 배우자) 글 생성 이제까지는 를 이용하여 게시판 기능을 구현하였지만 이번에는 텍스트 에디터라는 것을 사용해보자! WYSIWYG의 ckEditor을 한 번 사용해보자. npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic 설치가 완료되면 Create.js를 아래와 같이 바꾸자. 기존에 하던 방식과 비슷한데 자리에 CKEditor 컴포넌트가 들어갔다고 생각하면 된다. import React from "react"; import "./Create.css"; import { CKEditor } from "@cked..

useEffect useEffect는 componentWillUnmount, componenDidMount, componentWillUpdate의 기능을 한다. import React, { useEffect } from "react"; const App = () => { const sayHello = () => { console.log('hello'); } useEffect(() => { sayHello(); }); return ( ); } export default App; 아무것도 하지 않았는데 console에 hello가 출력된 것을 볼 수 있다. 이를 통해 useEffect가 componenDidMount의 역할을 한다는 것을 알 수 있다. import React, { useEffect, useS..