거니의 velog

2. 회원가입과 로그인 구현 * 지금부터는 서비스에서 회원가입 기능과 로그인 기능을 구현한다. 먼저 UI부터 개발한 다음에 리덕스를 통한 상태 관리 및 API 요청을 구현할 것이다. (1) UI 구현하기 * 나중에 리덕스를 사용하여 컨테이너 컴포넌트를 만들고 상태 관리도 하겠지만, 지금 당장은 상태에 대해서는 신경 쓰지 않고 오직 UI만 개발하자. * 프레젠테이셔널 컴포넌트들은 components 디렉터리에 작성하고, 그 안에 기능별로 디렉터리를 새로 만들어서 컴포넌트를 분류할 것이다. 앞에서 Button 컴포넌트를 common이란 디렉터리에 만들었는데, 이미 설명했듯이 Button 컴포넌트는 여기저기서 재사용되는 컴포넌트이므로 common 디렉터리에 넣은 것이다. 회원 인증에 관련된 컴포넌트는 회원 인..

* 이 장에서는 리액트 프로젝트를 생성하여 지금까지 만든 서버에 연동해 볼 것이다. 프로젝트를 만들어 가면서 지금까지 배운 다양한 기술을 활용해 줄 것이다. 이 과정을 통해 실무에서 프로젝트를 개발할 때 어떤 방식으로 작업하는지 알 수 있다. * 프로젝트를 시작하기 전에 앞으로 어떤 기능을 개발하는 지 간략하게 살펴보자. (1) 회원가입/로그인 기능 (2) 글쓰기 기능 : 이 과정에서 Quill 이라는 WYSIWYG 에디터 라이브러리를 사용한다. * WYSIWYG 란 'What You See Is What You Get'의 약어이다. 사용자가 보는 대로 결과를 얻는다는 의미이며, '위지윅'이라고 읽는다. 위지윅 에디터에서는 글을 쓸 때 HTML을 직접 입력하면서 스타일을 설정하는 것이 아니라, 에디터에서..

5. posts API에 회원 인증 시스템 도입하기 * 이번에는 기존에 구현했던 posts API에 회원 인증 시스템을 도입해 보겠다. 새 포스트는 이제 로그인해야만 작성할 수 있고, 삭제와 수정은 작성자만 할 수 있도록 구현할 것이다. * 각각의 함수를 직접 수정해서 이 기능을 구현해도 되지만, 여기서는 미들웨어를 만들어서 관리해 보겠다. 또한, 각 포스트를 어떤 사용자가 작성했는지 알아야 하기 때문에 기존의 Post 스키마를 수정해 주어야 한다. (1) 스키마 수정하기 * 스키마에 사용자 정보를 넣어 주자. 보통 MariaDB, PostgreSQL 같은 관계형 데이터베이스에서는 데이터의 id만 관계 있는 데이터에 넣어 주는 반면, MongoDB에서는 필요한 데이터를 통째로 집어 넣는다. * 여기서는 ..

4. 토큰 발급 및 검증하기* 이제 클라이언트에서 사용자 로그인 정보를 지니고 있을 수 있도록 서버에서 토큰을 발급해 줄 것이다. JWT 토큰을 만들기 위해서는 jsonwebtoken이라는 모듈을 설치해야 한다.$ yarn add jsonwebtoken(1) 비밀키 설정하기* .env 파일을 열어서 JWT 토큰을 만들 때 사용할 비밀키를 만든다. 이 비밀키는 문자열로 아무거나 입력하면 된다. macOS/리눅스를 사용한다면 터미널에 다음 명령어를 입력해 보자.$ openssl rand -hex 64 6a8ec46e26672fce8051e796ece61d610d719c5eaaa45e46d6dd72110de6a466d96610be17598034583b23f9779b2bf4ebe43e6e508dbb81db5e5..

3. 회원 인증 API 만들기 * 이제 회원 인증 API를 만들어 보겠다. 먼저 새로운 라우트를 정의한다. api 디렉토리에 auth 디렉터리를 생성하고 그 안에 auth.ctrl.js를 작성하자. export const register = async (ctx) => { // 회원가입 }; export const login = async (ctx) => { // 로그인 }; export const check = async (ctx) => { // 로그인 상태 확인 }; export const logout = async (ctx) => { // 로그아웃 }; * 이번 라우트에서는 총 네 개의 API를 만들 것이다. 이렇게 함수의 틀만 잡아주고, auth 디렉터리에 index.js 파일을 만들어서 auth ..

2. User 스키마/모델 만들기 * User 스키마와 모델을 작성하여 사용자의 정보를 MongoDB에 담고 조회해 보자. 앞으로 만들 사용자 스키마에는 사용자 계정명과 비밀번호가 필요하다. * 비밀번호를 데이터베이스에 저장할 때 플레인(아무런 가공도 하지 않은) 텍스트로 저장하면 보안상 매우 위험하다. 따라서 단방향 해싱 함수를 지원해주는 bcrypt 라는 라이브러리를 사용하여 비밀번호를 안전하게 저장할 것이다. * 우선 models 디렉터리에 user.js 파일을 생성하자. 그리고 다음 스키마를 작성해 보자. import mongoose, { Schema } from 'mongoose'; const UserSchema = new Schema({ username: String, hashedPasswor..

1. JWT의 이해 * 이 장에서는 우리가 만든 서버에 회원 인증 시스템을 구현해 볼 것이다. 이 시스템을 구현하기 위해 JWT라는 기술을 사용한다. JWT는 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 두 개체가 서로 안전하게 정보를 주고 받을 수 있도록 웹 표준으로 정의된 기술 중 하나이다. (1) 세션 기반 인증과 토큰 기반 인증의 차이 * 사용자의 로그인 상태를 서버에서 처리하는 데 사용할 수 있는 대표적인 두 가지 인증 방식이 있다. 하나는 세션을 기반으로 인증하는 것이고, 다른 하나는 토큰을 기반으로 인증하는 것이다. 두 방식이 어떻게 다른지 한번 알아보자. [1] 세션 기반 인증 시스템 * 세션을 기반으로 인증 시스템을 만든다는 것은 어떤 의미일..

(4) 페이지 기능 구현 * 페이지 기능을 구현할 준비가 어느 정도 끝났다. 페이지 기능을 구현하려면 앞 절에서 배운 limit 함수를 사용해야 하고, 추가로 skip 함수도 사용해야 한다. * skip이란 표현에는 '넘긴다'라는 의미가 있다. skip 함수에 파라미터로 10을 넣어 주면, 처음 열 개를 제외하고 그 다음 데이터를 불러온다. 20을 넣어 준다면? 처음 20개를 제외하고 그다음 데이터 열 개를 불러온다. * 대충 감이 잡혔을 것이다. skip 함수의 파라미터에는 (page - 1) * 10을 넣어 주면 된다.1페이지는 처음 열 개를 불러오고, 2페이지에는 그다음 열 개를 불러오게 된다. page 값은 query에서 받아 오도록 설정한다. 이 값이 없으면 page 값을 1로 간주하여 첫 페이..

10. 페이지네이션 구현 * 블로그에서 포스트 목록을 볼 때 한 페이지에 보이는 포스트의 갯수는 10~20개 정도가 적당하다. 지금 만든 list API는 현재 작성된 모든 포스트를 불러오는데, 포스트 갯수가 몇 백 개라면 로딩 속도가 느려질 것이다. 또 포스트 목록을 볼 때 포스트 전체 내용을 보여 줄 필요는 없고, 처음 200자(글자) 정도만 보여 주면 적당하다. 불필요하게 모든 내용을 보여 주면 역시 로딩 속도가 지연되고, 트래픽이 낭비될 것이다. * 따라서 list API에 페이지네이션(pagination) 기능을 한 번 구현해 보겠다. (1) 가짜 데이터 생성하기 * 페이지네이션 기능을 구현하려면 우선 데이터가 충분히 있어야 한다. 수작업을 직접 등록을 해도 좋지만, 좀 더 편하게 데이터를 채우..

8. 데이터 삭제와 수정 (1) 데이터 삭제 * 이번에는 데이터를 삭제해 보겠다. 데이터를 삭제할 때는 여러 종류의 함수를 사용할 수 있다. (1) remove() : 특정 조건을 만족하는 데이터를 모두 지운다. (2) findByIdAndRemove() : id를 찾아서 지운다. (3) findOneAndRemove() : 특정 조건을 만족하는 데이터 하나를 찾아서 제거한다. * 우리는 위 함수 중 findByIdAndRemove() 를 사용하여 데이터를 제거해 볼 것이다. [src/api/posts/posts.ctrl.js] /* DELETE /api/posts/:id */ export const remove = async (ctx) => { const { id } = ctx.params; try {..