React + TypeScript + Babel + ESLint & Prettier With Webpack 세팅 (CRA X) CRA(Create-React-App)을 사용하여 쉽게 개발을 진행하였지만 생각보다 사용하지 않고 알지도 못하는 library 등이 너무 많아 Boilerplate로 만들게 되었습니다. Github Repository https://github.com/GeonWooPaeng/React-TypeScript-Boilerplate What is inside? Webpack Babel React TypeScript ESLint & Prettier 📍 React & TypeScript 설정 1. package.json 생성 npm init -y 2. React 설치 node-modules..
TypeScript에서 Type을 어떻게 쉽게 파악할까? TypeScript를 통해 프로젝트를 진행했었지만 단순히 VSCode에서 TypeScript의 type을 알려주는 기능을 통해 끼워 맞추고 있었습니다. 그래서 다른 분들의 코드를 이해하기에도 어려움이 따랐고 추 후 큰 프로젝트를 파악하기 위해서는 자세히 공부를 할 필요가 있다고 생각하게 되었습니다. TypeScript를 다시 공부하면서 기본적인 TypeScript의 문법보다는 TypeScript를 다시 재정비하면서 TypeScript의 이 부분을 알게 되어 저한테 매우 도움이 되었다 및 개인 노하우? 를 토대로 작성 해보려고 합니다. 너무 깊게 들어가지 않으니 더 찾아보면 좋습니다. :) (개인마다 차이가 있으니 재미로 읽어주시고 좋은 방법이 있으..
어떻게 Model과 api(데이터)를 효과적으로 연결할까? (MVVM 패턴) 기술 과제(React + TypeScript)에서 MVVM 패턴을 적용해야했습니다. MVVM 패턴을 처음 적용하다 보니 크게 감이 잡히지 않아 여러 문서를 보고 따라하는 식으로 처음 진행을 했는데 MVVM패턴을 적용해 나갔습니다. 그러나 Directory구조 잡기, 데이터 분리, Model과 데이터를 연결등 많은 문제들 중 Model과 데이터를 어떻게 효과적으로 연결하지? 라는 부분을 나누려고 합니다. 우선 내용에 들어가기 앞서 MVVM패턴에 대해 간략하게 알아보도록 합시다. 👣 설명 MVVM(Model - View - ViewModel) 패턴 View: 사용자가 화면에서 보는 것들에 대한 구조, 배치, 그리고 외관 ViewMo..