개요프론트엔드 개발을 막 접했을 시점에 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..

발단iOS18 업데이트와 함께 Xcode도 16버전으로 업데이트가 됐다. iOS 시뮬레이터의 경우 최신 버전을 깔지 않으면 앱 디버깅을 수행할 수 없다는 에러 문구가 나오기에 최신 버전으로 강제로 업데이트 했고, Xcode도 이에 맞추어 같이 업데이트를 했다. 그러나 문제가 발생했는데, 앱 빌드를 할 때 아래와 같은 에러가 나왔다는 것이다. ▼ 발생한 에러Lexical or Preprocessor Issue (Xcode): Include of non-modular header inside framework module 'firebase_storage.FLTTaskStateChannelStreamHandler':  해결Xcode와 firebase에 관련된 에러인데, 어떤 부분을 손 봐야할 지 모르겠어서 검..

개요Flutter로 페이지를 만들고 라우팅까지 할 수 있게 된 뒤, 각 페이지에 네트워킹을 붙이게 될 쯤 굉장히 난처한 부분을 마주하게 된다. 바로 이전 페이지로 돌아가면서 데이터 패칭을 하는 것이다.  A(Page)에서 B로 이동한 뒤, B에서 A에 연결된 데이터에 영향이 가는 작업을 수행한 뒤 다시 A로 돌아오면 변경된 사항을 반영해주어야 한다. 이를 해결하는 가장 쉬운 방법은 강제 새로고침을 넣어 사용자에게 이를 전가하는 방식인데 이는 유저 친화적이지 않기에 보통은 뒤로 이동하면 자동으로 데이터 패칭이 되게끔 개발한다.  하지만 보통 데이터 패치는 페이지가 생성되는 `init`에서 수행되고, 각 페이지와 연결된 Controller(혹은 Notifier가 있다면)는 다른 Controller들과 독립적..

⚠️ 이전에 개발하고 있던 딜레마 카페 글 아닙니다...!개요CI/CD 도입 배경 이전에 개발하고 있던 개인 프로젝트인 딜레마 카페는 잠시 중단하고, 웹 개발 외주(어디인지는 보안상의 문제로 기재하지 않겠다.)를 받아 이를 진행하고 있다. 네이버 지도 API를 넣기 위해 일시적으로 배포를 진행했는데, 이 배포 과정을 매번 할 생각을 하니 꽤나 귀찮겠다는 생각이 들어 CI/CD(Continuous Integration/ Continuous Deployment)를 도입했다. 현재는 좀 위험한 CI/CD 배포나 테스트를 자동으로 진행할 수 있어서 CI/CD를 도입하는데, 나는 우선 내가 올린거는 바로바로 반영이 되게끔 설정을 해놓았다. 지금 내가 해놓은 방식은 굉장히 위험한 방식이긴 하다. 현재로써는 잘못된 ..

개요싱글 스레드인데 어떻게? 처음 Dart가 싱글 스레드 언어라는 말을 들었을 때는 별 생각이 없었다. 그냥 그런가보다... 했었는데 Future와 Stream을 사용하다가 문득 Dart는 싱글 스레드 언어라는 것이 떠오르며 이런 생각이 들었다. '싱글 스레드인데 비동기는 어떻게 하는거지?'  싱글 스레드는 이름 그대로 Single, 하나의 스레드라는 것으로 한 번에 하나의 명령을 수행할 수 있다. 그런데 비동기를 처리하기 위해서는 스레드가 하나만 있어서는 안된다. 명령을 처리하는 스택이 하나이기에 5초를 대기하라는 명령, 혹은 1시간을 대기하라는 명령은 다른 명령들을 막아버린다. 이렇게 지연 시키는 행동을 Block이라고 하는데, 싱글 스레드라면 구조적으로 이렇게 될 수 밖에 없다는 것이다. 시간을 재..

개요의문의 시작 Flutter를 통해 개발을 하면, '한 번에 두 가지, 필요에 의하면 여섯 가지의 플랫폼까지도 동시에 개발을 할 수 있다니 굉장히 편리하잖아?' 라는 생각과 '근데 웹으로 대체하던데...' 라는 생각 등등 여러가지 생각이 들곤 한다. 그런데 생각이 좀 더 진행이 되고 나니 '이걸 어떤 방식으로 수행하는 거지?' 라는 의문이 들기 시작했다. 빌드는 정해진 결과 "여섯 가지의 플랫폼으로 빌드가 가능"이라는 말은 결과지 과정이 아니다. 그리고 우리가 Dart 코드를 짜서 Flutter앱을 만드는 것도 어떻게 보면 결과에 해당되는 부분이고 과정에 해당되는 부분은 아니다. 우리는 Dart코드를 작성할 때 당연하게도 여섯가지의 플랫폼으로 빌드가 된다는 것을 상정하고 있으니 말이다. 여러가지 플랫폼..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요부족한 부분 발굴 본격적으로 페이지들을 개발하기 시작했다. 그러나 다른 페이지들을 만들기 전에 우선 메인 페이지를 완성해야하기에 메인 페이지의 부족한 부분들을 확인했다. 부족한 부분들을 확인하는데, 빨간 네모박스 쳐진 공간이 너무 비어보였다. 모바일 버전에서는 이 부분이 없이 사각형 버튼 2개만 있었기에 공간을 넓히고 보니 이렇게 빈 공간이 생겼다. ▼  그래서 전에 HTML과 CSS만으로 디자인했던 임시 디자인에서는 그 부분을 오늘의 딜레마로 채워놨던게 생각이 ..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요이전 글 참고 ▼ [React][개발기] 8. Login 모달, 그리고 전체 점검의 필요성개요 시작부터 어려운 것들을 만들기엔 순서가 아닌거 같다고 생각하여 간단한 요소들 부터 만들고 있다. 한달을 굶주린 사람에게 스테이크를 먹으라고 해도 먹을 수 없고 우선 수프부터 먹여noguen.com  이전 포스트에서 등장한 문제점인 매직 넘버 해결하기 위해 전체적인 점검이 필요하다고 생각이 들어 이번에는 자주 사용하는 값들을 정의하고 프로젝트 전체 점검를 하기로 했다. ▼..

개요 시작부터 어려운 것들을 만들기엔 순서가 아닌거 같다고 생각하여 간단한 요소들 부터 만들고 있다. 한달을 굶주린 사람에게 스테이크를 먹으라고 해도 먹을 수 없고 우선 수프부터 먹여야 하듯, 소화할 수 있는 것들부터 하나씩 소화해나가고 있다.목표 소화할 만한 것들을 찾다가 들어가는 컴포넌트가 제일 적은 로그인 페이지부터 만들기로 했다. 통신 로직은 대략적인 UI가 구현되면 이전에 Supabase로 만들어놨던 API들을 가져와 연결할 것이다. ▼  로그인 페이지(모달)바뀌어버린 계획 원래 계획대로라면 페이지로 만들기로 했고, 이를 위해 LoginPage.js도 만들고 RoutePaths에 넣어놓기도 했는데 생각해보니 소셜 로그인 말고는 로그인 기능이 없는데 크게 한 페이지를 차지할 이유가 있나 싶었다. ..