👉 먼저 이용하러 가기 (가입이 귀찮으면 맨아래로)

• 소셜 네트워크 서비스 (SNS)
  
• 발랄한 느낌 어필을 위해 보라색 그라데이션 이용
  
• 보라색 purple + 사람들 people(s)를 합쳐 purples로 결정
  

• 2021.01.01 ~ 05.07 (front 1인, back 1인) / 1차 완성, 배포
• 2021.06.08 ~ 06.16 / 프로젝트 개선

• git clone https://github.com/jellybrown/Purples-sns.git
• npm install
• npm run start

• React, Next

• Redux, Redux-saga ➡ Redux-toolkit

• React-hook-form (유효성 검사)

• styled-components

• ant-design, slick (css 라이브러리)

• React-reponsive (반응형 구현)

📦 back
📦 front
┣ 📂 components
┃ ┣ 📂 ..
┃ ┣ 📂 ..
┃ ┗ 📜 ..
┣ 📂 hooks
┃ ┣ 📜 useModal.js
┃ ┗ 📜 ..
┣ 📂 pages
┃ ┣ 📂 post
┃   ┗ 📜 [id].js
┃ ┣ 📜 ..
┃ ┗ 📜 ..
┣ 📂 public
┃ ┗ 📂 static
┃   ┗ 📜 ..
┣ 📂 redux
┃ ┣ 📜 AuthSlice.js
┃ ┣ 📜 index.js
┃ ┣ 📜 PostSlice.js
┃ ┣ 📜 store.js
┃ ┗ 📜 UserSlice.js
┣ 📂 styles
┃ ┣ 📜 ..
┃ ┣ 📜 ..
┃ ┗ 📜 ..
┣ 📂 utils
┃ ┣ 📜 dynamicSort.js
┃ ┣ 📜 timeAgo.js
┃ ┗ 📜 ..

스크린샷 화면 기준으로 구현 내용을 보고싶은 경우, 블로그👈로 구경와주세요!

• 피그마로 전체 페이지를 기획 및 디자인했습니다.

• react-hook-form 라이브러리를 이용하여 유효성 검사를 적용했습니다.

• 기존 Redux-saga 코드를 Redux-toolkit으로 변경했습니다.

• react-resposive를 이용해 PC와 모바일 버전의 여백과 컴포넌트 렌더링 여부를 조정했습니다.

• 디자인 라이브러리(antd)에서 제공하는 컴포넌트를 이용하여 반응형 디자인을 적용했습니다.

• 상세페이지에서 미리 페이지 정보를 가져올 수 있게 dispatch했습니다.

• 프로젝트를 진행하며 오류나 개선사항에 대해 같이 볼 수 있다면 좋겠다는 생각이 들어 노션에 정리하여 공유했습니다.

• PC

• mobile

혼자만 해서 add, commit, push만 알았었는데, 스터디를 하며 깨달은 것은 이렇습니다.

• 작업 단위의 커밋 필요
  
• fetch, pull, merge 등 다양한 명령어들을 사용해야 하는 것
  
• git은 혼자해서는 깨우치기 어렵다는 것
  

제가 앞으로 보완해야 할 점들을 깨달았습니다.
아직 부족하지만 공부하며 아래와 같은 점들을 하나씩 실천해나갈 생각입니다.

• 제안하고자 하는 기술에 대한 이해도
  
• 프로젝트 세부 계획/ 진행상황 체크 (문서화 하기)
  

실제 서비스처럼 만들고 싶다는 마음에 시작했는데, 생각하지 않았던 곳에서 에러가 종종 발생했습니다.
터미널에서 에러를 읽는 것은 어렵지 않았지만,
모르는 것들을 영어로 검색 해야하는데 장문의 문장들은 이해하기 힘들었습니다.
앞으로 API문서와 블로그 읽기를 위해 꾸준히 영어공부를 할 생각입니다.
지금은 유데미와 유투브 등으로 틈틈이 개발 강의를 듣고있습니다.

구현은 했지만 아직 많은 부분에서 업그레이드 해야함이 느껴집니다.
디자인도, 코드도, 기능도 차근차근 업그레이드 할 예정입니다.

이용하러 가기

가입이 귀찮으면 ID: [email protected] / PW: 123123 으로 구경 😎