CodingCredit

오늘의 주제는 SPA를 다루다보면 듣게되는 SSR과 CSR이다!! 😎 SSR (Server Side Rendering) 서버측 렌더링. 일반적으로 백엔드 측에서 템플릿 엔진을 사용하여 뷰를 보여주며 JSP, Django의 template engine, NodeJS의 pug,ejs 등이 있다. SSR은 맨 처음 웹페이지를 로드할 때 빠른 속도를 보여준다. 이유는 한번의 요청, 그리고 한번의 응답으로 페이지를 생성하기 때문이다. 덕분에 일정한 퍼포먼스를 보여주고, 전부 계산된 HTML을 보여주므로 HTML의 SEO (Search Engine Optimization, 검색엔진최적화) 옵션들이 전부 살아 있다. 그러나 이때문에, SSR은 페이지의 작은 부분중 하나만을 업데이트 할 일이 생기더라도, 페이지 전체를..

React를 공부하다보면 매우매우 자주 듣게되는 용어들이 있다. 컴포넌트, 단방향데이터, CSR, Virtual DOM . . . 하나하나의 개념을 이해하려고 노력하며 공부하고있다. 오늘은 Virtual DOM에 대해서 공부해봤다.😆 Why Virtual DOM? 누군가 왜 Virtual DOM을 쓰는지 물어본다면 뭐라고 답할까? DOM 조작이 비효율적이고 느리기 때문에?? 자사크립트 엔진은 계속해서 성능이 좋아지는데, 정확히 어떤 부분때문에 DOM이 느려지는 걸까? 정확히는, DOM조작이 전체 동작을 비효율적으로 만드는게 아니라, 그 이후에 일어나는 일 때문에, 작업이 느려지는 것이다. 이를 이해하기 위해서는 브라우저의 워크플로우에 대해 알 필요가 있다.🏃🏻‍♂️ 브라우저의 Workflow DOM Tr..

TypeScript처럼 타입을 확인할 수 있는 기능이 React 내장되어 있는데, 바로 prop-types이다. import PropTypes from 'prop-types' 클래스 컴포넌트, 함수 컴포넌트 상관없이 사용할 수 있다. Test라는 함수의 props 들의 type을 확인해 보자. 아래는 name prop이 string인지 확인하는 예시이다. Test.propTypes = { // 소문자 p prop: PropTypes.string, // 대문자 P } 배열 또는 객체가 한가지 타입으로 구성되어있는지 확인 => arrayOf, objectOf prop1: PropTypes.arrayOf(PropTypes.number) 객체의 각 property value들의 타입을 하나하나 확..

Redux의 state와 React의 component를 연걸하는 방법에는 다음 두가지 방법이 있다. connect parameter를 통해 mapStateToProps, mapDispatchToProps와 같은 메소드를 이용하는 방법 Redux hooks의 useSelector(), useDispatch() 메소드를 이용하는 방법 이 중, Redux hooks가 좀더 최근에 나온 방법이고 직관적인 방법이다. useSelector() useSelector()는 컴포넌트와 state를 연결하는 역할을 한다. 컴포넌트에서 useSelector메소드를 통해 store의 state에 접근할 수 있다. const { postList } = useSelector(store => store.post.postList)..

redux는 강력한 상태관리 라이브러리다. React와 함께 자주쓰이기지만, React에 종속된 라이브러리는 아니며, Augular, jQuery, vanilla JavaScript 등과 함께 다양하게 쓰일 수 있다. Flux 구조 Flux는 Facebook에서 만든 client-side web applications을 구축할 때 사용하는 application architecture(앱 구조), design pattern(디자인 패턴)이다. MVC (Model–View–Controlle)구조 의 단점을 보완할 목적으로 개발된 Flux는 대규모 프로젝트에서 너무 복잡해지는 MVC구조의 단점을 보완하는 단방향 데이터 흐름(unidirectional data flow)의 구조이다. 리덕스는 Flux의 구현체라..

🚨오늘의 실수 API로 데이터를 받아와서 처리할 때, 항상 mutable한지 immutable한지 생각하고 처리하자! 데이터는 죄가없었다..다 내탓이오. 구조분해할당에서 해당 property의 변수이름 설정하기 API로 받아온 데이터의 형태가 다음과 같을 때, {data: {results: [원하는 데이터] } }원하는데이터를 데이터에 저장된 results가 아닌, userdata라는 원하는 변수에 할당하고 싶다면 다음과같이 작성하면 된다. const{ data: {results: userdata }} = API로 받아온 데이터 전체 자바스크립트는 객체를 축약형으로 할당할 수 있다. this.setState({ userData, loginData }) this.state에 userData라는 proper..