일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 백준
- 가상화
- next.js
- 자바스크립트
- 타입스크립트
- BFS
- 컴퓨터공학
- 이더리움
- 알고리즘
- es6
- react
- 블록체인
- 웹
- 솔리디티
- 프론트엔드
- 리액트
- 클라우드
- kubernetes
- node.js
- docker
- k8s
- 백엔드
- 쿠버네티스
- HTML
- TypeScript
- AWS
- 이슈
- CSS
- 파이썬
- JavaScript
- Today
- Total
목록🎨 프론트엔드 (76)
즐겁게, 코드
useRef 훅은 마치 북극성에 비유할 수 있는 훅이다. 훅을 소개하기 앞서 코드를 하나 살펴보자. import React, { useState } from "react"; function UseRef() { const [name, setName] = useState(""); return ( setName(e.target.value)}> 이름 : {name} ); } export default UseRef; 이름을 입력받는 입력란과 이름을 출력하는 요소가 있다. 만약 상태가 업데이트될 때마다 컴포넌트가 렌더링되는 횟수를 구해야 한다면, 어떻게 구할 수 있을지 잠깐 생각해보자. 아마 useRef를 모르는 사람이라면 이렇게 코드를 작성할 것이다. (실제로 나도 이렇게 작성했었다.) import React, ..
useMemo 훅은 useState와 useEffect에 비해서는 존재감이 다소 떨어지지만 강력한 기능을 탑재하고 있습니다. 바로 메모이제이션을 구현해 함수의 중복 동작을 막아 성능을 향상시킬 수 있는데, 한번 사용 방법을 살펴보도록 하겠습니다. [useMemo 훅의 기본 형태] import React, {useMemo} from 'react' const memoizedValue = useMemo(() => { return (수행할 동작 (주로 시간이 오래 걸리는)); }, [의존값]); 리액트 컴포넌트는 재렌더링될때마다 컴포넌트 내의 모든 함수를 다시 호출하지만, useMemo를 사용하면 의존값으로 주어진 값이 변경될 때만 특정 함수를 호출할 수 있습니다. import React, { useState,..
[코드 강의 영상 - 짧고 재밌으니 아래 글을 참고해 완성해보자.] 신묘한 유튜브 알고리즘에 이끌려 face-api 라는 얼굴 인식 라이브러리를 경험해볼 기회가 있었다. [face-api.js 깃허브 저장소 링크 : github.com/justadudewhohacks/face-api.js] justadudewhohacks/face-api.js JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js - justadudewhohacks/face-api.js github.com 내가 따라한 예제에서는 현재 감정을 추론하는게 전부였지만, 문서를 뒤적여 다른 모델을 찾아보면 인물의 나이 & ..
기본 설정으로 리액트 프로젝트를 구성했다면 index.js 파일에서 아래 코드를 본 적 있을 것이다. ReactDOM.render(, document.getElementById('root')); 이는 public 폴더에 존재하는 HTML 문서 중 id = "root" 인 요소의 자식으로 App 컴포넌트를 렌더링한다는 의미인데, 가끔은 여러 이유로 부모 컴포넌트를 벗어난 곳에 자식 컴포넌트를 배치해야 할 때가 있다. 예를 들면 모바일 화면에서 드로어(측면 메뉴)를 만들 때 드로어는 화면 위를 덮으므로 DOM 상에서도 최상단에 위치하는 것이 자연스럽다. 그러나 위의 ReactDOM.render() 함수로 인해 드로어는 언제나 root의 자식 요소로 배치되게 되는데, 포탈(portal)을 활용하면 부모 요소 ..
useEffect 훅은 컴포넌트의 부수동작(effect) 을 담당하는 훅으로 기본 훅 중에서도 가장 중요한 훅이라 할 수 있다. (부수동작이란 컴포넌트가 처음 마운트될때 / 컴포넌트가 업데이트될때 / 컴포넌트가 언마운트될때 일어나는 모든 동작을 의미한다.) [useEffect 훅의 기본 형태] import React, {useEffect} from 'react' useEffect( (이펙트 함수) return { (클린업 함수) } }, [의존값]); // 이펙트 함수 호출시점 : 컴포넌트가 처음 마운트될 때, 의존값으로 주어진 값이 변경될 때 // 클린업 함수 호출시점 : 이펙트 함수가 호출되기 전, 컴포넌트가 언마운트될때 각각 클린업이 호출된다. // 의존값 배열이 비어 있으면 최초 마운트 시에만 이..
리액트로 컴포넌트를 만들때 함수 컴포넌트를 사용하는 것이 대세가 된 지금 함수 컴포넌트에서 클래스 컴포넌트의 동작을 구현하는 훅(Hook)에 대한 이해는 필수적이다. 오늘은 리액트 훅의 기본적인 특징과 클래스 컴포넌트의 상태를 구현하는 useState 훅에 대해 알아보자. import React, { useState } from "react"; function App() { const [count, setCount] = useState(0); function decrementCount() { // count 가 들어간 부분을 재렌더링함. setCount((prevCnt) => prevCnt - 1); } function incrementCount() { // count 가 들어간 부분을 재렌더링함. se..