문제 상황카카오 로그인이 제대로 수행되지 않는다는 버그 리포트를 받았다. 그러나 그 버그 리포트가 너무나도 부실했기에 (무작정 카카오 로그인이 안된다고 하고 당시의 상황에 대해 설명이 없었다.) 우선은 더 급한 업데이트 부터 처리를 하고 심사를 넣었다.그런데 카카오 로그인 버튼이 눌리지 않는다고 애플에서 리뷰를 해주어 버그 픽스에 들어갔다. ▼ 다시 확인해보니 카카오 로그인이 아래와 같이 팝업만 잠깐 나오고 진행이 안되고 있었다. 운좋게? 팝업이 안사라지고 남아있다고 해도 로그인 페이지로 넘어가지지 않는 문제가 있었다. ▼카카오 로그인이 수행되지 않음 원인 탐색 클라이언트 로직의 문제?초기에 테스트를 했을 때는 백엔드 통신도 잘 마무리 했었는데 갑자기 문제가 발생했다는 이야기를 들으니, 약간은 갈피가..

문제 상황구글 맵을 사용중에 엄청나게 렉이 걸리는 상황이 발생했다. 지도 정보가 패칭되고, 핀이 렌더링 되는 순간 엄청나게 렉이 발생한다. 영상에서는 아이폰 16 Pro로 테스트를 해서 그런지 성능으로 커버가 됐지만, 아이폰 12 mini로 테스틀 했을 때는 사용이 어려울 정도로 버벅이는게 눈에 보였다. ▼ 원인 탐색Debouncer와 Throttler의 부재?첫번째로 생각난 원인은 Debouncer와 Throttler의 부재. 지도가 움직일 때 마다 API 호출을 하는 것이 버벅임의 주요 원인이 아닐까 생각했다.하지만 `onCameraIdle` 상태에서만 API를 호출하기에 디바운서도 잘 적용되어있고, 혹시나 구글 맵 패키지의 문제일 수 있기에 로그를 찍어보면서 확인도 다 ..

개요: 난독화 지금까지 진행했던 프로젝트들은 보안이 크게 중요하지 않아서(사용자가 많지도 않고, 악용할만한 요소가 존재하지 않았다.) 난독화에 시간을 투자하지 않았다. 하지만 난독화를 하긴 해야한다. 디컴파일을 하면 .env파일로 키 값들을 보관한다고 해도, manifest까지도 빼 갈 수 있기 때문에 카카오 키 값들이나 구글 키 값들을 탈취할 수 있다.  물론 Proguard나 dexguard로 난독화를 아무리 한다고 해도 디컴파일을 완벽히 방지한다 까진 아니고 어느정도 시간을 벌 수 있다 정도라서 어쨌거나 누군가가 탈취 시도를 하면 탈취가 된다고 한다. 이 이야기는 특정 대형 서비스들(서비스 이름은 이야기할 수 없다.) 이야기이긴 하나, 기술을 어디까지 사용하냐에 따라 보안이 철저하게 지켜지는 곳도 ..

개요 Styled-Component로 개발을 하던 도중, Tailwind-CSS가 굉장히 좋다는 평을 듣고 간단한 웹사이트에 적용을 해봤다. 조금 더 큰 프로젝트에 적용하기엔 Tailwind-CSS를 잘 몰라서 우선은 전에 작업하던 프로젝트를 타입스크립트로 마이그레이션 할 겸 적용해보면서 Tailwind-CSS를 파악해보기로 했다. 전반적인 특징Tailwind-CSS에 대해 설명하는 글은 이미 너무나도 많다.그럼에도 간단하게 짚고 들어갈 것인데, 너무 뻔한 내용들이 많기에 핵심만 필요한 사람들은 아래의 사용해보면서 느낀 장점으로 넘어가면 된다. Utility First대부분의 특징은 Utilty First로부터 파생된다. Tailwind-CSS의 대부분의 장점과 단점 모두가 Utility First라는..

문제 상황styled-component에서 tailwind-css로 마이그레이션을 하기 위해 tailwind-css를 아래와 같이 설치했는데, ▼npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p 아래와 같은 문제가 발생했다. ▼npm error could not determine executable to runnpm error A complete log of this run can be found in: [필자의로그].log  해결문제를 해결하기 위해 구글링을 해본 결과, Reddit에서 해결 방법을 구할 수 있었다. ▼ From the reactjs community on RedditExplore this post and mo..

개요 Flutter로 앱 개발을 하다보면 `Padding`과 `SizedBox`를 굉장히 많이 사용하게 된다. `Padding`은 이름 그대로 위젯에게 padding, 즉 간격을 주는 위젯이기에 많이 사용되고, `SizedBox`는 `Padding`과 같은 기능을 함과 동시에 위젯의 위치를 잡는다거나 빈 공간에 위젯을 미리 할당하는 식으로 여러 방식으로 활용이 가능하여 많이 사용된다.  그런데 `SizedBox`가 아무리 `Padding`과 똑같은 기능을 한다고 해도, 코드를 작성하는 부분이나 성능적인 부분에서 차이가 발생하게 된다. 그렇다면 둘 중에 어떤 부분이 더 좋다고 할 수 있을까? 물론 어느 하나가 무조건 더 좋다고는 말 할 수 없지만, `SizedBox`를 `Padding` 대신 사용하는 것을..

개요 Flutter뿐만 아니라 프런트엔드 개발을 하다 보면 앱 내부에 이미지를 넣어야 할 때가 있다. 이런 상황에서 일반적으로 두 가지의 포맷을 사용하곤 하는데, 그 두 포맷이 svg와 png다. (jpeg는 투명도가 없기에 사용하지 않는다.)  figma를 보고 작업을 하다보면 디자이너가 아이콘들을 svg 포맷으로 주곤 한다. 평소에는 별생각 없이 svg 파일을 받아 사용했는데 문득 의문이 들었다. 'svg를 주로 사용하는 이유가 뭐지?', 'png도 같은 역할을 하는데, 둘의 명확한 차이에 대해 나는 알고 있었나?'.  그래서 개발에서 둘의 차이에 대해 조금 더 깊게 알아보기로 했다. 우선은 간단하게 각각의 특징에 대해 알아보고 성능 상의 차이에 대해 알아보자.  각각의 특징SVG 포맷 SVG는 Sc..

문제어떤 정수 A가 있으면 그 숫자를 A = a1 * a2 * a3 * a4 ... * an으로 했을 때 A' = a1 + a2 + a3 ... + an이 성립하면 "A는 A'으로 변할 수 있다"라고 한다. (ai는 정수) 만약 A'이 A''으로 변할 수 있으면 "A는 A''으로 변할 수 있다"라고 한다.이때 A와 B가 주어지면 A는 B로 변할 수 있는지 판별하시오. 입력첫째 줄에는 테스트 케이스의 개수 T(1 ≤ T ≤ 100)이 주어진다. 테스트 케이스마다 두 정수 A, B(-2^31 ≤ A, B ≤ 2^31-1)가 주어진다. 출력각각의 테스트 케이스마다 한 줄에 변할 수 있으면 yes, 아니면 no를 출력한다. 문제 링크1402번: 아무래도이문제는A번난이도인것같다  풀이 처음에는 정말 아무 생각없이..

📖 오늘의 학습백엔드와 통신 도중 사진이 제대로 나오지 않는 문제가 발생했다. ▼ 포스트맨에는 사진의 url경로가 제대로 나오는데, 이를 불러오려고 하니 s3에서 접근을 막으며 사진을 불러와주지 않았다. ▼문제의 원인이 무엇인지 몰라 백엔드의 문제라고 생각하며 요청을 했는데, 서버에는 사진이 제대로 올라가있는 상황이었다. 양쪽의 문제가 아니라면 도대체 문제가 무엇일까 하던 찰나 사진 url이 무언가 이상함을 눈치챘다. `20240413%25EF%25BC%25BF165238.jpg` 위는 사진 url의 일부다. 여기서 이상한 부분은 바로 `%25EF%25BC%25BF` 부분. 유니코드로 인코딩된 부분이 조금 이상하다. S3에 가보니 이런 식으로 객체 URL이 S3 URI와 다른 것을 알 수 있었다. ▼ ..

문제 상황 서비스를 배포하고나서 안드로이드 기기에서 카카오 로그인이 안된다는 버그 리포트를 받았다. 안드로이드 기기에서만 안된다는 것을 제보받고 패키지의 문제인가 생각을 했다. 그런데 그런 이슈가 있다는 걸 듣지도 못했고, 디버그 모드에서 잘 동작하는 것을 확인하고나서 카카오에 등록한게 문제가 생겼다는 것을 인지했다.  원인과 해결원인 Android 플랫폼 등록을 할 때 키 해시를 등록하는 부분이 있다. 테스트를 할 때에는 디버그 키 해시를 받아서 등록을 해놓는데, 구글 플레이에 앱이 등록되고 나서는 릴리즈 키 해시를 등록해줘야한다. ▼  조금 더 정확히 말하자면, 디버그 앱은 안드로이드 스튜디오에서 자동으로 서명해준 키 스토어로 서명되어있다. 그에 반해 구글 플레이에 등록되는 앱은 개발자가 직접 생성한..