즐겁게, 코드

[지난 글 목록] Express.js & MongoDB 기반 REST api 구현하기 - 1편 (서버 만들기) Express.js & MongoDB 기반 REST api 구현하기 - 2편 (몽고디비 연결하기) 이전 단계에서 몽고디비(MongoDB)를 사용할 준비를 마쳤으니, 이제 몽고디비를 사용해 보자. 몽고디비는 행렬 테이블로 이루어진 기존의 관계형 데이터베이스와는 다르게 어떤 값이든 DB에 어떤 형태로든 추가될 수 있다. 이는 NoSQL 방식의 큰 장점이기도 하지만 자칫하면 무질서한 데이터들로 인해 DB의 무결성을 해칠 수도 있다. 그래서 몽구스에서 제공하는 것이 스키마(Schema)로, 스키마는 데이터 포맷을 일종의 템플릿으로 정해줌으로써 몽고디비에서도 MySQL처럼 구조화된 데이터를 관리할 수 있..

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,..

지난 글에서 익스프레스를 활용한 간단한 REST api 서버를 만들었다. 서버만 만들고 마치기는 2% 아쉬우니, 몽고디비(MongoDB)와 연계해 CRUD 동작을 구현해 보자. 이번 글에서는 몽고디비를 클라우드 서비스로 제공하는 MongoDB Atlas 사용법을 정리할 예정이다. 먼저 cloud.mongodb.com/ 으로 들어가 회원가입을 마치면 보이는 아래 화면에서 [New Project] 를 선택해주자. 프로젝트의 이름과 접근 권한을 설정해주면 아래 화면이 나타난다. 아직 우리가 만든건 껍데기에 불과하니 [Build a Cluster] 를 선택해 본격적인 데이터베이스를 만들어 보자. 사용량에 따라 플랜을 선택한 다음 서비스 제공자는 AWS로 설정한 다음, 하단 배너의 [Create Cluster] ..

[먼저 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)을 활용하면 부모 요소 ..