전체 글94 [Vue.js] 라우터 미들웨어에서 location.replace() 사용하기 (feat. next()) 1. 계기Vue2 기반 프로젝트에서 로그인 인증 흐름을 구성하던 중, window.location.replace()를 사용해 토큰 노출을 방지하려고 했다. 그러나 예상치 못한 깜빡임과 잘못된 라우팅 문제를 부딪히며 새로운 사실을 알게 되었고, 해결 과정에 재미를 느껴, 이 과정을 포스팅해 보았다.2. 요구사항 정리프로젝트 요구사항 플로우를 정리하면 아래와 같다.서버 쪽 로그인 페이지에서 로그인로그인 검증 후, 성공 시 프론트 쪽 루트 페이지로 리다이렉트프론트에 토큰이 없으면, 서버 쪽 검증 페이지로 리다이렉트프론트에 토큰이 있으면, 그대로 루트 페이지를 보여줌 (로직 종료)검증 성공 후, 서버에서 프론트로 params에 토큰을 담아 루트 페이지로 리다이렉트params의 토큰이 있으면, 프론트에서 내부에 .. 2025. 5. 28. [React] SWR은 언제 사용할까? (feat. 리액트에서 반복적인 useEffect 대신 SWR 사용하기) 1. 계기최근 "리액트에서 반복적인 useEffect 대신 SWR 사용하기"라는 블로그 글을 읽었다. 평소 블로그 프로젝트를 진행하며 useEffect를 자주 사용해 왔고, 데이터 패칭 관련 고민도 많았던 터라 이 주제는 꽤 흥미롭게 다가왔다. 하지만 글을 읽으며 오히려 더 많은 궁금증이 생겼고, ChatGPT에게 여러 질문을 던지며 나만의 정리를 해보기로 했다.2. ChatGPT에게 던졌던 질문들내가 ChatGPT에게 던졌던 질문들을 나열해 보았다. 크게 SWR을 사용하는 이유, 현재 블로그 프로젝트에 SWR 적용여부, 개발 시 우선 순위 세 가지에 대해 질문해 보았다.반복되는 useEffect를 SWR 대신 커스텀 훅으로 분리해서 사용할 수도 있지 않을까?useSWR을 사용하면서 공통적인 요소들이 반.. 2025. 5. 20. [Web] Webpack HMR과 풀 페이지 리로드 (+IE9 해결 방법) 1. 계기이전 프로젝트 진행 시, IE9을 대응해야 했다. 그리고 이 프로젝트를 기반으로 브랜치를 따 새로운 프로젝트를 진행하게 되었는데, 이로 인해 기존 개발 환경을 그대로 유지하고 있었다.이전에는 눈치채지 못했으나, 스타일을 수정할 일이 잦아지면서 자동으로 반영되지 않는 문제를 발견하게 되었다.특히 저장할 때마다 페이지를 새로고침하지 않아도 바로 적용되던 HMR(Hot Module Replacement) 기능이 제대로 작동하지 않아 큰 불편함을 느꼈다.개발에 직접적으로 WebSocketServer를 쓰는 것이 아니라서, 구현 상의 문제는 없으나, 스타일 수정이 잦아 개발 시의 불편함을 해결하고 싶었다.(개발 시 자동 새로고침 이슈가 발생한다면 HMR 문제가 아닌지 확인하길 추천합니당.)같은 보일러플레.. 2025. 3. 14. [Web] 브라우저 렌더링, SSR과 CSR는 다를까? 1. 계기개발을 하면서 CSR과 SSR의 개념을 명확하게 이해하는 것이 중요하다고 느꼈다. 아래는 이번 글을 쓰게 된 계기이자 내가 헷갈렸던 부분이다.CSR과 SSR의 가장 큰 차이는 무엇인가?CSR에서는 백엔드 서버가 HTML을 제공한다고 하는데, 프론트엔드 서버가 있어도 백엔드에서 HTML을 제공하는 건가?SSR에서 "서버"란 무엇을 의미하는가? 프론트엔드 서버인가, 백엔드 서버인가?프론트엔드 서버와 백엔드 서버의 역할은 무엇인가?어느 정도 알고 있다고 생각했었는데, 한번 헷갈리기 시작하니 과연 내가 제대로 알고 있던 것이 맞았는지 의문이었다.그래서, 이번 기회로 정말 정말로 제대로 이해하고 넘어가기로 했다 !2. 브라우저 렌더링 과정CSR과 SSR을 설명하기에 앞서, 먼저 이 글을 쓰게 된 초기 궁.. 2025. 2. 11. [Next.js] App Router vs Pages Router (feat. 달라진 폴더 구조) 1. 계기Next.js로 새로운 프로젝트를 진행 중인데, 최신 버전으로 설치하여 14 버전을 사용하게 되었다.이전(몇 넌 전...) 프로젝트를 진행했던 경험과 구글링을 참고해 폴더 구조를 구성하다 보니, 뭔가 라우팅이 원활하게 되지 않았다.문제를 알 수 없어 검색을 해보다, Next.js 14 버전은 Next.js 13부터 생긴 App Router를 기본적으로 사용하고 있어, 내가 이전에 사용했던 Pages Router 기반의 폴더 구조를 중간중간 참고하려고 하니 충돌이 생겼던 것이다.이참에, Next.js의 App Router와 Pages Router에 대해 비교해 보고 정리하고자 한다.2. 개발 환경Next.js 버전: 14Node.js 버전: 18.16.03. Pages Router우선 기존의 Pa.. 2025. 1. 19. [JavaScript] 디바운스 구현하기 (feat. 더블 클릭 이슈 해결하기) 1. 계기유지보수 진행 중인 프로젝트에서 캘린더를 조작하면 API를 바로 요청하여 테이블을 조회하는 기능이 있었다. 이 경우, 캘린더를 키보드나 마우스로 빠르게 조작할 시, 변경되는 날짜마다 API가 요청되어 서버 쪽 부하가 생길 것 같아 로직 수정이 필요해 보였다. 추가로 최근 더블 클릭 이슈가 발생하여, 해당 문제를 해결하고자 다양한 방법을 시도하였다. 그 중 채택된 방법이 현재 작성할 디바운스를 활용한 방법이다.현재 프로젝트의 규모와 이후 작업을 고려해봤을 때, 해당 방법이 가장 최선이라 선택하게 되었다.앞서 말한 디바운스 구현 시에는 딱 한 군데에서만 필요했고, 코드 양이 적어 코드를 분리하지 않았는데, 이번 디바운스 적용으로 코드를 모듈화 하였다.라이브러리를 사용하지 않고 직접 구현한 이유는, .. 2024. 8. 31. 이전 1 2 3 4 ··· 16 다음
