Story book 시작하기
스토리북을 사용함으로써 비즈니스 로직과 context로부터 분리된 UI 컴포넌트를 만들고 테스트 할 수 있다. 1. Install 먼저 개발 중인 react project에서 story book을 설치한다. npx @storybook/cli sb init (꽤 오래 걸림) 설치 완료 후 package.json에 추가된 두 가지 스크립트를 확인 후 "scripts": { // 생략 "storybook": "start-storybook -p 6006 -s public", "build-storybook": "build-storybook -s public" }, 아래 명령어로 실행. npm run storybook 2. Simple component mui button을 wrapping한 간단한 button c..
CSR, SSR
CSR(Client Side Rendering) React와 같은 SPA(Single Page Application)에 사용되는 방식으로, HTML은 응답으로 받은 후에 JavaScript를 구동하는 Web Browser에 의해 client side에서 화면이 구성되는 것이다. HTML을 download -> JavaScript download -> JavaScript execute -> Fetch data -> done 장점 Server의 부담을 줄일 수 있다. (page 전체가 아닌 필요한 부분에 대해서만 요청이 이루어지기 때문) 부분적으로 페이지를 수정하기 때문에 초기 로딩 후에는 user interaction이 좋다. 단점 맨 처음 page를 완전히 보여주는데 (SSR에 비해)시간이 오래 걸린다...
REST API와 같이 request/response의 방식이다. REST API방식은 요청 URI에 따라 미리 지정된 정보가 제공되는 반면에 GraphQL은 사용자의 디테일한 요청에 따라 매칭되는 정보만을 전달하는 방식이다. 예를 들어 REST API는 학생에 대한 정보를 요청하면 이름, 학번, 학년, 반 등 미리 지정된 학생의 정보에 해당하는 것들을 모두 넘겨주지만 GraphQL은 학생의 이름, 학번만을 요청하고 받는 식인 것이다. 필요한 정보만을 요청하기 때문에 네트워크를 통해 전송되는 데이터의 양을 줄일 수 있고, 여러번 request를 보낼 필요가 없다(반과 그 반의 학생 정보를 얻고 싶을 때 REST API의 경우에는 get /class/3, get /class/3/students 두 개의 a..
SAP(Single Page Application) 이전에는 page의 작은 부분만 변경되더라도 server에서 css, html, js를 다시 만들어 받아와서 통째로 로드를 해야했다. 이는 굉장히 비효율 적이었다(page의 용량이 크다면 더욱). Ajax기술이 나온 뒤로는 js를 통해 page의 특정부분을 변경하는 것이 가능해졌지만 일일히 코딩해야하는 불편함이 역시 남아 있었다. 또한 이런 방식의 동작은 server로부터 data만 요청해서 (자체적인 system으로)화면을 rendering하는 ios, android와 다르기 때문에 인력이 배로 들게 된다. Web app도 마찬가지로 server에서 data만 받아도 browser에서 page를 rendering할 수 있다면 서버 개발자는 platfo..
Babel &b Webpack
ES6+의 최신 사양의 표준으로 작성된 코드는 모든 브라우저에서 동작함을 보장할 수 없다. IE를 포함한 구형 브라우저에서는 ES6+를 따르는 web engine이 탑재되어 있지 않을 수 있기 때문이다. 이를 해결하기 위한 개발환경 구축이 필요한데, 이를 위한 것이 트랜스파일러(Transpiler) Babel과 모듈 번들러(Module bundler) Webpack이다. 1. Babel이란? // ES6 화살표 함수와 ES7 지수 연산자 [1, 2, 3].map(n => n ** n); // ES5 "use strict"; [1, 2, 3].map(function (n) { return Math.pow(n, n); }); 이처럼 Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작..