즐겁게, 코드

[먼저 REST api에 대한 간단한 영상을 추천드립니다.] 오늘은 익스프레스(Express.js)와 NoSQL의 선두주자 MongoDB를 활용해 REST api를 구현해보도록 하겠습니다. 먼저 REST api를 간단히 설명하자면, 과거에는 클라이언트로 요청을 보낼 때 수행할 동작별로 다른 URL에 요청을 보내야만 했습니다. 1. 요청별로 다른 엔드포인트를 관리하는 방식 학생 데이터를 불러올 때 : www.sample.com/getStudent/:id 학생 데이터를 추가할 때 : www.sample.com/addStudent 학생 데이터를 삭제할 때 : www.sample.com/removeStudent/:id 이렇게 동작별로 다른 URL에 요청을 보내는 방식은 개발 문서의 복잡화와 개발자들간 소통을 방..

[코드 강의 영상 - 짧고 재밌으니 아래 글을 참고해 완성해보자.] 신묘한 유튜브 알고리즘에 이끌려 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..