[수풀] 프로젝트 최종 회고

들어가며

메인 프로젝트를 배포하고 부트캠프를 수료하자마자

원티드 프리온보딩 프로그램에 참여하게 되면서 

이제야 프로젝트 회고를 작성하게 되었다.

 

한 달 동안 기업과제를 하면서 다른 사람 코드도 많이보고

기능 구현도 여러 가지 해보다 보니 실력이 늘기는 늘었는지

예전에 짰던 코드들에서 부족한 부분이 많이 보였던 것 같다.

 

회고를 작성하면서 리팩터링은 어떻게 하면
좋을지 정리해보고자 한다.

---

프로젝트 소개

프로젝트 작업기간 2022.09 ~ 2022.10 (30일)

1. 스터디와 프로젝트의 팀원을 구하기가 어렵다는 기존의 문제점을 극복하고자
   쉽고 빠르게 게시글을 작성하여 팀원을 구할 수 있도록 구현했습니다.
   
   
2. 기존의 스터디, 프로젝트 모집글들은 어떤 기술 스택을 이용하는지,
   어떤 분야의 팀원을 모집하는지 모호했습니다.
   수풀의 모집글들은 사용 기술 스택과 세부적 모집 분류를 포함하여
   사용자가 정확하게 원하는 글에 지원할 수 있도록 구현했습니다.
   
   
3. 어떤 기술 스택을 사용해야 인기 있는 모집글이 될지 고민하는 사용자를 위해
   인기 스택을 참고하여 트렌디한 기술을 활용하는 모집글을 작성할 수 있도록 구현했습니다.

---

담당기능 및 배운점

회원가입 페이지

-  Input 컴포넌트 제작

input은 회원가입, 로그인, 게시글 작성 등 여러 부분에서

재사용할 수 있을 거라 판단되어 컴포넌트로 제작

 

- 유효성 체크 커스텀 hook 제작

input 값을 useEffect의 의존성 배열에 추가해서 값이 변경될 때마다

해당 input에 올바른 값이 들어왔는지 체크하는 함수가 호출되도록 hook을 제작

 

- 조건부 렌더링

위의 모든 input 값의 유효성에서 true 값을 받아야지만

api 요청할 수 있는 버튼이 활성화되도록 구현

 

---

 

로그인 페이지

- 회원가입에서 사용된 hook 재사용

로그인도 회원가입과 동일한 유효성 체크 hook을 사용

- 에러메시지

로그인 실패 시 alert 창이 뜨면 사용자가 닫기 위해 버튼 한 번 더 클릭해야 하기 때문에

 ux에 악영향 끼친다 판단해서 에러 발생 시 에러 메시지가 조건부로 렌더링 되도록 구현

 

---

 

게시판 페이지

- 게시글 필터링

1. 스터디 / 프로젝트 모집 

2. 기술 스택

3. 모집 중 / 모집 완료 

시간이 가장 많이 들어간 페이지와 기능으로

위 세 가지 옵션으로 게시글을 필터링을 할 수 있다.

필터링된 배열의 값이 변화 할 때마다

useEffect를 통해 리렌더링되도록 구현했다.

 

기슬 스택 클릭 시 서버에 api요청을 통해서 넘어오는 데이터 값이 바뀌도록

구현을 했다면 별 어려움 없이 구현이 가능했을 것 같고 

데이터가 많은 실제 서비스였다면 그렇게 구현하는 게 맞다고 생각했다.

 

하지만 백엔드 분들도 구현해야 하는 다른 기능이 남아있었고

데이터의 규모가 작기 때문에  클라이언트에서도 충분히 구현 가능한 기능이라

판단해 프론트엔드 측에서 구현하기로 결정했다

 

---

 

에러 페이지

- 잘못된 url 입력 시 오류 페이지 이동

react-router-dom을 사용해서

구현되어 있는 페이지 컴포넌트에만 접근할 수 있도록 함

 

---

 

네비게이션 바

로그아웃 상태

로그인 상태

- 네비게이션바 조건부 렌더링

로컬 스토리지의 token 유무를 통해

각 로그인 / 로그아웃 상태에 따라 조건부 렌더링되도록 구현

 

---

반응형 페이지

 

- 모바일 환경에서도 이용 가능

미디어 쿼리로 반응형 페이지 구현

네비게이션 바 기능을 햄버거 메뉴로 모아서 볼 수 있도록 구현

---

느낀점

1.  로그인, 회원가입 기능 구현 성공

프리 프로젝트 기간에 인증 인가에 대한 지식이 부족하고

백엔드 팀원분들도 이 부분을 어려워하셔서 많이 애먹었는데

메인 프로젝트에 들어와서 기능을 구현할 수 있어서 좋았다.

 

기간이 짧다 보니 로그인 말고 다른 기능 구현에 집중하기 위해 쿠키, 세션 방식은 못 해보고

로컬스토리지에 토큰을 저장하는 방식만 사용해본 것은 아쉬웠다.

그래도 이전 프로젝트 때 제대로 구현하지 못 한 기능을 

이번에 구현할 수 있다는 점이 정말 즐거웠다😀

 

(아쉬웠던 점)

- 구글 OAuth

라이브러리를 이용해서 구글 OAuth를 적용하려했으나

우선순위에 밀려서 구현을 하지 못 함 

인증 인가에 대한 공부도 더 해보고싶었는데 이부분이 아쉬웠음

 

- 쿠키, 세션

위와 마찬가지로 인증 인가를 로컬스토리지로 구현만 해봐서 

좀 더 다양한 방법을 사용해보지 못 한 게 아쉬웠음

이론적인 부분은 이해하고 있는데 

실제로 적용을 하려고 하니 생각보다 잘 되지 않았음

---

2. 게시글 필터 기능 구현을 하면서 고차함수랑 친해짐

백에서 넘어오는 데이터가 어쩌다 보니 depth가 깊은

사용하기 힘든 데이터로 넘어오게 되었는데 

map, filter, some 사용해 기능을 구현했고 

이 과정에서 고차함수에 대한 이해도가 많이 올라갔다.

 

또 백엔드 분들은 프론트에서 데이터를 어떻게 사용하는지

자세히는 모르시기 때문에 반드시 사용하기 쉬운 형태의 데이터로

쏴달라고 잘 설명해드려야 하는구나 싶었다.

 

(아쉬웠던 점)

필터링 함수를 간단하게 짤 수 있을 것 같은데 너무 복잡하게 작성했다.

게다가 며칠 지나고 보니까 내가 짠 코드인데도 이해하기 힘들었다.

꼭 리팩터링해야겠다 싶었다.

 

---

3. 조건부 렌더링 구현

이제 조건문, 삼항연산자를 이용해서

특정 상황에서 원하는 컴포넌트가 렌더링되도록 구현하는 것은

쉽게할 수 있을 정도로 됐다

 

예전에는 어렵게 느껴졌는데 

반복해서 구현하다보니 잘할 수 있게된 듯 하다.

 

(아쉬웠던 점)

프로젝트 끝나자마자 원티드 프리온보딩 과정에 참여했는데

클린코드에 대한 강의를 듣다보니 if, else if, 삼항연산자는

코드가 지저분해지고 전체 코드를 봐야지만 어떤 동작을 하는 지 

확인 할 수 있어서 좋지 않다는 것을 배웠다

기존에 작성했던 코드는 '&&', '||' 와 같은 논리연산자로

구현하면 훨씬 깔끔하게 작성할 수 있다는 것을 배워서

나중에 한 번 적용을 해봐야겠다 싶었음

 

 

프로젝트 끝나자 마자 다른 프로그램에 참여하느라 늦은 후기지만

좀 더 학습하고난 후에 프로젝트를 보니 어떤 부분을 잘못했고

잘했는지 더 잘 알게 된 것 같다. 

 

프로젝트를 하면서 또 프리온보딩에 참여하면서 가장 크게 깨달은 것은 

프로젝트는 우선순위를 잘 선정해서 기능을 구현하고
제 시간에 맞추는 법이 중요하다는 것이었다.

처음부터 100% 완벽하게 하기보다는 가장 중요한 것부터
순서대로 70 ~ 80% 완성한 뒤 부족한 부분을 보완해나가는 게 훨씬 효율적인 것 같다.

 

이제는 정말 취업전선에 뛰어들어야 되는데도 아직 부족한 지식이 많아서 걱정이 많지만

일단 이력서하고 면접 준비해보면서  앞서 배운 교훈대로 우선순위를 잘 정하고 보완해나갈 수 있도록 해야겠다.

---

TODO

1. 타입스크립트 리팩토링 (완료)

일단 자바스크립트로 구현을 했기 때문에 api요청 시 넘어오는 데이터를 화면에 그릴 때

배열이나 객체 안에 뭐가 들어있는지 콘솔로 찍거나 api문서를 확인해가며

코드를 작성했던 게 상당히 불편했었다.

 

타입스크립트를 배우기 전에는이게 당연한 건 줄 알았는데
진작에 타입스크립트를 썼다면 능률에 좋아졌을 거라 생각이 들었다.

 

원티드 프리온보딩 멘토님께서도 FE 개발자가 타입스크립트를 사용하지 못하는 건

상당한 디메리트라고 강조해서 말씀도 해주셔서 리팩터링 해보면서 

타입스크립트를 좀 더 깊게 공부해봐야겠다 생각이 들었다.

---

 

2. React-Query 도입하기 (완료)

 

React-Query 와 recoil 조합으로 api 통신, 상태 관리를 하면 편하다고 하는데

직접 사용을 안 해보니까 와닿지가 않았기 때문에

기능 구현할 때 직접 적용해볼 필요가 있다고 생각했다.

그래서 프로젝트에 도입해보면서 어떤 부분이 편리한 건지 확인해보려고 한다.