[TIL] 실전프로젝트 끝 230210

정말 6주가 어떻게 갔는지 모르겠다.
시원 섭섭하다. 허망하기도 하고 후련하기도 미련이 남기도하고 정말 여러 감정이 든다.
나만 모른 닭 🐔
https://namoldak.com/

나만 모른 닭 namoldak

정말 힘들었는데 그만큼 애정이 갔던 프로젝트... 내가 낳은 자식 같다.

이번 실전 프로젝트에서 내가 맡았던 기능들과 관련 기술, 방식
1. 이메일 회원가입 및 로그인
- 회원가입 시 닉네임 및 이메일 중복확인, 유효성 검사
-> useForm, yup을 함께 쓰면 에러 메시지를 help text로 보여줄 수 있어서 좋다. schema로 유효성 검사 내용을 지정할 수 있다.

2. sns 회원가입 및 로그인
- 카카오 회원가입 및 로그인
-> 카카오 인가코드를 백엔드에 주고 토큰을 받는 방식. env 환경 변수 처리와 redirect URL 개념을 확실히 알아야 함.

3. access token, refresh token
- JWT 발급 후 보안을 위한 Refresh token 도입
-> 최초 로그인 시 access token과 refresh token을 같이 발급받고, access token의 유효시간이 만료되면 refresh token만 서버로 보내서 access token 재발급 요청함. 이때 refresh token은 재발급 요청 시에만 header에 담아서 줘야 함. 토큰 재발급 api가 status 코드 200으로 정상 처리 응답을 보낼 때 response header에 있는 새로운 access token 값을 넣어줌.

4. 실시간 채팅
- WebSocket + stomp client. StompJs client 객체를 만든 후 connect, subscribe, publish 흐름대로 진행됨
-> setState에 관해 깊게 파볼 수밖에 없었다.

5. 타이머 만들기
- setInterval 함수로 뚝딱! parseInt로 초를 10진수로 변환해야 에러가 나지 않는다는 블로그를 봤던 게 시간을 아꼈던 신의 한 수

6. 댓글 무한스크롤
- Intersection Observer API를 이용한 무한스크롤 구현. 댓글을 redux toolkit으로 전역 관리해서 그걸 다 뜯어고치는 게 훨씬 더 오래 걸렸다. 익숙한 길을 택하기보다 여러 가지를 고려해서 잘 생각해서 낯설더라도 맞는 길을 선택해야 시간을 절약할 수 있다는 것을 느꼈다.

7. 날짜 형식 변환 모듈 만들기
- 날짜 형식을 변환하는 DateTimeFormat 이 유용했다. 2023.02.11과 23.02.11 이렇게 2가지 형식이 필요했고 월 앞에 0을 붙이고 싶어서 replaceAll과 slice를 활용했다. 알고리즘 주차 때 배운 자바스크립트 함수들을 잘 써먹을 수 있어서 좋았다.

api를 호출하는 게 처음에는 정말 그렇게 어려울 수 없었는데 이제 api만 호출해서 처리하면 된다고? 아싸 감사합니다 백엔드 여러분들 최고~ 이렇게 바뀌었다ㅋㅋ

props를 줘서 공통 컴포넌트를 만드니까 코드도 짧아지고 효율적이어서 좋았다. 다른 프로젝트에도 써먹을 수 있는 예쁜 인풋과 버튼을 만들고 싶다. atomic design pattern도 써보고 싶다.

배경 이미지별로 layout을 만들고 outlet으로 공통 스타일을 적용한 후 중첩 라우팅으로 카테고리에 맞는 페이지별로 css를 적용하는 게 정말 편리했다. 비효율적인 코드를 다 뜯어고쳐서 한 번에 적용했을 때의 쾌감이란ㅎㅎ그때 아마 밤을 새웠던 날이었던 것 같은데 9시간 넘게 한 자리에 앉아있었다. 그런데 그걸 시계를 보고 깨달았다. 내가 UI 이제 힘들다 힘들다 해도 좋아하는구나 싶었다.

폰트를 적용하는 게 안 돼서 계속 마음이 불편하고 답답했는데 woff2로 적용하고 fallback 하는 방법을 배웠다. 내가 힘들 때 어떻게 알고 찾아와서 도와주는 걸까? 정말 다행이었다. 나도 힘이 되어주는 사람이고 싶다.

이미지를 최대한 줄이고 직접 css로 구현하는 게 최적화에 가장 좋은 방법이라는 걸 깨달았다. 이미 적용한 이미지들을 다 바꿀 시간이 없어서 다른 UI 개선에 집중했지만 이제 프로젝트를 하면 절대 이미지는 최소한으로 써야겠다.

리프레쉬 액세스 토큰 작업을 몇 번이나 다시 했는지 모르겠다. axios instance의 소중함을 절감했고 백엔드와 소통할 때 어떻게 설명해야 하는지도 많이 느꼈다. 내가 경험이 많았다면 더 알기 쉽게 설명할 수 있었을 텐데 죄송하고 감사했다.

셀렉트 박스를 ul li로 만들려니 처음에는 막막했지만 막상 시작하니 생각보다 굉장히 간단했다. 지레 겁먹지 말자!

spotlight를 받은 경우, 게임에서 발언권을 얻은 경우 유저 카드의 색상을 다르게 적용해야 했다. spotlight 값을 제대로 받은 것은 확인됐는데 video 태그가 있어서 classname으로 css를 다르게 지정해도 적용이 안 됐다. 이게 너무 골치 아팠는데 발언권을 얻은 사람과 아닌 사람 구분을 주려면 반드시 필요한 부분이어서 못하겠다는 말이 목구멍까지 나와도 말이 안 나왔었다. 온갖 방법을 다 시도해 보다가 결국 발언권을 얻은 경우의 스타일을 적용할 div를 따로 빼놓고 postion absolute로 기존 요소 위에 해당 div를 겹쳐서 해결했다. 전부 초록색으로 보일 때 너무 기뻐서 혼자 소리 지름ㅋㅋㅋ

첨부파일 이미지 업로드도 따로 공통 컴포넌트로 만들어 관리하니까 글 작성 수정 페이지 컴포넌트의 기능에 필요한 함수들만 남아서 간결해졌었다. 프로젝트를 진행하면서 계속 리펙토링과 폴더 파일 구조를 생각했었다. 사람이 직접 설명하지 않아도 폴더 구조, 파일명, 코드만 봐도 이해되는 코드가 정말 좋은 코드라고 생각했다. 파일 하나 이름을 바꿀 때도 팀원들의 의견을 묻거나 상황이 여의치 않으면 나중에 하나씩 내가 왜 이렇게 바꿨는지 이유를 명확하게 설명하는 것도 신경 썼다. 우리가 같이 하는 프로젝트니까 이렇게 작은 부분들까지 신경 쓰는 게 맞다고 생각했고 팀원들이 늘 의견을 잘 따라주고 더 좋은 의견을 잘 내줘서 정말 좋았다.

그 외에 닉네임 변경, 로그아웃, 회원탈퇴도 까먹지 않을 것 같다.
이제 컴포넌트 이름만 봐도 아 저기 무슨 기능 들어갔지 css 어떻게 적용했지 훤하다.

우리 팀 우리 반 동기분들께 배운 내용들, 디자이너님과의 협업을 통해 느낀 소통의 중요성, 부리더로서의 역할과 책임, 고군분투 아픈 손가락 UI, 아직 마음속에 남은 말들이 많다. 웹페이지를 딱 보면 UI 이거 이렇게 해야겠네라고 바로 캐치할 수 있는 눈을 가지고 싶다.

내가 이미 받은 것들에 감사하며 더 욕심내지 말고 다른 사람에게 부담 주지 말고 스스로 밝게 빛나서 주변을 환하게 비춰주는 그런 사람이 되고 싶다. 말실수도 많이 하고 짜증도 내고 불평 불만하거나 지쳐서 아무 말도 안 하거나 예민해지기도 했었다. 아직도 이렇게 많이 부족한 나를 충분하다 괜찮다 할 수 있다 잘하고 있었고 잘하고 있고 잘 될 것이다 믿어주고 응원해 주는 사람들이 있어서 행복하다.