Cho-SangHyun/TeenTam-front

📌 요약

오직 10대들을 위한 커뮤니티로 활용할 수 있는 웹사이트입니다. 대학생들이 자주 사용하는 커뮤니티로는 에브리타임, 직장인들이 자주 사용하는 커뮤니티로는 블라인드 등이 있는 반면 1대 학생들은 주로 카카오톡 오픈채팅방을 활용해서 소통한다는 말(링크)을 듣고, 그들을 위한 정형화된 형식의 커뮤니티를 만들어 10대를 위한 소통의 창구를 만들자는 생각으로 개발했습니다.

주요 기능

✅ 원하는 카테고리(아이돌, 친구, 진로 등..)의 게시글 생성 / 조회 / 수정 / 삭제, 댓글 작성 및 좋아요
✅ 원하는 게시글 검색(작성자명 & 글/본문 내용 별)
✅ 본인 학교에 맞는 급식 조회
✅ 게시글 작성자 및 댓글 작성자에게 쪽지 전송 및 쪽지 확인 기능 등
✅ 각자에 맞는 시간표 생성 및 수정 기능
✅ 이 외 프로필 이미지 수정 기능 등..

🔍 느낀 점

단순히 온라인 강의 내용을 따라 하며 배우던 React.js를 이용한 첫 팀 프로젝트 경험이 된 웹사이트입니다. 무언가를 만들어보며 그때마다 필요한 걸 공부해가는 야생학습이 효과가 좋다고 생각해 무작정 시작한 팀 프로젝트였고, 백엔드 개발자와 협업하여 서비스를 만들어보는 경험을 얻을 수 있었습니다.

또한, 개념적으로만 알고 있던 JWT를 처음 사용해보는 계기도 됐습니다. 회원가입/로그인 시 서버로부터 JWT를 발급받고, Refresh Token은 쿠키에 저장하고 Access Token은 HTTP Request의 Header에 담겨지도록 설정하는 방식으로 JWT를 활용해봤습니다.

그리고, 주 사용자가 10대인 만큼 편리한 사용자 경험(UX)를 제공하고자 노력하는 과정에서 같은 기능이어도 어떤 식으로 만드는지에 따라 UX가 좋아질 수도, 나빠질 수도 있다는 것을 느끼며 사용자 경험을 고려하는 개발의 중요성을 배울 수 있었습니다.

🔨 기술스택

Frontend : React.js, React Router, PostCSS
Backend : Django, Apache
Database : SQLite

👀 둘러보기

메인페이지 (로그인 전, 로그인 후)

로그인 / 회원가입 페이지

게시글 목록 페이지

게시글 상세 페이지

게시글 검색

쪽지 주고받기

시간표 페이지

시간표 생성 및 수정

마이페이지

⚙️ 사용방법

Node.js 설치(LTS버전으로) (링크)
이 레포지토리 클론받기

>> git clone https://github.com/Cho-SangHyun/TeenTam-front.git

package.json에 적혀있는 패키지들 설치 (아래 명령어 입력, 클론된 폴더 안에서 해야 함)

>> npm install

yarn 설치(패키지 매니저)

>> npm install yarn --global

구동

>> yarn start

Cho-SangHyun / TeenTam-front