전체 글 90

[항해 14기] 6주차 WIL (CORS)

1. CORS 1) Cross-Origin Resource Sharing - 웹 애플리케이션에서 다른 도메인(Origin)으로부터 리소스를 요청하면 동일 출처 정책(Same-Origin Policy)이 발생하여 요청이 차단되는데 이 때 CORS체제를 이용하여 접근 가능하도록 권한 부여가 가능 2) 도메인/출처 Protocol,Host,Port 까지 같으면 동일한 출처 3) 다른 출처를 허용할 경우 위험성 - CSRF(Cross-Site Request Forgery) 공격: 다른 도메인으로부터의 요청을 허용하면 악의적인 웹 사이트가 사용자의 인증 정보를 도용하여 서비스의 보안을 침해할 수 있다 - 정보 노출: 다른 도메인에서 요청한 리소스에는 사용자의 개인 정보가 포함될 수 있기 때문에 위험 4) CORS..

[항해 14기] 개발일지30 (미니 프로젝트 - Auth/User기능 구현)

미니 프로젝트 주차 1. 진행사항 - 로그인, 로그아웃, 회원가입 진행 2. 새로 시도 한 것 - 기존 jwt 로그인 방식에서 access/refresh token 도입 - 로그아웃 구현 3. 고찰 1) 로그아웃 - 로그인 로직의 반대로 구성해주면 될 것으로 생각 - 로그인 로직 : 쿠키에 access/refresh token을 담아줬고, 이후 인증요청 시도 시 인증 미들웨어에서 토큰을 검증 한 뒤 이상 없으면 res.local에 로그인한 user의 정보를 담아줌, 이후 각 비즈니스로직에서 res.local 정보를 이용하여 로직 수행 - 로그아웃 로직 : 쿠키값들을 제거해주고, res.local 값을 삭제해줌 2) access/refresh token - 기존 인증 로직은 jwt token으로 만들어진 ..

[항해 14기] 개발일지29 (미니 프로젝트 - 발제)

미니 프로젝트 주차 1. 팀플 개요 1) FE기능 구상 - 메인페이지, 플레이페이지, 상세결과페이지, 스타일링(css,컴포넌트), css통합 - 로그인 페이지, 회원가입 페이지, 마이페이지, 컨텐츠 등록 페이지, header제작 2) BE기능 구상 - 회원가입, 로그인, 로그아웃, refresh token - 마이페이지 로그인유저 생성 컨텐츠 조회, 로그인유저 이용 컨텐츠 기록 조회, 기능 단위 테스트 - 컨텐츠 생성, 조회, 상세조회, 수정, 삭제, data validation - joi, 댓글CRUD, 컨텐츠 좋아요 기능 - 스웨거, CORS, 배포 3) BE 챌린지 - 이메일 인증, 컨텐츠 이용 통계, 테스트코드 2. 와이어프레임, ERD, 명세서 1) 와이어프레임 https://www.figma...

[항해 14기] 개발일지28 (Transaction, Returning)

Node.js 심화 1.Transaction 1) 개요 - 작업의 완전성을 보장해주기 위해 사용되는 개념. 데이터베이스에서 특정한 작업을 전부 처리하거나, 전부 실패하게 만들어 데이터의 일관성을 보장해주는 기능 - 트랜잭션(Transaction)을 사용하는 대표적인 이유는 작업의 단위를 하나의 쿼리에 종속하는 것이 아닌, 여러개의 작업(쿼리)을 묶어 하나의 작업 단위로 그룹화하여 처리 2) 특징(ACID) - A : 원자성(Atomicity) 트랜잭션 내에서 실행되는 명령들을 하나의 묶음으로 처리하여, 내부에서 실행된 명령들이 전부 성공 또는 전부 실패 해야한다는 특징 - C : 일관성(Consistency) 트랜잭션 내부에서 처리되는 데이터의 일관성을 유지해야하는 특징. ROLLBACK을 통하여 작업이..

[항해 14기] 개발일지27 (Swagger, Access/Refresh Token)

Swagger, Access/Refresh Token 1. Swagger 1) 정의 - RESTful API를 문서화하고 시각화하는 도구(api명세) - API를 개발, 테스트, 공유를 용이하게 하여 협업 생산성 증가 - API를 문서화하기 위한 명세 언어인 OpenAPI Specification을 사용, 자동으로 API 문서를 생성하고, 명세서ui제공 2) swagger-autogen - swagger의 기본 틀을 자동생성하는 node.js 라이브러리 3) 사용법 - npm i swagger-ui-express swagger-autogen - app.js에 const swaggerUi = require("swagger-ui-express"); const swaggerFile = require("./sw..

[항해 14기] 개발일지26 (5lv 리팩토링)

5레벨 리팩토링 1. Comment Controller - 예외처리 추가 2. 명세서 추가 반영, 코드 최적화 - api명세서에 적힌것과 다른 부분이 있어 수정(res 형식, 오류코드 등) - 에러를 보기위해 기입한 콘솔로그, 계층 분해하다 의미 없이 남겨진 코드들 제거 - 토큰을 서비스와 컨트롤러에서 2중으로 발급하고 있어서 서비스 로직으로 통합 3. 새로 발생한 오류 예외처리 - 계층 분해를 한 뒤 각 계층에서 데이터가 오갈 때 undefined로 매개변수가 들어오면 리턴을 해주지 못하여 에러가 나면서 서버가 종료됨 - 해당 부분들에 if문으로 예외처리 4. 예정사항 - 해당 과제물을 교보재로 삼아 추가적으로 공부할 내용들을 적용시켜가며 지속적인 리팩토링 예정

[항해 14기] 개발일지25 (Node.js 5lv 과제)

5레벨 리뷰 1. 과제 요구 사항 1) 4레벨을 레이어드 아키택쳐로 재구성 2. 구상 1) 계층 분해 공부 후 적용 2) 라우트/컨트롤러/서비스/레포 로 분해 3) 스웨거/트랜잭션/액세스,리프레쉬토큰 적용 3. 구현 1) Directory Structure 2) 기존 라우트에서 기능을 분해하여 컨트롤러/서비스/레포로 분리 3) 리팩토링 - 선 제출 후 남은 주특기 기간동안 스웨거/트랜잭션/액세스,리프레쉬토큰/테스트코드 등 진행 예정 4. 리뷰 1) 5lv - 프로젝트를 만들 때 레이어드 아키택쳐로 설계가 가능해짐 - 컨트롤러/서비스/레포지토리 각 계층의 역할을 명확히 인지함 - 레이어드 아키택쳐로 설계시 장/단점을 알게됨 2) 고찰 - 레포지토리에서 오는 값들을 서비스에서 받을 수 있게 가공해줘야했는데,..

[항해 14기] 5주차 WIL (ORM, SQL/NoSQL)

1. ORM 1) ORM(Object-Relational Mapping) - 객체 지향 프로그래밍 언어와 관계형 데이터베이스 간의 데이터를 매핑하고 연결하는 기술 2) 특성 - ORM을 사용하면 데이터베이스 테이블과 객체를 일치시키기 위한 별도의 SQL 쿼리를 작성할 필요 없이, 객체를 통해 데이터베이스를 조작 가능 - ORM은 데이터베이스 스키마를 추상화하여 객체와 관련된 데이터에 접근성을 높여 쉽게 관리할 수 있게 해줌 3) 상세 - 객체 지향 프로그래밍은 클래스를 이용하고 관계형 데이터베이스는 테이블을 이용하는데 객체 모델과 관계형 모델 간의 불일치가 존재 - ORM을 이용해서 데이터베이스 접근을 프로그래밍 언어의 관점에서 맞출 수 있고 객체 간의 관계를 바탕으로 SQL을 자동으로 생성하여 불일치를..

[항해 14기] 개발일지24 (Layered Architecture Pattern)

Node.js 심화 1. Architecture Pattern 1) 정의 - 소프트웨어의 구조를 구성하기 위한 가장 기본적인 토대를 제시 - 각각의 시스템과 역할이 정해져있고, 해당 시스템들의 관계와 규칙등이 포함 2) 특성 - 검증된 구조로 개발을 진행하기 때문에 안정적인 개발 가능 - 도메인이 복잡할수록 모델/코드의 관리가 용이 3) 대표적인 종류 - 저장소 패턴 : 모든 데이터가 메모리에 존재하는 것처럼 가정하고, 이를 추상화함 - 서비스 계층 패턴 : usecase의 시작과 끝의 진행과정을 명확하게 정의 - 작업 단위 패턴 : 비즈니스 트랜잭션의 영향받은 개체의 리스트를 관리, 변화 기록(원자적 연산 제공) - 애그리게이트 패턴 : 데이터의 정합성을 강화 4) 아키택쳐 패턴 도입 전 고민 사항 -..

[항해 14기] 개발일지23 (Prettier, Socket, Domain)

Node.js 심화 1. Prettier 1) 코드 서식 - 일관적으로 처리하면 오타 감소, 가독성 상승 - 협업 시 코드 충돌 방지 2) 코드 컨벤션을 통하여 규약 통일 - JS 코딩 컨벤션 예시(https://ui.toast.com/fe-guide/ko_CODING-CONVENTION) 3) Prettier - 코드 서식 관리 도구 - 기본 규칙(https://prettier.io/docs/en/configuration.html#basic-configuration) 4) vscode - 익스텐션으로 간단하게 사용 가능 5) npm - npm i prettier -D - .prettierrc.js 생성 이후(app.js파일과 같은위치), 아래 코드 입력 { "printWidth": 80, // 줄 바꿈..