Recent Posts
  • 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 관련하여...


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

    React 디자인 협업 도구 - react-sketchapp 제가 React로 작업을 할때 고민이었던 부분은 ‘디자이너와의 협업’ 이었습니다. 물론, 능력이 좋으신 분들은 디자이너분께서 sketch에 만들어 놓으신 prototype을 그대로 뚝딱 만드시는 분들이 계시겠지만, 실제로 프로젝트를 진행하면서 프론트엔드 개발자와 디자이너 분들간의 스타일링에 관련되서는 언제나 이슈가 있더군요. React의 경우에는 이러한 부분들이 더 크게 와닿았던 것 같습니다....


  • CI(Continous Integration) 환경을 위한 npm ci command

    npm ci 5.7.0 부터 npm ci 커맨드를 사용할 수 있게 되었습니다. 보통, ci라 함은 Contiuouse Integration (지속적인 통합) 의 개념 으로써, 오픈소스 개발시에 많은 분들이 travis ci를 사용하시는 것을 볼 수 있습니다. (Jenkins와 유사하다고 볼 수 있겠네요) 아직 많은 기능은 탑재하지 못하더라도, npm ci를 통해서 협업이 많은 개발자들이 개발환경을 (pakcage에...