글이 너무 길어질 것 같아서,
자세한 것들은 포스팅을 따로 하여 링크를 첨부하였으니
"📌" 아이콘이 달린 링크를 꼭 함께 참고해주시면 감사하겠습니다
🎀 프로젝트 소개
반려동물 용품을 저렴하게 사고 팔고, 커뮤니티를 통해 최신 반려동물 정보를 빠르게 공유할 수 있는 커머스 플랫폼.
배포 주소 : 바로가기
깃헙 주소 : 바로가기
노션 주소 : 바로가기
🤓 나의 R&R
- LocalFont 기본 설치
- 공통 레이아웃 (헤더, 푸터)
- 랜딩 페이지 (/)
- 상품 목록 페이지 (/product)
- 상품 상세 페이지 (/product/[id])
- 반려동물동반 페이지 작업중
🎀 프로젝트 진행하며 배운 것
🍀 tanstack query 훅으로 분리하기
처음으로 dto.ts 라는 파일을 생성해서 타입을 따로 지정해 두고
useMutation 훅도 만들어 보고, error 관련 처리도 해보았다.
관련한 포스팅은 아래 링크에서 볼 수 있다.
📌 훅으로 분리?! 와 어캐 했음??? 당장 보러 가기!!
🍀 storybook
나는 특히 공통 컴포넌트에 유용하게 사용하였다.
props를 코드를 보면서 살펴볼 필요 없이, storybook에서 테스트하며 살펴볼 수 있어 편리했다.
또 storybook에서 제공하는 docs 기능도 유용하게 활용했다.
설명글이 필요한 컴포넌트에 대해서는 docs를 반드시 생성하여 도움될 수 있게 했다.
특히 이미지에 나와있는 CommonCheckBox 컴포넌트의 경우,
같은 팀원 H님에게 칭찬도 받았고 사용하기 유용했다는 피드백도 받을 수 있었다 🤓
아래 링크는, storybook에도 프로젝트의 공통 스타일을 적용 시켜주는 방법에 대한 포스팅이다.
📌 storybook에 theme/GlobalStyle 적용하는 법 보러가기!
🍀 NextAuth로 OAuth 구현
나는 이번에 Naver OAuth 구현 관련해서 자료 조사를 맡게 되었다.
OAuth는 처음해 보는것인데, 이왕이면 NextAuth 라이브러리를 사용해서 간편하게 구현해 보고 싶었다.
실제 우리 서비스는 백엔드에서 관련 쿠키를 받아 로그인/로그아웃 시켜준다.
하지만 나는 딱 프론트에서 알아서 쿠키 받아 로그인 시켜줄 수 있는 것 까지 구현하였다.
해당 포스팅은 아래 링크에서 확인 가능하다.
🍀 Next.js LocalFont
넥스트에서 제공하는 LocalFont를 사용하면 폰트 최적화를 해낼 수 있다.
폰트도 최적화가 필요해??
필요하더라요!!
- 레이아웃 shift가 사라진다. (사용자 경험 향상)
- build 타임에 미리 구글 폰트 다운 해둔다. (속도 향상)
뭐든 최적화 안하는 것 보다 하는게 좋은 것 같다 ㅎㅎㅎ
그리고 내가 어떻게 프로젝트에 LocalFont를 적용했는지,
스토리북에는 폰트를 어떻게 적용할 수 있었는지 포스팅해보았다.
해당 글은 아래 링크에서 확인해볼 수 있다.
🍀 Next.js 이미지 최적화
Image 컴포넌트를 사용하면 이미지 최적화를 해주는것은 알고 있었지만
자세하게 고민하면서 사용해 본적은 없었다.
이번 프로젝트때에는 api가 나오지 않았을 때의 시간을 빌려 조금 자세히 공부해 보았다ㅎㅎ
🍀 dompurify로 XSS 막기
상품 상세 페이지에서 dangerouslySetInnerHTML을 사용할 일이 있었다.
아무 생각없이 썼는데, 팀원 H님이 이대로 사용하면 XSS(Cross Site Script)라는 공격에 취약하다고 하셨다.
악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 기법을 말한다. 공격에 성공하면 사이트에 접속한 사용자는 삽입된 코드를 실행하게 되며, 보통 의도치 않은 행동을 수행시키거나 쿠키나 세션 토큰 등의 민감한 정보를 탈취한다.
크로스 사이트 스크립팅이란 이름 답게, 자바스크립트를 사용하여 공격하는 경우가 많다. 공격 방법이 단순하고 가장 기초적이지만, 많은 웹사이트들이 XSS에 대한 방어 조치를 해두지 않아 공격을 받는 경우가 많다. -출처
그리고 XSS에 대항할 수 있는 해결법으로 DOMPurify라는 라이브러리를 추천해 주셨다.
import DOMPurify from 'dompurify';
...
<p
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(banner.description),
}}
/>위와 같이 작성해 주면,
sanitize라는 말에 걸맞게 XSS 공격으로 부터 '소독'해 준다.
🍀 React에서 Swiper 커스텀하기
퍼블리셔일 때 슬라이드 써야하는 일이 있으면 무조건 Swiper를 사용했었다.
React 환경에서는 처음으로 사용하게 되었는데, 오히려 html, javaScript위에서 쓰는 것 보다 더 쉬웠다!
🎀 트러블 슈팅
❗️ Next.js page router 로딩 넣기
loading 컴포넌트를 lottie file을 사용해서 넣어주었다.
app router 부터 경험했던 나는, 당연히 loading.tsx 파일을 만들어 위치시켰는데
아무리 테스트해 보아도, 내가 설정해준 loading이 적용되지 않았다...
문제 해결은 _app.tsx 파일에서 useEffect 활용해서 해결 보았는데
자세한 해결 방안은 아래 링크에서 확인 가능하다!
❗️ DOMPurify SSR & CSR 충돌 오류
dompurify__webpack_imported_module_2___default(...).sanitize is not a function유독 Swiper 안에 사용한 DOMPurify에만 오류가 났다.
이는 SSR과 CSR의 충돌로 생긴 오류인 것 같았고, dynamic을 사용해 해결하였다.
자세한 해결법 포스팅은 아래 링크에서 확인 가능.
❗️ storybook 설치와 함께 생긴 수많은 lint 오류 해결하기
스토리북 설치할 때 우당탕탕 에러가 정말 많이 났었는데
아래 링크에서 어떤 오류가 있었고, 어떻게 해결했는지 포스팅해 보았다.
🎀 외부 디자이너/백엔드와 협업하기
솔직 담백하게 협업 소감을 써보겠다.
백엔드와 디자이너의 팀 참여도가 많이 아쉬웠다.
코드잇 소속의 스프린터와 달리, 외부에서 오신 분들이라 그런지 목표가 다른 것 같았다.
특히 아쉬웠던 점은 우리와 달리 결여된 "간절함"이다.
간절함이 없어서일까, 그들은 팀회의에 잘 참여하지 않았다.
그로인해 당연히 프로젝트 기획에 대한 이해도 낮아서...
요청과 정 반대의 결과물을 전달받기도 했다.
코드잇에서 진행하는 프로젝트에는 실무 경험자가 거의 없기 때문에
프론트엔드, 백엔드, 디자이너 할 것 없이 모두가 함께 시간과 열정을 쏟아야 결과물이 나올까 말까 하는 상황인데,
서로 자기 위치만 고집하며 차일피일 미루려하는 모습에 아쉬움을 참 많이 느꼈다.
물론 우리 5팀 프론트엔드는 똘똘 뭉쳐서 이겨냈음!
어떻게?
이렇게!
🍀 아쉬운 사람이 더 일하자.
"그냥 프론트가 해달라는대로 다 해주겠다."
"대신 백엔드 개발자는 기획과 디자인을 몰라도 된다."
실제로 프로젝트 진행하면서 백엔드 개발자에게 들었던 말이다.
그런 고집에 백엔드 참여 없이 오로지 프론트에서 홀로 dto를 작성해서 요청을 드렸다.
여기서 발생한 문제점은 아래와 같다.
- 문제점 1: 프론트가 어설프게 짠 dto를 공유 없이 수정하여 배포. 프론트에서 설계해 둔 속성 이름과 백엔드 속성 이름이 달랐다.
- 문제점 2: 기획 의도와 많이 다른 api 설계로 "작업 불가".
그래서 우리는 지속적인 팔로업과 수정 요청 메시지를 보내 해결했다 ㅋㅋㅋ
실제 디스코드를 캡쳐해 왔다.
그 중 가장 많았던 요청은 사실 api 언제 나오냐는 요청보다, api 수정 요청이었다...
🍀 하지만, 실패를 통해 배울 수 있었다
혹시 또 우리와 같은 협업 프로젝트를 선택하신 분들이 계신다면
위 영상을 반드시 보고 시작하길 바란다.
바쁜 분들을 위해 해당 영상을 요약 해보겠다.
api 명세는 백엔드 개발자와 같이 작성하자.
그렇게 api 설계를 같이 해서 프론트와 백엔드 속성 이름이 다른 오류를 방지할 수 있다.
배포 전에 공유를 반드시 해주세요 ㅜㅜ
작업 잘 하고 있다가 500에러와 함께 힘들게 만든 데이터가 싹 날아가는 경험, 자주 겪었다.
사전에 백엔드 배포 공유가 되지 않아 처음에는 이게 무슨 날벼락인가 싶었다...
협업에서는 사소한 것이라도 무조건 공유하자.
만약 api에 변경된 사항이 있다면, 반드시 정리해서 공유를 해야한다.
응답값이 달라진 경우,, 프론트에서 오류가 나기 때문이다.
나의 시간이 소중한 만큼, 타인의 시간도 소중하다 ✨
소통과 배려를 통해서 서로의 귀중한 시간을 아껴 최고의 결과물을 만들어 내보자.
앞으로는 협업할 일만 남은 것 같은데,
위 사항을 잘 숙지해서 훌륭한 협업을 할 줄 아는 개발자가 되도록 해야겠다.
🎀 행복한 우리팀 (짤 모음)
나는 사람들이나 집단의 분위기에 나를 맞추는 편이다.
조용한 분위기, 떠들썩한 분위기 모두 적응 가능하다.
물론, 내가 선호하는 분위기는 웃고 장난도 칠 수 있는 가벼운 분위기!!
우리 팀이 딱 그랬다.
서로 웃고 떠들지만, 선 넘는 장난을 치지도 않는 그런 완벽한 곳.
🍀 밍브스 선정 올해의 팀, Team 5
우리 모두 최소 IQ 300 이상! ~^^
🍀 주접 떨기
이번달 친구비 결국 받아주지 않으셨따...✨
🍀 힘들땐 게임을 해
api 안나와서 힘들고 지칠때 우린 게임을 했따.
물론 날 버리고 두명이서만,,, ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
🎀 테크 블로그 수상
🍀 테크 블로그 첫 수상자가 나라니!?
사실은,,, 테크 블로그 수상자가 나라는 소식을 듣고 ,, 쪽팔렸다.
내 블로그는 사실 정확한 정보를 전달하는데에 목적이 있진 않다.
- 내가 공부했던 것들을 까먹었을 때 다시 참고하기 위함
- 나의 개발 성장 일기와 기록
- 어쩌면 나와 같은 에러를 겪었을 사람들에게 해결 방법을 공유
위 세가지 이유로 글을 쓰고있기 때문에
과연 "테크" 블로그에 적합한가,,, 의문이 많이 들었다.
하지만 같은 스프린터 동기들은 물론이고, 멘토님에게도 축하 메세지를 받으면서
"앞으로는 기술적으로 정확한 내용을 담기위해 노력해야지"라고 생각하게 되었다.
수상자에게 주어진 3세대 에어팟 인증 🎧
앞으로는 많은 사람들이 보고있다고 생각하고
책임감 있는 글을 포스팅을 해야겠다. 💪🏼
🎀 코드잇 스프린트를 수료하며
🍀 많이 배우고 느끼고 갑니다.
코드잇 스프린트 프론트엔드 개발자 과정을 지나오면서
정말 많은 사람들을 만났고, 성장할 수 있는 기회를 가지게 되었다.
퇴사 후 방황을 많이 한 것 같은데,
부트캠프를 통해 내가 왜 개발직을 선택했는지 그리고 앞으로 어떤 마음가짐으로 개발을 대해야할지 바로 잡을 수 있었다.
특히 "기술"적인 부분도 중요하지만 "소통/배려"가 얼마나 중요한지 다시금 깨닫게 되었다.
6개월이란 시간 동안 이렇게 많은 변화와 성장을 겪기도 쉽지 않을 거 같음 ㅋㅋㅋ
그러니까 지금부터는 이렇게 보낸 귀중한 시간을 바탕으로 실무에서 잘 해내는 일만 남은 것 같다.
🍀 앞으로의 목표
이미지 출처 :: ‘이 시간은 온전히 저를 위해 써요’ 새벽 4시 50분 첫 차로 출근하는 삼성전자 반도체 개발자 | the 블루 아워 EP.7
백수로 공부하면서 주변 눈치도 많이 봤고
불확실한 현재 상황 속에서 개운하지 못한 하루하루를 보내기도 했다.
그때마다 위 영상을 보면서 마음을 다잡았던 것 같다.
내가 하고 있는 일을 내가 사랑해주지 않으면 무슨 소용인가!!
나를 필요로하는 곳으로의 출근이 기다려지는 주말을 보낼 수 있는 내가 되어야지.
코드잇 스프린트는 여기서 막을 내리지만,
내가 직접 짠 코드로 수십, 수백 아니 어쩌면 수천만명이 사용하는 웹페이지가 돌아가는 그 날까지,
내가 누군가에게 도움을 받아 성장할 수 있었던 것 처럼, 나도 누군가의 성장에 도움이 될 수 있을 때까지
스프린트를 절대 멈추지 말아야겠다. 🏃🏻♀️ 💨
내 개발 인생 스프린트 아자아자 화이팅!!!
🎀 피어리뷰 모음
