문제 상황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로 개발하다 위젯 관리에 대한 이야기가 나왔다. "위젯들을 어떻게 체계적으로 관리할 수 있을까? 프론트 내부 QA를 빠르게 하는 방법이 없을까?" 하는 의문들도 같이 나왔다. 프로젝트가 커지면서 버튼 하나만 해도 여러 variants가 생기고, 각각 다른 상태들을 확인해야 하는 상황이 생긴다. 그런데 매번 앱을 실행해서 특정 화면으로 가서 버튼을 확인하는 건 꽤나 비효율적이다. 더 나아가 디자이너나 기획자가 "이 버튼의 disabled 상태는 어떻게 보이는 거죠?"라고 물어보면 설명하기가 난감하다. 직접 켜서 보여줘야하는 부분이 상당히 번거롭다. 이런 문제를 해결하기 위해 Storybook의 Flutter 버전이라고 할 수 있는 WidgetBook을 프로젝트에 도입해봤다. 결론부터 ..

HI-ARC intra.hiarc-official.com 개요대규모 웹 프로젝트를 진행하다 보면 누구나 한 번쯤 이런 고민에 빠진다. "서비스가 여러 개일 때, 프로젝트 구조는 어떻게 나눠야 할까?" 특히 여러 명의 개발자가 동시에 작업하는 협업 환경이라면, 구조적 통일성과 생산성, 유지보수 효율성은 무시할 수 없는 요소다. 이때 흔히 등장하는 해답이 바로 모노레포(Monorepo) 구조다. 한 레포에서 여러 앱을 관리하고, 공통 UI와 유틸리티를 공유하고, 통합된 빌드 환경과 테스트, 린트를 적용할 수 있다. 한 번에 관리되는 코드베이스라는 것은 꽤나 매력적으로 다가온다. (필자는 플러터를 했을 때 부터 느낀 거지만, 한 번에 많은 것이 관리되는 코드베이스에 매력을 느끼는 것 같다.) 이 글에서는 ..

개요 클린 아키텍처를 웹 프로젝트에 도입해보려고 했다. Flutter에서 꽤 괜찮은 경험이었기에 React 기반의 웹 프로젝트에도 자연스럽게 잘 들어맞을 것이라고 생각했다. 한동안 웹을 모바일 앱과 같이 만드는 SPA방식이 대세였기에 구조적으로 비슷하기에 적용이 잘 되지 않을까 싶었다. 하지만 막상 프로젝트에 적용해보니, "이게 과연 웹에 맞는 구조인가?" 라는 의문이 강하게 들었다. 디렉토리는 복잡해지고, 코드 응집도는 떨어지고, 생산성은 낮아졌다. 무엇보다 초기 프로젝트 세팅에 너무나도 많은 시간이 들어가게 된다. 글로도 기록을 남겼었는데, 처음에 도입을 했을 때는 꽤나 좋았다. 하지만 시간이 지날 수록 의문이 많이 들었다. ▼ [Next.js][Develop] Next.js 클린 아키텍처 적용기..

개요 프론트에서 사진이 제대로 보이지 않는 문제가 발생했다. ▼ S3에는 분명히 이미지가 업로드 되어 있고, Postman으로 요청을 날려봐도 응답이 200으로 잘 오는데, 실제 화면에서는 이미지가 보이질 않았다. 처음엔 당연히 백엔드 문제라고 생각했고, 이게 뭐지 싶어 로깅도 켜고 요청 흐름도 추적해봤지만 서버에는 이미지가 잘 올라가 있었다. 클라이언트도 요청 값에 누락하는 일 없이 보내고 있었고, URL도 뭔가 이상 없어 보였다. 그럼 도대체 어디서 잘못된 걸까? 문제 상황아래는 Postman에서 확인한 이미지 URL이다. ▼https://aws_bucket/20240413%25EF%25BC%25BF165238.jpg 하지만 url에 직접 접속해서 보려고 하면 이런 오류가 나왔다. '백엔드에서 ..

개요 Next.js로 웹 프로젝트를 시작하면서 구조를 어떻게 설계할지 많은 고민이 있었다. 그동안의 프로젝트들은 빠르게 기능을 만드는 데에 집중했었다. 배우면서 작업한 것도 있었고, React와 Next.js의 기능들을 빠르게 다 훑어보기 위함도 컸다. 그러나 프로젝트를 거듭할 수록, 점차 규모가 커지면서 유지보수가 어려워졌다. 의존성과 흐름을 파악하는 데 시간이 많이 들고, 테스트나 기능 추가에도 부담이 커졌다. 유지보수적으로 좋지 않아서 한 번 쓰고 버릴 그런 사이트가 되었고, 더 이상은 그런 사이트들을 만들고 싶지 않았다. 그래서 이 문제를 해결하기 위해 클린 아키텍처를 도입했고, 이 글에서는 그 구조를 어떻게 구성했고, 실제 코드에서 어떻게 활용하고 있는지를 적어보려고 한다. (클린 아키텍쳐 ..

개요 프로그래밍을 하다 보면 반드시 한 번쯤은 "모델 검증 코드를 어디에 둘 것인가?"라는 질문을 마주하게 된다. 처음에는 대수롭지 않아 보이지만, 프로젝트 규모가 조금만 커져도 코드의 유지보수와 팀 내부의 합의에 직접적인 영향을 주는 논쟁거리로 떠오른다. 현업 개발을 시작한 지 얼마 되지 않았지만, 각종 프로젝트들을 경험해보며 여러 아키텍처 글과 실전 코드들을 뒤적이다가 "내가 정말 제대로 이해하고 있나?", "지금 선택이 과연 최선일까?"라는 의문을 반복해서 던지곤 한다. 그래서 이번 글에서는 모델 검증 코드를 모델 내부에 둘지, 아니면 외부의 별도 Validator로 뺄지를 결론부터 단순히 내려버리기보다, 흐름의 주권, 즉 책임이 어디에 머무르고 언제 이동하는가라는 관점에서 보려고 한다. 그전에...

개요다이얼로그를 보여주거나 바텀시트를 보여준 뒤, 다시 닫으면 가정 이전 포커스로 돌아가는 현상이 있었다. ▼문제의 상황 전체적인 기능으로는 문제가 없지만, 사용자 입장에서는 꽤나 거슬리는 문제다. 아래로 자동 스크롤이 되는 것도 아니고 오히려 뒤로 돌아가버린다면 사용자의 입장에서는 당황스러울 것이다. 원인 탐색FoucsScope의 기본로직? Flutter의 `FocusScope`는 서브트리 내의 포커스 히스토리를 관리하여, 페이지를 팝할 때(Navigator.pop) 이전에 포커싱된 위젯으로 자동으로 포커스를 복원한다. Flutter 3.22.3 버전에서는 포커싱을 해제하고 다음 페이지로 가도, 이 동작이 버그로 재발생한다는 이슈도 있으며, 텍스트 필드가 의도치 않게 자동 포커싱되는 문제가 있다고 한..

개요이전에 Flutter글에서 async/ await 개념에 대해 공부하면서 아래의 글을 작성한 적이 있었다. ▼ [Flutter] 동기와 비동기 개론개요 동기와 비동기, 프로그래밍을 공부하다보면 항상 등장하는 개념이다. 중요한 개념이고 꼭 알아야한다고 하지만 이게 왜 중요한 개념인지 잘 이해하지 못하고 넘어간 적이 많다.▼ 하지만noguen.com 해당 글의 내용이 잘못된건 아니지만 (다시 읽어봤을 때는 아직까지는 잘못된 점을 못찾았다) 동기와 비동기를 다르게 보는 시각이 있다는 이야기가 있어서 이에 대해 정리하려고 한다. 제어 흐름으로 본 동기와 비동기동기와 비동기의 개념 동기는 Synchronous, 비동기는 Asynchronous로 한국어로 봤을 때는 약간 헷갈리는 면도 조금 있다. 동기라는 말..

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