React

SPA는 Single Page Application의 약자로 최초 페이지 로딩시에만 서버에서 소스코드를 가져온 뒤 데이터가 변경되거나 필요한경우에만 서버에 호출해 동적으로 표현해주는 형태로 개발하는 방식을 말한다.필요할때만 서버 호출을 해 빠르고 트래픽이 적다는 특징이

첫 번째로 개발에 필요한 node.js이다.https://nodejs.org/en/이곳에서 크게 상관은 없지만 안전하게 LTS 버전을 받아서 설치한다.설치 후 터미널에서 node -v를 하게되면 버전이 확인이 된다.두 번째로 개발을 하기위한 IDE이다.VS C

컴포넌트는 화면을 구성하는 단위이다.컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있다.상태를 알수있는 값인 state를 사용할 수 있는 컴포넌트render를 무조건 위치해야 한다.class 앞에 export default라는 의미는 외부에서 참조할 수 있게

이번에는 부트스트랩 웹페이지 실습 소스를 이용해 모듈화 하는 실습을 진행한다.https://startbootstrap.com/previews/new-age해당 웹페이지에서 소스코드를 다운로드 한다.압축을 풀면 파일은 이렇게 들어있다. css와 assets 폴더

화면에 값을 불러오고 표현하기 위한 값을 처리하는 방식에 대해서도 알아보자.불변하는 값부모 컴포넌트에서 자식컴포넌트로 전달한번 만들어진 데이터는 변경되지 않는다.상태값이 없는 컴포넌트는 stateless component라고 부른다. 이런 상태값이 없는 컴포넌트는 스스

변경 가능한 값우리가 아는 데이터에 해당.데이터 변경 시 화면이 새로고침 됨state는 우리가 일반적으로 알고있는 변수와 비슷하다. 다음 예제에서는 카드색상을 원하는색으로 바꾸는 실습을 진행하겠다.아래와 같이 파일을 생성한다.Label, Squere컴포넌트를 사용하는

Hooks는 리액트 16.8 버전에 신규로 추가된 기능이다. 클래스형 컴포넌트에서만 가능했던 state 및 다양한 기능을 코드작성 없이 라이브러리로 제공한다.리액트에서는 클래스형 컴포넌트가아닌 함수형 컴포넌트에 훅을 사용하는것을 권장한다.훅의 간단한 규칙이 있다.최상위

웹스톰으로 리액트 프로젝트를 생성해 예제를 만들어 실행 해보면 찍히면 안되는 콘솔 로그까지 마구잡히로 찍히고, 두번씩 찍히는 것을 경험한적이 있을것이다.이유는 React.StrictMode 때문이다.해당 모드가 존재하는 이유는 다음과 같다.안전하지 않은 생명주기를 사용

https://www.npmjs.com/package/react-lazy-with-preload예제버튼에 마우스를 올리면 Temp 컴포넌트를 Preload 하고, 버튼을 누르면 state를 토글해 Suspense 영역에 보여줍니다.Preload 하는것은 개발자

lazy로 필요한 js를 그때그때 가져오기 위해서는 청크를 분리해야 한다.라이브러리 설치apackage.json파일의 babel의plugins 명시import 시 chunkname 명시

자바스크립트 기반의 리액트 개발을 하다보면 타입이 자연스럽게 형변환이 되는것을 볼 수 있다. 이런문젤ㄹ 해결하기위한 타입검사가 필요하다.

리액트 중첩 라우팅에 대해 알아보자.기존에 리액트 프로젝트를 사용할때는 중첩되지 않고 모든 라우트가 같은 수준으로 나열되어있고, 추가적으로 동적으로 컴포넌트를 랜더링 하기 위해서는 state여부에 따라 랜더링될 수 있도록 만들었다.하지만 이는 단점이 있다. 해당 url