record4me

한 달 인턴 지원 전, 내가 취업준비 관련하여 고민하던 것-백엔드와 소통해서 만든 프로젝트가 없었다는 게 아쉬웠어. baas로만 구현했던 프로젝트가 대부분이어서 현업에서 백엔드와 같이 프로젝트를 완성하기엔 경험이 부족하지 않을까 생각했어.  다른 포지션과의 REST API통신을 하며 겪은 문제나 서로 필요한 데이터가 무엇인 지 주고받으며 기능 구현을 해보고싶었어. 프론트엔드에서 API통신하며 필요한 데이터를 정리할 API설계를 효율적으로 짤 수 있지 않을까 싶었지. 한 달 인턴을 지원하게 된 이유(무엇을 기대하고 지원했는 지)-무엇보다 현업에서의 백엔드와의 소통을 대비할 수 있고, 프론트엔드에서 데이터를 사용할 때 편하게 API 통신을 해볼 기회라고 생각했어. 사수분이 계시다면 사수분께 질문을 드리고 답..

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 . ..