개요 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 플랫폼 등록을 할 때 키 해시를 등록하는 부분이 있다. 테스트를 할 때에는 디버그 키 해시를 받아서 등록을 해놓는데, 구글 플레이에 앱이 등록되고 나서는 릴리즈 키 해시를 등록해줘야한다. ▼  조금 더 정확히 말하자면, 디버그 앱은 안드로이드 스튜디오에서 자동으로 서명해준 키 스토어로 서명되어있다. 그에 반해 구글 플레이에 등록되는 앱은 개발자가 직접 생성한..

개요프론트엔드 개발을 막 접했을 시점에 VScode에서 이런 경고 문구를 보게 되었다. ▼ JS에 대해 잘 모르기도 했고, 애초에 ES 모듈이 뭔지 그리고 CommonJS 모듈이 뭔지도 몰랐기도 하고 잘 동작하기에 그냥 넘어갔었다. 그런데 이런 사소한 것들을 그냥 지나치면 나중에 큰 문제가 될 수 있을 거 같아 한 번 찾아보면서 정리를 해봤다. CommonJSCommonJS란 CommonJS는 Node.js의 초기 모듈 시스템으로, 모듈을 로드하고 관리하기 위해 설계된 시스템이다. 주로 서버사이드에서 사용이 된다. 상당히 레거시한 느낌이 강하지만 Node.js 생태계 전반에서 사용되고 있으며 많은 라이브러리에서 지원이 된다. (개요에서 필자가 뭔지도 모르고 썼음에도 동작할 수 있었던 이유다.) Commo..

문제 상황 TabBar를 이용하여 한 페이지에 여러 개의 뷰를 보여주는 UI는 거의 대부분의 앱에서 사용될 정도로 흔하다. 일반적으로는 고정된 개수의 TabBar를 사용하기에 스크롤 할 일이 없는데, 때로는 여러 개의 TabBar를 두어 스크롤이 들어가기도 한다. 그런데 스크롤을 넣기 위해 `isScrollable`을 `true`로 바꾸면 사진과 같이 왼쪽에 의문의 Padding이 들어가게 된다. ▼ 왜 이 빈 공간이 생기는 것이고, 어떻게 하면 제거할 수 있을까?  원인과 해결원인 원인은 `TabAlignment`에 있다. 사진의 설명에 나와있듯, 만약 TabBar의 `isScrollable`이 `true`가 되면 TabBar는 기본적으로 52pixel의 offset을 갖게 된다.  정확히는 `isSc..

📖 오늘의 학습계기 메소드 안에 메소드를 작성하는 문법은 요즘 대부분의 언어에서 지원하는 문법이다. 하지만 일반적으로 이를 사용하지 않아도 대부분의 기능들은 충분히 구현이 가능하며, 이를 잘못 사용했다가 가독성만 안좋아지고 소통이 안 될 가능성이 있어서 그동안에는 잘 사용하지 않았다. 그러던 도중 이를 유용하게 사용할 상황을 마주했다. 유용하게 사용할 수 있는 상황 작업이 끝난 뒤, 작업에 사용된 오브젝트의 id와 state를 다른 컴포넌트들과 동기화를 시켜야하는 상황이 있었다. 모든 컴포넌트들이 listen하고 있다가 알아서 바뀌면 좋겠지만, listen을 설정해주는 작업을 해주는게 더 크기에 순회로 비교하며 값을 바꿔주기로 했다.  내가 바꿔줘야하는 데이터 리스트는 총 4개, 모두 같은 타입이다. ..