근본없는 지식창고

[wanted-pre-onboarding] Assignment7

haaak — Sat, 27 Nov 2021 17:43:06 +0900

Github Repo

https://github.com/yhshin0/cardoc-subject

개요

타이어 API 설계 및 구현

기간

2021.11.22 - 2021.11.27

개발 환경

언어 : TypeScript
프레임워크 : NestJS
DB : SQLite3
라이브러리 : axios, passport, jwt, bcrypt, typeOrm, class-validator
배포 환경 : heroku

구현 사항

요구사항

RDB 사용
실행 방법 서술
ORM 사용
response status(200 OK: 성공, 400 Bad Request: 잘못된 파라미터, 401 Unauthorized: 인증 헤더 오류, 500 Internal Server Error: 기타 서버 에러) 반환
사용자 생성 API
- ID / Password로 사용자 생성 구현
- ID / Password로 로그인 구현
- 인증 토큰 발급
- 인증 토큰으로 인증된 사용자만 API 호출 가능
사용자가 소유한 타이어 정보 저장 API
- 자동차 차종 ID(trimID)를 사용하여 사용자가 소유한 자동차 정보 저장.
- 타이어 정보 저장. 타이어 정보는 자동차 정보 API(trimID) -> spec -> driving -> frontTire/rearTire 에 있음
- 한번에 최대 5명까지의 사용자에 대한 요청을 받을 수 있음. 즉, 사용자 정보와 trimID 5쌍을 요청데이터로 하여 API를 호출할 수 있음
  - 5명이 넘어가는 요청에 적당한 에러 처리
- {폭}/{편평비}R{휠 사이즈}과 같은 형식의 데이터일 경우만 DB에 항목별로 나누어 서로 다른 Column에 저장
  예: 205/75R18 -> 타이어 폭: 205, 편평비: 75, 휠 사이즈: 18
- 유효하지 않은 trimID 일 경우 에러 처리(유효하지 않은 trimID로 자동차 정보 API를 호출하면 {"code":-1000,"message":"No value present"} 라는 response를 받음)
사용자 소유 타이어 정보 조회 API
- 사용자 ID를 통해 저장한 타이어 정보를 조회할 수 있음
- 페이지네이션
  - page, pageSize, totalCount(response) 사용

DB 모델링

AuthModule에서 env 값 사용하기

AuthModule에서 JwtModule을 사용하려면 register를 통해 등록해야 하는데, 단순 register() 만으로는 ConfigModule이 읽는 .env 파일의 값을 사용할 수 없습니다.
따라서 registerAsync()를 사용하여 .env 파일의 값을 직접 넣어줘야 합니다.
이를 위해서는 AuthModule에서 ConfigModule을 import 하고, registerAsync() 에서도 import 하여 ConfigService를 사용할 수 있도록 의존성을 주입해야 합니다.

auth.module.ts

@Module({
  imports: [
    UsersModule,
    PassportModule,
    ConfigModule,
    JwtModule.registerAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: async (configService: ConfigService) => ({
        secret: configService.get('JWT_SECRET'),
        signOptions: { expiresIn: configService.get('JWT_EXPIRATION') },
      }),
    }),
  ],

참고: https://velog.io/@algo2000/pj01-11
https://docs.nestjs.kr/techniques/configuration

private method mocking

private method는 mocking한 클래스에서 바로 사용하기 어렵습니다. 즉, jest.spyOn(tiresService, 'getTireInfoFromAPI') 과 같이 코드를 작성할 수 없습니다.
따라서 이를 해결하기 위해 mocking 하려는 메소드가 있는 클래스의 prototype에서 private 메소드가 실행되는지 확인해야 합니다.

tires.service.spec.ts

      ...

      jest
        .spyOn(TiresService.prototype as any, 'getTireInfoFromAPI')
        .mockResolvedValue(validAPIResult);

      ...

참고: https://stackoverflow.com/questions/56044471/testing-private-functions-in-typescript-with-jest

createQueryBuilder mocking

typeOrm의 createQueryBuilder를 통해 DB에서 데이터를 가져오는 경우 메소드 체이닝이 되어 있기 때문에 mocking 역시 그에 맞게 코드를 작성해야 합니다.
테스트 코드에서 객체를 작성하고 체이닝 된 메소드가 호출될 때 해당 객체가 반환될 수 있도록 객체를 정의합니다.
그리고 마지막 체이닝 메소드에 원하는 결과를 반환하도록 작성한 뒤, mockImplementation() 메소드를 통해 해당 결과가 나올 수 있도록 구현합니다.

tires.service.spec.ts

const mockTiresRepository = () => ({
  save: jest.fn(),
  createQueryBuilder: jest.fn(),
});
...
    it('유저 아이디를 통해 타이어 정보 조회에 성공한다', async () => {
      ...

      const createQueryBuilder = {
        innerJoin: () => createQueryBuilder,
        where: () => createQueryBuilder,
        skip: () => createQueryBuilder,
        take: () => createQueryBuilder,
        getManyAndCount: () => [tireList, tireList.length],
      };

      tiresRepository.createQueryBuilder.mockImplementation(
        () => createQueryBuilder,
      );

      const result = await tiresService.findByUserId(userId, page, pageSize);
      expect(result).toMatchObject({
        totalCount: tireList.length,
        data: tireList,
      });
    });

회고

Fact(사실)

지난 프로젝트들과 달리 개인으로 진행하는 프로젝트였다.

Feeling(느낀점)

개인 프로젝트라 나만 알아보는 코드가 되지 않을까 걱정된다.

Finding(교훈)

최대한 알아보기 쉬운 코드를 작성하도록 해야겠다.

Future action(향후 계획)

일주일 후 다시 코드를 리뷰하여 리팩토링한다.

Feedback(피드백)

[wanted-pre-onboarding] Assignment6

haaak — Sun, 21 Nov 2021 18:02:41 +0900

Github Repo

https://github.com/wanted-wecode-subjects/deer-subject

개요

대여/반납 요금 계산 API 구현

기간

2021.11.18 - 2021.11.20

개발 환경

TypeScript
NestJS
MySQL

사용 라이브러리

typeorm
class-validator
class-transformer
moment-timezone
passport
jwt
bcrypt

구현 사항

요구사항

유저 API
요금 계산 API
- 지역별 기본 요금, 분당 요금 적용
- 고장으로 인한 1분 이내 반납시 요금 미청구
- 벌금 조건 적용
- 할인 적용

DB 모델링

MySQL spatial data

MySQL은 OpenGIS 클래스에 해당하는 공간 데이터 타입을 제공합니다.

타입	정의	예시
Point	공간에서 좌표 한 점을 표시	POINT (10 10)
LineString	공간에서 다수의 Point를 연결하는 선분을 표시	LINESTRING (10 10, 20 25, 15 40)
Polygon	공간에서 다수의 선분이 연결되어 닫힌 상태의 다각형을 표시	POLYGON ((10 10, 10 20, 20 20, 20 10, 10 10))
Multi-Point	공간에서 다수의 Point 집합	MULTIPOINT (10 10, 30 20, 30 10, 10, 20)
Multi-LineString	공간에서 다수의 LineString 집합	MULTILINESTRING ((10 10, 20 20), (20 15, 30 40))
Multi-Polygon	공간에서 다수의 Polygon 집합	MULTIPOLYGON ( (( 10 10, 15 10, 20 15, 20 25, 15 20, 10 10 )) , (( 40 25, 50 40, 35 35, 25 10, 40 25 )) )
GeomCollection	모든 공간 데이터들의 집합	GEOMETRYCOLLECTION ( POINT (10 10), LINESTRING (20 20, 30 40), POINT (30 15) )

출처: https://sparkdia.tistory.com/24
https://dev.mysql.com/doc/refman/8.0/en/spatial-type-overview.html

typeOrm에서의 spatial data

typeOrm에서 엔티티의 column에 spatial 타입을 적용하려면 다음과 같이 @Column() 데코레이터에 옵션을 부여합니다.
area.entity.ts

  ...
  @Column({ type: 'polygon', srid: 4326 })
  area_boundary: string;
  ...

MySQL spatial data 내장 함수

ST_AsText

공간 데이터 형태의 값을 WKT 형식으로 변환하고 문자열로 반환합니다.

SET @g = 'LineString(1 1,4 4,6 6)';

SELECT ST_AsText(ST_GeomFromText(@g));

결과

+--------------------------------+
| ST_AsText(ST_GeomFromText(@g)) |
+--------------------------------+
| LINESTRING(1 1,4 4,6 6)        |
+--------------------------------+

ST_Contains

첫번째 인자 g1이 두번째 인자 g2에 포함되면 1, 포함되지 않으면 0을 반환합니다.

예제1

SET @g1 = ST_GEOMFROMTEXT('POLYGON((175 150, 20 40, 50 60, 125 100, 175 150))');
SET @g2 = ST_GEOMFROMTEXT('POINT(174 149)');

SELECT ST_CONTAINS(@g1,@g2);

결과

+----------------------+
| ST_CONTAINS(@g1,@g2) |
+----------------------+
|                    1 |
+----------------------+

예제2

SET @g1 = ST_GEOMFROMTEXT('POLYGON((175 150, 20 40, 50 60, 125 100, 175 150))');
SET @g2 = ST_GEOMFROMTEXT('POINT(175 151)');

SELECT ST_CONTAINS(@g1,@g2);

결과

+----------------------+
| ST_CONTAINS(@g1,@g2) |
+----------------------+
|                    0 |
+----------------------+

ST_Distance

인자로 받은 두 공간 데이터의 거리를 반환합니다.
인자값이 유효하지 않으면 null을 반환합니다.

SELECT ST_Distance(POINT(1,2),POINT(2,2));

결과

+------------------------------------+
| ST_Distance(POINT(1,2),POINT(2,2)) |
+------------------------------------+
|                                  1 |
+------------------------------------+

ST_GeomFromText

WKT와 SRID를 사용하여 모든 유형의 공간 데이터 값을 구성합니다.

SET @g = ST_GEOMFROMTEXT('POINT(1 1)');
SELECT @g;

결과

+--------------------------------------------------+
|                    ST_GEOMFROMTEXT('POINT(1 1)') |
+--------------------------------------------------+
| 0x0000000001010000000000000000003F0000000000003F |
+--------------------------------------------------+

출처: https://kibua20.tistory.com/189
https://mariadb.com/kb/en/st_astext/
https://mariadb.com/kb/en/st-contains/
https://mariadb.com/kb/en/st_distance/
https://mariadb.com/kb/en/st_geomfromtext/

bcrypt mocking

bcrypt를 직접 import 하여 jest.spyOn으로 bcrypt의 함수를 mocking 한 뒤, 테스트에 사용할 수 있습니다.

user.service.spec.ts

...
import * as bcrypt from 'bcrypt';
...
      jest.spyOn(bcrypt, 'compare').mockResolvedValue(true);
      ...

참고: https://stackoverflow.com/questions/62646538/jest-how-to-test-a-function-within-a-method

이슈

MySQL Version:AsText() is deprecated as of MySQL 5.7.6

ERROR [ExceptionsHandler] ER_SP_DOES_NOT_EXIST: FUNCTION deer.AsText does not exist
QueryFailedError: ER_SP_DOES_NOT_EXIST: FUNCTION deer.AsText does not exist
    at QueryFailedError.TypeORMError [as constructor] (/Users/hak/code/deer-subject/src/error/TypeORMError.ts:7:9)

서버 실행시 상기 에러가 발생하여 찾아본 결과 AsText() 함수가 deprecate 되어 발생한 에러였습니다.
이를 해결하기 위해 TypeOrmModule 설정에서 legacySpatialSupport: false 를 추가하여 해결하였습니다.

app.module.ts

    ...
    TypeOrmModule.forRoot({
      type: 'mysql',
      ...
      legacySpatialSupport: false,
    }),
    ...

참고: https://github.com/mysqljs/mysql/issues/2127

회고

Fact(사실)

저번 프로젝트에서 Heroku의 sqlite 데이터가 사라지는 이슈가 있었다. 이는 dyno가 일시적인 파일시스템을 사용하므로 잠자기 상태에 들어가면 파일들이 삭제되는 현상이다.
오픈 API에 요청을 보낼 때 응답하지 않는 경우 서버는 이를 계속 기다릴 수 있으므로 timeout을 걸어놔야 한다.

Feeling(느낀점)

dyno의 파일시스템에 알지 못한 상태로 데이터가 사라지는 현상이 발생하여 당황하였다.
시스템 구축 당시 무한으로 대기하는 경우에 대해 고려하지 못한 것이 아쉬웠다.

Finding(교훈)

서버를 띄우는 환경에 대해 정확히 파악한 후 이에 맞는 환경을 구축해야겠다.
다양한 상황에 대해 대처할 수 있도록 고려하여 시스템을 구축해야겠다.

Future action(향후 계획)

Heroku에 서버를 띄울 경우 sqlite 대신 다른 DB를 사용
Heroku에 sqlite로 서버를 띄울 경우 서버가 잠들지 않도록 구현(예: cron, 외부 서비스(https://kaffeine.herokuapp.com/)를 사용)
axios 사용시 요청에 대한 timeout을 설정

Feedback(피드백)

[wanted-pre-onboarding] Assignment5

haaak — Wed, 17 Nov 2021 12:30:00 +0900

Github Repo

https://github.com/wanted-wecode-subjects/humanscape-subject

개요

임상실험 데이터 수집 API 구현

기간

2021.11.15 - 2021.11.17

개발 환경

TypeScript
NestJS
Sqlite3

사용 라이브러리

typeorm
class-validator
class-transformer
moment-timezone
date-fns
xml2json-light
schedule
axios

구현 사항

요구사항

임상정보 수집 batch task
특정 임상정보 읽기
최근 일주일내에 업데이트 된 임상정보 리스트 조회
- pagination

DB 모델링

임상정보 리스트 조회 API

https://pocky-humanscape-subject.herokuapp.com/clinical

axios

nodejs에는 fetch가 없습니다.
따라서 이에 대한 대책으로 node-fetch 또는 axios 패키지를 사용합니다.
nestjs에서는 @nestjs/axios를 제공합니다.
해당 패키지의 HttpModule을 사용하려는 모듈에 import 하여 HttpService를 사용할 수 있습니다.

clinical.module.ts

@Module({
  imports: [
    TypeOrmModule.forFeature([ClinicalRepository]),
    HttpModule,
    StepModule,
  ],
  controllers: [ClinicalController],
  providers: [ClinicalService],
})
export class ClinicalModule {}

clinical.service.ts

export class ClinicalService {
  constructor(
    @InjectRepository(ClinicalRepository)
    private readonly clinicalRepository: ClinicalRepository,
    private httpService: HttpService,
    private stepService: StepService,
  ) {}

get

HttpService.get() 메소드를 사용하여 get 요청을 할 수 있습니다.

clinical.service.ts

  getAPIData(pageNo, start = 0) {
    let url =
      'http://apis.data.go.kr/1470000/MdcinClincTestInfoService/getMdcinClincTestInfoList';
    url += '?' + `ServiceKey=${process.env.SERVICE_KEY}`;
    url += '&' + `numOfRows=${CLINICAL_CONSTANT.NUM_OF_ROWS}`;
    url += '&' + `pageNo=${pageNo}`;

    return this.httpService.get(url);

그러나 axios의 get 메소드는 rxjs를 사용하여 이벤트 발생에 따른 동작을 수행합니다. 그래서 Observable 객체에 래핑된 AxiosResponse를 반환합니다.
반환받은 값을 통해 이후 동작을 정의하는 데에는 다음과 같은 방법이 있습니다.

반환된 값을 받아서 subscirbe() 메소드를 사용하여 이후 기능을 구현

const observer = this.getAPIData(pageNo);
observer.subscribe({
  next(resposne) {
    ... // response 가공 후 DB에 저장
  },
  error(err) {
    ... // error 관련 처리
  },
  complete() {
    ... // 완료 후 처리
  }
});

get()의 반환값에 pipe() 메소드를 사용하여 함수형 프로그래밍으로 이후 기능을 구현

  ...
  const observer = this.httpService.get(url).pipe(map(axiosResponse) => axiosResponse);
  const doSomething = () => {
    const jsonResponse = xml2json.xml2json(axiosResponse.data);
    const items = jsonResponse.response.body.items.item; // 임상 실험 데이터 배열

    if (!items) {
      return;
    }

    return items;
  }
  // api의 임상정보 데이터 배열(items)이 res에 담김
  const res = await lastValueFrom(observer).then(doSomething);
  ... // DB에 clinical 저장

get()의 반환값에 toPromise() 메소드를 사용하여 promise 객체로 바꾼뒤, 이후 기능을 구현

  async getAPIData(pageNo, start = 0): Promise<Clinical[]> {
    let url =
      'http://apis.data.go.kr/1470000/MdcinClincTestInfoService/getMdcinClincTestInfoList';
    url += '?' + `ServiceKey=${process.env.SERVICE_KEY}`;
    url += '&' + `numOfRows=${CLINICAL_CONSTANT.NUM_OF_ROWS}`;
    url += '&' + `pageNo=${pageNo}`;

    return this.httpService
      .get(url)
      .toPromise()
      .then(async (axiosResponse) => {
        const jsonResponse = xml2json.xml2json(axiosResponse.data);
        const items = jsonResponse.response.body.items.item; // 임상 실험 데이터 배열

        if (!items) {
          return;
        }

        // DB에 insert
        for (let i = start; i < items.length; i++) {
          await this.createClinical(items[i]);
        }

        return items;
      });
  }

이외에도 다양한 방법이 있겠지만, 과제 진행 당시에는 조급한 마음에 다른 선택지가 보이지 않고 세번째 방법을 선택하여 코드를 작성하였습니다.
(참고로 세번째 방법의 toPromise()는 deprecate 될 예정입니다)

참고: https://min9nim.vercel.app/2020-04-24-rxjs/
https://ichi.pro/ko/rxjs-7ui-saeloun-gineung-177144942872256
https://docs.nestjs.kr/techniques/http-module

xml2json-light

참고한 openAPI 데이터는 반환형이 XML로 고정되어 있기 때문에 이를 json으로 바꿀 필요가 있었습니다.
때문에 이와 관련된 라이브러리인 xml2json-light를 사용하였습니다.
xml2json-light의 xml2json() 함수를 사용하면 XML 문자열이 JSON 객체로 변환됩니다.

import * as xml2json from 'xml2json-light';

const xml = `<APPLY_ENTP_NAME>한국아스트라제네카</APPLY_ENTP_NAME>
<APPROVAL_TIME>2012-03-22 00:00:00</APPROVAL_TIME>
<LAB_NAME>학교법인 고려중앙학원 고려대학교의과대학부속병원:서울대학교병원:분당서울대학교병원:연세대학교의과대학 강남세브란스병원:전북대학교병원:연세대학교의과대학 강남세브란스병원</LAB_NAME>
<GOODS_NAME>AZD8931</GOODS_NAME>
<CLINIC_EXAM_TITLE>HER2 상태에 따른 트라스투주맙 치료에 적합하지 않고, 일차요법에서 진행 된 전이성, 위암 또는 위-식도 접합부 암환자에서 파클리탁셀 단독 투여 대비 파클리탁셀과 병용한 AZD8931의 유효성, 안전성 및 약물동력학 평가를 위한 제 2a상 다기관 무작위배정 이중맹검 위약대조 시험 (SAGE)</CLINIC_EXAM_TITLE>
<CLINIC_STEP_NAME>2a상</CLINIC_STEP_NAME>`;
const json = xml2json.xml2json(xml); 
console.log(json);

console

{
  APPLY_ENTP_NAME: ‘한국아스트라제네카’,
  APPROVAL_TIME: ‘2012-03-22 00:00:00’,
  LAB_NAME: ‘학교법인 고려중앙학원 고려대학교의과대학부속병원:서울대학교병원:분당서울대학교병원:연세대학교의과대학 강남세브란스병원:전북대학교병원:연세대학교의과대학 강남세브란스병원’,
  GOODS_NAME: ‘AZD8931’,
  CLINIC_EXAM_TITLE: ‘HER2 상태에 따른 트라스투주맙 치료에 적합하지 않고, 일차요법에서 진행 된 전이성, 위암 또는 위-식도 접합부 암환자에서 파클리탁셀 단독 투여 대비 파클리탁셀과 병용한 AZD8931의 유효성, 안전성 및 약물동력학 평가를 위한 제 2a상 다기관 무작위배정 이중맹검 위약대조 시험 (SAGE)’,
  CLINIC_STEP_NAME: ‘2a상’
}

batch

nestjs에서는 Node.js node-cron 패키지와 통합되는 @nestjs/schedule 패키지를 제공합니다.

@cron

cron은 linux의 cron 처럼 특정 시간마다 정의한 메소드를 호출할 수 있도록 도와주는 데코레이터입니다.
데코레이터에 전달되는 값은 초 분 시 일 월 요일 순이며, *을 입력하면 매번 실행, 범위를 지정하고 싶다면(예: 1분~30분마다 실행) 1-30 과 같이 작성할 수 있습니다. 또한 /를 사용하여 주기적으로 실행할 수 있습니다.

예시

* * * * * *: 매 초 실행
45 * * * * *: 매분 45초에 실행
0 10 * * * *: 매시간 10분 0초에 실행
0 */30 9-17 * * *: 오전 9시부터 오후 5시까지 30분마다 실행
0 30 11 * * 1-5: 월요일(1)부터 금요일(5) 오전 11시 30분에 실행

이번 프로젝트에서는 월~토요일 자정 정각에 batch를 돌릴 수 있도록 cron을 설정하였습니다.

clinical.service.ts

  @Cron('0 0 0 * * 1-6')
  async batchData(): Promise<void> {
    ...

참고: https://docs.nestjs.kr/techniques/task-scheduling

회고

Fact(사실)

xml2json이 일부 피씨에서 설치되지 않는 이슈가 있었다.

Feeling(느낀점)

맥북에어 m1에서도 작동하고 윈도우에서도 작동하는데 맥미니 m1과 일부 윈도우에서 설치가 되지 않는 것이 의아했다.

Finding(교훈)

npm 패키지도 모든 피씨에서 동일하게 작동하지 않는다는 것을 깨달았다.

Future action(향후 계획)

xml2json이 아닌 xml2json-light로 패키지를 바꿈

Feedback(피드백)

[wanted-pre-onboarding] Assignment4

haaak — Sat, 13 Nov 2021 15:18:31 +0900

Github Repo

https://github.com/wanted-wecode-subjects/eight-percent-subject

개요

회원, 계좌, 입/출금 API 만들기

기간

2021.11.11 - 2021.11.13

개발 환경

TypeScript
NestJS
Sqlite3

사용 라이브러리

bcrypt
passport
typeorm
class-validator
class-transformer
passport-jwt
moment

구현 사항

요구사항

sqlite 사용
거래내역 조회
- 계좌의 소유주만 요청 가능
- 거래일시 필터링
- 출금/입금 필터링
- 페이지네이션
- 거래일시, 거래금액, 잔액, 거래종류(출금/입금), 적요
입금
- 계좌의 소유주만 요청 가능
출금
- 계좌의 소유주만 요청 가능
- 계좌 잔액 내에서만 출금 가능
- 잔액을 넘긴 출금 요청에 적절한 에러처리
기타
- 유닛 테스트 구현
- functional test 구현
- 거래내역이 1억건 넘어갈 때를 고려
  - 1억건이 넘는 조회에 대한 설계 작성

DB 모델링

typeOrm foreign key가 안 들어올 때

@GetUser 데코레이터로 user에 대한 정보를 받아서 account 서비스에 넘긴 뒤 account를 생성하였는데 실제 테이블에 들어가서 확인해보니 NULL값으로 되어 있었습니다.
즉, foreign key가 제대로 입력되지 않았습니다.

그래서 jwtStrategy로 가서 user에 대한 정보를 모두 리턴하였습니다.

jwt.strategy.ts

  async validate(payload: any) {
    const { user_id, loginedAt } = payload;
    const user = await this.usersService.findOneByUserId(user_id);

    const tokenLoginedAt = new Date(loginedAt).getTime();
    const userLoginedAt = new Date(user.loginedAt).getTime();

    if (tokenLoginedAt !== userLoginedAt) {
      throw new UnauthorizedException('올바르지 않은 토큰입니다');
    }
    return { ...user };
  }

이후 테이블로 가서 확인해보니 해당 데이터가 입력되었습니다.
하지만 쓸데없는 정보나 보안상 이슈가 될 수 있는 비밀번호 같은 데이터가 들어가 논란이 생길 수 있었습니다.
그래서 기존에 줘야하던 정보(user_id, loginedAt) 이외에 user의 id 값을 넘겨보았습니다.

  async validate(payload: any) {
    const { user_id, loginedAt } = payload;
    const user = await this.usersService.findOneByUserId(user_id);

    const tokenLoginedAt = new Date(loginedAt).getTime();
    const userLoginedAt = new Date(user.loginedAt).getTime();

    if (tokenLoginedAt !== userLoginedAt) {
      throw new UnauthorizedException('올바르지 않은 토큰입니다');
    }
    return { id: user.id, user_id, loginedAt };
  }

이후 account를 생성한 뒤 테이블을 확인한 결과, 해당 row에 foreign key가 입력이 된 것을 확인할 수 있었습니다.

회고

Fact(사실)

저번 프로젝트에서 비즈니스 로직을 컨트롤러 단에서 처리하였다.

Feeling(느낀점)

해당 기능과 관련있는 커스텀 repository를 생성하지 않아 헷갈려서 비즈니스 로직을 컨트롤러 단에서 처리한 점이 아쉬웠다.

Finding(교훈)

커스텀 repository를 정의하여 위와 같은 이슈가 발생하지 않도록 해야 겠다.

Future action(향후 계획)

비즈니스 로직은 서비스 단에서 처리한다.
트랜잭션을 사용하는 기능은 서비스 단에서 처리한다.
도메인별 커스텀 repository를 정의한다.

Feedback(피드백)

컨트롤러에서는 외부 요청과 응답에 대한 부분을 담당한다.
서비스에서는 비즈니스 로직을 처리한다.
repository에서는 DB를 통해 데이터를 가져오거나 처리한다.

[wanted-pre-onboarding] Assignment3

haaak — Wed, 10 Nov 2021 13:44:28 +0900

Github Repo

https://github.com/wanted-wecode-subjects/redbrick-subject

개요

회원, 프로젝트, 게임 API 만들기

기간

2021.11.08 - 2021.11.10

개발 환경

TypeScript
NestJS
Sqlite3

사용 라이브러리

bcrypt
passport
typeorm
class-validator
passport-jwt
cache-manager
schedule

구현 사항

요구사항

회원 기능
게임
- 게임 또는 사용자로 게임 검색
- 조회수, 좋아요 기능 구현
프로젝트(제작 중인 게임을 의미)
- 프로젝트의 실시간 반영
  (예를 들어, 프로젝트 수정 중 비정상적으로 사이트가 종료되어도 작업 내용이 보존되어야 함)
- 프로젝트 당 퍼블리싱 할 수 있는 게임은 하나
- 퍼블리싱 이후 프로젝트를 수정하여 재출시하면 기존에 퍼블리싱된 게임도 수정됨

DB 모델링

delete vs softDelete

delete와 softDelete는 TypeORM의 메소드이며, 데이터를 삭제할 때 사용합니다.
다만, delete는 테이블의 데이터를 실제로 삭제하는 반면, softDelete는 엔티티에 @DeleteDateColumn() 데코레이터가 적용된 컬럼의 값만 수정하고 실제로 데이터를 삭제하지 않습니다.

softDelete() 코드
projects.service.ts

async delete(id: number): Promise<Project> {
  const project = await this.findOne(id);
  await this.projectRepository.softDelete({ id });
  return project;
}

softDelete()를 적용한 테이블
데이터가 DB에서 지워지지 않고 deletedAt 컬럼이 갱신된 것을 확인할 수 있습니다.

typeOrm relations

테이블 간의 1:1, 1:N, N:M 관계에 대응하기 위해, typeOrm에서는 @OneToOne, @OneToMany, @ManyToMany 데코레이터를 통해 relations 기능을 제공하고 있습니다.

@OneToOne

1:1 관계에 있는 테이블 간의 매핑에 사용되며, 이번 프로젝트에서는 프로젝트와 게임에 대해 1:1 매핑을 시도하였습니다.
이는 프로젝트마다 하나의 게임만 퍼블리싱 할 수 있기 때문입니다.

단방향 @OneToOne을 적용하기 위해 game entity에 project를 매핑합니다.
또한 게임을 생성할 때 Project 객체를 game에 넣어 생성해야 합니다.

game.entity.ts

  @OneToOne(() => Project, { eager: true })
  @JoinColumn()
  project: Project;

참고: https://typeorm.io/#/one-to-one-relations/

@OneToMany, @ManyToOne

1:N, N:1의 관계를 지정하기 위해 @OneToMany와 @ManyToOne을 사용할 수 있습니다. 이번 프로젝트에서는 하나의 유저가 다수의 프로젝트 또는 게임을 소유할 수 있기 때문에 user-project, user-game의 관계에 사용하였습니다.

user.entity.ts

  @OneToMany((_type) => Game, (game) => game.user, {
    eager: false,
    cascade: true,
  })
  games: Game[];

game.entity.ts

  @ManyToOne((_type) => User, (user) => user.games, {
    onDelete: 'CASCADE',
  })
  user: User;

참고: https://typeorm.io/#/many-to-one-one-to-many-relations/

@ManyToMany

@ManyToMany를 사용하면 두 테이블을 조인하여 각 PK를 담은 형태의 테이블을 생성하여 N:M 관계를 명시할 수 있습니다.
이번 프로젝트에서는 게임의 좋아요 기능에 대해 유저가 좋아요를 클릭하였는지 여부를 나타내기 위해 @ManyToMany 기능을 사용하였습니다.

game.entity.ts

  @ManyToMany((_type) => User, (users) => users.likes, { eager: true })
  likes: User[];

user.entity.ts

  @ManyToMany((_type) => Game, (game) => game.likes, {
    cascade: true,
  })
  @JoinTable({ name: 'users_likes' })
  likes: Game[];

참고: https://typeorm.io/#/many-to-many-relations/

typeOrm or 검색

where 절의 or 검색을 사용하기 위해 다음과 같이 find()의 옵션을 줄 수 있습니다.

db.getRepository(MyModel).find({
  where:[
      {name:"john"},
      {lastName: "doe"}
  ]
})

출처: https://stackoverflow.com/questions/53407236/typeorm-or-operator

또는 queryBuilder의 orWhere() 메소드를 사용하여 or 검색을 수행할 수 있습니다. 이번 프로젝트에서는 게임을 검색할 때 유저와 게임 테이블을 조인하고 검색할 수 있도록 queryBuilder의 orWhere()를 사용하였습니다.

game.service.ts

    const data = await this.gameRepository
      .createQueryBuilder('game')
      .innerJoin('game.user', 'user')
      .where(`game.title like :keyword`, { keyword: `%${keyword}%` })
      .orWhere(`user.nickname like :keyword`, { keyword: `%${keyword}%` })
      .limit(limit)
      .offset(offset)
      .getMany();

forwardRef()

이번 프로젝트에서 project와 game이 컨트롤러에서 서로의 서비스 객체를 사용하는 코드가 있어 모듈에서 export와 import를 하던 중, 순환참조 현상이 발생하였습니다.
이를 해결하기 위해 forwardRef() 함수를 사용하였습니다.
forwardRef()는 '@nestjs/common'에 존재하며, 대상이 되는 두 모듈과 이를 사용하는 클래스의 생성자에서 forwardRef()를 적용해야 합니다.

game.module.ts

@Module({
  imports: [
    TypeOrmModule.forFeature([GameRepository]),
    forwardRef(() => ProjectsModule),
  ],
  controllers: [GameController],
  providers: [GameService],
  exports: [GameService],
})
export class GameModule {}

projects.module.ts

@Module({
  imports: [
    TypeOrmModule.forFeature([Project]),
    forwardRef(() => GameModule),
    MemoryCacheModule,
  ],
  controllers: [ProjectsController],
  providers: [ProjectsService],
  exports: [ProjectsService],
})
export class ProjectsModule {}

game.controller.ts

export class GameController {
  constructor(
    private gameService: GameService,
    @Inject(forwardRef(() => ProjectsService))
    private projectsService: ProjectsService,
  ) {}

projects.controller.ts

export class ProjectsController {
  constructor(
    private readonly projectsService: ProjectsService,
    @Inject(forwardRef(() => GameService))
    private readonly gameService: GameService,
    private connection: Connection,
  ) {}

typeOrm transaction

하나의 기능 또는 작업 단위에서 DB의 데이터에 영향을 줄 수 있는 쿼리(insert, update, delete)가 두 번 이상 나오는 경우, 쿼리에 문제가 발생하면 이전의 쿼리도 롤백해야 하는 경우가 있습니다.
이를 위해 트랜잭션을 적용하여 작업이 성공할 경우 commit, 실패할 경우 rollback을 하는데 typeOrm에서는 이를 위해 queryRunner를 지원합니다.

connection

queryRunner는 connection에서 가져올 수 있습니다.
typeOrm의 DB connection을 전역으로 사용하려면 app.module에서 다음과 같은 코드로 적용합니다.

app.module.ts

export class AppModule {
  constructor(private connection: Connection) {}
}

transaction 적용

transaction을 적용하기 위해 먼저 대상이 되는 클래스에 connection을 가져옵니다.

projects.controller.ts

export class ProjectsController {
  constructor(
    ...
    private connection: Connection,
  ) {}

이후 적용할 메소드에서 connection.createQueryRunner() 코드를 사용하여 queryRunner를 생성합니다.
그리고 queryRunner.connect()를 통해 연결한 다음, queryRunner.startTransaction()으로 트랜잭션을 시작합니다.

projects.controller.ts

    const queryRunner = this.connection.createQueryRunner();

    await queryRunner.connect();
    await queryRunner.startTransaction();

트랜잭션이 시작된 후 기능에 필요한 여러 쿼리(insert, update, delete)를 각각 수행합니다. 이때 exception이 발생하면 catch 하여 롤백(queryRunner.rollbackTransaction()) 할 수 있도록 try-catch 문을 사용합니다.
모든 작업이 정상적으로 수행되었다면 커밋(queryRunner.commitTransaction())을 수행합니다.
이후 finally에서 queryRunner.release() 를 통해 queryRunner의 연결을 해제합니다.

projects.controller.ts

    try {
      ...
      await queryRunner.commitTransaction();
      return { message: 'publish complete' };
    } catch (error) {
      await queryRunner.rollbackTransaction();
      return { message: 'publish fail' };
    } finally {
      await queryRunner.release();
    }

transaction mock

transaction에 필요한 queryRunner에 대한 mock을 생성하기 위해 다음과 같은 코드로 mocking을 수행할 수 있습니다.

projects.controller.spec.ts

  let connection: Connection;

  const qr = {
    manager: {},
  } as QueryRunner;

  class ConnectionMock {
    createQueryRunner(mode?: 'master' | 'slave'): QueryRunner {
      return qr;
    }
  }

  beforeEach(async () => {
    Object.assign(qr.manager, {
      save: jest.fn(),
    });
    qr.connect = jest.fn();
    qr.release = jest.fn();
    qr.startTransaction = jest.fn();
    qr.commitTransaction = jest.fn();
    qr.rollbackTransaction = jest.fn();

    const module: TestingModule = await Test.createTestingModule({
      controllers: [ProjectsController],
      providers: [
        ProjectsService,
        GameService,
        { provide: Connection, useClass: ConnectionMock },
      ],
    }).compile();

출처: https://stackoverflow.com/questions/63664322/how-to-use-jest-spyon-with-nestjs-transaction-code-on-unit-test

회고

Fact(사실)

PR 컨벤션을 안 지키는 경우가 종종 있다.
github의 이슈에 대해 open/close가 제때 되지 않는다.

Feeling(느낀점)

위의 이슈에 대해 말하기가 불편하다.

Finding(교훈)

컨벤션이나 이슈 처리 같은 것은 팀에서 정한 룰이므로 지켜야 하는게 맞고, 이에 대해 팀원에게 말해줘야 하는 것이 맞다고 생각한다.

Future action(향후 계획)

PR 컨벤션 정도는 github에 PR 템플릿을 설정하여 양식에 맞춰 작성할 수 있도록 한다.

Feedback(피드백)

[wanted-pre-onboarding] Assignment2

haaak — Sat, 6 Nov 2021 13:12:42 +0900

Github Repo

https://github.com/wanted-wecode-subjects/freshcode-subject

개요

회원, 상품 API 만들기

기간

2021.11.04 - 2021.11.06

개발 환경

TypeScript
NestJS
Sqlite3

사용 라이브러리

bcrypt
passport
typeorm
class-validator

구현 사항

요구사항

회원가입
로그인 JWT 사용
Request시 Header에 Authorization 체크
- 토큰 없으면 에러 처리
상품 CRUD
- 상품 추가/수정/삭제는 관리자(admin 권한)만 가능
- 사용자(user 권한)는 상품 조회만 가능
- 상품 하나 조회
- 상품 전체 조회
  - 페이지네이션(페이지당 5개)
- 에러 핸들링

ERD

ERD(Entity-Relationship Modelling)는 데이터 모델링 분야에서 사용하는 용어로 개체-관계 모델이라 하며,구조화된 데이터를 도식화 한 표현입니다.

ERD cloud

ERD cloud는 DB 모델링 도구로 ERD 작성을 도와줍니다.
이번 프로젝트에서 팀원의 소개로 처음 사용해보았습니다.

커밋 메시지 컨벤션

커밋 메시지에 대한 형식을 두어 깔끔하게 작성하거나 다른 사람들이 읽기 쉽게끔 컨벤션을 둘 수 있습니다.
팀원과 상의하여 컨벤션을 정의할 수 있으며, 프로젝트 초기에 이를 작성하는 것이 좋습니다.
보통 일반적으로 첫째 줄에 제목을 적고, 둘째 줄부터 본문으로 취급하여 커밋에 대한 내용을 작성합니다.

예시

title convention
1. feat - 신규 기능 추가
2. fix - 버그 수정
3. docs - 문서 수정
4. style - 코딩 스타일 관련(로직 변경x)
5. refactor - 코드 리팩터링
6. test - 테스트 코드 관련
7. ci - CI/CD 관련
8. chore - 기타
rules
- 제목 끝에 마침표를 적지 않는다.
- 제목은 명령문으로 사용한다.
- 제목은 과거형을 사용하지 않는다.
- '어떻게' 보다는 '무엇'과 '왜'를 설명한다.
- 제목은 50자 이내로 작성한다.
- 본문의 각 줄은 72자 이내로 작성한다.
- 마지막 줄에는 이슈 id를 작성한다.
  - Resolves: 해당 이슈 id
  - See also: 관련된 이슈 id

클래스 확장

너무나 당연한 얘기지만 상속을 통해 클래스를 확장할 수 있습니다.
이번 프로젝트에서는 CoreEntity 라는 클래스를 두어 엔티티가 공통적으로 가지고 있는 createdAt, updatedAt, deletedAt 같은 컬럼을 갖도록 하고, 다른 엔티티 클래스에서 이를 상속하여 사용할 수 있도록 처리하였습니다.

409 Conflict

ID 중복에 대한 상태코드를 찾던 중 다음 글(https://deveric.tistory.com/62) 찾게 되었습니다.
해당 글에서는 ID 중복에 대해 상태코드로 423, 403, 409 중 하나를 반환하려 하였으며, 그 중 409를 ID 중복에 대한 상태코드로 반환하게 되었습니다.
위의 각 상태코드에 대한 설명은 다음과 같습니다.

423(Locked): 메소드의 잠금을 의미
403(Forbidden): 인가(authorization) 실패 상태 코드
409(Conflict): 리소스와 충돌이 발생하여 사용자가 이를 반영할 수 있도록 유도

이로 미루어 볼 때, 423은 가입 이후 해당 리소스(ID)에 대한 잠금과는 무관하여 제외되어야 하고, 403은 ID 중복보다는 데이터 유효성이나 인가 실패에 사용하므로 제외되어야 합니다. 마지막으로 409는 리소스에 대한 충돌이므로 ID라는 PK 자원을 점유한 것에 대한 충돌이기 때문에 적합하다고 볼 수 있습니다.

@nestjs/config

@nestjs/config를 사용하여 환경변수를 가져올 수 있습니다.
외부에서 정의된 환경변수는 전역으로 선언된 process.env를 통해 확인할 수 있습니다. 또한 .env 파일에 정의된 key-value 값을 가져와서 사용할 수도 있습니다. .env 파일 안의 데이터 형태는 key=value 형태로 정의되어야 합니다.
이를 위해선 @nestjs/config 패키지를 설치하고, AppModule에서 ConfigModule을 import 합니다.

app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [ConfigModule.forRoot()],
})
export class AppModule {}

envFilePath

ConfigModule에 envFilePath를 두어 .env 파일의 경로를 직접 정의할 수 있습니다.

ConfigModule.forRoot({
  envFilePath: ['.env.development.local', '.env.development'],
});

custom configuration files

custom configuration file은 config 객체를 반환하는 팩토리 함수를 내보냅니다.
환경에 따라 적절한 변수 설정이 필요할 때 사용할 수 있습니다.

예시

config/configuration.ts

export default () => ({
  port: parseInt(process.env.PORT, 10) || 3000,
  database: {
    host: process.env.DATABASE_HOST,
    port: parseInt(process.env.DATABASE_PORT, 10) || 5432
  }
});

app.module.ts

import configuration from './config/configuration';

@Module({
  imports: [
    ConfigModule.forRoot({
      load: [configuration],
    }),
  ],
})
export class AppModule {}

출처: https://docs.nestjs.kr/techniques/configuration

env에서 가져온 값을 JwtModule에서 사용하기

일반적인 방법으로 env에서 값을 가져와 JwtModule의 secret으로 설정하면 에러가 발생합니다.

@Module({
    imports: [
       JwtModule.register({
          secretOrPrivateKey: process.env.SECRET
       })
    ]
})

이는 JwtModule이 인스턴스화 될 때 아직 env에서 해당 값을 가져오지 못해 발생하는 이슈이며, 이를 위해 JwtModule의 registerAsync를 사용하여 해결할 수 있습니다.

JwtModule.registerAsync({
    imports: [ConfigModule],
    useFactory: async (configService: ConfigService) => ({
      secretOrPrivateKey: configService.jwtSecret,
    }),
    inject: [ConfigService],
}),

출처: https://stackoverflow.com/questions/55673424/nestjs-unable-to-read-env-variables-in-module-files-but-able-in-service-files

bcrypt mock

테스트 코드에서 bcrypt 함수를 사용하는 경우가 있었습니다. 그러나 해당 함수에 대한 mock이 없어 테스트에 실패하였습니다.
이를 해결하기 위해 아래와 같이 코드를 작성하면 bcrypt.compare에 대한 mock을 생성할 수 있습니다.

const bcryptCompare = jest.fn().mockResolvedValue(true);
(bcrypt.compare as jest.Mock) = bcryptCompare;

출처: const bcryptCompare = jest.fn().mockResolvedValue(true);
(bcrypt.compare as jest.Mock) = bcryptCompare;

role guard

Role에 대한 데코레이터를 생성하여 보호하고자 하는 메소드에 데코레이터를 적용하였으나, user가 빈 값으로 출력되는 등의 정상적으로 동작하지 않는 이슈가 있었습니다.
이는 @UseGuards(JwtAuthGuard, RoleGuard) 같이 가드를 사용하지 않아서 발생한 이슈이며, 해당 데코레이터를 적용한 결과 context.switchToHttp().getRequest()의 user 값을 잘 가져오는 것을 확인하였습니다.

@UseGuards(JwtAuthGuard, RolesGuard)
@Role(UserRole.admin)
...

@Injectable()
export class RolesGuard implements CanActivate {
  constructor(private reflector: Reflector) {}

  canActivate(context: ExecutionContext): boolean {
    const requiredRoles = this.reflector.getAllAndOverride<Role[]>(ROLES_KEY, [
      context.getHandler(),
      context.getClass(),
    ]);
    if (!requiredRoles) {
      return true;
    }
    const { user } = context.switchToHttp().getRequest();
    return requiredRoles.some((role) => user.roles?.includes(role));
  }
}

출처: https://docs.nestjs.kr/security/authorization

회고

이번 회고는 5F(Fact, Feeling, Feedback, Finding, Future action)에 의거하여 작성해보았습니다.
(출처: https://codechasseur.tistory.com/102)

Fact

JwtAuthGuard를 구현하였으나 필요한 코드에서 적용되지 않음
RoleGuard 데코레이터 적용 실패로 인해 데코레이터를 쓰지 않는 방법으로 구현

Feeling

기능 구현 이후에 팀원들에게 제대로 전파되지 않았고, 문서화도 제대로 되지 않아 이러한 상황이 발생하였기에 많이 아쉬웠다.
비효율적인 방법으로 기능을 구현하여 아쉬웠다. 그나마 방법을 알게 되어 다음에는 적용할 수 있을 것이기에 다행이라고 생각한다.

Finding

기능 구현을 할 때마다 미팅을 주최하여 팀원들에게 전파하기에는 시간이 낭비되고 비효율적인 방법으로 보인다. 앞서 말한 것과 같이 문서화를 잘해서 구현한 기능을 잘 사용하도록 유도하는 것이 중요하다고 생각한다.
검색 능력이 중요하다고 생각한다. 키워드를 잘 조합해서 원하는 데이터를 찾을 수 있도록 해야겠다.

Future action

PR을 올릴 때 문서화를 자세히 한다.

[wanted-pre-onboarding] Assignment1

haaak — Wed, 3 Nov 2021 16:22:59 +0900

Github Repo

https://github.com/wanted-wecode-subjects/aimmo-subject-teamB

개요

회원, 게시글, 댓글 API 만들기

개발 기간

2021.11.01 - 2011.11.03

개발 환경

TypeScript
NestJS
MongoDB

사용 라이브러리

bcrypt
passport
mongoose
class-validator

구현 사항

회원 로그인 구현
게시글 CRUD
게시글 pagination
게시글 조회수 카운트
게시글 검색
게시글 카테고리
댓글 CRUD
대댓글(depth: 1)
대댓글 pagination

대댓글

MongoDB self ref을 사용하여 대댓글을 구현하였습니다.
댓글의 schema는 다음과 같습니다.

Comment {
  content: string;
  author: string;
  depth: number;
  parentCommentId: string;
  comments: Comment[];
  created_at: Date;
  updated_at: Date;
  postId: string;
}

댓글의 경우 depth가 0이 되고, parentCommentId에는 빈 값이 들어갑니다.
그리고 대댓글은 depth가 1이 되며, parentCommentId에는 부모 댓글의 _id가 들어갑니다.

이 과정에서 comments의 comment가 자기 참조를 할 수 있도록 @Prop 데코레이터를 @Prop({type: [{type: mongoose.Schema.Types.ObjectId, ref: 'Comment'}]}) 와 같이 적용하였습니다.

src/comment/comment.schema.ts

  @Prop({type: [{type: mongoose.Schema.Types.ObjectId, ref: 'Comment'}]})
  comments: Comment[] | null;

예시

댓글이 존재하는 상황에서 대댓글이 등록되면 다음과 같이 조회가 됩니다.

{
    "_id": "618176d0bf01ef0f96c163bb",
    "postId": "postId",
    "updated_at": "2021-11-02T17:35:12.347Z",
    "created_at": "2021-11-02T17:35:12.347Z",
    "comments": [
        "618176fabf01ef0f96c163c2",
    ],
    "depth": 0,
    "author": "testuser",
    "content": "댓글",
    "__v": 3
}

회고

NoSQL을 처음 써보게 되어 초기에 진행이 더뎠습니다.
또한, 초기에 ORM으로 사용하려던 TypeORM이 MongoDB와는 호환이 잘 안되는 이슈가 있어 진행에 어려움을 겪었습니다.
예를 들어, 데이터 조회시 typeorm mongodb cannot read property 'prototype' of undefined 같은 에러가 발생하는 경우가 있습니다. 이는 버전에 대한 문제로 인해 발생하는 이슈이며, 이 때문에 mongoose를 대체로 사용하였습니다.
(관련 글: TypeORM + MongoDB 적용 및 사용하지 않게 된 이유)

NoSQL로 스키마를 작성하고, 기능을 구현하였으나, NoSQL스럽게 스키마를 작성하고 코드를 구현하였는지도 약간 의문스럽습니다.

예를 들어, comment의 postId 같은 필드가 foreign key 처럼 사용된 것 같아 꺼림칙합니다.

한가지 다행이라고 생각되는 점은 이후에 NoSQL을 사용할 때 오늘만큼을 헤매지 않을 것 같다는 점입니다.
추후 제가 만들고자 하는 애플리케이션의 DB로 NoSQL을 사용한다거나 관련된 내용을 마주했을 때 좀 더 가벼운 마음으로 개발을 진행할 수 있을 것 같습니다.

3. 파일 업로드 & 다운로드 - BE (3)

haaak — Tue, 13 Aug 2019 15:31:01 +0900

3) 파일 다운로드 구현하기

실습

파일이 업로드되면 파일 정보는 데이터베이스 등에 저장을 하도록 합니다. 그리고 나중에 다운로드 할 때는 저장된 파일의 정보를 찾을 수 있는 id 등을 Controller에서 받게 한 뒤 해당 정보를 이용하여 데이터베이스에서 파일 정보를 읽어들이도록 해야 합니다.
읽어들인 파일 정보 response의 setHeader() 메서드를 이용해서 파일명, 파일 타입, 파일의 길이 이런 정보들을 지정을 하고 브라우저가 캐시를 읽지 못하도록 no-cache 로 설정한 뒤 헤더 정보로 전송을 하게 합니다. 그리고 이 response로부터 HttpServlet Response에 OutputStream을 이용해서 읽어들인 내용의 파일을 출력하게 하는 겁니다.
아래 예제에서는 경로를 직접 지정하였기에 실제 환경에 구성할 경우 업로드 할 때 DB에 insert했던 파일 정보를 DB에서 읽어와서 변수에 넣어 설정해야 합니다.
제공하는 connect.png 파일을 윈도우 사용자의 경우 c:/tmp/ 디렉토리에 복사하고 맥 사용자의 경우는 /tmp 디렉토리에 복사합니다.
FileController에 download메소드를 추가합니다.
response에 header를 설정합니다.
파일을 outputStream으로 출력합니다.
http://localhost:8080/guestbook/download를 브라우저에서 입력하면 파일이 다운되는 것을 확인할 수 있습니다.

FileController.java

@GetMapping("/download")

public void download(HttpServletResponse response) {

// 직접 파일 정보를 변수에 저장해 놨지만, 이 부분이 db에서 읽어왔다고 가정한다.

String fileName = "connect.png";

String saveFileName = "c:/tmp/connect.png"; // 맥일 경우 "/tmp/connect.png" 로 수정

String contentType = "image/png";

int fileLength = 1116303;

response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\";");

response.setHeader("Content-Transfer-Encoding", "binary");

response.setHeader("Content-Type", contentType);

response.setHeader("Content-Length", "" + fileLength);

response.setHeader("Pragma", "no-cache;");

response.setHeader("Expires", "-1;");

try(

FileInputStream fis = new FileInputStream(saveFileName);

OutputStream out = response.getOutputStream();

){

int readCount = 0;

byte[] buffer = new byte[1024];

while((readCount = fis.read(buffer)) != -1){

out.write(buffer,0,readCount);

}

}catch(Exception ex){

throw new RuntimeException("file Save Error");

}

생각해보기

파일 다운로드를 구현할 때는 보안에 상당히 신경을 싸야 합니다. 인자로 파일명을 받아들여, 그 파일명을 다운로드 받게 할 경우 해커들은 파일명을 "../../etc/passwd" 와 같은 형태로 전달하여 해킹을 시도하게 하는 경우도 있습니다.

참고 자료

[참고링크] Spring MVC 4 File Download Example - WebSystique

http://websystique.com/springmvc/spring-mvc-4-file-download-example/

[참고링크] Spring MVC 4 - File download example

https://www.boraji.com/spring-mvc-4-file-download-example

3. 파일 업로드 & 다운로드 - BE (2)

haaak — Tue, 13 Aug 2019 15:26:15 +0900

2) 파일 업로드 구현하기

실습

실습은 이전에 했던 프로젝트인 guestbook에 이어서 진행합니다.
maven pom.xml에 파일 업로드와 관련된 라이브러리를 추가해야 합니다.
commons-fileupload, commons-io 추가.

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency>

<groupId>commons-io</groupId>

<artifactId>commons-io</artifactId>

</dependency>

DispathcerServlet에게 멀티파트 요청이 올경우 파일 업로드 처리가 될 수 있도록 MultipartResolver객체를 등록합니다.
최대 10메가 크기의 파일이 저장되도록 설정하였습니다.
DispatcherServlet에 이런 내용들을 알려주기 위해서는 config 안에 있는 WebMvcContextConfiguration에 Bean을 추가합니다.

WebMvcContextConfiguration.java

@Bean

public MultipartResolver multipartResolver() {

org.springframework.web.multipart.commons.CommonsMultipartResolver multipartResolver = new org.springframework.web.multipart.commons.CommonsMultipartResolver();

multipartResolver.setMaxUploadSize(10485760); // 1024 * 1024 * 10

return multipartResolver;

}

이제 파일을 업로드 할 수 있는 form을 views에 작성합니다. form의 method와 enctype을 다음과 같이 지정합니다. 또한 input 태그의 타입을 file로 지정합니다.

uploadform.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>uploadform</title>

</head>

<body>

<h1>Upload Form</h1>

file : <input type="file" name="file"><br>

</form>

</body>

</html>

파일 업로드가 성공하면 업로드 성공 메시지를 출력하는 uploadok.jsp파일을 작성합니다.

uploadok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>uploadform</title>

</head>

<body>

</body>

</html>

파일 업로드를 처리하는 FileController를 작성합니다.
Controller 패키지에 FileController.java를 작성합니다.

FileController.java

package kr.or.connect.guestbook.controller;

import java.io.FileOutputStream;

import java.io.InputStream;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.multipart.MultipartFile;

@Controller

public class FileController {

// get방식으로 요청이 올 경우 업로드 폼을 보여줍니다.

@GetMapping("/uploadform")

public String uploadform() {

return "uploadform";

}

// 실제 파일이 업로드 요청이 들어올 때의 처리 부분

@PostMapping("/upload")

public String upload(@RequestParam("file") MultipartFile file) {

// 업로드 파일이 MultipartFile 객체로 들어옴

System.out.println("파일 이름 : " + file.getOriginalFilename());

System.out.println("파일 크기 : " + file.getSize());

try(

// 맥일 경우

//FileOutputStream fos = new FileOutputStream("/tmp/" + file.getOriginalFilename());

// 윈도우일 경우

FileOutputStream fos = new FileOutputStream("c:/tmp/" + file.getOriginalFilename());

InputStream is = file.getInputStream();

){

int readCount = 0;

byte[] buffer = new byte[1024];

while((readCount = is.read(buffer)) != -1){

fos.write(buffer,0,readCount);

}

}catch(Exception ex){

throw new RuntimeException("file Save Error");

}

return "uploadok";

}

위와 같은 내용이 작성이 되었다면, 서버를 실행시켜 http://localhost:8080/guestbook/uploadform 을 웹 브라우저로 엽니다.

파일을 업로드 합니다. 업로드되면 성공페이지로 이동하는 것을 알 수 있습니다.

c:/tmp 폴더에 가보면 파일이 업로드 된 것을 알 수 있습니다.

생각해보기

한 디렉토리에 저장되는 파일의 수는 제한이 있습니다. 파일 업로드를 구현할 때는 파일이 업로드되는 디렉토리의 구조도 중요합니다. 업로드되는 파일을 저장하기 위한 디렉토리 구조를 어떻게 하는 것이 좋을까요? (힌트 : 파일이 업로드되는 날짜 정보를 이용한다.)
MultipartFile#transferTo() 를 이용해서 실습 코드를 수정해보세요.

참고 자료

[참고링크] Spring MVC File Upload Example Tutorial - Single and Multiple Files - JournalDev

https://www.journaldev.com/2573/spring-mvc-file-upload-example-single-multiple-files

[참고링크] FileUpload – Home

https://commons.apache.org/proper/commons-fileupload/

3. 파일 업로드 & 다운로드 - BE (1)

haaak — Tue, 13 Aug 2019 15:09:54 +0900

1) 파일업로드 컨셉설명

Multipart?

Multipart는 보통 파일을 전송할 때 사용합니다.
웹 클라이언트가 요청을 보낼 때 HTTP프로토콜의 바디 부분에 데이터를 여러 부분으로 나눠서 보내며, 그림과 같이 Content-Type, 파일 이름, 파일 정보 등으로 나뉜 부분을 연결하여 전송합니다.
이렇게 여러 부분으로 나눠서 오는 것을 multipart 데이터라고 합니다.

HttpServletRequest는 파일 업로드를 지원 안 함

HttpServletRequest는 웹 클라이언트가 전달하는 Multipart데이터를 쉽게 처리하는 메소드를 제공하지 않습니다.
서블릿에서 파일 업로드를 처리하려면 별도의 라이브러리를 사용해야 합니다. 대표적인 라이브러리가 아파치 재단의 commons-fileupload입니다.
HttpServletRequest는 HTTP 프로토콜의 바디 부분을 읽어들이는 InputStream만을 지원하기에 사용자는 이런 InputStream을 이용해서 multipart 부분을 잘 나눠서 사용을 해야 됩니다.

Spring MVC에서의 파일 업로드

Spring MVC에서 파일을 업로드 하려면 몇 가지 라이브러리와 설정을 추가해야 합니다.
- commons-fileupload, commons-io 라이브러리 추가
- MultipartResolver Bean 추가

파일 업로드를 위한 라이브러리 추가

pom.xml에 아래의 dependency를 추가합니다.

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency>

<groupId>commons-io</groupId>

<artifactId>commons-io</artifactId>

</dependency>

스프링 설정 추가

DispathcerServlet은 준비 과정에서 "multipart/form-data"가 요청으로 올 경우 MultipartResolver를 사용합니다.
이를 위해서 MultipartResolver 객체를 생성하는 Bean을 설정해줘야 합니다.

@Bean

public MultipartResolver multipartResolver() {

org.springframework.web.multipart.commons.CommonsMultipartResolver multipartResolver = new org.springframework.web.multipart.commons.CommonsMultipartResolver();

multipartResolver.setMaxUploadSize(10485760); // 1024 * 1024 * 10

return multipartResolver;

}

파일 업로드 폼

파일 업로드 시에는 form태그에 enctype(multipart/ form-data)설정이 되어 있어야 합니다.
post 방식으로 전송해야 합니다.
input 태그의 type은 file로 지정해야 합니다.
type이 file인 input 태그가 여러 개 있고 name 속성의 값이 같다면 file이 배열 형태로 컨트롤러에게 전달이 되게 됩니다.

<form method="post" action="/upload"

enctype="multipart/form-data">

......

</form>

Controller에서의 업로드 처리

폼으로부터 전달되는 파일 정보를 받아들이는 Controller를 추가를 해야합니다. 파일 정보는 파라미터로 전달되며 이 때 MultipartFile type으로 전달이 되게 됩니다.
@PostMapping이 사용되어야 합니다.
업로드 파일이 하나일 경우 @RequestParam("file") MultipartFile file
업로드 파일이 여러 개일 경우 @RequestParam("file") MultipartFile[] files (배열로 사용)
MultipartFile의 메소드를 이용해서 파일 이름, 파일 크기 등을 구하고 InputStream을 얻어 파일을 서버에 저장합니다.
파일은 서버의 파일 시스템에 저장하고 파일 정보는 DB에 저장합니다.

Controller에서의 다운로드 처리

서버의 특정 디렉토리는 외부에서 접근할 수가 없기에 파일을 외부에서 사용할 수 있도록 하려면 다운로드 기능을 제공해야 됩니다.
파일 다운로드와 관련된 헤더 정보를 출력합니다.

response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\";");

response.setHeader("Content-Transfer-Encoding", "binary");

response.setHeader("Content-Type", contentType);

response.setHeader("Content-Length", fileLength;

response.setHeader("Pragma", "no-cache;");

response.setHeader("Expires", "-1;");

파일을 다운로드하는 Controller 메서드에서는 먼저 헤더 정보에 사용자가 다운 받으려는 파일 정보와 함께 캐시를 사용하지 않도록 설정을 해줘야 됩니다. 그리고 파일 정보를 HttpServlet Response의 OutputStream을 이용해서 출력해야 사용할 수 있습니다.
파일을 읽어 HttpServletResponse의 OutputStream으로 출력합니다.

생각해보기

HTTP프로토콜의 바디 부분에 스트림(stream)방식으로 전달되는 Multipart를 읽어들이기 위해 아파치 재단의 commons-fileuplaod라이브러리를 이용한다고 했습니다. Multipart형식에 대해 좀 더 상세히 알아보고, 이를 직접 파싱하려면 어떻게 해야 할지 생각해보세요.

참고 자료

[참고링크] FileUpload – Home

https://commons.apache.org/proper/commons-fileupload/

[참고링크] Convenient way to parse incoming multipart/form-data parameters in a Servlet

https://stackoverflow.com/questions/3337056/convenient-way-to-parse-incoming-multipart-form-data-parameters-in-a-servlet