JSDoc JSDoc은 JavaDoc과 유사한, JavaScript용 API 생성기인데, 문서 주석을 코드와 함께 직접 소스 코드에 추가할 수 있다. 오늘은 JSDoc을 활용하여 개발을 좀 더 쉽게 하는 방법에 대해 학습해보자. 함수 printWord를 만들어 예를 들어보자 printWord는 인자 하나를 받아, 콘솔에 출려하는 함수다. 우리는 해당 함수를 아래와 같이 선언 하고 호출 할 것이다. const printWord = (word) => { console.log(word) } printWord('Hello') 하지만 함수가 많아지고, 혼자가 아닌 여럿이서 개발을 하게 되면 어떨까?? 분명 해당 함수가 어떤 역할을 하는 지 무엇을 매개 변수로 받는 지를 쉽게 파악하기 어렵다. 따라서 JSDoc을 ..
전 게시글에서 Controller와 Service를 이용해서 API를 개발 했는 데, 이번에는 DTO, PIPE와 Module에 대해서 알아보자 DTO Dto란 Data Trasfer Object의 약자로, 계층간 데이터를 교환하기 위해 사용하는 로직을 가지지 않는 데이터 객체다. Client(Brower)에서 Controller로, Service로 계속 계층을 이동할 때는 DTO를 사용한다. 전화번호를 생성할 때 계층간 이동에 사용할 DTO를 생성해보자. [/src/phonebook/dto/phonebook.req.dto] export class CreatePhoneBookDTO{ name : string phone : string } DTO를 생성하는 방법은 간단하다. 계층 간 이동에 필요한 필드를 ..
Nest JS를 이용해서 전화번호 API를 개발하자. 전화번호부를 생성하거나, 목록 조회, 단일 조회를 할 수 있고, 수정, 삭제, 이미지, JWT까지 시간이 되면 작성할 예정이다. Entity 생성 먼저 Entity를 생성하자. Entity는 하나의 객체라고 생각하면 되고, 해당 프로젝트에선 전화번호라고 생각하자. [phonebook.entity.ts] export class Phonebook { idx: number name: string phone: string } Service 생성 아래의 명령어로 쉽게 Service를 생성할 수 있다. nest g s 목록 조회, 단일 조회, 생성 즉 비즈니스 로직을 처리할 Service를 생성하자. 아직 DB 연결을 하지 않기에, 가상 저장소인 배열을 만들어서..
Nest JS Project를 생성하면 아래의 구조를 가지게 된다. Main.ts Main.ts는 AppModule를 추출해서, 3000번 포트에 실행 시키는 역할을 하며, 함수 이름은 변경해도 되지만, 파일 명은 변경해서는 안 된다. import { NestFactory } from '@nestjs/core' import { AppModule } from './app.module' async function bootstrap() { const app = await NestFactory.create(AppModule) await app.listen(3000) } bootstrap() AppModule.ts AppModule에서는 우리가 만드는 Service, Controller나 추가로 생성한 Modul..
연산자는 연산을 수행하는 기호를 의미하며, 사칙 연산자 논리 연산자 등 다양한 연산자가 존재한다. 연산자가 연산을 수행 할 때는 연산의 대상이 있어야 하는 데, 이를 피연산자라고 한다. 연산자와 피연산자를 조합해 계산하고자 하는 바를 표현한 것을 식이라고 하며, 식을 계산하면 얻는 결과를 평가라고 한다. 연산자의 종류 종류 연산자 설명 산술 연산자 + - * / % > 사칙 연산자와 같은 연산자 비교 연산자 > = y - 2 // 산술 연산자가 비교 연산자보다 먼저 수행된다. X > 3 && x < 5 // 비교 연산자가 논리 연산자보다 먼저 수행된다. result = x + y // 대입 연산자는 연산자 중에서 우선 순위가 제일 낮다. 하나의 식에 같은 우선 순위의 연산자가 여러개가 있는 경우, ..
해당 게시글은 김영한님의 스프링 핵심 원리 - 기본편의 강좌 정리 입니다. 내용 및 소스 출처 https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%ED%95%B5%EC%8B%AC-%EC%9B%90%EB%A6%AC-%EA%B8%B0%EB%B3%B8%ED%8E%B8 ApplicationContext applicationContext = new AnnotationConfigApplicationContext(Appconfig.class) ApplicationContext는 스프링 컨테이너라고 하며, 인터페이스다. 스프링 컨테이너는 XML 혹은 애노테이션 기반의 자바 설정 클래스를 만들 수 있지만 요즘은 애노테이션을 많이 사용한다. 스프링 컨테이너를 생성 ..
HTTP Header에는 HTTP 전송에 필요한 모든 부가 정보가 담겨있다. ex) 서버 정보, 캐시 정보, 메세지 바디의 크기 ... 최신인 RFC7230에서는 메세지 본문을 통해 표현 데이터를 제공하며, 이를 페이로드(payload)라고 한다. 표현은 요청이나 응답에서 실제로 사용할 수 있는 데이터를 뜻하며, 표현 헤더는 표현 데이터를 해석할 수 있는 정보인 데이터 유형, 압축 정보, 데이터 길이등을 제공한다. 표현 헤더 표현 헤더는 응답과 요청에 모두 사용되며, 아래의 4가지가 있다. Content-type : 표현 데이터 형식 Content-Encoding : 표현 데이터 압축 방식 Content-Language : 표현 데이터의 자연 언어 Content-Length : 표현 데이터의 길이 Con..
body-parser는 Node.JS의 모듈 중 하나로, 클라이언트가 보내는 Request Data의 Body로부터 파라미터를 편리하게 추출 할 수 있다. method : post url : http://localhost:8080 data : { id : "admin", pw : "1234" } 위의 요청을 처리하는 코드를 짜보자. const express = require("express") const app = express() app.post("/", (req,res) => { const {id, pw} = req.body console.log(id, pw) }) const port = 8080 app.listen(port, () => console.log(`SERVER ON PORT : ${por..
JavaScript로 개발을 할 때는 특정 태그를 잡기 위하여, getElementById, getElementByClass, querySelector와 같은 DOM 선택자를 사용해서 특정 태그, DOM을 선택 하였다. 리액트에서도 가끔 DOM을 선택할 필요가 있을 때가 있으며, 그 때 사용하는 것이 useRef 훅이다. useRef를 생성하고, 태그의 ref 속성으로 생성한 useRef와 연결하여 사용한다. import { useRef } from 'react' export default function Page() { const inputTag = useRef() return } DOM 객체의 current.focus()를 이용하면, 원하는 객체를 선택하게 할 수 있다. current.focus()와..
React에서 사용자가 데이터를 입력할 수 있는 INPUT을 관리하는 방법에 대해서 알아보자. useState를 이용해서 input 하나를 관리를 해보고, 여러개를 관리해본다. 1. INPUT 1개 관리하기 input 태그의 onChange와 useState의 Set 함수를 연결하여 관리한다. onChange는 이벤트 중 하나로, 변화가 있을 때 마다 실행된다. 그러기에, INPUT의 변화가 있을 때 마다 즉 사용자가 INPUT에 입력 할 때 마다 그 값을 text에 저장한다. import { useState } from 'react' export default function App() { const [text, setText] = useState() // text 상태 관리 const onChange..