프로그래밍 공부하기

TypeScript는 좀 더 엄격한 JavaScript 코드를 만들기 위한 언어이다. 좀 더 엄격한 규칙을 가진 TypeScript 코드를 컴파일 하면 JavaScript 코드가 생성된다는 의미이다. 먼저 TypeScript를 작성하기위한 세팅을 진행해보자. 1. Install TypeScript npm install typescript --save-dev yarn add typescript --dev 먼저 npm 혹은 yarn으로 typescript를 설치한다. { "compilerOptions": { "module": "commonjs", "target": "ES2015", "sourceMap": true, "outDir": "dist" }, "include": [ "index.ts" ], "excl..

Redux란 데이터를 한 곳에서 관리할 수 있게 도와주는 JavaScript Library이다. 보통 React와 Redux를 함께 사용하지만 사실 Vanilla JavaScript에서도 Redux를 사용할 수 있다는 의미이다. 그렇다면 왜 Redux가 필요할까? Redux의 장점 과거 프로젝트 보편적으로 사용되던 개발 디자인 패턴 중 하나는 MVC 패턴이다. 프로젝트를 모델-뷰-컨트롤러로 나누어 UI영역과 데이터 처리영역을 분리하여 개발하였다. 그런데 모델과 뷰가 많아질 수록 데이터의 흐름이 뒤엉켜 예측하기 어려운 코드를 발생시키는 단점이 있다. 하나의 데이터를 여러 뷰가 공유하고 있는 경우, 뷰1에서 이벤트가 발생하였을 때 이를 뷰2, 뷰3...에 알려주어야하는 로직이 필요하다. 또한 모델1의 데이터..

이전에 만든 GraphQL 서버로의 요청은 ApolloClient를 통해 가능하다. apollo공식문서 와 강의를 참고하여 간단한 클라이언트를 구현해보자. 1. 세팅 npx create-react-app tour-client 먼저 React 프로젝트를 생성한다. npm install @apollo/client graphql @apollo/client와 graphql을 설치한다. 사실 몇 개월 전만 해도 apollo-boost를 사용했었는데 공식문서에 의하면 지원하지 않는 몇 가지 고급 기능이 있으므로 ApolloClient를 사용하라는 문구를 볼 수 있다. 또한 @apollo/react-hooks, react-apollo도 @apollo/client에 통합되었다고 한다. 2. Client 생성 impor..

기존 REST API를 GraphQL로 감싸는 방법은 다음과 같다. 이를 실습을 통해 직접 알아보자. 기존 REST API의 정보를 기반으로 스키마를 만든다. 기존 REST API에 정보를 요청하고 이를 반환하는 함수를 만든다. GraphQL의 리졸버에 2에서 만든 함수를 연결한다. 1. 스키마 작성 기존 API를 기반으로 스키마를 작성하여야한다. 나는 Tour API의 searchKeyword 에서 검색 부분을 GraphQL로 감싸보기로 하였다. searchKeyword의 응답메시지는 다음과 같다. Tour API의 응답 메시지는 위와 같다. 이 항목들을 모두 포함한 데이터가 GraphQL의 응답이 될 것이다. 원래라면 위 항목을 모두 스키마로 표현해야하지만 나의 경우 연습을 위한 것이므로 몇 가지 항..

나는 지금까지 JavaScript를 쓰면서 외부로 모듈을 내보낼 때 module.exports를 사용해왔다. 그런데 GraphQL 유튜브 영상 시청, React 실습을 수행하면서 다른 방식으로 모듈을 export하는 것을 알게되었다. 이를 계기로 이전에 써왔던 ES5 방식과 ES6 방식의 차이를 비교해보려고 한다. 1. ES5 1) module.exports ES5는 기본적으로 CommonJS module System을 사용한다. 따라서 ES5의 모듈 import/export 방식은 CommonJS의 방식과 동일하다. ES5에서 모듈을 export하는 첫 번째 방식은 module.exports에 export 하고 싶은 하나의 모듈을 참조시키는 것이다. import 시에는 require를 사용하여 모듈을 ..

최근 React를 실습하였는데 블로그에 따라 npm으로 설치하는 사람도 있고 npx로 설치하는 사람도 있었다. 두 명령어가 무엇이 다른지 알아보기 위해 검색하던 중 좋은 블로그 글을 발견하여 해당 내용을 실습하고 정리해본다. 1. JavaScript npm과 npx를 알아보기에 앞서 JavaScript에 대해 알아보자. JavaScript 엔진, JavaScript 런타임, Node.js는 다음과 같이 정의할 수 있다. JavaScript Engine : 자바스크립트 코드를 실행하는 프로그램/인터프리터 ex. V8 JavaScript Runtime : 자바스크립트 코드로 만든 프로그램을 실행할 수 있는 환경 ex. 크롬 브라우저(V8), Node.js(V8) -Chrome 런타임은 V8엔진과 DOM AP..

1. API 다운로드 링크에서 Poke API를 찾아 Poke API의 Repo로 이동한 후 자신의 깃 저장소로 Pork 한다. 깃 저장소를 내 로컬로 클론한 후 Visual Code로 연다. npm install package.json이 있는 위치에서 npm install로 필요한 Dependency를 설치한다. "scripts": { ... "start": "node --experimental-json-modules src/index.js", }, "type": "module" package.json에서 scripts의 start 항목을 위와 같이 변경하고 type 항목을 추가하고 값을 "module" 로 준다. 이를 지정하지 않으면 자동으로 CommonJS로 실행되어 ES6 문법(import 등)을..

1. 공용 GraphQL API GraphQL 데이터 Query 요청을 실습하기 위해 공용 GraphQL API를 사용해보자. 공용 GraphQL API는 github.com/APIs-guru/graphql-apis에서 찾아볼 수 있다. 나의 경우 포켓몬고 정보를 기반으로 만든 PokeAPI를 사용하였다. GraphQL은 Playground나 GraphiQL 같은 내장 UI를 제공하며 우측 Docs 혹은 Schema 탭에서 API 문서처럼 데이터 형식에 대한 설명을 자동으로 제공한다. 따라서 처음 보는 API일지라도 Docs 탭의 설명을 보며 원하는 데이터를 요청할 수 있다. 2. Query 기본 PokeAPI의 Docs 탭을 보고 위와 같이 그림으로 나타낼 수 있다. 먼저 root 노드인 query는 ..

웹에서 데이터를 요청하고 처리하는 가장 대표적인 방식은 REST이다. RESTful 아키텍처란 데이터 처리를 크게 GET, PUT, POST, DELETE로 나누고(Method) 사용자가 어떤 데이터(URL)에 어떤 처리(Method)를 원하는지 요청하여 서버가 이를 제공하는 방식이다. 사용자가 요청할 때마다 필요한 정보를 제공하므로 쿠키, 세션에 정보를 저장할 필요가 없다. 최근 데이터 처리량이 증가하면서 REST 방식을 대체할 수 있는 Graph QL이라는 방식이 대두되고 있다. 1. REST와 GraphQL 최근 컴퓨터 뿐만 아니라 모바일, 모든 사물에서 웹에 접근 가능해 지면서 서버에는 점점 많은 데이터 요청이 들어오게 되었다. 이 때 REST 방식의 경우 데이터 요청방식과 응답방식이 정해져 있기..

1. Callback 코드는 기본적으로 순차적으로 실행된다. 그런데웹 서버로 보낸 요청에 대한 응답을 처리하는 코드를 작성해야할 경우 서버로 부터 응답이 언제 올지 알 수 없어 코드를 작성할 때 어려움이 생긴다. 이러한 상황에서 사용할 수 있는 것이 콜백함수이다. 콜백함수란 어떤 함수의 인자로 전달되는 또다른 함수이다. 콜백함수를 사용하면 위와 종료 타이밍을 맞추기 어려운 함수가 실행 된 다음에 콜백 함수가 실행되도록 실행 순서를 조정할 수 있다. const getDataFromFile = function (filePath, callback) { fs.readFile(filePath, 'utf-8', (err, data) => { if (err) { callback(err, null); } else { ..