
우리는 기존에 웹 애플리케이션을 만들기 위해 브라우저 상에서 HTML, CSS, JavaScript 언어를 사용했다. JavaScript 언어를 실행하기 위해서 우리는 매번 브라우저를 이용해야만 했다.하지만 이러한 불편한 점을 개선해 내 로컬 환경에서도 JavaScri

프론트엔드 클라이언트에서 우리가 만든 백엔드 서버의 API로 요청을 보냈다면,우리는 그 요청을 잘 받아와서 이후의 로직을 수행해줘야 한다. 때문에 백엔드는 우선 서버를 구현할 필요가 있다.express는 Node.js를 활용해 이러한 웹 서버를 개발할 수 있도록 도와주

지금부터 게시글을 조회하는 API를 Rest로 만들어 보도록 하자. Rest-API에서 데이터를 가져오는 요청은 GET method이다./boards라는 엔드포인트로 GET 요청이 들어왔을 때, 데이터가 조회될 수 있도록 우리는 로직을 추가해 주어야 한다.DB접속은 추

스웨거는 REST API를 쉽게 문서화하고 테스트할 수 있도록 도와주는 도구이다.실습을 통해 학습해 보겠습니다.먼저 03-03-rest-api-with-express-board 폴더를 복사 붙여넣기 해 사본을 만들어줍니다.폴더명을 03-04-rest-api-with-e

section03폴더 내에 새로운 폴더 03-05-rest-api-with-frontend를 만들어 준 뒤에, 해당 폴더 내에 frontend, backend 폴더를 만들어준다.이전에 작업한 03-04-rest-api-with-express-swagger 폴더의 내용을

지금까지 Rest-API를 사용하기 위해 express를 사용해 서버를 띄워왔다.지금부터는 GraphQL-API를 사용해보기 위해서 express와 비슷한 역할을 해주는 @apollo/server를 설치하고 이에 대해서 간단히 알아보자.새로운 폴더 03-06-graph

Apollo server를 통해 어떤 방식으로 객체가 생성되고 반환되는지를 직접 확인했으니, 이제 API를 직접 작성해보자지금 작업한 03-06-graphql-api-with-apollo-server 폴더를 복사해서03-07-graphql-api-with-apollo-

axios는 기본적으로 async/await 를 지원하는 라이브러리다. 다음 예시에서 axios를 이용해 async/await를 사용하는 방법을 알아보자.위 코드는 ES2017에서 추가 된 async/await를 이용한 코드다. 비동기 작업을 수행하고자 하는 함수 앞에

도커는 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 저장한 이미지를 클라우드에 올립니다. 이미지들이 서로 연결되서 동작하는 설정을 문서(Dockerfile)로 저장합니다. 새 컴퓨터에 가서 복사한 문서의 내용대로 이미지를 다운받아 설치합니다. 가상머신과 비슷

03-10-rest-api-with-email 폴더를 복사 붙여넣기해 04-02-docker-with-express로 이름을 변경합니다. backend 폴더로 이동하여 폴더 안에 Dockerfile을 만들어줍니다.FROM node:14 node가 설치되어 있는 리눅스
04-02-docker-with-express 폴더를 복사 붙여넣기 해 사본을 만들고폴더 이름을 04-03-docker-with-express-package-json 로 변경합니다. 기존 Dockerfile 은 다음과 같습니다.만약에, index.js 파일의 소스코드를

MongoDB는 문서지향(Document-Oriented) 저장소를 제공하는 NoSQL 데이터베이스 시스템입니다.이외에도 NoSQL 데이터베이스 10gen, Couchbse, CouchDB 등이 있지만 인지도 1위를 유지하고 있습니다. MongoDB에서는 데이터가 Do

Docker-compose란 복수 개의 컨테이너를 실행시키는 도커 애플리케이션이 정의를 하기 위한 툴입니다.기본적으로 YAML 파일을 사용하여 애플리케이션의 서비스를 구성할 수 있습니다.즉 YAML 파일로 여러 개의 docker 내부 속성을 설정하고 YAML 파일을 실
Dockerfile.mongodb를 image로 변경해 보겠습니다. 즉 Dockerfile.mongo로 정의해두었던 mongoDB의 설정을 야믈파일에 직접 정의해 보겠습니다.class 폴더 안에 04-04-docker-compose-with-mongo 폴더를 복사 붙여

section04 → 04-05-docker-compose-with-mongoose 폴더를 복사 붙여넣기 해주세요. 복사된 폴더의 이름을 04-06-docker-compose-with-mongoose-board으로 변경해 주세요.Model 정의를 위해 backend 폴
지금은 로컬의 파일을 변경하여도 docker내의 파일은 변경되지 않습니다.로컬에서 소스코드 변경하면, docker내에도 적용하기docker내에서 nodemon으로 실행시키기위의 두가지 모두 적용해야 도커내에서도 매번 build를 하지 않고 변경된 소스코드를 적용할 수

지금은 로컬의 파일을 변경하여도 docker내의 파일은 변경되지 않습니다.로컬에서 소스코드 변경하면, docker내에도 적용하기docker내에서 nodemon으로 실행시키기위의 두가지 모두 적용해야 도커내에서도 매번 build를 하지 않고 변경된 소스코드를 적용할 수

디자인 패턴은 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 "규약"을 통해 쉽게 쓸 수 있는 형태로 만든 것을 말한다.디자인 패턴에는 크게 생성, 행위, 구조 패턴이 있고 그

강한 결합(Tight Coupling)은 클래스와 객체가 서로 의존(Dependency)하고 있는 것입니다.아래에서 배울 느슨한 결합(Loose Coupling)의 반대 개념이라고 생각하면 됩니다.하나의 객체를 변경하게 되면 다른 객체들을 변경을 요구되어 변경점들을 확

이번에는 TypeScript 파일들에 대해서 알아보자src 폴더의 main.ts 파일을 열어주면처음에 실행되는 부분이 main.ts 파일이다.main.ts 는 controller, module, service 들이 최종적으로 처리되는 부분이다.bootstrap : 함수

이전에는 NestJS 와 Rest API & TypeScript를 사용했지만 이번에는 GraphQL & TypeScript를 사용하는 방법에 대해서 알아보자Nest는 GraphQL 애플리케이션을 빌드 하는데 스키마 우선(schema first) 및 코드 우선(code

이전에는 MongoDB를 설치하여 Mongo 명령어를 통해 MongoDB 쉘에 접속해 보았다.이번에는 설치한 Mysql 쉘에 접속해보자Mac의 경우,먼저 mysql이 실행되고 있는지 확인해 보자.터미널에서 brew services list 명령어를 통해 확인 가능하다.
TypeORM을 활용한 MySQL 연결 이번에는 TypeORM을 활용해서 NestJS와 MySQ 연결해 보겠습니다.MongoDB와 유사합니다. section08 폴더 내 08-02-nestjs-with-graphql 폴더에서 node_modules 와 dist 폴더

section08 폴더 내 08-04-nestjs-with-typeorm 폴더에서 node_modules 와 dist 폴더를 삭제하신 뒤, 복사하여 붙여 넣어서 이름을 08-05-nestjs-with-typeom-api 로 바꿔주세요.08-05-nestjs-with-t

이제 데이터를 직접 채워 넣고 조회해 보도록 하겠습니다.실무에서는 SQL Query문을 직접 작성하는 일은 드뭅니다. 몽고DB 했을 때와 마찬가지로 API 를 만들어서 데이터를 입력, 조회, 삭제 하게 됩니다.10-01-mysql-relation 폴더가 실행중인 DBe

이번에는 Typeorm과 Graphql 사용해 CRU API 구현하겠습니다. 이전에는 실제 데이터와 연결만 진행했지만 이번에는 API를 이용해서 데이터베이스에 저장하고 저장한 데이터를 읽어와서 수정까지 진행해 보겠습니다.이번에는 카테고리에 해당하는 상품을 등록해보겠습니

section10 폴더 내에 10-03-typeorm-crud 폴더를 복사해 붙여넣어 주세요.복사한 폴더의 이름을 10-04-typeorm-crud-validation 폴더로 변경해 주세요.10-04-typeorm-crud-validation → src → apis →

지난 시간까지 API에서 Create, Read, Update를 만들어 봤습니다.이제는 Delete를 해볼 차례입니다. 10-04-typeorm-crud-validation 폴더를 복사 붙여넣기해 사본을 만들고,폴더 이름을 10-05-typeorm-crud-soft-d

1 : 1 관계는 하나의 테이블에 데이터가 생성되면 관계있는 다른 테이블에도 데이터가 생성되어야 합니다. 10-05-typeorm-soft-delete 폴더를 복사 붙여넣기해 사본을 만들고, 10-06-typeorm-crud-one-to-one 로 폴더 이름을 변경해주

상품과 카테고리는 N : 1 관계입니다.상품 데이터를 추가할 때, 카테고리도 새로 추가되는 것은 아닙니다. 이미 등록되어 있는 카테고리를 찾아서 상품에 넣어주기만 합니다. 즉, 상품을 등록할 때 카테고리가 등록 될 수 있도록 만들어 보겠습니다. 10-06-typeorm

N : M 관계의 테이블에 데이터를 등록해보겠습니다.10-07-typeorm-crud-many-to-one 폴더를 복사 붙여넣기 하여 10-08-typeorm-crud-many-to-many 폴더로 이름을 변경해 주세요. yarn install 을 입력해 필요한 모듈을

브라우저에서 특정 email과 password를 가지고 로그인을 하게 되면 Backend로 loginAPI 요청이 날아가게 되고, Backend에서는 해당 유저를 Backend session에 저장하게 됩니다.그 후 특정한 session ID를 부여해서 브라우저로 보내

로그인 프로세스에 대해 알아보았으니 실제 로그인을 해보자로그인을 하기에 앞서 회원가입을 진행해 주셔야 합니다.회원가입과 로그인 모두 Playground에 들어가 Docs를 보고 진행 해주시면 됩니다.로그인을 하게 되면 아래와 같이 JWT 토큰인 acessToken을 받

이제는 로그인을 하기 전에 회원가입을 하는 API를 만들어보겠습니다.class 폴더 내에 section11 폴더를 만들어 주세요.section11 폴더 안에 10-08-typeorm-crud-many-to-many 폴더를 복사해서 붙여 넣고, 11-01-signup 으

이제 로그인을 위한 API를 설계해 보겠습니다.회원가입과 동시에 사용자 인가를 해줄 수 있게 토큰을 발행하는 토큰 기반 인증 시스템을 적용하겠습니다.토큰 기반 인증은 최근의 웹서비스에서 아주 많이 사용되고 있습니다. 토큰 기반 인증 시스템은 어떻게 작동되고, 무슨 장점

로그인 요청을 하고 나서, 서버에서 토큰을 프론트에게 넘겨줄 때, 토큰을 하나 더 만들어서 넘겨줍니다. 하나 더 만든 토큰을 refresh token이라고 하고 기존에 발행하던 토큰을 access token이라고 합니다.refresh token은 access token
로그인 API 확장 Login ( + JWT기반 refreshToken 쿠키에 저장하기 ) 이번에는 refreshToken을 발행하면서 cookie에 refreshToken이 잘 들어가는지 확인해 보고 토큰이 만료되었을 때의 에러를 확인해 보겠습니다. sectio

이번에는 토큰이 만료되었을 경우 refreshToken을 사용해 accessToken을 재발행해 보겠습니다.이때, refreshToken을 가지고 인가를 해주는 단계도 거쳐야 합니다.전체 로직을 한번 설명해 드리겠습니다.accessToken이 만료되었습니다.refres
이미지 업로드 과정은 회사 또는 보완,성능의 중요도에 따라 전체적인 구조는 완전히 다를 수 있습니다!이미지 업로드의 가장 기본적인 방식에 대해 설명드리겠습니다.브라우저에서 사용자가 업로드할 이미지 파일을 선택합니다.브라우저에서 선택된 파일을 변수에 저장합니다. 변수에