프린세스 다이어리

백엔드 api가 완성되기 전, api문서의 응답 example 가지고 화면단에 보여줄 데이터를 가져오는 법을 정리해보았다. 왕초보라서^^ 경로 가지고 삽질하다가 다시는 시간 허비 안 하겠다고 다짐하며 쓰는 글. 1. axios 설치 yarn add axios 2. 데이터 요청 메서드를 정의하는 프로젝트 파일에서 axios import import axios from 'axios' 3. 데이터 요청 메서드 쓰기 export async function fetchInfo(): Promise { const response = await axios({ url: '/detailMock.json', method: 'GET', }) return Promise.resolve(response.data.result); } ..

하루 종일 고민했는데, 기본적인 Vue 라이프사이클을 이해하면 해결할 수 있는 문제였다. 부모는 bookingListPage, 자식은 bookingList 컴포넌트 구조인 상태에서, bookingListPage에서 데이터 요청을 하고 bookingList로 props를 넘겨주는 방식이다. 파일 구조는 대충 이런 식이다. store ㄴ BookingListStore.ts ㄴ index.ts component ㄴ BookingList.vue ㄴ BookingEmptyState.vue views ㄴ BookingListPage.vue 먼저 BookingListStore.ts 에 bookingList 등의 state가 있고, 백엔드에 리스트를 요청하여 state를 변경해주는 actions가 있다. const B..

debounce()는 특정 기간 동안 반복된 함수 호출을 마지막 1회만 호출하도록 제어해주는 메서드다. 1. debounce 메서드 Vue 3에서 사용법 1-1. lodash를 install 해주었다고 가정하고, import를 한다. import {debounce} from 'lodash'; 1-2. 기본적인 사용 방법 debounce 는 두 개의 인자를 받는다. 첫 번째는 콜백 함수, 두 번째는 시간(밀리세컨드)이다. const fetchList = () => { // 데이터 불러오는 로직 } debounce(fetchList(), 300) 1-3. Vue3 라이프사이클에 적용하기 자 그럼 이걸 언제 쓰는지 직접 작성했던 vue3 기반 프로젝트를 참고하여 기록해보려 한다. computed: { isSc..

웹팩의 핵심 구성 요소 1. entry - 웹 애플리케이션이 App.js라는 파일 내부에 선언된 여러 모듈들로 실행이 된다면, App.js 가 웹팩의 Entry 파일인 것. 즉 각 모듈들이 바라보는 최상위 자바스크립트 파일(App.js)을 중심으로 번들링 된다고 보면 됨. - 선언 방법은 어플리케이션의 루트 경로(node_modules 있는 경로)에 webpack.config.js 파일을 만들고 그 내부에 정의하면 됨. module.exports = { entry: './src/index.js' } 또한 엔트리 포인트가 2개 이상일 경우도 있음. entry: { login: './src/LoginView.js', main: './src/MainView.js' } - React나 Vue 프레임워크로 작업한..

실무에서 Vue를 이용해서 개발하다 보니 프로젝트 생성 시부터 웹팩이 이미 포함되어 있었고, 기초를 모르니 원하는 설정을 인터넷에서 찾아 짜깁기하는 수준에 그치게 되었다. 그래서 추후 연관된 문제해결을 위해 웹팩 기초를 처음부터 공부하고자 한다. 웹팩이란 여러 개 파일을 하나의 파일로 합쳐주는 모듈 번들러. - 모듈 번들러란 html, css, js, json, svg, ... 등의 자원을 모두 각각의 모듈로 보고, 이를 조합해서 하나의 결과물로 번들링하는(빌드하는) 도구임. 모듈 번들러가 필요하게 된 이유는 최근 복잡한 웹 애플리케이션의 등장과 관련이 있음. - 거대한 자바스크립트 소스코드와 대규모 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 ..

오류의 종류를 나누는 이유 오류를 최대한 빨리 고치기 위해서. - 어디서 오류가 났는지 알면 빠르게 대처할 수 있음. 논리 오류가 난 소스에서 구문이 잘못되었는지 볼 필요는 없다. 1. 컴파일 에러(Compile Error) 문법오류(Syntax Error) 등이 해당됨. 파싱 에러(Parsing Error)라고도 불림. 컴파일하는 동안에 발생하기 때문에 다른 스레드에는 전혀 영향 주지 않음. - 컴파일러/인터프리터가 소스 코드를 바이트 코드로 변환하면서 발견한 오류를 출력함 - 컴파일 시에 에러 메시지로 오류의 위치를 알려주기 때문에 찾기 쉬운 에러임 - 수정되지 않으면 프로그램은 컴파일되지 않음 - 해당 오류 코드가 포함된 동일 쓰레드 상에만 오류 처리가 되고, 다른 쓰레드의 코드는 오류가 없는 것처..

컴파일러가 무엇인지와 역할을 정리했고, 바벨을 사용하여 컴파일을 할 때와 타입스크립트 컴파일러로 컴파일할 때의 특징을 비교해보았다. 1. 컴파일러란 1-1. 컴파일러 특정 프로그래밍 언어를 다른 프로그래밍 언어로 옮기는 프로그램 1-2. 타입스크립트 컴파일러의 역할 2가지 1. 최신 타입스크립트/js 를 브라우저에서 동작할 수 있도록 구버전의 js로 *트랜스파일함. 2. 타입 체킹. - 타입체킹과 컴파일은 독립적으로 동작하기 때문에, 타입 에러가 있는 코드도 컴파일이 가능함. 타입에러 났을 때 컴파일하지 않으려면 tsconfig.json에서 noEmitOnError를 설정하면 됨. - 독립적이라 선언된 타입과 런타임 타입이 다를 수도 있음. 이런 상황을 최대한 피해야 함. * TypeScript 컴파일러..