정말 6주가 어떻게 갔는지 모르겠다. 시원 섭섭하다. 허망하기도 하고 후련하기도 미련이 남기도하고 정말 여러 감정이 든다. 나만 모른 닭 🐔 https://namoldak.com/ 나만 모른 닭 namoldak 내 머리에 있는 거 뭐야? 나만 몰라? 😭 ”양세찬 게임” 혹은 “콜마이네임”으로 불리는 키워드 맞추기 게임을 주제로 한 프로젝트 namoldak.com 정말 힘들었는데 그만큼 애정이 갔던 프로젝트... 내가 낳은 자식 같다. 이번 실전 프로젝트에서 내가 맡았던 기능들과 관련 기술, 방식 1. 이메일 회원가입 및 로그인 - 회원가입 시 닉네임 및 이메일 중복확인, 유효성 검사 -> useForm, yup을 함께 쓰면 에러 메시지를 help text로 보여줄 수 있어서 좋다. schema로 유효성 ..
refresh token은 평소에는 헤더에 안 보이고 access token 재발급 요청을 할 때만 request header에 담아줘야 했다. axios instance 에 너무 익숙해져서 바로 axios를 만들고 헤더를 설정하는 것이 낯설었지만 다행히 잘 해결했다. 발표 영상 피드백 중 채팅 트러블 슈팅 내용을 보충해서 팀장님께 다시 드려야 했다. setState 함수의 updater 함수의 메서드가 아니라 그 안의 로직을 풀어서 설명하는 게 어려웠다. 역시 공식문서가 답이라고 공식문서를 찬찬히 읽고 다른 블로그들을 읽으니 이해가 됐다. ⭐️ 필수 에러? [x] 토스트 메시지 계속 뜸 로직 수정 [x] refresh token github readme 수정 컴포넌트 정보 [x] 폴더 별 컴포넌트 정보..
12시간 넘게 잤다 물 먹은 솜같다 목이 아파 그 와중에 운동은 했는데 앉자마자 잠와 자려고 누웠는데 못 끝낸 일들이 신경쓰여서 다시 앉았다. UI [x] 웹폰트 woff2 적용 Refactoring [ ] 중복 스타일 컴포넌트 공통 컴포넌트 분리하여 적용하기 [ ] input 공통 컴포넌트에서 ref를 props로 내려주는 방식 : SignUp, Login, SearchRoom [x] backBtn - Link 안 url 들 props로 주고 하나로 만드는 방법 [x] Link 전부 navigate 로 바꾸기 [x] theme 적용해서 코드 줄이기 [x] 스타일 코드 줄이기, 안쓰는 주석 삭제
오늘 to do ⭐️ 필수 github readme 수정 페이지 주요 기능 [x] 페이지마다 주요 기능들 표로 정리 컴포넌트 정보 [ ] 폴더 별 컴포넌트 정보 및 설명 기술적 의사 결정 트러블 슈팅 도전하고 싶었던 기술들 크로스 브라우징 [ ] 웹폰트 적용 문제 렌더링 최적화 리소스 줄이기(폰트, 이미지) [ ] 이미지(새로고침 등) → 폰트로 적용 코드 [ ] useCallback 사용해서 최적화 image CDN→ 도표, 그래프 등 수치화 자료만들고 github readme 애 update lazy loading : Img 태그 loading 속성에 lazy주거나 IntersetctionObserver 사용 등 전체 UI 수정 (수빈) 로그인 페이지 [x] 카카오 로그인 버튼 업데이트 로비 페이지 ..
서비스 아키텍쳐 프론트엔드에서는 자바스크립트 프레임워크인 리액트를 사용했습니다. 서버와의 api 통신을 위해 axios를 사용했고 전역 상태 관리 tool로 Redux-toolkit을 사용했습니다. 스타일은 styled-components 를 사용하여 작성하였으며 aws Ec2 를 통해 배포하였습니다. 기술적 의사결정 스타일 작성을 위해 Sass와 styled-components 사용을 고려했습니다. Sass는 className을 일일이 지정해야 하고 컴포넌트의 변화에 대한 반응성이 비교적 떨어지는 단점이 있는 반면, Styled-components는 className의 중복이나 오타로 인한 버그를 줄여주고 props의 값에 따라 스타일을 다르게 적용할 수 있는 장점이 있어 채택하였습니다. API 통신에..
오늘의 Todo ⭐️ 필수 브로셔 준비 기술적 의사결정 [ ] Redux toolkit (현빈) [ ] Intersection Observer (수빈) [ ] react-cookie (수빈) [ ] axios(instance) (수빈) [ ] styled-components (수빈) 주요 기술 (공통) [x] 무한스크롤 [x] 소셜 로그인 Feature [ ] 닉네임 변경 중복확인 로직 변경 (수빈) [ ] url env 처리 후 테스트 (수빈) [x] cookie 모듈 닉네임 만료시간 수정 (수빈) UI (수빈) 크로스 브라우징 [ ] 웹폰트 적용 문제 커뮤니티 페이지 [ ] 게시글 제목 내용 댓글 글자 수 제한 [ ] 게시글 검색 시 결과 없을 때 보여줄 문구 전체 UI 수정 [ ] 랜딩 페이지, 게..
[TIL] 230204
내일 기술적 의사결정 추가 MVP 개발 기간 동안, 기술적으로 어떤 의사결정을 했는지 설명 어떤 문제를 해결하고 싶었는지, 어떤 해결책들이 있었고 그 각각의 장점과 단점은 무엇이었는지, 그래서 어떤 것을 선택하게 되었는지 중요한 것은 의사결정을 내리기까지의 당위성(이유)과 합의, 적용 후 결과 주요 기술 + 그 외 라이브러리 정리 UT 개선 내용 추가 전체 UI 재수정 렌더링 최적화 세션 녹화영상 보기 다음주 깃허브 reference 파헤치기 - issue, wiki 렌더링 최적화 페이지별 기능 정리 코드 리펙토링 기술 매니저님 피드백 닉네임 변경 중복확인하면 input 을 바로 disabled 처리하기 refresh token을 서버에만 저장하고 access token만 받는 로직으로 변경 - refr..
카카오톡 로그인이 안된다는 피드백이 있었는데 원인을 못 찾고 있었다. 카카오톡 로그인 동의를 할 때 이메일을 선택값으로 받고 있었는데 이메일이 있어야 access 와 refresh token이 발급되기 때문에 필수값이어야 했다. kakao developers 에서 이메일을 필수값으로 바꾸니 정상적으로 로그인이 됐다. 중복 확인 버튼을 눌렀을 때 유효한 닉네임이면 닉네임 변경 버튼을 누르지 않았는데 바로 닉네임이 변경되는 문제가 있었다. form 태그 안에서는 버튼 하나만 눌러도 다른 버튼들에 걸린 함수들이 전부 실행됐기 때문이다. 모든 버튼의 핸들러 함수에 event.preventDefault(); 를 해야 한다! 닉네임을 입력한 뒤 중복 확인 버튼을 누르지 않고 바로 닉네임 변경을 누르면 '닉네임 중복..
refresh token 구현 토큰 만료 전에 재발급 요청을 보내는 것이 핵심이었다. https://velog.io/@flowersayo/React-Refresh-Token-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%86%A0%ED%81%B0-%EC%9E%90%EB%8F%99-%EA%B0%B1%EC%8B%A0 [React] Refresh Token 을 이용한 토큰 자동 갱신 Refresh Token 보통 로그인 시스템을 구현할때에는 보안을 위하여 accessToken 의 만료시간을 짧게 하고, refreshToken 도 함께 발급하여 accessToken 이 탈취되더라도 금방 만료되게 하여(시간이 짧으면 털어 velog.io https://velog.io/@turret12..
나몰닭 배포 너무 정신이 없었나 보다 TIL을 써야지 하고 잠들었던 날인 듯