-
Notifications
You must be signed in to change notification settings - Fork 1
TIL 1월 20일
Kimsc9976 edited this page Jan 22, 2023
·
14 revisions
- 팀원들과 스터디
- N : N SFU 시그널링 체널 제작
- 뭔 에러가 이렇게 뜨는지 모르겠다;
- SFU가 생각보다 연결성이 그렇게 좋지 못한 것 같기도하고.... 계속 손봐야하는데.. 어렵다
- 죽전역 쪽에서 스터디 진행(with 종인,수찬,다은)
- 대한 짬뽕 맛있었다.
- atom 단위 분석 진행
- react-query 적용
- 확실히 데이터 fetch를 위해서 작성했던 custom hook들 대신에 react query를 쓰니 편한거 같다.
- atom 단위로 분석하는걸 figjam에 일단 추가하고 문서화 하는 쪽이 맞는 거 같다.(다은님 의견 받고)
- 설날 동안 타입스크립트 열심히
- atom 단위 분석 정확하게 작성하기
- somthing..
- somthing..
- somthing..
- 팀원들과 스터디 진행
- HttpEntity, ResponseEntity 구조 공부
- Spring Cloud Gateway + Filter (Jwt) 관련 공부
- msa config 정보를 git에서 통합 관리할 수 있도록 설정.
- 죽전역에 조조 칼국수가 있었다. 다음에 가야지 !
- 웹 개발자면, http에 대해서는 빠삭하게 알고 있어야 할 거 같다.
- HttpEntity, ResponseEntity
- 공부 및 테스트 내용 : https://devcamp.notion.site/HttpEntity-ResponseEntity-d9810a92b6474c35b32a38d9a23eedaa
- HttpEntity는 Http response, request 를 나타내는 클래스이다. body와 header로 구성되며 HttpEntity 에서 T는 body부분의 자료형을 명시한다.
- ResponseEntity는 HttpEntity를 상속하는 클래스이며 http 상태코드가 추가된 클래스이다. body, header 는 기본에 상태코드를 사용자가 지정할 수 있다.
- Spring Cloud + JWT
- Spring boot에서는 profile 기능을 활용하여 여러 설정을 자신이 원할 때 바꿔서 설정할 수 있다.
- ex> yml 또는 properties 파일을 여러개 만들어 놓고 네이밍 룰에 의거하여 사용자가 원하는 파일을 프로젝트 빌드시 적용시킬 수 있다는 뜻이다.
- 예로들어 테스트 환경 설정은 h2로 하고, 배포 설정은 mysql로 할 시 파일 두개를 만들어서 상황에 따라 적용시켜주면 간단히 빌드할 수 있다.
- 참고내용 : https://wonit.tistory.com/501
- 설날이라 잘 모르겠지만.. jwt 로직 공부해서 filter를 유저서버에서 gateway 단으로 넘기는 작업을 해야한다.
- config 관리하는 repo를 public으로 하면 괜찮은데, private로 하면 오류가 난다. 해결법 강구..
- 오뚜기 팀원들과 카페에서 모각코 (21:00 ~ 23:00)
- react-query의 Optimistic Updates를 알게 됨
- 오랜만에 집이 아닌 외부에서 코딩을 하니 리프레쉬 되고 좋았다. 정신 건강을 위해 가끔은 나가서 기분 전환 하면서 코딩 해야겠다. 팀원들과의 모각코도 되도록이면 시간 내서라도 참가해야지.
- 이번주에 목표한 바들을 많이 이루지 못했다.. 주말동안 목표를 이루지 못한 원인을 분석하여 재목표를 세워야지.
- custom hook(useInput) + typescript
- 커스텀 훅을 만들고 여기에 타입스크립트를 적용하려니 타입 에러가 발생했다.
- 커스텀 훅이 반환하는 형식이 튜플이라서 튜플 형식으로 작성을 하니 에러가 사라졌다.
- import해서 가져다 쓸 때에는 특별한 타입 주지 않고도 바로 사용할 수 있었다.
// useInput.ts import { ChangeEvent, useState } from "react"; export type InputType = [string, (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, () => void]; const useInput = (initial = ""): InputType => { const [value, setValue] = useState(initial); const changeValue = ({ target: { value } }: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => setValue(value); const resetValue = () => setValue(""); return [value, changeValue, resetValue]; }; export default useInput;
- 키보드를 입력하는 이벤트에는 타입으로
KeyboardEvent주면 된다. 아래 예제는 textArea에 onKeyUp 이벤트 함수다.
const onKeyUp = (e: KeyboardEvent<HTMLTextAreaElement>) => { ... }
- Optimistic Updates
- 참고한 내용
- 서버에서 데이터를 변경하기 이전에 쿼리 캐시를 변경하여 클라이언트 측에서 먼저 내용을 변경한다. 만약 에러가 발생하면 다시 이전 데이터를 쿼리 데이터에 넣는다(그래서 onMutate에서 getQueryData로 previousTodos를 리턴해주는 것이다).
- 즉, (1) 쿼리 데이터 변경(setQueryData) → (2) 클라이언트 측 UI 변경 → (3) 서버 업데이트 통신
- 예로 들면, 다음과 같은 형식으로 작성하면 된다.
useMutation({ mutationFn, onMutate: async () => { // 진행되는 모든 리패치들을 취소합니다. await queryClient.cancelQueries({ queryKey: [queryKey] }); // 기존 데이터를 snapshot 찍습니다. const previousData = queryClient.getQueryData(queryKey); // 여기에 성공 시 실행되는 코드들 작성합니다. // 성공을 가정하고 새로운 값으로 업데이트합니다. queryClient.setQueryData(queryKey, (old) => { return { ...old, data: [...old.data, newData] }; }); // snapshot 한 값을 context 내부 값으로 반환합니다. return { previousData }; }, // 실패시 onMutate 에서 반환한 리턴값 사용해 처리 onError: (__err, __newPill, context) => { queryClient.setQueryData(queryKey, context.previousData); }, // 성공이든 실패든 끝나면 항상 리패치합니다. onSettled: () => { queryClient.invalidateQueries({ queryKey: [queryKey] }); }, });
- React에서 dotenv를 사용하려면 변수 앞에
REACT_APP을 반드시 붙여야 한다!
// .env REACT_APP_SUPABASE_URL="https://~" REACT_APP_SUPABASE_API=APIKEY
- 스토리북 더 많은 addon 종류들 직접 사용해보면서 공부하기
- 클론코딩 한 것 타입스크립트로 리팩토링하기