Cosmos

코드잇 스프린터가 모인 SNS, 코스모스 !

설치 방법

1. 소스 파일 설치

git clone https://github.com/project-cosmo-sns/cosmos.git
cd cosmos

2. 패키지 설치

npm install

3. .env 파일 생성

NEXT_PUBLIC_BASE_URL = 'BASE_URL'

4. 실행

npm run start

🫂 팀원 소개

이윤성	박지용	심은주	이유연	최유정
팀장	팀원	팀원	팀원	팀원

🔨 사용 기술 및 도구

배포

개발

협업

🗓️ 개발 일정

2024.04.11 ~ 2024.05.17 (6주)

🔖 세부 일정 관리 및 깃허브 연동

• 4.11 ~ 4.20 기획
• 04.22 ~ 04.27 와이어 프레임 제작 및 UI 생성
• 04.29 ~ 05.11 API 구축 및 기능 구현 + 디자인 시안 적용
• 05.12 ~ 05.17 수정 및 배포

📁 폴더 구조

root
├── src
│    ├── pages
│    ├── components
│    ├── utils
│    ├── types
│    ├── constants
│    ├── hooks
│    ├── redux
│    └── styles
│      └── globals.scss
└── public
     └──images

🔗 배포 링크

Cosmos - 바로가기

✨ 서비스 주요 기능

구글, 깃허브 OAuth

피드 - 댓글, 이모지, 사진, 피드 글

포스트 - 댓글, 이모지, 해시태그, 카테고리, 마크다운 문법 지원

검색 - 유저 검색, 해시태그 기반 게시물 검색

프로필 - 내 프로필 및 다른 유저 프로필

❗️ 문제 및 해결

1. ** SSR과 CSR을 혼합해서 사용할 때 발생한 이슈 **
   • 초기에 빠른 로딩을 위해 SSR방식으로 데이터를 불러와 적용하기로 계획했지만 권한이 필요한 서비스의 경우 쿠키 정보를 클라이언트에서 다루기 때문에 서버 단에서 확인 할 수 없어 권한 에러 발생 => 서버에서 데이터를 불러올 때 쿠키정보를 수동으로 세팅해줌으로써 해결
   • 초기화면 로딩 후 SSR로 가져온 데이터는 react-query를 이용해서 상태를 관리하지 않았기 때문에 CSR로 불러온 데이터와 연동하는데에서 refetch 에러 발생 => setQueryDatas 메소드를 사용해 데이터를 연동함으로써 해결

결론적으로 SSR, CSR을 함께 사용하는 경우 데이터 관리 및 동기화를 위해 React Query의 데이터 캐싱 기능을 활용하는 것이 좋고, 이를 통해 서버와 클라이언트간 데이터 일관성을 유지하고, 사용자 경험을 개선할수 있다는 점을 배움

2. ** backdrop-filter: blur() 적용 이슈 **
   • 이미 부모요소에 backdrop-filter 효과가 적용되어있어 자식 요소에 중복으로 지정할 수 없는 문제 발생 => createPortal 을 통해 부모요소와 같은 레벨로 이동하도록 수정함으로써 별개의 스타일을 적용하여 해결