본문 바로가기

분류 전체보기

 (287)
NestJS | 프로젝트 생성 및 실행 nuxt next nest차이점 알아보다가 갑자기 해보는 NestJS NestJS node.js 프레임워크 Java에 Spring이 있다면, node.js에는 NestJS가 있다.. 요즘 굉장히 핫하다고 함 (이건 못참지) TypeScript 완벽지원 엔터프라이즈용 프레임워크다~ 스프링을 해봤다면 쉽게 적응할 수 있다고 한다! express와 fastify 플랫폼 지원 (express가 기본) install 설치 후 nest입력 해 설치 확인 $ npm i -g @nestjs/cli $ nest 아, node가 설치되어 있어야 한다.. 당연히.. project setting CLI를 설치했으니 이제 프로젝트를 생성할 수 있다. nest new로 생성 $ nest new project-name projec..
React | API 요청 테스트 testing-library 리액트에서도 권장하고 있는 테스팅 라이브러리. create-react-app으로 생성한 프로젝트는 기본적으로 포함하고 있다. axios-mock-adapter axios요청을 mock, 즉 가짜로 한다. npm install axios-mock-adapter --save-dev사용 기본 사용법 new MockAdaptor(axios)를 통해 axios의 요청을 mocking한다. 실제 서버까지 요청이 전달되지 않고, mocking한 요청과 동일한 요청이 있다면 .reply(~)로 설정한 가짜 응답 값이 돌아온다. import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; con..
React | API 요청을 분리해보기.. axios axios 설치 npm install axios /src경로에 api폴더를 생성하고, 공통으로 사용할 axios를 내보낸다. export apiClient로 바로 내보내도 된다. api요청 도메인 같은 값은 환경변수로 관리하는 것이 좋다. create-react-app으로 생성한 프로젝트는 .env파일로 관리 가능하다. // /src/api/index.js import axios from 'axios'; const apiClient = axios.create({ baseURL: process.env.REACT_APP_BASE_URL; // 환경변수로 지정한 BASE_URL을 사용 }); // interceptor처리도 작성한다. //export apiClient; const { ..
React | custom hook (useAsync 훅 만들기) Custom Hook? 리액트가 제공하는 hooks를 이용해 커스텀 훅을 만들 수 있다 커스텀 훅은 로직을 재사용 할 수 있다 커스텀 훅의 이름은 리액트 내장 훅처럼 use로 시작하는 것이 좋다 A custom Hook is a JavaScript function whose name starts with use and that may call other Hooks. 출처: https://reactjs.org/docs/hooks-custom.html useAsync hook 많이들 만들어 사용하는 커스텀 훅 중에 하나인 useAsync 훅을 만들어본다 API 요청에 유용하게 사용된다! 일단 useReducer와 useEffect, useCallback을 import 한다. import { useReduce..
의존관계 주입 방법 네 가지 스프링을 기준으로 한다. 1. 필드 주입 필드에 바로 주입하는 방법 가장 흔히들 사용하는 방법 중 하나 코드가 간결함 @Autowired private MemberService memberService; 2. setter 주입 필드의 값을 변경하는 setter 메서드를 이용하는 방법 자바빈 프로퍼티 규약의 수정자 메서드(setter) 방식을 이용 수정자 메서드를 생성해야하고, public으로 열어두어야 함 private MemberService memberService; @Autowired public void setMemberService(MemberService memberService) { this.memberService = memberService; } 3. 생성자 주입* 클래스의 생성자를 통해..
Composite Key (복합 키) PRIMAR KEY가 두 컬럼에 지정되어 있는걸 보고 어..?해서 찾아봤다 Composite Key 복합 키(Composite Key)는 두 개 이상의 컬럼을 Key로 지정하는 것을 말한다. PK(Primary Key, 기본키)는 한 테이블에 한 개만 존재할 수 있다. 하지만 꼭 한 테이블에 한 컬럼만 기본키로 지정할 수 있는 것은 아니다. 아래와 같이 PRIMARY KEY를 두 컬럼에 지정하면 에러가 발생한다. mysql> create table test ( -> id bigint primary key, -> seq bigint primary key); ERROR 1068 (42000): Multiple primary key defined 하지만 PRIMARY KEY(column1, column2) 이..
객체지향 설계 원칙 5가지 (SOLID) SOLID? 로버트 마틴이 명명한 객체 지향 프로그랭 및 설계의 다섯 가지 기본 원칙을 마이클 페더스가 두문자어 기억술로 소개한 것 1. SRP(Single Responsibility Principle) - 단일 책임 원칙 한 클래스는 하나의 책임만 가져야 한다 (문맥과 상황에 따라 다름) 모든 클래스는 하나의 책임만 가지며, 클래스는 그 책임을 완전히 캡슐화해야 함 변경이 있을 때 파급 효과가 적어야 한다 클래스는 변경을 위한 단 하나의 이유만 가진다 2. OCP(Open-Closed Principle) - 개방-폐쇄 원칙 소프트웨어 요소(클래스, 모듈, 함수 등)는 확장에는 열려있어야 하고, 변경에 대해서는 닫혀 있어야 한다 변경없이 확장이 가능해야 한다 개방-폐쇄 원칙이 잘 적용되면, 기능을 추가하..
TypeScript | 타입 스크립트 겉핥기 TypeScript 타입스크립트는 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 언어 자바스크립트의 확장 자바스크립트와 달리 브라우저에서 실행하기 위해선 컴파일해주어야 함 타입 오류가 컴파일 시 발견됨 -> 에러의 사전 방지 마이크로소프트에서 개발하며 꾸준하게 업데이트 버전이 출시됨 자바스크립트의 새로운 표준이 빠르게 추가됨 타입 타입을 선언하는 방법은 변수 명 오른쪽에 콜론(:)과 함께 타입을 선언하며, 이 콜론을 타입 애노테이션(Type Annotation)이라 부른다. const height: number | string = 180; // number 혹은 string 타입으로 정의, 초기값은 180 height = '150'; // 문자열 저장 가능 타입스크립트의 타입은.. (자주 사..

티스토리툴바