리젝 😭 구글 플레이 스토어에서 동일한 이유로 몇 번 리젝을 당했다. 파일 문제인 줄 알았는데 로그인부터 안 넘어간다니.. 개발환경이나 릴리즈로 뽑았을 때도 잘 되는데?.. 싶어서 서치 시작. 리젝사유는 다음과 같았다. 계속 일관된 사유였음. ((좀 더 친절했으면..)) 제공하신 로그인 사용자 인증 정보로는 인앱 콘텐츠에 액세스 할 수 없었습니다. 그러다 알게된 새로운 사실. Google Play 앱 서명을 하면 서명 키가 바뀐다! 서명키가 바뀌면, SHA-1 값도 변경된다. 카카오 디벨로퍼에 등록해 둔 key hash 값들로는 로그인처리가 불가능하다. 즉 카카오 디벨로퍼에서 플랫폼의 Android key Hash 값에 Google Play에서 받은 key Hash를 추가해주어야 한다. 앱 서명 키의 k..

Today, What I learned? 이전에 했던 개인 프로젝트를 next.js로 리팩토링하는 과정 중.. 바닐라 JS, HTML, SCSS로 되어있던 코드를 바꾸려다보니 next.js에 SCSS를 어떻게 적용하면 좋을지에 대한 고민이 좀 있었다. 먼저 현재 스타일 파일 구조는 이렇다. 설치 먼저 프로젝트 폴더에 sass 설치! yarn add sass 컴포넌트 폴더의 scss 파일들은 module.scss로 변경해주었다. Selector "body" is not pure 처음에 모든 파일에 module을 붙였다가 만난 에러.. reset.scss 같은 경우는 전체적으로 적용되는 부분이고, module.css 같은 경우는 특정 범위를 지정하는 CSS 모듈이기 때문에 공통적으로 적용되는 CSS 같은 경..

Today, What I learned? 내 파트는 아니었지만 급하게 좋아요 관련 버그를 수정하게 되었다. 담당하지 않았던 파트라 코드를 들여다볼 일이 많지 않았는데 오히려 좋아!.. 이번 버그는 새로고침 했을 때 하트가 유지되지 않는 버그였다. 분명 이전에는 되었던 것 같기도 한데 그 사이 수정이 되면서 뭔가 버그가 생긴 듯.. 🤔 원인 파악 myProjects 컬렉션에 현재 프로젝트 id 값이 확인되어야만 하트를 채우는 isLike가 판단될 수 있는데, 새로고침 했을 때 useQuery에서 데이터를 받아오는 시간이 있어서 처음에 undefined로 값이 들어가 버리는 게 문제인 듯했다. 그래서 새로고침하고 하트가 풀리니까 다시 누르면 숫자가 1씩 늘어나는.. 이상한 버그.. 로그를 보면 true로 m..

Today, What I learned? 유저 피드백을 반영하여, 기존의 공유 기능에서 카카오톡 공유를 추가하기로 했다. (아무래도 많이 쓰이니까) 이전 프로젝트에도 구현되어 있던 부분이라 (담당하진 않음) 꽤 많은 참고를 했음에도?.. 조금 다르게 적용하려다 보니 오류가 좀 발생해서 기록.. 사전 작업 일단 카카오 디벨롭스에서 앱 등록과 플랫폼에 도메인 등록이 필요하다. 앱을 등록하면 앱 키를 확인할 수 있고, 여기서 필요한 값은 자바스크립트 키값. env 파일에 추가해 주자! 또 플랫폼에서 Web에 도메인을 추가해 준다. 나는 배포주소랑 로컬호스트를 추가해 주었다. 추가적으로 PR시 vercel 프리뷰에서 확인하고 싶다면 프리뷰 주소를 추가해줘야 한다. index.html index.html의 헤더 ..

Today, What I learned? 주말쯤에 디자인 수정사항을 반영했던 추가 기능인 인풋 태그 클리어 버튼이 제대로 동작하지 않는 이슈.. 버그를 해결하다가 제어 컴포넌트와 비제어 컴포넌트에 대해서도 찾게 되어서 한 번 정리해 본다. 원인 파악 일단 처음은 동작이 잘 되는데, 한 번 지우고 난 뒤부터 제대로 동작이 되지 않았다. 그래서 로그를 찍어보니.. state는 변경이 잘 되었지만 input창에 비어버린 값이 다시 반영이 안 되고 있는 상태.. input 태그에 state의 값이 즉각적으로 반영이 되지 않고 있다는 것을 확인했다. 원인은 바로 defaultValue !.. 마이페이지는 대체로 수정하는 영역이기 때문에 무의식적으로 value 대신 defaultValue를 추가했던 것 같다. (기..

Today, What I learned? 지금 프로젝트에서 사용되고 있는 리액트 쿼리의 staleTime과 CacheTime, invalidateQueries에 대한 개념이 정립되어 있지 않은 것 같아서 한번 정리하면서 공식문서도 읽어보고.. 미래의 나를 위한 기록!.. 공식 문서 링크는 이쪽이다. https://tanstack.com/query/latest/docs/react/overview Overview | TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it ma..

Today, What I learned? 사실상 라디오라는 콘솔은 라디오버튼에 해당하는 경력 부분 컴포넌트에 들어가 있음에도 불구하고, 전체적으로 렌더링이 되는 것을 알 수 있었다. 부모컴포넌트의 상태가 변경되었기 때문에!... 이런 쓸데없는 렌더링 횟수를 줄이고자, React.memo를 적용하기로 했다. UserTopInfo -> 체크 영역을 감싸는 컴포넌트 -> 체크박스/라디오 버튼 컴포넌트 형태로 구성이 되어있어서, 클릭의 주체가 되는 가장 내부 컴포넌트인 체크박스와 라디오 버튼 컴포넌트에 memo를 적용했다. 둘 다 userTopInfo에서 전역 상태인 userInfo라는 props를 공통적으로 받고 있다. (유저가 수정한 정보에 대한 부분!) profiler 정보 수정과 관련된 UserInfoT..

Today, What I learned? 마이페이지의 UI가 꽤.. 변경이 되었다. 기존과 다르게 기술 스택별 이미지를 추가해야 하는데, 일일이 import 해올 수는 없으니.. 동적으로 이미지 경로를 지정하는 방법에 대해서 찾아보게 되었다. 엑스박스를 보고 팀원분이 require라는 힌트를 주셨다. 기존 상태 각각 기술 스택에 해당하는 아이콘 이미지 적용을 위해 아래와 같이 코드를 작성했다. 하지만 모조리 엑박 ㅠ... require() 적용 require를 아래와 같이 적용해보았을 때, 이미지가 잘 뜨는 것을 볼 수 있다. 블로그들을 보다보니 .default를 붙여야 엑박이 안 뜨는 경우가 또 있던데, 나 같은 경우는 오히려 붙이니까 엑박이 떴다. 케이스 바이 케이스인지 모르겠지만? require만 ..

Today, What I learned? 라이트하우스의 지표를 보고 프로필 이미지의 확장자를 webp로 변경하는 것이 좋겠다고 판단되어서.. 다른 이미지 확장자를 바꾸는 과정에서 프로필 이미지 확장자도 화면공유를 통해 팀원 분이 변경해 주셨지만, 그 과정에서 내가 또 실수한(!) 코드가 있어서 정리해보려 한다 ^^ㅎ 우선 현재 라이트 하우스는 이렇다. 이미지 리사이즈 우리 프로젝트에서는 이미지 사이즈 최적화를 위해 react-image-file-resizer 라는 라이브러리를 이용하고 있다. 이 라이브러리는 확장자를 jpg, png 뿐만 아니라 webp도 함께 제공한다. 기본적으로 적용되어 있던 리사이즈 포맷은 아래와 같다. const resizeFile = (file: File) => new Promi..