즐겁게, 코드

리액트를 다룰 때 함수 컴포넌트에서 속성(prop)을 받아오는 방법은 아마 익숙할 것입니다. const App = ({ name, age }) => { return ( 이름 : {name} 나이 : {age} ) } * 편의상 export default 구문은 따로 표기하지 않았습니다. App 컴포넌트에서 name과 age 라는 속성을 구조 분해 할당 문법으로 받아오는 모습인데요, 만약 상위 컴포넌트로부터 name과 age 속성을 전달받지 못하면 해당 값은 undefined 가 됩니다. 이런 경우를 방지하기 위해 리액트에서는 defaultProps 라는 특수한 프로퍼티를 사용해 속성의 기본값을 정해줄 수 있습니다. const App = ({ name, age }) => { return ( 이름 : {na..

머터리얼 UI(Material UI) 기반 컴포넌트를 꾸밀 때는 makeStyles라는 커스텀 훅과 객체를 사용해 CSS를 꾸미게 된다. 예를 들어 클래스명이 'card' 인 요소를 꾸미는 방법은 이런 식이다. import React from "react"; import { Card, makeStyles} from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ card: { width: "80%", height: "20%" }, })) const CardContainer = () => { const classes = useStyles(); } 자바스크립트에서 객체를 사용하는 문법을 아는 사람이라면 뭔가 이상한 점이 하나 보일 것이다. "..

타입스크립트는 새로운 언어가 아니라 자바스크립트의 슈퍼셋(스타크래프트 오리지널과 브루드 워의 관계라고 보면 된다.) 으로, 프로젝트가 거대해질수록 타입스크립트의 사용은 선택이 아닌 반 필수라고 합니다. 먼저 타입스크립트 프로젝트를 구성하려면 두 패키지가 필요하다. typescript와 ts-node 패키지가 그것으로, 둘 다 npm을 통해 내려받을 수 있다. npm i -g typescript ts-node // 혼자 이리저리 갖고 놀 예정이라면 전역으로 설치해주고 npm i -D typescript ts-node // 프로젝트 배포용으로 사용할 예정이라면 프로젝트 폴더에 설치해주자. typescript 패키지는 타입스크립트로 작성한 코드를 자바스크립트로 바꿔 주며(이를 트랜스파일링이라 한다.), ts-..

리액트에서는 일반적으로 상태를 위에서 아래로밖에 전달할 수 없지만, 컨텍스트(context)를 활용하면 전역으로 상태값을 활용할 수 있게 된다. (리액트의 컨텍스트는 자바스크립트와는 달리 '데이터 저장소' 라고 생각하면 된다.) [context의 기본 사용법] import React, { Component } from 'react' // 컨텍스트(데이터 저장소) 생성 const MyContext = React.createContext(defaultValue); // Provider 생성 ... ----------------------------------------------------------- // 에서 {value => /* context 값을 이용한 렌더링 */} 1. 컨텍스트를 활용하기 위해서..

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 내가 따라한 예제에서는 현재 감정을 추론하는게 전부였지만, 문서를 뒤적여 다른 모델을 찾아보면 인물의 나이 & ..