JavaScript
-
[Vue] Vue Apollo FragmentsJavaScript/Vue 2021. 2. 11. 13:56
query에 사용될 필드들을 재사용 할 수 있도록 해줌 // user-info.fragment.gql fragment UserInfo on User { firstName lastName age gender } // get-user.query.gql #import './user-info.fragmet.gql' query getUser($userId: Int!) { getUser(userId: $userId) { ...UserInfo friends { ...UserInfo } } }
-
[Typescript] tsconifg 옵션JavaScript/TypeScript 2021. 2. 7. 14:20
타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일 tsc 명령어를 사용하면 현재 폴더부터 상위 폴더로 순차적으로 tsconfig.json 파일을 탐색 타입스크립트 설정 파일 속성 files 컴파일할 파일들을 지정하는 옵션 { "files": ["app.ts", "./practice/test.ts"] } include files와 달리 컴파일할 파일을 지정하는 것이 아닌 디렉토리를 지정 타입스크립트는 기본적으로 node_modules를 제외하지만 써드 파티 라이브러리의 타입을 정의해놓는 @types 디렉토리는 컴파일에 포함함 와일드 카드 패턴 * : 해당 디렉토리의 모든 파일을 검색 **: 하위 디렉토리를 재귀적으로 접근 ? : 해당 디렉토리안에 파일의 이름 중 키워드를 포함하는 파일 검색 ..
-
[Vue] Vue Apollo fetch policyJavaScript/Vue 2021. 2. 6. 14:32
Data를 가져오는 주체와 cache에 저장 여부를 설정하는 옵션 chche-first fetch-policy 옵션의 default 기본적으로 cache data를 가져옴 cache data가 없을 경우에 network에서 데이터를 받아오고 cache에 저장 cache-and-network 기본적으로 cache data 가 있을경우 가져옴 그 후에 network로 부터 data를 받아오고 cache에 저장 cache-only cache data를 가져옴 cache data가 없을 경우에는 fail network-only nework에서 data를 가져옴 그후에 cache에 저장 no-cache nework에서 data를 가져옴 network 호출에 실패해도 cache에 저장하지 않음
-
[Vue] Vuex란?JavaScript/Vue 2021. 1. 30. 14:57
Vue의 상태 관리 패턴 + 라이브러리 Vuex 사용 이유 MVC 패턴에서 발생하는 구조적 문제 해결 가능 컴포넌트 간 데이터 전달 문제 해결 가능 여러 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제 해결 가능 Vuex 구조 State 컴포넌트 간에 공유하는 데이터 View 데이터를 출력하는 뷰 Action 사용자의 입력에 따라 데이터를 변경하는 메소드 단방향 데이터 흐름 View에서 이벤트가 발생했을 때 Action이 실행됨 Action을 통해 State가 변경됨
-
[NodeJS] 콘솔 입력 받는 방법JavaScript/NodeJS 2021. 1. 16. 17:25
readline module 사용 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); let input = []; rl.on('line', function (line) { input = line.split(' '); }) .on('close', function () { console.log(input); process.exit(); });
-
[JS] 접근자 프로퍼티(Accessor Property)JavaScript 2020. 12. 24. 12:54
접근자 프로퍼티(Accessor Property) 객체가 가진 프로퍼티 값을 외부에서 직접 접근안하고 사용할 수 있게해주는 메소드 getter class User { private firstName: "Gildong"; private lastName: "Hong"; get fullName() { return `${this.firstName} ${this.lastName}` } } const user = new User(); console.log(user.fullName); // Gildong Hong setter class User { private firstName: "Gildong"; private lastName: "Hong"; set fullName(fullName) { [this.firstNam..