# 관련링크 - [몰입코딩 - 인텔리제이 세팅 - slog.gg/p/13838](https://slog.gg/p/13838#f) # 1강 - [24 11 23, p 13852, 1강, 스프링부트 프로젝트 세팅](https://youtu.be/8fYXJBdw4QQ) - [스프링 이니셜라이저 - https://start.spring.io](https://start.spring.io) - ![img](https://i.imgur.com/ktoYuz3.png) # 2강 - [24 11 23, p 13852, 2강, 인텔리제이로 스프링 이니셜라이저에서 다운로드 받은 후 압축해제 후 특정 폴더에 위치시킨 프로젝트 폴더를 열기](https://youtu.be/0qaYhMg8BeQ) # 3강 - [24 11 23, p 13852, 3강, 인텔리제이에서 처음 프로젝트를 열고 해야하는 세팅 수행](https://youtu.be/Wmjn6Yl6u1k) - [몰입코딩 - 인텔리제이 세팅 - slog.gg/p/13838 - 3강](https://slog.gg/p/13838#3강) - [http://localhost:8070](http://localhost:8070) - ![img](https://i.imgur.com/wcPIKE8.png) # 4강 - [24 11 23, p 13852, 4강, 우리 프로젝트를 저장할 GIT 저장소(원격 리포지터리) 생성, 1부, 생성](https://youtu.be/llViA6E4L9g) - [24 11 23, p 13852, 4강, 우리 프로젝트를 저장할 GIT 저장소(원격 리포지터리) 생성, 2부, 삭제방법](https://youtu.be/aW0LguL2NAY) - [GITHUB 저장소 생성 - https://github.com/new](https://github.com/new) - ![img](https://i.imgur.com/YRxl7wE.png) - [강사의 GITHUB 저장소 - https://github.com/jhs512/2024-11-23-ch](https://github.com/jhs512/2024-11-23-ch) # 5강 - [24 11 23, p 13852, 5강, 우리 프로젝트에 GIT 로컬포지터리 생성](https://youtu.be/BflMG5OaLWo) ## 로컬 리포지터리 생성 ```bash git init ``` ## 로컬 리포지터리 생성 되었는지 확인 ```bash git branch ``` ## 로컬 리포지터리 생성 취소방법 ```bash rm -rf .git ``` # 6강 - [24 11 23, p 13852, 6강, 로컬 리포지터리에게 원격 리포지터리의 주소를 등록, 주소별칭은 origin 으로](https://youtu.be/-UY5BgbAY5U) ## 외부 저장소와의 연결 확인 ```bash git remote -v ``` ## 외부 저장소와 연결(별칭 origin) ```bash git remote add origin https://github.com/jhs512/2024-11-23-ch ``` ## 외부 저장소 삭제 방법 ```bash git remote add origin https://github.com/jhs512/2024-11-23-ch ``` # 7강 - [24 11 23, p 13852, 7강, 마지막 커밋과 비교해서 변경된 파일들 중 커밋할 파일을 스테이지 영역(일종의 장바구니)에 담기](https://youtu.be/6J8olmqkbUM) - GIT에서 인덱스 영역, 스테이지 영역은 같은 말이다. ## ADD 전/후 상태 확인 명령어 ```bash git status ## 마지막 커밋과 비교해서 변경된 파일들 중 커밋할 파일을 스테이지 영역(일종의 장바구니)에 담기 ```bash git add . ``` ## GIT ADD 취소방법 ```bash git restore --staged . ``` # 8강 - [24 11 23, p 13852, 8강, 스테이지 영역(장바구니)에 담긴 파일들을 커밋(일종의 세이브)](https://youtu.be/n4rL7FgDPEY) ## 커밋 전/후 상태 확인 명령어 1 ```bash git status ``` ## 커밋 전/후 상태 확인 명령어 2 ```bash git log --oneline ``` ## 스테이지 영역(장바구니)에 담긴 파일들을 커밋(일종의 세이브) - `커밋 메세지` : 이 부분은 추후 협업자들을 위해서 간략하게라도 이번 작업내용에 대한 설명을 써주는 게 좋음 ```bash git commit -m "커밋 메세지" ``` ## GIT COMMIT 취소방법 ```bash git reset HEAD^ ``` # 9강 - [24 11 23, p 13852, 9강, 로컬 저장소의 커밋들을 서버로 업로드(PUSH)](https://youtu.be/vA9UEW9XBOI) - [커밋 목록](https://github.com/jhs512/2024-11-23-ch/commits) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/daf3977) ## 로컬 저장소에는 있고 원격 저장소에는 없는 커밋들을 업로드(푸시) ```bash git push origin main ``` # 10강 - [24 11 23, p 13852, 10강, ApiV1ChatRoomController 컨트롤러 추가](https://youtu.be/KmeuBsWesSs) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/8c727c1) - [http://localhost:8070/api/v1/chat/rooms](http://localhost:8070/api/v1/chat/rooms) - ![img](https://i.imgur.com/QHaQ6g5.png) ## GIT ADD && GIT COMMIT && GIT PUSH 한방 명령어 ```bash git add . && git commit -m "message" && git push origin main ``` # 11강 - [24 11 23, p 13852, 11강, List 리턴하도록 변경, 크롬 익스텐션 - JSON VIWER 설치](https://youtu.be/6yvIHExycUI) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/4c9b899) - [크롬 익스텐션 - JSON VIWER](https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) - 브라우저에서 JSON 을 예쁘게 보여줍니다. - [http://localhost:8070/api/v1/chat/rooms](http://localhost:8070/api/v1/chat/rooms) - ![img](https://i.imgur.com/KJBsizq.png) # 12강 - [24 11 23, p 13852, 12강, ChatRoom 엔티티 추가, 샘플 데이터 생성](https://youtu.be/yuQ7Lg1SWos) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/c3b4f42) - [http://localhost:8070/api/v1/chat/rooms](http://localhost:8070/api/v1/chat/rooms) - ![img](https://i.imgur.com/itooIem.png) # 13강 - [24 11 23, p 13852, 13강, 단건 조회](https://youtu.be/6J17BQZG-jg) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/205906e) - [http://localhost:8070/api/v1/chat/rooms/1](http://localhost:8070/api/v1/chat/rooms/1) - ![img](https://i.imgur.com/eAEwny2.png) # 14강 - [24 11 23, p 13852, 14강, 코드펜 가입 및 세팅](https://youtu.be/WvF23LMX4FI) - [코드펜 - https://codepen.io](https://codepen.io) - [코드펜 - 새 문서- https://codepen.io/pen](https://codepen.io/pen) ## 코드펜 세팅 - 에디터 - [코드펜 - 세팅 - 에디터 - https://codepen.io/settings/editor](https://codepen.io/settings/editor) - ![img](https://i.imgur.com/snIzWku.png) - ![img](https://i.imgur.com/BKyJRGm.png) - ![img](https://i.imgur.com/XwK9sDq.png) ## 코드펜 문서 - 레이아웃 - [코드펜 - 새 문서- https://codepen.io/pen](https://codepen.io/pen) - ![img](https://i.imgur.com/ypLMyGE.png) # 14강 - [24 11 23, p 13852, 14강, CODEPEN에서 fetch 하여 다건조회](https://youtu.be/VKaIBthaOlw) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/6183b67) - [CODEPEN](https://codepen.io/jangka44/pen/bGXXjax?editors=0012) ## 채팅방 리스트 페이지 ### JS ```js console.clear(); fetch("http://localhost:8070/api/v1/chat/rooms") .then((response) => response.json()) .then(console.log); ``` # 15강 - [24 11 23, p 13852, 15강, fetch 로 받아온 채팅방들을 ul, li로 렌더링](https://youtu.be/_FdYfvA4ZS0) - [CODEPEN](https://codepen.io/jangka44/pen/KKOOBRY?editors=0010) ## 채팅방 리스트 페이지 ### HTML ```html

채팅방 목록

``` ### JS ```js console.clear(); function loadChatRoomList() { fetch("http://localhost:8070/api/v1/chat/rooms") .then((response) => response.json()) .then((data) => { const ulElement = document.querySelector("#chat-room-list"); // ul 요소 선택 ulElement.innerHTML = ""; // 기존 리스트 초기화 data.forEach((room) => { const liElement = document.createElement("li"); // li 요소 생성 const createDate = room.createDate .substring(2, 16) .replaceAll("-", ".") .replace("T", " "); liElement.textContent = `${room.id}번방 / ${createDate} / ${room.name}`; // 텍스트 내용 설정 ulElement.appendChild(liElement); // ul에 li 추가 }); }) .catch((error) => { console.error("Error fetching chat rooms:", error); }); } loadChatRoomList(); ``` # 16강 - [24 11 23, p 13852, 16강, 리액트로 훨씬 더 쉽고 깔끔하고 유지보수하기 쉬운 코드로 변경](https://youtu.be/rMx06QL9uy4) - [CODEPEN - 리액트용 시작 - https://go9.co/XPG](https://go9.co/XPG) - [CODEPEN - 1 단계](https://codepen.io/jangka44/pen/qBeeywm?editors=0010) - [CODEPEN - 2 단계](https://codepen.io/jangka44/pen/rNXXrge?editors=0010) - [CODEPEN - 3 단계](https://codepen.io/jangka44/pen/dyxxjEZ?editors=0010) - [CODEPEN - 4 단계](https://codepen.io/jangka44/pen/NWQQBVm?editors=0010) - [CODEPEN - 5 단계](https://codepen.io/jangka44/pen/wvVVxLN?editors=0010) - [CODEPEN - 6 단계](https://codepen.io/jangka44/pen/WNVVKqB?editors=0010) - [CODEPEN - 7 단계](https://codepen.io/jangka44/pen/zYggLgK?editors=0010) ## 채팅방 리스트 페이지 ### HTML ```html

``` ### JS ```js console.clear(); import React, { useState, useEffect } from "https://esm.sh/react@rc?dev"; import ReactDOMClient from "https://esm.sh/react-dom@rc/client/?dev"; const rootElement = ReactDOMClient.createRoot(document.getElementById("root")); function App() { const [chatRooms, setChatRooms] = useState([]); useEffect(() => { fetch("http://localhost:8070/api/v1/chat/rooms") .then((response) => response.json()) .then(setChatRooms); }, []); return ( <>

채팅방 목록

{chatRoom.id} / {createDate} / {chatRoom.name}

); } rootElement.render(); ``` # 17강 - [24 11 24, p 13852, 17강, 새로운 곳에서 작업을 이어가는 방법](https://youtu.be/_4rU1Wa1K84) - [몰입코딩 - 인텔리제이 세팅 - slog.gg/p/13838 - 3강](https://slog.gg/p/13838#3강) - [http://localhost:8070/api/v1/chat/rooms](http://localhost:8070/api/v1/chat/rooms) - ![img](https://i.imgur.com/VlfYLs5.png) # 18강 - [24 11 24, p 13852, 18강, 채팅방 페이지 구현, 일단 채팅방 정보부터 출력](https://youtu.be/o3LMiZw9DUQ) - [CODEPEN - 리액트용 시작 - https://go9.co/XPG](https://go9.co/XPG) - [CODEPEN - 1 단계](https://codepen.io/jangka44/pen/vYoooGr?editors=0010) - [CODEPEN - 2 단계](https://codepen.io/jangka44/pen/OJKKKNd?editors=0010) - [CODEPEN - 3 단계](https://codepen.io/jangka44/pen/oNKKKLp?editors=0010) - [CODEPEN - 4 단계](https://codepen.io/jangka44/pen/BaXXXzb?editors=0010) ## 채팅방 페이지 ### HTML ```html

``` ### JS ```js console.clear(); import React, { useState, useEffect } from "https://esm.sh/react@rc?dev"; import ReactDOMClient from "https://esm.sh/react-dom@rc/client/?dev"; const rootElement = ReactDOMClient.createRoot(document.getElementById("root")); function App() { const [chatRoom, setChatRoom] = useState(); useEffect(() => { fetch("http://localhost:8070/api/v1/chat/rooms/1") .then((response) => response.json()) .then(setChatRoom); }, []); if (!chatRoom) return <>로딩중...; const createDate = chatRoom.createDate .substring(2, 16) .replaceAll("-", ".") .replace("T", " "); return ( <>

No {chatRoom.id} : {chatRoom.name}

개설날짜 : {createDate}

); } rootElement.render(); ``` # 19강 - [24 11 24, p 13852, 19강, 폼의 여러가지 사용법](https://youtu.be/xZHWX27W96o) - [CODEPEN](https://codepen.io/jangka44/pen/WNVVVje?editors=1010) # 20강 - [24 11 24, p 13852, 20강, 채팅 메세지들을 보여주기 위한 연습으로 할일 리스트 앱 구현](https://youtu.be/70D6CwREKqg) - [CODEPEN - 리액트용 시작 - https://go9.co/XPG](https://go9.co/XPG) - [CODEPEN - 1 단계](https://codepen.io/jangka44/pen/QWeeeMw?editors=0010) - [CODEPEN - 2 단계](https://codepen.io/jangka44/pen/JjgggyO?editors=0010) - [CODEPEN - 3 단계](https://codepen.io/jangka44/pen/OJKKKjG?editors=0010) - [CODEPEN - 4 단계](https://codepen.io/jangka44/pen/poMMMWg?editors=0010) - [CODEPEN - 5 단계](https://codepen.io/jangka44/pen/dyxxxVK?editors=0010) - [CODEPEN - 6 단계](https://codepen.io/jangka44/pen/jOgggab?editors=0010) # 21강 - [24 11 24, p 13852, 21강, 채팅방 생성 API 구현](https://youtu.be/BqAZFANAKzo) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/767b226) - [CODEPEN](https://codepen.io/jangka44/pen/qBeeexo?editors=0012) ## 채팅방 생성 페이지 ### JS ```js console.clear(); // GET http://localhost:8070/api/v1/chat/rooms : 조회 // GET은 기본 메서드라서 생략해도 됩니다. fetch("http://localhost:8070/api/v1/chat/rooms") .then((response) => response.json()) .then((data) => { console.log("GET(조회) 성공"); console.log(data); }); // POST http://localhost:8070/api/v1/chat/rooms : 등록 // POST는 기본 메서드가 아니라서 생략하면 안됩니다. // 등록이기 때문에 body에 등록될 새 채팅방 정보를 포함시켜야 합니다. // "Content-Type": "application/json" 은 body 의 형태, 이걸 스프링부트에 알려줘야 스프링부트가 해당 데이터를 제대로 이해할 수 있음 fetch("http://localhost:8070/api/v1/chat/rooms", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "새 채팅방" }) }) .then((response) => response.json()) .then((data) => { console.log("POST(생성/추가) 성공"); console.log(data); }); ``` # 22강 - [24 11 24, p 13852, 22강, 등록되는 채팅방들을 목록에서 실시간으로 확인](https://youtu.be/OLM6_cv3hMg) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/bbb70e4) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/jOgggab?editors=0010) - [CODEPEN - 1 단계](https://codepen.io/jangka44/pen/NPKKKKN?editors=0010) - [CODEPEN - 2 단계](https://codepen.io/jangka44/pen/ogvvvvJ?editors=0010) - [CODEPEN - 3 단계](https://codepen.io/jangka44/pen/MYgggKE?editors=0010) # 23강 - [24 11 24, p 13852, 23강, 기존 채팅방들을 보여줄 때 순서반전](https://youtu.be/FcpnWcHx8qQ) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/db14702) - [CODEPEN - 4 단계](https://codepen.io/jangka44/pen/EaYYYxL?editors=0010) # 24강 - [24 11 24, p 13852, 24강, 특정 채팅방의 채팅 메세지들 보여주도록](https://youtu.be/FMJHFbMMEUY) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/0f688c4) - [http://localhost:8070/api/v1/chat/rooms/1/messages](http://localhost:8070/api/v1/chat/rooms/1/messages) - ![img](https://i.imgur.com/qvZ8KPI.png) # 25강 - [24 11 24, p 13852, 25강, 채팅방에서 본인이 작성한 채팅메세지를 실시간으로 볼 수 있도록 구현](https://youtu.be/agK-ynQOQ04) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/323b828) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/BaXXXzb?editors=0010) - [CODEPEN - 1 단계](https://codepen.io/jangka44/pen/EaYYYmd?editors=0010) - [CODEPEN - 2 단계](https://codepen.io/jangka44/pen/xbKKKrm?editors=0010) - [CODEPEN - 3 단계](https://codepen.io/jangka44/pen/xbKKKrm?editors=0010) - [CODEPEN - 4 단계](https://codepen.io/jangka44/pen/dPbbbVx?editors=0010) # 26강 - [24 11 24, p 13852, 26강, 폴링방식(주기적인 fetch) 설명, 폴링방식보다 조금 더 개선된 방식으로 웹소켓 방식이 있습니다.](https://youtu.be/4mbt_kIYzy4) # 26강 - [24 11 24, p 13852, 26강, 특정 채팅 메시지 이후에 작성된 것들로만 필터링해서 조회하는 기능 구현](https://youtu.be/c5nW5zqoV3s) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/90516be) - [http://localhost:8070/api/v1/chat/rooms/1/messages?afterChatMessageId=1](http://localhost:8070/api/v1/chat/rooms/1/messages?afterChatMessageId=1) - ![img](https://i.imgur.com/AXKXviL.png) # 27강 - [24 11 24, p 13852, 27강, 채티방과 관계없이 모든 채팅 메세지가 고유한 번호(id)를 가지도록](https://youtu.be/9hkB5btHnbo) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/96a7a2a) # 28강 - [24 11 24, p 13852, 28강, 채팅 완성](https://youtu.be/mzzsdF1x0HM) - [커밋](https://github.com/jhs512/2024-11-23-ch/commit/96a7a2a) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/dPbbbVx?editors=0010) - [CODEPEN - 1 단계](https://codepen.io/jangka44/pen/MYgggdq?editors=0010) - [CODEPEN - 2 단계](https://codepen.io/jangka44/pen/JoPPPgP?editors=0010) - [CODEPEN - 3 단계](https://codepen.io/jangka44/pen/KwPPPOe?editors=0010)

채팅방구현으로 배우는 스프링부트