ID: test5
PW: 11111
 |
 |
 |
 |
 |
|
| 서지수 | 김지민 | 박준규 | 어준혁 | 윤지영 | 구영표 멘토님 |
- main: 배포용 브랜치
- develop : 개발용 브랜치
- TALK 개별 개발용 브랜치
✅ useState, useReducer를 활용한 상태 관리 구현
✅ Sass 또는 styled-component를 활용한 스타일 구현
✅ react 상태를 통한 CRUD 구현
✅ 상태에 따라 달라지는 스타일 구현
✅ custom hook을 통한 비동기 처리 구현
✅ 유저인증 시스템(로그인, 회원가입) 구현
✅ jwt등의 유저 인증 시스템 (로그인, 회원가입 기능)
✅ 소켓을 이용한 채팅 구현
✅ Next.js를 활용한 서버 사이드 렌더링 구현
✅ typescript를 활용한 앱 구현
| Feat | 새로운 기능 추가 |
|---|---|
| Design | CSS 등 사용자 UI 디자인 변경 |
| Fix | 버그 수정 |
| Docs | 문서 수정 |
| Style | 코드 포맷팅, 세미콜론 누락 |
| Refactor | 코드 리팩토링 |
| Test | 테스트 코드, 리팩토링 테스트코드 추가 |
| Chore | 빌드 업무 수정, 패키지 매니저 수정 |
| Comment | 필요한 주석 추가 및 변경 |
| Rename | 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우 |
| Remove | 파일을 삭제하는 작업만 수행한 경우 |
📦Talkhaja
┣ 📂@types
┃ ┣ 📜types.ts
┃ ┗ 📜user.ts
┣ 📂apis
┃ ┣ 📜Auth.ts
┃ ┣ ...
┃ ┗ 📜userListAPI.ts
┣ 📂components
┃ ┣ 📂Chat
┃ ┃ ┣ 📂ChatLoading
┃ ┃ ┃ ┣ 📜ChatLoading.module.scss
┃ ┃ ┃ ┗ 📜ChatLoading.tsx
┃ ┃ ┣ ...
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂Common
┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┣ 📜Header.module.scss
┃ ┃ ┃ ┗ 📜Header.tsx
┃ ┃ ┣ ...
┃ ┃ ┗ 📜index.ts
┣ 📂constants
┃ ┗ 📜userLoinState.ts
┣ 📂hooks
┃ ┣ 📜useConnectServerSocket.tsx
┃ ┗ 📜useOnClickOustside.tsx
┣ 📂pages
┃ ┣ 📂chat
┃ ┃ ┗ 📜[chatId].tsx
┃ ┣ 📂chat-list
┃ ┃ ┣ 📜all.tsx
┃ ┃ ┗ 📜my.tsx
┃ ┣ 📜_app.tsx
┃ ┣ 📜_document.tsx
┃ ┣ 📜index.tsx
┃ ┣ 📜login.tsx
┃ ┣ 📜mypage.tsx
┃ ┗ 📜signup.tsx
┣ 📂public
┃ ┣ 📂fonts
┃ ┃ ┣ 📜NotoSansKR-Bold.ttf
┃ ┃ ┣ ...
┃ ┃ ┗ 📜fonts.css
┃ ┣ 📂images
┃ ┃ ┣ 📜Spin-1s-200px.gif
┃ ┃ ┣ 📜Talkhaja.svg
┃ ┃ ┗ 📜logo.png
┃ ┣ 📜favicon.ico
┃ ┣ 📜next.svg
┃ ┗ 📜vercel.svg
┣ 📂stores
┃ ┗ 📂atoms
┃ ┃ ┣ 📜nav.atoms.ts
┃ ┃ ┣ 📜user.atoms.ts
┃ ┃ ┗ 📜userTokenState.ts
┣ 📂styles
┃ ┣ 📜_mixin.scss
┃ ┣ 📜_variables.scss
┃ ┣ 📜fonts.scss
┃ ┣ 📜index.scss
┃ ┗ 📜normalize.scss
┣ 📂utils
┃ ┣ 📜authorizeFetch.ts
┃ ┣ ...
┃ ┗ 📜tokenManager.ts
┣ 📜.env
┣ 📜.eslintrc.json
┣ 📜.gitignore
┣ 📜.prettierrc
┣ 📜README.md
┣ 📜next-env.d.ts
┣ 📜next.config.js
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜tsconfig.json
서지수
- 팀장
- 채팅방 목록 조회 및 숙소, 유저와의 채팅 구분
- 채팅방 참여 기능
- 소켓 연결을 통한 새로 생성된 채팅방 실시간 조회
팀장을 맡게되면서 많은 부담과 걱정이 있었다. 하지만 이번 프로젝트의 팀장 경험은 나에게 많은 의미가 있었다. 실력 부족, 일정 관리, 역할 분배 등의 걱정이 있었는데 실력 부족은 프로젝트를 진행하면서 공부, 팀원들과의 공유를 통해서 극복할 수 있었고 일정 관리, 역할 분배는 노션, 지라등의 협업 툴을 이용해 팀원들의 작업 상황, 남은 작업 파악, 각자의 진행 상황에 따른 잔업 분배 등을 효율적으로 할 수 있었고 다음 프로젝트에서도 팀원으로서 팀장 및 다른 팀원에게 나의 상황 공유을 잘 해야겠다고 생각했다.
저번 프로젝트에서 가상화폐 데이터 소켓 연결 경험이 있어서 이번 채팅 소켓 연결과 수월할 것이라고 생각했는데 소켓 연결 후 일방적으로 데이터를 받기만 했던 전 작업과는 다르게 채팅 소켓 연결은 쌍방 소통이 필요한 작업이라 차이가 있었다. 소켓 연결 후에 입/퇴장, 메세지 수신/발신 등의 작업이 있어서 다른 방식의 소켓 연결 작업도 경험할 수 있었다. 또한, API의 에러 처리 및 에러 코드가 상세하게 구분되어있지 않아서 팀원들과 함께 개발자 도구의 네트워크 탭을 분석할 일이 많았는데 이 경험을 통해서 앞으로 백엑드에 무작정 '안돼요...'하기 보다는 네트워크 탭을 분석해서 원인을 찾는 방법을 알게 되었다. 이번 프로젝트을 통해서 이전에 Next 경험이 있었지만 작업에서 단순 Next의 문법만 따랐을 뿐이지 Next의 기능은 전혀 사용하지 않았다는 것을 알게되었고 앞으로 SSR에 대해서 공부해야겠다고 생각했다.
마지막으로 팀원 한분한분에 대해서 회고 및 감사를 적었지만 리드미가 날라가는 바람에... 따로 전달하기로 하고 여기서는 팀원 모두에게 감사을 전합니다^^
김지민
| 소켓 연결, 채팅 보내기, 채팅 받기 이전 채팅 가져오기 | 채팅 나가기 |
|---|---|
| 처음 채팅방에 들어오면 이전 대화 목록들을 모두 받습니다. 소켓 연결로 실시간 채팅이 가능합니다 | 채탱방 나가기 버튼을 누르면 해당 방에서 나가지고 목록으로 돌아갑니다 |
| 헤더 | 채팅방 목록 |
|---|---|
| 스크롤 위치에 따라 헤더의 크기가 달라지게 구현하였습니다. | 전체적인 채팅방목록을 디자인하고 목록을 호버하면 해당 채팅방의 배경색을 바꿔주었습니다. 또한 채팅 더하기 버튼을 누르면 모달창이 뜨도록 하였습니다. 모달창에서는 채팅 제목을 15자 이상으로 제한하였습니다. |
Duplicate atom key "userIdState". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.
분명 atom은 하나인데 자꾸 이런 오류가 떴습니다. 찾아보니 Next.js에서 build를 하면 atom을 저장해두는데 이것 때문에 두개로 중복된다고 Next.js에서 판단한다는 유명한 오류였습니다.;;
RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false; .App.js 파일 상단에 추가하니 오류가 사라졌습니다!
--
socket을 두번씩 생성되는 오류가 있었습니다. 이 때문에 소켓 connect가 제대로 이루어지지 않았습니다.
next.config.js 파일에서 reactStrictMode: false 를 해주었습니다. react에서는 reactStrictMode: true이면 render가 강제적으로 두번씩 된다고 합니다! 또한 무한 소켓 연결을 막기 위해 useMemo를 사용하여 소켓을 생성해주었습니다
--
socke을 connect 했음에도 불구하고 fetch-messages가 서버로 전송되지 않는 에러
setTimeout을 사용해 소켓에 요청이 들어갈때까지 요청을 보냈습니다.
--
채팅방에서 text를 작성해 onChange 이벤트가 발생하면 상관없는 userId API를 호출하는 오류
userId API를 useEffect로 감싸서 의존성 배열에 chatId로만 변경하였습니다.
--
Image is missing required "src" property:
소켓에서 받아오는 대화정보는 userId만 받아와서 해당 userID의 정보를 API요청으로 받아줄때 유저 이미지를 useState('')값으로 초기화를 했더니 발생한 오류였읍니다. src 에userImage의 경로가 들어가긴 하지만 Nextjs에서 제공하는 Image태그는 src값을 절대 빈값으로 받지않아 발생는 오류였습니다. 따라서 response로 받아오는 이미지 url값이 있을때만 해당 Image 태그를 반환하게 수정하였더니 해결되었습니다
react에서 소켓 연결은 처음이라 정말 많은 우여곡절이 있었다.:sweat_drops: 소켓 연결 시도하면서 너무 막막했지만 팀원들 덕분에 다같이 해결할 수 있었다 + 멘토님 :fire::fire:
진짜 채팅 기능 구현 못할 것 같았는데 해냈다..도와주신 팀원분들 모두 감사합니다!:+1::+1:
scss를 처음 사용해보았는데 생각보다 편리해서 좋았다 css를 상속할 수 있다는게 진짜 편리한 것 같다.
axios를 사용해서 API 연결했는데 처음에는 에러 코드가 너무 세분화 되어있지 않아서 불편했는데 덕분에 네트워크 탭을 마스터 한 것 같아서 뿌듯하다..이제는 어떠한 네트워크 오류가 발생해도 해결할 수 있을 듯한 느낌:+1:
어찌보면 간단한 기능을 구현하는 거라고 생각했는데 생각보다 시간이 걸렸고 꽤나 어려움을 느꼈다.. 그리고 이번에도 Next.js를 제대로 활용하지 못한 느낌이라 아쉬웠다..
소켓 연결에 시간을 많이 뺏겨 SSR을 제대로 공부하고 사용할 시간적 여유가 없었어서 아쉬웠다..!
그래도 협업하는 법을 다시 한 번 알게되었고 또, 처음으로 zira를 사용해볼 수 있어서 좋았다!
하지만 아무래도 공통 컴포넌트를 개인적으로 작업하는 건 한계가 있는 것 같아서 다음 프로젝트에서는 꼭 storybook을 사용해 봐야겠다!
박준규
- 채팅방 UI 구성 및 컴포넌트 퍼블리싱
- 채팅방 유저 출입 알림기능 구현
- 실시간 채팅참여 인원 조회기능 Dropdown Menu 구현
| 채팅방 입장 시 알림 메세지 | 채팅방 퇴장 시 알림 메세지 |
|---|---|
| 채팅 참여 인원 발생시 Dropdown Menu | 채팅이탈 인원 발생시 Dropdown Menu |
|---|---|
- 입, 퇴장 메세지 기능을 구현하는 중 다른사람이 퇴장했는데도 계속해서 똑같은 사람의 이름이 표시되는 오류가 발생했었다.
socket.on('join', (messageObject: JoinersData) => {
console.log(messageObject, '채팅방 입장');
setJoiners(prevJoiners => [...prevJoiners, ...messageObject.joiners]);
});
socket.on('leave', (messageObject: LeaverData) => {
console.log(messageObject, '채팅방 퇴장');
setLeavers(prevLeavers => [...prevLeavers, messageObject.leaver]);
});위와 같이 소켓을 통해 받아온 데이터였는데, 초반에 Join을 통해 받아오는 데이터는 leave의 데이터들과 달리 api에 불필요한 더미 데이터들이 같이 전송되어 필요한 부분만 추출하여 사용함에 있어서 애를 먹기도 했었지만 데이터는 성공적으로 받아 왔는데, 원인을 알고나니 스스로 기본기가 정말 많이 부족함을 느꼈다..
useEffect(() => {
if (enterName) {
setShowEntryNotice(true);
const entryTimer = setTimeout(() => {
setShowEntryNotice(false);
setEnterName(''); // 이부분..
}, 3000);
return () => clearTimeout(entryTimer);
}
}, [enterName]);
useEffect(() => {
if (exitName) {
setShowExitNotice(true);
const exitTimer = setTimeout(() => {
setShowExitNotice(false);
setExitName(''); // 이부분..
}, 3000);
return () => clearTimeout(exitTimer);
}
}, [exitName]);useState를 사용함에 있어서 사용이 끝난 직후 state값을 초기화 해주는 작업을 제외하고 작업을 진행하다 보니, 예상과는 다른 값들이 도출되어 문제가 발생했던 것이다. 이후 값을 초기화해주는 코드를 넣고 작업을 진행했는데, 다행히 정상동작함을 확인할 수 있었다.
이 이후에도 채팅방에서 특정 유저를 조회하여 해당 유저의 사진정보와 이름 등을 받아오는데 원인모를 문제때문에 6시간이 넘도록 앉아있기도 했었는데, 결국은 api를 요청하는 주소의 오타때문인 것을 알고 난 뒤에는 정말이지 그렇게 허무할 수 없었다..ㅠㅠ
다행히 그렇게 큰 이슈는 아니었지만,
console.log를 찍어서 잘 보내고 잘 받아오는지 확인하기,
외부 데이터를 사용할때는 오타가 있는지 확인하기 등 개발을 함에 있어서 항상 내가 올바르게 하고 있는지 수시로 확인 할 필요가 있음을 뼈저리게 느끼게 되었다.
이번 기간동안 가급적 많은 도전과 시도를 통해서 많은 공부를 해야했던 좋은 기회였음에도 불구하고, 그러지 못했음에 다소 아쉬움이 남았다.
2주라는 짧은 기간에 Next.js나 recoil(이번 프로젝트때 한번도 사용해보진 못했지만..) socket 등의 기술들을 가지고 결과물을 만들어내는것이 쉬운 일도 아니었을 뿐더러, 특히 우리조의 API-key에 이슈가 있어 개발도중 난항을 겪기도 했었지만 부단하게 노력하며 밤을 지새우면서까지 나를 가르쳐준 우리 조장과 팀원들 덕에 결국 프로젝트를 마무리할 수 있게 되었다.
사실 이번 프로젝트 기간동안 약간의 슬럼프가 찾아오기도 했었다.
'지금까지 달려왔는데도 실력도 크게 늘지않고, 도통 어떻게 해야할지 잘 모르겠다'는 생각도 자주 들었었고,
'이런 간단한 것 조차도 구현하는데 있어서 많은 시간이 걸리는걸 보니, 나는 사실 개발에 재능이 없을지도 모르겠다'
는 생각도 들고, '미니 프로젝트를 진행하기 이전에 개발자를 포기해야하나' 라고 혼자 고민을 하기도 했었다.
하지만 구현한 기능이 아무리 적더라도 성공적으로 구현하는데 목표를 두고 도전해보라며 격려해주시던 유영매니저님과 팀원들, 그리고 스터디그룹원들의 응원 덕분에 다시금 키보드를 잡고 오랜만에 꺼져가던 열정에 다시 숨을 불어넣었고, 목표했던 기능들의 구현을 성공적으로 마칠 수 있었다.
어찌보면 항상 강의장에서 다른 수강생들과 함께 머리를 맞대며 공부를 이어나가는 수강생들과는 달리 4개월이 넘는 시간동안 어두컴컴한 방에 틀어박혀 작은 글씨들을 보고 있으니 몸과 마음이 지칠만도 하다. 게다가 새로운 기술을 배우는데 있어 남들보다 조금 더 천천히 내가 원하는대로 뜯어보며 배워가는 타입이다 보니, 빠르게 성장하는 다른 팀원들의 모습에 자존심도 상하고, 조바심이 나기도 했었다.
하지만 이번 프로젝트를 말미암아 내 스스로 어떤 공부를 해야하는지, 현재 내가 어떤 상황에 놓였는지에 대해서 조금 더 진지하게 생각할 수 있었던 계기가 된 것 같다. 지금 당장은 가파른 성장을 이루지 못하더라도, 언젠간 깊은 뿌리를 내려 큰 결실을 맺을 수 있는 거목같은 개발자가 되리라고 스스로 다짐해본다.
어준혁
- 로그인
- 회원가입
- 마이페이지
- 리다이렉트
- JWT 토큰과 쿠키를 이용한 토큰 관리(next-cookie)
- 사진등록(firebase storage)
- 입력값 유효성 검사(useForm)
- 유저 사진, 이름 변경
- 로그아웃
프로젝트를 진행할 때 항상 리액트를 사용했었다. 그래서 팀에서 넥스트를 사용한다고 하였을 때 조금은 겁이 났다. 토이 프로젝트가 끝나고 한달이나 시간이 있었는데 공부를 안한 내 자신이 후회스러웠다. 프로젝트가 시작되고 공부를 하면서 구현을 하기 시작했다. 하지만 CSR에 익숙했던 나는 넥스트의 장점을 전혀 살리지 못한 코드를 작성하고 있었다. 그래서 시간이 걸리더라도 SSR기반의 코드를 짜보자고 다짐하여 getServerSideProps를 사용하면서 넥스트에 재미가 붙기 시작했다. 또 팀원들과 패스트캠퍼스 강의장에서 다같이 작업하다보니 시너지 효과가 발휘되어 개발에만 전념할 수 있었다. 이 프로젝트를 진행하고 새로운 기술에 대한 호기심이 더욱 더 생겼고 개발이 더 재밌어졌다. 이런 마음을 오랫동안 유지하고싶다.
윤지영
| 해시태그를 통한 스크롤 이동 | 검색을 통한 데이터 필터링 |
|---|---|
| 채팅목록 시간 포맷팅 | 숙소 정보 상세보기 모달 |
|---|---|
- 데이터를 지역별로 필터링 하여 사용자에게 노출
- 스크롤 시 상단 고정되는 해시태그를 통해 원하는 지역으로 스크롤 이동
- 키워드 검색 결과를 지역별로 노출 (숙소데이터 관련 모든 키워드)
- 검색결과 유/무, 검색어 유/무에 따른 페이지/ 컴포넌트 렌더링
제공된 api만으로는 숙박업체 유저와 일반 사용자 유저를 구분하기가 쉽지 않았는데 다행히 프로젝트 시작 후 금방 진행된 멘토님의 조언 덕분에 덜 헤매고 수월하게 작업 할 수 있었다!! 하지만 프로젝트 종료일 직전 효율적인 코드를 위해 데이터를 읽고 쓰는 방식을 변경하기로 하면서 그에 따른 코드변화가 도미노처럼 줄줄이 이어졌다. 사실 하나하나씩 차근차근 보면 별 거 아닌 것 같은데 금방 끝날 것 같던 작업이 끝나지 않으니 마음이 점점 더 조급해져 갔다. 처음부터 충분히 고민해보고 잘 설계 후에 작업 했다면 훨씬 여유롭게 프로젝트를 마칠 수 있었을 것 같아 아쉽다. 매 작업 시 느끼는 어려운 점이 설계 단계인 것 같다. 직접 코드를 짜기 전까지는 가늠이 안된다..작업 시간도 구조 설계도...더 많이 배우고 경험해봐야 할 것 같다!
급변하는 프론트엔드 세계에서 항상 새로운 라이브러리와 새로운 프레임워크들을 익혀야 한다는 점이 항상 마음의 짐처럼 쌓여 큰 부담으로 다가왔었는데 이번 프로젝트를 통해 새로운 것들을 익히는 것에 대한 부담감을 많이 줄일 수 있던 것 같다. 아무래도 다양한 것들을 많이 사용해 볼수록 각 라이브러리들의 편리함을 체감할 수 있게 되어 그런 것 같다. NEXT.js를 본격적으로 사용해 본 적은 처음이었는데 많이 낯설지 않아서 좋았다. 하지만 낯설지 않았단 점은 NEXT.js의 장점을 충분히 활용하지 못했기 때문 인 것 같다..😂 api라우트를 사용하지 못한 점이 너무 아쉽다. 또 기능별 커밋이 아닌 페이지별 작업하는 아주 나쁜 습관이 쉽게 고쳐지지 않는다😂..하루 빨리 고칠 수 있도록 노력해야겠다! 좋은 조장님과 팀원들, 그리고 멘토님을 만난 덕분에 프로젝트를 잘 마무리 할 수 있었던 것 같다. 단순히 역할을 나눠 각자의 기능 개발을 하기 보단, 작업 현황과 결과물을 보며 이 작업은 어떻게 개선되면 좋을지에 대한 피드백을 말해주셔서 특히나 많은 것들을 접하고 배울 수 있었다. 문제를 해결하기 위한 접근 방법들도 차근차근 알려주셔서 수정작업도 즐겁게 할 수 있던 것 같다. 이번 프로젝트를 되돌아 보니 도움받은것들 뿐이어서 많은 아쉬움이 남는다. 팀원들에게 도움되는 사람이 될 수 있도록 분발해야겠다🔥
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent