Hobbygram(미니프로젝트)

프로젝트 설명

• 관심사에 대한 짧은 이야기와 이미지를 올리고 댓글과 좋아요를 통해 소통하는 공간
• 구현한 카테고리 : 음악 / 여행 / 맛집 / 반려동물

 

프로젝트 기간 

• 2021.04.12 - 22 (10일)

 

팀 구성 / Tool

• Front-End(2) : React
• Back-End(2) : Node.js

---

와이어프레임

• Figma 활용

---

노션을 이용한 협업

• 기획부터 API 설계, 임무분장, 진행상황 등을 노션을 통해 공유하며 프로젝트를 진행하였다.

---

소스트리(GUI)를 활용한 깃 협업

• 여태껏 깃을 협업할 때 사용하는 것에 대한 개념이 아예 없었기 때문에 프로젝트 진행 때마다 막연한 부담감이 있었다. 그래서인지 이번만큼은 확실하게 깃의 활용법에 대해 개념 정립을 한 상태로 프로젝트를 진행해보고 싶었고, 그래서 개발단계 진입 전날 급하게 인프런 강의를 결제하고 벼락치기로 이론을 학습한 뒤 바로 실전으로 적용하며 연습을 했다.
• 강의를 통해 GUI를 처음 접하였고, 초반에 테스트로 시행착오를 겪었지만 어느새 익숙해져서 처음으로 깃을 이용한 협업다운 협업을 진행하게 될 수 있었다. (merge, branch활용 등)
• 이번 프로젝트를 통해 얻게 된 가장 큰 소득이 무엇이냐 묻는다면 깃을 이용해서 그럴싸한 협업을 해본 경험이라 답할 수 있을 만큼 좋은 경험이 되었다고 생각한다.

---

API 설계

 

---

구현한 기능

1. 로그인(로그아웃)

 

• JWT 방식을 활용하였고 토큰을 쿠키에 저장하는 방법을 사용하였다.
• 로컬 스토리지와 세션에 저장하는 방법이 더 있는데 각 방법들의 장단점에 대해서 공부해볼 예정이다.

---

2. 회원가입

---

3. 게시글(C.R.U.D)

3-1. 작성

3-2. 수정

3-3. 삭제

 

• axios를 이용해서 GET, PATCH, DELETE, POST는 이제 확실히 익숙해진 것 같다.

---

4. 댓글(C.D)

4-1. 작성

- 로그인 전

- 로그인 후

 

• 로그인 전에 댓글을 작성하려 하면 막고 로그인 권장 얼럿을 띄웠다.
• 댓글 작성 시간 형태

댓글을 작성하면 표시해주는 날짜 형태(몇 분 전, 며칠 전, 몇 초 전 등...)는 moment 패키지안에서도 .fromNow()를 사용했다.

그냥 fromNow( ) 만 쓰면 영어로 표시되기 때문에 "moment/locale/ko" 도 같이 import 해주었다.

아래 코드는 대충 이런 느낌으로 사용했다! 라는 것을 표현하였다.

import moment from "moment";
import "moment/locale/ko";


const CommentPost = (props) => {
	const {createdAt} = props;
	return(
		<React.Fragment>
			<div>{moment(new Date(createdAt)).fromNow()}</div>
		</React.Fragment>
    )
};



export default CommentPost;

 

4-2. 삭제

 

• 당연한 거지만 내가 쓴 댓글만 삭제할 수 있도록 하였다.

---

5. 좋아요

5-1. 로그인 전

 

• 로그인 없이 좋아요를 클릭하면 로그인 창으로 화면을 전환시켰다.

 

5-2. 로그인 후

• 좋아요를 누르면 하트가 빨개지고 다시 누르면 회색으로 돌아오는 일반적인 좋아요 기능을 구현하였고, 게시글마다 내가 좋아요 한 게시글이라면 상세페이지로 접근할 때부터 빨간 하트로 보이도록 하였다.

---

6. 페이지네이션

 

 

• 백엔드로부터 페이지네이션 처리된 데이터 API를 받고 나니 생각보다 쉽게 구현하였다.
• 소통이 중요하다.

---

7. 카테고리별 게시글 호출(R)

 

• useState로 카테고리 버튼에 onClick 이벤트 함수를 적용하여 클릭할 때마다 카테고리 값의 State 값을 변화시켜주었고 변화하는 카테고리 변수가 들어있는 게시글만 불러오도록 useEffect를 적용하였고 그 두 번째 인자에 카테고리의 state값을 넣어주어 카테고리가 변할 때마다 함수를 실행하도록 적용하였다.

---

8. 반응형

 

• 모바일뿐만 아니라 패드, 갤럭시 폴드 등에서도 화면이 깨지지 않게 설정하였다.

          (1024px / 767px / 414px / 375px / 280px)

 

---

느낀 점

  Node.js와 첫 협업이었는데 나중에 시간 내서 프론트/백 구분하지 않고 Node를 배워두면 좋을 것 같다고 느꼈다. 확실히 백엔드를 어느 정도 이해를 하고 진행을 하면 문제 해결뿐만 아니라 오류를 만났을 때 좀 더 원활히 소통도 이루어질 수 있을 것 같고 해당 오류가 어디 단에서 발생하게 된 문제인지 예측도 가능할 수 있을 것 같다.

중간중간 오류가 생길 때마다 백엔드와 화면 공유를 통해 Insomnia 로 내가 넘겨야 하는 데이터 형태와 그렇게 넘겼을 때 백에서 동작하는 모습 등을 보고 나니 몰라서 느꼈던 답답함이 순식간에 녹아내리는 기분을 느꼈다. 좋았다.

그 외에도 여러 이유들이 있겠지만 결론은 둘 다 알아두면 나중에라도 손해볼일은 없을 것 같다. 공부해보자

 

 

배운 점

• axios 통신 메서드(GET, DELETE, PATCH, PUT, POST) 다섯 가지를 다 써봤다. 써 보고 나니 뭔가 비슷비슷 한 느낌이다.
• 이미지를 주고받을 때는 Formdata 방식으로 서버와 통신을 해야 한다.
• axios 헤더에 토큰을 담아 넘기는 부분이 있었는데 우연히 console로 해당 부분을 다 까 보았다. 덕분에 axios 통신을 할 때 어떤 모습으로 넘어가는지 직관적으로 확인할 수 있게 되어 조금 더 이해의 폭이 넓어졌다.
• 깃을 이용한 협업 스킬이 굉장히 상승했다. 뿌듯하다. 심화 명령어도 공부마저 해볼 것이다.(cherrypick 등)
• 확실히 프로젝트를 할 때마다 뭔가 엄청나게 많이 성장하는 느낌이 든다. 왜 취업을 하고 나서도 사이드 프로젝트를 해야 하는지 조금 알 것 같다.

 

 

github.com/JeongJoo-Lee/HobbyGram-Front

JeongJoo-Lee/HobbyGram-Front