state가 초기화될 때 함수가 단 1회만 실행되어 값이 할당되는 방식을 lazy init이라고 한다. - Bad const getNumbers = () => { const candidates = [1,2,3,4,5,6,7,8,9]; const array = []; for(let i=0; i { const [answer, setAnswer] = useState(getNumbers()); } 4개의 숫자를 랜덤으로 돌려 answer에 할당하고자 할 때 getNumber()을 넣어주게 되면, 컴포넌트가 재렌더링될 때마다 다시 getNumbers()함수가 실행된다. 이 함수가 정말 무거운 함수였다면 시스템 전체의 부담이 되었을 것이다. (비효율적, 불필요한 반복) - good const getNumbers =..
1. 웹팩 데브 서버와 핫 리로딩 설정 왜 해주는 건데? react로 개발을 하다가 수정을 할 때 변경 사항을 확인하기 위해 계속 빌드를 반복해야한다. 개발자한테 이 반복작업은 매우 귀찮으며, 시간이 걸리는 작업이다. 하지만, 빌드 작업과 테스트를 위한 클릭 및 입력 작업이 생략될 수 있다면?획기적인 시간 단축을 기대할 수 있을 것이다. 우린 이것을 웹팩 데브 서버를 설치하고, 핫 리로딩 설정을 해줌으로써 빌드 과정을 자동화한다. 2. 핫 리로딩하는 2개의 패키지 npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D 그런데 이 핫 리로딩 패키지 없어도 리액트에서 그냥 리로딩되는데? 구지해줘야하나? 그것은 그냥 리로딩이다. 핫리로딩이랑은 다르다. 리로딩..
1. Intro create-react-app을 하면 자동으로 리액트 설정을 다 해준다. 대신에 우리는 create-react-app이 하는 일, 기본원리를 이해할 수 없다. 그래서 직접 1번 셋팅해보는 게 좋다. 2. 웹팩을 왜 쓸까? 유지보수성을 높일 수 있다. 하나의 HTML 파일에 2만 개의 컴포넌트를 담게되면 유지보수가 거의 불가능하다고 볼 수 있다. 실제 과거 페이스북 컴포넌트는 2만 개라고 한다 : ) 중복을 줄일 수 있다. 컴포넌트 파일을 만든다. (jsx로 만드는게 좋다. x하나가 더 붙어 리액트 파일임을 개발자가 직관적으로 알 수 있다) //컴포넌트 파일을 쪼개는 경우 필요한 패키지와 라이브러리 const React = require('react'); const {Component} =..
1. Intro 리액트에서는 클래스형이 아닌 함수형을 쓰라고 권장한다. Hooks와 함께 쓰면 간결한 코드 작성이 가능하다. (코드 수가 줄어듬) 하지만 클래스형을 아예 몰라도 되는가? NoNo! 과거 클래스로 코드를 짰던 팀에서는 class 코드가 잔재하기 때문에 알아두면 좋다. Hooks는 use가 써져있는 것들을 말한다. 2. useState 1) class state를 1개로 묶어줬다. state가 변경될 때마다 render가 재렌더링 된다. class GuGuDan extends React.Component{ state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '..
npm i styled-components npm i slick-carousel npm i react-slick import styled from "styled-components"; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import { PlayerSelectAtom } from "../../atom/PlayerSelectAtom"; import { useRecoilState } from 'recoil'; const VerticalSlider = () => { const settings = { arrows: false, inf..
1. 문제이해 다음은 3D 모델을 불러오는 React, React Three Fiber의 코드 현황이다. [CanvasPage.tsx] import { Canvas } from "@react-three/fiber"; import { TalkBalloonComp } from "../component/talk/TalkBalloonComp"; import { talkBalloonAtom } from "../atom/TalkBalloonAtom" import { useRecoilValue } from "recoil" import { MapUtilComp } from "../component/talk/MapUtilComp"; import { Physics, Debug } from '@react-three/cann..
1. poly haven https://polyhaven.com/a/shanghai_bund Shanghai Bund HDRI • Poly Haven Download this free HDRI from Poly Haven polyhaven.com 위 사이트에서 HDRIs 파일을 자유롭게 가져올 수 있다. // RGBE Loader var loader = new RGBELoader() loader.setDataType(THREE.UnsignedByteType) loader.load('../static/ex-14/shanghai_bund_1k.hdr', function (texture) { texture.mapping = THREE.EquirectangularReflectionMapping scene.bac..
1. 원리 정육면체 공간에 하나씩 이미지를 붙임으로써 하나의 공간을 만들게 된다. https://opengameart.org/content/skiingpenguins-skybox-pack skiingpenguins' skybox pack From 512² to 2048², JPEG format. It was made using a paid version of Terragen, which allows commercial use. opengameart.org 위 사이트는 위 공간 구성이 가능하게 이미지를 무료로 풀어놓았다. 1. 텍스쳐 추가 import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/Orbi..
