프로그래밍 공부하기

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..

1. MobX 데이터 처리속도가 빠르며, 쉽게 비동기를 처리할 수 있는 상태관리 도구이다. state를 관찰(Observable)하다가 변경이 되면 반응(Render)한다는 개념을 기반으로 동작하며, 자바 친화적인 표현법이 특징이다. 그러나 MobX의 데이터는 반응형으로 구성되어야 하기 때문에 프론트 엔드와 백엔드 간 데이터교환을 위해 Serialize-Deserialize 해야하는 단점이 있다. 데이터가 복잡한 구조일 수록 데이터 변환 작업에서 장애가 발생할 가능성이 커질 것이다. 또한 자체 엔진을 통해 데이터가 자동적으로 처리되므로 에러 발생 시 추적에 어려움이 있다. 2. FLUX FLUX란 데이터를 단방향으로 처리하자는 컨셉이다. FLUX에서 데이터는 항상 원본이 존재하고 원본을 하위 요소들에게 ..

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

Tour Sight Search 우리나라 관광지 검색 서비스 깃허브: 프론트 엔드, 백엔드 프론트엔드: React-Hook, Apollo, GraphQL, styled-component 백엔드: GraphQL, REST API 사용 API: 한국 관광공사 Tour API 3.0 기능: 키워드 검색 관광지 좋아요 표시 GraphQL을 이용하여 간단한? 우리나라 관광지 검색 서비스를 만들어보았다. 처음 시작은 정말 간단히 끝날 것이라 생각했지만 GraphQL이 지난 년도에 바뀐 부분이 좀 있어서 공식문서 외의 구체적인 자료를 찾기가 상당히 어려웠다. 또한 리액트에 아직 익숙하지 않아서 고생했던 부분도 있었다. 하지만 계속 노력하니 내가 원하는대로 결국 만들어졌다! 물론 나중에 보면 내부코드나 디테일한 부분들..

이전에 만든 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는 ..