TypeScript
-
[2020.03.14] Express + GraphQL API 기본적인 Apollo서버 구현 (with TypeScript)개발 블로깅/TypeScript 2020. 3. 14. 01:58
이번에 서브 프로젝트를 진행하기 위해, 백엔드를 Express 서버에 GraphQL을 사용하기로 했다. 트레바리에서는 GraphQL을 사용하기 때문에 평소에 많이 접하기는 하지만, 내가 직접 환경을 구성하지 않아 환경 구성을 어떤식으로 하는지는 몰랐는데, 이번 기회에 내가 직접 GraphQL을 사용하는 Express 서버를 구축해 볼 수 있는 좋은 기회였다. TypeScript를 이용한 Express와 GraphQL의 서버 환경을 구축하는 쉬운 튜토리얼을 찾아보려 했지만 그러한 글을 찾아보기가 힘들었던 것 같다. 그래서 이번에 내가 직접 서버를 구현해 보면서 진행한 과정을 이해하기 쉽도록 정리해보려고 한다. TypeScript를 사용하기 위한 기본적인 구성 프로젝트 세팅 우선 프로젝트로 사용할 폴더를 ..
-
[2019.09.03] 오늘의 TIL - Type '{fontWeight}' is not assignable to type 'CSSProperties' 해결 방법개발 블로깅/오늘의 TIL 2019. 9. 3. 22:12
기본적으로 React 안에서, Tag 또는 Component에 Style을 적용하는 방법이 여러가지가 있다. 아래는 Style 적용 방법 중 하나이다. # 글씨를 굵게 하는 style // 첫 번째 방법 return ( Hello inyong~ ); // 두 번째 방법 const fontStyle = {fontWeight: 'bold'}; return ( Hello inyong~ ); 위 코드에 적힌 두 방법은 TypeScript를 사용할 때에도 거의 무방하다. 그러나 두 번째 방법에서는, TypeScript에서는 적용되지 않는 Style property가 있다. 바로 위 코드의 'font-weight' property가 그 중 하나이다. 즉, TypeScript에선 두 번째 방법은 에러메세지가 발생한다..
-
[2019.08.27] 오늘의 TIL - Next.js + TypeScript + Mobx 사용시 주의사항 [Provider, inject]개발 블로깅/Next.js 2019. 8. 27. 23:51
오늘 Next.js + TypeScript로 작업한 내용에 Mobx를 적용시켜서 새롭게 리펙토링을 하는 작업을 했다. Mobx를 적용하면서 부딪혔던 이슈 사항들을 정리해보려고 한다. # [Next.js + Mobx] 다른 pages로 렌더링 할 때 Next.js에서 최상위 컴포넌트는 pages디렉토리의 _app.js이므로, 해당 파일에 Provider를 적용시킨다. import App, { Container } from "next/app"; import React from "react"; import { Provider } from "mobx-react"; import RootStore from "../stores"; interface State { Store: RootStore; } export def..
-
[2019.08.26] Next.js + Mobx + TypeScript 사용 예시개발 블로깅/Next.js 2019. 8. 26. 19:24
기존에 있던 Next.js + typescript 프로젝트에서 Mobx를 적용시켜 리펙토링을 해야했다. next.js에 mobx를 올리려 하니까, 새롭게 알게된 소소한 부분이 있어서 블로깅으로 남기려고 한다. # Next.js에서 mobx의 Provider 적용 기존의 React에서 Provider를 적용하려면, 최상한 index.js에서 태그를 이용하여 를 감싸는 방식으로 사용했다. 그러나 next.js에서는 최상단이 Pages폴더가 되는데, 여러개의 페이지가 있어서 어디에 적용해야 될지 모를 수가 있다. 그러나 사실 Pages 폴더 내 파일 중 제일 최상위 파일인 _app.tsx(js)가 따로 있다. _app.tsx 파일을 아래와 같이 생성한다. pages/_app.tsx import App, { C..
-
[2019.07.13] React에 TypeScript를 적용하면 constructor를 쓰지 않는다?개발 블로깅/TypeScript 2019. 7. 13. 19:34
클래스형 컴포넌트 안에서 state를 사용할 때, 일반적으로 아래와 같은 코드로 구현한다. # React 클래스 컴포넌트에서 일반적인 state 선언 방식 class component extends React.Component { constructor(props){ super(props); this.state = { name: '', age: 0 } } render()( hello Typescript ) } 여기서 타입스크립트를 적용시키면 변경되는 부분이 몇 군데 있다. # React에 TypeScript를 적용시킬 시, 일반적인 클래스 컴포넌트 사용 방식 interface State{ name:string; age:number; } class component extends React.Component..
-
[2019.07.11] React + TypeScript에 TSLint 적용시키기개발 블로깅/TypeScript 2019. 7. 11. 12:22
# React + Typescript + Webpack 환경 세팅하기 [2019.07.11] React + TypeScript + Webpack 환경 설정 React의 보일러 플레이트 CRA를 사용한 것이 아닌, 직접 웹펙 세팅에 TypeScript를 적용한 환경설정을 해보자. # 프로젝트 디렉토리 생성 $ mkdir React_TypeScript $ cd React_TypeScript 프로젝트로 사용할 디.. helloinyong.tistory.com 이번에는 TSLint를 적용시켜, Typescript의 코드 스타일을 맞춰보도록 하자. # VSCode TSlint Plugin 설치 vscode plugin에 들어가 TSLint를 설치한다. # TSlint 설치 TSlint 모듈을 설치한다. $ npm..
-
[2019.07.11] React + TypeScript + Webpack 환경 설정개발 블로깅/React 개념 2019. 7. 11. 09:48
React의 보일러 플레이트 CRA를 사용한 것이 아닌, 직접 웹팩 세팅에 TypeScript를 적용한 환경설정을 해보자. # 프로젝트 디렉토리 생성 $ mkdir React_TypeScript $ cd React_TypeScript 프로젝트로 사용할 디렉토리를 생성하고 해당 디렉토리로 이동한다. # packge.json 생성 $ npm init -y 해당 프로젝트의 디렉토리에 사용할 packge.json을 생성한다. # webpack 세팅 $ npm i -D webpack webpack-cli 프로젝트에 사용할 webpack을 개발용 패키지로 설치한다. $ touch webpack.config.js 이후에 webpack 실행에 관한 설정을 하는 webpack.config.js 파일을 root 경로에 생..
-
[2019.06.07] 오늘의 TIL - typeScript 빌드 후, js파일이 여전히 .ts파일을 참조하는 문제개발 블로깅/오늘의 TIL 2019. 6. 7. 19:58
어느정도 API를 구현하고 드디어 AWS에 올리려고 ts파일을 빌드를 해봤다. 다행히도 빌드는 이상없이 잘 됐다. 그러나 빌드 후, js파일을 돌리니...js파일의 모든 import 경로가 ts파일 경로를 가리키고 있는 것이다... import 경로를 '../'와 같이 상대경로로 지정하는 방식으로 한 문제 말고는 도저히 ts파일을 가리킬 이유가 없었다. js파일코드를 확인해 봐도 이상이 없고...고치고 싶어도, 빌드과정으로 생긴 코드여서 너무 복잡하고 알아볼 수가 없었다..ㅜ.ㅜ 엔지니어 분께 도움을 요청하니, 아마도 빌드 후에도 코드 내의 상간관계가 풀리지 않아서 그런것 같다고 하셨다. 해결방법 node를 루트에서 실행시키지 말고, 빌드된 디렉토리로 가서 직접 실행 시키는 방법 __dirname 등의 ..