# 관련링크 - [이후수업 : REST API 로 구현하는 게시판, 2nd - slog.gg/p/13355](https://slog.gg/p/13355) # 1강 - [24 01 17, p 13336, 1강, 백엔드 프로젝트 세팅](https://youtu.be/C9wxFMeq2nw) - [리포지터리 - https://github.com/jhs512/rest-sveltekit-24-01-17](https://github.com/jhs512/rest-sveltekit-24-01-17) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/882e5a5) # 2강 - [24 01 17, p 13336, 2강, node.js v20 설치](https://youtu.be/4QgtSeqNqJ0) - [node.js - https://nodejs.org/](https://nodejs.org/) - [node.js - 다운로드 - https://nodejs.org/en/download/](https://nodejs.org/en/download/) - [nvm windows - download - https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases) - 윈도우에서는 이걸로 설치해도 됩니다. - [글 - NVM(Node Version Manage) 설치 및 사용해보기 (Mac) - https://suinchoi.tistory.com/115](https://suinchoi.tistory.com/115) - mac에서는 이걸로 설치해도 됩니다. ## nvm 명령어 - nvm list - 현재 설치되어 있는 node.js 버전들 리스팅 - nvm install v20.9.0 - v20.9.0 설치 - nvm use v20.9.0 - 해당 node 버전 활성화 # 3강 - [24 01 17, p 13336, 3강, node 개발툴인 VS CODE 설치](https://youtu.be/iVQSlP6UylM) - [VS CODE - https://code.visualstudio.com/](https://code.visualstudio.com/) # 4강 - [24 01 17, p 13336, 4강, npm 에 전역설정을 하여 npm install 시에 매번 legacy-peer-deps 옵션을 안붙여도 되도록](https://youtu.be/XNnnST_gwAI) ## legacy-peer-deps 이 기본적으로 작동하도록 전역설정 ```bash npm config set legacy-peer-deps true # 이제 더 이상 --legacy-peer-deps 를 명시적으로 입력하지 않아도 된다. npm config get legacy-peer-deps # 확인 ``` # 5강 - [24 01 17, p 13336, 5강, code front 명령으로 VS CODE 로 front 프로젝트 폴더 열고 의존성 설치, 실행](https://youtu.be/sEqszp-tFrw) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/856a67a) ## 프로젝트 생성 ```bash npm create svelte@latest front # app template : SvelteKit demo app # typeScript : Yes, using TypeScript syntax # Select additional options : Check All, 스페이스바로 체크 ``` ## 의존성 설치 및 실행 ```bash code front npm install # 만약에 안되면 여러번 시도 npm run dev # Ctrl + C 로 종료 가능 ``` # 6강 - [24 01 17, p 13336, 6강, 테일윈드 설치 및 설정파일 생성](https://youtu.be/sK3SLrydsi0) - [테일윈드 - 문서 - 스벨트킷에 설치 - https://tailwindcss.com/docs/guides/sveltekit](https://tailwindcss.com/docs/guides/sveltekit) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/c15d238) ## Install Tailwind CSS ```bash cd front npm install -D tailwindcss postcss autoprefixer --legacy-peer-deps npx tailwindcss init -p ``` # 7강 - [24 01 18, p 13336, 7강, 프리텐다드 폰트 적용, CSS 변수 설명](https://youtu.be/VL4fsUvGzZk) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/8b0eaa7) - [눈누 - https://noonnu.cc/](https://noonnu.cc/) # 8강 - [24 01 18, p 13336, 8강, 프론트엔드 프레임워크별 문법 비교 - component-party.dev](https://youtu.be/S2JiM_VFN1Q) - [https://component-party.dev](https://component-party.dev) # 9강 - [24 01 18, p 13336, 9강, 주의사항, 스벨트 5 문법 위주로 사용해주세요.](https://youtu.be/UI7usUGVz78) - [스벨트 5 beta - 문서 - https://svelte-5-preview.vercel.app/docs](https://svelte-5-preview.vercel.app/docs) - [스벨트 - 문서 - https://svelte.dev/docs/introduction](https://svelte.dev/docs/introduction) - [스벨트킷 - 문서 - https://kit.svelte.dev/docs](https://kit.svelte.dev/docs) # 10강 - [24 01 18, p 13336, 10강, VS CODE Prettier 익스텐션 설치 및 사용, 확장자 마다 기본 포매터로 설정해야 저장 시 자동으로 포메팅 됨](https://youtu.be/jKJIgmrXS6o) # 11강 - [24 01 18, p 13336, 11강, 인텔리제이에서 reformat source 코드를 프로젝트 단위로 하면 위험할 수 있습니다.](https://youtu.be/P39dYNxCY6E) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/b867d22) ## front 소스코드안의 소스코드들 한방에 포메팅 하는 방법 ```bash cd front npm run format ``` # 12강 - [24 01 18, p 13336, 12강, 인텔리제이에서 REFORMAT 코드를 프로젝트 단위로 할 때 front 폴더 제외하도록 세팅](https://youtu.be/-RX0ZumbIq8) # 13강 - [24 01 18, p 13336, 13강, app.html, +layout.svelte, +page.svelte 순으로 실행됨](https://youtu.be/ns-24_2P2PM) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/48c70a6) # 14강 - [24 01 18, p 13336, 14강, 카카오 로그인, 파일업로드, 쿠키 등을 고려한 application.yml 작업](https://youtu.be/0cBPMacdZR0) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/cd3096b) # 15강 - [24 01 18, p 13336, 15강, initAll 에 의해서 앱 시작시 회원이 2명 생기도록, 각 회원에 리프레시 토큰도 생성, 1부, 작업](https://youtu.be/8IAIKff8bFI) - [24 01 18, p 13336, 15강, initAll 에 의해서 앱 시작시 회원이 2명 생기도록, 각 회원에 리프레시 토큰도 생성, 2부, 설명](https://youtu.be/Cp2pM0UEqv4) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/6b7d963) # 16강 - [24 01 18, p 13336, 16강, src/main/generated 폴더는 git으로 관리하지 않도록](https://youtu.be/iS2WYr0ohR4) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/3b48d32) # 17강 - [24 01 18, p 13336, 17강, initNotProd 에 의해서 앱 시작시, 샘플 회원, 글 생성](https://youtu.be/-L7SHjdT0Vc) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/7bfeab2) # 18강 - [24 01 18, p 13336, 18강, GET /api/v1/posts](https://youtu.be/VaxUxLPMRLw) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/1ec0d1a) # 19강 - [24 01 18, p 13336, 19강, 글 목록 페이지 구현, /p/list](https://youtu.be/-wwaeYTfpLA) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/64ef7b3) # 20강 - [24 01 19, p 13336, 20강, openApi 문서 정보를 토대로 통신데이터와 관련된 타입스크립트를 생성 후 글 리스트에 적용](https://youtu.be/DwJDutYa52U) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/b0554ab) - [라이브러리 - openapi-typescript - https://github.com/drwpow/openapi-typescript](https://github.com/drwpow/openapi-typescript) ```bash npx openapi-typescript http://localhost:8090/v3/api-docs/apiV1 -o ./front/src/lib/types/api/v1/schema.d.ts ``` # 21강 - [24 01 19, p 13336, 21강, openapi-fetch 를 사용해서 fetch를 더 편하게](https://youtu.be/ttph4UKuhzs) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/544427b) - [라이브러리 - openapi-typescript - openapi-fetch - https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch) # 22강 - [24 01 19, p 13336, 22강, 백엔드 주소를 환경변수로 통합](https://youtu.be/Z7lXbq01snU) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/1423adb) # 23강 - [24 01 19, p 13336, 23강, rq.svelte.ts 도입하여 자주 사용하는 로직 모아두기](https://youtu.be/cfa4S4gUqLI) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/2b295e1) # 24강 - [24 01 19, p 13336, 24강, 글 상세보기](https://youtu.be/0eTTkCl03hE) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/cd29d3c) # 25강 - [24 01 22, p 13336, 25강, 직접 발생시킨 예외와 나머지 예외로 구분, 해당 예외에 대한 JSON 양식을 통일](https://youtu.be/UlL6W-gXh5I) - [GIT](https://github.com/jhs512/rest-sveltekit-24-01-17/commit/4c12cb7) ## 작업 1 : findById(id) 예외처리 코드를 단순화 ### 기존 코드(src/main/java/com/ll/rsv/domain/post/post/controller/ApiV1PostController.java) ```java Post post = postService.findById(id).orElseThrow(() -> new GlobalException("404-1", "존재하지 않는 글입니다.")); ``` ### 새 코드(src/main/java/com/ll/rsv/domain/post/post/controller/ApiV1PostController.java) ```java Post post = postService.findById(id).orElseThrow(GlobalException.E404::new); // 기존 코드가 너무 길어서 이렇게 줄임 ``` ## 작업 2 : 예외발생시 출력되는 JSON의 내용을 커스터마이징 ### 새 코드(src/main/java/com/ll/rsv/global/exceptionHandlers/GlobalExceptionHandler.java) ```java package com.ll.rsv.global.exceptionHandlers; import com.ll.rsv.global.exceptions.GlobalException; import com.ll.rsv.global.rq.Rq; import com.ll.rsv.global.rsData.RsData; import com.ll.rsv.standard.base.Empty; import lombok.RequiredArgsConstructor; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.ResponseStatus; import java.io.PrintWriter; import java.io.StringWriter; import java.util.LinkedHashMap; import java.util.Map; @ControllerAdvice @RequiredArgsConstructor public class GlobalExceptionHandler { private final Rq rq; @ExceptionHandler(Exception.class) public ResponseEntity

{post.title}