2차 프로젝트 회고

소재현·2022년 9월 13일

project

목록 보기

2/2

프로젝트🧑🏻‍💻

2차 프로젝트 시연영상
프로젝트 깃헙

22.08.29 ~ 22.09.07(10일)
팀원
FE 4명
BE 3명

기술스택

HTML
CSS
Javascript
REACT
styled-components

협업툴

Notion
Slack
Trello

Intro

정말 시간도 정신도 없는 프로젝트였다. 프로젝트 시작과 동시에 건물에 화재가 발생해 대피하여 이틀동안 건물을 사용하지도 못하였고 힌남노 태풍에 의해 전원 재택으로 변경되기도 하였다 안그래도 기업협업도 컨택도하고 이력서작성도하고 연락도 돌려야하는 상황이었으며 추석연휴로 인해서 하루가 줄었기에 환경적으로나 시간적으로나 많이 부족한 상황이었다 그래서 이번 프로젝트는 많을 양을 하는것이 아닌 양보다 질을 택했다 우선 반복되는 부분은 팀 동료와 상의해서 제외하기도 하였고 모두 1차 프로젝트에 해보지 못했던것 위주로 경험하기로 하였다

1주차

1주차는 초기세팅을 한뒤 트렐로를 통해서 각자의 맡은 부분을 티켓으로 나눠서 진행하였다 내가 맡은 부분은 카카오 소셜로그인 REST-API,채용리스트(무한스크롤),상세페이지(캐러셀)을 구현하기로 하였다 1차프로젝트에선 UI적인 부분을 많이 했던것같아서 이번2차프로젝트에선 백엔드와의 통신과 외부 API를 통한 소셜로그인등 1차와는 다른 부분을 경험하고자 하였다

트렐로

우리는 트렐로를 사용하여 매일 아침 Standup Meeting전에 어제한일과 오늘 할일 blocker를 공유하였다 미리 작성해 서로 진행사항과 블로커등을 잘 공유할 수 있었던것 같다
1차프로젝트에서도 standup meeting을 하긴했지만 바로 만나서 급하게 이야기로 하다보니 내가 공유하려 했던부분을 공유하지 못하고 끝나고 시간적으로 소요가 많이 되었는데 그부분을 미리 공유할 부분을 정리해와서 서로의 시간을 효율적으로 관리 할 수 있었다

카카오 소셜 로그인 (REST API)

카카오 소셜로그인에서 우리는 REST API를 사용한 로그인 구현을 경험해 보기로 하였다 요기서 정해야할건 프론트엔드쪽에서 인가코드만 발급을 받아 백엔드에게 보낼것인지 아니면 토큰까지 받아서 보낼지를 백엔드와 정해야했다 우리는 프론트에서 토큰까지 발급한뒤 백엔드에게 넘겨주고 다시 유효성검사를 마친 토큰을 다시 백엔드에게 받기로 하였다
사실 처음 공식문서를 보는법이 익숙하지않아서 블로그등 많은 도움을 받았다 그러고나서 다시 공식문설르 보니 조금이나마 어려웠던부분에 대해서 이해가되었다
처음에 CLIENT_ID 외부 API key들을 그대로 코드상에 노출하면 보안에 위협이 될 수 있다는 사실을 인지 하지못하였다가 나중에 알게되어서 이런 코드상에 유출되면 안되는 정보들은 환경변수를 통해서 관리를 해주었다
env파일을 처음쓰다보니 gitignore파일에 먼저 env를 입력하고 쓰지않아 자꾸 env파일이 추적되는 어려움이 있었다
.gitignore에 등록하기 전에 한번이라도 git으로 관리해버린 파일들은(add, commit 등) 계속해서 git에 의해서 추적이 된다
이를 없애기 위해서는 git의 기존 캐쉬를 삭제해줘야한다.
아래의 명령어를 통해 캐쉬 삭제해주시고 git으로 추적 안되는 것 확인해야한다
- git rm --cached 파일이름
- 리모트의 git cache 삭제 후에는 반드시 리모트와 동기화 해줘야 한다
- git add .
- git commit -m “커밋메시지”
- git push origin 브랜치이름

2주차

2주차는 1주차때 보다 정신이 없었다 기업협업을 나갈 기업도 컨택해야했고 이력서도 피드백을 받아야했다 그래서 우리는 최대한 빨리 기업협업컨택을 모두 마치고 다시 프로젝트에 집중하기로 하였다 1차에서 사용해보지못한 여러 라이브러리도 무한스크롤과 캐러셀을 구현해 보았다 구글링을 통해 사용은 했지만 정확한 개념을 공부해봐야할것같다 그래도 1주차에 UI적인건 모두 끝내놓은상태여서 모두 merge된후 css수정 그리고 백엔드와의 통신만 하면 될줄알았으나 상당히 많은 문제들을 수정하느라 모두 고생하였다 역시 끝날때까진 끝난게 아니다...

react-intersection-observer를 이용해서 무한 스크롤 구현

react-intersection-observer 라이브러리를 사용하여 처음으로 라이브러리를 써보았다 어찌어찌 구글링을 통해서 구현은 해서 그런지 무한 스크롤이 어떤 원리로 동작하는지 개념을 정확하게 모르고 있는것 같다.
기업협업나가기전에 어떤 원리로 동작하는지 꼭 공부해야겠다

마무리

1차 프로젝트를 한번 경험해서 그러지 팀원 모두 어떤식으로 소통을 해야하는지 조금이나마 더욱 익숙하고 성장한것 같고 같은 트렐로를 사용하더라도 더효과적으로 사용할 수 있던것 같다 힘든 시간과 많은 일들이 있었지만 함께 즐겁게 프로젝트를 마무리 할 수 있어서 너무 좋은 경험이었다!! 팀원 모두에게 감사하다

프로젝트를 통해 내가 얻은 것들

외부 API를 통한 소셜로그인을 할수있게되었다
공식문서 보는법을 조금이나마 알게 되었다
라이브러리를 사용하는 법을 조금이나마 알게 되었다
트렐로를 효과적으로 사용하는 법을 배웠다
Query String을 사용하여 fetch주소에 변화를 주는법을 알게되었다
동기와 비동기개념에 대해 조금이나마 알게되었다
스타일드 컴포넌트를 사용해서 레이아웃을 구현해 보았다
useSearchParams를 통하여 쿼리스트링을 이용하는법을 알게되었다
Rebase를 통한 깃관리

나의 부족한점 및 개선점

질문전에 스스로 좀더 찾아보는 습관을 기르자!!
동료와의 소통은 좋지만 적당한 소통!!
구글링을 통해 구현한것을 내것으로 만들자!!

마지막 회고

이번 프로젝트를 통해서 내가 공부를 해야하는부분이 상당히 많다는걸 느꼈다 라이브러리를 사용하긴했지만 구현에 쫒기다보니 개념을 완벽히 이해하지못하고 쓴것들이 상당히 많았고 구글링에서 가져와서 쓰는것들도 상당히 많았다 그러한 개념들을 이해하도록 노력해야겠고 프로젝트마다 느끼는점이 다르고 알면 알수록 알아야하는 부분이 많은 것 같다 프로젝트가 끝나고 팀동료들 끼리 서로 잘한점과 개선하면 좋을 점들을 피드백하는 시간을 가졌는데 나도 느끼고 있던 부분을 다른 사람들도 같은 시선으로 보고있다는 걸 알았고 다음 프로젝트에서 만났을 땐 좀더 개선된 모습으로 만났으면 좋겠다 이번프로젝트에선 팀 동료에게 많은 도움을 받았던것 같은데 나도 언젠간 누군가에게 도움이 되는 개발자가 되고싶다 조금씩 꾸준히 성장하자!!