KO
|
EN
gitlite — search
Search
#javascript
#python
#hacktoberfest
#react
#ai
#typescript
#llm
#go
#golang
#android
#machine-learning
#rust
#deep-learning
#linux
project-sns-react
★ 9
Open GitHub ↗
커뮤니티 중시형 SNS 앱 만들기 프로젝트
Download README (.md)
Explore Similar Repositories
Praso_WebView_App
:
A full online shopping website is working perfectly in Flutter application. I used the famous webview plugin for this purpose. I just did some customizations as my client required. This is a full perfect online mart based app.
HYCOM2FVCOM
:
Use HYCOM dataset to run FVCOM case
dart-full-stack-gRPC
:
Dart full stack app using Flutter and gRPC
mindsdb_evaluator
:
Model evaluation for Machine Learning pipelines.
Selenium_Perform_Right_Click
:
This is a Selenium project that show how to right click
// repository documentation
Was this content helpful?
★ 0
(0 ratings)
Select Rating:
★
★
★
★
★
Submit Feedback
Recent Feedback
×
Download README
Do you want to download the
README.md
file for
project-sns-react
?
Download (.md)
# <span id="top">🐶 멍하냥 🐱</span> <img width="827" alt="스크린샷 2023-01-05 오전 1 40 20" src="https://user-images.githubusercontent.com/101047198/210605146-1e47144b-8eae-49d6-bd43-a2e579a74426.png"> ## 소개 및 개요 - 프로젝트 기간 : 2022.12.9. ~ 2023.1.4. - 배포 URL : [🔗 멍하냥](https://13oosters.netlify.app) - Test ID / PW : hobak2@boosters.com / test1111 ### [프로젝트 설명] * '멍하냥'은 **반려동물들의 일상을 공유하는 SNS 플랫폼**입니다. * '멍하냥'이라는 이름은 "뭐해?"라고 묻는 말에 강아지와 고양이를 나타내는 '멍'과 '냥'을 붙여 반려동물들의 안부를 묻는 의미를 담았습니다. * 사용자들은 자신의 반려동물 사진을 기록하고 자랑할 수 있습니다. * 다른 계정을 팔로우해서 팔로우한 사용자들의 게시물을 피드에서 한 번에 볼 수 있고, 댓글과 좋아요를 통해 서로 소통을 할 수 있습니다. <br/> <details> <summary>목차</summary> <div markdown="1"> 1. [팀 소개](#teamintro) 2. [기술 및 개발 환경](#stack) 3. [개발 기간 및 작업 문화](#task) 4. [주요 기능](#mainfeat) 5. [프로젝트 구조](#structure) 6. [역할분담](#role) 7. [UI](#ui) 8. [페이지 기능](#pageinfo) 9. [핵심 기능](#issue) 10. [느낀점](#impression) </div> </details> <br/> ## <span id="teamintro">1. 팀 소개</span> ### 🚀 13oosters팀을 소개합니다! 안녕하세요, 저희는 4명의 Front-end 개발자로 구성된 **13oosters**팀입니다. </br> 13이 영어 알파벳의 'B'와 비슷한 모양을 활용해 '부스터즈'라는 팀명을 지었습니다. boost는 신장시키다/북돋우다/격려/촉진 등의 의미를 가지고 있고, booster는 촉진제/추진로켓 등의 의미를 가지고 있습니다. 이번 프로젝트가 저희 성장의 촉진제가 되었으면 하는 마음에서 작명했습니다. 🚀🔥 </br> (멋쟁이사자처럼 프론트엔드 스쿨 3기 프로젝트 13팀입니다.) | **👑 이준근** | **🎨 김소영** | **💻 이준엽** | **📜 최현지** | | :-----------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | | <img src="https://user-images.githubusercontent.com/101047198/210518336-408da4b2-351e-4d67-86f1-91984b8fded8.jpg" height=180 width=180> | <img src="https://user-images.githubusercontent.com/101047198/210600050-8aa5ffaf-9a45-48cb-acb9-f1eadee3e522.jpg" height=180 width=180> | <img src="https://user-images.githubusercontent.com/101047198/210518383-86070850-bb83-462b-ad7c-b8b39fec5cab.jpg" height=180 width=180> | <img src="https://user-images.githubusercontent.com/101047198/210518408-1fca5791-254b-45e3-b4be-bc66a4130c3d.jpg" height=180 width=180> | | **blog**: [jxxunnn](https://velog.io/@jxxunnn) </br> **github**: [Jxxunnn](https://github.com/Jxxunnn) | **github**: [TommyKim97](https://github.com/TommyKim97) | **blog**: [yubmun](https://yubmun.tistory.com/) </br> **github**: [yubmun](https://github.com/yubmun) | **github**: [h12j21-star](https://github.com/h12j21-star) | | </br>  </br>  | </br>  | </br>  | </br>  | <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id="stack">2. 기술 및 개발 환경</span> ### [사용 기술] - Front-end : <img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=black"> <img src="https://img.shields.io/badge/Styled Components-DB7093?style=flat-square&logo=Styled-Components&logoColor=white"> - Back-end : 제공된 API 사용 <br/> ### [개발 환경] <img src="https://img.shields.io/badge/Git-F05032?style=flat-square&logo=Git&logoColor=white"/> <img src="https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=GitHub&logoColor=white"/> <img src="https://img.shields.io/badge/Figma-F24E1E?style=flat-square&logo=Figma&logoColor=white"/> <img src="https://img.shields.io/badge/Notion-000000?style=flat-square&logo=Notion&logoColor=white"/> <img src="https://img.shields.io/badge/Discord-5865F2?style=flat-square&logo=Discord&logoColor=white"/> <img src="https://img.shields.io/badge/Gather Town-2145ff?style=flat-square&logo=Gather Town&logoColor=white"/> - [GitHub Projects](https://github.com/orgs/13oosters/projects/8) : 진행상황을 page별로 나누어 GitHub Issues에서 각자 맡은 업무를 이슈 템플릿에 체크리스트 형식으로 공유했습니다. - [GitHub Wiki](https://github.com/13oosters/project-sns-react/wiki) : 회의와 컨벤션을 기록하고 요점노트를 기록하여 공유하였습니다. - [Figma](https://www.figma.com/file/j56NBuCOtyW0wQrlCT2S7L/13oosters?node-id=39%3A1814&t=s4MlC5rOceTiP6e9-1) : 동시 접속하여 함께 UI, 색상 디자인 상의를 진행했습니다. - `Discord`, `Gather Town` : 원활한 의사소통을 위해 디스코드와 게더타운에서 영상 및 음성 통화를 적극 활용했습니다. <br/> ### [git 흐름 전략] 페이지 별로 기능을 담당하여 프로젝트를 진행하고자 [🔗 Git Flow 방식 ](https://github.com/13oosters/project-sns-react/wiki/%E2%9C%85-%EA%B9%83-%ED%98%91%EC%97%85-%EB%B0%A9%EC%8B%9D#git-%ED%98%91%EC%97%85-%EA%B4%80%EB%A0%A8-%EC%82%AC)을 사용했습니다. 페이지 별 브랜치를 만들고 각자 작업 브랜치를 따로 생성하여, 페이지 브랜치로 PR 및 Merge를 진행합니다. <br/> <br/> ### [커밋 컨벤션] [🔗 커밋 컨벤션 ](https://github.com/13oosters/project-sns-react/wiki/%E2%9C%85-%EC%BB%A4%EB%B0%8B-%EC%BB%A8%EB%B2%A4%EC%85%98) ``` - feat: 새로운 기능 구현 - fix: 오류 수정 - docs: 문서 수정 (예 : readme.md, json 파일 등 수정/ 문서 관련 라이브러리 설치 등) - design: 마크업 및 style 작업 - style: 코드에 변화가 없는 수정 (예 : prettier, 세미콜론 등) - refactor: 코드 리팩토링 - comment: 주석 추가 - chore: 빌드 부분 혹은 패키지 매니저 수정사항 - rename: 파일 혹은 폴더명 수정 or 옮기기 - remove: 파일 삭제 ``` <br/> ### [코드 컨벤션] 통일성 있는 코드 작성을 위해 다양한 [🔗 코드 컨벤션 ](https://github.com/13oosters/project-sns-react/wiki/%E2%9C%85-%EC%BD%94%EB%93%9C-%EC%BB%A8%EB%B2%A4%EC%85%98)을 정해 사용했습니다. - <img src="https://img.shields.io/badge/Prettier-F7B93E?style=flat-square&logo=Prettier&logoColor=white"/> ``` { "printWidth": 80, "singleQuote": false, "jsxSingleQuote": false, "tabWidth": 2, "semi": true, "trailingComma": "all", "bracketSpacing": true, "arrowParens": "always" } ``` </br> - <img src="https://img.shields.io/badge/ESLint-4B32C3?style=flat-square&logo=ESLint&logoColor=white"/> ``` { "extends": ["react-app", "react-app/jest", "naver" "prettier"], "rules": { "no-console": 1, "react-hooks/exhaustive-deps": 0, "no-unused-expression": false } } ``` <br/> ### [배포 서비스] <img src="https://img.shields.io/badge/Netlify-00C7B7?style=flat-square&logo=Netlify&logoColor=white"/> <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id='task'>3. 개발 기간 및 작업 문화 </span> ### [프로젝트 기간] : 2022.12.09. ~ 2023.01.04. <br/> ### [작업 문화] #### 📍 GitHub Project 각자 맡은 업무를 이슈 템플릿에 체크리스트 형식으로 공유했습니다.  <br/> #### 📍 GitHub Wiki - 팀 노션에 동시 접속하여 [🔗 주간 회의](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%9C-%ED%9A%8C%EC%9D%98%EB%A1%9D)를 진행하고, GitHub Wiki에 회의 내용을 정리해 업로드했습니다. - 프로젝트에서 사용하는 Styled-Components의 공식문서를 번역하며 [🔗 공부 내용](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%96-Styled-components)을 기록하여 공유하였습니다.  <br/> #### 📍 Gather Town & VSCode Live Share - 게더 타운의 가상 팀 공간을 활용하여 협업을 진행했습니다. 페어 프로그래밍을 진행하거나 전체 상의가 필요한 작업을 할 때, 게더 타운의 화면 공유와 음성 통화 기능과 VSCode의 Live Share 확장 기능을 적극 활용했습니다. <img width="600" src="https://user-images.githubusercontent.com/101047198/211275562-6b91d6ba-defe-4192-b8a9-9aa81ed8b557.png"> <img width="600" src="https://user-images.githubusercontent.com/101047198/211275871-10528df4-ee59-4765-a4df-890e78a139ff.png"> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id='mainfeat'>4. 주요 기능</span> ### 🔒 로그인 / 회원가입 * 로그인 * 회원가입 * 유효성 검사 * 토큰 검증 ### 📎 피드 * 게시글 업로드 * 무한 스크롤 ### 🔍 검색 * 유저 검색 ### 🖼 게시글 * 게시글 수정, 삭제 * 댓글 게시, 삭제 * 게시글/댓글 신고 ### 👨🏿🤝👨🏼프로필 * 로그아웃 * 프로필 수정 * 팔로우 / 팔로잉 * 그리드, 리스트형 게시글 <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id='structure'>5. 프로젝트 구조</span> ### [폴더 구조] - assets/ : 이미지, 아이콘 - components/ : 컴포넌트 - components/common/ : 공통 - pages/ : 생성한 컴포넌트들을 조합해 각 페이지 구현 - style/ : globalstyle, 공통 스타일 - utils/ : util 함수 ``` 📦 project-sns-react🐶😺 .eslintrc.json .github │ ├─ ISSUE_TEMPLATE │ └─ PULL_REQUEST_TEMPLATE ├─ .gitignore ├─ .gitmessage.txt ├─ .prettierignore ├─ .prettierrc.json ├─ README.md ├─ package-lock.json ├─ package.json ├─ public │ └─ index.html └─ src ├─ App.js ├─ assets │ └─ image ├─ components │ ├─ common │ │ ├─ Card.js │ │ ├─ Cards.js │ │ ├─ Logo.js │ │ ├─ Modal.js │ │ ├─ Notice.js │ │ ├─ ProfileSetting.js │ │ └─ SplashScreen.js │ ├─ follow │ │ ├─ FollowersCard.js │ │ ├─ FollowersCards.js │ │ ├─ FollowingsCard.js │ │ └─ FollowingsCards.js │ ├─ home │ │ ├─ EmptyFeed.js │ │ ├─ Feeds.js │ │ ├─ Loading.js │ │ └─ PostImage.js │ ├─ login │ │ ├─ Form.js │ │ ├─ Login.js │ │ └─ Welcome.js │ ├─ post │ │ ├─ Comment.js │ │ ├─ Comments.js │ │ ├─ Detail.js │ │ ├─ Dialog.js │ │ └─ Writing.js │ ├─ profile │ │ ├─ GridCard.js │ │ ├─ GridCards.js │ │ ├─ MyProfileButton.js │ │ ├─ ProfileInformation.js │ │ └─ SortButtons.js │ ├─ search │ │ ├─ Result.js │ │ └─ Results.js │ ├─ style │ │ ├─ Button.js │ │ ├─ GlobalStyle.js │ │ ├─ Header.js │ │ ├─ NavBar.js │ │ ├─ PageLayout.js │ │ ├─ follow │ │ │ ├─ FollowButton.js │ │ │ └─ FollowCancelButton.js │ │ ├─ form │ │ │ ├─ ErrorMessageP.js │ │ │ ├─ LoginButton.js │ │ │ ├─ LoginForm.js │ │ │ ├─ LoginInput.js │ │ │ ├─ SignUpButton.js │ │ │ └─ TitleH2.js │ │ └─ profile │ │ ├─ FollowButton.js │ │ ├─ FollowCountDiv.js │ │ ├─ FollowCountP.js │ │ └─ FollowCountSpan.js │ └─ upload │ ├─ ImageUpload.js │ ├─ Posting.js │ └─ TextUpload.js ├─ hooks │ ├─ useFetch.js │ └─ useInput.js ├─ index.css ├─ index.js ├─ pages │ ├─ ErrorPage.js │ ├─ FollowersPage.js │ ├─ FollowingsPage.js │ ├─ HomePage.js │ ├─ LoginPage.js │ ├─ PostPage.js │ ├─ ProfileEditPage.js │ ├─ ProfilePage.js │ ├─ SearchPage.js │ └─ UploadPage.js ├─ reportWebVitals.js ├─ routes │ └─ Router.js └─ utils ├─ api.js ├─ postData.js └─ validate.js ``` <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id="role">6. 역할 분담</span> <img width="800" alt="역할분담" src="https://user-images.githubusercontent.com/74497080/211231655-1ecad753-e069-41e9-8f1f-5f2205c7c358.png"> <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id="ui">7. UI</span>  <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id="pageinfo">8. 페이지 기능</span> - 상세 기능 설명은 각 페이지별 링크 연결해두었습니다. ### 1) 홈 |🔗 [splash](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-splash)|🔗 [로그인 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80)|🔗 [회원가입 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%ED%8E%98%EC%9D%B4%EC%A7%80)| |:-:|:-:|:-:| |<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211331596-532f9f01-d6c5-4bf4-85dc-b86671fe4436.gif"> |<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211332483-5e5246e7-c1f7-4c6a-b6b5-8f12493a3590.gif">|<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211372489-663ede79-6011-481c-8b3c-8e944ca96d08.gif">| |🔗 [홈 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%ED%99%88-%ED%8E%98%EC%9D%B4%EC%A7%80)|🔗 [검색 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%EA%B2%80%EC%83%89-%ED%8E%98%EC%9D%B4%EC%A7%80)| |:-:|:-:| |<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211334737-a8e83dea-814c-4671-a658-b9ca01b2e7bb.gif">|<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211366355-8c46972a-b114-480d-8f80-f9a6d2987ff7.gif">| <br/> ### 2) 프로필 |🔗 [마이 프로필 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%EB%A7%88%EC%9D%B4-%ED%94%84%EB%A1%9C%ED%95%84-%ED%8E%98%EC%9D%B4%EC%A7%80)|🔗 [유저 프로필 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%EC%9C%A0%EC%A0%80-%ED%94%84%EB%A1%9C%ED%95%84-%ED%8E%98%EC%9D%B4%EC%A7%80)|🔗 [팔로워 페이지 & 팔로잉 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%ED%8C%94%EB%A1%9C%EC%9B%8C-%EB%AA%A9%EB%A1%9D-%ED%8E%98%EC%9D%B4%EC%A7%80-%ED%8C%94%EB%A1%9C%EC%9E%89-%EB%AA%A9%EB%A1%9D-%ED%8E%98%EC%9D%B4%EC%A7%80) |:-:|:-:|:-:| |<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211343502-eec55356-732a-468d-acfe-a5b0fd5dff74.gif">|<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211343671-4ae04603-6ce4-462c-8096-c880d2865976.gif">|<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211344741-9f89e9f7-3c3a-4e69-85b2-146da75ed43e.gif"> |🔗 [프로필 수정 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%ED%94%84%EB%A1%9C%ED%95%84-%EC%88%98%EC%A0%95-%ED%8E%98%EC%9D%B4%EC%A7%80)|🔗 [로그아웃 모달](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%EB%A7%88%EC%9D%B4-%ED%94%84%EB%A1%9C%ED%95%84-%ED%8E%98%EC%9D%B4%EC%A7%80) |:-:|:-:| |<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211346281-b07a3eec-b0a6-4fbd-9f42-92bd56caf0f6.gif">|<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211346448-fe791b4c-6e39-4b99-a4d0-224a5e9493b5.gif">| <br/> ### 3) 게시글 |🔗 [게시글 작성 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%9E%91%EC%84%B1-%ED%8E%98%EC%9D%B4%EC%A7%80)|🔗 [게시글 상세 페이지](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%83%81%EC%84%B8-%ED%8E%98%EC%9D%B4%EC%A7%80)|🔗 [홈 페이지 모달](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#1-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EB%AA%A8%EB%8B%AC)| |:-:|:-:|:-:| |<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211337897-d2b2cfa7-f982-4442-bde6-9ccdc411bd7f.gif">|<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211341344-d06b0b15-8176-4b38-b755-be2a09173acd.gif">|<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211337883-41868ab9-833b-4466-af23-742bff7a99f5.gif">| |🔗 [게시글 수정 / 신고 모달](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#1-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EB%AA%A8%EB%8B%AC)|🔗 [댓글 삭제 / 신고 모달](https://github.com/13oosters/project-sns-react/wiki/%F0%9F%93%83-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#2-%EB%8C%93%EA%B8%80-%EB%AA%A8%EB%8B%AC)| |:-:|:-:| |<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211342015-3ef4d22b-5ebd-433c-a17b-540c1a74cc27.gif">|<img width="390px;" src="https://user-images.githubusercontent.com/74497080/211342483-ee82500c-1ed5-4b2b-9868-f7e6c9b67eb8.gif">| <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id="issue">9. 핵심 기능</span> ### [Axios 모듈화] axios로 서버와 통신하는 모든 부분에서 서버 주소와 코드가 반복되어 이를 줄이기 위해 `custom axios`를 사용하였습니다. ``` const BASE_URL = "url"; const API = axios.create({ baseURL: BASE_URL, headers: { "Content-Type": "application/json", }, }); API.interceptors.request.use( (config) => { const token = localStorage.getItem("token"); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { Promise.reject(error); }, ); ``` <br/> ### [Header 공통 컴포넌트 오브젝트 자료형 응용] 페이지 마다 존재하는 header의 구성이 비슷하여 `공통 컴포넌트`로 만들었고, 각 페이지에 type을 지정하여 각 페이지 별로 header를 구분하였습니다. ``` export default function Header({ type, setKeyword, startTransition, setProfileModal, profileModal, }) { const UI = { logo: ( <HeaderUI> <button> <img src={topLogoImage} alt="멍하냥" /> </button> </HeaderUI> ), search: ( ), profile: ( ), post: ( ), followers: ( ), followings: ( ), }; return <HeaderWrap>{UI[type]}</HeaderWrap>; } ``` <br/> ### [react-hook-form] 로그인 페이지 / 회원가입 페이지에서 유효성 검사를 `react-hook-form` 라이브러리를 사용했습니다. 입력 값 존재 여부, 포커스 등의 유틸을 지원하기 때문에 기능 구현의 리소스를 절약할 수 있었습니다. ``` const { register, setFocus, handleSubmit, formState: { isSubmitting, errors }, watch, } = useForm({ mode: "onChange" }); const checkIsValue = (e) => { e.target.value && watch("email") && watch("password") ? setIsValue(true) : setIsValue(false); }; const handleInput = (e) => { setUserData({ ...userData, [e.target.name]: e.target.value }); checkIsValue(e); }; ... ``` <br/> ### [검색 페이지 렌더링 성능 최적화] 검색 페이지에서는 Blocking rendering을 해결하여 성능을 최적화하는 것이 중요하다고 생각했습니다. 이를 위해 `useTransition` 훅을 사용하였습니다. #### 📍 useTransition 특징 * useTransition은 상태변화의 우선순위를 지정해줍니다. * 화면을 업데이트 하는 중에도 검색 input의 우선순위를 높여 입력이 끊기는 상황을 줄여줍니다. * isPending의 boolean값을 이용하여 로딩중 ui를 띄어 ux를 향상 시켜줍니다. ``` export default function SearchPage() { const [keyword, setKeyword] = useState(undefined); const [isPending, startTransition] = useTransition(); return ( <PageLayout paddingValue={0}> <h1 className="sr-only">검색 페이지</h1> <Header setKeyword={setKeyword} startTransition={startTransition} type="search" /> <Results keyword={keyword} isPending={isPending} /> <NavBar type="검색" /> </PageLayout> ); } ... search: ( <> <h2 className="sr-only">검색창</h2> <HeaderUI> <button onClick={() => navigate(-1)}> <img src={backImage} alt="뒤로 가기" /> </button> <SearchDiv> <HeaderInput onKeyUp={(e) => { startTransition(() => { setKeyword(e.target.value); }); }} placeholder="계정 검색" /> <button onClick={(e) => { e.target.closest("div").childNodes[0].value = ""; setKeyword(""); // }} type="button" > <img src={cancelImage} alt="취소 버튼" /> </button> </SearchDiv> </HeaderUI> </> ) ``` <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p> ## <span id="impression">10. 느낀 점</span> ### 🐱 준근 - 이번 프로젝트를 통해 학습하고 성장하자는 공동의 목표로 의미있는 과정을 남긴 것 같아 뿌듯합니다. 개발하는 재미를 다시금 느끼게 해준 팀원들 감사합니다. ### 🐶 소영 - 정말 멋지고 좋은 팀원 분들을 만나서 많은 것들을 배울 수 있었던 감사한 시간이었습니다. 함께 프로젝트 하게 되어 영광이었고, 같이 즐거웠던 일화들도 소중한 기억으로 남을 것 같습니다. 🚀💗 ### 🐹 준엽 - 여러모로 부족한 상태로 프로젝트를 시작했지만, 팀원분들의 유쾌한 응원과 기술 구현에 대한 지식공유를 해주셔서 여러 경험들을 할 수 있는 행복한 시간이었습니다. 정말 고생많으셨습니다~! ### 🐰 현지 - 이번 프로젝트를 통해 자신감을 많이 얻었고 협업과정과 커뮤니케이션을 배울 수 있었습니다. 다들 정말 감사하고 수고하셨습니다~!💜 <br/> <br/> <p align="right"><a href="#top">(⬆️ Top)</a></p>
