tree.map(branch => <Branch name={branch.name} ref={??} />); 위 코드처럼 map으로 여러 DOM 요소를 생성할 때나 재귀 컴포넌트의 경우, Ref를 어떻게 생성해야 할까? 우선 useRef 변수를 생성하고 초기값을 빈 배열로 만든다. const elementRefs = useRef(...

시간복잡도와 Big-O 시간 복잡도는 알고리즘을 처리하는 데 걸리는 시간을 정량화한 것이다. Big-O를 통해 시간 복잡도를 표현할 수 있다. O(1) : Constant Time 입력 데이터의 크기와 상관없이 언제나 일정한 시간이 걸린다. ex) pop(), push() 등 const names = ["Luis", "John", "...

Set 배열을 Set 인스턴스로 만들어 중복 제거 후, 스프레드 연산자로 배열로 반환 const dupArr = [1, 2, 3, 1, 2]; const set = new Set(dupArr); const uniqueArr = [...set]; filter(), indexOf() filter()와 indexOf()로 특정값이 처음으로 나타...

브라우저의 렌더링 과정 웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성...

웹 사이트 성능 최적화 웹 사이트 성능 최적화 방법에는 크게 두 가지가 있다. 로딩 성능 최적화 렌더링 성능 최적화 로딩 성능 최적화는 서버에서 데이터 및 파일을 가져오는 성능을 의미하고, 렌더링 성능 최적화는 로딩을 통해 받아온 정보 및 파일들을 브라우저에 표시해주는 성능을 의미한다. 웹 사이트 성능 최...

async/await, Promise를 사용하여 일정 시간 뒤에 실행되는 함수를 만들어 보자. 코드 구조는 아래와 같다. const a = async () => { console.log("1"); await stay(); console.log("2"); }; a(); stay() 함수에서 3초 지연된 후 다음 코드(consol...

마크업 우선 input 태그를 사용해 파일을 업로드 해보자. <InputFile ref={inputFile} type="file" onChange={(e) => handleImportChange(e)} /> <Button onClick={handleImportClick}>Import</Butto...

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement /** @jsx jsx */ import { css, jsx } from "@emotion/react"; const color = "darkgreen"; r...

event.target : 실제 이벤트가 발생한 요소 event.currentTarget : 이벤트 리스너와 연결된 요소 이벤트에서 target과 currentTarget의 차이 Event.currentTarget

export const Top = styled.div` ${Container} { border-bottom: 1px solid #d7d7d7; } `; Emotion으로 컴포넌트 스타일링 중 위와 같이 StyledComponent 코드 안에서 외부 컴포넌트를 참조하면 아래와 같은 에러가 뜬다. Component selectors c...