이누의 개발성장기

React Router React의 SPA 환경에서 라우팅을 할 수 있도록 돕는 네비게이션 라이브러리. SPA의 장점은 유지하면서도, Component간의 엔드포인트 변경도 이루어지기 때문에 매우 유용하다. location, history 같은 내장 API와도 완벽하게 연동된다. React Router에는 web 용 라이브러리와 Native용 라이브러리가 따로 존재한다. 그 중 Web용 라이브러리인 'react-router-dom'은 아래 명령어로 React 프로젝트에 설치할 수 있다. $ npm i react-router-dom 활용방법 import React from "react"; import { Link, Route, BrowserRouter as Router } from "react-router..

useRef const App = () => { const inputRef = useRef(); setTimeout(() => inputRef.current.focus(), 5000); return ( Hi ); }; 자바스크립트에서 특정 요소의 크기를 가져오거나 포커스 하는 등의 기능을 수행하기 위해 DOM Selector가 필요하다. React의 컴포넌트에서는 React Hooks의 useRef를 활용해 그 기능을 수행할 수 있다. useRef를 통해 ref 객체를 만들고 선택하고 싶은 DOM에 속성으로 해당 ref 객체를 넣어주면 된다. 위 코드는 5초 후에 inputRef가 ref 속성으로 지정된 input DOM을 focus하는 코드이다.

useInput const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { const { target: { value } } = event; let willUpdate = true; if (typeof validator === "function") { willUpdate = validator(value); } if (willUpdate) { setValue(value); } }; return { value, onChange }; } const App = () => { const maxLen = (value) => value.length ..

UNIT TESTING vs E2E TESTING UNIT TESTING : 프로젝트에서 각각의 function을 따로 테스트하는 것이다. 각각의 function이 제대로 기능을 수행하는지 확인하기 위한 테스트이다. (ex. 영화목록을 모두 보여주는 함수, 하나 보여주는 함수, 영화목록 중 일부를 삭제하는 함수 등이 각각 잘 수행되는지) E2E TESTING : 이름 그대로(End-to-End testing) 모든 시스템을 테스팅하는 것이다. 사용자의 입장에서 페이지 간의 연결성 등을 테스트할 때 사용한다. (ex. 사용자가 특정 링크를 클릭했을 때 연결된 페이지를 정상적으로 볼 수 있어야 함) 해당 게시글에서는 Nest.js 프로젝트에서 jest를 이용해 unit testing을 진행하는 방법을 알아보..

DTO(Data Transfer Object, 데이터 전송 객체) 네트워크를 통해 데이터가 어떻게 전송될지 정의하는 객체 DTO 스키마를 클래스를 통해 쉽게 정의할 수 있다. create-movie.dto.ts export class CreateMovieDto { readonly title: string; readonly year: number; readonly genres: string[]; } class-validator와 class-transformer를 설치하고 이를 기반으로 파이프를 만들어 이를 통해 객체의 유효성을 체크할 수 있다. (파이프는 일종의 미들웨어라고 생각하자.) npm i class-validator class-transformer 위 명령어로 class-validator와 cla..

Service nest.js는 controller와 비즈니스 로직을 분리한다. 따라서 실제적인 기능인 비즈니스 로직은 모두 Service에서 정의하게 된다. controller와 마찬가지로 app.service.ts만으로는 모든 기능을 구성하기 어렵다. 따라서 새로운 service를 생성해야 할 경우가 많다. nest g s 위 명령어로 새로운 service를 만들 수 있다. @Injectable() export class MoviesService { getAll(): Movie[] { return this.movies; } getOne(id: number): Movie { const movie = this.movies.find(movie => movie.id === id); if (!movie) { t..

REST API의 단점과 GraphQL REST API는 URL을 계속해서 입력해야한다는 단점이 있다. 여러 엔드포인트에 대해 여러 형태의 쿼리로 데이터를 얻어와야한다. URL이 세밀하게 짜여있지 않은 이상 자신이 원하는 데이터 이상의 데이터를 불러와야할 수도 있고, 여러번의 URL에 여러번의 요청을 보내야 할 수도있다. (Over-fetching, Under-fetching) 하지만 GraphQL은 이러한 단점을 극복해 단일 엔드 포인트에 단일 쿼리로 모든 데이터를 원하는 만큼 불러올 수 있다. movies query 로 여러 영화의 정보를 받아올 수 있다고 하자. 이 때 우리는 영화들의 제목만 필요할 뿐, 다른 것은 필요하지 않다. 이 때 REST API는 어쩔 수없이 모든 정보를 불러오고 이를 수정..

SPA(Single Page Application) 다양한 MVC 프레임워크로 편리한 개발이 가능해졌지만, 특정 페이지를 업데이트할 때 페이지를 리다이렉션하는 불편함이 있었다. 예를 들어 좋아요를 누르는 등의 간단한 작업을 하더라도 새로고침을 해야하는 것이다. 그런 불편함을 해소하기 위해 등장한 것이 Angular나 React, Vue같은 Single Page Application이다. 이러한 Single Page Application의 서버는 단순히 html,css,javascript 정보를 브라우저에 전송한다. 이 때 포함된 javascript 코드가 웹서버처럼 html 페이지를 랜더링해주는 역할을 한다. 그리고 필요한 데이터(EX. 좋아요 갯수, 좋아요 여부 등)가 저장되는 백엔드 서버는 따로 구성..

Nest.js Node.js의 express를 기반으로 처리되는 백엔드 구성 프레임워크 typescript를 기본적으로 지원한다. (javascript로도 작성은 가능) node.js 특유의 구조와 순서, 룰을 잘 이용하면 엔터프라이즈 규모의 백엔드를 쉽게 제작할 수 있다. npm i -g @nestjs/cli 위 커맨드로 설치한다. (node.js는 기본적으로 설치되어있어야 한다.) nest new project 위 커맨드로 nest 프로젝트를 시작할 수 있다. 기본적으로 필요한 각종 패키지들이 설치되어 있다. (타입스크립트 등) Nest.js 파일구조 살펴보기 프로젝트를 생성하고 나면 위와같은 구조의 파일들이 생성된다. 핵심이 되는 파일들만 간단하게 살펴보자. src폴더의 main.ts에서 기본적인 ..

React Hooks API Class Component를 사용하지 않고도 state를 사용할 수 있도록 해준다. 즉, functional component에서 state를 가질 수 있도록 한다. 이런 기능이 유용한 이유는, class를 사용하지 않고 functional programming style 적용이 가능하도록 해주기 때문이다. hook의 종류에는 useState, useEffect이 있고 이들을 활용해 다양한 hook을 만들어 활용할 수 있다. 리액트 hooks 공식 페이지 (https://ko.reactjs.org/docs/hooks-intro.html) 사용예시 : useState import React, { useState } from "react"; const App = () => { ..