TIL 2월 16일

김수찬 🤟

Facts

• somthing..

Feeling

• somthing..

Finding

• somthing..

Future (Optional)

김현우 😀

Facts

• 기차역 까지 전력질주하고 기차역에서 기차 못탈뻔
• 해왔던 내용 공유하고, 백과 연결까지(전부는 아니지만 만든내용들이 잘 된다는데 의의를)

Feeling

• 해왔던 것들이 잘 안될까 걱정을 했었는데 생각보다는 잘 되서 다행이었다.
• 같이 모여서 하고, 특히 물어볼 곳이 많으니 심적으로 편안해서 근래들어 코드 제일 오래 작성한 날 중 하루 였던 것 같다.
• react-query 관련해서 확실히 지식이 부족한거 같다. 전에 공부할 때 봤던 부분이 정확하게 기억안나는게 문제인 것 같음.

Finding

• react-query mutation으로 적용
• logout 버튼 수정(다은님 도움으로 빠르게 해결, void로 해뒀음... 왠지 클릭이 안되더라)
• 만들어둔 로직 연결 되는지 확인 해볼 수 있었음
• 내용 추가적으로 작성해두기

Future (Optional)

• 내일 로직 만들어둔거 추가 작성해서 종인님께 연락드려서 연결 해볼 수 있도록 하기
• 빠뜨린 연결부나 모달 안올려둔거 마무리까지 깔끔하게 할 수 있도록 하기

박규현 🤑

Facts

• admin유효성 검사, 응답 메세지 json화, api오류 수정, 삭제 연계성 부분 수정

Feeling

• pk를 이용하여 쉽게 삭제 가능

Finding

• MySQL ON DELETE CASCADE로 pk로 연결된 db 한번에 삭제
• 연계성 삭제 참고 자료
• https://www.mysqltutorial.org/mysql-on-delete-cascade/

Future (Optional)

백종인 🐭

Facts

• 팀원들과 코딩하며, 프론트 백 맞춰보기

Feeling

• 각자 어느정도 준비가 되어있고, 만나서 실시간으로 하니 효율이 좋다, 에러도 빠르게 잡을 수 있었음.
• 한 타임보다는 두 타임 정도로 연속해서 진행하니 진도도 쭉쭉 나가서 만족스러웠던 하루

Finding

• 테이블 생성을 위한 sql 파일 실행하는 법 알게 됨!
  • mysql -uroot -p < testFile.sql
  • https://hyunmin1906.tistory.com/103
• allowedMethods 에 PATCH 를 안해서 오류가 났었음, 이런 부분은 프론트에게도 큰 영향이 미치니 조심하자.

Future (Optional)

• 애매한 로직들 생각하고 정리해보기.

허다은 🐣

Facts

• 18:00 ~ 19:00 스마게 티타임
• 14:00 ~ 23:00 스터디 (with 김현우, 박규현, 백종인)

  • 현우님과 함께 API 연결

    • 친구 조회
    • 친구 요청
    • 친구 취소
    • 비밀번호 변경
    • 서버 생성

  • 모달의 background 누르면 모달 꺼지기 구현

  • [피드백 반영] public에 있던 이미지들을 assets폴더로 전부 옮기고, styled-components에서 절대 경로로 이미지 불러오기 → 해결 못해서 결국 상대 경로로 불러오도록 설정했음 (아래는 폴더구조)

    assets
      `-- fonts
      `-- icons
      `-- images
      `-- mask

  • [피드백 반영] 정규표현식 코드 수정 (match → test)

    const validateEmail = (email: string) => {
      return /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i.test(
        email
      );
    };
    
    export default validateEmail;

  • [피드백 반영] Register.tsx에서 step 코드 변경하기 → Array Lookup table 이용하였음

    const Register = () => {
      const { step, resetStep } = useRegisterStore(({ step, resetStep }) => ({
        step,
        resetStep,
      }));
    
      useEffect(() => {
        resetStep();
      }, []);
    
      const getRegisterComponent = [RegisterStep1, RegisterStep2, RegisterStep3];
      const Component = getRegisterComponent[step - 1];
    
      return (
        <LoginContainer>
          <HeaderHelmet title="회원가입 | Discord" />
          <AuthModal width={480}>
            <Component />
          </AuthModal>
        </LoginContainer>
      );
    };

Feeling

• styled-components 내에서 상대경로로 이미지를 불러오는 방법이 없을까? 분명 있을 것 같은데.. 좀 더 찾아봐야겠다.
• 오늘 페어 프로그래밍(?)했는지는 애매모호하지만, 음 어쨌든 혼자 하는 것보다는 역시 같이 코딩하는 것이 배울 것도 있고 재밌는 것 같다.

Finding

• hook은 component function내에서만 사용할 수 있다!

피드백을 주셨을 때 api를 보낼 때 공통적으로 header를 주는 부분을 axios의 interceptor를 사용하면 자동으로 header를 줄 수 있다고 하여 적용해보았는데, 나의 코드에서 header에 넣어주는 accessToken이 zustand의 useUserStore에서 가져오는 값이라서 에러가 발생했다.

clientApi.interceptors.request.use(
  (config) => {
    const { userInfo } = useUserStore();
    config.headers["Authorization"] = "Bearer " + userInfo.accessToken;
    return config;
  },
  (err) => {
    console.log(err);
    return Promise.reject(err);
  }
);

그래서 구글링을 해보니 hook은 component function 외에서는 사용할 수 없다고 했다. 다른 해결 방법이 없을까 구글링을 해보았지만 찾지 못해서 우선은 이전 코드로 모두 변경해놓았다.

Future

• 토요일에 채팅 맞출 준비해놓자!