react

리액트는 프론트엔드 라이브러리.정적 웹을 위해선 HTML + CSS로만으로 만들 수 있음.사용자의 행동에 따른 동적 웹은 JS를 더해 구현함.규모가 커진다면, DOM에 접근해야하고, 관리, 코드 정리하기에는 매우 힘들고 복잡해짐.이런 작업을 최소화하고 오직 개발에만 집

컴포넌트의 생명 - 소멸까지의 과정을 생명주기라고 합니다. 생명주기에서 특정 시점에 자동으로 호출되는 메소드를 라이프사이클이벤트라고 합니다.컴포넌트가 생성, 변경, 제거될 때 (특정 시점) 호출되는 메소드(라이프사이클 이벤트)컴포넌트의 특정시점에는 크게 3가지가 있습니

서버(노드)에 존재하는 데이터를 리액트의 js파일로 로드하는 방법에 대해서..리액트와 노드사이에 통신하려면, 먼저 두개의 포트를 각각 클라이언트사이드, 서버 사이드로 할당하여 동시에 서버구동을 해야합니다.\[서버구동이 완료되었으면 서버에서 어떤 방식으로 클라이언트에

5E프로젝트의 시안을 만들면서 정리한 글입니다.노드는 따로 구축하지 않고 view만을 위한 프로젝트입니다.React의 CRA를 사용합니다.초기세팅은 매우 간단합니다. npx명령어를 사용하면 로컬에 설치된 CRA로 프로젝트명의 폴더를 자동으로 만들어줍니다.폴더 세팅이 완

먼저 Hooks에 대해서 알 필요가 있습니다.리액트 v16.8부터 도입되었고, 클래스형 컴포넌트에서 제공하는 라이프사이클이벤트, State와 비슷한 기능을 함수형컴포넌트에서도 수행할 수 있게 한 기능입니다.참고상단 참고페이지에서 가져온 소스코드입니다.useState는

참고웹 개발은 JS 비중이 매우 크다. 따라서 페이지 로딩시 많은 스크립트를 로드할 경우 http 병목현상이 생길 수 있다.웹 팩은 많은 JS파일을 하나의 Bundle파일로 만들어서 이런 현상을 없애기 위함이다.그러나, 모든 파일을 하나로 합치면서 파일의 크기가 커진다

깃헙링크 예제구현하고 정리하기리액트 SPA에서 SSR을 수행할 수 있도록하는 프레임워크인 nextJS에 대해서 정리합니다.nextJS를 이용해 페이지 구성을 합니다.nextJS로 페이지 라우팅을 사용합니다.nextJS에서 공용 컴포넌트를 생성합니다.express서버와

JS에서 비동기 처리를 진행합니다.서버에 데이터요청을 했는데, 언제 완료될지도 모르고 기다릴 수 없기 때문에 나머지 코드를 먼저 실행하는 것이 비동기 처리입니다.setTimeout으로 생각대로 코드 호출이 되지 않는 것을 알 수 있었습니다.이를 해결하는 방법은 콜백함수

이전에 getInitialProps와 fetch()API를 이용해서 서버의 데이터를 받아오는 작업을 진행했다.그러나 fetch에는 여러 단점체감은 못해봤지만이 존재한다고 하여 axios를 통해 서버와의 HTTP통신을 진행하여 원하는 데이터를 받아오는 코드를 작성한다.H

리덕스는??가장 사용률이 높은 상태관리 라이브러리.컴포넌트들의 상태 관련 로직을 다른 파일로 분리시켜 관리할 수 있고, 컴포넌트간 상태를 공유할 때 컴포넌트들을 거치지 않고 쉽게 상태값을 전달 할 수 있다.props를 전달하기 위해 실제 props를 사용하지 않는 곳을

이전에 cors정책에 위배된다는 에러가 발생했었는데, 그땐 cors()패키지를 사용해서 해결되었었다.마찬가지로 router에 cors()를 추가했는데 왜인지 되지않았다.cors('접속을 시도한 URL')으로 경로를 추가해주니 정상적으로 요청헤더, 응답헤더가 출력되었다.

useSelector로 스토어의 상태에 접근할 수 있다.기존에 connect로 사용할 때 mapStateToProps와 비슷하다const myData = useSelector(selector: Function, deps: any\[]);deps배열은 어떤 값이 변경되었

앞서 정리했던 리덕스를 실제로 프로젝트에 적용해보고 사용해보도록 하겠다.여러 글을 참고하고 진행하였으며 어떤 형식이 옳은지, 어떻게 사용해야 정답인지는 아직 잘 모르겠다.글만보면서 이해하려하는 것 보다 직접 자료를 찾아가면서 실제 코드에 적용을 해보는 과정을 통해 이해

무한스크롤을 구현하는 방법scrollIntersectionObserver스크롤이벤트를 attch하여 현재 스크롤위치를 계산해 맨 끝에 스크롤되었을 때 다음 데이터를 fetch하는 방법을 사용한다.스크롤마다 이벤트가 발생하므로 성능이슈를 예방하기 위해 쓰로틀링 적용을

과제 1 1. API Request 1.1 Making Http Request 스크롤 구현전, api호출을 위한 http request를 만들어야 했다. 이를 위한 방법에는 크게 2가지, fetch, axios 가 있다. 이 둘의 차이점을 먼저 확인해보자 f