뭉균의 개발일지

🚪 들어가며  안녕하세요 뭉균입니다! 1월에 신입 프론트엔드 개발자로 취업하여 곧 2달차가 됩니다. 그동안 다양한 업무를 하고 있었고 그 중, 최근에 프로젝트를 진행하며 마주쳤던 이벤트 버블링의 개념에 대해 공유하고자 포스팅하게 되었습니다😎   📚 이벤트 버블링이란?  HTML 요소에서 발생한 이벤트가 해당 요소의 상위 요소(부모, 조상)로 전파되는 현상을 의미합니다.즉, 특정 요소에서 이벤트가 발생하면, 그 이벤트는 해당 요소에서 먼저 실행된 후 부모 요소, 그 부모의 부모 요소 등으로 전파됩니다.  클릭하세요   button#child을 클릭하면 "자식 요소 클릭!" 경고창이 뜹니다.이후 클릭 이벤트가 부모 요소인 div#parent로 전파되어 "부모 요소 클릭!..

🚪 들어가며 (해당 포스팅은 Next.js의 공식문서의 개념 정의를 참고하여 작성했습니다.) https://mungyun.tistory.com/41 [Next.js] Parallel Routes(병렬 라우트)🚪들어가며 (해당 포스팅은 Next.js의 공식문서의 개념 정의를 참고하여 작성했습니다.) 인스타그램을 보다보니 위의 GIF와 같이, 링크가 같음에도 불구하고 게시물을 처음 클릭했을 때는 모달mungyun.tistory.com지난 게시물에서 작성했던 코드를 기반으로 하기 때문에 안보신 분들은 위의 포스팅부터 확인해주시면 감사하겠습니다☺️   📖 Intercepting Routes Intercepting routes를 활용하면 애플리케이션의 다른 라우트를 현재 레이아웃 내에서 불러올 수 있습니다...

🚪들어가며 (해당 포스팅은 Next.js의 공식문서의 개념 정의를 참고하여 작성했습니다.) 인스타그램을 보다보니 위의 GIF와 같이, 링크가 같음에도 불구하고 게시물을 처음 클릭했을 때는 모달 형태로 페이지가 렌더링되고 이후에 새로고침을 하면 모달이 아닌 페이지가 렌더링되는 경우를 발견했습니다.  이 기술을 구현하기 위해서 Next.js에서의 Parallel Routes와 Intercepting Routes가 사용되는데, 이번 포스팅에서는 Parallel Routes에 대해 먼저 알아보고 추후 게시물을 통해 Intercepting Routes를 다루겠습니다.    📖 Parallel Routes Parallel Routes를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 ..

🚪들어가며   위의 사진은 검색어를 입력하면 그 검색어가 포함된 문자만 필터되도록 설정한 컴포넌트입니다. "가나다라"를 검색할 때, 검색어의 상태인 search가 어떻게 변하는지 보겠습니다.   그런데, 꼭 이렇게 한글자 한글자마다 상태를 변화시킬 필요가 있는지 의문이 들었습니다. 위의 예시는 간단하기 때문에 성능 상 큰 문제가 없을 것입니다. 하지만, 만약 저렇게 상태가 변화할 때마다 API 요청을 보내는 상황이라면 성능에 큰 문제가 생길 것입니다. 이럴 때, Debounce 개념을 통해 성능을 개선할 수 있습니다.   📗 디바운스 (Debounce)란?디바운스는 짧은 시간 동안 여러 번 발생하는 이벤트를 하나로 합쳐서 처리하는 기술입니다. 주로 사용자 입력, 창 크기 조정, 스크롤 이벤트와 같은 ..

🚪 들어가며 refreshToken을 사용하여, 서버에 토큰 재발급을 요청하는 상황에서는 인터셉터 또는 미들웨러를 사용할 수 있습니다. 저는 우선 아래 코드와 같이 인터셉터를 사용해보려고 했습니다. axiosInstance.interceptors.response.use( (res) => res, // 성공적인 응답은 그대로 반환 async (error) => { const originalRequest = error.config; // 401 Unauthorized 에러가 발생하고, 아직 리프레시 토큰을 시도하지 않은 경우 if (error.response?.status === 401 && !originalRequest._retry) { originalRequest._retr..

🚪들어가며 우선, 해당 글은 React-query의 Mutation에 관한 개념을 알고 있다는 가정 하에 작성했습니다😎  인스타그램이나 페이스북을 하다보면 특정 게시물에 좋아요를 누르는 경험을 쉽게 할 수 있습니다. 사용자가 좋아요 버튼을 클릭하면 서버 응답을 기다리지 않고 클라이언트에서 즉시 좋아요 수가 증가합니다. 이때 사용자는 "좋아요가 바로 반영되었구나"라고 느끼지만, 실제로는 서버에 요청이 전송되고 처리 중인 상태일 수 있습니다. 이처럼 서버가 요청을 성공적으로 처리할 것이라고 가정(낙관적인 가정)하고, 먼저 클라이언트 상태를 변경하는 것을 Optimistic Update라고 합니다.  Optimistic Update 적용 전서버에서 좋아요 상태가 업데이트되고 응답이 클라이언트로 돌아올 때까..

🚪 들어가며 오늘은 많은 분들이 궁금해하셨던 금융투자소득세, 이른바 '금투세'에 대한 소식을 전해드리려 합니다. 최근 국회에서 관련 법안이 통과되며 투자자들에게 중요한 변화가 예고되었는데요. 금투세 폐지와 가상자산 과세 유예를 비롯한 이번 소득세법 개정안의 주요 내용과 그 의미를 함께 살펴보겠습니다.   🔗 기사 링크: https://www.yna.co.kr/view/AKR20241210118900001?input=1195m 금투세 폐지, 가상자산 과세 2년 유예…소득세법 국회 통과 | 연합뉴스(서울=연합뉴스) 김치연 조다운 기자 = 금융투자소득세가 폐지된다. 내년부터 시행될 예정이던 가상자산 과세는 2년 미뤄졌다.www.yna.co.kr   📚 기사 요약 금융투자소득세 폐지와 가상자산 과세 유예 ..

🚪 들어가며 안녕하세요! 👐 오랜만에 경제신문읽기 포스팅으로 인사드립니다. 11월 한달 내내 개발 프로젝트를 진행했었고 또한, 현재에도 새로운 프로젝트를 진행중이기에 자투리 시간이 나지않아 포스팅을 못했습니다 😂 다시 주3회 포스팅을 목표로 경제신문읽기 포스팅을 시작하겠습니다. 이번 포스팅의 주제는 청년층의 쉬었음 증가세입니다.  🔗 기사 링크https://www.hankyung.com/article/2024120278345 "맘에 드는 일자리 없어"…그냥 쉬는 청년 늘었다"맘에 드는 일자리 없어"…그냥 쉬는 청년 늘었다, 경제www.hankyung.com   📚 기사 요약  청년층 '쉬었음' 인구의 증가한국에서 일을 하지 않고 '쉬는' 청년층(25~34세) 비중이 크게 늘어나, 전체 비경제활동..