기록/FRONTEND13

• 

  [VSCode] vscode에서 eslint와 prettier 충돌 문제 vscode에서 eslint + prettier 사용해서 vue 프로젝트를 하는 중에 쉼표가 사라지거나 endOfLine오류가 자꾸 발생했다. 인터넷에서 찾아보다가 eslint와 prettier 충돌문제인 건 눈치챘는데 설정을 아무리 바꿔도 해결되지 않았다. 내가 찾은 해결방법은 vscode의 Prettier ESLint 확장프로그램을 까는 것이다. 따로따로면 충돌나니까 애초부터 eslint+prettier 둘을 같이 쓰게 나온 거면 어떨까? 해서 깔아봤는데 다행히 성공적이었다. 기본 포맷터를 이 확장프로그램으로 설정하면 모든 게 다 깔끔하게 해결된다. 기록/FRONTEND 2022. 5. 30.

• 

  [Vue] bootstrap 하위 컴포넌트 모달창 상위 컴포넌트에서 열기 하위 컴포넌트 모달창을 상위 컴포넌트에서 열어야 할 상황이 생겼다. 내 뷰의 구조는 오른쪽이다. 원하는 흐름은 HouseListItem 하나를 클릭하면 해당 정보를 가진 modal창(HouseDetail)이 HouseList에서 열리는 것이다. 모달 on/off 상태를 저장할 변수를 설정하려고도 생각해봤지만 더 간단한 방법을 발견했다. 1. HouseListItem 각각을 클릭하면 HouseList로 $emit을 보낸다. 2. HouseList는 해당 이벤트가 발생하면 모달창을 여는 함수를 호출한다. HouseListItem 클릭하면 selectHouse를 호출한다. selectHouse는 상위컴포넌트(HouseList)로 이벤트를 보낸다. selectHouse(aptCode){ this.$emit("o.. 기록/FRONTEND 2022. 5. 29.

• 

  [Vue] Vuex 1. Vuex vue.js 애플리케이션에 대한 상태관리패턴 + 라이브러리다. 애플리케이션 모든 컴포넌트들의 중앙집중식저장소 역할로 데이터를 관리한다. 이 방식은 예측 가능한 방식으로 상태를 관리할 수 있다. 기존의 단방향 통신은 데이터의 흐름이 직관적이라는 장점이 있지만, 부모 자식 단계가 많이 복잡해진다면 데이터의 전달하는 부분도 매우 복잡해져서 유지보수가 힘들다는 단점이 있다. 애플리케이션이 여러 구성 요소로 구성되고 더 커지는 경우 데이터를 공유하는 문제도 발생한다. vuex는 데이터 관리하는데에는 효율적이지만, 소스가 복잡해 개념 이해와 시작에 비용이 든다. 단기간, 장기간 생산성 간 기회비용이 있다는 것도 유의해야한다. 대규모 프로젝트에는 vuex가 효율적인 선택이다. 2. Vuex 핵심컨셉 1.. 기록/FRONTEND 2022. 5. 28.

• 

  [Vue] SFC(Single File Component) SFC(Single File Component) 확장자가 ".vue"인 파일이다. vue cli에서 사용한다. .vue 파일에서는 template, script, style을 모두 합쳐서 작성할 수 있다. 구문 강조가 가능하고, 를 사용해 컴포넌트에만 css범위를 제한할 수 있다. 전처리기를 사용해 기능의 확장이 가능하다. template 기본언어는 html이다. 각 .vue 파일은 한번에 최대 하나의 블록을 포함할 수 있다. template는 무조건 하나의 루트 엘리먼트를 포함해야 한다. 내용은 문자열로 추출(``)되어 컴파일된 Vue Component의 template옵션으로 사용된다. script 기본언어는 javascript다. 각 .vue 파일은 한 번에 최대 하나의 블록을 포함할 수 있다. E.. 기록/FRONTEND 2022. 5. 27.

• 

  [Vue] Vue CLI(feat.NodeJS) 1. VUE CLI(Command Line Interface) Vue.js 개발을 위한 시스템으로 Vue.js에서 공식으로 제공하는 CLI다. Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩을 제공한다. Vue와 관련된 오픈소스들 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있다. 2. 설치 NodeJS https://nodejs.org/ko/ 에서 LTS 버전을 다운로드한다. 더보기 NPM(Node Package Manager) command에서 third-part 모듈을 설치하고 관리하는 툴이다. 모듈 검색은 https://www.npmjs.com/ 에서 할 수 있다. npm init을 하면 package.json이 생성되는데, maven의 pom.xml과 역할이 비슷하다. 모듈 설치 1. 작.. 기록/FRONTEND 2022. 5. 26.

• 

  [Vue] Router 1. Router 라우터는 컴포넌트와 매핑되어 vue를 이용한 SPA(Single Page Application)를 제작할 때 유용하다. URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여준다. 2. 설치 cdn 방식이다. ​ 모듈 시스템에서 사용하면 Vue.use()를 사용해서 명시적으로 라우터를 추가해야 한다. import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 3. 연결 - 선언적 네비게이션 HTML 1. router-link 네비게이션을 위해 router-link 컴포넌트를 사용한다. to를 이용해 구체적인 속성을 지정한다. 이름으로 지정할 수도 있고, 링크로 지정할 수도 있다. query나 params를 같.. 기록/FRONTEND 2022. 5. 25.

• 

  [JS] Axios 1. Axios Promise 기반 HTTP라이브러리다. Promise Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise 2. 설치 npm, bower, yarn 등 여러 방식이 있다. https://axios-http... 기록/FRONTEND 2022. 5. 24.

• 

  [JS] Module 1. Module 프로그램을 기능별로 여러 개의 파일로 나누는 형태. 2. 내보내기 : export 1) 선언하면서 내보내기 export const title = '계산기 모듈'; export function add(i, j) { return i + j; } export function sub(i, j) { return i - j; } 2) 내보내기 위한 상수, 메서드 지정 const title = '계산기 모듈'; function add(i, j) { return i + j; } function sub(i, j) { return i - j; } //내보내기 위한 상수, 메서드 지정 export { title, add, sub }; 3) json 객체로 내보내기 key:value 형태임에 주의한다. ex.. 기록/FRONTEND 2022. 5. 20.

• 

  [Vue] Component 1. Component HTML elemet를 확장해 재사용 가능한 코드를 캡슐화한다. Vue Component는 Vue instance이기도 하기 때문에 모든 옵션 객체를 사용한다. (루트에만 사용하는 옵션 객체는 제외된다.) Life Cycle Hook도 사용가능하다. data 옵션은 반드시 함수여야 한다. 2. 컴포넌트 등록 컴포넌트 이름은 케밥 표기법을 권장한다. (ex. my-component) 전역 컴포넌트 Vue.component('컴포넌트-이름', { template:'사용자 정의 컴포넌트 입니다!' }) 지역 컴포넌트 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다. new Vue({ // ... componen.. 기록/FRONTEND 2022. 5. 19.

• 

  [Vue] Event DOM 이벤트를 듣기 위해 v-on directive를 사용한다. 이벤트가 트리거될 때 javascript를 실행한다. 1. method 이름 v-on에 이벤트 발생 시 처리해야하는 method의 이름을 받아서 처리한다. 클릭 2. inline javascript 메소드 이름을 직접 바인딩하는 대신 인라인 javascript 구문에 메소드를 사용할 수 있다. 클릭 3. $event 원본 DOM 이벤트에 엑세스해야하는 경우 특별한 $event 변수를 사용해 메소드에 전달한다. Greet greet: function (e, msg) { if (e) e.preventDefault(); alert('Hello ' + msg + '!'); } 4. 이벤트 수식어 $event로 DOM이벤트에 접근할 수 있지만, m.. 기록/FRONTEND 2022. 5. 18.

• 

  [Vue] Vue Instance 1. el Vue가 적용될 요소 지정. CSS Selector 또는 HTML Element를 사용한다. 2. data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태이지만, 함수 형태를 권장한다. 3. method 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다. 보간법으로 method를 부를 때 ()를 빠뜨리지 않아야 한다. 하지만 @click 등 이벤트 처리에 파라미터가 없는 method를 사용할 경우는 method 이름만 써도 가능하다. method 안에서 데이터를 접근할 때는 "this.데이터이름"으로 접근해야한다. 이 코드는 reversedMsg()를 호출해서 message를 뒤집은 값을 .. 기록/FRONTEND 2022. 5. 17.

• 

  [Vue] Directives 1. 디렉티브 - v-접두사가 있는 특수 속성이다. - 디렉티브 속성 값은 단일 Javascript 표현식이 된다.(v-for는 예외) - 디렉티브의 역할은 표현식의 값이 변경될 때 사이트 이펙트를 반응적으로 DOM에 적용하는 것이다. 2. 종류 v-text v-model v-show v-once v-bind v-if v-html v-for v-else-if v-cloak v-on v-else 1) v-text 데이터 바인딩의 가장 기본 형태인 {{속성명}} 이중 중괄호를 사용한 것과 동일하다. 이렇게 코드를 작성하면 속성값으로 렌더링된다. 2) v-once 데이터 변경 시 업데이트되지 않는 일회성 보간을 수행할 수 있다. {{속성명}} 3) v-html 속성값을 텍스트가 아닌 HTML로 데이터를 출력한.. 기록/FRONTEND 2022. 5. 16.