안녕하세요! 이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다! 먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다! Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다. 모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다 밑에 그림 처럼요 ! Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다. 이럴 때 용량 문제가 큰 이슈 사항인데요. 합쳤을 때 용량이 너무 크면 문제가 되겠죠? 지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다. (사실상 한국은 별 문제 없는..
| React Soket IO socket.io란 websocket기반으로 client와 server간 양방향 통신을 가능하게 해주는 모듈입니다. 기본적인 socket의 연결, 해제기능들을 자바스크립트로 가능하게 만든 모듈이라 생각하시면 편할 것 같습니다. 기본적인 socket의 실행흐름에 대해 알고 사용하는 것이 더 의미가 있을 것 같습니다. Soket IO 특징 단점 - 한 번 연결해 놓으면 전역적인 특징을 갖고 있기 때문에 리액트에서 하나의 components에 연결을 했다가 다른 compoentns에 연결을 하면 연결이 끊어져버린다. 해결 - 위와 같은 이슈를 해결하기 위해서 하나의 components 즉, common compoennts에 기능 구현을 하면 된다. ( 예전에는 HOC(High o..
리액트와 next를 사용하여 SSR 적용 중 className 오류가 났다. 원인은 nextjs 사용시 css 마찬가지로 SSR 렌더링도 먹여줘야 하는것이었다. "styled components는 따로 SSR 세팅(_document.js)을 안 하면 서버사이드 렌더링이 안 되므로 동적으로 스타일 태그를 생성하기 때문입니다. 기본적으로 next의 pages는 서버사이드 렌더링이 된다. getServerSideProps는 추가적으로 데이터까지 가져오는 것이고, ssr을 제외한 상황에서는 모두 styled-components가 동작한다" 그럼 SSR을 적용해 보자! 주의할 점은 getInitialProps는 주로 사용 안 하고 Document에서만 사용한다는 점 꼭 이억하자. _document.js 기본 형태..
기본적인 라우터의 동작 방식 라우터에는 가 보통 많이 사용되며 와 를 통해서 라우팅을 구현하는 방식이다. 예를 들어, 홈페이지, 영화페이지, 리뷰페이지가 있다고 하자. 각각의 URL을 / , /movies , /reviews 라고 했을 때, 다음과 같이 구현할 수 있다. import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; const Routes = () => { return ( ); }; 3가지 컴포넌트가 있다는 가정하에, 위와 같이 path 속성을 통해서 각각의 컴포넌트가 렌더링 되는 URL이 정해진다. 그러나 여기서의 문제점은, 홈페이지에 들어갔을 때 /movies 와 /reviews ..
| Generator 란 ? 제너레이터의 핵심은 동시성 프로그래밍입니다. ( 동시성이란? 동시에 여러가지 일을 처리하는 것처럼 행동하는 것입니다. 병행과 병렬을 혼동하면 안됩니다. 병렬은 실제로 동시에 여러가지 일을 처리하는 것입니다. ) 동시성의 예로, javascript 는 싱글 스레드 입니다.( 이말은 ? 한 번에 한 가지 일 밖에 못 한다는 뜻 ) 하지만 실제로 javascript는 한 번에 여러 가지 일을 처리하는 것을 우리는 알고 있습니다. ex) ajax 요청을 한다고 해서 "응답이 올 때까지 시스템은 멈추지 않는다." 결론은 javascript 는 싱글 스레드이지만, event 루프를 통해 동시성 을 지원하고 있습니다. 제너레이터는 이터레이터에 의존하는 개념으로, 이터레이터를 사용해 자신의..
reselect를 알기 전, Selector를 먼저 알아야합니다. | Selector란 ? state 에서 필요한 데이터를 가져오거나, 계산을 수행해서 원하는 형태의 데이터를 가져오는 역할을 말합니다. 왜 사용할까? selector는 Redux가 적은 양의 필요한 데이터만을 갖고 있게 data들의 연산을 도우며, state를 가져오는 컴포넌트들과 state의 구조 사이에 1개의 층(selector)를 두어 구조가 바뀌어도 연관된 모든 컴포넌트를 바꿀 필요 없이 selector 만 바꿔주면 성능이 향상되기 때문에 사용합니다. | reselect 란? selector 역할을 수행하면서 캐싱을 통해 동일한 계산을 방지해 성능을 향상시켜줍니다. 연산을 효율적으로 처리할 수 있게 도와주는 역할을 합니다. 즉, 새..
| react-redux Provider react-redux 는 root-container 에서 Provider 를 사용하여 store 값을 할당해주면 됩니다. Provider components 에서는 리액트에서 action 이 처리 됐을 때, 이벤트를 받아서 하위에 있는 다른 컴포넌트가 다시 렌더링 될 수 있도록 도와주는 역할을 합니다. 활용 예시 import { Provider } from 'react-redux'; //store를 가져옵니다 //여기서 첫 번째 인자인 reducer는 combineReducers()등을 구현한 1개 이상의 리듀서들을 뜻합니다. store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION___?.()); export..
| Redux-saga란? redux-saga 는 리액트/리덕스 애플리케이션의 부수효과(Side-Effect) 라고 합니다. 특정 액션들이 스토어에 보내질 때, 여러 작업들을 함께 실행하기 위한 내부적인 함수를 감싸는 몇몇 helper effect 를 제공하며, function* 문법을 사용합니다. eX) fetching 이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을 더 쉽고 좋게 만드는 것을 목접으로 하는 라이브러리입니다. Ajax 콜 비동기 타이머 애니메이션 후 콜백 요청 중 취소 스로틀링 디바운싱 페이지 이동 구성 Saga 는 액션을 구독하는 Watcher 와 실제 작업을 수행하는 Worker 의 구성을 따릅니다. Watcher watcher 함수 Worker exmapleWorker..