project-sns-react

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

project-sns-react

(★ 9)

커뮤니티 중시형 SNS 앱 만들기 프로젝트

project-sns-react Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🐶 멍하냥 🐱
<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 플랫폼**입니다. 
* '멍하냥'이라는 이름은 "뭐해?"라고 묻는 말에 강아지와 고양이를 나타내는 '멍'과 '냥'을 붙여 반려동물들의 안부를 묻는 의미를 담았습니다.
* 사용자들은 자신의 반려동물 사진을 기록하고 자랑할 수 있습니다.
* 다른 계정을 팔로우해서 팔로우한 사용자들의 게시물을 피드에서 한 번에 볼 수 있고, 댓글과 좋아요를 통해 서로 소통을 할 수 있습니다.

1. [팀 소개](#teamintro)
2. [기술 및 개발 환경](#stack)
3. [개발 기간 및 작업 문화](#task)
4. [주요 기능](#mainfeat)
5. [프로젝트 구조](#structure)
6. [역할분담](#role)
7. [UI](#ui)
8. [페이지 기능](#pageinfo)
9. [핵심 기능](#issue)
10. [느낀점](#impression)
</div>
</details>

## 1. 팀 소개
### 🚀 13oosters팀을 소개합니다!
안녕하세요, 저희는 4명의 Front-end 개발자로 구성된 **13oosters**팀입니다. 
13이 영어 알파벳의 'B'와 비슷한 모양을 활용해 '부스터즈'라는 팀명을 지었습니다. boost는 신장시키다/북돋우다/격려/촉진 등의 의미를 가지고 있고, booster는 촉진제/추진로켓 등의 의미를 가지고 있습니다. 이번 프로젝트가 저희 성장의 촉진제가 되었으면 하는 마음에서 작명했습니다. 🚀🔥 

(멋쟁이사자처럼 프론트엔드 스쿨 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) **github**: [Jxxunnn](https://github.com/Jxxunnn) | **github**: [TommyKim97](https://github.com/TommyKim97) | **blog**: [yubmun](https://yubmun.tistory.com/) **github**: [yubmun](https://github.com/yubmun) | **github**: [h12j21-star](https://github.com/h12j21-star) |
| ![FrontEnd](https://img.shields.io/badge/FrontEnd-3f97fb) ![Team%20Leader](https://img.shields.io/badge/-Team%20leader-yellow) ![Development%20Leader](https://img.shields.io/badge/-Development%20leader-green) | ![FrontEnd](https://img.shields.io/badge/FrontEnd-3f97fb) ![Design%20Leader](https://img.shields.io/badge/-Design%20leader-purple) | ![FrontEnd](https://img.shields.io/badge/FrontEnd-3f97fb) ![WorkManagement](https://img.shields.io/badge/-Work%20Management%20leader-f67280) | ![FrontEnd](https://img.shields.io/badge/FrontEnd-3f97fb) ![Communication%20Leader](https://img.shields.io/badge/-Comunication%20Leader-orange) |

## 2. 기술 및 개발 환경
### [사용 기술]
- 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 사용

### [개발 환경]
<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` : 원활한 의사소통을 위해 디스코드와 게더타운에서 영상 및 음성 통화를 적극 활용했습니다.

### [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를 진행합니다.

### [커밋 컨벤션]
 [🔗 커밋 컨벤션 ](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: 파일 삭제
```

### [코드 컨벤션]
 통일성 있는 코드 작성을 위해 다양한 [🔗 코드 컨벤션 ](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"
}
```

- <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
	}
}
```

### [배포 서비스]
 <img src="https://img.shields.io/badge/Netlify-00C7B7?style=flat-square&logo=Netlify&logoColor=white"/>
 
 
 <a href="#top">(⬆️ Top)</a>

## 3. 개발 기간 및 작업 문화 
### [프로젝트 기간] : 2022.12.09. ~ 2023.01.04.

### [작업 문화]
#### 📍 GitHub Project
각자 맡은 업무를 이슈 템플릿에 체크리스트 형식으로 공유했습니다. 
![image](https://user-images.githubusercontent.com/74497080/211240942-f8e99092-9c62-4a1e-9c38-9ffb2b22a5bf.png)

#### 📍 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)을 기록하여 공유하였습니다.

![image](https://user-images.githubusercontent.com/74497080/211241048-4d0e4ce5-4503-41a1-a162-846739d29542.png)

#### 📍 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">

## 4. 주요 기능
### 🔒 로그인 / 회원가입
 * 로그인
 * 회원가입
 * 유효성 검사
 * 토큰 검증 
### 📎 피드
* 게시글 업로드
* 무한 스크롤
### 🔍 검색
* 유저 검색
### 🖼 게시글
* 게시글 수정, 삭제
* 댓글 게시, 삭제
* 게시글/댓글 신고 
### 👨🏿‍🤝‍👨🏼프로필
* 로그아웃
* 프로필 수정
* 팔로우 / 팔로잉
* 그리드, 리스트형 게시글

## 5. 프로젝트 구조

### [폴더 구조]

- 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
```

## 6. 역할 분담
<img width="800" alt="역할분담" src="https://user-images.githubusercontent.com/74497080/211231655-1ecad753-e069-41e9-8f1f-5f2205c7c358.png">

## 7. UI
![UI](https://user-images.githubusercontent.com/101047198/211323858-a72717b4-d2be-451f-8827-b3216acbad40.jpg)

## 8. 페이지 기능
- 상세 기능 설명은 각 페이지별 링크 연결해두었습니다.

### 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">|

### 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">|

### 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">|

## 9. 핵심 기능

### [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);
 },
);
```

### [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>;
} 
```

### [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);
  };
...

```

### [검색 페이지 렌더링 성능 최적화]

검색 페이지에서는 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>
 </>
 )
```

## 10. 느낀 점

### 🐱 준근 
- 이번 프로젝트를 통해 학습하고 성장하자는 공동의 목표로 의미있는 과정을 남긴 것 같아 뿌듯합니다. 개발하는 재미를 다시금 느끼게 해준 팀원들 감사합니다.

### 🐶 소영 
- 정말 멋지고 좋은 팀원 분들을 만나서 많은 것들을 배울 수 있었던 감사한 시간이었습니다. 함께 프로젝트 하게 되어 영광이었고, 같이 즐거웠던 일화들도 소중한 기억으로 남을 것 같습니다. 🚀💗

### 🐹 준엽 
- 여러모로 부족한 상태로 프로젝트를 시작했지만, 팀원분들의 유쾌한 응원과 기술 구현에 대한 지식공유를 해주셔서 여러 경험들을 할 수 있는 행복한 시간이었습니다. 정말 고생많으셨습니다~!
### 🐰 현지 
- 이번 프로젝트를 통해 자신감을 많이 얻었고 협업과정과 커뮤니케이션을 배울 수 있었습니다. 다들 정말 감사하고 수고하셨습니다~!💜

project-sns-react

project-sns-react Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

project-sns-react

project-sns-react Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README