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

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

깃허브 주소 ▼ 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에 넣어놓기도 했는데 생각해보니 소셜 로그인 말고는 로그인 기능이 없는데 크게 한 페이지를 차지할 이유가 있나 싶었다. ..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요목표 로그인 페이지를 만들기 전, `RoutePaths`의 구조와 `NavBarData`를 보다 효율적으로 사용할 수 있게 구조를 바꾸기로 했다. 기존에 사용하던 `navBarData`를 매번 정의해놓고 사용할 수 없기에 이를 보다 효율적으로 작성하고 이용하려고 한다.  RoutePaths와 NavBarData목표 이전 포스트에서 `RoutePaths`를 만들고 `NavigationBar` 컴포넌트도 Stateless하게 만들어 두었다. 하지만 RoutePaths..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com  개요목표 메인 화면의 컴포넌트는 어느정도 다 만들었다고 생각이 들어 약간의 수정을 한 뒤, 라우팅을 넣기로 했다. 또한 현재 매직넘버와 반복되는 세세한 코드들이 너무 많다고 생각되어 전역 스타일과 자주 사용되는 값들을 관리하는 객체를 만들기로 했다. 또한 이제와서 코드를 다시 훑어보니 Stateless하지 않은 컴포넌트가 몇 보여 이 역시도 수정하기로 했다. 그래서 이번 목표는 전역 스타일 수정, Stateless하게 수정, 라우팅이다.  전역 스타일 수정 기존에 ..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요이전 글의 SquareButton과 SquareButtonContainer의 구조에 대한 고민 참고 ▼ [React][개발기] Styled-Component로 Component 만들기개요 대략적인 학습이 끝났으니 이제 본격적으로 개발에 들어가려고 한다. 시행착오를 겪으면서 배우면 더 기억에 잘 남아서 무작정 만들기로 했다. 이번 목표는 네비게이션 바, 메인 버튼 2개noguen.com  목표 전에 Styled-Component로 메인 버튼 컴포넌트를 만들던 도중 ..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com  개요 대략적인 학습이 끝났으니 이제 본격적으로 개발에 들어가려고 한다. 시행착오를 겪으면서 배우면 더 기억에 잘 남아서 무작정 만들기로 했다. 이번 목표는 네비게이션 바, 메인 버튼 2개을를 만드는 것이다. 메인 화면의 요소부터 만들고, 이후에 리스트 셀을 만든 후, 페이징, 그리고 네비게이팅에 대해 알아보려고 한다. Flutter나 기존에 잘 아는 프레임워크 혹은 라이브러리를 사용했다면 아마 폴더 구조, 디자인 패턴, 네트워킹 방식, 데이터 처리 방식 등등 기본적..