본문 바로가기

programming study

 (889)
타입스크립트 입문 - 인터페이스 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 인터페이스란 상호 간에 정의한 약속 또는 규칙 변수가 어떤 타입으로 이루어져 있는지 명시적으로 알 수 있음 함수에게 필요한 파라미터가 어떤 타입을 가졌는지, 어떤 타입을 가진 값을 반환하는 지 알 수 있음 코드의 의도를 파악하기 용이 예시 // User 인터페이스는 age를 숫자로, name을 문자로 가지는 객체임을 약속 interface User { age: number; name: string; } var siru: User = { age: 6, name: '시루', } 2. 함수에 인터페이스 적용하기 함수의 인자를 정의하기 함수의 인자에 인터페이스를 적용할 수 있음 인자의 인터페이스와 ..
NPM 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. Npm 명령어 라이브러리 지역 설치 npm install [라이브러리명] node_modules 디렉토리 아래에 설치 라이브러리와 관련된 라이브러리(의존적인)를 자동 설치 --save-prod 옵션과 같음(기본값) 라이브러리 삭제 npm uninstall [라이브러리명] 라이브러리와 해당 라이브러리와 관련된 의존적인 라이브러리들을 삭제 라이브러리 전역 설치 npm install [라이브러리명] --global 라이브러리를 전역 설치 node_modules가 아닌 시스템에 설치가 된다. mac 기준 경로: /usr/local/lib/node_modules window 기준 경로: %USERPROFILE..
Node.js와 NPM 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. Node.js와 NPM 소개 Node.js 브라우저 밖에서도 JavaScript를 실행할 수 있는 환경 NPM Node Package Manager JavaScript 프로그래밍 언어를 위한 패키지 관리자 라이브러리 관리 도구 모든 라이브러리를 관리하고 있음 2. NPM 시작하기 package.json 초기화 npm init 패키지 이름, 버전 등을 입력하여 package.json 생성 -y: 기본값으로 package.json을 바로 생성하는 옵션 패키지 설치 npm install [패키지명] node_modules 디렉토리 아래에 패키지가 설치(지역 설치) --save-prod옵션과 같은 효과 pa..
타입스크립트 입문 - 함수 타입 정의하기 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 파라미터, 반환값 함수의 파라미터에 타입을 정의 // 이 함수는 두 개의 숫자를 받음 function sum(a: number, b: number) { return a + b; } sum(10, 20); sum(10, '20'); // 에러 발생 함수의 반환 값에 타입을 정의 // 이 함수는 숫자를 리턴 function isNumber(): number { return 10; } isNumber(); // 10 두 방식을 함께 사용 함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용 할 것 function sum(a: number, b: number): number { return ..
타입스크립트 입문 - 변수와 그외 타입 정의하기 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 기본 타입 - 문자열, 숫자, 배열 TypeScript는 JavaScript와 달리 변수 선언 시점에서 타입을 지정해야한다. :을 이용하여 타입을 정의 Type Annotation 문자열 let str = 'hello'; 숫자 let num: number = 10; 배열 타입 선언에 맞지 않는 자료형을 배열안에 넣으면 IDE에서 에러가 발생한다. // 숫자로만 이뤄진 배열(제네릭) let arr: Array = [1, 2, 3]; // 문자열로만 이뤄진 배열(제네릭) let heroes: Array = ['Capt', 'Thor', 'Hulk']; // 배열 리터럴 let items: num..
타입스크립트 입문 - 타입스크립트 시작하기 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 타입스크립트 프로젝트 시작하기 타입스크립트 설치 npm i typescript -g -g: npm 전역 설치 옵션 시스템 레벨에서 사용하기 위해서 설치할 때 사용 mac의 경우 /usr/local/lib/node_modules에 설치 컴파일 하기 .ts 확장자로 이루어진 파일을 .js 확장자 파일로 컴파일 Webpack과 같은 모듈 번들러로 컴파일 할 수 있다. tsc index.ts 2. 타입스크립트 설정 파일 컴파일 할 때 별도의 옵션을 설정할 수 있다. tsconfig.json에 설정 객체의 형식으로 key, value 지정 compilerOptions: 컴파일 시의 부가적인 옵션 al..
타입스크립트 입문 - 타입스크립트 소개와 배경 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 타입스크립트란? JavaScript에 Type을 사용 가능 JavaScript의 Superset JavaScript의 확장된 언어 브라우저에서 실행하기 위해 파일을 한 번 변환 컴파일 과정을 거침 2. 타입스크립트의 장점 에러의 사전 방지 JavaScript는 런타임에서 타입을 정하는 동적 타입 언어이다. 타입 에러의 위험이 크다. 암묵적 타입 변환으로 인해 의도하지 않은 동작을 일으킬 수 있다. 코드 가이드 및 자동완성 VSC는 툴 내부가 타입스크립트로 작성되어 있어서 개발에 최적화 자바스크립트의 각 API를 자동완성 시켜준다. 선언한 type의 값이 다른 변수에 할당되어도 해당하는 타입의..
GraphQL 클라이언트 만들어보기 본 내용은 인프런 얄팍한코딩님의 얄팍한 GraphQL과 Apollo 강의를 토대로 작성하였습니다. 1. React와 Apollo Client React와 GraphQL 서버와의 연결 방법 아폴로 클라이언트 적용 npm install @apollo/client graphql ApolloClient 객체 만들기 client: GraphQL 서버로와 정보를 주고받을 ApolloClient 객체 uri: GraphQL 서버의 주소 cache: InMemoryCache를 통한 캐시 관리 const client = new ApolloClient({ uri: 'http://localhost:4000', cache: new InMemoryCache() }); React에 적용하기 root에서 ApolloProvider..

티스토리툴바