profile
빠르게 발전중인 프론트엔드 개발자

React.PureComponent란?

React.Component와는 React 메소드중 하나인 shouldComponentUpdate를 다루는 방식이 다르다.React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있고,props와 state를 얕은 비교를 한 뒤 변경

2020년 12월 6일
·
0개의 댓글

함수형 프로그래밍

2020년 12월 6일
·
0개의 댓글

PropTypes

PropTypes.node = node는 컴포넌트의 return ( ) 안에 들어가는 모든 것 들이다. {} === {} /// false 객체는 서로 같지 않다.Inline으로 쓴 style때문에 그 태그가 리렌더링이 발생해버린다.styled-component나

2020년 12월 6일
·
0개의 댓글

TypeScript #3

타입스크립트에서 함수를 선언할때는 아래와 같은 방식으로 선언한다.기존 자바스크립트 함수 선언 방식에서 매개변수와 반환값에 타입을 추가한다.타입스크립트에서는 함수의 인자를 모두 필수값으로 간주한다. 따라서 함수의 매개변수를 설정하면 undefined나 null이라도 꼭

2020년 11월 28일
·
0개의 댓글
post-thumbnail

TypeScript #2

위와 같은 명령어로 타입스크립트로 작성한 코드를 javasciprt로 컴파일링 할 수 있다.매번 타입스크립트 버전명을 같이 적어주는것은 번거로우니 tsc 옵션 설정 파일을 만들자이와 같이 tsconfig.json 파일에 target: es2020을 써주면 tsc 컴파일

2020년 11월 28일
·
0개의 댓글

TypeScript #1

TypeSciprt란?MicoMicroSoft에서 개발하고 관리하는 오픈소스 프로그래밍 언어자바스크립트의 SuperSet으로 최신 ECMA를 발빠르게 지원한다.정적 타입 언어이기에 타입 안정성을 보장한다.참고로 JavaScript는 동적 타입 언어이기에 타입 안정성이

2020년 11월 28일
·
0개의 댓글

Dynamic Import

ES2020의 문법으로 모듈을 빌드타임이 아닌, 런타임에 불러오도록 한다.첫 페이지 진입시, 필요한 최소한의 코드만 다운받고, 특정 페이지 이동시마다 필요한 코드를 로드 할 수 있게끔 하여 초기 성능을 높이기 위함.초기 로딩때 당장에 불필요한 기능까지 모두 로딩하는것보

2020년 11월 22일
·
0개의 댓글

Next.js 9.3버전 이후의 라이프사이클

정적 페이지 생성을 지원하며 빌드타임때 딱 한번 실행된다.빌드시 값은 고정되며 이후에는 변경 할 수 없다.페이지를 렌더링 할 때만 필요한 데이터를 불러올때 사용한다.페이지가 미리 렌더링되어야 할 떄 사용하면 좋다.getStaticProps와 함께 쓰인다.동적 라우팅을

2020년 11월 22일
·
0개의 댓글

Next.js의 getInitialProps

getInitialProps 호출URL주소로 직접 페이지에 접근하면 Node환경에서 getInitialProps가 호출됨웹브라우저(클라이언트) 에서 SPA로 화면을 이동 할 경우 브라우저 환경에서 getInitialProps가 호출됨getInitialProps의 리턴값

2020년 11월 22일
·
3개의 댓글

Mobx

redux와는 다른, 또 다른 리액트 상태관리 라이브러리다.redux와 마찬가지로 react의 종속적인 라이브러리는 아니므로 어디서든 쓸 수 있다.MobX를 사용하고 있는 앱의 상태는 관측 가능하다.앱에서 사용하고 있는 state는 변할 수 있으며, 만약 특정 부분이

2020년 11월 12일
·
0개의 댓글

Next.js #1

React의 Server Side Rendering을 쉽게 구현 할 수 있게 도와주는 간단한 프레임워크이다.React만으로 자체적으로 SSR을 구현 할 수 있지만, 생각보다 복잡하기에 Next가 등장했다.과거 웹 사이트들은 대부분 SSR로 동작되어 왔기에 페이지가 여러

2020년 11월 12일
·
0개의 댓글

리덕스 공부 #2

상태를 직접 바꾸는것은 컴포넌트로 하여금 리렌더링 되는것을 막거나 Redux-dex-tool의 시간여행 기능을 작동하지 못하게 할 수 있다.복사 한 값을 변경하는것은 괜찮다. Immer 라이브러리를 사용하고 있다면 실제 값은 변경되지 않기에 직접 변경하는 로직을 작성해

2020년 11월 12일
·
0개의 댓글
post-thumbnail

이미지 업로드 전 미리보기 구현

fileReader로 img파일의 결과를 toString()axios를 이용한 formData 전송console.log(render)의 결과

2020년 11월 8일
·
0개의 댓글

@Redux/toolkit #2

createSlice는 생성된 reducer함수를 reducer라는 필드를 포함하는 "slice"객체와 actions이라는 객체 내부에서 생성된 액션 생성함수를 반환한다.리덕스 모듈 하나를 만들기 위해서는 action type을 정의하고, actionCreator를 만

2020년 11월 7일
·
0개의 댓글

Styled-components props 이용해서 값 바꾸기

onClick으로 함수를 연결해 클릭시마다 transform : translate3d의 값이 700씩 늘어난다.

2020년 11월 7일
·
0개의 댓글
post-thumbnail

왓챠피디아 클론 프로젝트 후기

클론 한 사이트 : WatchaPedia팀 명 : Watcha & ChillReact.jsReact-Router-DomGItRedux (평가하기 페이지 한정)별점 라이브러리차트 라이브러리Slick 구현Infinity Scroll 구현fetch를 사용해 Backend와

2020년 11월 1일
·
0개의 댓글

@Redux/toolkit #1

1차 프로젝트때 이미 리덕스 툴킷을 조금 적용시켰다.2차 프로젝트때는 조금 더 심도있게 파고들기 위해서 리덕스 툴킷을 조금 더 공부해보자.리덕스를 사용하다보면 코드의 양이 계속 늘어나기 마련이고 그에따라 계속 복잡해져만 간다.리덕스 툴킷을 적용하면 코드를 상당부분 줄일

2020년 11월 1일
·
0개의 댓글

Axios #1

1차 프로젝트때는 fetch로 backend와 통신을 했다. 2차때는 Axios 사용을 위해 미리 공부해보자.브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리크로스브라우징에 최적화 되어있다.브라우저에선 - XMLHttpRe

2020년 11월 1일
·
0개의 댓글

Route에 조건부 렌더링 넣기

Route에 component 대신 render를 넣어서 화살표함수로 컴포넌트를 넣어주면 props를 줄 수 있다.이 방식으로 state의 값에 따라 조건부 렌더링을 먹일 수 있다.

2020년 10월 24일
·
0개의 댓글

fetch로 백엔드 데이터 받아오기

현재 ClassComponent로 왓챠피디아 클론을 진행중인데, 더미데이터를 만들어서 fetch 함수로 불러와 화면에 뿌려주기 위해 사용했다.!\[Items.js-\_watcha_and_chillWSL_Ubuntu-20.04-현재 state의 movieList에

2020년 10월 24일
·
0개의 댓글