뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

어떻게 해야 이 프로젝트에 맞는 폴더 구조를 갖출 수 있을까?어떻게 해야 협업 하는데 좋은 방향으로 만들 수 있을까?자칫 쓸데없이 폴더 구조가 무거워지거나 헷갈리진 않을까?괜히 심플하게 했다가 확장성 없이 구현 되진 않을까?내가 알고 있는 방법 외에 또 다른 방법이 없을까?...아마 프론트엔드 개발자라면 사용하는 폴더 구조에 대해서 고민을 해본 적 있을 것이다.나 또한 협업의 관점과 프로젝트의 관점에서 이것저것 섞어서 사용을 해본 경험이 있는데, 폴더 구조를 만들어내는 것은 정말 어려운 것 같다.차라리 Java나 NestJS와 같은 Framework라면 정해진 틀이라고 있을텐데, 특히 React의 경우에는 src/, assets/, public/ 등 외에는 짜여진 틀이 없다보니 src/ 내부에서 여러가지..

Next.JS를 이용해서 웹 개발을 했고, 모바일 사이즈에 맞춰서 반응형도 준비를 했다.실제로 여러 기기 테스트를 해봤을 때 잘 나오는 것을 확인했고, 이제 나가면 되겠지 싶었다.그래서 내가 있는 층의 직원들을 대상으로 베타 테스트를 진행했는데 "모바일에서 스크롤이 잘 안되는 부분이 있어요" 라는 얘기를 들었다.스크롤이 안 될 이유가 없을텐데? 하면서 봤는데 공통점은 모두가 아이폰 유저였고 safari를 기본 브라우저로 사용하는 분들이었다.그리고 스크롤이 안 된다고 말했던 위치는 "캐러셀(Carousel)" 부분 이었다. 나는 평생 안드로이드만 사용해왔고, 주로 Chrome을 사용하는 유저다보니 iOS 스타일의 방식(모달, 팝업, 경고창, 이동 등) 이 익숙치 않다. 이번에도 웹에서 다양한 모바일 사이..

고화질 이미지를 업로드 하고, 웹에서 보여줄 수 있어야 하며, 이미지 여러 장을 한 번에 다운로드 받을 수 있어야 하는 미션이 생겼다.사실 내부 툴이다보니 어드민만 업로드 할 수 있고 최대 5장만 올릴 수 있으며, 마케팅 팀만 다운로드 할 수 있으면 되어서 그리 복잡한 로직이나 고민을 필요로 하진 않는다.하지만 공부도 중요하고, 다른 고화질을 이미지를 다루는 회사에서는 어떤 식으로 작업하는지 궁금해졌기에 우리도 별거 아니지만 적용을 해보면 좋겠다는 생각을 했다. 다른 회사에서는 무엇을 사용하고 있을까?그냥 직관적으로 생각했을 때는 "유저가 고화질 이미지를 업로드" -> "업로드한 이미지 압축" -> "클라우드에 업로드" -> "웹에서 보여질 때는 WebP 등 가벼운 이미지 사용" -> "다운..

이런 문제를 겪어본 적이 있는지 모르겠다."강력 새로고침을 하면 최신버전으로 업데이트가 되는데, 이 후 일반 새로고침을 하면 과거버전으로 돌아와요"여러가지 문제가 있을 수 있는데 내가 간과하고 있었던 것이 캐시의 "우선순위" 였다. 과거의 잔재 PWA회사에서 어떤 프로젝트를 했고, 프로토타입은 간단하게 만들자고 해서 MBTI 같은 느낌으로 심리 설문조사 앱을 만들었다.이 때, PWA까지 붙여서 폰에서 앱처럼 다운로드도 가능하게 만들었는데 이는 나중에 v2.0.0으로 나가자고 하며 어중이떠중이로 레거시가 되어갔다.그런데 어느 날, v1을 사용해야 한다고 하면서 카카오 로그인과 우리 카카오 채널 등록 여부를 확인하고 등록이 확인되면 설문조사가 가능하게 해달라고 요청 받았고, 부랴부랴 일을 끝 마치니 테스..

새 탭을 닫는 경우 이벤트가 동작해야 하는 경우가 필요했다.단순히 화면을 닫을 때를 상정하면 많은 정보가 있지만 이런 경우 문제는 새로고침만 해도 이벤트가 적용이 된다는 문제가 있다.브라우저에서 페이지를 닫는 이벤트와 새로고침 이벤트는 기술적으로 매우 유사하다.두 경우 모두 beforeunload 이벤트가 발생하기 때문에 두 상황을 구분 짓는 것은 쉽지 않다.내가 원하는 것은 "화면을 닫았을 때 이벤트 동작" + "새로고침 시에는 이벤트 동작하지 않음" 이다. 웹 브라우저에서 창 닫기와 새로고침 구분하기웹 애플리케이션에서 사용자의 다양한 행동을 내가 원하는 스코프 만큼만 정확하게 감지하는 것은 쉽지 않다.특히 브라우저 창을 닫는 행동과 페이지를 새로고침하는 행동은 둘 다 unload를 발생시키지만 새로고..

최근 NextJS, Typescript, Shadcn을 이용해서 사내 CRM 프로젝트를 만들고 있다.CRM이다보니 Dialog 내부에서 여러가지 multi-form 형식의 처리가 많이 들어간다.우리 팀은 Shadcn을 사용하고 있으므로 Shadcn의 Dialog를 사용했는데 Dialog 내부의 Textarea에서 Enter를 입력해도 아래로 커서가 내려가지 않는 현상이 발생했다.  우선 첫 번째로 든 생각은 Textarea에서 Enter key 사용이 되는지 확인해보는 것이었다.Textarea에 onKeyDown을 사용해서 콘솔을 찍어보면 Enter가 제대로 먹히고 있는 것은 확인할 수 있다.그러면 다른 곳에서 인터셉트 해간다는 생각을 해야할 것이다. 나는 Shadcn의 Dialog만 사용하고 내부적인 ..

내가 step slider에 대한 정의를 잘 몰랐던건가.... 하는 생각을 했다. ... 저번 주에 회사 프로젝트 중 슬라이드지만 구분이 되어있고, 그 구분자에 대한 값을 받아와야하는 step slide가 들어가는 부분이 있었다.그 정도는 으레 있겠지 싶어서 찾아봤는데 내가 원하는 형태의 step slide가 없었다.아래 이미지와 같은 모양이 대부분이었다. 하지만 내가 원하는 모양은 좀 더 구분이 되어있고, 라벨도 붙어있으며 그 부분의 값도 가져올 수 있는 것을 원했다.어느정도 커스텀을 하면 되겠지만 일단 스타일부터 내가 원하던 스타일이 아니었다.그래서 내가 npm library에 하나 올려야겠다 라고 생각했다. ... 우선 원하는 모양을 잡았다. 그리고 간단하게 vite를 이용한 react, type..

이번에 프로젝트 마이그레이션 작업을 준비하던 와중에 React가 19버전으로, 그리고 NextJS가 15버전으로 업데이트 되었다.기왕 버전이 업데이트 된 김에 우리 프로젝트도 최신의 버전으로 한 번 가져가보기로 했다.다행히  아직 메인 페이지와 라우팅 정도가 전부이다 보니 업데이트를 해도 크게 달라지는 점은 없었다. 1. Verseion 15로 업그레이드 우선 NextJS 홈페이지에 나와있는 방식대로 커맨드를 입력하여 업그레이드를 진행했다.그리고 package.json에서 확인해보니 dependencies 버전이 바뀐 것을 확인했다.그리고 다시 실행시켜보니 아직 만들어진게 없고 라우팅 정도만 해놓은지라 특별히 문제 될 만한 것은 없어보여서 다음 해야할 일을 진행했다. 2.  Markdown and MDX..