📚금일 학습 내용 KPT
과제 따운! Vue! 따운! 나 우승!!
밥먹는 시간 포함해서 12시간이니까 순코는 한 10시간 한 것 같다. 어제 API 연결까지만 보고 껐는데 오늘 한번에 다 완성해서 기분이 좋다. 솔직히 아쉬운 부분이 없지는 않지만 할 일이 많아서 딥다이브 발표 빠르게 제출했다. 거기에 무한 노동요가... 있었다.. 간단하게 KPT와 일부 알게된 것들로 TIL을 작성하자면 다음과 같다.
📌Keep
- 즐겁게 코딩하기
- 배운것을 생각하면서 코딩하기
- 자신감은 갖되, 늘 나는 감자라는 사실 잊지 말기
❗️Problem
- 비록 과제를 끝내긴 했는데 원래 예정 시간보다 1시간 늦어졌다는게 아쉽다.
- CS, 코테 언제 공부하니?
📍Try
- 시간을 더 잘게 잘게 나눠서 분배하기
- 집중 안되면 빠르게 휴식하고 오기
💡모르면 Docs나 가이드를 정독하자. 그게 제일 빠르다.
axios default값이 get인걸 처음 알게 되었다..
아니면 모르는 걸 빨리 검색해야한다..
공식문서에서 serverless API 설정하는 방식이 아무리 봐도 이해가 안갔다. 곰곰히 생각해보니, request, params, body, query 등에 대한 개념정리가 너무 안되어서 였다고 생각하고 이 글을 필두로 몇 가지의 개념을 정리하고 API 코드를 작성하였다.
막상 작성하고보니 기본보다 훨씬 간소화됐다. 잘 짠건지는 모르겠지만..?
💡URL공백을 없애주는 JS 내장함수
여러 기능들을 구현하던 중 주소창의 쿼리문을 가져와 써야하는 경우(새로고침)가 생겼다. 하지만 해당 내용을 그대로 가져오니 URL에서 공백을 나타내는 %20도 그대로 출력이 되었고 에러가 났다. 이때 사용할 수 있는것이 바로 decodeURIComponent 라고 한다. 사용법은 매우 간단하다.
const encodedString = "spider%20man";
const decodedString = decodeURIComponent(encodedString);
console.log(decodedString); // 출력: spider man❗ 라우팅 처리의 어려움
생각보다, 아니 상상 이상으로 라우팅처리 부분에서 어려움을 겪었다. 사실 나머지 부분에서는 실습을 잘 따라한 모양인지 몰라도 생각한대로 로직을 그려낼 수 있었고, 필요한 기능을 검색해서 적용할 수 있었다. 하지만 라우팅 관련해서는 고려해야할 요소가 너무 많았다.
새로고침인지? 앞으로 가기? 뒤로가기? query가 있는지? 등등 이 부분에서 시간을 너무 많이 투자했다.
다만 그랬던 이유 중 하나는 조건을 너무 간단하게 생각해서 아닌가 라는 생각이 드는데, 왜냐하면 생각보다 1가지의 경우의 수 만 엮인 것이 아닌 2,3가지의 데이터를 고려해야하는 상황이 훨씬 많았는데 나는 자꾸 쉽게 생각하려고 하다보니 오히려 시간이 더 소모된 것 같다. 한 번 롤백도 했다..
♻️재사용!
강사님 강의에서 가져온 것들이 2개나 되지만... 내가 하나 생성해서 여러 곳에 적용하고 사용해봤다! 신기하고 편리하고 잘 되었다. 이처럼 반복되는 코드를 하나의 파일로 저장해두고 효율적으로 코딩하는 습관을 잘 길러야겠다.
🎨CSS는 하면서 늘어요
이전 팀 멘토님이셨던 현주 멘토님께서 우리 팀에게 얘기해준 내용이였는데, 굳이 기존 프로젝트 CSS를 다루기보다는 클론코딩이나 신규 프로젝트를 많이 해보라고 권장하셨다.
이번에 프로젝트를 하면서 느낀 건데 처음부터 설계를 하면서 들어가다보니 CSS에 대한 내용도 자연스럽게 연상이 되면서 어디에 어떤 코드를 왜 에 대한 개념이 99.9% 잡힌 채로 코드를 구현했다. 물론 피드백을 봐야겠지만 이전에는 구글이 시켜서요 였다면 지금은 얘는 이래서 얘를 써야하는 것 같아요!라고 이야기 할 수준은 된 것 같다.
🛰️첫 TS 실전
사실 큰 타입들은 과제 요구사항에 같이 제공해주셨지만 몇 가지 내가 생각해서 사용한 것들도 있다. 어... 어... 이거 말고 타입 단언 몇개랑 타입 가드의 개념을 쓴 적이 몇 번 있는데 잘 기억이 안난다...여튼 간단하지만 써봤다..! 그리고 생각보다 유용했다. 미리 에러를 고지해주니 미리미리 고칠 수 있었다.
// 검색 상태 타입
export type SearchResult = 'init' | 'ok' | 'none' | 'end'
searchStatus: 'init' as SearchResult,🛡️방어코드와 🌊코드 흐름
이제는 방어코드가 매우 익숙해졌다. 단순히 tryCatchFinally로 묶는 것 뿐만 아니라 함수를 사용할 때도 예외처리하는 코드를 넣는 것이 습관이 되기도 했고 결국 현업에서는 그런 로직들을 잘 처리하는 사람들 당연히도 선호할 것이기 때문에.. 열심히 연습하고 있다.
사실 Vue라는 프레임워크를 배운 것도 정말 재미있고 도움되었지만 영웅강사님의 코딩을 따라하면서 느낀 것은 🌊코드에 흐름이 보인다는 것이다. 아 이 데이터는 어디서 왔고 어떻게 제어해야하는구나 라는 생각이 들고, 이 페이지는 여기서 연동돼서 이 데이터를 보여주고 이 컴포넌트랑 연결해야하는구나 라는 생각들이 많이 든다.
물론 아직은 부족하다. 컴포넌트나 페이지에 대한 개념이 여전히 불확실하고 나름 나눈다고 나눠서 쓰는데 잘 쓰고 있는건지 모르겠다. 그래도 백지 상태였던 예전보다는 훨씬 낫네잉...ㅎ
📖소회
위에 잔뜩 쓴 것 같으니 내일을 기약하면서 자야겠다.
내일도 달려봅시다🔥
TIL 작성 소요시간 약 40분
