본문 바로가기

엘리스 AI 트랙 4기90

[7주차] React와 Create React App 3월 2일 자 학습 내용 정리입니다. ✅ SPA 전통적인 페이지 방식은 최초에 서버로부터 HTML을 전달받고 페이지의 변경이 필요할 때 다시 서버에 요청해 HTML을 전달받는다. 이 과정에서 페이지는 변경이 필요할 때마다 처음부터 끝까지 다시 로드된다. 반면 SPA(Single Page Application)는 최초에 서버로부터 HTML을 전달받고 페이지의 변경이 필요할 때 변경이 필요한 부분만 JSON으로 전달받는다. 그리고 페이지에서 변경된 부분만 계산해 다시 그린다. 예를 들어 사용자가 로그인에 성공했다면 서버가 로그인이 성공했다는 메세지를 JSON 형식으로 보내는 식이다. 클라이언트는 이 메세지를 받고 로그인에 관련된 페이지가 어떤 변경이 필요한지 알 수 있다. React는 SPA 방식을 따른다... 2022. 3. 2.
[6주차] 3계층 설계 2월 26일 자 학습 내용 정리입니다. ✅설계 프로그래밍에서의 코드 설계란 코드와 파일, 폴더 구조를 설계하는 것을 말한다. 하나의 파일에 모든 코드를 작성하는 것과 같이 적절한 설계 과정이 이루어 지지 않은 경우 다음과 같은 문제가 발생할 수 있다. 수정할 사항을 찾기 힘들다. (유지보수가 어렵다.) 코드와 코드 사이의 관계를 파악하기 힘들다. 각 코드의 역할과 기능이 명확히 구분되어 있지 않아 기능별로 테스트(유닛테스트)를 진행하는 것이 어렵다. 하나의 파일을 여러 사람이 동시에 수정하기는 힘들기 때문에 분업이 어렵다. 새로운 기능을 추가하고자 할 때 기존 코드의 어느 부분에 수정, 추가할지 알아내기 힘들기 때문에 확장성이 부족하다. 따라서 위의 문제들을 해결하기 위해 코드 설계 구조가 만들어진 것이.. 2022. 2. 26.
[6주차] OAuth와 Nginx 2월 25일 자 학습 내용 정리입니다. ✅ OAuth OAuth(Open Authorization)는 서비스 제공자가 다른 서비스에게 데이터를 제공하기 위해 서비스 사용자에게 제공하는 사용자 인증방식의 표준을 의미한다. OAuth 동작 방식은 아래와 같다. 서비스 제공자에게 인증 요청 인증 완료 후 사용자 정보를 요청한 서비스로 전달 인증 정보를 이용해 서비스 제공자의 데이터 사용 ✏️ 예제 - 구글 로그인 구현 passport가 제공하는 구글 로그인 구현체인 passport-google-oauth20을 사용하면 구글 로그인을 구현할 수 있다. const GoogleStrategy = require('passport-google-oauth20').Strategy; const config = { clien.. 2022. 2. 25.
[6주차] JSON Web Token 2월 25일 자 학습 내용 정리입니다. ✅ JWT JWT(JSON Web Token)는 인증을 위한 정보를 전자 서명을 이용하여 확인하는 방법이다. session과 달리 정보를 가져오거나 보낼 때 특별한 저장소를 이용하지 않는다. session은 기본적으로 웹 브라우저의 통신 스펙이기 때문에 모바일 앱 등 웹 브라우저가 아닌 어플리케이션의 경우 이를 활용하기 부적합하다. 반면 JWT는 어느 클라이언트에서나 동일한 방식의 사용자 인증을 구현할 수 있다. JWT는 header, payload, signature의 세 가지 구성요소로 이루어진다. header : 토큰의 타입, 데이터 서명 방식 payload : 전달되는 데이터 signature : header와 payload의 전자서명 JWT는 이름에서도 알.. 2022. 2. 25.
[6주차] Session과 Session Store 2월 23일 자 학습 내용 정리입니다. ✅ Session 세션(Session)은 웹 서버가 클라이언트의 정보를 클라이언트별로 구분하여 서버에 저장하고 클라이언트 요청 시 세션 아이디(Session ID)를 사용하여 클라이언트의 정보를 다시 확인하는 기술이다. 이는 클라이언트가 정보를 저장하고 요청 시 정보를 보내는 쿠키(Cookie)와 반대되는 개념이다. 세션의 작동방식은 다음과 같다. 서버는 세션을 생성하여 세션의 구분자인 Session ID를 클라이언트에 전달한다. 클라이언트는 요청 시 Session ID를 요청에 함께 담아 전송한다. 서버는 전달받은 Session ID로 해당하는 세션을 찾아 클라이언트의 정보를 확인한다. Express.js에서는 express-session 패키지를 사용하여 간단하.. 2022. 2. 23.
[6주차] Passport.js와 로그인 구현하기 2월 23일 자 학습 내용 정리입니다. ✅ Passport.js Passport.js는 Express.js 어플리케이션에 간단하게 사용자 인증 기능을 구현하게 도와주는 패키지이다. 유저 세션 관리 및 다양한 로그인 방식 추가 기능을 지원한다. Passport.js는 다양한 로그인 방식을 구현하기 위해 strategy라는 인터페이스를 제공한다. strategy 인터페이스에 맞게 설계된 구현체를 그대로 passport에 붙이면 passport는 로그인 구현을 도와준다. passport-google-oauth, passport-facebook, passport-twitter, passport-kakao, passport-naver 같이 SNS 계정을 통해서 바로 로그인할 수 있는 패키지 등 다양한 구현체들이 .. 2022. 2. 23.
[6주차] crypto와 회원가입 구현하기 2월 23일 자 학습 내용 정리입니다. ✅ crypto crypto는 Node.js의 기본 모듈로 OpenSSL의 해시, HMAC, 암호, 해독, 서명 및 확인 등의 암호화 기능을 제공한다. 회원가입 기능 구현 시 회원의 비밀번호를 그대로 데이터베이스에 저장하게 되면 관리자가 모든 회원의 비밀번호를 알 수 있고 탈취가 일어날 수 있어 보안 취약점이 발생한다. 따라서 이 경우 hash를 이용한다. hash는 문자열을 되돌릴 수 없는 방식으로 암호화하는 방법이다. 해시 함수는 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는데 이 결과로 얻어진 해시 값은 원래의 형태로 되돌릴 수 없다. 회원가입 구현 시 hash를 이용하는 방법은 다음과 같다. 입력받은 비밀번호의 hash 값을 데이터베이스에 저장한다... 2022. 2. 23.
[5주차] Express.js + Mongoose로 Pagination 구현하기 2월 19일 자 학습 내용 정리입니다. ✏️ 예제 - Pagination 데이터가 많아지면 한 페이지의 목록에 모든 데이터를 표현하기 어렵다. Pagination이란 데이터를 균일한 수로 나누어 페이지로 분리하는 것을 말한다. const express = require('express'); const router = express.Router(); router.get(url, async (req, res) => { const page = Number(req.query.page || 1); // 현재 페이지 const perPage = Number(req.query.perPage || 10); // 페이지 당 게시글 수 const total = await Post.countDocument({}); cons.. 2022. 2. 19.
[5주차] Pug와 Async Request Handler, PM2 2월 19일 자 학습 내용 정리입니다. ✅ Template Engine 템플릿 엔진(Template Engine)이란 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장해놓는 것이다. 동작 시에 미리 작성된 템플릿에 데이터를 넣어 완성된 HTML을 생성한다. 템플릿 엔진은 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공한다. Express.js의 템플릿 엔진에는 EJS, Mustache, Pug 등이 있다. EJS : html과 유사한 문법을 가짐 Mustache : 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진 Pug : 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등의 기능 제공 그 중 Pug는 들여쓰기 표현식을 이용해 가독성이 좋고 개발 생산성이 높다.. 2022. 2. 19.

티스토리툴바