이누의 개발성장기

multer express 기본 기능에는 파일 업로드 기능이 포함되어 있지 않다. multer는 사용자 파일 업로드 기능을 제공하는 패키지로, 사용자가 전송한 파일을 처리하는 작업을 수행한다. 패키지 설치 $ npm install --save multer 사용 예제 📄app.js var express = require('express'); var multer = require('multer'); var upload = multer({ dest: 'uploads/' }); var app = express(); app.set('view engine', 'pug'); app.set('views', path.join(__dirname, 'html')); app.get('/upload', function(req,..

Sequelize? node.js의 ORM으로, mysql이나 postgresql과 같은 DB를 제어할 수 있도록 해준다. cf. ORM(Object relational Mapping) : 객체와 관계형 데이터베이스의 데이터를 자동으로 매핑(연결)해주는 것. 객체 지향 프로그래밍은 클래스를 사용하고, 관계형 데이터베이스는 테이블을 사용한다. 즉, 프로그래밍 언어의 구문을 자동으로 SQL 구문으로 변경해준다. $ npm install sequelize 또한 sequelize는 mysql 등의 DB모듈도 필요로 한다. 그 중 하나인 mysql을 설치하자. $ npm install mysql2 dotenv 설정 Sequelize를 사용하기 위해서는 앞서 말했듯이 DB와 연동이 되어있어야 한다. mysql과 같..

0. 패키지 설치 $ npm i @nestjs/graphql graphql-tools graphql apollo-server-express apollo server를 기반으로하는 @nestjs/graphql을 활용해 nest.js 환경에서 GraphQL을 사용할 수 있다. Apollo server나 기존 GraphQL 라이브러리도 당연히 필요하기 때문에 함께 설치해준다. 1. 모듈 연결하기 import { GraphQLModule } from '@nestjs/graphql'; @Module({ imports: [ GraphQLModule.forRoot({ autoSchemaFile: true, }) ], controllers: [], providers: [], }) GraphQL 모듈이 정상적으로 돌아가..

Apollo, GraphQL in React Apollo? 애플리케이션 클라이언트를 백엔드 서비스에 원활하게 연결하는 데이터 그래프 를 구축하기위한 플랫폼 패키지 설치 npm install @apollo/client graphql @apollo/client : Apollo Client를 설정하는 데 필요한 대부분의 것이 포함 graphql : GraphQL 쿼리 분석을 위한 로직 제공 클라이언트 생성 import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: 'http://localhost:4000/', cache: new InMemoryCache() }); ApolloClient()..

Styled Components 컴포넌트 기반 개발 방법에서는 HTML, CSS, Javascript를 하나의 파일에 모으는 패턴이 선호된다. JSX를 통해 Javascript 코드가 HTML을 포함하고 있고, CSS는 Styled Components를 통해 삽입한다. 내부 CSS 코드는 기존 문법대로 작성하면 된다. 패키지 설치 $ npm i styled-components HTML 엘리먼트 스타일링 import styled from "styled-components" styled.div` // HTML 엘리먼트 스타일 정의 ` React 컴포넌트 스타일링 import styled from "styled-components" import Comp from "./Comp" styled(Comp)` // ..

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