🔥 오늘 한 일
- 프로그래머스 Lv.1 삼총사, 숫자짝궁 2문제 완료
- [개인 플젝] JS → TS 마이그레이션 완료
- [TS 플젝]
- client 로그인 기능 구현 (with firebase)
- 회원가입 server-client API 통신 구현
🚨 Error Handling
타스 플젝 중 발생한 아래 에러들은 아래 포스트에 따로 포스팅함!
🔗 [TS - Error Handling] JS → TS 마이그레이션 중 맞닥뜨린 error 모음zip
1️⃣ Argument of type ‘{}’ is not assignable to parameter of type ~.
2️⃣ Argument of type ‘ChangeEvent<FormControlElement>’ is not assignable to parameter of type ‘ChangeEvent<HTMLInputElement>’.
💡 CORS error
cors 설정해놓고 axios.post(`${process.env.REACT_APP_API_URL}/api/user/join`, body) 요렇게 url를 설정했었어야 했는데 그냥 axios.post(`/api/user/join`, body) 요렇게 설정해서 계속 에러가 난거였다.. 전 플젝에서 cors error로 많이 애먹었었는데 cors error인 줄도 모르고 계속 삽질해버린거였다,,
해결 방법은 2가지가 있는데
1.http-proxy-middleware라이브러리를 이용해서 setupProxy.js 파일을 별도로 생성하는 방법
2. 서버쪽에서 cors() 설정을 하고, 클라이언트에서 .env 설정하는 방법
2가지 다 적용해봤지만 이번 플젝에선 2번째 방법으로 하기로 했다!
🧚 새롭게 알게 된 내용
tsc app.ts --watch(-w)
// 타스가 파일을 관찰하고 파일에 변경 사항이 있을 때마다 다시 컴파일
// But, 특정 파일을 구체적으로 지정해줘야 하는 단점 존재
// 여러 파일들이 타스로 관리해야 할 프로젝트라고 타스에게 알려주는 명령어
tsc --init
// 위의 명령어 실행시 tsconfig.json 파일이 생성됨
// 해당 프로젝트의 모든 ts 파일들 컴파일 (시간 좀 걸림)
// 모든 타스 파일에 관찰모드 적용
tsc -w👀 MEMO
// 특정 문자 제거
let str = 'helllo world';
// 처음 등장하는 하나의 문자만 제거
str = str.replace(l, "");
console.log(str); // hello world✍️ Diary
- 프로그래머스 숫자 짝궁 문제 푸는데 계속 시간 초과가 나서 배열에서 객체로 접근 방법을 바꾸면서 시간을 넘 많이 써버렸따,,
- 타스 플젝 구현하기 전에 자스로 구현한 개인 플젝을 타스로 먼저 바꿔보면 도움이 될 것 같아서 타스로 바꾸는 과정에서 수많은 에러들 모두 해결 완료.. 도저히 해결 안되서 any type으로 일단 정의해놓은 부분도 있긴 하지만 지금 내 머릿 속 개념으로는 이게 최선.. 😵💫
- 타스 플젝 서버랑 axios 통신하는 과정에서 계속 에러가 나서 에러 원인찾고, 해결하는데도 꽤 오래걸렸다.🥲 알고보니까 별거 아닌 문제였지만,,
FE developer