들숨날숨 바로가기
Test ID : [email protected]
Test PW : bc12345!
'들숨날숨'은 같은 동네 혹은 서로 다른 동네에서 새로운 사람들과 함께 달리거나 소식을 공유할 수 있는 SNS/커뮤니티 서비스입니다.
- 자유롭게 뛰는 날짜와 장소만 게시한다면 누구든지 함께 달릴 수 있습니다.
- 팔로잉하는 사용자 뿐만 아니라 사용자 검색을 통해 팔로잉하지 않은 사용자의 소식을 확인할 수 있습니다.
- 내가 달린 기록과 사람들을 이웃들에게 공유할 수 있습니다.
- 사용자의 게시글에 좋아요, 댓글을 통해 활발하게 소통할 수 있습니다.
"
우리는개발자로 성장이필요하다"라는 의미로
위니브라는 회사의 도움을 얻고
함께프로젝트를 진행하면서 서로가필요한부분을 채워주기 위해
다음과 같은 팀명을 짓게 되었습니다.
| 🐿 김용덕 | 💜 박연주 | 🌿 백수연 | 🐕 이양래 |
|---|---|---|---|
 |
 |
 |
 |
 |
|
|
|
  |
 |
 |
 |
| FrontEnd | BackEnd | Design | 협업방식 | 컨벤션 |
|---|---|---|---|---|
    |
제공된 API |  |
    |
  |
🎨 UI
- 마이 프로필 페이지
- 사용자 프로필 페이지
- 홈 피드 페이지
- 지도 상세 페이지
🎶 공통 컴포넌트
- Button
- Header
- Footer
- Map
- Modal
✨ 기능 구현
- 홈피드와 무한 스크롤
- 내 프로필 및 사용자 프로필
- 카카오 지도 api를 이용한 path 그리기
- 댓글 수정
- 게시글 삭제, 게시글 수정
🤝 기타
- 프로젝트 아이디어의 근원
- 지도 api 자료조사
🎨 UI
- 팔로잉 목록 페이지
- 팔로워 목록 페이지
- 채팅 페이지
- 404 페이지
🎶 공통 컴포넌트
- Follow
- Search
✨ 기능 구현
- 팔로잉과 팔로워 리스트
- 채팅 리스트
- 채팅 룸
- 검색 debounce를 통한 성능 최적화
🤝 기타
- 데일리 스크럼, 번개 회의록 작성
- 노션 관리
🎨 UI
- Splash 페이지
- 회원가입 페이지
- 로그인 페이지
- 프로필 설정 및 수정 페이지
🎶 공통 컴포넌트
- Input
- Loading
✨ 기능 구현
- 로그인, 회원가입, 프로필 설정 및 수정 시 유효성 검사
- 참여하기와 참여하기 취소
- 댓글 작성
- 이미지 압축을 통한 이미지 최적화
- api 모듈화 및 카카오 지도 api 주소값으로 변환
🤝 기타
- 프로젝트 디자인 관리
- 깃헙 이슈 및 PR 정리
🎨 UI
- 검색 페이지
- 게시물 작성 페이지
- 게시물 상세 페이지
🎶 공통 컴포넌트
- Comment
- Modal
- Alert
✨ 기능 구현
- 유저 검색
- 게시글 업로드
- 댓글 삭제
- 사용자 프로필 이미지 유효성 검사
- 다크모드 구현
🤝 기타
- 데일리 스크럼, 번개 회의 리더
- 프로젝트 일정 관리
- 홈
| 🔗스플래쉬 | 🔗회원가입 | 🔗프로필 설정 |
|---|---|---|
 |
|
 |
| 🔗로그인 | 🔗홈 피드 | 🔗계정 검색 |
|---|---|---|
 |
 |
 |
| 🔗팔로잉 팔로우 | 🔗404 | 🔗채팅 |
|---|---|---|
 |
 |
 |
- 게시글
| 🔗게시글 작성 | 🔗게시글 수정 | 🔗게시글 삭제 |
|---|---|---|
 |
|
 |
| 🔗댓글 작성 | 🔗댓글 삭제 | 🔗댓글 신고 |
|---|---|---|
 |
 |
 |
| 🔗게시글 상세 | 🔗게시글 좋아요 | 🔗게시글 좋아요 취소 |
|---|---|---|
 |
 |
 |
- 프로필
| 🔗내 프로필 | 🔗내 프로필 수정 | 🔗유저 프로필 팔로우 |
|---|---|---|
 |
 |
 |
| Emoji | Code | 기능 | Description |
|---|---|---|---|
| ✨ | :sparkles: |
Feat | 새 기능 |
| ♻️ | :recycle: |
Refactor | 코드 리팩토링 |
| 📦 | :wrench: |
Chore | 리소스 수정/삭제 |
| 🐛 | :bug: |
Fix | 버그 수정 |
| 📝 | :memo: |
Docs | 문서 추가/수정 |
| 🎨 | :lipstick: |
Style | UI/스타일 파일 추가/수정 |
| 🎉 | :tada: |
Init | 프로젝트 시작 / Init |
| ✅ | :white_check_mark: |
Test | 테스트 추가/수정 |
| ⏪ | :rewind: |
Rewind | 변경 사항 되돌리기 |
| 🔀 | :twisted_rightwards_arrows: |
Merge | 브랜치 합병 |
| 🗃 | :card_file_box: |
DB | 데이터베이스 관련 수정 |
| 💡 | :bulb: |
Comment | 주석 추가/수정 |
| 🚀 | :rocket: |
Deploy | 배포 |
- 작은 따옴표 사용
''사용 - 전체를 묶는 스타일 컴포넌트 명은 끝에 container 사용
- 이미지를 가져오는 컴포넌트 명은 파스칼 표기법 사용
- 일치 연산자 사용
{
"extends": ["react-app", "react-app/jest", "prettier"],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"linebreak-style": 0
}
}
"extends": ["react-app", "react-app/jest", "prettier"]: 다른 ESLint 구성을 확장하는 역할로, Create React App 프로젝트에서 제공하는 기본적인 규칙을 사용하고, Jest 관련 규칙도 함께 확장하며, 마지막으로 Prettier와 관련된 규칙도 추가합니다."rules": { ... }****: ESLint의 규칙을 지정합니다."react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]****: 이 설정은 JSX를 사용하는 React 컴포넌트 파일의 확장자를 지정하는 규칙입니다.[1, { "extensions": [".js", ".jsx"] }]은 경고로 설정되어 ‘.js’ 또는 ‘.jsx’ 확장자가 아닌 파일에서 JSX를 사용하면 경고가 표시됩니다."linebreak-style": 0: 개행 문자 스타일을 지정하는 규칙입니다.0으로 설정되어 있어, 개행 문자 스타일에 대한 경고 또는 오류를 표시하지 않습니다.
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
"trailingComma": 마지막 요소 뒤에 쉼표를 추가할지 여부를 결정합니다.es5값은 ES5 문법에 따라 마지막 요소 뒤에 쉼표를 추가합니다."tabWidth": 탭 문자의 너비를 결정합니다. 들여쓰기에 탭 대신 2개의 공백을 사용합니다."semi": 문장 끝에 세미콜론을 추가할지 여부를 결정합니다.true로 설정되어 있으므로, 세미콜론을 추가합니다."singleQuote": 이 설정은 문자열을 작은 따옴표로 감쌀지 큰 따옴표로 감쌀지 결정합니다.true로 설정되어 있으므로, 문자열을 작은 따옴표로 감쌉니다.
- public/favicon/ : 파비콘
- src/assets/ : 전역에서 사용하는 폰트, 스프라이트 이미지, 로고 이미지
- src/atoms/ : 전역 상태 관리를 위한 아톰 (UserAtom, LoginAtom)
- src/components/ : 공통 컴포넌트와 Map 컴포트
- src/pages/ : 서비스에 사용되는 각 페이지
- src/routes/ : 페이지 라우팅
- src/styles/ : 전역 스타일 (layout, globalstyle, theme)
🌬️ 들숨날숨
🌱public
┣ 🌿favicon.ico
┗ 🌿index.html
🌱src
┣ 🌿assets
┃ ┣ 🪴fonts
┃ ┣ 🪴images
┃ ┗ 🪴sprite
┣ 🌿atoms
┣ 🌿components
┃ ┣ 🪴common
┃ ┃ ┣ 🌳Alert
┃ ┃ ┣ 🌳Button
┃ ┃ ┣ 🌳Comment
┃ ┃ ┣ 🌳Input
┃ ┃ ┣ 🌳Loading
┃ ┃ ┣ 🌳Modal
┃ ┃ ┗ 🌳User
┃ ┃ ┃ ┣ 🌳Follow
┃ ┃ ┃ ┗ 🌳Search
┃ ┣ 🪴Footer
┃ ┣ 🪴Header
┃ ┗ 🪴Map
┣ 🌿hooks
┣ 🌿pages
┃ ┣ 🪴ChatPage
┃ ┣ 🪴FeedPage
┃ ┣ 🪴FollowListPage
┃ ┣ 🪴LoginPage
┃ ┣ 🪴NotFoundPage
┃ ┣ 🪴PostPage
┃ ┣ 🪴ProfilePage
┃ ┃ ┣ 🌳ProfileEdit
┃ ┣ 🪴ProfileSettingPage
┃ ┣ 🪴SearchPage
┃ ┣ 🪴SignupPage
┃ ┣ 🪴SnsLoginPage
┃ ┣ 🪴SplashPage
┃ ┗ 🪴UploadPage
┣ 🌿routes
┣ 🌿styles
┣ 🌿utils
┣ 📜App.js
┗ 📜index.js
- 일시: 평일 오전 9시 (15분 내외)
- 장소: [회의실] 프로젝트 17조 디스코드 (카메라On)
- 내용: 회고 및 작업 계획
- 대화방식: 정보 전달이 아닌 대화 주제가 가져오는 효과나 해결책에 토론
Axios를 사용하여 API 요청을 처리했습니다. 이 모듈은 API 요청을 보내기 위해 여러가지 함수와 Axios의 인스턴스를 내보는 것으로 구성되어 있고 각 함수는 특정한 API에 대한 요청을 보내고 응답을 처리하여 데이터를 반환합니다.
import axios from 'axios';
const URL = 'https://api.mandarin.weniv.co.kr/';
/* 기본 인스턴스 */
export const instance = axios.create({
baseURL: URL,
headers: {
'Content-Type': 'application/json',
},
});
/* 이미지 인스턴스 */
export const imgInstance = axios.create({
baseURL: URL,
headers: {
'Content-Type': 'multipart/form-data',
},
});
/* auth 인스턴스 */
export const authInstance = axios.create({
baseURL: URL,
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json',
},
});
/* content 업로드 */
export const postContentUpload = async (token, post) => {
const response = await authInstance.post(`/post/`, post, {
headers: {
Authorization: `B다Axios를 이용하여 간편하게 API 요청을 보낼 수 있었고 요청을 담당하는 인스턴스와 각각의 API 요청 함수를 별도로 관리할 수 있었습니다. 요청을 할 때 사용하는 함수의 형식도 통일했기 때문에 코드의 일관성과 가독성을 높일 수 있었다.
사용자들을 위해 시작 위치와 종류 위치를 얻어오는 기능, path를 그리고 그 데이터를 기반으로 주소를 값이 불러올 수 있도록 처리했습니다. 카카오 맵을 사용할 수 있도록 도와주는 카카오 지도 API와 React 애플리케이션에서 사용할 수 있도록 도와주는 리액트 카카오 지도 라이브러리를 함께 사용했습니다.
useEffect(() => {
if (data.image) {
try {
const parsing = JSON.parse(data.image);
const startLat = parsing[0].lat;
const startLng = parsing[0].lng;
const geocoder = new window.kakao.maps.services.Geocoder();
const startLatlng = new window.kakao.maps.LatLng(startLat, startLng);
geocoder.coord2Address(
startLatlng.getLng(),
startLatlng.getLat(),
(result, status) => {
if (status === window.kakao.maps.services.Status.OK) {
const startPoint = result[0].address.address_name;
setStartPoint(startPoint);
}
}
);
const endLat = parsing[parsing.length - 2].lat;
const endLng = parsing[parsing.length - 2].lng;
const endLatlng = new window.kakao.maps.LatLng(endLat, endLng);
/* 마지막 요소 = 총 거리 */
geocoder.coord2Address(
endLatlng.getLng(),
endLatlng.getLat(),
(result, status) => {
if (status === window.kakao.maps.services.Status.OK) {
const endPoint = result[0].address.address_name;
setEndPoint(endPoint);
}
}
);
} catch (error) {
console.error(error);
}
}
}, [data.image]);모두가 지도 API를 처음 사용하면서 새로운 경험을 할 수 있었습니다. 기존 카카오 지도 API에서 받아오는 데이터(위도, 경도)를 사용자에게 보여주기 위한 데이터(주소 값)로 변환하는 작업이 필요했는데 새로운 라이브러리를 추가하여 해결했습니다.