record4me

24_0528 실시간 제작 중 시작 가이드$ yarn create vite ? Project name : >> vite-project vue-todolist ? Select a framework: >> - Use arrow-keys. Return to submit.> VueV Select a framework: >> vueV Select a variant : >> - Use arrow-keys. Return to submit.> JavaScriptV Select a variant: >> JavaScript vite 초기화 끝   - vscode 세팅 시,권장 익스텐션으로 vue - Official 설치

💥트러블 슈팅💥 📌 관련 이슈 input값 타입에 대한 트러블 슈팅 해결 -문제 : 유효성 검사로 공백을 제거 하기 위해 해당 문자열에서 공백을 모두 제거해서 빈 문자열로 대체하려고 replace함수를 사용했지만, {}' 형식에 'replace' 속성이 없습니다." 라는 메세지가 뜸. - 원인 : useInput의 initialState의 interface타입을 any에서 unknown으로 바꿨을 때, 타입스크립트가 interface에서 지정한 string타입을 인지 못 함. - 방안1 : as string으로 타입을 확정해줌. - 방안2 : 매개변수에만 제네릭을 사용해서 매개변수로 들어오는 initialState의 값에 제네릭으로 타입지정해 주기. - 방안3 : 사용된 useInput 커스텀 훅의 in..

✨타입스크립트의 컴파일러✨ - 컴파일러 컴파일러라는 건 프로그래밍 언어로 이루어진 소스 코드를 다른 프로그래밍 언어로 변환하는 도구야. 타입 스크립트의 컴파일러인 tsc는 타입스크립트를 자바스크립트로 변환해줘. 📌1- 타입 검사를 해줘. - tsc라는 소스코드의 정적 타입 검사를 수행해. => 그래서 개발자가 코드에서 타입 관련된 오류를 바견해서 수정할 수 있어. 📌2-에러 메세지 해석할 때 도움이 돼 - 타입스크립트의 컴파일러는 소스 코드의 어디에서 에러 메세지가 난다며 표시해줘. - 보통 자바스크립트에선 런타임 오류가 나면 에러가 대충 어디서 터진 것 같아도 정확하게 알기 위해선 추가적인 로그를 설치해서 로그를 소스 코드에 삽입하고 그 사이의 경계값들을 보는데 - 타입스크립트에서는 에러 메세지를 해석..

✨ 자바스크립트의 약점 📌 1. 실행시간에 결정되는 변수타입 - 자바스크립트는 변수 타입이 실행 시간에 결정되니 때문에 따로 타입을 지정하지 않았어. 예를 들면, common.js 시절에는 var라는 키워드, es6 때의 경우는 let, const라는 키워드를 써서 변수를 정의했어. const는 상수, let은 변수라고 보면 돼. 말 그대로 이 변수가 값이 변할 수 있는지 또는 고정되어 있는 지를 보고, 소수점 숫자인 지, 문자인 지 타입을 명확하게 지정하지 않았어. => 그래서 자바스크립트는 변수 타입이 실행 시간에 결정될 수 밖에 없어. 들어올수 있는 변수의 데이터들이 너무 다양하기 때문이야. 📌 2. 약한 타입을 체크 - 그 외에는 개발자의 실수로 인한 오류가 발생하기 쉬워. 이런 오타같은 실수가 ..

Keep - 현재 만족하고 있는 부분 react-query와 리덕스를 같이 써서 기존에 배운 것에 적용할 수 있는 기회됐습니다. 이번 협업 때도 issue와 PR로 프로젝트 관리가 잘 되어서 좋았습니다. 미디어 쿼리로 반응형을 구성해본 게 재밌었습니다. 팀원분들에게 기술적으로 배울 수 있는 것들이 많아서 좋았습니다. 예를 들면, API로 만든 지도 검색 리스트를 만들거나, 리액트 쿼리를 이용한 CRUD, 이미지 변경들을 배울 수 있었습니다. Problem - 불편하게 느끼는 부분 남해리 supabase의 문서가 의외로 다른 문서보다 잘 되어있었음에도 method를 활용을 원활하게 하지 못해서 아쉬웠습니다. issue, PR말고도 리뷰, discussion, wiki, todo 기능이 있었는데 이번에 사용..

thunk에서 반환된 data가 fulfiled에 payload로 가지 않는 버그 해결 추측 오타나 action이름이 잘못 됐을 것, return 하는 방법이 잘못된 것. ex) thunkAPI.rejectWithValue(), thunkAPI.fulfillWithValue활용 안 한 것 시도 1. thunk안에서 return을 thunkAPI.fulfiledWithValue(data) 이렇게도 써보고 마이그레이션된 방법인 그냥 return data도 해봄 2. __getletterCard의 thunk함수와 extraReducers를 처음부터 다시 써 봄. 원인 1. extraReducers의 이름이 "s"가 빠져있는 extraReducer라고 되어있어서 extraReducers의 기능이 처음에 제대로 ..

리덕스 툴킷 리덕스 툴킷은 리덕스를 배웠던 구조와 패러다임이 전혀 다르지 않아. 새로운 게 아니야. 쓰는 방법은 useSeletor, dispatch 의 업데이트 부분들이 같고, 바뀐 부분은 설정하는 부분들인 모듈(modules)부분들이 달라. 리덕스 툴킷 설치 방법 $ yarn add @redux/toolkit react-redux $ npm install @redux/toolkit react-redux 기존의 리덕스를 툴킷으로 바꾸는 방법은 쉬워. 리듀서는 똑같이 모듈스안에서 만들어져. 과정은 처음에 creatorStore, rootreducer, store를 provider에 껴서 만드는 건 같아. 기존의 리덕스와 리덕스 툴킷의 차이 기존 리덕스에선 휴먼에러를 방지하기 위해 액션 밸류(action)..

네번째 프로젝트 KPT 회고 사용자들이 오늘의 음악을 추천하며 서로 공유할 수 있는 뉴스피드 프로젝트를 만들었어. 구현하고 보니 마감기한은 지켰지만 추가 구현 사항을 구현하지 못 한 게 많이 아쉬웠어. 물론 팀워크도 좋고, 프로젝트 관리도 잘 되서 정말 좋아. github의 issue와 Pull Request로 관리했거든. Keep - 현재 만족하고 있는 부분 - 제 시간 내로 필수사항을 구현한 것 - issue와 PR을 사용해서 팀원과 소통이 잘 된 프로젝트 관리 - 와이어 프레임대로 잘 완성된 부분 Problem - 불편하게 느끼는 부분 - 선택 구현 기능을 구현하지 못 한 것 뿐만 아니라 일부 버그를 바로 캐치 못 해서 나중에서야 해결한 것 - API설계를 확실히 하지 못해서 실시간으로 데이터 구조..

git push 하며 뜬 rejected git switch 하기 전에 commit과 push를 마치고 이동해서 새 데이터를 add, commit했는데도 head위치가 불안정하게 이동한 줄 알았는데 이동한 브랜치에서 그전에 원격저장소에서 직접 수정한 내역을 로컬로 안 가져와서 생긴 문제였어. 리드미를 원격저장소에서 직접 수정했거든. 아래 같은 오류가 떠서 해결했어. 이건 두번째로 뜨는 건데 이전엔 git rebase로 해결했는데 이런 방법도 있더라구. 해결한 방법 $ git log $ git reset 628b04ecf2f8c1a3d6fb8f5c307fbd647fb5b284 $ git stash $ git pull origin props-drilling $ git stash pop $ git add . ..

-세번째 프로젝트를 마치며, 휴먼에러로 삽질만 몇 번을 했는 지 모를 2일을 보내고 다른 2일간은 prop-drilling, 1일은 redux로 개선하는 시간을 보냈어. 첫번째 삽질만 아니었어도...하지만 의미있는 삽질이었어. ㅎㅎ prop-drilling-context-redux 처음 prop-drilling할 때 휴먼에러로 고생한 것과 초기 state 데이터 형태가 배열과 객체로 따로 관리되서 setState로 변한 값을 설정해줄 때 데이터 형태를 어떻게 뿌려줄 지 무지 고민했던 것 같아. contextAPI를 사용해서 state를 공유하니까 정말 세상 편하지 않을 수가 없더라. prop-drilling에서 답답했던가 1차로 싸악 풀렸어. 하지만 최상위 컴포넌트에서 state를 보내주려고 하니까 왔다..