프론트엔드2 Vue.js 입문 (프로젝트 구조, 라우터, 네비게이션 가드) Vue.js를 처음 접했을 때 솔직히 "이걸 왜 배워야 하지?"라는 생각이 먼저 들었습니다. HTML 파일 하나로 다 짜면 되는 거 아닌가 싶었는데, 직접 써봤더니 그 생각이 완전히 바뀌었습니다. 파일을 컴포넌트 단위로 쪼개서 조립하는 방식이 이렇게 편할 줄은 예상 밖이었습니다. 이 글은 Vue.js 프로젝트를 처음 만들면서 겪은 것들을 구조, 라우터, 그리고 네비게이션 가드 순으로 정리한 경험담입니다.Vue.js 프로젝트 구조를 처음 열었을 때npm create vue@latest 명령어 하나로 프로젝트를 생성하면, 폴더와 파일이 한꺼번에 쏟아집니다. 처음에는 뭘 건드려야 할지 몰라서 한참 멍하니 쳐다봤습니다. 제가 직접 써봤을 때 가장 먼저 느낀 건 "건드릴 파일이 생각보다 적다"는 점이었습니다.실질.. 2026. 6. 23. Vue 상태관리 (Pinia, EncryptStorage, 라우터) 컴포넌트가 많아지면 데이터를 그냥 props로 전달하면 된다고 생각했습니다. 직접 부딪혀보기 전까지는요. 부모에서 자식으로, 자식에서 또 자식으로 계속 타고 내려가다 보니 어느 순간 어디서 데이터가 바뀐 건지 추적조차 힘들어졌습니다. 그때 처음으로 상태관리 라이브러리가 왜 필요한지 몸으로 느꼈습니다.컴포넌트 구조가 복잡해질수록 props 전달이 한계에 부딪힌다프로젝트 초반에는 데이터를 부모 컴포넌트에서 자식 컴포넌트로 props로 넘기는 방식이 직관적으로 느껴졌습니다. 그런데 컴포넌트 depth가 3단계, 4단계로 깊어지기 시작하면 이야기가 달라집니다. 중간에 끼어 있는 컴포넌트는 그 데이터가 필요하지도 않은데 단순히 아래로 전달하기 위해 받아야 합니다. 이걸 props drilling이라고 부르는데, .. 2026. 6. 22. 이전 1 다음
