1. Render Props 재사용의 한 방법이다. ( Composition, HOC, render props ... ) React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 기능이다. 2. 사용 이유 class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( M..

1. Portals? DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법이다. 일반적으로 컴포넌트를 렌더링 메서드에서 엘리먼트를 반환할 때 부모 노드에서 가장 가까운 자식으로 DOM이 마운트 된다. 그런데 가끔 DOM의 다른 위치에서 자식을 삽입하는 것이 유용할 수 있다. 예를 들어, overflow: hidden이나 z-index가 있는 경우 시각적으로 자식을 "튀어나오도록" 보여야 하는 경우가 있다. 다이얼로그, 툴팁 같은 것 말이다. 2. 필요성 import React, { useState } from "react"; export default function Portals(props) { const [isOpen, setIsOpen] = useState(false); re..

0. 들어가며 처음 React를 공부할때, 보통 CRA(create react app)을 사용해서 프로젝트를 만들지만 Webpack과 Babel을 공부하는 겸 한번 빈 페이지에서 프로젝트를 만들어보겠다. 1. 세팅 및 패키지 설치 npm init npm init 명령어를 통해서 package.json을 만들어주자! npm i --s react react-dom React 프로젝트를 만들 것이기 때문에 당연히 react와 react-dom을 설치한다. npm i -D --s webpack webpack-cli webpack-dev-server - webpack : webpack을 사용해서 프로젝트를 만들기 때문에 당연히 설치한다. - webpack-cli : 커맨드 라인에서 webpack을 사용할 수 있게..

1. Memoization ? Memoization은 컴퓨터 프로그램이 동일한 계산을 반복해야할 때, 이전 계산한 값을 메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 2. React의 Memoization ? 1. memo 동일한 props로 렌더링을 한다면, React.memo를 사용하면 성능 향상을 누릴 수 있다. memo를 사용하면 React는 컴포넌트를 렌더링하지 않고, 마지막으로 렌더링된 결과를 재사용한다. import React, { useState, useEffect } from "react"; import MemoItem from "./MemoItem"; const commentList = [ { title: "comment1", con..

0. 들어가면서 웹사이트를 만들다 보면 필연적으로 만나는 기능 중 하나인 Slide! 요즘은 워낙 고수분들이 가공하여 배포를 해줘서 npm에서 검색을 하면 웬만한 기능은 사용이 가능하다. 그런데 react-slick이라는 좋은 Slide가 사용에 대해서 조금 불편한 점이 있어 그 부분 정리하는 김에 같이 정리하였다. 물론 내가 Document를 못 찾는 걸 수 있다.... 1. 공통 react-slick은 기본적으로 태그 안에서 슬라이드 별 필요한 옵션을 넣어 사용한다. 또 본문에 SlideContainer, SlidePage 같은 태그가 있을 건데, 그건 styled-component를 사용해서 기본적인 디자인을 넣었다. 추가로 기본적으로 제공하는 css 스타일을 적용하기 위해서 두 가지 css 파일을..

1. 노트 프로젝트 만들기 VSCode에서 먼저 npm init을 통해 프로젝트를 초기화시킨다! 다음 Express 프레임워크를 설치해서 가벼운 백엔드를 만들어준다! 여기까지 완료되었다면, 간단하게 작성하였다. ※ package-lock.json이 안 만들어졌다면, npm i 명령어를 통해서 만들어주면 된다. 2. 도커 파일 만들기 Node 프로젝트 작성이 끝났다면, 다음으론 Dockerfile을 만들어준다! Dockerfile 안에는 어떤 이미지를 만들건지, 프로젝트에 어떤 것이 필요한지 명시하는 것이다. 1. BaseImage 정하기 - FROM 제일 처음에는 FROM baseImage로 시작한다. DockerImage를 만들때 모든 것을 다 만드는 것이 아닌 BaseImage를 기반으로 작업을 진행..

1. DOM DOM이란 문서 객체 모델(Document Object Model)로 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스다. 여기서 말하는 문서 객체란, html, head, body, footer 같은 태그를 JavaScript에서 이용할 수 있는 객체를 의미한다. 즉, DOM은 HTML과 스크립트언어(JavaScript)를 이어주는 역할을 하고 있다. 2. Virtual DOM이 나온 이유 만약 요소를 수정할 경우 DOM의 document.getElementById를 사용할 경우 아쉬운 점이 있다. 1. 메모리 누수와 속도 요소를 찾는 코드를 변수에 저장하지 않고 매번 document.getElementById를 사용한다면, 각 단계마다 페이지의 모든 document를 훑으며 ..

1. 도커 설치 구글에서 docker를 검색하고, Get Started with Docker를 클릭! 그 후, Docker Desktop에서 Windows를 다운로드! Ok를 눌러 설치를 완료하면 끝!