🤔 REST API로 데이터를 불러오고 Vue를 통해 화면단을 구성하면서 Axios를 활용한 비동기통신을 많이 사용하게 된다. DB 접근을 통한 CRUD는 물론, 화면을 전환할 때마다 API에 요청을 보내 사용자의 인증/인가 여부를 리턴해야 하기 때문이다. 기본적으로 요청 URL을 매개인자로 넣어야 하는데 같은 호스트를 매번 적어주어야 하고, 혹시라도 포트번호가 바뀌면 모든 메서드를 수정해야 했다. 뿐만 아니라 인증을 위해 헤더에 토큰 값을 추가하고, 만약 응답에서 토큰이 만료됐다는 결과값을 반환하면 그 결과를 vuex 상태에 저장하고... 같은 작업을 반복적으로 하는 것이 비효율적으로 느껴졌다. 📁 전역 설정 axios는 모든 요청에 공통적으로 적용되는 구성 기본 값(Config default) 설정을..

🌙 MOVIE 지난 프로젝트에서는 싱글 페이지 애플리케이션의 구조 파악이 미약했다. 이에 영화 검색, 검색 결과 조회, 영화 상세정보 조회 등 모든 기능을 하나의 페이지에 때려넣어야 했다. 하지만 라우터를 학습하면서 기존에 모달로 구현했던 영화 상세정보 조회 기능을 분리된 url에서 조회하도록 바꾸어보기로 했다. 더불어 글래스모피즘을 활용한 UI 수정도 곁들였다✨ Before After /contents/${id}를 통해 상세정보에 접근할 수 있도록 RESTful하게 만들어보았다. Router 메인 페이지(검색창)과 상세정보 페이지를 분리하고 자유롭게 드나들기 위해 각각의 컴포넌트를 분리했다. 기존에는 최상위 root에 header, content, footer 등 여러 컴포넌트가 존재했다. 하지만 컴포..

🌙 MOVIE Vue 3 프로젝트 TDMB REST API Vue 기본 개념인 컴포넌트 구조 활용 axios를 활용해 REST API와 비동기 통신 Vuex를 활용해 컴포넌트들이 공유하는 상태 선언, 코드 중복 최소화 Vue.js를 공부하면서 CLI로 프로젝트를 생성하고 로컬 스토리지를 활용한 일정관리 앱을 만들었다. 하지만 단순히 key와 값만을 저장할 수 있는 로컬 스토리지의 기능에서 한계를 느꼈고, 본격적으로 프로젝트에 들어가기 전 나만의 프로젝트를 만들어 복습해보고 싶었다. 예전에도 영화 API를 사용해 비슷한 프로젝트를 진행한 적이 있다. 당시에는 MVC 모델 기반으로 화면단은 JSP를 사용했는데, 비즈니스 로직과 UI 코드들이 뒤섞여 디버깅에 엄청 애먹었다. 이번에는 프론트 프레임워크로 Vue..

✏️ 캡틴판교님의 Vue.js 시작하기 강의를 수강하고 정리한 글입니다. 🌤️ Vue.js 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크 Vue.js는 웹 페이지 MVVN 패턴의 뷰 모델에 해당하는 화면단 라이브러리이자 프론트엔드 프레임워크이다. 리액트와 앵귤러의 장점을 모두 갖추고 있으며, 비교적 가볍고 성능이 우수하다는 점에서 주목받고 있다. 🤔 왜 프레임워크이자 라이브러리인가? 뷰는 js 스크립트 태그 내에 작성하기 때문에 얼핏 보면 라이브러리에 불과해 보이지만, 프레임워크로 불리기도 한다. 알다시피 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 제공한다. 하지만 그보다 큰 범위에서 라우터, 상태관리, 테스팅을 쉽게 결..