즐코

Get a full fake REST API with zero coding in less than 30 seconds (seriously) 아주 짧은 시간 내에 REST API를 구축해주는 API라고 한다. 예전에 팀 프로젝트나 개인 프로젝트를 할땐 nodeJS-express로 백서버를 구축했는데, 프로젝트가 아닌 vue와 같은 새로운 프론트엔드 프레임워크를 공부할때는 노드로 백서버를 구축하는 건 배보다 배꼽이 커지는 경우일 것이다. 또한, 회사에서 새로운 페이지나 기능을 만들어야할 때 백엔드 쪽에서 api를 만들어주기 전까지 아무것도 하지 않는 건 비효율적이다. 이때 필요한 게 이 json-server 라이브러리가 아닐까 싶다. 즉, api 요청이 필요한 프론트엔드 개발 단계에서만 쓰이는 서버라고 보면..

어드민 사이트의 경우 메인 진입 시 대쉬보드를 마주하는 구성이 많다. 그 대쉬보드는 여러 개의 api 요청을 통해 서버로부터 각 정보를 가져온다. 처음에 dashboard.vue 한 페이지 안에서 다 작성하려고 했으나, template 부분이 너무 길어져서 테이블별로 분리하기로 판단했다. (테이블이 만약 한 페이지에 5~6개 정도가 된다면, 한 컴포넌트 안에서 작성하는 것보다 테이블별로 컴포넌트를 분리하는 게 맞다고 본다) 그래서 아래와 같은 순서대로 작업했다. 1. 부모 컴포넌트 (dashboard > index.js) 안에 다수의 테이블 컴포넌트들 (dashboard > 어쩌고Table.vue)로 따로 뺐다. 2. 부모 컴포넌트에서 created() 상에서 Promise.all()로 한꺼번에 응답을 ..

누가 vue에서 헷갈리는 프로퍼티가 있냐고 물어본다면 나는 computed 와 watch 라고 말할거다. 그래서 공부하는 김에 정리해두고 적재적소에 쓰고자 한다. 우선 기본적으로 내에는 많은 로직이 직접적으로 들어가면 복잡해 보일 뿐만 아니라 해당 조건이 반복적으로 쓰인다면 유지보수가 어렵다. (아래의 예시) 그래서 methods / computed / watch와 같은 속성이 존재한다. Has published books: {{ author.books.length > 0 ? 'Yes' : 'No' }} computed 위의 예시를 computed를 사용해서 리팩토링했다. 데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 내부에서 하고 최종적으로 html 상에는 데이터를 표현만 하는 것이 중요하다. 우선..

각 컴포넌트에서 axios 요청을 일일이 보내는 것보다 api 로직은 따로 빼는 게 나중에 수정하기도 찾아쓰기도 편하므로 분리해주는 게 좋다. 프로젝트를 할때마다 서버쪽 API에 axios 요청 보낼때마다 base url은 같은데 이걸 계속 반복해서 갖다쓰는게 불편했는데, axios.create()를 쓰면 됐다. axios.create() axios 공통 설정 (config - baseURL 과 같은 부분)을 create 메소드를 통해 인스턴스화해준다. - baseURL : 반복되는 도메인을 넣는다. - headers : request Header의 내용을 만져줄수있다 > Authorization 속성 : 토큰값을 넣어주는 등의 방식을 취할 수 있다. // src/api/index.js import ax..

VUE에서 .env 설정은 next와 거의 같다. .env 파일 상에서 VUE_APP_ 접두사가 붙은 변수는 자동 로드가 된다. # .env.development : 개발 환경에 적용되는 환경변수 파일 VUE_APP_API_URL=http://localhost:3000/ # .env.production : 배포 시 적용되는 환경변수 파일 VUE_APP_API_URL=https://vue-til.com/ # .env # : 공통 변수나 .env.development 또는 .env.production 파일이 없을 경우 적용됨 - npm run serve (vue-cli-service serve) 시 development 모드 : .env.development - npm run build (vue-cli-se..

vue-router 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리인 vue-router를 사용하여 라우팅을 해본다. npm i vue-router router-link 와 router-view - router-link : a 태그와 같은 역할을 한다. to에 이동할 URL을 넣는다. a 태그와의 다른점은 reload없이 url을 이동시켜준다! 화면 깜박임이 없다. - rotuer-view : 특정 url로 이동 시 vueRouter 인스턴스 상에 정의한 component 를 렌더해줄 위치를 나타낸다. // 페이지 이동 태그 // 기본적으로 화면에서는 태그로 표시된다. // 페이지 표시 태그 // 변경되는 url에 따라 각 url에 해당하는 컴포넌트가 렌더되는 영역 vue router 인..

1. initial setting CRA (create-react-app) 와 같이 전체 프로젝트 템플릿 install이 가능하다. 리액트와 마찬가지로 vue CLI는 개발 서버를 내장하고 있기에 npm run serve로 서버 실행이 가능하다. npm i -g @vue/cli vue create [project 폴더명] // vue2 || vue3 중 선택 보통은 Default vue2 || Default vue3를 설치하지만, 프로젝트에 따라 manually 설정하고 싶다면 "Manually select features" 옵션 선택 1. 방향키와 Enter 를 사용해 "Manually select features" 옵션 선택 2. 첫 번째 메뉴에서 프로젝트에 포함하고 싶은 기능들 선택 : "Babel..