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

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

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

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

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

대부분 나의 일요일 아침은 가벼운 공부로 시작된다.그렇지 않더라도 일단은 이불에서 나와 무언가를 하려고 한다.그래야 하루를 길게 사용하고, 조용한 내 시간을 가질 수 있다고 생각한다.그런데 오늘은 책상에 앉기가 싫었고, 조금 더 쉬고 싶은 마음이 들어서 전부터 보려고 했던 "이와이 슌지" 감독의 "라스트 레터(Last Letter)" 라는 영화를 보자고 마음 먹었다. 영화의 줄거리 보다는 느낀 점들을 두서 없이 써내려가려고 한다.이상하게도 내 생각을 써내려갈 때면 삐닥하게 앉은 자세를 고쳐 앉게 되는 것 같다.나는 "러브레터" 라는 영화를 좋아한다. 요즘과 같은 OTT가 나오기 전에는 DVD를 따로 소장해서 몇 번이고 봤을 정도이다.그래서 "이와이 슌지" 라는 넷플릭스에서 보자마자 바로 "찜" 버튼을..

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

대부분 EC2나 Nginx에 대해서 DevOps 개발자, 혹은 팀장, 혹은 백엔드 개발자가 자주 건들이다보니 프론트엔드 개발자인 내 입장에서는 당장 더 알아야 할 필요는 없었다.그러나 얕은 지식이나마 정보를 전달할 수 있어야 하고, 특히 Nginx는 프론트엔드 개발자라면 어느 정도는 알아야한다는 생각에 공부를 해봤다. ✅ Nginx를 사용하는 이유왜 프론트엔드 개발자는 Nginx에 대해서 알아야할까?물론 vercel 같은 것으로 쉽게 배포할 수 있지만 현업에서는 주로 EC2를 이용하고 Proxy Server를 두어 개발하게 되는데 이 때 프론트엔드 배포에 관여하게 되는 것이 Nginx이기 때문이다. Nginx를 사용하게 되면 "정적 컨텐츠 배포", "SSL 처리", "로드 밸런싱", "장애 대응", "캐..

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