# DATA # 강의명 : 백엔드 완전 정복 : 실습으로 배우는 Spring Boot # 유용한 링크 - [AI - Chat GPT](https://chat.openai.com) - [AI - 제미나이](https://gemini.google.com/app) - [AI - 클로드](https://claude.ai/chats) - [맞춤법 검사기](https://lab.incruit.com/editor/spell) - [기술 유투브 채널 - 우아한 테크](https://www.youtube.com/@woowatech/videos) - [기술 유투브 채널 - 얄코](https://www.youtube.com/@yalco-coding/videos) - [기술 유투브 채널 - 쉬운코드](https://www.youtube.com/@ez./videos) - [스프링 이니셜라이저 - 온라인 스프링부트 프로젝트 생성기 - start.spring.io](https://start.spring.io) # 챕터 01 ## 챕터명 : 인트로 # 스텝 01-01 ## 스텝명 : 인트로 - 추가설명 : - ## 핵심요약 - 사랑합니다. - 처음부터 모든 것을 이해하려고 노력하지 마시고, 코드에 익숙해진다는 생각으로 접근해주세요. - 반복해서 실습을 하다보면 이해도가 천천히 올라갑니다. - 수업페이지([https://slog.gg/p/13485#DATA](https://slog.gg/p/13485#DATA))에 풍성한 자료가 많습니다. - 특전 : `URL 단축 서비스`와 비슷한 기술 스택으로 본인만의 블로그 플랫폼을 만드는 강좌 ## 순서 - 강의명 : 백엔드 완전 정복 : 실습으로 배우는 Spring Boot - 소개 - ![img](https://i.postimg.cc/c4ZLkSxt/teacher011.png) - 반갑습니다, 교육과 개발을 같이 하고 있는, 아직도 개발이 재미있는 장희성입니다. - 몰입코딩 유튜브 채널 운영 - 온/오프라인 개발자 취업 부트캠프 메인 강사활동 다수 - 19년 이상의 개발경력 - 한경대학교 컴퓨터공학과 졸업 - 목차 - 이 강의에서 다루는 내용 - 이 강의는 '지식전달'이 아닌 '훈련'에 집중합니다. - 수업페이지를 소개합니다. - 여러분의 성공적인 취업 혹은 서비스 출시를 기원합니다. - 이 강의에서 다루는 내용 - 자바 기초를 다루지는 않지만, 자바기초에 대한 교육자료를 추가적으로 제공해드립니다. - 스프링부트 웹개발 전반을 다룹니다.(JPA, 스프링 시큐리티, REST API, SPRING DOC 등) - fly.io 배포와 AWS 배포를 다룹니다. - 프론트엔드는 스벨트킷을 다룹니다. - `URL 단축 서비스`를 구현합니다. - 이 강의는 '지식전달'이 아닌 '훈련'에 집중합니다. - 이 수업은 이론보다 실습에 집중합니다. - 여러분에게는 '훈련'이 필요합니다. - 저는 여러분들을 단순히 수강생이라고 생각하지 않고 훈련생이라고 생각합니다. - 저는 여러분이 이 강의를 처음부터 끝까지 10번 시청하고 실습하시기를 권합니다. - 부트캠프에서 수 많은 학생들을 지도하면서 효과를 보았던 방법이고 효과가 좋았습니다. - 처음 2, 3번은 이해위주가 아닌 따라하기 위주로 빠르게 진행해주세요. - 그 다음부터는 `아주 조금씩 이해도를 높힌다` 라는 생각으로 진행해주세요. - ChatGPT, 제미나이, GITHUB 코파일럿 등을 최대한 활용해주세요. - 수업페이지를 소개합니다. - 링크 : [https://slog.gg/p/13485#DATA](https://slog.gg/p/13485#DATA) - `챕터 02` 자료 링크 : [https://slog.gg/p/13485#챕터-01](https://slog.gg/p/13485#챕터-01) - `챕터 02`의` 스텝 02` 자료 링크 : [https://slog.gg/p/13485#스텝-02-02](https://slog.gg/p/13485#스텝-02-02) - 각 챕터와 스텝을 수행하는데 도움이 될 만한 무료영상들이 제공됩니다. - 수업페이지의 막바지에는 특전도 제공됩니다. - 특전은 `URL 단축 서비스`와 비슷한 기술 스택으로 본인만의 블로그 플랫폼을 만드는 강좌입니다. - 여러분의 성공적인 취업 혹은 서비스 출시를 기원합니다. # 챕터 01 완료 - 내용없음 # 챕터 02 ## 챕터명 : 자바로 구현하는 간단한 `할 일 관리 서비스` # 스텝 02-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : - ## 핵심요약 - CRUD는 Create(add), Read(list), Update(modify), Delete(del) 의 줄임말 입니다. - 애플리케이션의 핵심로직은 모두 이 4가지의 조합으로 구성됩니다. - DB의 핵심도 CRUD 입니다. - 이번 챕터에서는 자바로 이 4가지 기능을 구현합니다. ## 순서 - 챕터 2, 자바로 구현하는 간단한 `할 일 관리 서비스` - 이번 챕터의 목표 : 간단한 `할 일 관리 서비스`를 혼자힘으로 구현할 수 있다. - 할 일 추가(add) - 할 일 리스팅(list) - 할 일 삭제(del) - 할 일 수정(modify) - CRUD를 익힙니다. - Create(add), Read(list), Update(modify), Delete(del) ## 요구사항 : 아래와 같이 작동해야 합니다.(exit, add, list, del, modify 순으로 구현) ``` 명령) list 번호 / 내용 명령) add 할일 : 축구 1번 할일이 생성되었습니다. 명령) list 번호 / 내용 1 / 축구 명령) add 할일 : 농구 2번 할일이 생성되었습니다. 명령) del 삭제할 할일의 번호 : 3 3번 할일은 존재하지 않습니다. 명령) del 삭제할 할일의 번호 : 2 2번 할일이 삭제되었습니다. 명령) list 번호 / 내용 1 / 축구 명령) add 할일 : 야구 3번 할일이 생성되었습니다. 명령) list 번호 / 내용 1 / 축구 3 / 야구 명령) modify 수정할 할일의 번호 : 1 기존 할일 : 축구 새 할일 : 풋살 1번 할일이 수정되었습니다. 명령) list 번호 / 내용 1 / 풋살 3 / 야구 명령) exit 앱 종료 명령이 입력되었습니다. 프로그램이 곧 종료합니다. ``` # 스텝 02-02 ## 스텝명 : GIT/GITHUB 계정 세팅 - 추가설명 : - ## 핵심요약 - 수업페이지 URL : [https://www.slog.gg/p/13485#f](https://www.slog.gg/p/13485#f) - 이 URL 로도 접속가능 : [https://www.slog.gg/p/13485#DATA](https://www.slog.gg/p/13485#DATA) - 특정 챕터의 URL : [https://www.slog.gg/p/13485#챕터-02-시작](https://www.slog.gg/p/13485#챕터-02-시작) - 챕터 02 자료를 볼 수 있는 URL - 특정 챕터의 URL : [https://www.slog.gg/p/13485#스텝-02-02](https://www.slog.gg/p/13485#스텝-02-02) - 챕터 02의 스텝 02 자료를 볼 수 있는 URL - GIT은 소스코드 관리 및 협업 도구이다. - GIT의 프로그램은 2가지 부분으로 구성된다. - GIT 서버 - GIT 클라이언트 - GIT 클라이언트는 사용자의 PC에 설치해야 한다. - GIT 서버는 따로 구축할 필요 없이 GITHUB 를 이용하면 된다. ## 순서 - 수업페이지에서 챕터 02 내용의 위치 - 챕터 02의 완료 조건 - GIT 소개 - GITHUB 소개 - GITHUB 가입 - GITHUB 계정세팅 - GIT 설치 - GIT 세팅 ## 핵심질문 - GIT이 무엇인가요? - GIT으로 소스코드를 관리한다는데 예시를 들어서 알려주세요. - GIT이 소스코드 `버전관리도구` 이라는 것은 알겠는데, 버전관리도구가 없다면 구체적으로 어떠한 문제가 발생할지 예시로 3개만 알려주세요. - GIT의 핵심 키워드 5개를 간략하게 알려주세요. - GITHUB가 뭔가요? - GITHUB가 없다면 무슨 불편한 일이 생기는지 구체적으로 3개만 알려주세요. - GITHUB의 핵심 키워드 5개를 간략하게 알려주세요. ## 대화형 AI - [AI - Chat GPT](https://chat.openai.com) - [AI - 제미나이](https://gemini.google.com/app) - [AI - 클로드](https://claude.ai/chats) ## 기술 유투브 채널 추천 - 안보면 개발자 인생 망합니다. - [기술 유투브 채널 - 우아한 테크](https://www.youtube.com/@woowatech/videos) - [기술 유투브 채널 - 얄코](https://www.youtube.com/@yalco-coding/videos) - [기술 유투브 채널 - 쉬운코드](https://www.youtube.com/@ez./videos) ## GITHUB 가입 - [https://github.com/signup](https://github.com/signup) ## 자주 발생하는 GIT 관련 에러 1 : detected dubious ownership in repository at ### 오류 ``` fatal: detected dubious ownership in repository at 'C:/Users/jhs512/IdeaProjects/exam-8' ``` ### 해결책 ```bash git config --global --add safe.directory C:/Users/jhs512/IdeaProjects/exam-8 ``` ## GIT 다운로드 - [윈도우 터미널 다운로드](https://apps.microsoft.com/detail/9n0dx20hk701?rtc=1&hl=ko-kr&gl=KR) - [윈도우 GIT 다운로드](https://git-scm.com/download/win) - MAC GIT 다운로드 - 쉘 열기 - `sudo brew install git` 명령어 입력 ## 디폴트 브랜치를 master 에서 main 으로 변경 ```bash git config --global init.defaultBranch main ``` ## 디폴트 사용자 정보 입력 ```bash git config --global user.email # 사용자 email 확인 git config --global user.email "깃허브에 가입할 때 사용한 이메일 혹은 자주사용하는 이메일" # 사용자 email 변경 git config --global user.name # 사용자 이름 확인 git config --global user.name "깃허브 ID" # 사용자 이름 변경(꼭 깃허브 ID를 안써도 되지만 관례상 많이 그렇게 합니다.) ``` # 스텝 02-03 ## 스텝명 : 인텔리제이 커뮤니티 세팅 - 추가설명 : - ## 핵심요약 - JDK는 자바개발도구이고 꼭 필요합니다. - JDK는 인텔리제이를 통해서 쉽게 설치 할 수 있습니다. - 자바 21 버전을 사용합니다. - 인텔리제이 세팅은 2가지로 구분됩니다. 1. 딱 한번만 하면 되는 세팅 2. 프로젝트를 생성할 때 마다 해야하는 세팅 ## 순서 - 인텔리제이 커뮤니티 소개 - D2Coding 폰트 설치 - 인텔리제이 커뮤니티 다운로드 및 설치 - 한번만 해도 되는 세팅 - 프로젝트 생성시마다 해야하는 세팅 ## 인텔리제이 커뮤니티 다운로드 - [윈도우 : 인텔리제이 커뮤니티 에디션 다운로드](https://www.jetbrains.com/ko-kr/idea/download/?section=windows) - [MAC : 인텔리제이 커뮤니티 에디션 다운로드](https://www.jetbrains.com/ko-kr/idea/download/?section=mac) ## 설치 직후 한번만 해도되는 세팅 ### 코딩용 폰트 D2Coding 설치 - 코드에서 헷갈리기 쉬운 알파벳 오(O)와 숫자 영(0) 등을 확실하게 구분한 폰트 - 그 외에 개발자가 코드를 읽을 때 가독성을 고려한 폰트 - [다운로드](https://github.com/naver/d2codingfont/releases) - D2Coding-Ver1.3.2-20180524.zip - 압축해제 - D2Coding/D2CodingBold-Ver1.3.2-20180524.ttf 만 설치 ### 구UI 와 신UI 중에서 신UI 로 변경 - 메뉴 => File => Settings => Appearance & Behavior => New UI - Enable New UI : 체크 - Compact mode : 체크 ### 소스코드폰트 조정 - 메뉴 => File => Settings => Editor => Font - Font : D2Coding - Size : 본인 시력에 맞게 조정 - 소스코드의 폰트 ### UI테마와 UI폰트 조정 - 메뉴 => File => Settings => Appearance & Behavior => Appearance - Theme : Dark or Light - Use custom font - 체크, D2Coding - Size : 본인 시력에 맞게 조정 - 이 폰트는 인텔리제이의 UI에 대한 폰트 ### 추후 발생할 수도 있는 한글깨짐문제 해결을 위해서 인코딩 설정 - 메뉴 => Help => Edit Custom VM Options - 아래 코드를 기존내용 하단에 추가 ``` -Dfile.encoding=UTF-8 ``` ### Keyamp(단축키) 설정 - 이 설정은 윈도우 사용자만 해주세요. - Mac 사용자는 Keymap을 `macOS` 으로 유지해주세요. - Mac 사용자는 아래 설정들에서 설정할 필요가 있다고 생각되는 것들만 설정해주세요.(쓰다보면 알게 됩니다.) - Mac 사용자는 설정할 때 본인이 원하는 키 조합으로 설정하세요. - 메뉴 => File => Settings => Keymap - Keymap : Eclipse - 검색 : `Rename` - Rename File : `Alt + Shift + R` - Warning이 뜨면 `Keep` 버튼 클릭 - 검색 : `Find` - Find... : `Ctrl + F` - Warning이 뜨면 `Keep` 버튼 클릭 - 검색 : `Replace` - Replace... : `Alt + Shift + F` - 다시한번 클릭해서 - `Ctrl + F` 는 제거 ### 클래스 Import 자동화 - 메뉴 => Settings => Editor => General => Auto Import - Java - Add unambiguous imports on the fly : 체크 - Optimize imports on the fly : 체크 - `프로젝트 생성시마다 수행` ### 전체 소스코드 정리(Reformat Code, Cleanup Code 등)이 특정 폴더에서는 작동 안되도록(스프링부트 용) - 추후 스프링부트 프로젝트에서 특정 폴더에 프론트엔드(뷰, 앵귤러, 리액트,스벨트 등) 소스코드를 두는 경우가 있습니다. - 보통 폴더이름은 `front` 라고 합니다. - 그때 인텔리제이에서의 전체 소스코드 정리로 인해서 해당 소스코드(front 폴더 하위의 소스코드)들이 영향을 받습니다. - 그래서는 안되기 때문에 아래와 같이 설정합니다. - 메뉴 => File => Settings => Editor => Code Style 에서 Formatter 탭 - Do not format: `front/**` ### 디버깅시 볼 필요가 없는 소스코드들을 명시하여 디버깅을 편하게(스프링부트 용) - 스프링같은 경우 내부적으로 프록시를 사용할 일이 많습니다. - 이 부분이 디버깅시에 불편한점이 많습니다. - 아래와 같이 디버깅시에 자동으로 스킵할 부분을 추가할 수 있습니다. - 메뉴 => File => Settings => Build, Execution, Deployment => Debugger => Steppig - Do not step into the classess 에 피하고 싶은 경로 추가 - `org.springframework.*` - `jakarta.servlet.*` - `org.apache.catalina.*` ### 개발중인 앱이 실행중일때 소스코드를 수정하면 자동으로 빌드가 발생하도록(스프링부트 용) - 스프링부트같은 앱을 개발한다면 - 보통 개발중인 앱이 실행중인 상태에서 앱의 소스코드를 변경할 일이 많습니다. - 그때 소스코드를 수정한 것이 실행중인 앱에 자동으로 반영되면 개발이 편해집니다. - 아래 설정을 그것을 허용하는 설정입니다. - 다만 아래 설정만으로 그것이 이뤄지지는 않고 - 각 상황에 맞는 툴이 필요합니다.(예를들어 Spring DevTools) - 보통 스프링부트 프로젝트가 아닌 일반적인 자바 프로젝트에서는 필요하지 않은 설정입니다만 - 해당 설정을 켜놔도 상관없습니다. - 메뉴 => File => Settings => Advanced Settings - Allow auto-make to start even if developed application is currently running : 체크 ## 매 프로젝트 생성시마다 해야하는 세팅 ### 클래스 Import 자동화 - 메뉴 => Settings => Editor => General => Auto Import - Java - Add unambiguous imports on the fly : 체크 - Optimize imports on the fly : 체크 - `프로젝트 생성시마다 수행` ### 인텔리제이 내장 그래들로 변경해서 속도향상 - 메뉴 => File => Settings => Build, Execution, Deployment => Build Tools => Gradle - Build and run using : IntelliJ IDEA - 이렇게 하면 인텔리제이의 내장 그래들을 사용하기 때문에 조금 더 빌드가 빨라집니다. - Run tests using : IntelliJ IDEA - 이렇게 하면 인텔리제이의 내장 그래들을 사용하기 때문에 조금 더 빌드가 빨라집니다. - Gradle JVM : Project SDK - 메뉴 => File => Settings => Build, Execution, Deployment => Compiler => Java Compiler - Additional command line parameters: - `-parameters` # 스텝 02-04 ## 스텝명 : 새 자바 프로젝트 세팅 - 추가설명 : 02:18 : 빌드도구로 인텔리제이 내부 그레이들을 사용하도록 세팅하면 프로그램의 실행 시 출력 결과가 깔끔합니다. ## GIT - [리포지터리 - 할 일 관리 서비스 프로젝트](https://github.com/jhs512/sb-exam-8-2024-03-06) - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/9ecc077) ## 핵심요약 - 보통 프로젝트 마다 GITHUB 리포지터리가 1개씩 존재합니다. - 자바 프로젝트는 보통 인텔리제이를 통해서 만듭니다. - `git init`: 로컬 리포지터리를 생성합니다. - 보통 프로젝트 폴더에서 수행합니다. - 특정 프로젝트를 특정 리포지터리와 연결하려면 `git remote add origin 리포지터리주소` 와 같은 명령어를 수행합니다. - 여기서 `origin` 은 여러분의 취향에 따라 다른 단어로 바꿔도 되지만, 관례적으로 `origin` 을 사용합니다. - `git add .` : 변경/생성된 소스코드를 중간영역(index)에 추가합니다. - `git commit -m "메세지"` : index 에 추가된 소스코드를 로컬 리포지터리에 저장합니다. - 메세지는 나중에 해당 커밋이 무엇에 관련된 작업이었는지 파악할 때 사용됩니다. - `git push origin main` : 현재 로컬 리포지터리와 연결된 외부 리포지터리 중에서 `origin` 으로 커밋들을 업로드 합니다. - 이렇게 강사가 git push 를 하면 수업페이지에서 해당 작업내용을 수강생분들이 쉽게 볼 수 있습니다. - [리포지터리 - 할 일 관리 서비스 프로젝트](https://github.com/jhs512/sb-exam-8-2024-03-06) - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/9ecc077) ## 순서 - 인텔리제이 커뮤니티 에디션으로 새 자바 프로젝트 세팅(JAVA 21, GRADLE) - GITHUB 리포지터리 생성, GIT PUSH # 스텝 02-05 ## 스텝명 : 스캐너로 명령 입력받기 - 추가설명 : 01:40 : 스캐너(Scanner 객체)는 키보드로부터 데이터를 입력받을 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/82ff57b) ## 핵심요약 - System.in 은 `표준 입력 스트림` 입니다. - 이 말이 어렵다면 System.in 은 `키보드` 라고 이해햐셔도 됩니다. - System.out 은 `표준 출력 스트림` 입니다. - 이 말이 어렵다면 System.out 은 `모니터` 라고 이해햐셔도 됩니다. - `Scanner scanner = new Scanner(System.in);` : 키보드를 스캔하는 스캐너 객체 생성 - `System.out.println("안녕");` : "안녕" 을 모니터에 출력 - Scanner 클래스는 Closable 한 객체이기 때문에 try 안쪽에 선언하면 명시적으로 `scanner.close();` 를 하지 않아도 됩니다. ## 순서 - 키보드 스캐너로 명령을 입력받고, - 입력받은 명령어의 좌우 공백을 제거한 후 출력 # 스텝 02-06 ## 스텝명 : exit/add 명령 구현 - 추가설명 : 00:40 : while ( true ) 로 감싸면 무한히 반복되기 때문에 종료 조건을 통해서 break 하도록 해야 합니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/dc96c0c) ## 핵심요약 - `scanner.nextLine()` 이 실행되면 프로그램은 사용자가 엔터를 입력하기 전까지 멈춘다. ## 순서 - exit 입력하면 프로그램 종료, - add 입력하면 할일을 입력받는다. # 스텝 02-07 ## 스텝명 : Todo 객체에 입력받은 내용 채우기 - 추가설명 : 00:35 : 프로그래밍을 할 때 서로 연관된 데이터는 묶어서 관리하는게 좋습니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/1942782) ## 핵심요약 - 관련된 데이터를 하나로 묶을 때 배열이나 리스트로 하기 애매하다면 클래스를 정의해야 함 ## 순서 - Todo 클래스 설계하고, - Todo 객체 만들어서 입력받은 내용으로 객체의 필드를 채우기 # 스텝 02-08 ## 스텝명 : Todo 객체를 리스트에 담기 - 추가설명 : 00:12 : 개발자가 미리 총 몇 개의 할 일(todo 객체)을 고객이 생성할지 모르기에 배열(Todo[]) 보다는 리스트(List＜Todo＞)가 더 좋습니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/81dac69) ## 핵심요약 - 변수를 선언한 장소(블록)가 바깥쪽일 수록 해당 변수의 수명이 깁니다. ## 순서 - todosLastId, todos 와 같이 오래 기억해야 하는 변수들은 비교적 바깥쪽에 선언 - todos에 생성된 todo 를 추가 # 스텝 02-09 ## 스텝명 : list 명령 구현 - 추가설명 : 00:30 : for ( Todo todo : todos ) { ... } 이렇게 하면 for 의 바디({ ... }) 부분이 총 할일의 개수(todos.size()) 만큼 반복 수행 됩니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/d056358) ## 핵심요약 - `list.forEach(요소 -> 로직);` 에서 함수(`요소 -> 로직`)는 list의 size 만큼 수행됩니다. ## 순서 - list 라고 입력하면 여태까지 입력된 할 일들을 반복문으로 출력 # 스텝 02-10 ## 스텝명 : del 명령 구현 - 추가설명 : 01:21 : 리스트.removeIf(요소 => 조건식) : 해당 리스트에서 조건식을 수행한 결과가 참(true)인 요소를 전부 제거합니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/a3d6045) ## 핵심요약 - `list.removeIf(요소 -> 조건식);` 에서 함수(`요소 -> 조건식`)는 list의 size 만큼 수행되고 - 조건식이 true 를 리턴하는 경우 해당 요소는 리스트에서 제거됩니다. ## 순서 - del 이라고 입력 후 삭제할 할일의 번호를 받은 후 - 그것이 존재한다면 todos 에서 removeIf 로 해당 todo 삭제 # 스텝 02-11 ## 스텝명 : modify 명령 구현 - 추가설명 : 00:45 : 리스트.stream().filter(요소 => 조건식).findFirst().orElse(null) : 해당 리스트에서 조건식의 결과가 참인 요소를 하나만 반환하고 없다면 null 을 반환합니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/cbdc561) ## 핵심요약 - `list.stream().filter(요소 -> 조건식).findFirst().orElse(null);` 에서 - filter 에서 하나라도 true 가 리턴되는 그 즉시 스트림이 종료되고 해당 요소가 리턴됨 - 그게 아니라면 null 이 리턴됨 ## 순서 - modify 라고 입력 후 수정할 할일의 번호를 받은 후, - 그것이 존재한다면 todos 에서 stream 으로 해당 todo 를 찾고 수정 # 스텝 02-12 ## 스텝명 : run 메서드 크기 줄이기 - 추가설명 : 00:17 : 클래스와 함수는 크키가 작을 수록 좋습니다. 그래야 추후에 유지보수가 편합니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/b944200) ## 핵심요약 - 해당 코드가 속해있는 반복문을 끝내고 싶을때는 `break;` - 해당 코드가 속해있는 반복문의 시작부분으로 돌아가고 싶을 때는 `continue;` - 주로 `continue;` 코드 하단의 코드들의 실행을 스킵하고 싶을 때 사용 - 해당 코드가 속해있는 반복문이 없다면 `break;`나 `continue;`을 쓸 수 없다. - 해당 코드가 속해있는 함수(메서드)를 끝내고 싶다면 `return;` ## 순서 - run 메서드에 몰려있던 기능들을 다른 함수들로 분리 # 스텝 02-13 ## 스텝명 : MVC 에서 C에 해당하는 컨트롤러 - 추가설명 : 01:39 : 고객과 직접적으로 소통하는 클래스를 컨트롤러 클래스라고 합니다. - ![img](https://upload.wikimedia.org/wikipedia/commons/a/a0/MVC-Process.svg) - MVC 에서 고객의 요청은 적절한 컨트롤러에게 전달됩니다. - 현재 그림의 나머지 부분, 즉 Model과 View 부분은 이해하지 않으셔도 됩니다. ## 핵심요약 - 하나의 메서드는 하나의 일만 해야 합니다. - 하나의 클래스는 한가지 주제에 관련된 일만 해야 합니다. - 하나의 메서드가 너무 크면 좋지 않습니다. - 여러개의 작은 메서드들을 추가하여 로직을 나눠야 합니다. - 하나의 클래스가 너무 크면 좋지 않습니다. - 여러개의 작은 클래스들을 추가하여 로직들 나눠야 합니다. - App 클래스 1개만 존재하는 현재의 상황에서 TodoController 와 SystemController 를 추가해야 합니다. ## 순서 - 주민센터에서 주무관(컨트롤러)분들은 본인이 맡은 분야의 민원을 처리합니다. # 스텝 02-14 ## 스텝명 : 핵심 기능을 컨트롤러들에게 위임 - 추가설명 : 02:51 : 이제 각 컨트롤러가 자신의 전문 분야와 관련된 요청을 처리하고, App 은 고객의 요청이 적절한 컨트롤러에게 연결되도록 하는 작업만 수행합니다. ## GIT - [GIT](https://github.com/jhs512/sb-exam-8-2024-03-06/commit/8af0c07) ## 핵심요약 - App 클래스 1개만 존재하는 현재의 상황에서 TodoController 와 SystemController 를 추가 - 이제 App 에는 핵심로직이 없고, 오직 올바른 컨트롤러에게 일을 토스해주는 로직만 있습니다. ## 순서 - TodoController 로 할 일과 관련된 로직을 이동 - SystemController 로 시스템 작업(종료 등)과 관련된 로직을 이동 - 이제 App 은 입력된 명령어에 따라 특정 컨트롤러의 특정 메서드를 호출해주는 일만 합니다. # 챕터 02 완료 ## 조건 1 : `할 일 관리 서비스`를 혼자힘으로 구현할 수 있다. ### 요구사항 : 아래와 같이 작동해야 합니다.(exit, add, list, del, modify 순으로 구현) ``` 명령) list 번호 / 내용 명령) add 할일 : 축구 1번 할일이 생성되었습니다. 명령) list 번호 / 내용 1 / 축구 명령) add 할일 : 농구 2번 할일이 생성되었습니다. 명령) del 삭제할 할일의 번호 : 3 3번 할일은 존재하지 않습니다. 명령) del 삭제할 할일의 번호 : 2 2번 할일이 삭제되었습니다. 명령) list 번호 / 내용 1 / 축구 명령) add 할일 : 야구 3번 할일이 생성되었습니다. 명령) list 번호 / 내용 1 / 축구 3 / 야구 명령) modify 수정할 할일의 번호 : 1 기존 할일 : 축구 새 할일 : 풋살 1번 할일이 수정되었습니다. 명령) list 번호 / 내용 1 / 풋살 3 / 야구 명령) exit 앱 종료 명령이 입력되었습니다. 프로그램이 곧 종료합니다. ``` # 챕터 03 ## 챕터명 : 스프링부트로 구현하는 `URL 단축 서비스` # 스텝 03-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:49 : 이번 챕터를 처음부터 완벽하게 이해하려고 하지 마시고, 여러번 실습위주로 반복해주세요. ## 순서 - 이번 챕터의 목표 : 간단한 `URL 단축 서비스`를 혼자힘으로 구현할 수 있다. # 스텝 03-02 ## 스텝명 : 스프링부트 프로젝트 세팅 - 추가설명 : 02:30 : 스프링부트는 웹 서비스 프레임워크이고, 그것은 이미 99% 완성된 소스코드 입니다. 개발자는 빈칸만 채우면 개발이 끝납니다. ## GIT - [리포지터리 - 스프링부트 기초개념 실습 프로젝트](https://github.com/jhs512/surl-first) - [GIT](https://github.com/jhs512/surl-first/commit/23b714d) ## 핵심요약 - 스프링부트는 백엔드 프레임워크 입니다. - 스프링부트는 그 자체로 완성된 하나의 웹 사이트 프로그램 입니다. - 여러분(개발자)는 스프링부트에 있는 빈칸만 적절히 채우면 됩니다. - 그래서 스프링부트에 익숙해지기만 한다면 엄청나게 빠르게 웹 사이트(서비스) 개발을 할 수 있습니다. - 인텔리제이 커뮤니티에서는 스프링부트 프로젝트를 만들 수 없습니다. - 인텔리제이에서 lombok 플러그인 설치를 해야 합니다. ## 순서 - 스프링부트는 백엔드 프레임워크 입니다. - 프레임워크는 이력서 양식과 비슷합니다. - 대부분의 내용이 완성되어 있고, 빈칸만 채우면 됩니다. - 스프링부트를 사용하면 웹 서비스를 굉장히 빠르게 만들 수 있습니다. - 왜냐하면 빈칸만 채우면 되기 때문입니다. - `@Controller` 같은게 나와도 당황하지 마세요. - 인텔리제이 커뮤니티에서는 스프링부트 프로젝트를 만들 수 없습니다. - [스프링 이니셜라이저 - 온라인 스프링부트 프로젝트 생성기](https://start.spring.io) - 제가 설명안하는 것은 일부러 안하는 것 입니다. - build.gradle, lombok, dev tools 등 이 나옵니다. - 이 부분은 저를 믿고, 이해가 안되는 부분은 그냥 일단 따라해주세요. - 하다가보면 알게 되거나 제가 나중에 설명을 할 예정입니다. - 개념설명을 수업페이지에 있는 자료로 대체하는 경우도 있습니다. - lombok 플러그인 설치 - 딱 한번만 설치하시면 됩니다. ## 스프링 이니셜라이저 - [스프링 이니셜라이저 - 온라인 스프링부트 프로젝트 생성기](https://start.spring.io) # 스텝 03-03 ## 스텝명 : 원격 메서드 호출 - 추가설명 : 01:20 : 스프링부트는 고객의 PC에서 실행되지 않습니다. 다른 컴퓨터에서 실행되는게 보통입니다.(개발환경은 제외) - 추가설명 : 10:45 : @GetMapping 을 달면 해당 메서드는 브라우저에서 호출 가능해집니다. ## GIT - [GIT](https://github.com/jhs512/surl-first/commit/8c32c87) ## 핵심요약 - 운영환경(실제 서비스 환경)에서는 보통 클라이언트(손님, 브라우저)와 서버(주인, 스프링부트)는 다른 컴퓨터에서 실행됩니다. - 클라이언트와 서버 사이에 통신이 필요합니다. - 브라우저와 스프링부트에는 이미 통신기능이 구현되어 있습니다. - 기본적으로 HTTP 방식으로 통신합니다. - 스프링부트 프로젝트 안의 특정 클래스를 외부 고객과의 소통을 담당하는 `컨트롤러`로(`창구 직원`, `영업 사원` 등에 비유될 수 있음) 만들어야 합니다.(`@Controller`) - 컨트롤로의 모든 메서드를 외부(브라우저)에서 호출(URL 로 호출)할 수 있도록 만들 필요는 없습니다. - `@GetMapping("경로")` 이런식으로 특정메서드를 외부에서 호출가능한 상태로 만들 수 있습니다. - 즉 여러분이 컨트롤러안의 메서드중에서 필요한 메서드만 골라서 `액션 메서드`로 만들 수 있습니다. - 고객의 요청(브라우저에서 주소를 입력하고 엔터, 혹은 재요청(F5)) 시 마다 `액션 메서드`가 수행됩니다. - `액션 메서드`가 수행되고 return 값을 요청에 대한 응답으로 삼고싶다면(즉 리턴값이 브라우저에 표시되도록 하고 싶다면) `@ResponseBody`를 붙여야 합니다. ## 순서 - 스프링부트는 고객입장에서 보면 원격지에 있습니다. - `할 일 관리 서비스` 처럼 고객이 직접 스프링부트가 실행되고 있는 컴퓨터에서 명령을 입력할 수 없습니다. - `@Controller, @GetMapping, @ResponseBody` 같은것들은 어노테이션으로 주석입니다. - 사람이 읽기위한 주석이 아니라 자바가 이해하는 주석입니다. - 스프링부트에게 우리(개발자)의 의도를 설명해주는 용도로 많이 사용됩니다. ## 컨트롤러 관련 어노테이션의 역할 | | @Controller | @GetMapping | @ResponseBody | | --- | --- | --- | --- | | 붙는 위치 | 컨트롤러 | 메서드 | 메서드 | | 역할 | 해당 클래스의 객체를
스프링부트가 생성하고(1개만)
HTTP 요청을 처리할 때마다 사용하도록 | 해당 메서드를
브라우저를 통해서 호출 가능하도록 | 해당 메서드의 return 값을
String 형태로 변환하여
응답본문으로 설정하도록 | # 스텝 03-04 ## 스텝명 : HTTP와 String - 추가설명 : 02:00 : HTTP는 편지를 이용해서 브라우저와 스프링부트가 이야기를 나누는 방법에 대한 규칙 입니다. - 추가설명 : 06:45 : 클라이언트와 서버는 서로 다릅니다. 둘이 소통하려면 둘다 이해가능한 String(Text)을 기반으로 통신해야 합니다. ## GIT - [GIT](https://github.com/jhs512/surl-first/commit/316f21b) ## 핵심요약 - HTTP는 편지를 이용해서 손님과 점원이 이야기를 나누는 방법에 대한 규칙 입니다. - 고객 == 클라이언트 == 브라우저 == 서비스 이용자 - 점원(주인) == 서버 == 스프링부트 == 서비스 제공자 - 고객은 요청편지를 점원에게 보내고, 점원은 그것에 대한 응답편지를 고객에게 보냅니다. - 편지는 헤더와 바디 부분으로 나뉩니다. - 헤더에는 부가적인 정보가 담기고, 바디에는 내용이 담깁니다. - 우리의 생각이 타인에게 전해지려면, 양자가 모두 이해할 수 있는 `소리` 라는 수단을 이용해야 합니다. - 우리의 생각 => 입을 통해서 소리로 변환 => 타인이 소리를 귀로 듣고 => 생각으로 변환 - 타인이 응답을 할 때도 마찬가지의 과정이 진행됨 - 고객의 생각(데이터, 정보)가 점원에게 전해지려면, 양자가 모두 이해 할 수 있는 `String(문자열)` 이라는 수단을 이용해야 합니다. - 브라우저의 데이터(정보) => 편지에 글로 작성 => 점인이 편지에 적인 글을 읽고 => 정보로 변환 - 점원이 응답을 할 때도 마찬가지의 과정이 진행됨 - 브라우저(고객)의 모국어는 자바스크립트 이고, 스프링부트(점원)의 모국어는 자바 입니다. - 쉽게 말해서 브라우저는 자바의 int, boolean, char, float, 배열, 리스트, 맵을 이해할 수 없습니다. - 스프링부트도 마찬가지로 브라우저의 number, 객체 등을 이해할 수 없습니다. - 그 둘이 동시에 이해하는 데이터는 오직 String(글, 텍스트) 입니다. ## 순서 - 브라우저와 스프링부트는 HTTP 규약을 지키며 통신합니다. - HTTP 에서 클라이언트(브라우저)는 요청만 하고 서버(스프링부트)는 응답만 합니다. - A의 생각을 B가 알려면 그것이 전송되어야 하는데 전송되는 데이터는 둘 모두 이해야 합니다. - 브라우저의 기본언어는 `자바스크립트` 세상이고, 스프링부트의 기본언어는 `자바` 입니다. - 브라우저와 스프링부트가 서로 소통하려면 둘 다 이해할 수 있는 공용어를 사용해야 합니다. - 공용어가 String 입니다. ## HTTP통신과 편지통신의 비교 | | HTTP 통신 | 편지로 통신 | | --- | --- | --- | | 요청 | Request(요청) | 보낸편지 | | 응답 | Response(응답) | 답장편지 | | 요청자 | 고객(클라이언트) | 보낸이 | | 응답자 | 주인(서버) | 받은이 | | 편지내용(헤더) | 발신자 주소, 수신자 주소 | 발신자 주소, 수신자 주소 | | 편지내용(바디) | 핵심내용 | 편지의 본문 | ## 자바스크립트와 자바의 자료형 비교 | | 자바스크립트 | 자바 | | --- | --- | --- | | 숫자 | number | byte, short, int, long, float, double | | 논리 | boolean | boolean | | 문자열 | string | String | | 고정크기배열 | 없음 | new int[50] | | 리스트 | 배열(`[10, 20, 30]`) | List(`List.of(10, 20, 30)`) | | 맵 | 객체(`{"age":23, "name": "Paul", "name-2": "Kang"}`) | HashMap(`Map.of("age", 23, "name", "Paul", "name-2", "Kang")`) | | 문자 | number | char | # 스텝 03-05 ## 스텝명 : Jackson 과 JSON 파싱 - 추가설명 : 01:00 : String 으로 객체를 표현하는 방법에 대한 표준이 보통 XML과 JSON이 있는데 JSON을 많이 사용합니다. - 추가설명 : 02:42 : Jackson은 액션 메서드가 String 이외의 형태의 데이터를 리턴하면 String 형태(그 중에서 JSON 방식)로 변경해줍니다. ## GIT - [GIT](https://github.com/jhs512/surl-first/commit/afbaa60) ## 핵심요약 - build.gradle 에 `implementation 'org.springframework.boot:spring-boot-starter-web'` 덕분에 잭슨(Jackson) 이라는 라이브러리를 스프링부트에서 쓸 수 있습니다. - 다른말로하면 `org.springframework.boot:spring-boot-starter-web` 에 잭슨이 포함되어 있습니다. - 그렇기 때문에 `org.springframework.boot:spring-boot-starter-web` 를 build.gradle 에 기술한 것만으로 잭슨을 쓸 수 있습니다. - 잭슨은 스프링부트에서 자동으로 작동합니다. - 잭슨이 자동으로 작동하는 케이스는 2가지 입니다. - 케이스 1 : 브라우저가 전해준 String(Text)를 자바가 이해할 수 있는 형태(int, String, boolean 등)으로 변환 - 자동으로 작동 - 케이스 2 : 액션 메서드가 리턴한 데이터(자바가 이해할 수 있는 형태(int, String, boolean 등))가 브라우저에게 전송되기 전에 String(Text) 형태로 변환 - 자동으로 작동 - JSON 은 String 으로 자바와 자바스크립트 등에서 사용되는 다양한 객체를 표현할 수 있는 문법입니다. - 보통 클라이언트와 서버가 통신할 때 JSON 을 많이 사용합니다. ## 순서 - 스프링부트가 받는 데이터가 잭슨에 의해서 자동으로 String 타입에서 알맞는 타입으로 변경됩니다. - 스프링부트가 보내는 데이터가 잭슨에 의해서 자동으로 자바의 다양한 타입에서 String 타입으로 변경됩니다. ## JSON VIEWER 크롬 익스텐션 - [JSON VIEWER 크롬 익스텐션](https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko) ## 케이스 1 : HTTP 요청 `/somePath?age=1&active=true` 에 의해서 액션 메서드 `hello(int age, boolean)` 가 호출될 때 잭슨이 작동하는 방법 $$uml participant 브라우저 participant "스프링부트 웹 서버" as 서버 participant "자동으로 작동되는 잭슨 라이브러리" as 잭슨 participant "hello 컨트롤러 액션 메서드" as 컨트롤러 브라우저 -> 서버 : HTTP 요청 /somePath?age=1&active=true activate 서버 서버 -> 잭슨 : 쿼리 스트링 파싱("age=1", "active=true") activate 잭슨 잭슨 -> 잭슨 : 문자열 "1"을 int 1 로 변환 잭슨 -> 잭슨 : 문자열 "true"를 boolean true 로 변환 잭슨 -> 컨트롤러 : 액션 메소드 호출\n public void hello(int age, boolean)\nhello(1, true); deactivate 잭슨 activate 컨트롤러 컨트롤러 -> 컨트롤러 : 메서드 실행 컨트롤러 -> 서버 : 처리 결과 서버 -> 브라우저 : HTTP 응답 deactivate 컨트롤러 deactivate 서버 $$ ## 케이스 2 : HTTP 요청에 의해서 호출된 액션메서드가 공용어인 String(Text) 이외에 다른 형태의 데이터를 리턴한 경우 $$uml participant 브라우저 participant "스프링부트 웹 서버" as 서버 participant "자동으로 작동되는 잭슨 라이브러리" as 잭슨 participant "컨트롤러 액션 메서드" as 컨트롤러 브라우저 -> 서버 : HTTP 요청 /married activate 서버 서버 -> 컨트롤러 : 액션 메소드 호출\n public boolean marrid() activate 컨트롤러 컨트롤러 -> 컨트롤러 : 비즈니스 로직 처리(true 리턴) 컨트롤러 -> 잭슨 : true 를 "true" 로 변환 deactivate 컨트롤러 activate 잭슨 잭슨 -> 서버 : 처리 결과(예: "성공") 서버 -> 브라우저 : HTTP 응답 (예: "성공") deactivate 잭슨 deactivate 서버 $$ ## XML과 JSON 비교 | 데이터 유형 | XML 예시 | JSON 예시 | | -- | -- | -- | | 숫자 | `22` | `{"age": 22}` | | 문자 | `Paul` | `{"name": "Paul"}` | | 객체 | ` 22 Paul ` | `{"age": 22, "name": "Paul"}` | | 배열 | `2223` | `[22, 23]` | | 배열<객체> | ` 22 Paul 23 Alice ` | `[{"age": 22, "name": "Paul"}, {"age": 23, "name": "Alice"}]` | # 스텝 03-06 ## 스텝명 : Lombok - 추가설명 : 03:35 : Lombok 에서 제공하는 어노테이션을 잘 활용하면 소스코드를 조금 더 읽기 쉽고 짧게 만들 수 있습니다. - 추가설명 : 07:23 : Lombok 에서 제공하는 @Builder 어노테이션은 new 대신, 빌더패턴으로 객체를 생성할 수 있게 해줍니다. ## GIT - [GIT](https://github.com/jhs512/surl-first/commit/e2ba33c) ## 핵심 - 롬복을 사용하면 소스코드의 타이핑 양을 줄일 수 있다. - @Component 을 클래스에 붙이거나 - @Bean 메서드를 통해서 - 빈(공유객체)이 라는 것을 스프링부트에 등록할 수 있고 - 필요할 때 마다 @Autowired 나 final + @RequiredArgsConstructor 로 해당 빈을 가져와서 쓸 수 있다. ## 순서 - 롬복의 유용한 어노테이션 소개 - 공유객체 설명 - @Component 설명 - @Bean 설명 ## 유용한 어노테이션 | 어노테이션 | 역할 | | -- | -- | | @Getter | 모든 필드에 대한 getter 메서드를 자동으로 생성 | | @Setter | 모든 필드에 대한 setter 메서드를 자동으로 생성 | | @ToString | 클래스의 toString 메서드를 자동으로 생성. @ToString.Exclude로 특정 필드를 제외할 수 있음 | | @AllArgsConstructor | 모든 필드를 매개변수로 받는 생성자를 자동으로 생성 | | @Builder | 빌더 패턴을 구현. 객체 생성 시점에 설정해야 할 필드를 명시적으로 설정할 수 있도록 함 | | @JsonIgnore | JSON 직렬화/역직렬화 시 특정 필드를 무시하도록 지정 | | @EqualsAndHashCode | equals와 hashCode 메서드를 자동으로 생성. @EqualsAndHashCode.Include로 특정 필드만 포함 가능 | | @SneakyThrows | 메서드에 선언된 checked exception을 무시하고 런타임 예외로 처리하도록 함 | # 스텝 03-07 ## 스텝명 : 할 일 관리 서비스 시작, 할 일 추가 - 추가설명 : - ## GIT - [리포지터리 - 스프링부트로 구현하는 할 일 관리 서비스 - https://github.com/jhs512/demo02-2024](https://github.com/jhs512/demo02-2024) - [리포지터리 - 스프링부트로 구현하는 할 일 관리 서비스 - 챕터 03 완성 소스코드 - https://github.com/jhs512/demo03-2024/tree/chapter-03](https://github.com/jhs512/demo03-2024/tree/chapter-03) - 챕터 03 완성 소스코드 - [GIT - 프로젝트 세팅](https://github.com/jhs512/demo02-2024/commit/37a3661) - [GIT - 할 일 추가](https://github.com/jhs512/demo02-2024/commit/91a1784) # 스텝 03-08 ## 스텝명 : 할 일 조회 - 추가설명 : - ## GIT - [GIT - 모든 할 일 조회](https://github.com/jhs512/demo02-2024/commit/950bbbf) - [GIT - 할 일 1건 조회](https://github.com/jhs512/demo02-2024/commit/7f6580b) - [GIT - 할 일 1건 조회, by @PathVariable](https://github.com/jhs512/demo02-2024/commit/efcc272) # 스텝 03-09 ## 스텝명 : 할 일 삭제, 할 일 수정 - 추가설명 : - ## GIT - [GIT - 할 일 삭제](https://github.com/jhs512/demo02-2024/commit/cebce4b) - [GIT - 할 일 수정](https://github.com/jhs512/demo02-2024/commit/0b269f6) # 스텝 03-10 ## 스텝명 : URL 단축 서비스 시작, URL 단축 - 추가설명 : - ## GIT - [리포지터리 - 스프링부트로 구현하는 URL 단축 서비스](https://github.com/jhs512/demo03-2024) - [GIT - 프로젝트 세팅](https://github.com/jhs512/demo03-2024/commit/f93e103) - [GIT - URL 단축](https://github.com/jhs512/demo03-2024/commit/509b276) # 스텝 03-11 ## 스텝명 : URL 단축방식 개선 - 추가설명 : 00:13 : URL 의 쿼리파라미터의 값은 URL 인코딩을 해야하는게 정석입니다. - 추가설명 : 03:13 : HttpServletRequest는 보통 받은편지(요청)에 대한 자세한 정보를 얻어야 할 때 사용합니다. ## GIT - [GIT - URL 단축방식 개선](https://github.com/jhs512/demo03-2024/commit/d811def) # 스텝 03-12 ## 스텝명 : 단축된 URL을 통해 원본 URL로 이동 - 추가설명 : - ## GIT - [GIT - 단축된 URL을 통해 원본 URL로 이동](https://github.com/jhs512/demo03-2024/commit/8a69dcb) # 챕터 03 완료 ## 조건 1 : `URL 단축 서비스`의 SurlController 의 핵심메서드를 혼자힘으로 구현할 수 있다. ### 요구사항 : 아래와 같이 작동해야 합니다. - API 1 : GET `/all` - API 2 : GET `/add?body={내용}&url={URL}` - API 3 : GET `/s/{내용}/{URL}` - API 4 : GET `/g/{SURL-번호} 순으로 구현` ```java package com.ll.demo03; import jakarta.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.ResponseBody; import java.util.ArrayList; import java.util.Arrays; import java.util.List; @Controller public class SurlController { private List surls = new ArrayList<>(); private long surlsLastId; @GetMapping("/all") @ResponseBody public List getAll() { // API 1 구현 } @GetMapping("/add") @ResponseBody public Surl add(String body, String url) { // API 2 구현 } @GetMapping("/s/{body}/**") @ResponseBody public Surl add( @PathVariable String body, HttpServletRequest req ) { // API 3 구현 } @GetMapping("/g/{id}") public String go( @PathVariable long id ) { // API 4 구현 } } ``` --- # 챕터 04 ## 챕터명 : fly.io 로 서비스 배포하기 # 스텝 04-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:25 : fly.io 는 백엔드 서비스를 배포하는 가장 쉽고 편리한 방법입니다. ## 순서 - 이번 챕터의 목표 : fly.io를 통해서 `URL 단축 서비스`를 배포할 수 있다. # 스텝 04-02 ## 스텝명 : 도커 - 추가설명 : 02:40 : 도커 이미지를 이용해서 배포한다면 운영서버에서 (거의) 무조건 실행됨을 보장할 수 있습니다. - 추가설명 : 04:44 : 도커 이미지는 우리 앱의 실행파일뿐 아니라 그것이 실행되는 데 필요한 인프라까지 담을 수 있는 포장지이다. ## 핵심요약 - 자바로 만든 결과물(jar 파일)은 그 자체로 실행될 수 없습니다. - JVM 이라는 환경에서 실행이 됩니다. - 배포라는 것은 서버(일반 컴퓨터와 같음)에서 우리가 만든 결과물(jar 파일)을 실행하는 것 입니다. - 서버를 세팅한다는 것은 서버에 JVM을 미리 설치해두는 행위를 말합니다. - 즉 서버에서 실행될 프로그램이 필요로하는 것을 미리 설치하는 행위가 바로 서버세팅입낟. - 도커이미지는 제품(자바로 만든 결과물)을 감싸는 포장지라고 볼 수 있습니다. - 그 포장지 안에는 JVM 같이 해당 프로그램이 필요한 환경까지 같이 동봉할 수 있습니다. - 도커를 이용하면 서버에 도커를 설치하는 것 이외에 딱히 미리 설치해둘 프로그램이 없습니다. - 굉장히 편해집니다. ## 순서 - 도커 설명 # 스텝 04-03 ## 스텝명 : 도커 데스크톱 설치 - 추가설명 : 00:25 : Dockerfile 로 N개의 도커이미지를 만들 수 있고, 도커 이미지로 N개의 컨테이너를 만들 수 있다. ## 핵심요약 - 도커 이미지는 밀키트와 비슷하지만 훨씬 더 편리합니다. - 비유하자면, 밀키트는 밀키트인데 조리도구(가스레인지, 냄비 등)까지 포함된 밀키트라고 보시면 됩니다. - 그래서 현대의 웹 서비스에서 주류기술로 자리잡았습니다. - 컨테이너(Container) - 컨테이너는 애플리케이션과 그 필요한 모든 것을 포함하는 격리된 환경입니다. - 가볍고 빠르게 시작되며, 다른 컨테이너나 호스트 시스템과의 충돌 없이 독립적으로 실행됩니다. - 이는 개발, 배포, 실행을 일관되게 만들어 줍니다. - 이미지(Image) - 이미지는 컨테이너를 생성하는 데 사용되는 템플릿으로, - 애플리케이션 실행에 필요한 코드, 라이브러리, 환경설정 등이 포함됩니다. - 읽기 전용이며, 컨테이너는 이 이미지를 기반으로 생성됩니다. - 도커 데몬(Docker Daemon) - 도커 데몬은 컨테이너의 생성, 실행, 모니터링, 삭제 등을 관리하는 - 백그라운드 프로세스입니다. - 도커 클라이언트와 통신하며, - 도커의 모든 중요 작업을 담당합니다. - 도커 파일(Dockerfile) - 도커 파일은 도커 이미지를 빌드하기 위한 설정 파일로, - 이미지 생성 과정에 필요한 명령어를 순서대로 담고 있습니다. - 이 파일을 사용하면 이미지 빌드 과정을 자동화하고, - 재사용 가능한 방식으로 관리할 수 있습니다. - 도커 허브(Docker Hub) - [https://hub.docker.com/](https://hub.docker.com/) - 도커 허브는 도커 이미지를 저장하고 공유할 수 있는 클라우드 서비스입니다. - 사용자는 자신의 이미지를 업로드하여 공유할 수 있으며, - 다른 사람이 만든 이미지를 검색하고 사용할 수 있습니다. ## 순서 - 도커 핵심키워드 설명 - 도커허브 가입 - 도커 데스크톱 설치 - 도커 데스크톱에서 도커허브계정으로 로그인 ## 스프링부트 앱과 떡볶이 밀키트 비교 | | 스프링부트 앱 | 떡볶이 밀키트 | | --- | --- | --- | | 재료 | SurlController.java | 떡, 양념 | | 필요한 인프라 | JVM(21 Version) | 냄비, 가스레인지 | ## 모든 도커자원(이미지, 컨테이너, 네트워크 볼륨) 삭제 명령어 - 가끔 도커 관련 실습을 처음부터 다시하고 싶을 때 아래 명령어가 유용합니다. ```bash # 컨테이너 삭제 docker rm -f $(docker ps -qa) # 이미지 삭제 docker rmi -f $(docker images -qa) # 안쓰는 네트워크 삭제 docker network prune -f # 안쓰는 볼륨 삭제 docker volume prune -f ``` ## 도커 데스크톱 다운로드 - [도커 데스크톱 다운로드 - https://www.docker.com/products/docker-desktop](https://www.docker.com/products/docker-desktop) ## 자주 발생하는 도커설치 관련 에러 1 : 윈도우에서 도커 데스크톱 설치시, Hardware assisted virtualization and data execution protection must be enabled in the BIOS ### 오류 ``` Hardware assisted virtualization and data execution protection must be enabled in the BIOS ``` ### 해결책 - [영상 - 인텔 - 가상화기능 BIOS에서 VT 활성화하기 Virtualization Technology](https://youtu.be/EebFWCPoJQo?t=1m33s) - [영상 -AMD - AMD CPU 가상화 활성화하기](https://youtu.be/p0QKSlMsRV8) # 스텝 04-04 ## 스텝명 : 도커 이미지 만들기 - 추가설명 : 01:10 : 라면요리에 가스레인지가 필요하듯이, HTTP 전송에는 웹서버(NGINX 등)이 필요합니다. ## 핵심요약 - HTML 파일을 원격지의 브라우저에게 전송하려면 웹서버가 필요합니다. - 웹서버중에서 유명한 것이 nginx 입니다. - 우리는 nginx 를 사용할 예정입니다. - nginx 도커 이미지는 이미 도커 허브에 있습니다. - 우리는 도커 이미지를 만드는게 목표 입니다. - 도커 이미지는 Dockerfile 로 부터 생성됩니다. - Dockerfile 작성 - 도커허브의 nginx:latest 를 기반으로 합니다. - 소스코드 생성 - index.html 파일 생성 - 도커 이미지 생성 - docker build -t 이미지_이름 . - 도커 이미지 이름 : `레포지터리_이름:태그` - 기본 태그는 `latest` - 참고로 태그를 `latest` 로 하고 싶다면 생략가능 - EX : `docker build -t nginx-1 .` - 위 명령은 `docker build -t nginx-1:latest .` 와 같다. - 생성된 도커 이미지 확인 - `docker images` ## 순서 - HTML 파일을 서빙하는 웹앱을 위한 도커 이미지를 만들겠습니다. - Dockerfile 을 작성해야하는 이유 설명 - 소스코드(index.html) 파일 생성 - 도커 이미지 생성 - 생성된 도커 이미지 확인 ## HTML 앱과 스프링부트 앱 비교 | | HTML 앱 | 스프링부트 앱 | 떡볶이 밀키트 | | --- | --- | --- | --- | | 소스코드 | index.html | SurlController.java | 떡, 양념 | | 필요의존성 | 웹서버(NGINX) | JVM(21 Version) | 냄비, 가스레인지 | | 포트(최종 사용자가 결과물을 달라고 요청하는 창구) | 80(기본 포트가 80) | 8090(우리 그렇게 설정함) | 주방(밀키트를 가지고 요리하는 사람에게 주방에서 요리해 달라고 요청한다고 가정) | ## index.html ```html

Hello

``` ## Dockerfile ```dockerfile # 기본 이미지 설정 FROM nginx:latest # index.html 파일 복사 COPY index.html /usr/share/nginx/html/ # Nginx 실행 CMD ["nginx", "-g", "daemon off;"] ``` # 스텝 04-05 ## 스텝명 : 도커 이미지 삭제 - 추가설명 : 01:40 : 도커 이미지의 이름은 도커 레포지터리명과 태그의 조합(레포지터리명:태그) 입니다. ## 핵심요약 - 도커 이미지 삭제하는 방법 - docker rmi 이미지_이름 - 도커 이미지 이름 : `레포지터리_이름:태그` - 기본 태그는 `latest` - 참고 태그를 `latest` 로 하고 싶다면 생략가능 - EX : `docker rmi nginx-1` - 위 명령은 `docker rmi nginx-1:latest .` 와 같다. ## 순서 - 도커 이미지 삭제하는 방법 # 스텝 04-06 ## 스텝명 : 도커 컨테이너 생성 및 삭제 - 추가설명 : 01:20 : -p 80:80 에서 왼쪽은 HOST 포트이고, 오른쪽은 도커 컨테이너의 포트이다. 이 옵션으로 우리가 해당 NGINX에 접근이 가능해진다. ## 핵심요약 - 도커 이미지로 도커 컨테이너를 생성할 수 있습니다.(다른 말로 도커 이미지를 실행하면 도커 컨테이너가 생성됩니다.) - 도커 이미지는 일종의 템플릿이고 - 이력서 양식과 같습니다. - 도커 컨테이너는 도커 이미지를 디스크에서 복사하여 메모리에 띄운 것과 같습니다. - 마치 우리가 특정 회사를 위한 이력서를 작성할 때 원본 이력서 양식을 보존하기 위해서 - 이력서 양식 원본에서 바로 편집하지 않고 - 그것의 복사본을 만든 후 작업하는 것과 같습니다. - 80 포트를 사용하는 nginx-1-1 컨테이너 띄웁니다. - docker run -d nginx-1 -p 80:80 --name 컨테이너_이름 이미지_이름 - EX : `docker run -d --name nginx-1-1 -p 80:80 nginx-1` - 이렇게 수행하면 다른 컨테이너에서는 `80` 포트를 사용할 수 없습니다. - 이렇게 수행하면 다른 컨테이너에서는 `nginx-1-1` 이라는 이름을 사용할 수 없습니다. - 8081 포트를 사용하는 nginx-1-2 컨테이너 띄웁니다. - docker run -d nginx-1 -p 8081:80 --name 컨테이너_이름 이미지_이름 - EX : `docker run -d --name nginx-1-2 -p 8081:80 nginx-1` - 이렇게 수행하면 다른 컨테이너에서는 `8081` 포트를 사용할 수 없습니다. - 이렇게 수행하면 다른 컨테이너에서는 `nginx-1-2` 이라는 이름을 사용할 수 없습니다. - 하나의 도커 이미지로 2개의 컨테이너를 띄웠고 - 각가의 컨테이너가 같은 이름을 가질 수 없고 - 같은 포트를 점유할 수 없어서 - 서로 다른 이름, 다른 포트를 할당했습니다. - 도커 컨테이너를 삭제 - docker rm -f 컨테이너_이름 - EX : `docker rm -f nginx-1-1` - EX : `docker rm -f nginx-1-2` ## 순서 - 도커 컨테이너 생성 - 각 도커 컨테이너에 다른 포트 할당하는 이유 - 도커 컨테이너 삭제 # 스텝 04-07 ## 스텝명 : flyctl 설치 - 추가설명 : 01:20 : 서버는 컴퓨터같지만 공인 IP가 필수 입니다. ## 핵심요약 - fly.io 는 서버(PC)를 제공해줍니다. - 서버는 일반적인 PC와 같은 컴퓨터 입니다. - 다만 서버에는 공인 IP가 부여되어 있습니다. - 보통 웹서버에는 도메인(IP의 별칭)이 부여되어 있습니다. - 웹서버는 서버중에서 웹 서비스를 제공하는 서버를 말합니다. - flyctl을 설치하면 컴퓨터에서 명령어로 fly.io 에 여러가지 서비스를 이용할 수 있습니다. - flyctl을 설치 후 로그인해야 합니다. ## 순서 - fly.io 의 역할 - fly.io 가입 - fly.io 계정에 신용카드 정보 추가 - fly.io 요금관련 주의사항 - flyctl 설치 - flyctl 에서 로그인 # 스텝 04-08 ## 스텝명 : flyctl 로 앱 생성하기 - 추가설명 : 02:00 : fly.io 에서는 하나의 프로그램 및 서비스를 `앱` 이라는 명칭으로 부릅니다. ## 핵심요약 - fly.io 에 서비스를 배포하려면 `앱` 이라는 것을 생성해야 합니다. - `앱`은 fly.io 에서 서비스의 단위를 말합니다. - 만약에 우리가 5개의 서비스를 배포하려 한다면 5개의 `앱`을 만들어야 합니다. - 앱은 `fly launch --no-deploy` 명령으로 생성합니다. - 앱은 [대시보드(https://fly.io/dashboard)](https://fly.io/dashboard) 에서 확인 가능합니다. - 생성한 폴더에 `fly.toml` 파일도 생깁니다. - 해당 파일은 앱의 설정을 바꿀때 사용됩니다. - 아직은 우리가 `fly deploy` 명령을 내리기 정이기 때문에 앱은 현재 `Pending` 상태 입니다. ## 순서 - flyctl 로 앱 생성하기 # 스텝 04-09 ## 스텝명 : fly.io 앱에 배포 테스트 - 추가설명 : 01:50 : 프로젝트에 fly.toml 과 Dockerfile 이 있다면 fly.io 배포가 가능하다. ## 핵심요약 - 3가지가 있다면 fly.io 배포가 가능합니다. - 3가지 요소 : 프로젝트 폴더, Dockerfile, fly.toml - fly.toml 만 있으면 안되고, fly.toml 에 대응되는 fly.io `앱`이 존재해야 합니다. - 프로젝트 폴더에서 `fly deploy` 명령을 입력하면 - 프로젝트 폴더의 모든 파일들이 fly.io 앱으로 복사됩니다. - 빌더 앱이 생성되고 업로드된 파일들로 도커 빌드가 진행됩니다. - 도커이미지가 완성됩니다. - 기계들(보통 2개)에 컨테이너들이 위치하게 됩니다. - 여기서 기계는 머신, PC, 서버를 의미 합니다. - 기계마다 컨테이너가 하나씩 위치합니다. - 도메인은 `https://앱_이름.fly.dev` 입니다. - EX : [https://jhs512-nginx-1.fly.dev](https://jhs512-nginx-1.fly.dev) - 소스코드가 바뀌면 재배포를 해주세요. - 재배포 명령어 : `fly deploy` - 기계들(보통 2개)에서 돌아가고 있는 기존 컨테이너들이 제거되고, 새 도커이미지로 만든 새 컨테이너들이 그 자리를 차지 합니다. - 기존 컨테이너가 모두 꺼지고, 새 컨테이너가 그 자리를 차지하게 되면 - 만약에 단순하게 교체를 하면 고객 입장에서 중단타임이 발생합니다. - 즉 고객이 우리 웹서비스를 이용하는 중에 오류(404 등)을 경험하게 되는 구간이 생깁니다. - 다행스럽게도, fly.io는 기본적으로 롤링 업데이트라는 무중단 배포(교체) 방식을 사용합니다. - fly.io 를 통한 배포는 기본적으로 무중단이라고 보셔도 됩니다. ## 순서 - 프로젝트 폴더 생성 - 프로젝트 폴더로 이동 - flyctl 로 앱 생성 - 대시보드에서 생성된 앱 확인 - 앱 배포 - 소스코드 살짝 수정 - 앱 재배포 # 스텝 04-10 ## 스텝명 : URL 단축 서비스 배포하기 - 추가설명 : 04:50 : 실습이 끝났다면 요금을 절약하기 위해서 앱을 지워주셔야 합니다. - 추가설명 : 05:50 : 요청이 한동안 없다면 기본적으로는 앱이 자동으로 꺼지기 때문에 앱을 지우지 않아도 비용이 아주 저렴하게 발생합니다. ## GIT - [리포지터리 - 스프링부트로 구현하는 URL 단축 서비스](https://github.com/jhs512/demo03-2024) - [GIT](https://github.com/jhs512/demo03-2024/commit/a87fdb7) ## 핵심요약 - 코파일럿 플러그인 업데이트 - 코파일런 사용을 추천드립니다. - 단 유료입니다. - `Dockerfile` 파일을 생성합니다. - 스프링부트에 맞게 세팅해야 합니다. - 그 다음 `fly launch --no-deploy` 명령을 통해서 fly.io `앱`을 만들고 `fly.toml` 파일을 생성합니다. - 이 과정에서 `jhs512-surl` 앱이 생성됩니다. - 도메인 : [https://jhs512-surl.fly.dev](https://jhs512-surl.fly.dev) - HomeController 를 추가해서 `GET /` 요청에 응답하도록 작업 - 프로젝트 폴더에서 `fly deploy` 명령을 입력하면 - 프로젝트 폴더의 모든 파일들이 fly.io 앱으로 복사된 후 빌드됩니다. - fly.io 안에서 도커 이미지가 생성되었습니다. - 해당 도커 이미지를 기반으로 2개의 머신에 컨테이너가 생깁니다. - 브라우저의 요청이 있을 때 마다 2개의 기계 중 랜덤으로 1개가 선택되어 - 그 안에 있는 컨테이너안에 있는 스프링부트가 작동합니다. - 일종의 부하분산 이라고 보시면 됩니다. ## 순서 - `Dockerfile` 파일을 생성 - fly.io `앱` 등록 - HomeController 작업 - 배포 - 기계 2개가 작동하는 방식 설명 ## Dockerfile(자바 21, 스프링부트 배포용) ```dockerfile # 첫 번째 스테이지: 빌드 스테이지 FROM gradle:jdk21-graal-jammy as builder # 작업 디렉토리 설정 WORKDIR /app # 소스 코드와 Gradle 래퍼 복사 COPY gradlew . COPY gradle gradle COPY build.gradle . COPY settings.gradle . # Gradle 래퍼에 실행 권한 부여 RUN chmod +x ./gradlew # 종속성 설치 RUN ./gradlew dependencies --no-daemon # 소스 코드 복사 COPY src src # 애플리케이션 빌드 RUN ./gradlew build --no-daemon # 두 번째 스테이지: 실행 스테이지 FROM ghcr.io/graalvm/jdk-community:21 # 작업 디렉토리 설정 WORKDIR /app # 첫 번째 스테이지에서 빌드된 JAR 파일 복사 COPY --from=builder /app/build/libs/*.jar app.jar # 실행할 JAR 파일 지정 ENTRYPOINT ["java", "-jar", "-Dspring.profiles.active=prod", "app.jar"] ``` # 스텝 04-11 ## 스텝명 : 개발환경과 운영환경의 설정파일 분리 - 추가설명 : 03:00 : application.yml 이 기본설정이고 그 이후에 로드된 나머지 설정파일의 정보들이 덮어씌워 집니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/3adc483) ## 핵심요약 - `개발환경(dev)`과 `운영환경(prod)`은 서로 다릅니다. - prod 는 production 의 약자입니다. - 각 환경에 맞는 설정(application.yml)이 필요합니다. - 다행히도 스프링부트에서는 그 기능을 지원합니다. - application.yml 은 모든환경에서 작동합니다. - application-dev.yml 는 `개발환경`에서만 작동합니다. - `application.yml` 의 `spring.profiles.active=dev` 설정 덕분에 작동합니다. - application-prod.yml 는 `개발환경`에서만 작동합니다. - `Dockerfile` 의 `-Dspring.profiles.active=prod` 옵션 덕분에 작동합니다. - application.yml 이 제일 먼저 작동합니다. - 제일 먼저 작동하는 파일이 우선순위가 가장 낮습니다. - 나중에 작동하는 설정파일의 정보가 우선적으로 적용됩니다. - 프로젝트 폴더에서 `fly deploy` 명령을 입력하여 바뀐 소스코드가 실서버(운영서버)에 반영되도록 작업 ## 순서 - `개발환경`과 `운영환경` 설명 - `application-dev.yml` 추가 - `application-prod.yml` 추가 - HomeController 에서 custom.site.name 사용 - fly.io 앱에 재배포 # 스텝 04-12 ## 스텝명 : GITHUB ACTION 개요 - 추가설명 : 01:50 : GITHUB ACTION 은 우리가 매번 `fly deploy` 명령을 입력하지 않아도 되도록 해줍니다. 이것을 `CI/CD` 라고 합니다. ## 핵심요약 - 깃허브 리포지터리에 푸시한 것 만으로 자동으로 배포까지 이루어지면 굉장히 편합니다. - 이것을 CI/CD 라고 합니다. - 사실 fly.io 가 무중단이기 때문에 우리의 프로젝트에는 `무중단 CI/CD` 가 걸려 있다 라고 이야기 해도 됩니다. - GITHUB ACTION 을 걸어두면 특정 이벤트가 발생했을 때 어떠한 일이 작동하도록 할 수 있습니다. - 이벤트 EX : 특정 브랜치에 특정 파일이 변경되는 푸시가 발생 ## 순서 - GITHUB ACTION 설명 # 스텝 04-13 ## 스텝명 : CI/CD 구축 - 추가설명 : 07:20 : git 에는 없지만 빌드에 꼭 필요한 파일은 이런식으로 시크릿 변수로 만들어주세요. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/1061db4) ## 핵심요약 - 소스코드의 내용중에서 GITHUB 에 노출되면 안되는 내용도 있습니다. - 그런 것은 `application-secret.yml` 에 몰아두고 - `.gitignore` 에 `src/main/resources/application-secret.yml` 를 추가하여 - 해당파일이 GIT 에 저장되지 않도록 해야 합니다. - application-secret.yml 은 모든환경에서 작동합니다. - `application.yml` 의 `spring.profiles.include=secret` 설정 덕분에 작동합니다. - 그런데 우리의 목표는 도커 빌드를 fly.io 에서 수행합니다. - 빌드라는 행위는 완제품을 만드는 행위입니다. - 그렇다면 빌드를 할 때 `application-secret.yml` 이 꼭 필요합니다. - 그런데 github 리포지터리에는 `application-secret.yml` 파일이 있어야 합니다. - 하지만 우리는 해당 파일이 오직 로컬에만 존재하도록 설정했습니다. - 보안 때문에 - 우리는 `application-secret.yml` 을 암호화 해서 해당 리포지터리에 넣어야 합니다. - 깃허브에는 시크릿 변수라는 기능을 제공합니다. - 우리는 `application-secret.yml` 의 내용을 시크릿 변수에 저장을 하면 됩니다. - .github/workflows/deploy.yml 파일 추가 - `.github/workflows` 폴더명은 지켜야 하는 규칙입니다. - 그래야 이벤트가 걸립니다. - GITHUB 리포지터리에 이벤트를 건다라고 보통 표현합니다. - 위 파일을 추가하면 이벤트가 걸립니다. - deploy.yml 에는 언제 해당 파일이 실행되어야 하는지와 - 실행되면 무슨일이 벌어져야 하는지가 기술되어 있습니다. - 리포지터리 세팅을 해야 합니다. - 시크릿변수 `APPLICATION_SECRET_YML` 를 생성해 주세요. - 시크릿변수 `FLY_API_TOKEN` 을 생성해 주세요. - 키를 안전한곳에(본인만 볼 수 있는 곳)에 메모해 두는것을 추천합니다. - Workflow permissions - Choose the default permissions granted to the GITHUB_TOKEN when running workflows in this repository. You can specify more granular permissions in the workflow using YAML. Learn more about managing permissions. - 체크 : Read and write permissions - 해당내용은 추후에 AWS 를 위한 배포를 위해 필요합니다. - 사실 지금방식(fly.io 배포)에서는 필요하지 않습니다. - 해당 내용을 활성화하면 - GITHUB ACTION 이 해당 리포지터리에 태그나 릴리즈를 생성할 권한을 얻습니다. - GITHUB PUSH - 이제 `fly deploy` 를 명시적으로 할 필요가 없습니다. - GITHUB 로 푸시하는 것 만으로 자동으로 배포까지 진행됩니다. - 무중단 CI/CD 완성 ## 순서 - .gitignore 작업 - application-secret.yml 추가 - showSecretKey 액션 메서드 추가 - GITHUB ACTION 걸기(deploy.yml) - GITHUB ACTION을 위한 리포지터리 세팅 ## .gitignore ```gitignore HELP.md .gradle build/ !gradle/wrapper/gradle-wrapper.jar !**/src/main/**/build/ !**/src/test/**/build/ ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans .sts4-cache bin/ !**/src/main/**/bin/ !**/src/test/**/bin/ ### IntelliJ IDEA ### .idea *.iws *.iml *.ipr out/ !**/src/main/**/out/ !**/src/test/**/out/ ### NetBeans ### /nbproject/private/ /nbbuild/ /dist/ /nbdist/ /.nb-gradle/ ### VS Code ### .vscode/ ### Custom ### src/main/resources/application-secret.yml db_dev.mv.db db_dev.trace.db src/main/generated ``` ## .github/workflows/deploy.yml ```yml name: Fly Deploy on: push: paths: - settings.gradle - build.gradle - src/** - fly.toml - Dockerfile - .github/workflows/deploy.yml branches: - main jobs: deploy: name: Deploy app runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: application-secret.yml 생성 env: APPLICATION_SECRET: ${{ secrets.APPLICATION_SECRET_YML }} run: echo "$APPLICATION_SECRET" > src/main/resources/application-secret.yml - uses: superfly/flyctl-actions/setup-flyctl@master - run: flyctl deploy --remote-only env: FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} ``` # 스텝 04-14 ## 스텝명 : 현재 구축된 CI/CD 주의사항 - 추가설명 : 05:10 : fly.io 의 앱은 기본적으로 자주 재시작 됩니다. 그러면 기존에 입력된 URL 정보들은 유실됩니다. ## 스텝명 : - 추가설명 : 07:24 : 리포지터리의 시크릿변수 `APPLICATION_SECRET_YML` 의 내용을 변경한 후 푸시를 하거나 해당 액션을 명시적으로 재시도 하셔야 합니다. ## 핵심요약 - 소스코드를 변경하고 그것을 실서버에 반영하는 방법 - CI/CD가 구축되었기 때문에 - 이제 GIT 리포지터리에 PUSH 만 하면 됩니다. - 그런데 만약 `application-secret.yml` 의 내용을 바꾸고 그것을 서버에 반영해야 한다면 - 리포지터리의 시크릿변수 `APPLICATION_SECRET_YML` 의 내용을 변경한 후 푸시를 하거나 해당 액션을 명시적으로 재시도 하셔야 합니다. - 배포된 앱이 잘 되는지 테스트 - https://jhs512-surl.fly.dev/s/내용/URL - EX : [GET https://jhs512-surl.fly.dev/s/네이버/https://www.naver.com](https://jhs512-surl.fly.dev/s/네이버/https://www.naver.com) - EX : [GET https://jhs512-surl.fly.dev/s/다음/https://www.daum.net](https://jhs512-surl.fly.dev/s/다음/https://www.daum.net) - https://jhs512-surl.fly.dev/all - EX : [GET https://jhs512-surl.fly.dev/all](https://jhs512-surl.fly.dev/all) - https://jhs512-surl.fly.dev/g/URL_번호 - EX : [GET https://jhs512-surl.fly.dev/g/1](https://jhs512-surl.fly.dev/g/1) - EX : [GET https://jhs512-surl.fly.dev/g/2](https://jhs512-surl.fly.dev/g/2) - fly.io 의 기본적인 앱은 일정기간동안 요청이 없으면 자동으로 꺼집니다. - 앱이 꺼질때 스프링부트 내부의 변수에 저장되어 있던 URL 정보들이 전부 날아갑니다. - 이 문제는 이후에 영속성을 부여해서 해결할 예정입니다. - 참고로 이렇게 꺼지기 때문에 fly.io 가 비용이 저렴하게 발생합니다. - 물론 꺼진 이후에 요청이 들어오면 자동으로 켜집니다. - 그래서 5분동안 요청이 없다가, 그 이후에 요청을 하면 해당 요청은 오래 걸립니다. ## 순서 - 지난 스텝에서 수행한 배포가 잘 되었는지 확인 - application-secret.yml 의 내용이 운영서버에서 잘 반영되었는지 확인 - 소스코드 변경사항을 서버에 반영하는 방법 - application-secret.yml 변경사항을 서버에 반영하는 방법 - 실 서버에서 앱이 잘 되는지 테스트 - fly.io 에서의 스프링부트는 자주 꺼졌다가 켜집니다. # 챕터 04 완료 ## 조건 1 : @ ### 요구사항 : @ --- # 챕터 05 ## 챕터명 : 데이터베이스 # 스텝 05-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 01:45 : 백엔드 실력의 핵심은 데이터베이스를 잘 다루는 것 입니다. ## 순서 - 이번 챕터의 목표 : 주어진 상황에 맞게 데이터베이스 설계할 수 있다. # 스텝 05-02 ## 스텝명 : MySQL과 Dbeaver 설치 - 추가설명 : 10:27 : 크롬은 네이버가 아닙니다. Dbeaver 도 MySQL 이 아닙니다. 단지 MySQL 서버에 접속하기 위한 도구입니다. ## 핵심요약 ## 순서 - MySQL 설치 - Dbeaver 설치 ## MySQL 서버 띄우기 - MySQL 포트는 기본적으로 `3306` 을 사용합니다. - 설치가 안된다면 기존에 직접 설치한 MySQL 을 지우고 다시시도해주세요. - root 계정의 비밀번호는 `lldj123414` 로 하겠습니다. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. chmod 644 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf echo "[mysqld] # general_log = ON # general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ -p 3306:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=lldj123414 \ -d \ mysql ``` ## MySQL 초기화 - MySQL 서버를 초기화할 때 사용해주세요. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 기존 컨테이너와 볼륨 제거 docker ps -a | grep -q mysql-1 && docker rm -f mysql-1 rm -rf dockerProjects/mysql-1 # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. echo "[mysqld] # general_log = ON # general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ -p 3306:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=lldj123414 \ -d \ mysql ``` ## 모든 도커자원(이미지, 컨테이너, 네트워크 볼륨) 삭제 명령어 - 가끔 도커 관련 실습을 처음부터 다시하고 싶을 때 아래 명령어가 유용합니다. ```bash # 컨테이너 삭제 docker rm -f $(docker ps -qa) # 이미지 삭제 docker rmi -f $(docker images -qa) # 안쓰는 네트워크 삭제 docker network prune -f # 안쓰는 볼륨 삭제 docker volume prune -f ``` ## Dbeaver 최신 버전 설치 및 세팅 - [Dbaver 최신버전 다운로드](https://dbeaver.io/download) - 최신버전에서 F9(스크립트 실행)관련 오류가 있을 수 있습니다. - 만약에 오류가 있다면 아래 링크에 있는 23.3.5 버전을 받아주세요. - ![img](https://i.postimg.cc/WzvtRKqv/UbL0xZb.png) - ![img](https://i.postimg.cc/9FczJ6jP/ITBwUyn.png) ## Dbeaver 23.3.5 버전 설치 및 세팅 - 최신버전이 안될때는 최신버전을 삭제 후 이 버전으로 설치해보세요. - [Dbaver 23.3.5 버전 다운로드](https://github.com/dbeaver/dbeaver/releases/tag/23.3.5) - ![img](https://i.imgur.com/mWBcTxb.png) - macos-aarch64.dmg : 맥 M1, M2 칩 - macos-x86_64.dmg : 맥 인텔칩 칩 - macos-x86_64-setup.exe : 윈도우 사용자 # 스텝 05-03 ## 스텝명 : 데이터베이스와 MySQL - 추가설명 : 03:18 : 데이터베이스는 테이블들로 구성되어 있고, 테이블은 데이터(row, 행)들로 구성되어 있습니다. ## 핵심요약 - DB == 데이터베이스 - MySQL == MariaDB - MySQL은 DBMS 입니다. - DBMS == DataBase Management System - DBMS는 여러개의 DB를 관리하는 시스템입니다. - MySQL은 DBMS 중에 하나 입니다. - 다른 DBMS로는 오라클, MSSQL 등이 있습니다. - MySQL은 전세계에서 가장 많이 사용되는 DBMS 입니다. - DB == 폴더 - 폴더 => 묶어주는 것 - DB는 무엇으로 구성되는가? : 테이블들로 구성되어 있음 - 테이블 == 표 == 엑셀파일 - 표 == 칼럼(열, 1줄) + 로우(행, 여러줄) - 칼럼 == 번호, 이름, 나이, 연락처, 이메일 - 로우 == 1, 홍길동, 24, 010-1234-1234, test@test.com - 표에서 칼럼은 한줄만 존재한다. - 표에서 로우는 0 \~ N줄 존재할 수 있다. - SQL은 명령어 이다. - SQL은 DB에게 명령을 내릴 때 사용된다. - SQL 명령어 : 전체 데이터베이스 리스팅 - `SHOW DATABASES;` - SQL 명령어 : 특정 데이터베이스 선택, 다른말로 하면 특정 폴더(DB)로 접속 명령어 - ``USE \`DB이름\`;`` - EX : USE \`mysql\`; - SQL 명령어 : 현재 접속해 있는 DB안의 모든 테이블들을 리스팅 - `SHOW TABLES;` ## 순서 - DBMS, DB, 테이블 개념 설명 ## DB, TABLE, ROW의 CRUD 명령 | 종류 | DB(데이터베이스/폴더) | TABLE(테이블/엑셀파일) | ROW(로우/엑셀파일의 한 행) | | --- | --- | --- | --- | | 조회(R) | `SHOW DATABASES;` | `SHOW TABLES;`
`SHOW TABLES LIKE 'ar%'`
`DESC article;`(한 테이블 안에 있는 칼럼들 조회) | `SELECT id, regDate`
`FROM article`
`WHERE id >= 4`
`AND title LIKE '제%'`
`ORDER BY id DESC`
`LIMIT 3;` | | 생성(C) | ``CREATE DATABASE `a1`;``; | `CREATE TABLE article (`
  `id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,`
  `regDate DATETIME NOT NULL,`
  `title VARCHAR(100) NOT NULL,`
  `body TEXT NOT NULL,`
  `PRIMARY KEY(id)`
`);` | `INSERT INTO article`
`SET regDate = NOW(),`
`title = '제목1',`
`body = '내용1';` | | 수정(U) | ``ALTER DATABASE `a1` ``
`CHARACTER SET = utf8mb4`
`COLLATE = utf8mb4_unicode_ci;` | `ALTER TABLE article ADD COLUMN hit INT(10);`
`ALTER TABLE article MODIFY COLUMN hit INT(10) UNSIGNED NOT NULL;`
`ALTER TABLE article CHANGE COLUMN hit hitNumber INT(10) UNSIGNED NOT NULL;`
`ALTER TABLE article DROP COLUMN hit;`
``ALTER TABLE article DROP INDEX `PRIMARY`;``
`ALTER TABLE article ADD PRIMARY KEY(id);` | ``UPDATE `article` ``
`SET title = '인기글',`
`body = '내용'`
`WHERE id > 3;` | | 삭제(D) | ``DROP DATABASE `a1`;`` | ``DROP TABLE `article`;`` | ``DELETE FROM `article`;`` | | SQL 종류 | `Data Definition Language` | `Data Definition Language` | `Data Manipulation Language` | ## SELECT SQL 각 구문별 실행순서 1. FROM, JOIN 2. ON, WHERE 3. 2차 테이블 완성 4. GROUP BY 5. 그룹함수 6. 3차 테이블 완성(그룹작업이 있을 경우에만) 7. HAVING 8. 4차 테이블 완성(HAVING작업이 있을 경우에만) 9. ORDER BY 10. LIMIT 11. 고객(MySQL 클라이언트, 대표적으로 Sequel Pro, SQLYog, JDBC Driver 등)에게 전달 ## SQL 특이사항 - \` 으로 감싸는 경우 : 칼럼명, 테이블명, DB명 # 스텝 05-04 ## 스텝명 : artricle CURD 문제 1/2 - 추가설명 : 12:59 : 데이터(ROW, 줄, 행)를 테이블에 추가(INSERT) 할 때 칼럼에 대항하는 데이터들이 전부 필요합니다. ## 문제 ```sql # 전체 데이터베이스 리스팅 # `mysql` 데이터 베이스 선택 # 테이블 리스팅 # 특정 테이블의 구조 # `test` 데이터 베이스 선택(없으면 먼저 만들어주세요.) # 테이블 리스팅 # 기존에 a1 데이터베이스가 존재 한다면 삭제 # 새 데이터베이스(`a1`) 생성 # 데이터베이스(`a1`) 선택 # 데이터베이스 추가 되었는지 확인 # 테이블 확인 # 게시물 테이블 article(title, body)을 만듭니다. # VARCHAR(100) => 문자 100개 저장가능 # text => 문자 많이 저장가능 # 잘 추가되었는지 확인, 리스팅과 구조까지 확인 # 데이터 하나 추가(title = 제목, body = 내용) # 데이터 조회(title 만) # 데이터 조회(title, body) # 데이터 조회(body, title) # 데이터 조회(*) # 데이터 또 하나 추가(title = 제목, body = 내용) # 데이터 조회(*, 어떤게 2번 게시물인지 알 수 없음) # 테이블 구조 수정(id 칼럼 추가, first) # 데이터 조회(*, id 칼럼의 값은 NULL) # 기존 데이터에 id값 추가(id = 1, id IS NULL) # 데이터 조회(*, 둘다 수정되어 버림..) # 기존 데이터 중 1개만 id를 2로 변경(LIMIT 1) # 데이터 조회(*) # 데이터 1개 추가(id = 3, title = 제목3, body = 내용3) # 데이터 조회(*) # 2번 게시물, 데이터 삭제 => DELETE # 데이터 조회(*) # 날짜 칼럼 추가(id 칼럼 뒤에) => regDate DATETIME # 테이블 구조 확인 # 데이터 조회(*, 날짜 정보가 비어있음) # 1번 게시물의 비어있는 날짜정보 채움(regDate = 2018-08-10 15:00:00) # 데이터 조회(*, 이제 2번 게시물의 날짜 정보만 넣으면 됩니다.) # NOW() 함수 실행해보기 # 3번 게시물의 비어있는 날짜정보 채움(NOW()) # 데이터 조회(*) ``` # 스텝 05-05 ## 스텝명 : artricle CURD 문제 2/2 - 추가설명 : 00:55 : 구조를 변경할 때, 테이블을 다시 만들면 편하지만, 데이터가 전부 삭제되기 때문에 `alter table` 을 사용해야 합니다. ## 문제정답 ```sql # 전체 데이터베이스 리스팅 SHOW DATABASES; # `mysql` 데이터 베이스 선택 USE mysql; # 테이블 리스팅 SHOW TABLES; # 특정 테이블의 구조 DESC `user`; # `test` 데이터 베이스 선택(없으면 먼저 만들어주세요.) CREATE DATABASE IF NOT EXISTS test; USE test; # 테이블 리스팅 SHOW TABLES; # 기존에 a1 데이터베이스가 존재 한다면 삭제 DROP DATABASE IF EXISTS `a1`; # 새 데이터베이스(`a1`) 생성 CREATE DATABASE `a1`; # 데이터베이스(`a1`) 선택 USE `a1`; # 데이터베이스 추가 되었는지 확인 SHOW DATABASES; # 테이블 확인 SHOW TABLES; # 게시물 테이블 article(title, body)을 만듭니다. # VARCHAR(100) => 문자 100개 저장가능 # text => 문자 많이 저장가능 CREATE TABLE article ( title VARCHAR(100), `body` TEXT ); # 잘 추가되었는지 확인, 리스팅과 구조까지 확인 SHOW TABLES; DESC article; # 데이터 하나 추가(title = 제목, body = 내용) INSERT INTO article SET title = '제목', `body` = '내용'; # 데이터 조회(title 만) SELECT title FROM article; # 데이터 조회(title, body) SELECT title, `body` FROM article; # 데이터 조회(body, title) SELECT `body`, title FROM article; # 데이터 조회(*) SELECT * FROM article; # 데이터 또 하나 추가(title = 제목, body = 내용) INSERT INTO article SET title = '제목', `body` = '내용'; # 데이터 조회(*, 어떤게 2번 게시물인지 알 수 없음) SELECT * FROM article; # 테이블 구조 수정(id 칼럼 추가, first) ALTER TABLE article ADD COLUMN id INT FIRST; # 데이터 조회(*, id 칼럼의 값은 NULL) SELECT * FROM article; # 기존 데이터에 id값 추가(id = 1, id IS NULL) UPDATE article SET id = 1 WHERE id IS NULL; # 데이터 조회(*, 둘다 수정되어 버림..) SELECT * FROM article; # 기존 데이터 중 1개만 id를 2로 변경(LIMIT 1) UPDATE article SET id = 2 LIMIT 1; # 데이터 조회(*) SELECT * FROM article; # 데이터 1개 추가(id = 3, title = 제목3, body = 내용3) INSERT INTO article SET id = 3, title = '제목3', body = '내용3'; # 데이터 조회(*) SELECT * FROM article; # 2번 게시물, 데이터 삭제 => DELETE DELETE FROM article WHERE id = 2; # 데이터 조회(*) SELECT * FROM article; # 날짜 칼럼 추가(id 칼럼 뒤에) => regDate DATETIME ALTER TABLE article ADD COLUMN regDate DATETIME AFTER id; # 테이블 구조 확인 DESC article; # 데이터 조회(*, 날짜 정보가 비어있음) SELECT * FROM article; # 1번 게시물의 비어있는 날짜정보 채움(regDate = 2018-08-10 15:00:00) UPDATE article SET regDate = '2018-08-10 15:00:00' WHERE id = 1; # 데이터 조회(*, 이제 2번 게시물의 날짜 정보만 넣으면 됩니다.) SELECT * FROM article; # NOW() 함수 실행해보기 SELECT NOW(); # 3번 게시물의 비어있는 날짜정보 채움(NOW()) UPDATE article SET regDate = NOW() WHERE id = 3; # 데이터 조회(*) SELECT * FROM article; ``` # 스텝 05-06 ## 스텝명 : 제약 문제 1/2 - 추가설명 : 02:50 : 데이터를 입력할 때 누락한 칼럼의 값은 NULL 이 들어갑니다. ## 문제 ```sql # 기존에 a2 데이터베이스가 존재 한다면 삭제 # 새 데이터베이스(`a2`) 생성 # 새 데이터베이스(`a2`) 선택 # article 테이블 생성(id, regDate, title, body) # article 테이블 조회(*) # article 테이블에 data insert (regDate = NOW(), title = '제목', body = '내용') # article 테이블에 data insert (regDate = NOW(), title = '제목', body = '내용') # article 테이블 조회(*) ## id가 NULL인 데이터 생성이 가능하네? # id 데이터는 꼭 필수 이기 때문에 NULL을 허용하지 않게 바꾼다.(alter table, not null) ## 기존의 NULL값 때문에 실패가 뜬다. # 기존의 NULL값을 0으로 바꾼다. # NULL을 허용하지 않게 바꾼다.(alter table, not null) # article 테이블 조회(*) # 생각해 보니 모든 행(row)의 id 값은 유니크 해야한다.(ADD PRIMARY KEY(id)) ## 오류가 난다. 왜냐하면 기존의 데이터 중에서 중복되는게 있기 때문에 # id가 0인 것 중에서 1개를 id 1로 바꾼다. # article 테이블 조회(*) # id가 0인것을 id 2로 바꾼다. # 생각해 보니 모든 행(row)의 id 값은 유니크 해야한다.(ADD PRIMARY KEY(id)) ## 이제 적용이 잘 된다. # id 칼럼에 auto_increment 를 건다. ## auto_increment 를 걸기전에 해당 칼럼은 무조건 key 여야 한다. # article 테이블 구조확인(desc) # 나머지 칼럼 모두에도 not null을 적용해주세요. # id 칼럼에 UNSIGNED 속성을 추가하세요. # 작성자(writer) 칼럼을 title 칼럼 다음에 추가해주세요. # 작성자(writer) 칼럼의 이름을 nickname 으로 변경해주세요.(ALTER TABLE article CHANGE oldName newName TYPE 조건) # nickname 칼럼의 위치를 body 밑으로 보내주세요.(MODIFY COLUMN nickname) # hit 조회수 칼럼 추가 한 후 삭제해주세요. # hit 조회수 칼럼을 다시 추가 # 기존의 비어있는 닉네임 채워넣기(무명) # article 테이블에 데이터 추가(regDate = NOW(), title = '제목3', body = '내용3', nickname = '홍길순', hit = 10) # article 테이블에 데이터 추가(regDate = NOW(), title = '제목4', body = '내용4', nickname = '홍길동', hit = 55) # article 테이블에 데이터 추가(regDate = NOW(), title = '제목5', body = '내용5', nickname = '홍길동', hit = 10) # article 테이블에 데이터 추가(regDate = NOW(), title = '제목6', body = '내용6', nickname = '임꺽정', hit = 100) # 조회수 가장 많은 게시물 3개 만 보여주세요., 힌트 : ORDER BY, LIMIT # 작성자명이 '홍길'로 시작하는 게시물만 보여주세요., 힌트 : LIKE '홍길%' # 조회수가 10 이상 55 이하 인것만 보여주세요., 힌트 : WHERE 조건1 AND 조건2 # 작성자가 '무명'이 아니고 조회수가 50 이하인 것만 보여주세요., 힌트 : != # 작성자가 '무명' 이거나 조회수가 55 이상인 게시물을 보여주세요. 힌트 : OR ``` # 스텝 05-07 ## 스텝명 : 제약 문제 2/2 - 추가설명 : 12:45 : ORDER BY 칼럼을 여러개 두면 세밀한 정렬이 가능합니다. ## 문제정답 ```sql # 기존에 a2 데이터베이스가 존재 한다면 삭제 DROP DATABASE IF EXISTS `a2`; # 새 데이터베이스(`a2`) 생성 CREATE DATABASE `a2`; # 새 데이터베이스(`a2`) 선택 USE `a2`; # article 테이블 생성(id, regDate, title, body) CREATE TABLE article ( id INT, regDate DATETIME, title VARCHAR(100), `body` TEXT ); # article 테이블 조회(*) SELECT * FROM `article`; # article 테이블에 data insert (regDate = NOW(), title = '제목', body = '내용') INSERT INTO article SET regDate = NOW(), title = '제목', `body` = '내용'; # article 테이블에 data insert (regDate = NOW(), title = '제목', body = '내용') INSERT INTO article SET regDate = NOW(), title = '제목', `body` = '내용'; # article 테이블 조회(*) ## id가 NULL인 데이터 생성이 가능하네? SELECT * FROM `article`; # id 데이터는 꼭 필수 이기 때문에 NULL을 허용하지 않게 바꾼다.(alter table, not null) ## 기존의 NULL값 때문에 실패가 뜬다. # ALTER TABLE article MODIFY id INT NOT NULL; # 기존의 NULL값을 0으로 바꾼다. UPDATE article SET id = 0; # NULL을 허용하지 않게 바꾼다.(alter table, not null) ALTER TABLE article MODIFY id INT NOT NULL; # article 테이블 조회(*) SELECT * FROM `article`; # 생각해 보니 모든 행(row)의 id 값은 유니크 해야한다.(ADD PRIMARY KEY(id)) ## 오류가 난다. 왜냐하면 기존의 데이터 중에서 중복되는게 있기 때문에 # ALTER TABLE article ADD PRIMARY KEY(id); # id가 0인 것 중에서 1개를 id 1로 바꾼다. UPDATE article SET id = 1 WHERE id = 0 LIMIT 1; # article 테이블 조회(*) SELECT * FROM article; # id가 0인것을 id 2로 바꾼다. UPDATE article SET id = 2 WHERE id = 0; # 생각해 보니 모든 행(row)의 id 값은 유니크 해야한다.(ADD PRIMARY KEY(id)) ## 이제 적용이 잘 된다. ALTER TABLE article ADD PRIMARY KEY(id); # id 칼럼에 auto_increment 를 건다. ## auto_increment 를 걸기전에 해당 칼럼은 무조건 key 여야 한다. ALTER TABLE article MODIFY COLUMN id INT NOT NULL AUTO_INCREMENT; # article 테이블 구조확인(desc) DESC article; # 나머지 칼럼 모두에도 not null을 적용해주세요. ALTER TABLE article MODIFY COLUMN regDate DATETIME NOT NULL; ALTER TABLE article MODIFY COLUMN title VARCHAR(100) NOT NULL; ALTER TABLE article MODIFY COLUMN `body` TEXT NOT NULL; # id 칼럼에 UNSIGNED 속성을 추가하세요. ALTER TABLE article MODIFY COLUMN id INT UNSIGNED NOT NULL AUTO_INCREMENT; DESC article; # 작성자(writer) 칼럼을 title 칼럼 다음에 추가해주세요. ALTER TABLE article ADD COLUMN writer VARCHAR(100) NOT NULL AFTER title; # 작성자(writer) 칼럼의 이름을 nickname 으로 변경해주세요.(ALTER TABLE article CHANGE oldName newName TYPE 조건) ALTER TABLE article CHANGE `writer` `nickname` VARCHAR(100) NOT NULL; DESC article; # nickname 칼럼의 위치를 body 밑으로 보내주세요.(MODIFY COLUMN nickname) ALTER TABLE article MODIFY COLUMN nickname VARCHAR(100) NOT NULL AFTER body; DESC article; # hit 조회수 칼럼 추가 한 후 삭제해주세요. ALTER TABLE article ADD COLUMN hit INT UNSIGNED NOT NULL AFTER nickname; DESC article; ALTER TABLE article DROP COLUMN hit; DESC article; # hit 조회수 칼럼을 다시 추가 ALTER TABLE article ADD COLUMN hit INT UNSIGNED NOT NULL AFTER nickname; DESC article; # 기존의 비어있는 닉네임 채워넣기(무명) UPDATE article SET nickname = '무명' WHERE nickname = ''; # article 테이블에 데이터 추가(regDate = NOW(), title = '제목3', body = '내용3', nickname = '홍길순', hit = 10) INSERT INTO article SET regDate = NOW(), title = '제목3', `body` = '내용3', nickname = '홍길순', hit = 10; # article 테이블에 데이터 추가(regDate = NOW(), title = '제목4', body = '내용4', nickname = '홍길동', hit = 55) INSERT INTO article SET regDate = NOW(), title = '제목4', `body` = '내용4', nickname = '홍길동', hit = 55; # article 테이블에 데이터 추가(regDate = NOW(), title = '제목5', body = '내용5', nickname = '홍길동', hit = 10) INSERT INTO article SET regDate = NOW(), title = '제목5', `body` = '내용5', nickname = '홍길동', hit = 10; # article 테이블에 데이터 추가(regDate = NOW(), title = '제목6', body = '내용6', nickname = '임꺽정', hit = 100) INSERT INTO article SET regDate = NOW(), title = '제목6', `body` = '내용6', nickname = '임꺽정', hit = 100; # 조회수 가장 많은 게시물 3개 만 보여주세요., 힌트 : ORDER BY, LIMIT SELECT * FROM article ORDER BY hit DESC LIMIT 3; # 작성자명이 '홍길'로 시작하는 게시물만 보여주세요., 힌트 : LIKE '홍길%' SELECT * FROM article WHERE nickname LIKE '홍길%'; # 조회수가 10 이상 55 이하 인것만 보여주세요., 힌트 : WHERE 조건1 AND 조건2 SELECT * FROM article WHERE hit >= 10 AND hit <= 55; # 작성자가 '무명'이 아니고 조회수가 50 이하인 것만 보여주세요., 힌트 : != SELECT * FROM article WHERE nickname != '무명' AND hit <= 50; # 작성자가 '무명' 이거나 조회수가 55 이상인 게시물을 보여주세요. 힌트 : OR SELECT * FROM article WHERE nickname = '무명' OR hit >= 55; ``` # 스텝 05-08 ## 스텝명 : INNER JOIN 문제 1/2 - 추가설명 : 10:27 : 테이블 간의 관계를 맺을 때 불변데이터를 기반으로 하면 편합니다. ## 문제 ```sql # a5 데이터베이스 삭제/생성/선택 # 부서(dept) 테이블 생성 및 홍보부서 기획부서 추가 # 사원(emp) 테이블 생성 및 홍길동사원(홍보부서), 홍길순사원(홍보부서), 임꺽정사원(기획부서) 추가 # 홍보를 마케팅으로 변경 # 마케팅을 홍보로 변경 # 홍보를 마케팅으로 변경 ## 구조를 변경하기로 결정(사원 테이블에서, 이제는 부서를 이름이 아닌 번호로 기억) # 사장님께 드릴 인명록을 생성 # 사장님께서 부서번호가 아니라 부서명을 알고 싶어하신다. ## 그래서 dept 테이블 조회법을 알려드리고 혼이 났다. ## 출력 : id, regDate, name, deptId # 사장님께 드릴 인명록을 생성(v2, 부서명 포함, ON 없이) ## 이상한 데이터가 생성되어서 혼남 ## 출력 : id, regDate, name, deptId, 부서명 # 사장님께 드릴 인명록을 생성(v3, 부서명 포함, 올바른 조인 룰(ON) 적용) ## 보고용으로 좀 더 편하게 보여지도록 고쳐야 한다고 지적받음 ## 출력 : id, regDate, name, deptId, 부서명 # 사장님께 드릴 인명록을 생성(v4, 사장님께서 보시기에 편한 칼럼명(AS)) ## 출력 : 사원번호, 사원명, 입사일, 부서명 # 사장님께 드릴 인명록을 생성(v5, 테이블 AS 적용) ## 출력 : 사원번호, 사원명, 입사일, 부서명 # 추가내용 # 기획부서에 김영희가 배속되었다. ## 먼저 기획부서의 번호가 몇번인지 확인 ## 김영희 사원 추가 # 신설 IT부서에 김철수가 배속되었다. ## IT 부서의 번호가 3번임을 확인 ## 김철수 사원 추가 ``` # 스텝 05-09 ## 스텝명 : INNER JOIN 문제 2/2 - 추가설명 : 06:00 : SELECT 할 때 테이블을 2개 이상을 쓰면 모든 데이터들의 조합이 발생합니다. ON 이 필요합니다. ## 문제정답 ```sql # a5 데이터베이스 삭제/생성/선택 DROP DATABASE IF EXISTS a5; CREATE DATABASE a5; USE a5; # 부서(dept) 테이블 생성 및 홍보부서 기획부서 추가 CREATE TABLE dept ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, PRIMARY KEY(id), regDate DATETIME NOT NULL, `name` CHAR(100) NOT NULL UNIQUE ); INSERT INTO dept SET regDate = NOW(), `name` = '홍보'; INSERT INTO dept SET regDate = NOW(), `name` = '기획'; SELECT * FROM dept; # 사원(emp) 테이블 생성 및 홍길동사원(홍보부서), 홍길순사원(홍보부서), 임꺽정사원(기획부서) 추가 CREATE TABLE emp ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, PRIMARY KEY(id), regDate DATETIME NOT NULL, `name` CHAR(100) NOT NULL, deptName CHAR(100) NOT NULL ); INSERT INTO emp SET regDate = NOW(), `name` = '홍길동', deptName = '홍보'; INSERT INTO emp SET regDate = NOW(), `name` = '홍길순', deptName = '홍보'; INSERT INTO emp SET regDate = NOW(), `name` = '임꺽정', deptName = '기획'; SELECT * FROM emp; # 홍보를 마케팅으로 변경 ## 부서명 변경(홍보 => 마케팅) SELECT * FROM dept; UPDATE dept SET `name` = '마케팅' WHERE `name` = '홍보'; SELECT * FROM dept; ## 사원테이블에서 부서명 변경(홍보 => 마케팅) SELECT * FROM emp; UPDATE emp SET deptName = '마케팅' WHERE deptName = '홍보'; SELECT * FROM emp; # 마케팅을 홍보로 변경 ## 부서명 변경(마케팅 => 홍보) SELECT * FROM dept; UPDATE dept SET `name` = '홍보' WHERE `name` = '마케팅'; SELECT * FROM dept; ## 사원테이블에서 부서명 변경(마케팅 => 홍보) SELECT * FROM emp; UPDATE emp SET deptName = '홍보' WHERE deptName = '마케팅'; SELECT * FROM emp; # 홍보를 마케팅으로 변경 ## 구조를 변경하기로 결정(사원 테이블에서, 이제는 부서를 이름이 아닌 번호로 기억) ALTER TABLE emp ADD COLUMN deptId INT UNSIGNED NOT NULL; SELECT * FROM emp; UPDATE emp SET deptId = 1 WHERE deptName = '홍보'; UPDATE emp SET deptId = 2 WHERE deptName = '기획'; SELECT * FROM emp; ALTER TABLE emp DROP COLUMN deptName; ## 이제 더 이상 emp 테이블에 부서명이 없다. SELECT * FROM emp; ## 부서명 변경(홍보 => 마케팅) SELECT * FROM dept; UPDATE dept SET `name` = '마케팅' WHERE `name` = '홍보'; SELECT * FROM dept; # 사장님께 드릴 인명록을 생성 SELECT * FROM emp; # 사장님께서 부서번호가 아니라 부서명을 알고 싶어하신다. ## 그래서 dept 테이블 조회법을 알려드리고 혼이 났다. ## 출력 : id, regDate, name, deptId SELECT * FROM dept WHERE id = 1; # 사장님께 드릴 인명록을 생성(v2, 부서명 포함, ON 없이) ## 이상한 데이터가 생성되어서 혼남 ## 출력 : id, regDate, name, deptId, 부서명 SELECT emp.*, dept.name AS `부서명` FROM emp INNER JOIN dept; /* 2개 테이블의 모든 데이터들의 조합으로 구성된 무지성병합테이블이 생성되고 거기서 내용을 가져온다. */ # 사장님께 드릴 인명록을 생성(v3, 부서명 포함, 올바른 조인 룰(ON) 적용) ## 보고용으로 좀 더 편하게 보여지도록 고쳐야 한다고 지적받음 ## 출력 : id, regDate, name, deptId, 부서명 SELECT emp.*, dept.id, dept.name AS `부서명` FROM emp INNER JOIN dept ON emp.deptId = dept.id; /* 무지성병합테이블에서 이상한 데이터를 없앤다, 즉 이 조건을 만족하지 못하는 녀석은 필터링 한다. INNER JOIN 사용할 때 ON 은 필수 */ # 사장님께 드릴 인명록을 생성(v4, 사장님께서 보시기에 편한 칼럼명(AS)) ## 출력 : 사원번호, 사원명, 입사일, 부서명 SELECT emp.id AS `사원번호`, emp.name AS `사원명`, DATE(emp.regDate) AS `입사일`, dept.name AS `부서명` FROM emp INNER JOIN dept ON emp.deptId = dept.id ORDER BY `부서명`, `사원명`; # 사장님께 드릴 인명록을 생성(v5, 테이블 AS 적용) ## 출력 : 사원번호, 사원명, 입사일, 부서명 SELECT E.id AS `사원번호`, E.name AS `사원명`, DATE(E.regDate) AS `입사일`, D.name AS `부서명` FROM emp AS E INNER JOIN dept AS D ON E.deptId = D.id ORDER BY `부서명`, `사원명`; # 추가내용 # 기획부서에 김영희가 배속되었다. ## 먼저 기획부서의 번호가 몇번인지 확인 SELECT * FROM dept; ## 김영희 사원 추가 INSERT INTO emp SET regDate = NOW(), `name` = '김영희', deptId = 2 # 신설 IT부서에 김철수가 배속되었다. INSERT INTO dept SET regDate = NOW(), `name` = 'IT'; ## IT 부서의 번호가 3번임을 확인 SELECT * FROM dept; ## 김철수 사원 추가 INSERT INTO emp SET regDate = NOW(), `name` = '김철수', deptId = 3; ``` # 챕터 05 완료 - @ # 챕터 06 ## 챕터명 : 서비스에 Spring Data JPA로 영속성 부여 # 스텝 06-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:20 : 영속성이 부여되면 스프링부트를 재부팅 해도, 컴퓨터를 재부팅해도 데이터가 유지됩니다. ## 순서 - 이번 챕터의 목표 : JPA를 사용하여 데이터베이스를 다룰 수 있다. # 스텝 06-02 ## 스텝명 : 개발환경세팅 - 추가설명 : 00:50 : `Get from VCS` (은)는 내부적으로 `git clone` 을 수행합니다. ## 핵심요약 ### 특정 GIT 브랜치에서 작업을 이어가는 방법 2가지 1. git clone 후 checkout - 인텔리제이로 GIT CLONE 하는 방법 - 메뉴 => File => New => `Project From Version Control` - 또는, 웰컴스크린 => `Get from VCS` - `URL` : [https://github.com/jhs512/demo03-2024](https://github.com/jhs512/demo03-2024) 입력 - 직접 GIT CLONE 하는 방법 - GIT BASH 로 ideaProjects 폴더로 이동 - `git clone https://github.com/jhs512/demo03-2024` - ideaProejcts/demo03-2024 폴더를 인텔리제이로 열기 - 해당 프로젝트의 터미널 창에서 - `git checkout -b chapter-03 origin/chapter-03` 2. GITHUB 에서 바로 해당 브랜치의 소스코드를 다운로드 - 브라우저로 [https://github.com/jhs512/demo03-2024/tree/chapter-03](https://github.com/jhs512/demo03-2024/tree/chapter-03) 접속 - `<> Code ▾` 버튼 클릭 - `Download ZIP` 버튼 클릭하여 다운로드 - ideaProjects 폴더에서 압축풀기 - ideaProejcts/demo03-2024 폴더를 인텔리제이로 열기 ## 순서 - 챕터 03의 결과소스코드로 부터 시작 - MySQL 세팅 ## GIT - [리포지터리 - 스프링부트로 구현하는 할 일 관리 서비스 - https://github.com/jhs512/demo02-2024](https://github.com/jhs512/demo02-2024) - [리포지터리 - 스프링부트로 구현하는 할 일 관리 서비스 - 챕터 03 완성 소스코드 - https://github.com/jhs512/demo03-2024/tree/chapter-03](https://github.com/jhs512/demo03-2024/tree/chapter-03) - 챕터 03 완성 소스코드 ## MySQL 초기화 - MySQL 서버를 초기화할 때 사용해주세요. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 기존 컨테이너와 볼륨 제거 docker ps -a | grep -q mysql-1 && docker rm -f mysql-1 rm -rf dockerProjects/mysql-1 # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. echo "[mysqld] # general_log = ON # general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ -p 3306:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=lldj123414 \ -d \ mysql ``` # 스텝 06-03 ## 스텝명 : JPA 의존성 추가 - 추가설명 : 02:10 : 스프링부트에서 DB를 다룰 때 보통 Spring Data JPA 를 사용합니다. - 추가설명 : 03:05 : Spring Data JPA 의 처리 구조 : Spring Data JPA => JPA => 하이버네이트 => JDBC Driver => MySQL Driver => MySQL ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/21dfc0a) ## 핵심요약 - @ ## 순서 - JPA 소개 - JPA 의존성 추가 - JPA에 MySQL DB 정보 세팅 ## 스프링 이니셜라이저 - [스프링 이니셜라이저 - 온라인 스프링부트 프로젝트 생성기](https://start.spring.io/) ## build.gradle ```groovy plugins { id 'java' id 'org.springframework.boot' version '3.2.4' id 'io.spring.dependency-management' version '1.1.4' } group = 'com.ll' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '21' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { developmentOnly 'org.springframework.boot:spring-boot-devtools' compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-data-jpa' # JPA 추가 runtimeOnly 'com.mysql:mysql-connector-j' # JPA 가 바로 MySQL 과 직접 통신하지는 않고, 이 MySQL Driver 를 통해서 명령합니다. } tasks.named('test') { useJUnitPlatform() } ``` # 스텝 06-04 ## 스텝명 : Article 클래스로 article 테이블 생성 - 추가설명 : 03:15 : spring.jpa.hibernate.ddl-auto=update 라고 설정하면 DB 테이블의 자동으로 세팅됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/009b7b2) ## 핵심요약 - @ ## 순서 - Article 엔티티 클래스 추가 - spring.jpa.hibernate.ddl-auto=update ## `surl_dev` DB 삭제 후 생성 ```sql drop database if exists surl_dev; create database surl_dev; use surl_dev; ``` # 스텝 06-05 ## 스텝명 : JPA 가 실행하는 SQL을 로깅 - 추가설명 : @@:@@ : `default_bach_fetch_size: 100` 로 SQL 관련된 대표적인 문제인 N + 1 문제를 해결할 수 있습니다. 추후 다룹니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/f58078f) ## 핵심요약 - @ ## 순서 - SQL을 로깅 하도록 설정 - SQL이 로깅되는지 테스트 # 스텝 06-06 ## 스텝명 : 게시물 INSERT - 추가설명 : 02:35 : 빈은 개발자가 직접 new 를 통해서 객체를 생성하지 않아도 되도록 스프링부트가 직접 관리하는 객체를 말합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/2900a83) ## 핵심요약 - @ ## 순서 - initNotProd 빈 등록 - ArticleRepository 구현 - articleRepository 객체로 INSERT # 스텝 06-07 ## 스텝명 : 게시물 COUNT, DELETE - 추가설명 : 02:50 : COUNT 함수를 통해서 특정 조건에 만족하는 ROW 의 개수를 구할 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/2141e91) ## 핵심요약 - @ ## 순서 - 스프링부트가 재실행 될 때마다, 샘플 게시물 데이터가 추가됨을 확인 - SELECT COUNT 설명 - TRUNCATE 설명 - JPA에서 COUNT 사용 - 샘플 게시물 데이터가 이미 있다면 중복해서 만들지 않도록 - 게시물 삭제 - @Builder와 생성자들 # 스텝 06-08 ## 스텝명 : 게시물 UPDATE - 추가설명 : 02:05 : `cat 파일명 | less` 후 방향키로 로그를 볼 수 있습니다. 종료는 `q` - 추가설명 : 02:30 : 물리적인 트랜잭션은 DBMS 에서의 트랜잭션을 말합니다. 논리적인 트랜잭션(스프링부트 내부에서의 트랜잭션)은 지금은 모르셔도 됩니다. - 추가설명 : 02:52 : 물리적인 트랜잭션의 시작과 끝을 로그를 통해서 볼 수 있습니다. - 추가설명 : 04:30 : 일반적으로는 @Transactional 안의 @Transactional 은 무시됩니다. 바깥쪽 @Transactional 만 인정됩니다. 그래서 하나의 트랜잭션으로 묶였습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/5262d35) ## 핵심요약 - @ ## 순서 - MySQL 초기화(제너럴 로그 켠 모드로 시작) - `echo ''` 으로 로그 비우는 방법 - `cat`과 `less`로 으로 로그 확인하는 방법 - 기존의 코드는 트랜잭션이 3개로 구성됨 - 하나의 트랜잭션으로 묶음 - 트랜잭션내에서의 엔티티 객체 수정은 자동으로 UPDATE 가 유발됨 - 영속성 컨텍스트는 트랜잭션 당 하나가 존재함 - 모든 엔티티 객체는 영속성 컨텍스트에 복제본(스냅샷)이 존재 - 영속컨 컨텍스트는 트랜잭셩이 종료될 때 더티체킹에 의해 체크된 것들에 대해서 UPDATE ## MySQL 초기화(제너럴 로그 켠 모드로 시작) - 이렇게 시작하면 MySQL 에서 실행된 모든 쿼리로그를 general.log 에서 볼 수 있습니다. - general.log 를 보면 트랜잭션이 어떻게 묶이는지도 확인할 수 있습니다. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 기존 컨테이너와 볼륨 제거 docker ps -a | grep -q mysql-1 && docker rm -f mysql-1 rm -rf dockerProjects/mysql-1 # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. echo "[mysqld] general_log = ON general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ -p 3306:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=lldj123414 \ -d \ mysql ``` ## 제너럴 로그 초기화 및 확인 ```bash # 이동 cd ~ # 운영환경에서는 `cd /` echo '' > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/general.log cat dockerProjects/mysql-1/volumes/etc/mysql/conf.d/general.log | less # 방향키 위/아래 로 이동, 종료는 q ``` # 스텝 06-09 ## 스텝명 : 게시물 SELECT - 추가설명 : 01:16 : this 를 통한 객체 내부 메서드에 의한 호출은 @Transactional 을 발동시키지 않습니다. - 추가설명 : 04:00 : findById, findAll 은 JpaRepository 인터페이스에서 기본적으로 제공합니다. - 추가설명 : 04:30 : Optional 은 리스트와 비슷하지만, 값이 최대 1개만 저장될 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/db24efd) ## 핵심요약 - @ ## 순서 - this 를 통한 메서드 호출은 @Transactional 이 발동하지 않음 - 외부객체에 의한 메서드 호출은 @Transactional 이 발동함 - @Lazy 와 @Autowired 조합은 this 의 외부호출모드 버전인 self 를 얻을 수 있음 - self 를 통한 메서드 호출은 @Transactional 이 발동함 - findById 는 Optional 을 리턴 - Optional 은 내부에 값이 0개 혹은 1개 - findAll 은 List 를 리턴 - List 는 내부에 값이 0개 혹은 N개 # 스텝 06-10 ## 스텝명 : 더 다양한 게시물 SELECT - 추가설명 : 03:00 : findById, findAll 과 다르게 다른 메서드는 여러분이 인터페이스에 정의해 줘야 사용할 수 있습니다. - 추가설명 : 04:00 : findByIdInOrderByTitleDescIdAsc 와 같이 메서드명을 짓는 규칙이 있고 지켜야 합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/b60abbe) ## 핵심요약 - @ ## 순서 - SQL 1 : `WHERE id IN (?, ?, ?) + ORDER BY id ASC` - SQL 2 : `WHERE title LIKE ?` - SQL 3 : `WHERE title = ? AND body = ?` - ChatGPT 에게 위 쿼리들을 실행하기 위한 JPA 추상 메서드 이름 명명법 물어보기 # 스텝 06-11 ## 스텝명 : ArticleService 도입 - 추가설명 : 00:41 : 리포지터리는 보통 관련 서비스에서만 접근이 가능하고, 그 외에 다른 모듈에서 직접 리포지터리를 다루지 않는게 보통입니다. ## 핵심요약 - @ ## 순서 - 보통 리포지터리는 담당 서비스(컴포넌트)가 있고 - 그 서비스를 통해서 리포지터리를 다루는게 보통입니다. - ArticleService 도입 ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/217897d) # 스텝 06-12 ## 스텝명 : 엔티티의 생성날짜, 수정날짜 자동기입 - 추가설명 : 00:09 : 자바에서 보통 날짜(시분초 까지 포함한)를 저장할 때 LocalDateTime 을 사용합니다. 그것은 MySQL 의 DATETIME 타입과 호환됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/e38b026) ## 핵심요약 - @ ## 순서 - Article 엔티티 클래스에 날짜 칼럼 2개 추가 - Article 객체가 생성될 때 날짜 칼럼들에 값을 수동으로 입력 - @CreatedDate - @LastModifiedDate # 스텝 06-13 ## 스텝명 : RsData 도입 - 추가설명 : 03:54 : RsData 를 사용하면 결과 데이터 뿐 아니라 상태코드, 메세지 까지 같이 묶어서 리턴할 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/485ce6c) ## 핵심요약 - @ ## 순서 - 어떠한 메서드를 호출 한 후 단순히 성공, 실패 여부 외의 더 자세한 메서드 수행 결과에 대한 정보가 필요할 때가 있습니다. - RsData 도입 - ArticlceService::write 에 RsData 도입 # 스텝 06-14 ## 스텝명 : 샘플 회원 2명 생성 - 추가설명 : 06:45 : 조회 결과가 최대 1개라면 보통 Optional 을 리턴하고, 그 외에는 List 를 리턴하는게 관례입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/7f49679) ## 핵심요약 - @ ## 순서 - Member 엔티티 클래스 추가 - username 필드에는 unique 제약 추가 - MemberRepository 클래스 추가 - MemberService 클래스 추가 - 샘플 회원이 2명 추가되도록 - MemberService::join 에서 username 중복체크 # 스텝 06-15 ## 스텝명 : 오류상태를 리턴말고 예외발생 - 추가설명 : 00:22 : 예외 상활 발생시 빠른 리턴을 사용해도 되지만 예외를 발생시키는게 관례입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/fb17162) ## 핵심요약 - @ ## 순서 - 예외상황에서 if 조건 return 으로 끝내도 되고, 예외를 발생시켜도 됨 - IllegalArgumentException 도 좋지만 추후 더 세밀한 예외 핸들링을 위해서 GlobalException 을 추가 - @Transactional 이 붙은 메서드에서 RuntimeException 계열 예외를 발생시킨다. - 그러면 해당 로직을 포함한 물리 트랜잭션(가장 바깥쪽 @Transactional 붙은 메서드)의 모든 쿼리가 취소된다. - GlobalException 은 getRsData() 메서드를 통해서 오류 상태에 대한 정보를 받을 수 있다. # 스텝 06-16 ## 스텝명 : 서비스에 @Transactional 적용 - 추가설명 : 00:16 : 서비스의 클래스에는 보통 @Transactional(readOnly = true) 를 붙이는게 관례입니다. ## 핵심요약 - @ ## 순서 - 서비스의 모든 public 메서드에는 @Transactional 을 붙여야 한다. - 그 중 오직 조회(SELECT)로만 구성된 메서드는 @Transactional(readOnly = True) 를 붙여야 한다. - 클래스 수준에서 @Transactional(readOnly = True) 를 붙힌다. - @Transactional 붙은 메서드에서 @Transactional 붙은 메서드를 수행하면 물리 트랜잭션은 가장 바깥쪽 메서드 기준으로 1개만 발동한다. - 다만 논리 트랜잭션은 @Transactional 붙은 메서드가 호출될 때 마다 작동한다. - 물리 트랜잭션이 중요하다. - 다만 논리 트랜잭션안에서 RuntimeException 계열의 예외를 발생시키면 조용한 롤백이 작동한다. - try catch 로 예외가 발생하는 메서드를 감싸도 소용없다. - @Transactional(noRollbackFor = GlobalException.class) 와 같이 특정 예외에 대해서는 조용한 롤백이 안되도록 할 수 있다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/e97aeb1) # 스텝 06-17 ## 스텝명 : @MappedSuperclass - 추가설명 : 01:43 : `@EqualsAndHashCode` 의 효과로 인해서 `member1.equals(member2);` 와 같은 코드에서 객체 전체비교가 아닌 id 비교만으로 끝납니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/30dfa12) ## 핵심요약 - @ ## 순서 - BaseTime 은 createDate, modifyDate 칼럼을 가집니다. - BaseTime 은 BaseEntity 를 상속받습니다. - BaseEntity 는 id 칼럼을 가집니다. - BaseTime 과 BaseEntity 에는 @MappedSuperclass 를 붙여야 합니다. - 각 엔티티 클래스가 BaseTime 를 상속 받아서 코드량을 많이 줄입니다. # 스텝 06-18 ## 스텝명 : Article 에 Member 추가 - 추가설명 : 02:47 : DB 테이블의 특정 필드에 객체를 저장할 수 없지만, 그의 짝인 엔티티 클래스에서는 필드에 객체 타입으로 선언하는게 관례입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/4eb50ea) ## 핵심요약 - @ ## 순서 - Article 클래스에 해당 게시물을 누가 작성했는지에 대한 정보를 표시하기 위해 필드를 추가해야 한다. - `private String authorUsername;` 도 가능하고 - `private Long authorId;` 도 가능하지만 - `@ManyToOne private Member auhor;` 로 하는게 JPA 에서의 관례 이다. # 스텝 06-19 ## 스텝명 : Surl 엔티티 화 - 추가설명 : 05:13 : 서비스의 역할은 비지니스 로직의 처리 입니다. 모든 비지니스 로직은 서비스에 의해서 수행되는게 좋습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d3a4313) ## 핵심요약 - @ ## 순서 - Surl 클래스 엔티티 화 - SurlRepository 추가 - SurlService 추가 # 스텝 06-20 ## 스텝명 : Surl에 author 필드 추가 - 추가설명 : 13:59 : 프록시 엔티티 객체를 사용하면 쓸데없는 SELECT 쿼리의 빈도를 낮출 수 있어서 사용했습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/4211d41) ## 핵심요약 - @ ## 순서 - Surl 엔티티에도 author 필드 추가 - Rq 를 통해서 현재 로그인한 회원 객체 얻기 - 프록시 객체를 통한 Lazy 로딩 설명 # 챕터 06 완료 - @ # 챕터 07 ## 챕터명 : 테라폼, AWS EC2로 CI/CD 구축 # 스텝 07-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:10 : fly.io, aws 둘 다 해외결제 가능한 신용카드가 필요하고 실습중 요금이 발생할 수 있습니다. ## 순서 - 이번 챕터의 목표 : 테라폼으로 AWS 자원을 관리하고, 무중단 CI/CD를 구축할 수 있다. # 스텝 07-02 ## 스텝명 : PostgreSQL 띄우기 - 추가설명 : 01:58 : JPA를 사용하고 있다면 다른 종류의 DBMS로 바꾸는 작업이 쉽습니다. ## 핵심요약 - @ ## 순서 - Spring Data JPA가 의존하는 기술들 - docker run 옵션 unless-stopped 설명 - mysql general log 끄기 - postgresql 도커로 실행 - dbeaver로 postgresql 에 접속 - surl_dev 데이터베이스 생성 - postgresql의 DDL과 DML ## MySQL 초기화(제너럴 로그 끈 모드로 시작) - 이렇게 시작하면 MySQL 에서 실행된 모든 쿼리로그를 general.log 에서 볼 수 있습니다. - general.log 를 보면 트랜잭션이 어떻게 묶이는지도 확인할 수 있습니다. ```bash # MySQL 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` # 기존 컨테이너와 볼륨 제거 docker ps -a | grep -q mysql-1 && docker rm -f mysql-1 rm -rf dockerProjects/mysql-1 # 설정파일 만들기 mkdir -p dockerProjects/mysql-1/volumes/etc/mysql/conf.d # 원하는 설정을 적어주세요. echo "[mysqld] # general_log = ON # general_log_file = /etc/mysql/conf.d/general.log" > dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf chmod 444 dockerProjects/mysql-1/volumes/etc/mysql/conf.d/my.cnf docker run \ --name mysql-1 \ --restart unless-stopped \ -p 3306:3306 \ -v /${PWD}/dockerProjects/mysql-1/volumes/var/lib/mysql:/var/lib/mysql \ -v /${PWD}/dockerProjects/mysql-1/volumes/etc/mysql/conf.d:/etc/mysql/conf.d \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=lldj123414 \ -d \ mysql ``` ## PostgreSQL 서버 띄우기 - PostgreSQL 포트는 기본적으로 `5432` 입니다. - 설치가 안된다면 기존에 직접 설치한 PostgreSQL 을 지우고 다시시도해주세요. - `postgres` 계정의 비밀번호는 `lldj123414` 입니다. ```bash # 오라클 없을 때 띄우는 방법 cd ~ # 운영환경에서는 `cd /` docker run \ --name postgres_1 \ --restart unless-stopped \ -e POSTGRES_PASSWORD=lldj123414 \ -v /${PWD}/dockerProjects/postgres_1/volumes/var/lib/postgresql/data:/var/lib/postgresql/data \ -p 5432:5432 \ -d postgres ``` ## PostgreSQL 상식 - MySQL과 달리 PostgreSQL 에서는 관리자 계정이 `root` 가 아닌 `postgres` 이다. - `postgres` DB는 기본적으로 존재한다. - `CREATE DATABASE app1;`; 으로 데이터베이스를 만들 수 있다. - `SELECT datname FROM pg_database;` 로 데이터베이스 목록을 볼 수 있다. - `MySQL` 에서의 `use` 와 같은 명령어는 없다. ## 현재 선택된 데이터베이스안의 모든 사용자 정의 테이블 목록 나열 ```sql SELECT tablename FROM pg_catalog.pg_tables WHERE schemaname != 'pg_catalog' AND schemaname != 'information_schema'; ``` ## post 테이블 생성 ```sql create table post ( id bigserial not null, primary key (id), create_date timestamp(6), modify_date timestamp(6), title varchar(255) ) ``` ## post 테이블에 데이터 삽입 ```sql # V1 insert into post (id, create_date, modify_date, title) values (default, NOW(), NOW(), '제목 1') ``` ```sql # v2 insert into post (create_date, modify_date, title) values (NOW(), NOW(), '제목 1') ``` # 검색어가 `당근` 이고, 1 페이지에 보여줄 글 가져오기 - 한 페이지에 최대 10개의 글 노출 가능 ## 데이터 쿼리 ```sql select P.* from post AS P where upper(P.title) like upper('%당근%') escape '\' order by P.id desc limit 10 offset 0; ``` ## 카운트 쿼리 ```sql select count(P.id) from post AS P where upper(P.title) like upper('%당근%') escape '\' ``` # 검색어가 `당근` 이고, 2 페이지에 보여줄 글 가져오기 - 한 페이지에 최대 10개의 글 노출 가능 ```sql select P.* from post AS P where upper(P.title) like upper('%당근%') escape '\' order by P.id desc limit 10 offset 10; ``` ## 카운트 쿼리 ```sql select count(P.id) from post AS P where upper(P.title) like upper('%당근%') escape '\' ``` # 스텝 07-03 ## 스텝명 : PostgreSQL 로 변경 - 추가설명 : 02:10 : ddl-auto가 update이기 때문에 postgresql의 DB에 테이블들이 생성된다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/f40a6be) ## 핵심요약 - @ ## 순서 - build.gradle에 postgresql driver 추가 - application.yml 에서 DB접속정보 변경 - dbeaver 에서 postgresql에 테이블들이 잘 생겼는지 확인 - 프록시를 끄면 연결이 끊김을 설명 # 스텝 07-04 ## 스텝명 : H2 로 변경 - 추가설명 : 00:44 : H2는 개발할 때 사용하면 굉장히 편한 DBMS 입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/1d4038d) ## 핵심요약 - @ ## 순서 - H2 소개 - application.yml 에서 H2 DB 설정 - .gitignore에 db_dev.mv.db 를 추가한 이유 설명 - h2-console 접속 # 스텝 07-05 ## 스텝명 : fly.io에 PostgreSQL 띄우기 - 추가설명 : 40:00 : flyctl pg create의 결과화면의 접속정보는 꼭 저장해두세요. ## 핵심요약 - @ ## 순서 - fly.io에 postgresql 앱 생성 - fly.io의 postgresql 앱에 대한 프록시 켜기 - dbeaver 로 fly.io의 postgresql 앱의 DB에 접근 - surl_prod 데이터베이스 생성 ## fly.io에 PostgreSQL 생성 - 프로젝트 폴더와 상관없는 곳에서 수행 ```bash flyctl pg create ``` - 앱 이름 : jhs512-db - 여러분은 이 앱 이름(jhs512-db)을 사용하시면 안됩니다. - 여러분 고유의 앱 이름을 사용해주세요. ## 만들어진 정보 저장(두번 다시는 볼 수 없음) ``` # ... Postgres cluster jhs512-db created Username: postgres Password: YUMTHZX4ceEa26a Hostname: jhs512-db.internal Flycast: fdaa:9:1523:0:1::3 Proxy port: 5432 Postgres port: 5433 Connection string: postgres://postgres:YUMTHZX4ceEa26a@jhs512-db.flycast:5432 Save your credentials in a secure place -- you won't be able to see them again! # ... ``` ## 외부에서는 fly.io 안쪽의 db에 바로접근이 불가능하기 때문에, 접근이 필요할 때 마다 flyctl proxy 명령으로 개구멍을 open - flyctl proxy 5434:5432 -a appName - EX : `flyctl proxy 5434:5432 -a jhs512-db` - 로컬 포트 5434 을 원격지 포트 5432 와 연결한다. - 이렇게 하면 로컬에서의 포트 5432 와 충돌하지 않는다. - `Ctrl + c` 로 프록시 종료 ## Dbeaver 로 DB 접속 - 프로젝트 이름 : jhs512-db, fly.io - 서버이름 : surl_prod - 주소 : 127.0.0.1 - 사용자 : postgres - 비밀번호 : - 포트 : 5433 - DB : postgres - 추후 `surl_prod` 로 변경 ## surl_prod 데이터베이스 생성 ```sql DROP DATABASE IF EXISTS surl_prod; CREATE DATABASE surl_prod; ``` ## Dbeaver 로 DB 접속정보에서 DB변경 - DB : surl_prod ## fly.io 대시보드에서 확인 - [대시보드(https://fly.io/dashboard)](https://fly.io/dashboard) # 스텝 07-06 ## 스텝명 : 운영모드에서 운영DB 사용 - 추가설명 : 00:50 : 운영모드에서는 디버그용 콘솔출력이 최대한 없어야 느려지지 않습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/789da8c) ## 핵심요약 - @ ## 순서 - application-prod.yml에 운영모드용 설정 작업 - log.debug 메서드가 System.out.println 보다 좋은 이유 설명 - initAll 빈 등록 - 로컬에서 잘 되는지 테스트 - @ActiveProfiles("test") - 테스트 환경에서는 H2 메모리 모드로 설정 - initAll 다음에 initNotProd 가 수행되도록 설정 - log.debug 는 고맙게도 운영모드에서는 작동안함 # 스텝 07-07 ## 스텝명 : 도메인 연결 - 추가설명 : 09:50 : CNAME은 특정 도메인의 작동을 따라합니다. ## 핵심요약 - @ ## 순서 - jhs512-surl.fly.dev 는 기본적으로 제공되는 운영 도메인 입니다. - dnszi 는 도메인 관리 서비스 - 도메인 구매 사이트들 소개 - 도메인 구매시 DNS 서버를 dnszi 로 설정 - 서브도메인 설명 - fly certs add 새-도메인 - dnszi 에서 CNAME 설정 ## 도메인 관리 - [도메인 구매 - dnszi.com](https://dnszi.com) ## 도메인 구매 - [도메인 구매 - iwantmyname.com](https://iwantmyname.com) - [도메인 구매 - domain.gabia.com](https://domain.gabia.com) ## 프로젝트에 도메인 연결 ```bash fly certs add www.surl.oa.gg # 추가 fly certs show www.surl.oa.gg # 확인 ``` ## DNSZI 에서 CNAME 등록 - CNAME(별명) : www.surl.oa.gg - 목적지(연결) 도메인 : jhs512-surl.fly.dev # 스텝 07-08 ## 스텝명 : 도메인 추가, 자원 해제 - 추가설명 : 01:00 : 도커 빌드는 fly.io 내부에서 수행됩니다. ## 핵심요약 - @ ## 순서 - fly.io 를 통해서 무중단 배포가 되는 과정 설명 - 도메인을 추가하는 방법 - fly.io 자원 해제하는 방법 ## 프로젝트에 도메인 추가 연결 ```bash fly certs add api.www.surl.oa.gg # 추가 fly certs show api.www.surl.oa.gg # 확인 ``` ## DNSZI 에서 CNAME 등록 - CNAME(별명) : api.www.surl.oa.gg - 목적지(연결) 도메인 : jhs512-surl.fly.dev # 스텝 07-09 ## 스텝명 : AWS 가입, IAM 계정 생성 - 추가설명 : 01:05 : AWS는 자유도가 더 높습니다. ## 핵심요약 - @ ## 순서 - AWS는 합리적인 가격에 서버를 대여해줍니다. - AWS는 fly.io 보다 자유도가 더 높습니다. - AWS 루트계정 가입(이메일로 가입, 신용카드 필요) - AWS 콘솔 개념 - AWS IAM 개념 - AWS 의 핵심자원은 IAM과 EC2 입니다. - IAM admin 계정 생성 - 권한의 조합이 정책입니다. - AdministrotorAccess 정책 연결 - IAM 별칭 추가(jhs512) - IAM 계정 admin 으로 로그인 ## AWS - [AWS - https://aws.amazon.com/ko](https://aws.amazon.com/ko) - [AWS - 가입 - https://portal.aws.amazon.com/billing/signup#/start/email](https://portal.aws.amazon.com/billing/signup#/start/email) - [AWS - 로그인 - https://console.aws.amazon.com/console/home?nc2=h_ct&src=header-signin](https://console.aws.amazon.com/console/home?nc2=h_ct&src=header-signin) ## AWS IAM - 로그인 후 이용해주세요. - [AWS IAM](https://us-east-1.console.aws.amazon.com/iam/home) ## IAM 계정 - AWS ROOT 계정을 해킹당하면 너무 피해가 막심하기 때문에, IAM 유저를 만들어서 그걸 사용하는게 좋습니다. - ROOT 계정의 역할은 사실 IAM USER admin 을 만드는 역할 뿐입니다. 이게 바람직한 사용법 입니다. - IAM에서 정책은 권한의 집합 입니다. - IAM에서는 우리의 편의를 위해 유용한 정책들을 미리 만들어 두었습니다. - AdministratorAccess 정책은 ROOT 계정에 준하는 권한이 정의되어 있습니다. - 최초의 IAM USER admin 을 만드시고, AdministratorAccess 정책을 연결시켜주세요. ## AWS 계정별칭 - AWS ROOT 계정은 고유ID를 가지고 있습니다. - 그것을 외우기 힘들때 사용하는게 별칭입니다. # 스텝 07-10 ## 스텝명 : AWS CLI, 테라폼 소개 - 추가설명 : 09:15 : AWS CLI를 직접적으로 사용하는것 보다 테라폼을 통해서 간접적으로 사용하는게 좋습니다. ## 핵심요약 - @ ## 순서 - IAM, VPC, EC2 소개 - AWS 콘솔에서는 마우스를 이용해서 자원을 관리합니다. - AWS CLI는 쉘에서 명령어로 자원을 관리합니다. - 테라폼은 AWS CLI를 이용해서 훨씬 더 쉬운 자원 관리기능을 제공합니다. ## AWS API 개념 - AWS 의 모든 처리는 내부적으로 API 입니다. - 어떠한 일을 AWS 콘솔에 접속해서 하나하나 클릭을 통해서 진행해도 되고, AWS API 를 이용해도 됩니다. - AWS API 를 명령어를 통해서 쉽게 사용하려면 AWS CLI를 설치해야 한다. - AWS CLI 를 설치 후 IAM USER 의 엑세스키를 등록해야 한다. # 스텝 07-11 ## 스텝명 : AWS CLI 설치 - 추가설명 : 01:40 : AWS CLI 에서는 엑세스 키를 통해서 로그인 합니다. ## 핵심요약 - @ ## 순서 - AWS CLI 설치 - admin 계정의 엑세스 키 생성 - aws configure를 통해서 AWS CLI 에서 로그인 - 엑세스 키 삭제방법 - aws configure를 취소하는 방법 ## AWS CLI 설치 - [AWS - AWS CLI 설치 - https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html](https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html) - 윈도우 사용자 - ![img](https://i.imgur.com/rwbwquC.png) - MAC 사용자 - `Command line installer - All users` 로 설치 ## AWS CLI 설치확인 - 윈도우 사용자 - `윈도우 키` 누르고 `cmd` 누르고 `엔터` - `aws` 명령어 실행 - MAC 사용자 - 터미널 창 띄우기 - `aws` 명령어 실행 - ![img](https://i.imgur.com/78Chm8o.png) ## admin 계정의 엑세스키 발급받기 - [AWS - IAM 사용자 - https://us-east-1.console.aws.amazon.com/iamv2/home?region=ap-northeast-2#/users](https://us-east-1.console.aws.amazon.com/iamv2/home?region=ap-northeast-2#/users) - [IAM - admin 계정 - 보안자격증명](https://us-east-1.console.aws.amazon.com/iamv2/home?region=ap-northeast-2#/users/details/admin?section=security_credentials) ## AWS CLI 명령어 - aws configure list - AWS 엑세스키가 등록되어 있는지 확인 - aws configure - AWS 엑세스키 등록 - 엑세스 키, 시크릿 엑세스키 등록 - 재등록도 가능 - 리전 : ap-northeast-2 - ap-northeast-2 : AWS 서울 - `Default output format` 에서는 그냥 엔터 - aws s3 ls - 아무 결과가 안나오면 성공적으로 로그인 되었다고 볼 수 있습니다. - 엑세스키 삭제하는 방법 - 콘솔 -> IAM USER -> `admin` 유저 선택 -> 보안자격증명 -> 액세스 키 -> 비활성화 -> 삭제 - AWS CLI에 입력된 엑세스키 삭제하는 방법 - 윈도우 터미널 - `rmdir /s /q "%USERPROFILE%/.aws"` - 윈도우 파워쉘 - `rm -force -recurse $HOME\.aws` - MAC SHELL OR BASH SHELL - `rm -rf ~/.aws` # 스텝 07-12 ## 스텝명 : 테라폼 설치 및 프로젝트 생성 - 추가설명 : 11:52 : terraform apply는 소스코드상의 자원과 AWS 자원을 동기화 합니다. ## GIT - [리포지터리 - 테라폼 프로젝트](https://github.com/jhs512/2024-04-terraform-project-1) - [GIT](https://github.com/jhs512/2024-04-terraform-project-1/commit/13819b6) ## 핵심요약 - @ ## 순서 - 테라폼 설치 - main.tf 생성 - terraform init - terraform plan - terraform apply - terraform destroy ## 테라폼 CLI 설치 - [테라폼 - 설치 - https://developer.hashicorp.com/terraform/install](https://developer.hashicorp.com/terraform/install) - 윈도우 - `C:\lib\terraform` 폴더 생성 - amd64 다운로드 - 안되면 386 다운로드 - `C:\lib\terraform` 폴더에 `terraform.exe` 파일 저장 - 환경변수의 PATH 에 `C:\lib\terraform` 등록 - ![img](https://i.imgur.com/umlRfeN.png) - 윈도우 키 누르고 `환경` 이라고 검색 - ![img](https://i.imgur.com/9Oy9V9g.png) ## 테라폼 프로젝트 폴더 생성 - 프로젝트 경로 : ~/IdeaProjects/terraform_project_1 ## .gitignore ```.gitignore .idea .terraform ``` ## main.tf ```hcl terraform { // 자바의 import 와 비슷함 // aws 라이브러리 불러옴 required_providers { aws = { source = "hashicorp/aws" version = "~> 4.0" } } } # Configure the AWS Provider provider "aws" { region = "ap-northeast-2" } resource "aws_vpc" "example" { cidr_block = "10.0.0.0/16" tags = { Name = "example" } } ``` ## 테라폼 명령어 - terraform init - 라이브러리 다운로드 - 라이브러리 관련 소스코드가 바뀔 때 마다 실행해야 한다. - terraform plan - 실제 리소스 생성을 하는것은 아니고 - 현재 소스코드가 실행가능한지 검사 - terraform apply - 리소스 생성 - yes 입력 - terraform destroy - 리소스 삭제 - yes 입력 # 스텝 07-13 ## 스텝명 : 테라폼으로 EC2 1개 생성 - 추가설명 : 08:45 : 테라폼의 최대 장점은 Chat GPT로 활용법을 알아내기가 쉽다는 점입니다. ## GIT - [GIT](https://github.com/jhs512/2024-04-terraform-project-1/commit/772eeb5) ## 핵심요약 - @ ## 순서 - variables.tf 추가 - EC2 인스턴스 하나 추가하기 위한 작업 - AMI 는 운영체제 이다. - EC2가 생성되자마자 수행되어야 할 명령어 - 테라폼 소스코드 이해하는 방법, 작성하는 방법 # 스텝 07-14 ## 스텝명 : docker login ghcr.io - 추가설명 : 03:30 : 도커 이미지에는 application-secret.yml 이 포함되어 있습니다. ## 핵심요약 - @ ## 순서 - 나중에 EC2에서 private docker image 를 받기 위해 로그인 필요 - read 패키지 권한만 있는 GITHUB 토큰 생성 - 도커 이미지에는 application-secret.yml 이 포함되어 있다. - EC2에서 도커 로그인(ghcr.io) ## 깃허브 토큰 생성 - [https://github.com/settings/tokens](https://github.com/settings/tokens) - ![img](https://i.imgur.com/e62OqSz.png) - ![img](https://i.imgur.com/02bUYwO.png) ## ghcr.io 에 로그인 ```bash docker login ghcr.io -u USERNAME -p YOUR_TOKEN # EX : docker login ghcr.io -u jhs512 -p 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 ``` # 스텝 07-15 ## 스텝명 : MySQL 설치, 세팅 - 추가설명 : 04:30 : MySQL 에서는 사용자의 비번을 접근위치(host)에 따라서 여러개 둘 수 있다. ## 핵심요약 - @ ## 순서 - MySQL 을 도커로 실행 - dbeaver 로 연결 생성 - root 계정의 근거리 비번 세팅 - root 계정의 원거리 비번 세팅 ## MySQL 실행 ```bash docker run -d \ --name mysql_1 \ --restart unless-stopped \ -p 3306:3306 \ -e TZ=Asia/Seoul \ -e MYSQL_ROOT_PASSWORD=lldj123414 \ -v /dockerProjects/mysql_1/volumns/var/lib/mysql:/var/lib/mysql \ mysql \ --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci ``` ## MySQL 에 새 비밀번호 세팅, 로컬용 비밀번호 세팅 ```bash docker exec -it mysql_1 mysql -u root -p # 비번입력 : lldj123414 ALTER USER 'root'@'%' IDENTIFIED BY '새로운 비밀번호'; # 새 비번 입력 ALTER USER 'root'@'localhost' IDENTIFIED BY '1234'; # 로컬에서는 1234 로 접속 할 수 있도록 FLUSH PRIVILEGES; exit ``` # 스텝 07-16 ## 스텝명 : Redis 설치, 세팅 - 추가설명 : 02:00 : 레디스는 무중단배포시에 사용자의 로그인이 풀리는 것을 막아줍니다. ## 핵심요약 - @ ## 순서 - 레디스를 도커로 설치 - 레디스를 도입하면 스프링부트가 교체되면서 발생하는 로그인 풀림 현상을 방지할 수 있다. - 레디스에 비밀번호 설정 ## redis 설치 ```bash docker run -d \ --name=redis_1 \ --restart unless-stopped \ -p 6379:6379 \ -e TZ=Asia/Seoul \ redis ``` ## redis 비밀번호 변경 ```bash docker exec -it redis_1 redis-cli AUTH 기존_비밀번호 # 기존에 설정된 비밀번호가 있다면 입력 CONFIG SET requirepass 새로운_비밀번호 # 새 비번 입력 EXIT ``` # 스텝 07-17 ## 스텝명 : Nginx Proxy Manager 설치, 세팅 - 추가설명 : 05:00 : nginx 가 없다면 우리가 만든 서비스의 구분을 포트로 해야 합니다. ## 핵심요약 - @ ## 순서 - Nginx Proxy Manager 설치 - nginx 가 없다면 - nginx 가 작동하는 방 - nginx 는 포트가 아닌 도메인으로 서비스 구분 - DNSZI 에서 CNAME 제거 - DNSZI 에서 A 레코드 추가 - Nginx Proxy Manager 콘솔에서 프록시 추가 - Nginx Proxy Manager 가 도메인으로 서비스를 구분하는 방법 - SSL 처리 ## Nginx Proxy Manager 설치 ```bash docker run -d \ --name npm_1 \ --restart unless-stopped \ -p 80:80 \ -p 443:443 \ -p 81:81 \ -e TZ=Asia/Seoul \ -v /dockerProjects/npm_1/volumes/data:/data \ -v /dockerProjects/npm_1/volumes/etc/letsencrypt:/etc/letsencrypt \ jc21/nginx-proxy-manager:latest ``` ## nginx proxy manager 관리콘솔에 접속 - [http://sb.oa.gg:81](http://sb.oa.gg:81) - 초기 계정 - 아이디 : admin@example.com - 비번 : changeme ## 접속확인 - [https://api.www.surl.oa.gg](https://api.www.surl.oa.gg) - 오류가 발생해야 합니다. # 스텝 07-18 ## 스텝명 : 수동배포 시도, 실패 - 추가설명 : 01:20 : git clone 을 해도 application-secret.yml 은 생성되지 않습니다. ## 핵심요약 - @ ## 순서 - 수동배포과정 설명 - EC2 인스턴스에서 git clone - application-secret.yml 생성 - 도커 이미지 생성 - 도커 컨테이너 생성 - docker logs -f 로 에러 메세지 확인 - 도커 컨테이너 생성시 gen 폴더 볼륨 잡은 이유 ## 도커 이미지 빌드 준비를 위한 소스코드 다운로드 ```bash mkdir -p /dockerProjects/surl/source cd /dockerProjects/surl/source git clone https://github.com/jhs512/demo03-2024 . ``` ## src/main/resources/application-secret.yml 파일 생성 ```bash # vim 열기 vim src/main/resources/application-secret.yml # 키보드 'a' 키 입력 ``` ```yml custom: secret: key: 1234 ``` ```bash # vim 닫으면 서 파일 저장하기 # 키보드 'ESC' 키 입력 # 키보드 ':wq!' 키 입력 # 키보드 'ENTER' 키 입력 ``` ## 도커 컨테이어 실행 ```bash docker run -d \ --name=surl_1 \ --restart unless-stopped \ -p 8081:8090 \ -e TZ=Asia/Seoul \ -v /dockerProjects/surl/volumes/gen:/gen \ jhs512/surl:latest ``` ## 도커 컨테이어 출력문(로그) 확인 ```bash docker logs -f surl_1 ``` # 스텝 07-19 ## 스텝명 : 수동배포 시도, 성공 - 추가설명 : 00:10 : fly.io의 잔재를 없애고 새 운영DB 정보를 넣습니다. ## 핵심요약 - @ ## 순서 - 운영 DBMS에서 surl_prod 데이터베이스 생성 - application-prod.yml 에 운영 DB정보 설정 - git push - EC2 인스턴스로 이동 - 기존 컨테이너 삭제 - 기존 이미지 삭제 - git pull - 이미지 생성 - 컨테이너 생성 - 오류확인 - 재부팅 - MySQL 에서 root@172.17.0.1 계정생성 - 운영서버에 접속 ## GIT - [리포지터리 - 스프링부트로 구현하는 URL 단축 서비스](https://github.com/jhs512/demo03-2024) - [GIT](https://github.com/jhs512/demo03-2024/commit/2ba07ea) ## EC2 인스턴스 재부팅 ```bash reboot now ``` - 2, 3분 후 해당 브라우저를 리프레시 후 `sudo su` 다시 입력하면 - 다시 쉘에 접근할 수 있다. ## 도커 이미지 빌드 준비를 위한 소스코드 다운로드 ```bash cd /dockerProjects/surl/source git pull origin main ``` ## 기존 컨테이너, 이미지 삭제 ```bash docker rm -f surl_1 docker rmi surl ``` ## surl 서비스에서 접속할 때 사용할 root@172.17.0.1 MySQL 계정 생성 ```bash docker exec -it mysql_1 mysql -u root -p # 비번입력 : lldj123414 CREATE USER 'root'@'172.17.0.1' IDENTIFIED BY '1234'; REVOKE ALL PRIVILEGES ON *.* FROM 'root'@'172.17.0.1'; # FLUSH PRIVILEGES; exit ``` ## 컨테이너 실행 ```bash docker run -d \ --name=surl_1 \ --restart unless-stopped \ -p 8081:8090 \ -e TZ=Asia/Seoul \ -v /dockerProjects/surl/volumes/gen:/gen \ jhs512/surl:latest ``` ## 접속확인 - [https://api.www.surl.oa.gg](https://api.www.surl.oa.gg) # 스텝 07-20 ## 스텝명 : 자동배포 - 추가설명 : 00:50 : 어려움 주의, 이번 스텝 어렵습니다. 처음에는 따라하기식으로 해주세요. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/1865d19) ## 핵심요약 - @ ## 순서 - socat 설치 - 파이썬 설치 - 기존 컨테이너 제거 - 기존 이미지 제거 - 수동배포방식과 자동배포방식 비교 - deploy.yml 변경사항 - application-secret.yml 변경사항 - 필요한 시크릿변수들 소개 - 레디스 세션저장을 위한 의존성을 추가하되 운영모드에서만 활성화 - application-prod.yml 변경사항 - zero_downtime_deployment.py 소개 - 커밋, 푸시를 하면 일어나는 일들 소개 - 릴리즈와 태그를 만든이유는 그것의 부산물인 버전(숫자)을 사용하기 위해서 - 릴리즈 버전을 그대로 도커 이미지 버전으로 생성 - 패키지 세팅을 통해서 해당 도커 이미지를 private 로 설정 - 우리는 이전에 도커 로그인(ghcr.io)을 했기 때문에 괜찮음 - 실제로 무중단 배포 되는지 시연 ## application-secret.yml ```yml custom: secret: spring: data: redis: password: lldj123414 key: 1234 ``` ## socat 설치 ```bash yum install socat -y ``` ## python 설치 ```bash yum install python -y ``` ## infraScript/zero_downtime_deploy.py ```yml #!/usr/bin/env python3 import os import requests # HTTP 요청을 위한 모듈 추가 import subprocess import time from typing import Dict, Optional class ServiceManager: # 초기화 함수 def __init__(self, socat_port: int = 8081, sleep_duration: int = 3) -> None: self.socat_port: int = socat_port self.sleep_duration: int = sleep_duration self.services: Dict[str, int] = { '${도커이미지명}_1': 8082, '${도커이미지명}_2': 8083 } self.current_name: Optional[str] = None self.current_port: Optional[int] = None self.next_name: Optional[str] = None self.next_port: Optional[int] = None # 현재 실행 중인 서비스를 찾는 함수 def _find_current_service(self) -> None: cmd: str = f"ps aux | grep 'socat -t0 TCP-LISTEN:{self.socat_port}' | grep -v grep | awk '{{print $NF}}'" current_service: str = subprocess.getoutput(cmd) if not current_service: self.current_name, self.current_port = '${도커이미지명}_2', self.services['${도커이미지명}_2'] else: self.current_port = int(current_service.split(':')[-1]) self.current_name = next((name for name, port in self.services.items() if port == self.current_port), None) # 다음에 실행할 서비스를 찾는 함수 def _find_next_service(self) -> None: self.next_name, self.next_port = next( ((name, port) for name, port in self.services.items() if name != self.current_name), (None, None) ) # Docker 컨테이너를 제거하는 함수 def _remove_container(self, name: str) -> None: os.system(f"docker stop {name} 2> /dev/null") os.system(f"docker rm -f {name} 2> /dev/null") # Docker 컨테이너를 실행하는 함수 def _run_container(self, name: str, port: int) -> None: os.system( f"docker run -d --name={name} --restart unless-stopped -p {port}:${스프링부트-운영모드-포트} -e TZ=Asia/Seoul -v /dockerProjects/${도커이미지명}/volumes/gen:/gen --pull always ghcr.io/${깃허브-아이디}/${도커이미지명}") def _switch_port(self) -> None: # Socat 포트를 전환하는 함수 cmd: str = f"ps aux | grep 'socat -t0 TCP-LISTEN:{self.socat_port}' | grep -v grep | awk '{{print $2}}'" pid: str = subprocess.getoutput(cmd) if pid: os.system(f"kill -9 {pid} 2>/dev/null") time.sleep(5) os.system( f"nohup socat -t0 TCP-LISTEN:{self.socat_port},fork,reuseaddr TCP:localhost:{self.next_port} &>/dev/null &") # 서비스 상태를 확인하는 함수 def _is_service_up(self, port: int) -> bool: url = f"http://127.0.0.1:{port}/actuator/health" try: response = requests.get(url, timeout=5) # 5초 이내 응답 없으면 예외 발생 if response.status_code == 200 and response.json().get('status') == 'UP': return True except requests.RequestException: pass return False # 서비스를 업데이트하는 함수 def update_service(self) -> None: self._find_current_service() self._find_next_service() self._remove_container(self.next_name) self._run_container(self.next_name, self.next_port) # 새 서비스가 'UP' 상태가 될 때까지 기다림 while not self._is_service_up(self.next_port): print(f"Waiting for {self.next_name} to be 'UP'...") time.sleep(self.sleep_duration) self._switch_port() if self.current_name is not None: self._remove_container(self.current_name) print("Switched service successfully!") if __name__ == "__main__": manager = ServiceManager() manager.update_service() ``` ## .github/workflows/deploy.yml ```yml name: 'deploy' on: push: paths: - '.github/workflows/**' - 'src/**' - 'build.gradle' - 'Dockerfile' - 'readme.md' - 'infraScript/**' branches: - 'main' jobs: makeTagAndRelease: runs-on: ubuntu-latest outputs: tag_name: ${{ steps.create_tag.outputs.new_tag }} steps: - uses: actions/checkout@v4 - name: Create Tag id: create_tag uses: mathieudutour/github-tag-action@v6.1 with: github_token: ${{ secrets.GITHUB_TOKEN }} - name: Create Release id: create_release uses: actions/create-release@v1 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ steps.create_tag.outputs.new_tag }} release_name: Release ${{ steps.create_tag.outputs.new_tag }} body: ${{ steps.create_tag.outputs.changelog }} draft: false prerelease: false buildImageAndPush: name: 도커 이미지 빌드와 푸시 needs: makeTagAndRelease runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Docker Buildx 설치 uses: docker/setup-buildx-action@v2 - name: 레지스트리 로그인 uses: docker/login-action@v2 with: registry: ghcr.io username: ${{ github.actor }} password: ${{ secrets.GITHUB_TOKEN }} - name: set lower case owner name run: | echo "OWNER_LC=${OWNER,,}" >> ${GITHUB_ENV} env: OWNER: "${{ github.repository_owner }}" - name: application-secret.yml 생성 env: ACTIONS_STEP_DEBUG: true APPLICATION_SECRET: ${{ secrets.APPLICATION_SECRET_YML }} run: echo "$APPLICATION_SECRET" > src/main/resources/application-secret.yml - name: 빌드 앤 푸시 uses: docker/build-push-action@v3 with: context: . push: true tags: | ghcr.io/${{ env.OWNER_LC }}/${도커이미지명}:${{ needs.makeTagAndRelease.outputs.tag_name }}, ghcr.io/${{ env.OWNER_LC }}/${도커이미지명}:latest deploy: runs-on: ubuntu-latest needs: [ buildImageAndPush ] steps: - name: AWS SSM Send-Command uses: peterkimzz/aws-ssm-send-command@master id: ssm with: aws-region: ${{ secrets.AWS_REGION }} aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} instance-ids: "${AWS-EC2-인스턴스-ID}" working-directory: / comment: Deploy command: | mkdir -p /dockerProjects/${도커이미지명} curl -o /dockerProjects/${도커이미지명}/zero_downtime_deploy.py https://raw.githubusercontent.com/${깃허브-아이디}/${깃허브-리포지터리명}/main/infraScript/zero_downtime_deploy.py chmod +x /dockerProjects/${도커이미지명}/zero_downtime_deploy.py /dockerProjects/${도커이미지명}/zero_downtime_deploy.py ``` # 챕터 07 완료 - @ # 챕터 08 ## 챕터명 : 회원가입 # 스텝 08-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:35 : 이번 챕터의 목표는 `REST API 방식으로 회원가입 API를 구현할 수 있다.` 입니다. - 추가설명 : 03:10 : aspect, aop, validation 등이 룰 기반 기능입니다. 이것들은 `적용`면에서 비교적 쉽습니다. ## 순서 - 이번 챕터의 목표 : REST API 방식으로 회원가입 API를 구현할 수 있다. # 스텝 08-02 ## 스텝명 : 회원가입 API 구현 - 추가설명 : 01:05 : 참고로 이번 스텝에서 구현할 회원가입 API는 아직 REST API는 아닙니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/0df6cc6) ## 핵심요약 - @ ## 순서 - member 테이블에 row 하나 추가하는 것이 회원가입 - MemberController.java 추가 - 회원가입 API 구현 - 아직 REST API 는 아님 - username, password, nickname 은 누락되면 안된다. - 컨트롤러에서 유효성 체크 - 예외상황이 발생하면 return 보다는 throw 가 더 좋다. # 스텝 08-03 ## 스텝명 : 유틸기능을 담을 Ut 클래스 - 추가설명 : 01:50 : 하나의 폴더에 너무 많은 파일을 담으면 불편하다. 그 경우에는 폴더안에 폴더들을 두는 구조가 더 좋다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/ced65d8) ## 핵심요약 - @ ## 순서 - str == null || str.isBlank() 같은 로직은 엄청 자주 쓰음 - Ut 클래스는 위와같은 유틸기능을 담는 클래스 - isBlank 메서드 구현 - Ut 클래스에 바로 담지 않고, 하나의 static 클래스를 더 둔다. - Ut 클래스 안의 함수가 많아질 때를 대비 - hasLength 메서드 구현 # 스텝 08-04 ## 스텝명 : 예외처리는 return 보다 throw - 추가설명 : 02:00 : 리턴으로는 다양한 오류를 정밀하고 정확하게 표현하기 어렵다. ## 핵심요약 - @ ## 순서 - 예외상황이 발생했을 때 return 보다 throw 가 더 좋은 이유. - return 으로하면 리턴타입이 허용하는 범위내에서 예외정보를 표현해야 한다. - 그래서 쓸데없는 코드와 어색한 코드를 쓸 수 밖에 없는 상황이 발생한다. - 그에 비해 throw 는 리턴타입와 상관이 없다. - join 메서드에서 return 으로 예외처리하는 방법 설명 - 코드가 이상해진다. - 다만 응답결과는 깔끔하게 나온다. # 스텝 08-05 ## 스텝명 : ExceptionHandler 를 이용한 예외처리 - 추가설명 : 09:05 : @ExceptionHandler 메서드가 여러개이면 그 중에서 가장 적절한 메서드가 하나 선택되서 실행되고, 없다면 실행되지 않는다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/ced65d8) ## 핵심요약 - @ ## 순서 - return 은 해당 코드가 포함된 함수만 끝내지만 - throw 는 예외처리를 호출자에서 해주지 않으면 해당 쓰레드 전체가 끝난다. - 즉 해당 HTTP 요청에 대한 처리 자체가 끝난다. - 예외를 발생시키고 예외처리를 하지 않으면 스프링부트는 메뉴얼대로 오류를 처리한다. - @ControllerAdvice 클래스에 @ExceptionHandler 메서드를 만들면 오류에 대한 처리를 가로챌 수 있다. - @ExceptionHandler 메서드가 여러개라면 해당 예외상황에 더 적절한 메서드가 알아서 선택되어서 실행됨 - @ExceptionHandler 메서드가 존재해도 예외상황에 맞지 않는다면 메서드가 작동하지 않음 # 스텝 08-06 ## 스텝명 : 백엔드 이용자는 사람이거나 기계 - 추가설명 : @@:@@ : @ ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/eafc816) ## 핵심요약 - 기계에게는 `정보`만 필요합니다. - 사람에게는 `정보`와 `꾸밈`이 함께 필요합니다. - 앱은 사람을 상대해야 합니다. - 앱은 `정보`도 처리해야 하고 `꾸밈`도 처리해야 합니다. - 케이스 1 : 스프링부트만으로 `정보`와 `꾸밈`의 처리를 구현하는 경우 - 스프링부트 앱에서 `정보`와 `꾸밈`을 모두 처리할 수 있습니다. - JSP, 타임리프같은 기술을 써야 합니다. - 케이스 2 : 스프링부트 앱에서 `정보`만 처리하는 경우도 많습니다. - 이런경우 따로 프론트엔드 서버를 따로 만듭니다. - 프론트엔드 기술로 리액트, 스벨트, 앵귤러, 뷰 등이 사용됩니다. - 이때 스프링부트는 프론트엔드 앱과 통신을 하는데 보통 REST 방식을 사용합니다. - 이때 `스프링부트로 REST API를 구현한다.` 라는 표현을 여러분이 들었다면 - HTML, CSS, JS 등 프론트엔드 요소를 최대한 배제하고 - 순수 정보처리만 수행하고 - REST API 방식으로 외부에서 사용할 수 있는 형태로 구현하는 프로젝트이고 - 별도의 외부 프론트엔드 프레임워크(리액트, 뷰, 앵귤러)등이 따로 존재하겠구나 - 라고 생각하 실 수 있어야 합니다. ## 순서 - 스프링부트의 손님 유형 2가지 - 스프링부트는 HTTP 서버 - HTTP 서버는 HTTP 클라이언트와 소통이 가능 - HTTP 클라이언트의 대표적인 것은 브라우저 - 스프링부트의 손님의 유형 2가지, 사람과 기계 - 사람이 직접 브라우저를 통해서 스프링부트에게 요청을 날리는 경우에는 응답정보를 사람이 이해할 수 있는 표현양식으로 꾸며줘야 함 - 사람이 아닌 별도의 앱이 스프링부트에게 요청을 날리는 경우에는 보통 응답정보를 JSON 형식으로 표현 - GET /article/list : 사람손님을 위한 응답 - GET /article/listJson : 기계손님을 위한 응답 - 앱은 사람을 위한 것 입니다. - 사람은 정보를 습득하기 위해서는 정보가 적절히 꾸며져 있어야 합니다. - 즉 앱에서는 사용자를 위해서 정보처리도 해야하고 꾸밈에 대한 처리도 해야합니다. - 케이스 1 : 스프링부트만으로 정보처리와 꾸밈처리를 하는 경우 - 이 경우 스프링부트 정보에 HTML, CSS, JS를 적절히 배합해서 응답을 만들어야 합니다. - 그걸 위해서 타임리프, JSP 등이 사용됩니다. - 케이스 2 : 스프링부트가 정보처리만 하고 REST API 형식으로 별도의 프론트엔드 앱과 소통하는 경우 - 이 경우 스프링부트는 HTML, CSS, JS를 몰라도 됩니다. # 스텝 08-07 ## 스텝명 : POSTMAN 소개 및 설치 - 추가설명 : 02:22 : API 서버로서의 스프링부트는 GET 뿐 아니라 다른 HTTP 메서드로 보내는 요청도 처리해야 한다. ## 핵심 - @ ## 순서 - 고객별로 스프링부트와 통신할 때 사용하는 방식의 차이 - 스프링부트가 사람과 통신할 때 - 요청방식 - HTTP 메서드 : GET - HTML form 을 통해서 POST를 쓰는 경우도 있음 - 요청자원이름 : URL-PATH - 부가정보 : 쿼리스트링 - 응답방식 : 정보 + 꾸밈 == HTML, CSS, JS - 스프링부트가 기계와 통신할 때 - HTTP 메서드 : GET, POST, PUT, PATCH, DELETE - 요청자원이름 : URL-PATH - 부가정보 : 쿼리스트링 + 응답본문 - 응답방식 : 정보 == JSON OR XML - POSTMAN의 필요성 - 흔히 기계(프론트엔드 앱)과 통신하는 스프링부트 앱을 구현하는 것을 `REST API 서버 구현` 혹은 `API 서버 구현` 이라고 한다. - API 서버를 구현하면서 테스트를 할 때는 보통 브라우저만으로는 충분하지 않다. - 왜냐하면 브라우저의 주소표시줄로는 GET 요청만 발생시킬 수 있기 때문이다. - 이럴때 자주 사용되는 툴이 POSTMAN 이라는 툴이다. - 이 툴로는 GET, POST, PUT, PATCH, DELETE HTTP 메서드로 요청할 수 있다. - 이 툴로는 `쿼리스트링` 뿐 아니라 `요청본문`으로도 부가정보를 요청(편지)에 담을 수 있다. - [POSTMAN - https://www.postman.com](https://www.postman.com) - 가입과 로그인 필요 - [POSTMAN DOWNLOAD - https://www.postman.com/downloads](https://www.postman.com/downloads) - 다운로드 후 실행 - 로그인 필요 # 스텝 08-08 ## 스텝명 : HTTP 메서드 - 추가설명 : 01:00 : HTTP 메서드를 활용하면 URL 이 명사화 된다. ## 핵심 - @ ## 순서 - HTTP 요청 메서드 - GET : 조회 - POST : 생성 - PUT or PATCH : 수정 - DELETE : 삭제 - URL 은 동사형보다는 명사형으로 쓰는게 좋다. - 게시물 CRUD 로 알아보는 올바른 HTTP 요청 방법 - 게시물 생성 - 잘못된 방법 : GET /article/write?title=제목&body=내용 - 올바른 방법 : POST /articles - 헤더, Content-Type : application/json - body : {"title": "제목", "body": "내용"} - 게시물 1번 수정 - 잘못된 방법 : GET /article/modify?id=1&title=제목 new&body=내용 new - 올바른 방법 : PUT /articles/1 - 헤더, Content-Type : application/json - body : {"title": "제목 new", "body": "내용 new"} - 게시물 1번 조회 - 잘못된 방법 : GET /article/detail?id=1 - 올바른 방법 : GET /articles/1 - 게시물들 조회 - 잘못된 방법 : GET /article/list - 올바른 방법 : GET /articles - 게시물 1번 삭제 - 잘못된 방법 : GET /article/delete?id=1 - 올바른 방법 : DELETE /articles/1 # 스텝 08-09 ## 스텝명 : ApiV1MemberController 생성 - 추가설명 : @@:@@ : API들을 버전으로 구분을 해주면 프론트엔드 개발자가 쉽게 API 변경사항에 대응할 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d418dbf) ## 핵심 - @ ## 순서 - ApiV1MemberController.java 추가 - Api 에는 버전이 중요한데 일단 버전은 무조건 1 이라고 생각하고 시작하시면 됩니다. - 이 강의가 끝나도록 이 버전 1은 변하지 않을 예정입니다. - @Controller 를 @RestController 로 변경 - 그러면 메서드에 @ResponseBody 를 생략해도 된다. - @GetMapping 을 @PostMapping 으로 변경 - 그러면 해당 메서드가 POST 메서드로 온 요청에만 반응한다. - 요청본문의 내용을 받을 객체의 클래스 생성 - @RequestBody 를 사용하여 - 우리가 요청본문을 이 클래스의 객체로 받을 거라는 것을 - 스프링부트에게 알림 # 스텝 08-10 ## 스텝명 : 예외 발생시 상태코드를 명시 - 추가설명 : 00:20 : 이 경우에는 상태코드가 200 이 아닌 400 으로 나와야 합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/b1d424d) ## 핵심 - @ ## 순서 - HTTP 응답코드 - HTTP 응답코드는 결과에 대한 규격화된 코드 입니다. - 2xx : 성공 - 4xx : 실패(클라이언트 때문에 실패) - 5xx : 실패(서버 때문에 실패) - 예외 핸들러에서 상태코드 명시 - `@ResponseStatus(HttpStatus.BAD_REQUEST)` : 400 으로 고정 - `ResponseEntity` : 상황에 따라 다른 상태코드 지정 가능 # 스텝 08-11 ## 스텝명 : 성공과 실패의 양식을 통일 - 추가설명 : 03:15 : 이로써 실패(예외, 오류)가 발생해도 성공과 같은 양식으로 출력됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/404a5bc) ## 핵심 - @ ## 순서 - 성공 응답양식과 실패 응답의 양식을 같도록 - 성공양식 : `{ "resultCode": "200-1", "statusCode": 200, "msg": "회원가입이 완료되었습니다.", "data": { ... } }` - 실패양식 : `{ "resultCode": "400-1", "statusCode": 400, "msg": "user10(은)는 이미 존재하는 아이디입니다.", "data": {} }` - Jackson - Jackson 은 객체를 다양한 표현양식으로 변환해 줍니다. - Map <=> Person - Map <=> Json - Person <=> Json - 기본적으로 잭슨은 빈 객체를 JSON 화 하려는 시도가 발견되면 예외를 발생시킴 - spring.jackson.serialization.fail-on-empty-beans: false - 이 설정을 하면 더 이상 해당상황에서 예외가 발생되지 않음 # 스텝 08-12 ## 스텝명 : Validation - 추가설명 : 01:18 : @NotBlank 말고도, @NotNull, @Min 등 다양한 룰이 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/1a3cc1c) ## 핵심 - @ ## 순서 - Validation 라이브러리 추가 - 유효성 체크와 관련된 라이브러리 - build.gradle 에 `implementation 'org.springframework.boot:spring-boot-starter-validation'` 추가 - Validation 적용 - 각 필드에 @NotBlank 등과 같은 룰을 붙임 - 객체 선언부분에 @Valid 붙임 - 예외발생 - MethodArgumentNotValidException 이 발생함 # 스텝 08-13 ## 스텝명 : Validation 예외 처리 - 추가설명 : 01:40 : resultCode 와 msg 의 내용을 정하는 절대적인 기준은 없습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/3ce8bb6) ## 핵심 - @ ## 순서 - MethodArgumentNotValidException 처리 - MethodArgumentNotValidException 핸들러 추가 - 해당 핸들러에서 GlobalException 형태로 변형 - 응답의 양식이 같음 - 양식 : resultCode, statusCode, msg, data - 케이스 - 성공할 경우 - 실패할 경우 1 : GlobalException 발생 - 실패할 경우 2 : MethodArgumentNotValidException # 스텝 08-14 ## 스텝명 : 기타 예외 처리 - 추가설명 : 00:25 : 강사가 복사 붙여넣기 해서 사용하는 소스코드 그리고 여러분이 이해하는 소스코드는 복사 붙여넣기 하셔도 됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/47fd996) ## 핵심 - @ ## 순서 - 기타 예외 핸들러 - trace : 예외에 대한 자세한 발생경위 - path : URL - rq - rq는 요청과 응답 쌍에 대한 추상화된 레이어 입니다. - 즉 rq는 내부적으로 요청(HttpServletRequest)과 응답(HttpServletResponse)에 접근하고 다룰 수 있습니다. - 기타 예외 처리를 하는 이유 - 기타 예외에 대한 처리를 하지 않으면 - 기본적인 양식으로 오류가 출력됩니다. # 스텝 08-15 ## 스텝명 : 액션의 응답본문 클래스 - 추가설명 : 00:25 : 강사가 ResponseEntity 대신 RsData를 사용하는 이유 : 편하고 더 깔끔해서, 자세한 이유는 쓰다보면 아시게 됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d13975f) ## 핵심 - @ ## 순서 - 엔드포인트 - 액션메서드 라고도 불립니다. - 액션메서드마다 보통 클래스 2개씩 필요로 합니다. - 요청본문 클래스 - 입력값이 없다면 필요없다. - 응답본문 클래스 - MemberJoinRespBody 클래스 - join 메서드가 `RsData` 타입 데이터를 리턴하도록 - RsData 의 newDataOf 메서드 활용하면 조금 더 편함 # 스텝 08-16 ## 스텝명 : RsData 상태코드를 응답코드로 - 추가설명 : 00:29 : 사실 응답코드를 세밀하게 조절할 필요는 크게 없습니다. 201과 202의 차이를 자세히 학습할 필요도 없습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/b0601d0) ## 핵심 - @ ## 순서 - 성공했을 때의 응답코드 - 현재는 무조건 200으로 지정됨 - Aspect - Aspect를 이용하면 굉장히 적은 코딩량으로 특정 패턴의 코드가 실행되기 전/후에 추가작업이 가능 # 챕터 09 ## 챕터명 : 매 요청시 마다 아이디/비밀번호 포함시켜서 인증 # 스텝 09-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:56 : 이번 챕터의 목표는 `인증을 구현할 수 있다.` 입니다. ## 순서 - 이번 챕터의 목표 : 인증을 구현할 수 있다. - 같은 말을 반복하거나 - 같은 내용을 계속 설명한다면 - 그것이 중요한 것이라는 뜻 # 스텝 09-02 ## 스텝명 : REST API, SURL 등록 - 추가설명 : 02:20 : 리턴하는 부분을 왜 이렇게 하는지 이해가 안되신다면 `newDataOf 로 처리하는게 관례`라고 외워주세요. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/fca7e59) ## 핵심요약 - @ ## 순서 - surl 등록 API 를 REST 화 - 작업 - POSTMAN 으로 테스트 # 스텝 09-03 ## 스텝명 : REST API, SURL 단건조회 - 추가설명 : 01:28 : `/{id}`(은)는 패턴이고, 해당 위치에는 실제로 숫자(surl 번호)가 들어옵니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/30909fa) ## 핵심요약 - @ ## 순서 - surl 단건조회 API 를 REST 화 - 작업 - POSTMAN 으로 테스트 # 스텝 09-04 ## 스텝명 : DTO - 추가설명 : 04:21 : Dto 클래스는 엔티티 클래스의 구조와 비슷하다. 물론 달라도 된다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/cb1c009) ## 핵심요약 - @ ## 순서 - 엔티티는 직접적으로 노출되면 안됨 - @JsonIgnore 가 있지만 미봉책일 뿐 - 엔티티의 칼럼명을 바꾸지도 못 함 - 프론트엔드 앱에서 바로 오류가 발생됨 - DTO가 필요하다. - 엔티티는 API를 통해서 노출될 때 무조건 DTO로 변경되어야 한다. - DTO 객체는 엔티티 객체로부터 만드는게 보통이다. - DTO는 엔티티와 거의 비슷한 구조이다. - `Member auth;` 는 적절한 필드들로 바꿔준다. - `Long authorId;` - `String authorName;` - 각 엔티티 클래스의 DTO 클래스 정의 - API 노출시 DTO 클래스 사용 # 스텝 09-05 ## 스텝명 : OSIV 끄기 - 추가설명 : 06:10 : OSIVE 를 끄면 조금 더 코딩량이 늘어나지만 DB 커넥션이 유지되는 시간이 줄어서 전체 성능이 좋아집니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/4132f28) ## 핵심요약 - @ ## 순서 - 스프링부트의 요청처리 과정 - 클라이언트 : 요청 - HTTP 요청이 서버로 전송됨 - 서버 : 요청접수 - HttpServletRequest 객체 생성 - 요청정보가 저장됨 - HttpServletResponse 객체 생성 - 응답할 내용을 담기위해 생성함 - 작업 - 요청객체의 요구사항에 기반해서 작업을 처리하고 응답할 정보가 응답객체에 담김 - 서버 : 응답보냄 - 클라이언트 : 응답받음 - 클라이언트 : 응답의 본문이 html 이면 렌더링 - DBCP - 스프링부트는 DB와의 통신회선(DB 커넥션)을 미리 여러개 만들어 둔다. - 요청이 몰릴 때를 대비해서 미리 만들어 두는 것 - OSIV - 기본적으로는 켜져있다. - 그로 인해서 하나의 요청이 시작될 때 DBCP 에서 DB 커넥션 하나가 배정된다. - 응답이 완료되면 그때에서야 DB 커녁션이 회수된다. - 이 방식은 비효율적이지만, 코딩이 편해지는 장점이 있다. - REST API 에서는 OSIV 끄기 - 스프링부트로 타임리프나, JSP 로 MPA 를 만들려는게 아니라 - REST API를 구현하는 게 목표라면, 보통은 OSIV는 끕니다. - 대신 컨트롤러 액션메서드마다 `@Transactional` 을 붙여야 한다. # 스텝 09-06 ## 스텝명 : REST API, SURL 삭제 - 추가설명 : 00:40 : 무엇을 리턴할지는 정해진 경우가 아니라면 개발자가 판단해서 정합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/7e71583) ## 핵심요약 - @ ## 순서 - surl 삭제 API 를 REST 화 - 작업 - POSTMAN 으로 테스트 # 스텝 09-07 ## 스텝명 : REST API, SURL 다건조회 - 추가설명 : 04:30 : Page, QueryDSL은 특전 강의에서 사용합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/69fa042) ## 핵심요약 - @ ## 순서 - surl 다건조회 API 를 REST 화 - 작업 - POSTMAN 으로 테스트 # 스텝 09-08 ## 스텝명 : REST API, SURL 수정 - 추가설명 : 05:08 : 더티 체킹은 엔티티 객체에 변경사항이 없다면 UPDATE 쿼리를 수행하지 않습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/809d61e) ## 핵심요약 - @ ## 순서 - surl 수정 API 를 REST 화 - 작업 - POSTMAN 으로 테스트 # 스텝 09-09 ## 스텝명 : 권한체크 - 추가설명 : 03:46 : rq.getMember() 는 나중에 클라이언트측에서 로그인한 회원의 객체를 리턴하게 됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d49d220) ## 핵심요약 - @ ## 순서 - 소유권 체크 - 조회, 수정, 삭제, 수정 전에 행위자가 해당 surl 객체의 소유자인지 체크 해야한다. - rq.getMember() - 나중에는 해당 메서드가 진짜 클라이언트에서 로그인한 회원 객체를 반환하도록 하겠습니다. - 지금은 일단 1번 회원이 리턴됩니다. # 스텝 09-10 ## 스텝명 : AuthService, 권한체크 - 추가설명 : 00:45 : AuthService는 모든 도메인에 관련된 권한체크 로직이 포함될 예정입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/46dab34) ## 핵심요약 - @ ## 순서 - AuthService 구현 - checkCanGetArticle 구현 - checkCanGetDelete 구현 - checkCanGetModify 구현 # 스텝 09-11 ## 스텝명 : 매 요청마다 인증정보는 필수 - 추가설명 : 06:15 : 서버는 요청을 보내는 클라이언트가 누군지 분별하지 않습니다. 요청마다 신분증이 필요합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/ddb8afb) ## 핵심요약 - @ ## 순서 - @ # 스텝 09-12 ## 스텝명 : 파라미터 정보로 인증 - 추가설명 : 05:30 : 로그인한 회원의 객체를 얻는 방식(get)은 변하지 않지만, 생성 방식(set)은 더 발전될 예정입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d61ade1) ## 핵심요약 - @ ## 순서 - 서버는 사용자를 구분하지 못함 - 서버에게 `내 정보 주세요.` 라고 하면 서버는 `너가 누군데?` 라고 합니다. - 서버에게 `내 정보 주세요. 저는 user1 입니다.`라고 하면 서버는 `user1` 의 정보를 줍니다. - 이 처럼 매 정보 요청마다 본인이 누군지에 대한 정보(`user1`)를 요청 정보에 포함시켜야 합니다. - `user1`과 같은 정보를 `인증정보` 라고 합니다. - surl 다건조회시에 인증정보를 포함 - 해당 액션메서드에서 인증정보를 기준으로 현재 로그인한 사람이 누구인지 정하도록 - # 스텝 09-13 ## 스텝명 : Rq에서 인증처리 - 추가설명 : 09:35 : 엔드포인트가 인증정보를 요구하든 하지 않든 인증정보를 요청에 포함시키는게 편합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/33d540f) ## 핵심요약 - @ ## 순서 - `rq.getMember();`의 `null` 리턴 - `rq.getMember();`는 기본적으로는 `null`을 리턴 - `rq.setMember(...);`를 사전에 해줘야 합니다. - 지금과 같은 방식이라면 매 액션메서드 마다 해당 작업을 해줘야 합니다. - 뭔가 더 좋은 방법이 필요합니다. - `rq.getMember` 메서드만으로 인증처리 - `Rq`는 `리퀘스트 스코프 빈` 입니다. - 그래서 `HttpServletRequest` 객체에 접근이 가능합니다. - 그것을 통해서 파라미터로 넘겨진 `actorUsername` 에 접근이 가능합니다. - 그것을 통해서 `memberService.findByUsername` 을 호출합니다. - POSTMAN 으로 테스트 # 스텝 09-14 ## 스텝명 : 인증정보에 password 추가 - 추가설명 : 01:50 : 아이디와 비밀번호를 매번 요청에 추가하는 것은 보안상 좋지 않습니다. 추후 개선할 예정입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/77c8bf4) ## 핵심요약 - @ ## 순서 - 인증정보에 password 추가 - 인증정보가 username 뿐이라면 부족합니다. - 요청에 username, password를 매번 추가하면 보안에 위험하지만 - 일단은 그게 인증에 필요하기 때문에 일단 넘어가겠습니다. - Rq.getMember에서 actorPassword 처리 - POSTMAN 으로 테스트 # 스텝 09-15 ## 스텝명 : rq.getMember 에 캐시로직 적용 - 추가설명 : 02:05 : 이 방식을 `메모리 캐싱`이라고 합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/9f1a706) ## 핵심요약 - @ ## 순서 - Rq.getMember에서 `메모리 캐싱` 적용 - POSTMAN 으로 테스트 # 챕터 10 ## 챕터명 : 아이디/비밀번호 쿠키로 인증 # 스텝 10-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:28 : 이번 챕터의 목표는 `쿠키정보로 인증을 구현할 수 있다.` 입니다. ## 순서 - 이번 챕터의 목표 : 쿠키정보로 인증을 구현할 수 있다. # 스텝 10-02 ## 스텝명 : HTTP 헤더영역 == 맵 - 추가설명 : 00:58 : 엄밀히 말해서 헤더부분은 여러개의 키-값 쌍으로 구성되어 있고, 개별 구성를 `헤더`라고 부릅니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/2c1768b) ## 핵심요약 - @ ## 순서 - HTTP 헤더 설명 - HTTP 헤더로 인증정보 전송 # 스텝 10-03 ## 스텝명 : Authorization Header - 추가설명 : 00:25 : 헤더의 구성은 우리가 바꿀 수 없는 부분이 있고, 그 부분을 제외한 나머지는 개발자가 자유롭게 활용할 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/fc643ca) ## 핵심요약 - @ ## 순서 - HTTP 헤더명 Authorization에 인증정보 담기 # 스텝 10-04 ## 스텝명 : 쿠키 - 추가설명 : 02:15 : 쿠키는 특정 사이트에 귀속되고, 해당 사이트로의 통신(요청)이 발생하면 관련된 쿠키가 자동으로 헤더에 압축되어 포함됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d2aaa6f) ## 핵심요약 - @ ## 순서 - 쿠키설명 - 인증정보를 쿠키로 담기 # 스텝 10-05 ## 스텝명 : 쿠키로 로그아웃 - 추가설명 : 01:12 : actorUsername, actorPassword 라는 쿠키를 삭제하는 것이 곧 `로그아웃` 입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/5ea2ec4) ## 핵심요약 - @ ## 순서 - 쿠키로 로그아웃 # 스텝 10-06 ## 스텝명 : 쿠키로 로그인 - 추가설명 : 03:00 : 올바른 인증정보에 해당하는 actorUsername, actorPassword 라는 쿠키를 생성하는 것이 곧 `로그인` 입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/cfc620b) ## 핵심요약 - @ ## 순서 - 쿠키로 로그인 # 챕터 11 ## 챕터명 : 아이디/비밀번호 쿠키 대신 API KEY 쿠키로 인증 # 스텝 11-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:20 : 이번 챕터의 목표는 `API KEY 방식으로 인증을 구현할 수 있다.` 입니다. ## 순서 - 이번 챕터의 목표 : API KEY 방식으로 인증을 구현할 수 있다. # 스텝 11-02 ## 스텝명 : 스프링 시큐리티 - 추가설명 : 04:40 : 스프링 시큐리티 의존성을 추가하고 아무것도 안하면 기본세팅값으로 작동됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/8b40261) ## 핵심요약 - @ ## 순서 - 은행에 청원경찰이 있는 이유 - 청원경찰은 은행원의 부담을 줄여줍니다. - 스프링 시큐리티는 청원경찰 처럼 적절한 `입구컷`을 해줍니다. - 얼토당토없는 요청을 초장에 막아버립니다. - Ut 클래스 위치 변경 - 조금 더 적절한 위치로 이동 - 새 위치 : `package com.ll.demo03.standard.util;` - 스프링 시큐리티 의존성 추가 - build.gradle에 추가 - 스프링 시큐리티의 기본설정 - 기본설정은 들어오는 모든 HTTP 요청에 대해서 아이디/비번을 요구한다. - 추후 설정을 통해서 고칠 계획 입니다. # 스텝 11-03 ## 스텝명 : 기본설정에서 특정 URL만 허용 - 추가설명 : 01:20 : 시큐리티 설정에서 코드상에서 위에 선언한 룰이 우선적으로 적용됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/69e20a1) ## 핵심요약 - @ ## 순서 - SecurityConfig 클래스 추가 - filterChain 메서드를 통해서 설정이 가능 - 스프링 시큐리티 초기설정과 유사하게 구성 - 특정 URL은 시큐리티가 무조건 통과시키도록 처리 # 스텝 11-04 ## 스텝명 : CSRF 끄기 - 추가설명 : 01:40 : REST API 구현에서는 보통 CSRF 설정을 끕니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/ba2f109) ## 핵심요약 - @ ## 순서 - frameOptions 설정 - frameOptions 설정하여 h2-console 작동하도록 - CSRF 끄기 - CSRF 꺼서 h2-console 작동하도록 - CSRF 는 꼭 h2-console 이 아니더라도, 보통 REST API 구현에서는 끈다. # 스텝 11-05 ## 스텝명 : 비밀번호 암호화 - 추가설명 : 00:23 : 어떠한 빈을 등록할 때 꼭 어떠한 클래스에서 해야한다는 법칙이 없습니다. 본인에게 말이 되는 방식으로 하세요. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/102a021) ## 핵심요약 - @ ## 순서 - PasswordEncoder 빈 생성 - AppConfig 에서 생성 - AppConfig은 앱에서 전반적으로 사용된는 빈을 등록하는 곳이다. - 회원가입시 비번 암호화 # 스텝 11-06 ## 스텝명 : 비밀번호 인증에 인코더 적용 - 추가설명 : 01:15 : passwordEncoder 로 암호환 것은 passwordEncoder 로 검증해야 합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/186c3d9) ## 핵심요약 - @ ## 순서 - 비밀번호가 올바른지 체크할 때 비밀번호 인코더 적용 # 스텝 11-07 ## 스텝명 : CustomAuthenticationFilter 추가 - 추가설명 : 01:50 : 올바르게 로그인되어 있더라도, 그 방식을 시큐리티가 이해할 수 없기 때문에 입구컷 당한 상황입니다. 시큐리티에게 알려줘야 합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/24663d9) ## 핵심요약 - @ ## 순서 - 시큐리티의 입구컷 - 단건 조회 API 호출해보면 입구컷 당합니다. - 로그인을 올바르게 했는데도 입구컷 당합니다. - 그 이유는 시큐리티가 우리의 로그인 방식을 이해할 수 없기 때문입니다. - CustomAuthenticationFilter 추가 - 스프링 시큐리티는 필터로 구현되어 있습니다. - 우리가 원하는 필터를 적절한 시점에 실행되도록 할 수 있습니다. - 시큐리티가 우리를 입구컷 하기 전에 실행되어야 합니다. - CustomAuthenticationFilter 에서는 다음과 같은 일을 해야 합니다. - 쿠키 actorUsername, actorPassword 가 올바른지 체크하고 - 올바르다면 스프링 시큐리티가 이해할 수 있는 방식으로 로그인 되었다고 설정해야 합니다. # 스텝 11-08 ## 스텝명 : CustomAuthenticationFilter 구현 - 추가설명 : 00:45 : 해당 필터는 모든 요청에 대해서 작동합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/6c8410f) ## 핵심요약 - @ ## 순서 - 필터기능 구현 - 인증정보가 없거나 올바르지 않으면 예외를 발생시키기 않고 - 단순히 시큐리티 인증정보를 등록하지만 않겠습니다. - 왜냐하면 어짜피 인증정보만 등록하지 않아도 목적지로 갈 수 없기 때문입니다. - 쿠키의 인증정보가 올바르다면 시큐리티 인증정보 등록 - 이른 filterChain.doFilter 후에는 return 이 필수 - POSTMAN 테스트 # 스텝 11-09 ## 스텝명 : 자격없는 접근에 대한 오류 - 추가설명 : 02:15 : 이미 잭슨은 빈으로 관리되고 있다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/9799211) ## 핵심요약 - @ ## 순서 - exceptionHandling 구현 - AppConfig 에서 static 메서드로 잭슨 빈 받아오는 기능 구현 - POSTMAN 테스트 # 스텝 11-10 ## 스텝명 : 인증정보 체크의 비효율 제거 - 추가설명 : 01:24 : 현재 아이디/비번이 올바른지 쓸데없이 2번이나 체크하고 있다. 불필요한 과정을 줄여야 한다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d136aac) ## 핵심요약 - @ ## 순서 - 인증정보의 더블체크 - 현재 인증정보를 더블체크 하고 있다. - POSTMAN에서 `user1` (으)로 로그인 - surl 1번의 단건조회 수행 - 똑같은 쿼리가 2번이나 수행된다. - 스프링 시큐리티 인증객체 - 스프링 시큐리티 인증객체안의 name 은 우리가 믿어도 된다. - Rq의 getMember에서는 해당정보를 신뢰한다. # 스텝 11-11 ## 스텝명 : username 대신 id - 추가설명 : 04:00 : 같은 영속성 컨텍스트를 사용한다면 주키(id)를 통한 조회는 캐시 데이터 사용으로 이어질 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/a8a1a80) ## 핵심요약 - @ ## 순서 - 인증정보의 더블체크의 불필요성 - 회원의 식별자 - username 으로 식별할 수 있음 - id 로도 식별할 수 있고, 더 좋고 빠름 - 더 좋은 이유 : JPA 에서 이 id 를 기준으로 캐싱 데이터 사용여부를 결정함 - 시큐리티 인증객체에 username이 아닌 id를 삽입 - 영속성 컨텍스트의 작동으로 추가 회원 조회 쿼리가 발생하지 않을 수 도 있다. # 스텝 11-12 ## 스텝명 : apiKey 도입 - 추가설명 : 01:40 : UUID는 길고 난수성이 뛰어나기 때문에 해커가 특정 회원의 apiKey(UUID)를 추측해서 알아낼 수 없습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/e639d4b) ## 핵심요약 - @ ## 순서 - 회원마다 고유한 apiKey 가지도록 - 현재는 아이디/비번을 이용한 인증만 가능하지만 - 이렇게 되면 apiKey를 통한 인증도 가능해진다. - apiKey를 통한 인증방식으로 변경 - 필터에서 인증할 때 쿠키에서 apiKey 를 사용 - 로그인 시에 올바른 아이디/비밀번호가 입력되었다면 쿠키로 apiKey 생성 - 로그인 API 엔드포인트에 대해서는 permit - 로그인 시 비밀번호 체크에서 패스워드 인코더 사용하도록 - 기존에는 단순히 비교해서 일치했는데, 이 코드는 과거의 잔재입니다. - apiKey 방식과 아이디/비번 방식 비교 - 둘다 탈취당하면 치명적이지만 - apiKey 탈취를 당하는게 조금 덜 치명적이다. - 회원가입 API 엔드포인트에 대해서도 permit # 챕터 12 ## 챕터명 : API KEY 쿠키 대신 JWT 방식의 Access Token 쿠키로 인증 # 스텝 12-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:15 : UUID방식이 아닌 JWT방식으로 API KEY를 만들면 그것을 보통 `엑세스 토큰` 이라고 합니다. ## 순서 - 이번 챕터의 목표 : JWT 방식으로 인증을 구현할 수 있다. # 스텝 12-02 ## 스텝명 : JWT - 추가설명 : 05:25 : API KEY를 JWT 방식으로 만들면, 검증이 굉장히 빠르다. ## 핵심요약 - @ ## 순서 - 필터에서 인증방식 복습 - 필터에서 인증이 안되었다고 하더라도 - 시큐리티 설정에서 permit 된 URL 이라면 통과됩니다. - 필터에서는 apiKey를 인증하는 방법 - 필터에서는 apiKey를 상당히 무식한 방법으로 인증합니다. - 실제로 수행되는 SQL : `SELECT * FROM member WHERE apiKey = ?` - apiKey 자체를 분석해서 파악하는 방식이 더 빠르고 좋습니다. # 스텝 12-03 ## 스텝명 : JWT 방식으로 API KEY 생성 - 추가설명 : 04:40 : 시크릿 키으로 서명해야 JWT가 완성됩니다. 이후 같은 키로 해당 JWT의 조작여부를 빠르게 알 수 있습니다. - 추가설명 : 04:28 : application-secret.yml이 바뀔 때 마다 원격지 리포의 APPICATION_SECRET_YML 시크릿 변수의 값도 똑같이 바꿔줘야 GITHUB ACTION가 실패하지 않습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/e475dc1) ## 핵심요약 ### application.yml - application.yml 이 변경되었다면, 항상 GIT 리포지터리에서 시크릿변수 APPLICATION_SECRET_YML의 값을 최신화 해주셔야 합니다. ```yml custom: secret: spring: data: redis: password: lldj123414 key: 1234 jwt: secretKey: abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 ``` ## 순서 - JWT 라이브러리 설치 - 의존성을 추가했다면 명시적으로 스프링부트를 재시작해주세요. - AuthTokenService 추가 - 특정 회원의 JWT를 생성해줍니다. - JWT에는 수명이라는 개념이 존재합니다. - JWT에는 정보를 직접 넣을 수 있습니다. - 보통 회원의 식별자를 넣습니다. - 그래야 나중에 해당 JWT를 보고 누구의 토큰인지 파악이 가능합니다. - 로그인 성공시 accessToken 이라는 쿠키로 생성한 회원의 JWT를 저장 - GIT 리포지터리에서 시크릿변수 `APPLICATION_SECRET_YML`의 값을 최신화 해주셔야 합니다. - 이 작업을 하지 않으면 github action의 job이 실패합니다. # 스텝 12-04 ## 스텝명 : JWT에 수명이 있는 이유 - 추가설명 : 02:25 : JWT는 구조상 폐기가 불가능해서 수명이 긴 토큰을 탈취 당하면 골치가 아픕니다. ## 핵심요약 - @ ## 순서 - API KEY 종류별 비교 - 키 자체에 정보를 담고 있는가? - UUID : 없음 - JWT : 있음 - 해당 키가 어떠한 회원의 키인지 파악하는 방법 - UUID : `SELECT * FROM member WHERE apiKey = ?` 를 통해서 나온 회원 - JWT : JWT 자체에 정보가 들어있다. - 생성할 때 시크릿 키가 필요한가? - UUID : 필요없음 - JWT : 필요함 - 절대로 외부에 노출되면 안됨 - 해당 키가 유효한 키인지 확인하는 방법 - UUID : `SELECT * FROM member WHERE apiKey = ?` 를 해서 결과나 나오면 유효한 키 - JWT : 해당 JWT 를 생헝할 때 사용한 시크릿 키를 통해서 아주 빠르게 유효성 체크를 할 수 있다. - 중앙관리를 하는가? - UUID : 키 자체를 DB에서 관리한다. 언제든지 폐기, 중지, 재생성이 가능하다. 해커가 해당 키를 탈취했다는 사실을 안다면 빠르게 대처가 가능 - JWT : 중앙관리를 하지 않는다. 해커가 해당 키를 탈취했다는 사실을 안다고 하더라도 대처가 불가능하다. 그래서 수명을 보통 수명을 5분이내로 짧게 부여한다. # 스텝 12-05 ## 스텝명 : JWT를 사용하여 인증 - 추가설명 : 00:50 : 실제 실무에서도 라이브러리 성격의 코드는 이런식으로 세부적인 구현에 신경쓰지 않고 복사 붙여넣기 하는 경우가 많습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/710dcda) ## 핵심요약 - @ ## 순서 - validateToken, getDataFrom 메서드 추가 - 필터에서 validateToken, getDataFrom 메서드 사용 - 필터에서 위 메서드 사용하여 키 유효성 체크와 사용자 정보조회를 기존 보다 빠르게 처리 - 다만 로그인 후 60초 후에 로그인이 자동으로 풀림 - 이 부분은 추후 리프레시 토큰을 도입하여 해결할 예정 - UUID 를 이용한 단순 API KEY 방식도 틀린 방식이 아님 # 챕터 13 ## 챕터명 : Refresh Token 쿠키도 생성하여 Access Token 의 단점을 보완 # 스텝 13-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:11 : Refresh Token을 새로 생성할 필요가 없습니다. 우리가 UUID 방식으로 만들었던 API KEY를 그대로 활용할 예정입니다. ## 순서 - 이번 챕터의 목표 : Refresh Token을 도입하여 Access Token의 단점을 보완할 수 있다. # 스텝 13-02 ## 스텝명 : JWT의 단점 - 추가설명 : 01:20 : JWT로 API KEY를 만들면 여러 가지 이유 때문에 짧은 유효기간을 가지게 할 수밖에 없다. ## 핵심요약 - @ ## 순서 - UUID API KEY, JWT API KEY 비교 # 스텝 13-03 ## 스텝명 : apiKey라는 이름을 refreshToken 으로 - 추가설명 : 00:20 : 이름을 바꾸지 않아도 되지만, 가독성을 위해서 바꾸겠습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/90d046c) ## 핵심요약 - @ ## 순서 - apiKey 라는 이름을 refreshToken 으로 변경 - 이미 apiKey 자체가 리프레시 토큰으로서의 역할을 완벽히 수행할 수 있습니다. - 그래서 그냥 사용해도 되지만, 가독성을 위해서 이름을 변경하겠습니다. - 필터에서 리프레시 토큰 사용전략 설명 - 엑세스 토큰이 만료되었을 때 - 리프레시 토큰을 사용하여 엑세스 토큰을 재생성 # 스텝 13-04 ## 스텝명 : Refresh Token 적용 - 추가설명 : 04:43 : 이렇게 브라우저에게도 엑세트 토큰이 바뀌었다고 꼭 알려줘야 합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/abd6d06) ## 핵심요약 - @ ## 순서 - 필터에서 Refresh Token 얻기 - 엑세스 토큰이 만료되었다면 재갱신 시도 - 재갱신이 되면 새로 엑세스 토큰을 쿠키로도 응답 - 그래야 브라우저에 저장되어 있던 엑세스 토큰도 갱신됨 # 스텝 13-05 ## 스텝명 : Refresh Token 작동방식 - 추가설명 : 02:00 : refreshToken은 accessToken의 유효기간으 5분이라면, 5분에 한번씩만 작동됩니다. ## 핵심요약 - @ ## 순서 - 로그인 후 생성되는 쿠키 - 엑세스 토큰과 리프레시 토큰 - 로그인 후 모든 요청마다 엑세스 토큰과 리프레시 토큰이 해당 요청의 해더에 자동으로 포함됨 - 토큰별 검증에 걸리는 시간 - 엑세스 토큰 : CPU 연산만으로 해당 토큰이 유효한지 알 수 있다. - 유효성 체크 : 해당 토큰을 해커가 꾸며낸게 아니라 우리(스프링 부트)가 생성한것인지를 체크 - 리프레시 토큰 : CPU 연산 + IO 연산(DB 쿼리)으로 해당 토큰이 유효한지 알 수 있다. - 유효성 체크 : 해당 토큰을 해커가 꾸며낸게 아니라 우리(스프링 부트)가 생성한것인지를 체크 - 각 토큰별 작동 타이밍 - 엑세스 토큰 : 매 요청마다 해당 토큰이 사용된다. - 리프레시 토큰 : 엑세스 토큰의 만료기간이 10분이라면, 개별 브라우저의 요청 기준에서 10분에 한번씩만 사용된다. - 이 특성 때문에 리프레시 토큰이 엑세스 토큰과 비교해서 느려도 크게 문제가 안된다. - 어짜피 자주 사용되지는 않기 때문이다. # 챕터 14 ## 챕터명 : Spring Doc으로 OPEN API 문서 자동생성 # 스텝 14-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:25 : 개발자가 컨트롤러 관련코드를 수정하면 그 내용이 자동으로 문서에 반영되기 때문에 굉장히 편리합니다. ## 순서 - 이번 챕터의 목표 : OPEN API 문서를 만들 수 있다. # 스텝 14-02 ## 스텝명 : SpringDoc - 추가설명 : 00:50 : OpenAPI 문서를 잘 세팅해서 만들면, POSTMAN의 역할 대부분을 수행할 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/f739c78) ## 핵심요약 - @ ## 순서 - OpenAPI 문서 설명 - 프론트엔드 개발자 입장에서 굉장히 편하게 서버 API에 대한 정보를 얻을 수 있다. - OpenAPI 문서를 잘 만들면 POSTMAN을 대체할 수 도 있다. - SpringDoc - OpenAPI 표준에 맞게 문서를 자동으로 만들어주는 툴이 스웨거 이다. - 스웨거를 스프링부트의 상황에 맞게 쓸 수 있게 해주는 기술이 SpringDoc 이다. - SpringDoc 설치 - SpringDocConfig.java 추가 - @OpenAPIDefinition : 스웨거 문서 세팅 - @SecurityScheme : Authorization 헤더를 통해서 로그인하는 기능 활성화 - @Bean public GroupOpenApi groupApiV1() : API v1 에 관련된 API에 대한 문서 생성 - @Bean public GroupOpenApi groupController() : API 와 관련없는 API에 대한 문서 생성 # 스텝 14-03 ## 스텝명 : 일반 Controller 문서 꾸미기 - 추가설명 : 06:10 : OPEN API 문서가 잘 만들어졌더라도, 실무에서는 POSTMAN을 보조적인 도구로 많이 활용합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/a5ec61f) ## 핵심요약 - @ ## 순서 - 쓸데없는 컨트롤러 클래스, 액션 메서드들 제거 - GET `/` 허용 - GET `/` 에 대해서 로그인 없이도 접근 가능하도록 시큐리티 설정에서 접속 허용 처리 - @Tag 등 - HomeController, SurlController 에 `@Tag` 등의 어노테이션을 달아서 OPEN API 문서를 조금 더 보기좋게 꾸미기 - GET `/g/*` 허용 - GET `/g/*` 에 대해서 로그인 없이도 접근 가능하도록 시큐리티 설정에서 접속 허용 처리 # 스텝 14-04 ## 스텝명 : REST Controller 문서 꾸미기 1/2 - 추가설명 : 02:55 : 이런 요청/응답의 본문의 데이터 타입을 `MIME 타입`이라고 한다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/766e7ac) ## 핵심요약 - @ ## 순서 - api response body mime type - 우리의 모든 REST API 엔드포인트는 JSON 형태의 데이터로 응답한다. - 하지만 현재는 MIME 타입이 `*/*`으로 되어있다. - produces = APPLICATION_JSON_VALUE - 기존코드 : `@RequestMapping("/api/v1/members")` - 신규코드 : `@RequestMapping(value = "/api/v1/members", produces = APPLICATION_JSON_VALUE)` - 이렇게 설정하여 명시적으로 해당 어노테이션이 붙은 컨트롤러 클래스의 모든 하위 엔드포인트 메서드의 응답타입을 `application/json`으로 설정한다. - 이 작업은 나중에 타입스크립트와 연동되어 프론트엔드 개발자에게 도움이 될 수 있다. # 스텝 14-05 ## 스텝명 : REST Controller 문서 꾸미기 2/2 - 추가설명 : 04:25 : `GlobalExceptionHandler::handleException`에 `@ResponseStatus` 붙이면 실패에 대한 양식도 보여집니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/cccd036) ## 핵심요약 - @ ## 순서 - @Tag 등 - ApiV1SurlController, ApiV1MemberController 에 `@Tag` 등의 어노테이션을 달아서 OPEN API 문서를 조금 더 보기좋게 꾸미기 - default-produces-media-type - springdoc.default-produces-media-type=application/json 으로 설정하여 기본적인 응답본문의 MIME 타입을 설정 - 실패응답의 본문양식 - `GlobalExceptionHandler::handleException`에 `@ResponseStatus` 붙여서 처리 # 챕터 15 ## 챕터명 : 스벨트킷으로 구현하는 `할 일 관리 서비스` # 스텝 15-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:36 : 해당 내용에 대해서 쉽고 재미있고 유익한 교육자료를 제공해드리니 걱정하지 마세요. ## 핵심 ## 트랜스 오버(실시간 번역), 크롬 익스텐션 - [트랜스 오버](https://chromewebstore.google.com/detail/transover/aggiiclaiamajehmlfpkjmlbadmkledi) ## 스벨트 - [스벨트 - https://svelte.dev](https://svelte.dev) - [스벨트 - 튜토리얼 - https://learn.svelte.dev/tutorial/welcome-to-svelte](https://learn.svelte.dev/tutorial/welcome-to-svelte) - [스벨트 - 예제들 - https://svelte.dev/examples](https://svelte.dev/examples) ## 스벨트 5 preview - [스벨트 5 preview - 문서 - https://svelte-5-preview.vercel.app/docs](https://svelte-5-preview.vercel.app/docs) - [스벨트 5 preview - 플레이그라운드 - https://svelte-5-preview.vercel.app](https://svelte-5-preview.vercel.app) ## 스벨트킷 - [스켈트킷 - 문서 - https://kit.svelte.dev/docs](https://kit.svelte.dev/docs) - [스벨트킷 - 튜토리얼 - https://learn.svelte.dev/tutorial/welcome-to-svelte](https://learn.svelte.dev/tutorial/welcome-to-svelte) - [스켈트킷 - 문서 - 프로젝트 생성 - https://kit.svelte.dev/docs/creating-a-project](https://kit.svelte.dev/docs/creating-a-project) ## 프론트엔드 프레임워크별 문법 비교 - [프론트엔드 프레임워크별 문법 비교 - https://component-party.dev](https://component-party.dev) ## 순서 - 이번 챕터의 목표 : 스벨트킷으로 할 일 관리 서비스를 구현할 수 있다. # 스텝 15-02 ## 스텝명 : 사전학습 - 추가설명 : 00:30 : 사진저식(HTML, CSS, 자바스크립트, 타입스크립트)이 있어야 스벨트킷를 시작할 수 있습니다. - 추가설명 : 01:00 : 엄청나게 쉽고 재미있게 학습할 수 있는 자료로만 엄선했습니다. 쉽게 공부하실 수 있을거라고 자신합니다. ## 핵심요약 ### 사전학습기술 - HTML - CSS - CSS, FLEX - 자바스크립트 - 타입스크립트 ### 사전학습기술 1 : HTML - [생활코딩 - WEB - WEB1 - HTML & Internet](https://opentutorials.org/course/3084) ### 사전학습기술 2 : CSS - [생활코딩 - WEB - WEB2 - CSS](https://opentutorials.org/course/3086) ### 사전학습기술 3 : CSS FLEX - [CSS 셀렉터 튜토리얼 - CSS DINER](https://flukeout.github.io) - 정답을 검색해서 봐도 됩니다. - 제한시간 : 10분 - [CSS 셀렉터 튜토리얼 - Css Selector Game](https://kowoohyuk.github.io/css-selector) - 정답을 검색해서 봐도 됩니다. - 제한시간 : 10분 - [flex 개구리](https://flexboxfroggy.com/#ko) - 제한시간 : 10분 - [flex 디펜스](http://www.flexboxdefense.com/) - 제한시간 : 15분 - [flex playground](https://codepen.io/enxaneta/debug/adLPwv) - 목표 : flex-grow, flex-shrink, flex-basis 를 직관적으로 이해한다. - [글 - 이번에야 말로 css flex를 익혀보자](https://studiomeal.com/archives/197) - 목표 : flex의 전반적인 내용을 이해한다. ### 사전학습기술 4 : 자바스크립트 - [생활코딩 - WEB - WEB2 - JavaScript](https://opentutorials.org/course/3085) - [자바스크립트 온라인 튜토리얼](https://school.programmers.co.kr/learn/courses/3/3-hello-javascript-자바스크립트-입문) - [생활코딩 - WEB - WEB2 - JavaScript - Ajax](https://opentutorials.org/course/3281) - [생활코딩 - JavaScript callback function](https://youtu.be/iPe0noahrBY) - [생활코딩 - JavaScript promise (then)](https://youtu.be/Sn0ublt7CWM) - [생활코딩 - JavaScript async & await](https://youtu.be/1z5bU-CTVsQ) ### 사전학습기술 5 : 타입스크립트 - [타입스크립트 핸드북](https://joshua1988.github.io/ts) ## 순서 - 사전교육자료 설명 # 스텝 15-03 ## 스텝명 : Node.js 설치 - 추가설명 : 02:18 : NVM이 어려우시다면 스킵하셔도 됩니다. ## 핵심요약 ### Node.js 설치 - [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 버전 활성화 ## legacy-peer-deps 이 기본적으로 작동하도록 전역설정 ```bash npm config set legacy-peer-deps true # 이제 더 이상 --legacy-peer-deps 를 명시적으로 입력하지 않아도 된다. npm config get legacy-peer-deps # 확인 ``` ## npm 최신화 - mac 에서는 아래 명령어 앞에 `sudo `를 붙여야 할 수 도 있습니다. ```bash npm install -g npm ``` ## 순서 - 백엔드 구현 주요 언어, 프론트엔드 주요 언어 - 백엔드 : 자바, 파이썬, 자바스크립트(노드) - 프론트엔드 : 자바스크립트(노드), 스위프트, 코틀린 - Web앱은 자바스크립트(노드) - iOS앱 개발은 스위프트 - 안드로이드앱 개발은 코틀린 - 자바스크립트 개발환경 설치 - 운영체제에 노드를 설치하면 됩니다. - NVM - 더 나은 노드 설치 및 관리 방법 - 이 방법이 어려우시다면 NVM 말고 공식사이트에 들어가서 다운로드 및 설치를 해주세요. - NPM 최신화 # 스텝 15-04 ## 스텝명 : VS CODE 설치 및 세팅 - 추가설명 : 00:10 : 보통 자바 개발은 인텔리제이로, 자바스크립트 개발은 VS CODE로 합니다. ## 핵심요약 - @ ## 순서 - VS CODE 다운로드 - 필수 VS CODE EXTENSION 설치 - GitHub Copilot Chat - GitHub Copilot 결제하신 분만 사용가능 - GitHub Copilot - GitHub Copilot 결제하신 분만 사용가능 - Prettier - 소스코드를 예쁘게 정리해주는 도구 - Svelte for VS Code - 스벨트 언어 지원 - Format On Save 설정 - 상단메뉴 => File => Preferences => Settings - 검색어 `format` - Format On Save 체크 - 파일 저장시 자동으로 `Prettier`가 작동하도록 세팅 - 터미널 Default Profile 설정(윈도우 사용자만) - 터미널 메뉴 => Select Default Profile - Git Bash 선택 # 스텝 15-05 ## 스텝명 : front 폴더를 VS CODE 열기 - 추가설명 : 01:20 : code 라는 명령어가 안된다면 PC 재부팅 후 시도해보세요. 그래도 안되면 VS CODE 재설치가 필요합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/0e2d0e1) ## 핵심요약 - @ ## 순서 - front 폴더 생성 - 여기안에 모든 프론트 소스코드가 포함될 예정 - reformat code - front/** 에는 reformat 이 적용되지 않도록 설정 - VS CODE 열기 - code front - front 폴더를 VS CODE 로 열기 - 빈 폴더는 GIT에서 무시 - application-secret.yml 의 변경 - application-secret.yml 은 .gitignore 에 의해서 원격지 GIT 리포지터리로 업로드 되지 않음 - 그래서 APPLICATION_SECRET_YML 시크릿 변수의 값을 수동으로 갱신해줘야 합니다. - application-secret.yml 의 내용이 변경될 때 마다 갱신해줘야 합니다. - 그렇지 않으면 GITHUB ACTION 에서 실패가 발생합니다. # 스텝 15-06 ## 스텝명 : 스벨트킷 프로젝트 생성 - 추가설명 : 08:33 : 현재 front/.gitignore 파일이 추가되어 총 2개의 .gitignore 파일이 있는 것이고, 둘다 그것이 포함된 폴더를 기준으로 작동한다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/f90095b) ## 핵심요약 - @ ## 순서 - front 폴더를 VS CODE로 열기 - 스벨트킷과 스프링부트 비교 - 언어 - 스벨트킷 : 자바스크립트 - 우리는 타입스크립트를 사용할 예정 - 스프링부트 : 자바 - 프레임워크 구성 - 스벨트킷 : 스벨트 + 추가기능 - 스프링부트 : 스프링 + 추가기능 - 프레임워크 성격 - 스벨트킷 : 프론트엔드 프레임워크 - 백엔드 프레임워크로서의 기능도 들어있음 - 우리는 이 기능(백엔드 프레임워크로서의 기능)을 사용하지 않을 예정 - 스프링부트 : 백엔드 프레임워크 - 프론트엔드 프레임워크로서의 기능도 들어있음 - 우리는 이 기능(프론트엔드 프레임워크로서의 기능)을 사용하지 않을 예정 - 스벨트킷 프로젝트 생성 - npm create svelte@latest . - package.json 생성 - build.gradle 의 자바스크립트 버전 - npm install 명령을 통해서 해당 의존성들을 node_modules 라는 폴더에 다운로드 받을 수 있음 - 의존성들이 기술되어 있음 - dependencies - dependencies : 컴파일타임에서도 필요하고 런타임에서도 필요한 라이브러리 - devDependencies == 컴파일타임에서만 필요한 라이브러리 - 컴파일타임 == 쉽게 `앱을 만드는 기간`이라고 보셔도 됩니다. - 런타임 == 쉽게 `앱을 실행하는 기간`이라고 보셔도 됩니다. - node_modules - 이 폴더안에는 엄청나게 많은 폴더들이 포함되어 있음 - 이 폴더 안쪽을 분석할 일은 거의 없음 - npm install 에 의해서 생성됨 - .gitignore 에 의해서 보통은 GIT에 저장되지 않음 # 스텝 15-07 ## 스텝명 : 스벨트킷 실행 - 추가설명 : 01:00 : +page.svelte 파일의 내용을 수정 후 저장을 하면 그 즉시 브라우저에 변경사항이 반영됩니다. ## 핵심요약 - @ ## 순서 - 스벨트킷 실행 - npm run dev - npm run + 명령어는 package.json 의 scripts 에 정의된 명령을 수행한다. - [http://localhost:5173](http://localhost:5173) 으로 확인가능 - Ctrl + C 로 정지 - 각 확장자 별로 프리티어 활성화 - 파일저장시 자동으로 프리티어를 통한 소스코드 정리가 안된다면 - F1 누른 후, 검색에 `format` 입력 - `Format Document` 입력 - 프리티어 선택 - 각 확장자 별로 이미 프리티어 선택을 했다면 이후에는 물어보지 않음 - 전체 소스코드를 한번에 정리 - npm run format # 스텝 15-08 ## 스텝명 : 라우팅 - 추가설명 : 04:58 : 스벨트에서는 페이지 이동시 웹 사이트가 아닌 앱 처럼 굉장히 빠르게 페이지 이동이 됩니다. 즉 깜빡거리지 않습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/3cc9c07) ## 핵심요약 - @ ## 순서 - 라우팅 - routes/+page.svelte - 메인 페이지 - URL : / - routes/about/+page.svelte - 설명 페이지 - URL : /about - routes/home/links/+page.svelte- - 링크들 페이지 - URL : /home/links - a 엘리먼트를 이용한 링크 - `메인` : 메인 페이지로 이동하는 버튼 - `설명` : 설명 페이지로 이동하는 버튼 - `링크들` : 링크들 페이지로 이동하는 버튼 # 스텝 15-09 ## 스텝명 : 레이아웃 - 추가설명 : 01:10 : 레이아웃은 그 파일이 존재하는 해당폴더안의 모든 페이지들을 감쌉니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/cf60332) ## 핵심요약 - @ ## 순서 - 전체 레이아웃 - routes/+layout.svelte - 모든 페이지에 적용됨 - 특정 범위 레이아웃 - routes/about/+layout.svelte - 설명 페이지(`routes/about/+page.svelte`)에만 적용됨 # 스텝 15-10 ## 스텝명 : 로그인 페이지 - 추가설명 : 04:25 : form에서 submit 이벤트가 발생하면 submitLoginForm 함수가 실행되게 했습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/af22169) ## 핵심요약 - @ ## 순서 - 기존 페이지들 삭제 - 로그인 페이지 구현 # 스텝 15-11 ## 스텝명 : CORS 허용 - 추가설명 : 00:10 : 타 도메인간 fetch는 기본적으로 금지되어 있기 때문에 CORS 허용 작업이 필요합니다. - 추가설명 : 01:04 : CORS 작동은 브라우저에서 하지만, CORS 허용하도록 하는 백엔드에서 작업해야 합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/dad955f) ## 핵심요약 - @ ## 순서 - CORS 허용 # 스텝 15-12 ## 스텝명 : 크로스 도메인 쿠키 허용 - 추가설명 : 00:10 : 타 도메인간 쿠키전송은 기본적으로 금지되어 있기 때문에 그것을 허용 작업이 필요합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/7aa86bc) ## 핵심요약 - @ ## 순서 - 크로스 도메인 쿠키 허용 프론트엔드 작업 - `credentials: 'include',` - 브라우저에서 fetch를 할 때 꼭 해당 옵션을 붙여야 크로스 도메인 쿠키가 올바르게 전송됩니다. - 크로스 도메인 쿠키 허용 백엔드 작업 - `.domain(getSiteCookieDomain())` - 크로스 도메인 쿠키 허용하려면 이렇게 프론트엔드 환경의 도메인을 명시해야 합니다. - 크로스 도메인 쿠키에 대한 보안설정 - `.sameSite("Strict")` - 특정한 환경에서만 해당 쿠키게 접근 할 수 있도록 설정하여 보안성 강좌 - `.secure(true)` - 안전한 환경(HTTPS 환경)에서만 쿠키 전송이 되도록 설정하여 보안성 강좌 - `.httpOnly(true)` - 자바스크립트를 통한 쿠키접근을 금자하도록 설정하여 XSS 공격으로 인한 쿠키탈취 방어 # 스텝 15-13 ## 스텝명 : 백엔드에서 운영환경 도메인 분기 - 추가설명 : 08:10 : 소스코드에서 `http://localhost:5173` 이런식의 하드코딩을 하면 운영환경에서 문제가 됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d757b9a) ## 핵심요약 ### 개발환경에서의 도메인 - 프론트엔드 도메인 : `http://localhost:5173` - 백엔드 도메인 : `http://localhost:8070` - 쿠키 도메인 : `localhost` ### 운영환경에서의 도메인 - 프론트엔드 도메인 : `https://www.surl.oa.gg` - 백엔드 도메인 : `https://api.www.surl.oa.gg` - 쿠키 도메인 : `.www.surl.oa.gg` ### 소스코드에서의 도메인(하드코딩 방식 x) - 프론트엔드 도메인 : `AppConfig.getFrontUrl();` - 백엔드 도메인 : `AppConfig.getBackUrl();` - 쿠키 도메인 : `AppConfig.getSiteCookieDomain();` ## 순서 - 개발환경과 운영환경의 차이 - 개발환경에서의 도메인 - 프론트엔드 도메인 : `http://localhost:5173` - 백엔드 도메인 : `http://localhost:8070` - 쿠키 도메인 : `localhost` - 운영환경에서의 도메인 - 프론트엔드 도메인 : `https://www.surl.oa.gg` - 백엔드 도메인 : `https://api.www.surl.oa.gg` - 쿠키 도메인 : `.www.surl.oa.gg` - application.yml 에 도메인 정의 - application.yml 에서 개발환경 도메인 활성화 - application-prod.yml 에서 운영환경 도메인 활성화 - AppConfig 에서 각 도메인을 가져오는 함수 정의 - 프론트엔드 도메인 : `AppConfig.getFrontUrl();` - 백엔드 도메인 : `AppConfig.getBackUrl();` - 쿠키 도메인 : `AppConfig.getSiteCookieDomain();` - Rq.java 에 적용 - 쿠키 도메인(`AppConfig.getSiteCookieDomain();`) 사용 - CustomWebMvcConfig.java 에 적용 - 프론트 도메인(`AppConfig.getFrontUrl();`) 사용 # 스텝 15-14 ## 스텝명 : 프론트엔드에서 운영환경 도메인 분기 - 추가설명 : 00:10 : 소스코드에서 `http://localhost:8070` 이런식의 하드코딩을 하면 운영환경에서 문제가 됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/628f3fa) ## 핵심요약 - @ ## 순서 - 개발환경과 운영환경의 차이 - 개발환경에서의 도메인 - 프론트엔드 도메인 : `http://localhost:5173` - 백엔드 도메인 : `http://localhost:8070` - 쿠키 도메인 : `localhost` - 운영환경에서의 도메인 - 프론트엔드 도메인 : `https://www.surl.oa.gg` - 백엔드 도메인 : `https://api.www.surl.oa.gg` - 쿠키 도메인 : `.www.surl.oa.gg` - .env 에 개발환경 도메인 정의 - .env.production 에 개발환경 도메인 정의 - .gitignore 에서 `.env`, `.env.*` 허용 # 스텝 15-15 ## 스텝명 : Refresh Token 생성로직 변경 - 추가설명 : @@:@@ : @ ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/1de89c3) ## 핵심요약 - @ ## 순서 - initAll에서 회원의 Refresh Token 변경 - 운영환경이 아니라면 username 과 refreshToken 같도록 설정 - Refresh Token 생성로직 변경 - UUID는 너무 길다. - 별도의 로직으로 조금 더 짧게 생성되도록 변경 # 스텝 15-16 ## 스텝명 : OPEN API 문서에서 로그인 - 추가설명 : 01:20 : 특정 회원으로 로그인 후 API 호출하는 테스트 할 때 유용합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/3a0b252) ## 핵심요약 - @ ## 순서 - @SecurityRequirement - API 문서에서 로그인 하면 그것이 - API 문서에서 Try out 할 때 적용되도록 - `@SecurityRequirement`를 API 컨트롤러에 적용 - Filter에서 쿠키보다 헤더를 통한 로그인을 우선시 - 기타 개선작업 - API 문서에서 로그인 테스트 - 내 정보 조회 API 구현 - 현재 로그인한 회원의 정보를 반환 # 스텝 15-17 ## 스텝명 : 로그아웃 - 추가설명 : 00:30 : 일반적으로 링크버튼은 a 태그, 일반버튼은 button 태그(type="button" 속성 가지는)로 만듭니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/4ccd5d9) ## 핵심요약 - @ ## 순서 - 로그인 페이지에서 버튼명 수정 - 로그인 페이지에 버튼명을 `회원가입`에서 `로그인`으로 올바르게 수정 - logout 함수 구현 - `+layout.svelte` 페이지에서 `로그아웃` 버튼 누르면 `logout` 함수 실행 - 백엔드 로그아웃 로직 변경 - accessToken, refreshToken 쿠기 삭제로 변경 - 로그아웃 요청은 시큐리티에서 로그인 체크 - `DELETE /api/v1/members/logout` 요청도 로그인 체크 대상에서 제외 # 스텝 15-18 ## 스텝명 : 내 정보 페이지 - 추가설명 : 04:45 : 타입스크립트를 쓰는 이유 중에서 가장 큰 비중을 차지하는 것은 소스코드 인텔리센스(자동완성) 이다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/fe71bd5) ## 핵심요약 - @ ## 순서 - 내 정보 페이지 구현 - `routes/member/me/+page.svelte` 파일 추가 - GlobalError 커스텀 예외 클래스 추가 - type Member 정의 - member 상태변수 정의 - 상태변수는 `$state(초기값);` 형태로 초기화된 변수이다. - 보통 뷰에서 사용되는 변수이면 상태변수로 만드는게 보통이다. - `let member: Member | null = $state(null);` - errorMessage 상태변수 정의 - `let errorMessage: string | null = $state(null);` - getMe 함수 구현 - 해당 함수에서 API 요청 - 성공하면 member 변수에 값 할당 - 해당 변수가 뷰단에서 사용된 상태변수이기 때문에 해당 변수에 값을 할당하는 것 만으로 뷰 부분이 자동으로 갱신됨 - 실패하면 errorMessage 변수에 값 할당 - 해당 변수가 뷰단에서 사용된 상태변수이기 때문에 해당 변수에 값을 할당하는 것 만으로 뷰 부분이 자동으로 갱신됨 - $effect 에서 getMe 함수 실행 - 자동실행되어야 하는 함수는 $effect 안쪽에서 호출하는게 스벨트의 룰이다. # 스텝 15-19 ## 스텝명 : 할 일 앱 구현, 추가, 리스팅 - 추가설명 : 05:30 : 스벨트에서 반복문에서 key는 필수이고, 반복요소의 고유값을 넣어야 한다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/2c50381) ## 핵심요약 - @ ## 순서 - 할 일 리스트 페이지 추가 - `routes/todo/+page.svelte` 파일 추가 - 할 일 추가 폼 구현 - todos 상태변수 생성 - addTodo 함수 구현 - todos 상태변수의 요소들을 뷰에 출력 - todo.done 의 값에 따라 체크박스의 체크상태를 제어 - `` # 스텝 15-20 ## 스텝명 : 할 일 앱 구현, todo.done을 상태변수화 - 추가설명 : 01:40 : 배열의 요소객체의 특정 속성들을 상태변수화 하려면 이렇게 해야 한다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/9caa013) ## 핵심요약 - @ ## 순서 - Type Todo 정의 및 적용 - todo 객체의 body와 done 을 상태변수 화 # 스텝 15-21 ## 스텝명 : 할 일 앱 구현, 삭제 - 추가설명 : 00:10 : 특정 할일을 선택해줘야 함수가 제대로 작동한다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/002f036) ## 핵심요약 - @ ## 순서 - 삭제버튼 추가 - 삭제기능 구현 # 스텝 15-22 ## 스텝명 : 할 일 앱 구현, 수정 1/2 - 추가설명 : 03:39 : event.target 은 해당 이벤트를 발생시킨 엘리먼트(폼) 객체 입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/c337c7e) ## 핵심요약 - @ ## 순서 - 수정폼 추가 - 수정폼 처리 콜백 함수구현 # 스텝 15-23 ## 스텝명 : 할 일 앱 구현, 수정 2/2 - 추가설명 : 06:34 : 이렇게 추가가 안되는 버그는 `todo.id`가 항상 유니크 하도록 하면 해결이 된다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/457f8b2) ## 핵심요약 - @ ## 순서 - editing 상태변수를 todo 객체에 추가 - editing 상태변수의 값에 따라서 할 일 항목의 내용을 분기 - true 이면 수정모드 - false 이면 읽기모드 - id가 유니크 하도록 보장 - 기존의 `todos.length + 1`은 삭제 후 추가를 반복하다면 - todo.id 의 고유성이 깨지는 경우가 있다. - 따로 변수(`todosLastId`)를 두어서 처리 - 이렇게 하면 기존의 버그가 해결됨 # 스텝 15-24 ## 스텝명 : 할 일 앱 구현, 진행률 표시 - 추가설명 : 01:43 : $derived 룬은 기반이 되는 상태변수나 파생변수의 값이 변경되면 자동으로 로직이 다시 실행 되기 때문에 편리하다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/cc8eb50) ## 핵심요약 - @ ## 순서 - 전체 할일 개수 표시 - 완료한 할일 개수 표시 - 진행률 표시 # 챕터 16 ## 챕터명 : `URL 단축 서비스`의 프론트엔드를 스벨트킷으로 구현 # 스텝 16-01 ## 스텝명 : 이번 챕터의 학습목표 소개 - 추가설명 : 00:17 : 앱을 예쁘게 꾸미는 작업은 백엔드와 프론트엔드의 연동을 공부하는데에는 방해가 될 수 있습니다. ## 순서 - 이번 챕터의 목표 : `URL 단축 서비스`를 구현할 수 있다. # 스텝 16-02 ## 스텝명 : 백엔드 통신용 타입스크립트 자동생성 - 추가설명 : 01:50 : `npx openapi-typescript` 명령어는 Node.js만 설치되어 있어도 사용할 수 있다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/7bdad3c) ## 핵심요약 - @ ## 순서 - Dev 클래스 추가 - initDev 빈 정의 - 오직 개발환경에서만 실행됨 - 해당 빈의 코드는 소스코드를 수정하거나 - 스프링 부트를 실행하거나 - 스프링 부트를 재실행 하면 자동으로 수행된다. - initDev 빈의 작동 - OPEN API에서 apiV1 문서를 JSON 형태로 읽어서 - 그것을 기반으로 타입스크립트를 만들어준다. - 해당 타입스크립트는 프론트엔드에서 백엔드로 요청하는 코드에서 사용될 예정이다. - 명령어를 쉘에서 실습 - `npx openapi-typescript http://localhost:8070/v3/api-docs/apiV1 -o ./front/src/lib/backend/apiV1/schema.d.ts` # 스텝 16-03 ## 스텝명 : 로그인 요청에 openapi-fetch 적용 - 추가설명 : 05:00 : OPEN API로 타입스크립트 생성 => openapi-fetch 라이브러리가 타입스크립트를 활용하여 Client 객체 생성 => 우리가 Client를 편하게 사용 ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/77ab8fc) ## 핵심요약 ### openapi-fetch 라이브러리 - [라이브러리 링크 - https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch) ## 순서 - 기존 fetch 요청의 불편함 확인 - openapi-fetch 라이브러리 추가 - [라이브러리 링크 - https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch) - `npm i openapi-fetch` - 일반 의존성으로 설치 - `npm i -D openapi-typescript typescript` - 개발 의존성으로 설치 - 기존 로그인 요청 fetch 코드에 openapi-fetch 적용 - 새 방식(openapi-fetch)의 좋은점 확인 - VS CODE가 실시간으로 코드의 오류 여부를 알려줌 # 스텝 16-04 ## 스텝명 : 로그아웃, 내 정보 요청에 openapi-fetch 적용 - 추가설명 : 04:30 : components 도 결국 스웨거에 의해서 생성됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/af1fbb3) ## 핵심요약 - @ ## 순서 - 로그인 후 goto를 통해서 메인페이지로 이동 - 로그아웃 요청에 openapi-fetch 적용 - 로그아웃 후에 goto를 통해서 메인페이지로 이동 - 내 정보에 요청에 openapi-fetch 적용 - 응답본문객체의속성과 MemberDto 타입스크립트 객체의 속성에 `undefined` 타입 가능성이 있어서 사용하기 불편함 - @NonNull 을 붙이면 되는데, @NonNull 이 없으면 if 문을 더 많이 써야 함 - 추후 개선할 예정 # 스텝 16-05 ## 스텝명 : 자바 DTO에 @NonNull 적용 - 추가설명 : 02:01 : @NonNull 을 붙이면 해당 변수가 타입스크립트화 될 때 타입에서 `| undefined`부분이 제거된다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/1d9a1f1) ## 핵심요약 - @ ## 순서 - 결국 통신을 위한 모든 타입스크립트는 스웨거에 의해서 생성됨 - 자바 DTO의 모든 필드에 @NonNull 적용 - @NonNull 이 없으면 if 문을 더 많이 써야 함 # 스텝 16-06 ## 스텝명 : 스벨트용 Rq 클래스 - 추가설명 : 01:45 : `svelte.ts` 라는 파일명으로 끝나는 이유는 추후 여기에 상태변수를 정의하고 공유할 예정이기 때문이다. - 추가설명 : 02:20 : rq 객체는 최초에 브라우저로 이 앱에 진입할 때 딱 1번만 생성된다. 일종의 싱글톤 객체라고 생각해도 된다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/8c5148f) ## 핵심요약 - @ ## 순서 - Rq 클래스 추가 - goto 기능 - Client 객체 공유 기능 - rq 객체 사용 # 스텝 16-07 ## 스텝명 : rq.member에 로그인 정보 저장 - 추가설명 : 00:50 : HTTP ONLY 쿠키는 자바스크립트(스벨트)에서 절대 접근할 수 없어서 따로 rq.member 를 따로 두어서 관리해야 한다. - 추가설명 : 02:35 : 파일 명이 `.svlte.ts` 로 끝나는 이유는 `$state`를 사용하기 위함이고, 회원객체의 구성요소는 전부 `상태변수`로 만들어야 한다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/edf7e6e) ## 핵심요약 - @ ## 순서 - Rq 클래스에 로그인한 회원정보 저장할 수 있도록 작업 - 로그인 후 rq.member 변수 로드 - 레이아웃의 메뉴에서 로그인 여부에 따라 분기 - 로그인 했을 때의 메뉴 : `로그아웃`, `내 정보` - 로그아웃 했을 때의 메뉴 : `로그인` - 웹 페이지 최초 로딩 후 rq.member 변수 로드 - `routes/+layout.svelte` 에서 수행 - rq.member 를 내 정보 페이지에서 사용 - 로그아웃 후 rq.member 변수 언로드 # 스텝 16-08 ## 스텝명 : 회원가입 - 추가설명 : 02:00 : 비밀번호 확인의 값은 비밀번호와 같은지 체크해야 합니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/d0bfcc0) ## 핵심요약 - @ ## 순서 - 회원가입 - 회원가입 후 로그인 페이지로 이동 - 레이아웃의 메뉴에서 로그인한 회원이름 노출 # 스텝 16-09 ## 스텝명 : SURL 리스트 - 추가설명 : 01:45 : surls 변수는 상태변수여야 합니다. 그래야 추후 해당 배열에서 요소가 삭제될 때 관련 뷰가 자동갱신 됩니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/84db414) ## 핵심요약 - @ ## 순서 - SURL 리스트 # 스텝 16-10 ## 스텝명 : SURL 등록 - 추가설명 : 04:50 : rq.replace 로 이동하면, 이후에 뒤로가기를 통해서 원래 페이지로 돌아갈 수 없습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/806ea61) ## 핵심요약 - @ ## 순서 - SURL 리스트 # 스텝 16-11 ## 스텝명 : SURL 삭제 - 추가설명 : 02:40 : confirm 함수는 사용자에게 `yes` or `no` 를 물어보고, 그것에 따라 `true` or `false`를 리턴하는 유용한 함수 입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/ed8a9c2) ## 핵심요약 - @ ## 순서 - SURL 삭제 # 스텝 16-12 ## 스텝명 : SURL 상세 페이지 - 추가설명 : 01:00 : URL `/surl/5` 와 같은 식의 URL로 하시려면 `/routes/surl/[id]/+page.svelte` 형태로 파일을 만들어야 합니다. - 추가설명 : 02:30 :URL `/surl/5` 에서 id 값 `5` 라는 값은 `$page.params.id` 로 접근해서 얻을 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/8ab3c5b) ## 핵심요약 - @ ## 순서 - SURL 상세 페이지 # 스텝 16-13 ## 스텝명 : SURL 수정 - 추가설명 : 06:36 : 강사 처럼 오류가 발생시키는 코드를 잘라내기 해서 다양한 실험을 해보는것은 좋은 테크닉 중 하나 입니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/caafd69) ## 핵심요약 - @ ## 순서 - SURL 수정 # 스텝 16-14 ## 스텝명 : 원본 URL로 이동 - 추가설명 : 00:50 : `hooks.server.ts` 파일은 스프링부트 필터의 스벨트킷 버전이라고 볼 수 있습니다. ## GIT - [GIT](https://github.com/jhs512/demo03-2024/commit/0993924) ## 핵심요약 - @ ## 순서 - 원본 URL로 이동 # 스텝 16-15 ## 스텝명 : vercel에 배포 - 추가설명 : 00:30 : vercel 은 프론트엔드 계의 fly.io 와 같습니다. 배포가 굉장히 쉬워집니다. 꼭 GITHUB 계정으로 가입해주세요. ## 핵심요약 - @ ## 순서 - verce 가입 - vercel에 자동 배포하도록 설정 - www.surl.oa.gg 도메인 연결 # 챕터 17 ## 챕터명 : 아웃트로 # 스텝 17-01 ## 스텝명 : 아웃트로 - 추가설명 : - ## 순서 - 특전에서 만나요. --- # SPECIAL # 특전 1 : 개발자용 블로그 플랫폼을 구현하고 서비스하는 전 과정 제공 - 특전강의는 추가영상(유튜브 영상)으로 제공됩니다. - 특전강의는 강사가 실무에서 사용하는 코드 수준을 보여드립니다. - 특전강의를 진행할 때는 설명이 거의 배재된 상태로, 빠르게 진행됩니다. - 백엔드는 스프링부트 REST API 로 개발 - 스벨트킷 2.x(TypeScript) 클라이언트 연동(최신 룬 문법 사용) - 회원기능(회원가입, 로그인, 로그아웃, 내 정보) 구현 - 개발자용 블로그 플랫폼에 OAUTH 2 기반 소셜 로그인 추가(카카오 로그인) - 글 리스트, 페이징 - 글 수정, 삭제, 권한체크 - 토스트 UI 에디터 연동하여 글의 편집기 구현 --- # INFO ## 과정명 : 실습으로 배우는 스프링부트 서비스 구현과 AWS CI/CD ## 학습목표 - 스프링부트로 서비스 구현을 할 수 있다.- 구현된 서비스를 AWS를 통해서 배포할 수 있다. - CI/CD를 구축할 수 있다. ## 활용 범위 - 백엔드 개발자 취업을 위한 역량을 갖출 수 있다. - 본인이 원하는 서비스를 직접 구현하고 운영할 수 있다. ## 기술 - GIT - Java 21 - Spring Boot 3.x - Spring Data JPA - Spring Web - 도커 - Database(H2, MySQL) - Fly.io - AWS VPC, EC2 - 테라폼 - GITHUB ACTION - CI/CD ## 개요 - 강의의 방향성과 목적성 - 여러분에게는 개발에 대한 '이해'가 아니라 '훈련'이 필요합니다. - 신입 개발자에게 필수가 아니라고 생각되는 부분을 과감하게 빼고 핵심만 전달해 드리겠습니다. - 이 강좌를 왜 수강해야 하는가 - 신입 개발자들이 배우는 대부분의 개념들은 개발에 대한 실질적인 '경험' 없이는 절대로 이해할 수 없습니다. - 저는 여러분에게 '이해'보다 먼저 '반본훈련'을 권해드립니다. - 강좌가 필요한 대상 - 신입 백엔드 개발자가 되고 싶은 분 - 본인의 서비스를 직접 개발하고 운영하고 싶은 분 - 강의의 흐름 - 강의영상에서는 이론을 최대한 배제한 실습위주의 내용으로 구성되어 있습니다. - 여러분은 해당 내용을 여러 번 따라 하면서 '반복훈련'을 진행하시게 됩니다. - 강의의 핵심내용 - 스프링부트 3.x 로 'URL 단축 서비스' 를 구현하고 응용하는 경험을 제공합니다. - 강의 커리큘럼 내용 - 워밍업으로 간단한 '할 일 관리 서비스'를 먼저 구현합니다. - 그 후 스프링부트로 'URL 단축 서비스' 를 구현합니다. - 해당 서비스를 fly.io 로 배포합니다. - 'URL 단축 서비스' 에 추가기능을 넣습니다. - 해당 서비스를 이번에는 AWS 로 옮겨서 배포합니다. - 강의를 듣기전 알아야 할 것 - 여러분이 자바의 클래스과 객체 사용에 대한 기본적인 지식(객체 생성, 생성자, 메서드 등)을 가지 있다고 가정합니다. - 강의에 활용되는 스킬 및 툴 - GIT - Java 21 - Spring Boot 3.x - Spring Data JPA - Spring Web - 도커 - Database(H2, MySQL) - Fly.io - AWS VPC, EC2 - 테라폼 - GITHUB ACTION - CI/CD - 추가영상에서 위에 언급한 내용들 보다 훨씬 더 많은 내용들을 다룹니다. - 수강생이 해야 할 것 / 갖춰야 할 자세 - 각 챕터의 강의영상들 보신 후 꼭 실습을 하셔야 합니다. - 챕터가 끝난 후 해당 챕터에서 만든 프로그램을 혼자힘으로 만들 수 있을 때 까지 반복해주세요. - 이해보다 먼저 개발과 코드에 익숙해지는게 중요합니다. - 강의 과제 및 템플릿 자료 / 산출물 설명 - 긴 주소를 짧게 줄여주는 `bitly.com` 같은 서비스를 구현합니다. - 예를들어 `https://techit.education/content/b35f6191e906482b8744161440436234` 와 같이 긴 URL 이 있다고 가정해봅시다. - 우리가 개발할 서비스로 위와같이 긴 URL 단축하여 사람이 쉽게 외우고 입력할 수 있는 `https://short.io/4423` 와 같은 짧은 URL로 바꿀 수 있습니다. - 이 강의의 차별점은? - 강의영상에는 이론을 최대한 배재한 실습 위주로 구성되어 있습니다. - 구현 뿐 아니라 AWS로 배포하는 내용도 배울 수 있습니다. - 강의의 강점은 무엇인가? - 실습위주의 강의이기 때문에 빠르게 재미있게 공부하실 수 있습니다. - 백엔드 개발에 핵심적인 내용만 엄선했습니다. - 강의가 왜 필요한가? - 여러 어려운 이론공부 때문에 지치신 분들에게 속시원한 강의가 될 수 있습니다. - 따라히시기 편한 방식으로 구성되어 있습니다. - 강의를 통해 얻어갈 수 있는 것은 무엇인가? - 스프링부트로 서비스 개발하는 방법 - 서비스를 배포하는 방법 - 강의의 효과는? - 속시원하고 빠르게 개발자에게 필요한 핵심역량을 키울 수 있습니다. - 반복을 통해서 백엔드의 핵심기술들에 익숙해지게 됩니다. - 강의를 듣고 활용할 수 있는 것들은 무엇인가? - 본인이 원하는 서비스를 만들고 배포할 수 있고 - 백엔드 개발자 취업에 필요한 역량을 기룰 수 있습니다.

스프링부트 강의 페이지 백업