ddang-ddang/back-end

NestJS와 TypeORM을 활용한 땅땅 프로젝트 API 서버

back-end's Issues

typeORM custom repository 의존성 주입 이슈

Description (개요)

typeorm 최신버전인 0.3 이상 사용하는 경우 dependency injection 이슈가 생길 수 있습니다.

저의 경우 feeds.repository.ts파일의 아래의 코드 부분에서 에러가 발생했습니다.

@EntityRepository(Feed)
export class FeedRepository extends Repository<Feed> {}

에러내용 => Cannot set property metadata of #Repository which has only a getter ...

Progress (작업 사항 및 해결)

• npm i [email protected] 로 버전을 내리면 해결됩니다.

Header에서 Bearer token이 프론트에 전달이 안되는 문제점

@ddang-ddang/team-nest

Description (개요)

Front팀에서 아래와 같이 axios를 이용해 header를 요청했지만 백에서 header에서 받지를 못했습니다.

const instance = axios.create({
     baseURL: "http://localhost:3005",
     headers: {
         "content-type": "application/json;charset=UTF-8",
          accept: "application/json,",
         "Access-Control-Allow-Origin": "*",
         // "Authorization": `Bearer ${token}`,
     },
});

개발자 툴-> 네트워크-> header
로 봤을때는 백에서 보내준 Authoraztion부분이 잘 확인되었지만,
막상 데이터를 열어보면 위에 요청한 headers 내용만 보이는 것이 보였습니다.

따라서 추측을 아래와 같이 했습니다.

1. 직접 구성한 front에서는 문제없었다.
2. 1번에서 axios.post와 porxy를 기본으로 썼다.
3. 프론트에서 네트워크에서는 내용이 보인다. 그러나 실제 데이터에서는 빠져있다.
4. 그러므로 front에서 axios에서 잘 못받아 오고 있다.

Progress (작업사항)

1. npm i http-proxy-middleware
2. src 루트에 setupProxy.js 생성
3. 아래와 같은 코드 삽입

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    ['/api','/uploads,','/players'], //자신이 설정한 업로드 API이름을 입력한다
    createProxyMiddleware({
      target: 'http://192.168.1.42:3005', // target host API 서버 입력
      changeOrigin: true,
    })
  );
};

5. 기존코드를 axios.post로 변경

[이슈]https 내에서 axios 사용시 headers 셋팅

Description (개요)

@moto4321 @reload1bronze
http 에서는 아래와 같이 헤더만 보내도 문제없이 통신이 가능합니다.
수정된부분은 말씀드리고 바로 요청드리겠습니다.

          headers: {
            Authorization: `KakaoAK ${process.env.MAP_KAKAO_API_KEY}`,
          },

하지만 https내에서는 아래와 같이 추가적으로 access-control-alllow-origin을 설정해 주셔야 합니다.

          headers: {
            Accept: '/',
            'content-type': 'application/json;charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
            Authorization: `KakaoAK ${process.env.MAP_KAKAO_API_KEY}`,
          },

description

테스트2

Description (개요)

description

Progress (작업사항)

• todo1
• todo2
• todo3

queryBuilder 로 원하는 칼럼만 response 보내기

Description (개요)

피드를 전체 조회할 때 사용자에 대한 정보도 join해서 보내줘야하는데 단순히 join하는 경우 password가 그대로 클라이언트에 보내지게 됩니다. 이를 막고 원하는 칼럼만 보내기 위해 queryBuilder를 사용했습니다. 더 좋은 방법있다면 코멘트 부탁드립니다.

Progress (작업사항)

const { regionSi, regionGu, regionDong } = regionData;
const feeds = await Feed.createQueryBuilder('feed')
      .select([
        'feed',
        'player.id',
        'player.email',
        'player.nickname',
        'player.mbti',
        'player.profileImg',
        'player.level',
        'player.exp',
      ])
      .where({ deletedAt: null })
      .leftJoinAndSelect('feed.quest', 'quest')
      .leftJoin('feed.player', 'player')
      .leftJoinAndSelect('feed.comments', 'comment')
      .leftJoinAndSelect('feed.likes', 'likes')
      .leftJoinAndSelect('feed.region', 'region')
      .where(
        'region.regionSi = :si and region.regionGu = :gu and region.regionDong = :dong',
        { si: regionSi, gu: regionGu, dong: regionDong }
      )
      .getMany();

@reload1bronze @diasm3

[이슈]undefined 메세지?

Description (개요)

@reload1bronze 아래 확인 부탁드리겠습니다!

서버 실행중 특정 시간? 지나면 아래와 같은 에러메세지가 발생합니다.
카카오 API 부부분에서 에러메세지가 발생하는 거 같습니다.

Cannot destructure property 'address' of 'res.data.documents[0]' as it is undefined.
카카오API - getAddressName: 576.721ms
(node:61139) Warning: Label 'getAll' already exists for console.time()
Cannot destructure property 'address' of 'res.data.documents[0]' as it is undefined.
카카오API - getAddressName: 488.758ms
(node:61139) Warning: Label '주소API - getRegionData' already exists for console.time()
(node:61139) Warning: Label 'getAll' already exists for console.time()
Cannot destructure property 'address' of 'res.data.documents[0]' as it is undefined.
카카오API - getAddressName: 520.166ms
(node:61139) Warning: Label '주소API - getRegionData' already exists for console.time()

DB index 설정 여부

Description (개요)

player테이블에서 email과 id로 탐색하는 방법 중 id로 탐색하는 방법을 선택하였습니다.
id값이 auto_increment로 설정이 되어 있어서 탐색 속도가 더 빠르지 않을까 했지만 index를 설정하지 않으면 똑같다고 합니다.

index 추가 여부

index를 설정하면 장단점이 있는데 select문이 더 빠른 장점이 있고 insert, update, delete 성능이 떨어지는 단점이 있습니다. 만들고자 하는 서비스에 따라서 선택적으로 쓰면 되지만 저희 서비스의 경우 index를 설정할 필요성을 느끼지 못했습니다. 혹시 의견 있으시면 코멘트 부탁드립니다.

key word

• index
• B-Tree

@reload1bronze @diasm3

[이슈]클라이언트에서 JWT 토큰 관리 이슈

Description (개요)

@reload1bronze @moto4321 @pol-dev-shinroo

현재 개발된 부분은 간단하게 서버에서 JWT토큰을 발행후 3600초 동안 유지하는 방식으로 테스트를 완료했습니다.
하지만 실제 서비스에서는 보안에 관련하여 좀더 신경써야 하기때문에 Access Token 과 Refresh Token을 이용한 3 Handshake 방식의 인증 방식을 사용하려고 합니다.(5월 16일 개발 예정)

To @pol-dev-shinroo
지금 테스트를 진행할때는 3600초동안 JWT토큰이 유지될거라 3600 이후에는 다시 JWT토큰을 받으려면 로그인을 다시 해야하는 문제점이 있습니다.
따라서 Access Token과 Fresh Token에 대해 이해 하시고 나중에 적용할때 준비를 해두시면 좋을 듯 합니다.

리엑트에서 Refresh Token 관리법 레퍼런스
백에서 Refresh Token 레퍼런스

작동방식

가정 1. Access Token과 Refresh Token이 둘다 없을때

클라이언트

1. 로그인 요청

서버

2. Access Token과 Refresh Token을 발행한다
   • Access Token : 생명주기가 짧은 토큰(예: 1시간)
   • Refresh Token: 생명주기가 긴 토큰(예: 2주일)
3. Refresh Token은 서버DB에 저장
4. Client에게 Access Token, Refresh Token을 보낸다

클라이언트

5. Refresh Token을 안전한 곳에 저장
6. Access Token을 헤더에 넣고 필요한 요청을 보낸다.

서버

7. Access Token을 검증 후 필요한 데이터를 보낸다.

---

가정 2. Access Token은 만료 되고, Refresh Token이 유효할때

클라이언트

1. Access Token과 함께 데이터 요청
   (보내기전에 Access Token안에 payload안에 유효기간을 알 수 있어서 재발급 요청 가능)

서버

2. Access Token 확인 -> 만료
3. 클라이언트에서 Refresh Token 요청 및 확인(payload 안에 유효기간확인가능)
4. Refresh Token이 아직 유효하면
5. Access Token을 바로 발급 후 헤더로 전송

---

가정3. accessToken은 만료 되고, refreshToken도 만료될때
-> 다시 로그인해야함

인가 실패에 따른 상태 코드 변경이 필요해 보입니다.

Description (개요)

현재 AuthGuard를 통과하지 못하는 경우, 401 Unauthorized로 응답하고 있습니다.
AuthGuard는 '인증'보다는 '인가'에 가까운 성격이므로 403 Forbidden 응답이 적절해 보입니다.

authorization의 뜻이 '인가'이므로 401이 '인가'에 대한 거부로 생각되기는 하나,
일반적으로 401은 '인증'에 대한 예외, 403은 '인가'에 대한 예외라고 합니다.

급한 건은 아니나, 생각난 김에 이슈로 등록합니다.
추가 의견 있으시면 코멘트 부탁드립니다.

Progress (작업사항)

• AuthGuard 실패에 따른 HTTP 상태 코드 변경 (401 -> 403)

comment 모듈안에 exception.ts 추가

외부 API 요청 프로세스 개선

Description (개요)

주소 및 좌표 요청 API를 순차적으로 수행함에 따라 처리 시간이 비례적으로 늘어남
3개 요청시 3.074s, 10개 요청시 9.056s

Progress (작업사항)

• 주소 요청 API 병렬화
• 좌표 요청 API 병렬화

entity 객체가 아닌 id 값으로 저장하고 조회하기

Description (개요)

entity 객체가 아닌 id 값으로 저장하고 조회하는 것으로 수정
사유: entity 객체를 활용해서 외래키를 저장하는 현재의 방법은 id를 알고 있음에도 쿼리 문을 날려서 entity를 조회해야 하는 구조

Progress (작업사항)

• entity 생성할 때 외래키(id값)로 저장
• entity 조회시 외래키(id값)로 활용해서 조회

테스트 이슈 남깁니다.

Description (개요)

description

Progress (작업사항)

• todo1
• todo2
• todo3

같은 날짜에 중복된 지역 데이터가 생성됩니다.

Description (개요)

아직 퀘스트가 생성되지 않은 지역의 경우,
짧은 시간 간격으로 퀘스트 조회 요청시 지역 및 퀘스트 데이터를 중복으로 생성합니다.
TypeORM의 Unique 데코레이터를 활용하여 해당 컬럼들을 조합한 제약사항을 둡니다.

Progress (작업사항)

• 날짜-지명 컬럼을 묶어서 Unique 처리

에러처리 분리

Description (개요)

에러처리 통합관리

오늘 멘토님이 에러처리를 분리하여 통합관리하라고 조언해 주셨습니다.
3조의 에러처리관련해서 잘 되어있다고 하셔서 같은 형식을 comments모듈에만 시험삼아 적용하였습니다.
관련해서 더 좋은 방법이 혹시 있다면 공유 부탁드립니다.

Progress (작업사항)

• #85

@reload1bronze @diasm3

[이슈]Typeorm에서 두개 이상의 테이블 조인후 원하는 엔티티를 Select못하는 문제점

개요

1. 두개의 테이블 (player, complete, quest) 3개의 테이블이 있다.
2. player -< complete -< quest 이렇게 연결되어 있다.
3. player 엔티티에서 quest의 위도 경도를 가져오고 싶다.
4. 아래와 같이 작성하면 1뎁스인 player 부분은 원하는 엔티티만 가져올 수 있었다.

      const locations = await this.find({
        order: { id: 'DESC' },
        relations: ['completes', 'completes.quest'],
        select: [
          'id',
          'nickname',
          'profileImg',
          'mbti',
          'level',
          'exp',
          'completes',
          // 'completes.quest.id',
        ],
      });

      return locations;
    } catch (err) {
      return err.message;
    }
  }

5. 그러나 그 이후의 뎁스 completes, request는 작동이 안되었다.
6. 스택오버 플로우나 어디를 봐도 자료는 없고 실패 이야기만 나온다.
7. 깔끔하게 포기한다.
8. 이미 우석님과 제철님이 올려두신 방법으로 진행 예정이다.

관련 레퍼런스

카카오맵 API 호출 시 초당 쿼터 제한

Description (개요)

너무 많은 요청을 동시에 보내게 되면 429 에러를 반환하는 문제

원인

카카오맵 API의 경우 월간 일간 제한 뿐만 있는게 아니라 초당 호출수 쿼터 제한도 존재한다고 합니다. 정확한 제한 수치를 찾아보고자 했으나 정확한 수치는 공개하기 어렵다고 합니다.

좌표를 랜덤하게 뽑아내는 방식 개선 필요

Description (개요)

좌표를 랜덤하게 뽑는 로직 개선
juso.go.kr의 공공API 활용시 주소 데이터를 페이지 별로 나눠서 응답받게 됩니다. (페이지별 주소 데이터 최대 100개)
현재는 페이지별로 1개의 주소 데이터를 랜덤하게 추출하고 있습니다.
무작위를 제대로 구현하기 위해서는 특정 개수의 주소를 무작위 페이지, 무작위 인덱스에서 추출해야 합니다.
해당 로직의 구현은 후순위로 미뤄두었지만, 추후 개선을 위해 이슈로 기록합니다.

Progress (작업사항)

• 좌표 랜덤 추출 로직 개선

프로필 수정)

Description (개요)

리덕스에서 프로필 이미지를 가져와서 프로필 수정하는 페이지에 preview로 보여줍니다.
이후 useState를 사용해서 변화된 이미지를 받아옵니다.
이때 useState 초기값으로 리덕스에서 받아온 image preview를 넣을 수가 없습니다.
preview 값이 콘솔로 찍히지만, useState에 초기값으로 넣어지지가 않습니다.

그래서 react-hook-form 으로 해결은 했지만,
이유를 잘 모르겠습니다

description
// 리덕스에 저장된 유저정보를 가져옵니다.
const userDetail = useSelector((state) => state.user);
console.log(userDetail.profileImg)
// profileImg가 존재합니다

// useState를 사용해서 리덕스에서 가져온 profileImg를 useState초기값으로 설정합니다.
const [profileImage, setProfileImage] = React.useState(profileImg ? profileImg : "");

return (

)

이때 preview가 화면에 나오지가 않습니다.

다른 해결책:

axios.get("/players/myPage") 로 리덕스에 저장한 후 리덕스에서 데이터를 가져오지 말고, 컴포넌트 자체에서 axios로 가져오기