9시 24분

노마드코더 '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..

학교 이메일 계정을 통해 Personal Pro 버전을 평생 무료로 사용할 수 있다. 1. 이메일 변경 Settings&Members - My Account에서 이메일을 변경해준다. 2. Personal Pro 버전으로 업그레이드 Settings&Members - Plans에서 아래로 쭉 내리면 Get Free education Plan이라는 파란 버튼이 보인다. 그것을 클릭하면 끝이다 !

오늘은 이제까지 만든 게시판 기능을 리팩토링하는 시간을 가졌다. 첫 번째로, 데이터를 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 훅 안에 ..

https://doozi316.github.io/errorlog/2019/09/30/error1/

일단 가장 기본적인 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..