• somthing..

• somthing..

• somthing..

• react-query 개인프로제트 적용
• 기능 명세서 작성
• typescript 공부
• 중간 공유회 다른팀들 자료 둘러보기
• 코어타임 모각코 진행

• 중간 공유회 다른 팀들 꺼를 보면서 확실히 그렇게 까지 자료의 질적인 면에서 차이가 나는 것 같지 않았다.
• 기능명세서를 조금 더 세부적으로 적으면서 또 빠뜨린 것들에 대해서 찾을 수 있었다.
• api 명세서도 작성하면 좋을 것 같다.

• pip는 기존에 html에서 제공해주는 기능으로 포함되어져 있다.

• 기능명세서 안에 atom, molecule, organism 단위로 세세하게 채워넣어야 겠다.
• zustand + react-query 까지 하기

• somthing..

• somthing..

• somthing..

• 코어타임 모각코 진행 (22:00 ~ 24:00)
• 유저 서버 개발 진행
  • jwt 인증 구현
  • 로그인 및 회원가입 구현
  • 회원가입 이메일 인증 구현

1. 초기 멤버 테이블
   
   1

2. 회원가입 요청, 그리고 이메일 전송
   
   2

3. 이메일 확인
   
   3

4. 코드 입력후 맞으면 회원가입 완료
   
   4

5. 데이터베이스에 저장
   
   5

• 기존에 개인프로젝트를 인증 주제로 했어서 후딱 할 수 있었다.
  • 대신 그 때는 session을 사용하였기에 jwt를 세팅하는데 오래 걸렸다.
  • spring에서는 단순히 jwt뿐 아니라 spring security에 대한 설정도 엄청 많다.
  • 따라서 블로그를 보고 어찌저찌 따라하기는 했으나 .. 이해도가 많~~이 부족하다. jwt 로직 자체야 이해는 쉬운데.. 그 뒤에있는 security에 대해 공부할 필요가 있어보인다.
  • 참고자료 : https://bcp0109.tistory.com/301
• 모각코 효과가 좋다고 느꼈다. 개인적으로 노트북보다는 큰 화면에서 작업하는걸 선호하기에 집의 데스크탑을 애용한다. 하지만 집이다 보니 나태해지는 경우가 많았는데 모각코가 그런 부분을 잡아주어 집중해서 개발할 수 있었다.
• 쥐도 새도 모르게 또 구현에 눈 돌아갔는데 테스트코드랑, 이론적인 부분에 대한 시간을 배분할 필요가 있어보인다..

• jwt의 인증은 공개키 암호화(sing) 시스템으로 진행된다.
  • 공개키 암호화는 public key, priavte key 두개가 존재하는데 유저가 서버의 pu key로 암호화 후에 서버로 던져주면 서버가 pr key로 복호화해서 인증하는 알고리즘이다. (마침 저번학기에 정보보호론을 들었는데.. 실제로 적용한 사례를 보니 꽤 신기하다.)
• 토큰을 클라이언트에게 던져주면 토큰을 클라이언트에서 가지고 있다가 서비스를 요청할 때 인증한다.
  • 클라이언트 측에서 access token은 private 하게 상태관리 store에 저장하는 경우가 많으며, refresh token은 브라우저에 저장하는게 일반적이다.

• accessed_at, profile 필드 세팅
• 통신을 위해서 HttpRequestEntity, HttpResponseEntity 에 대하여 개념을 딱 잡고 가야할 거 같다.
  • https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/http/HttpEntity.html
• 슬슬 팀 repo git을 사용해야 할 거 같다. 데모라서 로컬에 하고 있었는데 팀 repo에 내역을 남기면 좋을 거 같다.
• 가능하다면 api gateway도 좀 설정하면 좋을듯.

• 타입스크립트 공부
• 스토리북 docs 보면서 스토리북 세팅하고, 여러 종류의 addon들 사용해보기
• 코어타임 모각코 (22:00 ~ 24:00)

• 타입스크립트는 역시 어렵다 ᅲᅲ 그런데 공부할 수록 재밌다.
• Storybook에 addon 종류는 정말 많다. 공부할 게 넘쳐서 좋아...!
• 팀원들과 조금씩 친해지는 것 같아서 좋다 ᄒᄒ (오뚜기 팀 최고🥰)

• Storybook
  • 세팅: 이미 세팅되어 있는 framework인 경우(cra, next, 등..)에서 npx sb init를 입력한다.
  • main.js에는 storybook의 config 설정들이 담겨 있고, preview.js는 해당 프로젝트의 모든 story에 global하게 적용할 포맷을 세팅한다.
  • floating button 컴포넌트에 actions addon를 사용해보았다. actions는 Story에서 이벤트 핸들러(콜백) 인수에서 받은 데이터를 표시할 때 사용한다.

import FloatingButton from "./FloatingButton";
export default {
 title: "Test",
 component: FloatingButton,
 parameters: { actions: { handles: ["click"] } },
};
export const Basic = () => <FloatingButton />;

sb

→ 클릭할 때마다 click Actions이 나옴

• TypeScript

  • 상수가 들어가는 경우 enum 타입으로 지정하자. (ex. redux action명)
  • 객체를 사용할 땐 객체 내 key, value의 타입까지도 꼭! 지정해주자. 만약 그냥 object or {}로만 타입을 지정하게 되면 객체 내 값에 접근할 때 타입 에러가 발생한다.

  let obj: {};
  obj = { name: 'abc' };
  console.log(obj.name); // Error! Property 'name' does not exist on type {}.

  • 다음과 같은 경우에, v1의 type은 number | ‘too big’ 이다.

  function f1 (value: number) {
  	if (value < 10) {
  		return value;
  	} else {
  		return 'too big';
  	}
  }

• 이번주에 코딩애플 타입스크립트 완강하자.
• 스토리북의 대부분 addons 직접 사용해보기.