Recent Posts
  • react-native + typescript - 1. 기본 설정

    사이드로 진행하는 프로젝트에서, react-native를 사용한 앱을 만드는 토이 프로젝트를 진행했습니다. 이번에도 역시 주저없이 react와 typescript를 이용하여 앱을 만들고자 했고, create-react-native-app을 이용해서 App base를 만들고자 했습니다. 추가적으로 create-react-native-app에는 expo라는 sdk를 내장하고 있습니다. expo는 react-native에 필요한 모듈들을 기본적으로 내장하고 있으며, 디버깅 또는 watch file들을 통해서 앱을 좀 더 쉽게 만들 수 있도록...


  • react + typescript + webpack4 - 1. 설정하기

    react + typescript + webpack4 - (1) 설정하기 최근에 react에 관련된 프로젝트는 typescript로 진행을 하고 있습니다. 최근에 webpack4에 대해서 알아볼겸, typescript와 react를 같이 사용하면서, mobx도 같이 연동하는 example을 미리 만들어서 대비해야 겠다는 생각에, project를 진행하게 되었습니다. 이번 내용은 react와 typescript를 webpack4를 이용하여 만드는 첫번째 내용으로, 설정하는 부분부터 다뤄보고자 합니다. 사용법...


  • react에 typescript 적용시 styled-components 이슈

    data에 대한 type 정의 및 다양한 잠재적 오류를 예방하기 위해 요새는 모든 react 프로젝트들을 typescript를 이용하여 개발하고 있습니다. 개발하는데에 있어서 input 과 output의 명확함. 명세가 필요없는 type 정의 및 type error 및 linting을 이용한 오류 예방적인 측면에서 typescript는 여러모로 도움이 되고 있습니다. 그러나, 몇가지 부분에서는 개발하는데 어려움을 겪습니다. 예를들면, 저는...


  • VS code jsconfig를 사용하여 webpack alias 자동완성(autocomplete) 적용하기

    VS code + jsconfig.json 많은 분들께서 js 또는 typescript 내에 import path 경로를 불러오실때, ../../ 형태로 중복해서 불러오는 것을 싫어하셔서, webpack 또는 babel 사용시에 module resolver를 많이 사용하실겁니다. webpack에는 resolve option에 alias 등을 사용하실 것이고, babel에서는 babel-plugin-module-resolver를 사용하셔서 module에 대한 alias를 설정하고, 모듈들을 import 하실것 같습니다. 그러나, 이러한 부분들은 프로젝트...


  • 디자이너와의 협업을 위한 React plugin: react-sketchapp 사용법 (2)

    react-sketchapp 사용법 이전 포스팅에서 react-sketchapp에 대한 간략한 소개를 드렸습니다. 이번에는 실제로 프로젝트를 만들고, 디자이너와 협업하기 위한 시작점으로 프로젝트를 생성하여 react-sketchapp을 설치하고, 간단한 test component를 만들어 plugin 형태로 sketch에 배포하는 것을 진행하겠습니다. 1. 프로젝트 생성 및 설치 1) skpm 설치 원래는 react-sketchapp에 있는 소스를 fork하여 만들 수도 있겠지만, 실제로 react-sketchapp 관련하여...