Skip to content

TIL 1월 20일

Jump to bottom
GyuHyeon Park edited this page Feb 22, 2023 · 14 revisions

김수찬 🤟

Facts

  • 팀원들과 스터디
  • N : N SFU 시그널링 체널 제작

Feeling

  • 뭔 에러가 이렇게 뜨는지 모르겠다;

Finding

  • SFU가 생각보다 연결성이 그렇게 좋지 못한 것 같기도하고.... 계속 손봐야하는데.. 어렵다
  • README 업데이트

Future (Optional)

  • README 업데이트 완료!


김현우 😀

Facts

  • 죽전역 쪽에서 스터디 진행(with 종인,수찬,다은)
  • 대한 짬뽕 맛있었다.
  • atom 단위 분석 진행
  • react-query 적용

Feeling

  • 확실히 데이터 fetch를 위해서 작성했던 custom hook들 대신에 react query를 쓰니 편한거 같다.

Finding

  • atom 단위로 분석하는걸 figjam에 일단 추가하고 문서화 하는 쪽이 맞는 거 같다.(다은님 의견 받고)

Future (Optional)

  • 설날 동안 타입스크립트 열심히
  • atom 단위 분석 정확하게 작성하기


박규현 🤑

covid 19 issue 😭😭



백종인 🐭

Facts

  • 팀원들과 스터디 진행
  • HttpEntity, ResponseEntity 구조 공부
  • Spring Cloud Gateway + Filter (Jwt) 관련 공부
  • msa config 정보를 git에서 통합 관리할 수 있도록 설정.

Feeling

  • 죽전역에 조조 칼국수가 있었다. 다음에 가야지 !
  • 웹 개발자면, http에 대해서는 빠삭하게 알고 있어야 할 거 같다.

Finding

  • 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

Future (Optional)

  • 설날이라 잘 모르겠지만.. jwt 로직 공부해서 filter를 유저서버에서 gateway 단으로 넘기는 작업을 해야한다.
  • config 관리하는 repo를 public으로 하면 괜찮은데, private로 하면 오류가 난다. 해결법 강구..


1/20

허다은 🐣

Facts

  • 오뚜기 팀원들과 카페에서 모각코 (21:00 ~ 23:00)
  • react-query의 Optimistic Updates를 알게 됨

Feeling

  • 오랜만에 집이 아닌 외부에서 코딩을 하니 리프레쉬 되고 좋았다. 정신 건강을 위해 가끔은 나가서 기분 전환 하면서 코딩 해야겠다. 팀원들과의 모각코도 되도록이면 시간 내서라도 참가해야지.
  • 이번주에 목표한 바들을 많이 이루지 못했다.. 주말동안 목표를 이루지 못한 원인을 분석하여 재목표를 세워야지.

Finding

  • 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>) => { ... }
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

Future

  • 스토리북 더 많은 addon 종류들 직접 사용해보면서 공부하기
  • 클론코딩 한 것 타입스크립트로 리팩토링하기

TIL

Template 📑

1월 2주차 ☃
1월 3주차 🐇
1월 4주차 👨‍💻
2월 1주차 🍒
2월 2주차 🚀
2월 3주차🔮

Study

Clone this wiki locally