프론트엔드/React11 CRA없이 리액트(타입스크립트) 프로젝트 생성하기 웹팩이란? 모듈 번들러 중 하나이다. 그럼 번들러는 또 뭔데 번들러는 여러 개의 모듈을 하나의 파일로 묶어주는 도구이다. 이걸 사용하는 이유는 모듈 시스템 사용: 모듈 시스템의 필요성 즉 변수를 파일 단위로 관리 가능 파일 크기 최적화: 여러 개의 파일을 하나로 묶으면, 네트워크 비용 감소. 번들러는 여러 파일을 하나의 파일로 묶어서 요청 횟수를 줄이고, 파일 크기를 최적화해줌 코드 최적화: 번들러는 불필요한 코드를 제거하거나, 코드를 압축하여 파일 크기를 최소화해줌 다양한 형식의 파일 로드: 번들러는 자바스크립트 파일뿐만 아니라 CSS, 이미지, 폰트 등 다양한 혁신의 파일도 로드할 수 있음. 근데 왜 웹팩 써야 함? 웹팩이 선호되는 이유 중 몇 가지는 다양한 플러그인 시스템과 로더를 통해서 훨씬 많은.. 2023. 3. 12. Portals 언제 까지 부모 컨포넌트 아래에 jsx, tsx를 렌더링 할 것인가 이 지겨운 일상에서 탈출 시켜줄 portals를 소개해 드리겠습니다. Portals란? 리액트 16 버전 이상에서 도입된 기능으로 React 컴포넌트를 다른 DOM 노드에 렌더링할 수 있게 해주는 기능. 이것을 사용하면 현재 컴포넌트 트리 외부의 DOM 요소에 렌더링 해줄 수 있음 아래 코드펜에서 확인해 보자 See the Pen portals by SeungYn (@SeungYn) on CodePen. 사용법은 아래 코드처럼 ReactDOM.createPortal()인자에 첫번 째로는 jsx를 두번 째로는 렌더링할 부모 노드를 넣어주면 된다. function Portal(){ return ReactDOM.createPortal(포탈생성.. 2023. 3. 11. 연속된 커스텀 훅(훅인마) 어떻게 보면 당연한 건데 나 혼자 오해한 듯. 사건의 발단은 두 개의 커스텀 훅이 있다. 하나는 state값을 1초마다 증가해서 return 하는 훅 export default function useTest2() { const [state, setState] = useState(1); setTimeout(() => setState((f) => f + 1), 1000); return state; } 하나는 받은 값으로 다시 스테이트에 넣는 모습 export default function useTest1() { const data = useTest2(); const [test, setTest] = useState(data); console.log(data); console.log(test); return d.. 2023. 3. 9. 리액트 hydrate React에서 "hydrate"는 일반적으로 서버 측 렌더링된 HTML과 클라이언트 측 JavaScript 앱을 연결하는 과정을 의미합니다. 보통 React 앱은 JavaScript로 작성되며, 브라우저에서 JavaScript 파일이 로드되어야 실행됩니다. 이 때, 첫 페이지 로드 시에 React 앱이 화면에 나타나기까지 JavaScript 파일이 다운로드되는 시간이 필요하므로 사용자는 앱이 로드되는 동안 대기해야 합니다. 이는 사용자 경험을 저하시킬 수 있습니다. 이 문제를 해결하기 위해 React는 서버 측 렌더링을 지원합니다. 서버에서 React 앱을 렌더링하여 HTML 문자열로 출력한 다음, 이 HTML 문자열을 클라이언트로 보내어 브라우저에서 JavaScript 파일을 로드하고 React 앱을 .. 2023. 2. 21. 이전 1 2 3 다음
