준비 환경 VSCode prettier plugin 설치 eslint plugin 설치 eslint-config-airbnb 설치 $ yarn add eslint-config-airbnb yarn add v1.22.4 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning " > @testing-library/user-event@12.2.0" has unmet peer dependency "@testing-library/dom@>=7.21.4". ...중략... info All dependencies ├─ eslint-config-airbnb-base@14.2.0 └─ eslint-c..

NodeJS 설치 https://nodejs.org/ko/ 에서 node.js를 설치한다. 2020/06 기준 최신버전은 14.4, Stable 버전은 12.18이다. 본 글에서는 12.18버전으로 설치한다. 터미널에서 npm -version을 입력해보자 # npm -version 6.14.4 위와 같이 나오면 설치 완료 참고 yarn 설치 yarn은 npm과 같이 패키지 매니저 프로그램으로 개발자 취향에 맞게 nbm을 쓰거나 yarn을 쓴다. 설치는 자유 (npm을 사용해도 됨) 본 글에서는 homebrew를 이용해서 yarn을 설치한다. # brew install yarn 리액트(React) 프로젝트 생성 npm 또는 yarn을 이용하여 react 프로젝트를 생성한다. 아래 명령어는 npm 또는 ya..

서론 자바 스크립트 자바스크립트는 한때 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 보여주기 위한 용도로 씀. 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 함. 더 나아가 서버 사이드, 모바일, 데스크 톱 애플리케이션에서도 사용함. 자바스크립트 기반 프레임워크 자바스크립트만으로 대규모 프로젝트를 진행할 수 있게 됨. 하지만, 순수 자바스크립트로는 어려움이 있음. 대규모 프로젝트를 어떻게 관리할까? AngularJS, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js ... 위 프레임워크들은 아래와 같은 방법으로 구조화를 함 MVC: Model View Controller MVVM: Model Vie..

SPA SPA는 Single Page Application의 약자로, 한국말로 단일 페이지 애플리케이션이라고 할 수 있다. SPA는 서버로부터 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성하는 Application을 말한다. 전체 페이지를 렌더링 하지 않고, 바뀐 부분만 렌더링 하기 때문에 (전체 렌더링보다) 효율적이라고 할 수 있다. 또한 새로고침하지 않기 때문에 사용자에게 좀 더 데스크톱 애플리케이션을 사용하는 기분이 들게 해 준다. SPA는 초기에 정적 리소스를 한 번에 가져오기 때문에 초기 로딩 속도는 더 느릴 수 있다. 하지만, SPA 기반의 서비스는 대체적으로 웹 페이지보단 애플리케이션 서비스에 가깝기 때문에 큰 단점이라고 할 순 없다. SPA 만들기 SPA 서비스를 만들려면 어떻..