Study41 [Vue.js] 동적 라우팅(Dynamic Routing) 적용하기 1. 계기처음 프로젝트를 개발할 때는 로그인 여부에 대한 메뉴 접근 여부만 달랐기 때문에 정적 라우터만으로 충분했다.하지만 권한에 따라 접근 가능한 메뉴가 달라져야 하는 요구사항이 생기면서, 자연스럽게 동적 라우팅을 고민하게 되었다.처음에는 단순히 라우트에 meta: { requiresAuth: true } 같은 값을 넣고 beforeEach 가드에서 접근을 막는 방법을 떠올렸다.하지만 이 방식은 라우트 정의 자체가 클라이언트에 남아 있기 때문에, 사용자가 직접 URL을 입력하면 가드까지 진입할 수 있다.즉, UX 문제뿐만 아니라 보안상 불필요한 노출이 발생할 수 있었다.반면, 아예 라우트를 생성하지 않으면 메뉴도 그려지지 않고, 라우터에 해당 경로가 존재하지 않으므로 접근 시 바로 404가 된다.결과적.. 2025. 9. 15. [Web] CDN이란? (feat. CloudFront) 1. 계기프로젝트를 진행하다 보면, 디자이너나 다른 개발자에게서 https://d1234abcd.cloudfront.net/logo.png 같은 URL을 받을 때가 있다.그동안 나는 그걸 그냥 “아, 이거 빠른 이미지 URL이구나” 정도로만 생각했다.왜 빠른지, 어떻게 동작하는지, 그 뒤에서 무슨 일이 일어나는지는 전혀 몰랐다.그러던 중 CloudFront에 대한 글을 보게 되었고, 그제서야 CDN, CloudFront에 대해 공부를 시작했다.2. CDN이란?CDN(Content Delivery Network)은 전 세계에 분산된 서버 네트워크를 이용해 사용자가 더 가까운 서버에서 콘텐츠를 내려받을 수 있게 해주는 서비스다.그저 단순히 "빠른 URL"로 그치는 것이 아닌, 누군가가 미리 요청해서 가까운 .. 2025. 8. 29. [React] ref는 props로 넘기면 안 되는 걸까? (feat. useRef(), useImperativeHandle()) 1. 계기 ref에 대한 코드를 보는 중, 문득 '이렇게 ref 객체를 props로 넘기면 안 되는 걸까? ref.current로 접근하는 건 props로 넘기나, ref로 넘기나 똑같은데 굳이 ref라는 특수한 방식을 써야 하는 이유가 있을까?' 하는 궁금증이 생겼다.고민해 보니, 그동안 ref를 사용하긴 했지만 '제대로 알고 사용했는가'라는 질문을 듣는다면 그렇다고 확신하지 못하겠다는 생각이 들었다. 그래서 이 기회에 제대로 알아보자는 생각을 하게 되었다! 2. ref란?먼저, ref에 대해 찾아보았다.React에서 ref는 컴포넌트나 DOM 요소에 직접 접근할 수 있도록 해주는 방법이다.ref는 렌더링 결과인 DOM에 직접 보이지 않고, 오로지 React 내부에서만 사용되는 참조 연결 장치이다. .. 2025. 8. 11. [Vue.js] 페이지 전환 후 도착한 API 응답이 UI를 망가뜨릴 때 (feat. AbortController) 1. 계기기존 서비스하던 페이지에 로더를 넣다가 예상치 못한 에러를 발견했다.같은 기능을 하는 두 페이지에서 데이터를 가져와 그리드에 뿌려주는 조회 기능이 있는데, 데이터 양이 많아지면서 로더의 필요성을 느껴 추가하게 되었다.진짜 문제는 페이지를 이동하면서 발견되었다.같은 기능을 하여 같은 전역 상태로 관리하고 있었기 때문에, 전역 변수에 데이터가 덮여 써지는 문제가 발생했다 !! 해당 문제를 해결하면서 알게 된 내용을 정리해보고자 하였다. 2. 개발 환경Vue.js 버전: 2.6.14Vue.js CLI 버전: 5.0.8TypeScript : 미사용 3. 문제 상황문제 상황을 자세하게 설명하자면 아래와 같았다.사용자는 A 페이지에서 조회 버튼을 누르고, 기다리는 동안 다른 페이지(B 페이지)로 이동했다... 2025. 7. 23. [Vue.js] 이미지 동적 로딩 (feat. require.context()) 1. 계기저장되어 있는 이미지를 서버에서 보내주는 값에 따라 보여주어야 하는 UI를 개발하게 되었다.이미지의 개수가 몇 개 안 되었을 때는, import를 사용하여 미리 이미지를 불러온 후, 값에 따라 로드하는 방식을 선택했지만, 이미지가 점차 많아져 중복된 로직을 하나의 함수로 사용하는 것처럼 동적으로 이미지를 불러오고 싶었다.배포 환경에서도 동작하도록 어떻게 해결했는지 정리해 보려고 한다.2. 개발 환경Vue.js 버전: 2.6.14 Vue.js CLI 버전: 5.0.8TypeScript : 미사용 3. require 동적 이미지 로드 + @error로 처리 (실패)처음에는 단순하게 아이디를 기준으로 이미지를 동적으로 받은 후, 이미지가 없을 때 @error 이벤트를 사용해 fallback 이미지를 .. 2025. 6. 26. [Vue.js] 라우터 미들웨어에서 location.replace() 사용하기 (feat. next()) 1. 계기Vue2 기반 프로젝트에서 로그인 인증 흐름을 구성하던 중, window.location.replace()를 사용해 토큰 노출을 방지하려고 했다. 그러나 예상치 못한 깜빡임과 잘못된 라우팅 문제를 부딪히며 새로운 사실을 알게 되었고, 해결 과정에 재미를 느껴, 이 과정을 포스팅해 보았다.2. 요구사항 정리프로젝트 요구사항 플로우를 정리하면 아래와 같다.서버 쪽 로그인 페이지에서 로그인로그인 검증 후, 성공 시 프론트 쪽 루트 페이지로 리다이렉트프론트에 토큰이 없으면, 서버 쪽 검증 페이지로 리다이렉트프론트에 토큰이 있으면, 그대로 루트 페이지를 보여줌 (로직 종료)검증 성공 후, 서버에서 프론트로 params에 토큰을 담아 루트 페이지로 리다이렉트params의 토큰이 있으면, 프론트에서 내부에 .. 2025. 5. 28. 이전 1 2 3 4 ··· 7 다음
