영원히 흘러가는 강

프론트엔드에서 이벤트는 사용자와 애플리케이션을 연결하는 가장 중요한 요소 중 하나다.하지만 이벤트를 명확한 기준 없이 남발하거나 무차별적으로 사용하기 시작하면, 당연히 코드는 산으로 갈것이다.예를 들어 이벤트 전파 구조를 충분히 이해하지 못한 채 문제가 생길 때마다 전파를 막아버리면, 원인은 파악하지 못한 채 증상만 해결하는 코드가 쌓이게 된다. 아래에서는 이벤트 실행 순서 기반으로 이벤트를 잘 사용하는 방법에 대해 작성해보려한다. 1. 이벤트 실행 순서 브라우저에서는 이벤트를 DOM트리를 따라 3단계로 전달하여 처리한다.캡처링 ➡ 타겟 ➡ 버블링 1.1 캡처링 단계이벤트는 window에서 시작해서 실제 이벤트가 발생한 요소까지 위 -> 아래 로 내려온다.캡처링 단계에서는 이벤트 리스너가 실행되지..

최근 들어 여러 채용 공고를 살펴보면, 우대사항에 '모노레포 사용 경험'이 포함된 경우를 심심치 않게 찾아볼 수 있다.이는 개발자들 사이에서 모노레포가 하나의 트렌드로 자리잡고 있다. 사실 프론트엔드는 백엔드에 비해 코드 수명이 짧다고 알려져 있으며, 대부분의 경우 단일 프로젝트만 존재하는 것이 아니라 여러 프로젝트를 병행하게 된다. 그러나 각 프로젝트를 다른 환경과 구성으로 관리하다 보면 개발자 경험(Developer Experience, DX)이 떨어지고, 새로 합류한 개발자들에게 진입 장벽이 높아질 수 있다. 그치만 이를 잘 설계하고 탄탄하게 작성을 하면 그래도 조금은 늘어나지 않을까라는 생각을 해보며 모노레포에 대해 글을 작성해본다. 1. 모노레포란?모노레포 (Monorepo) 는 쉽게 설명하..

react-native expo 활용해서 kakao map api랑 연동해서 현재의 위치값 마커 찍으려는데오전에 되었던게 오후에 갑자기 안된다 코드 그대로 했는데도 기계가 거짓말한다 오늘 오후는 그냥 날린 느낌이다...

요약실제 서비스를 한다면 - 내 앱 -> 앱 -> 추가 기능 신청 에서 카카오맵 심사 신청 필요. 로컬에서 작성하려면 - 내 앱 -> 앱 -> 일반 에서 테스트 앱을 추가 이후 해당 테스트앱에 들어가 제품 설정 -> 카카오맵 상태를 ON으로 변경 현재 작성중인 포트폴리오에서 카카오맵을 통한 api 호출이 필요하여앱을 추가한뒤에 사용하려했더니 오류가 발생하여 문제해결 방법을 찾고, 작성해보려한다.1. 문제 인식하기https://developers.kakao.com/docs/latest/ko/local/dev-guide#search-by-keyword Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해 보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인..

요약react-native-envdot은 라이브러리라서 예상치 않은 문제를 일으킬수있다. 나의 경우 welcom to expo 가 보이는 예상치 않은 페이지를 렌더 시켜주어서 걷어내고 Expo에서 권장하는 EXPO_PUBLIC_ 를 env에 붙여 사용 추천 React Native 프로젝트에서 환경변수를 쉽게 다루기 위해 다양한 방법들을 찾아보다가, 가장 먼저 눈에 들어온 건 바로 react-native-envdot 주간 다운로드 수가 약 14만 건에 달할 만큼 많은 유저들이 사용하여 별 의심 없이 설치를 진행하였다 (실수 😅😂) 설치는 간단했고, 아래 작업들을 순차적으로 진행했었다react-native-envdot 설치babel.config.js에 관련 플러그인 추가TypeScript를 사용..

요즘 인터넷 속도도 빠르고 네트워크 환경도 워낙 좋아서, , fetch 요청이 발생해도 체감되는 딜레이가 거의 없다.그래서인지 가끔씩 까먹고 구현을 하지 않는 경우가 있는데 최근 react-hook-form을 사용하면서 이런 상황을 마주했고,그리하여 유저의 액션 레벨에서 중복 요청을 막는 방법에 대해 작성을 해보려한다. 1. 일반 useState로 간단히 구성 ✅ 단순한 요청에 적합하고 , 쉽게 제어 가능하다. ❌ 로직이 복잡해질 가능성이 크다.const [isPending, setIsPending] = useState(false);const handleClickSubmit = async () => { if (isPending) return; setIsPending(true); try { a..

🐳 도커를 도입한 이유최근 개발자 면접에서 빠지지 않고 등장하는 질문이 있다.바로 "Docker 경험이 있나요?" 혹은 "CI/CD 구축해본 적 있나요?" 사실 프론트엔드 개발자 입장에서는 Docker가 백엔드나 인프라 쪽 이야기 일수 있겠지만 독립적인 환경의 필요성과 표준화된 환경의 필요하여 많이 사용하는거 같다이번 글에서는 Next.js 프로젝트에 Docker를 적용해보고,Next.js에서 제공한 경량화가 얼마나 차이나는지 볼까한다.🐳 Docker란? 공식홈페이지를 참고하자면 아래와 같다.Docker는 애플리케이션 개발, 배포 및 실행을 위한 개방형 플랫폼입니다. Docker를 사용하면 애플리케이션과 인프라를 분리하여 소프트웨어를 신속하게 배포할 수 있습니다. Docker를 사용하면 애플리케이션..

요약푸시 알림 등 여러 기능을 next-pwa로 활용을 하려면 멀티 서비스워커가 필요한데빌드시에 sw.js를 최적화하여 단일 서비스워커가 아니라면 중복 혹은 오류를 뿜는다.그리하여 아래의 코드로 변경 필요1. register:false => 자동적으로 서비스워커가 등록되지 않아야함2.최상위 클라이언트 컴포넌트에서 멀티 서비스워커 등록!1. 문제 인식하기next-pwa는 sw.js를 자체적으로 빌드시에 서비스워커로 등록하지만 초기화를 하여 sw.js에 코드 작성 불가원하는 서비스워커의 기능을 추가하려면 커스텀 서비스워커가 필요.동시에 두개의 서비스워커 등록이 불가함 인식   2. 원인 찾아가기1.  next.config.ts에 customWorkerDir:"worker"로 추가    - /public/wo..

요약페이지의 알림 허용과 시스템설정에서의 브라우저 알림 허용 확인하기 !!mac  : 시스템설정 - 알림 - 사용하는 브라우저의 알림 체크window :  windows 설정 - 시스템 - 알림 및 작업 - 앱 및 다른 보낸 사람의 알림 받기 켬으로 변경1.  문제 인식하기버튼 클릭시 푸시 알림이 오도록 기능을 추가하였으나 버튼 클릭시 푸시 알림이 오지 않음* 환경 : mac pc 웹뷰 2. 원인 찾아가기백엔드 - 프론트간의 통신으로 되어 있는 부분 제거하여 프론트에서의 단독 테스트로 진행프론트에서 중요 코드 (ex. return() / useEffect) 제외 주석처리더 간결하게 쉬운 테스트 코드로의 변경최종적이라고 생각했던 방법 또한 통하지 않아 코드가 아닌 환경에서의 문제라 판단하고 재검색   3...

평소 어떤 기술을 언제 사용할지 모르기에 많은 기술을 접해보고자 하는 마음이 있는데  just do it!!!이번 프로젝트에서는 모바일 친화적이고 주요 기능이 모바일 기능이다 보니 native와 pwa에서 고민을 하였다. 최종적으로 pwa 도입 확정!!native 대신 pwa를 선택한 이유는 이미 작성한 프로젝트가 있기에 새로 native로 작성하는 거보다 pwa 도입이 효율적이라고 판단하였다 물론 성능이나 기능 측면에서는 아쉬운 부분도 있지만, PWA는 점점 더 발전하고 있기 때문에 이를 테스트해보고 싶어서 이 글을 작성한다. 1. Next.js를 사용중이기에 next-pwa 도입 평소 사이드프로젝트에서는 stable 이긴 해도 최고로 높은 버전을 사용하고 있다.그래서 내 프로젝트는 Next.js 15..