• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• eureka server에 node serivce 등록

image

image

• gateway 통하여 접근 테스트 성공

• gateway 에서 필터 적용하여 jwt 인증 필요하도록 구성하기 성공!

• 토큰 없을때

image

• 토큰 있을때

image

• spring cloud side car를 사용해야하는 줄 알았는데... 구글링 하다가 파이썬이나 플라스크 프로젝트를 eureka server에 등록해서 사용하는 글을 봤다
  • https://www.inflearn.com/questions/451567/python-flask%EB%A5%BC-eureka-client%EB%A1%9C-%EB%93%B1%EB%A1%9D
• 찾아보니 node 도 eureka server에 등록할 수 있도록 설정해주는 라이브러리가 존재했고(eureka-js-client), 규현님한테 물어가며 설정을 완료했다
  • 알고보니 굉장히 간단했다.. side car는 정보도 없고 비교적 복잡해서 골머리를 앓고 있었는데 다행이다.
  • 근데 그도 그럴만한게, msa는 다양한 언어 프로젝트를 손쉽게 서비스에 등록하고 사용하는게 메리트인데.. 그 과정이 복잡한게 오히려 이상했다.
• jwt 인증 부분도 잘 되는거 같아 다행이다.

• node 서비스를 eureka 서버에 서비스로 등록하는 방법
  • https://medium.com/@zilayhuda/register-nodejs-service-with-netflix-eureka-and-use-zuul-for-routing-service-part-1-e50fc49d1219
  • https://www.npmjs.com/package/eureka-js-client
• 위 과정을 위해 설치해야하는 라이브러리
  • npm i eureka-js-client (처음에 이게 설치가 안되어있어 진행이 안되었다.)
  • npm install eureka-js-client --save
• eureka server에서 포트번호를 자동 추적하기 위해서는 package.json 에서 이름을 맞춰줘야 한다!

• 현우님과 스터디 하면서 프론트 백 또 맞춰봐야겠다.
• 가능하면 커뮤니티 서비스도 ec2에서 service 등록하고 배포해보아서 모든 과정 테스트 할 수 있도록 구성하면 좋을 거 같다.

• 22:00 ~ 00:30 온라인 코어 스터디
• 절대 경로 설정하고 상대 경로를 절대 경로로 코드 리팩토링하기
• typescript의 Pick and Omit을 사용하여 코드 리팩토링하기

• 벌써 다음주면 끝! 이번주 다음주는 죽었다 생각하고 갈아 넣어야겠다.

• 절대 경로 설정하기: craco(Create React App Configuration Override)

프로젝트를 cra로 생성했을 때, craco를 사용하면 eject를 하지 않고도 root 폴더에 craco.config.js 파일을 추가하여 eslint, babel 등 설정을 쉽게 할 수 있다.

처음에 여기에서 보고 따라 세팅했는데 절대 경로가 적용이 되지 않았다. 알고보니 안된 이유는 타입스크립트를 사용하는 경우에는 다르게 세팅을 해줘야하기 때문이다.

그래서 이 사이트를 참고하여 절대 경로를 재설정하였다.

1. craco 설치

yarn add @craco/craco
yarn add craco-alias -D

2. craco.config.js 세팅

const CracoAlias = require("craco-alias");
module.exports = {
 plugins: [
 {
 plugin: CracoAlias,
 options: {
 source: "tsconfig",
 tsConfigPath: "tsconfig.paths.json",
 },
 },
 ],
};

3. tsconfig.json 세팅

{ 
 ...,
 "extends": "./tsconfig.paths.json"
}

4. tsconfig.paths.json 세팅

{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@api/*": ["src/api/*"],
 "@components/*": ["src/components/*"],
 "@configs/*": ["src/configs/*"],
 "@fonts/*": ["src/fonts/*"],
 "@hooks/*": ["src/hooks/*"],
 "@pages/*": ["src/pages/*"],
 "@store/*": ["src/store/*"],
 "@styles/*": ["src/styles/*"],
 "@utils/*": ["src/utils/*"]
 }
 }
}

결과

이제 길게 상대경로를 작성하지 않고, 절대 경로로 파일을 불러올 수 있다!

image

• typescript - Pick and Omit

1. Pick

여러 개의 타입 중에서 일부 타입만 골라 사용하고 싶은 경우에 사용한다. 즉, 몇 개의 속성을 선택하여 타입을 정의할 수 있다.

(적용한 코드) - color, backgroundColor, fontWeight 타입만 가져온다.

interface SettingButtonProps {
 text: string;
 onClick: MouseEventHandler<HTMLButtonElement>;
 fontWeight?: "normal" | "bold";
 color?: ColorType;
 backgroundColor?: BackgroundColorType;
 disabled?: boolean;
 status: ServerSettingType;
}
...
export const SettingButtonContainer = styled.button<
 Pick<SettingButtonProps, "color" | "backgroundColor" | "fontWeight">
>`
...

2. Omit

특정 속성만 제거한 타입을 정의한다. 즉, Pick과 반대이다.

(적용한 코드) - text, onClick을 제외한 모든 타입들을 가져온다.

interface DefaultButtonProps {
 text: string;
 onClick: MouseEventHandler<HTMLButtonElement>;
 width?: number | null;
 height?: number | null;
 fontSize?: FontSizeType;
 fontWeight?: "normal" | "bold";
 color?: ColorType;
 backgroundColor?: BackgroundColorType;
 hoverBackgroundColor?: BackgroundColorType;
 disabled?: boolean;
 borderColor?: BorderColorType;
 mb?: number;
 ph?: number;
 pv?: number;
}
...
const DefaultButtonContainer = styled.button<
 Omit<DefaultButtonProps, "text" | "onClick">
>`
...

• API 합칠 준비하기
• 메인화면에 검색하기 모달 안되는거 고치기
• 채팅 구현 준비하기
• 스토리북 절대 경로 설정하기
• 서버 글자 색깔 black → 바꾸기
• 채팅 이미지 업로드 모달 구현하기