코딩쌀롱

질문에 대답 못 한 게 많았어서 기대를 하지 않으려고..노력했다. 믿기지 않지만 인턴에 합격했다. 코쿼 종료 이후 자신감이 낮아진 상태라 걱정이 되기도 한다. 하지만 이 기회로 더 성장하고 자신감을 가질 수 있지 않을까! 인턴십 기간동안은 진짜 열심히 성실하게 살아야지 🏃🏻‍♀️목표🏃🏼🏃🏽‍♂️ ✔️ 규칙적인 생활 밤낮이 바뀐 생활패턴을 오래 가지고 있었는데 늦게 자는 습관을 바꿀 것. 운동도 일주일에 2번 이상 하자. ✔️ 구체적인 계획 매일, 매주 해야하는 투두리스트를 정해 꾸준히 하자 (TIL, 알고리즘, 플젝, 강의, 독서 ...) 어떻게 해야 하루를 효율적으로 채울 수 있을지 고민해서 실행 (오전, 오후, 저녁으로 나눠 계획한다던지..) ✔️ 기록 배운 것, 느낀 점들을 TIL로 기록 매주 회고

개발 공부를 시작하고 처음으로 면접을 봤다. 준비하면서 공부할 시간이 더 있으면 좋겠다고 생각하기도 했지만 한편으로는 빨리 끝나서 계획한 공부들을 하고 싶다는 생각도 있었다. 면접을 잘 보진 않았지만 그래도 끝나서 후련하다!😝 면접 보기 전 이야기를 먼저 하자면, 📋 이력서 제출은 코드스쿼드 프로젝트 3가지를 노션으로 적어냈다. 어떤 것들을 어떻게 구현했는지 간단하게 적고, 프로젝트를 진행하면서 했던 고민들을 적었다. 🖥 코딩 테스트는 3문제가 나왔었는데 어렵지 않았다. 부스트캠프 코테보다 훨씬 쉽게 나왔었음 면접 준비 코드스쿼드가 끝나고 긴 휴식을 가졌어서 면접 메일이 왔을 때 기쁘지만 당황하기도 했다. 면접 날짜가 바로 다음 날이 될 수도 있는 상황이어서 왜 그렇게 쉬었을까 하는 후회를 엄청 했다😕 ..

원인을 모를 때는 정말 모르겠다가 원인을 알고 해결하고 보면 꼭 별 거 아니고 당연한 것을 못 알아챘다는 생각이 든다. 고민할 땐 진지하지만 해결한 후에는 아오💢 하고 넘어가기 쉬워 작성해본다. 📌 useReducer를 사용한 곳에서 오류 발생 오류 메시지를 읽어보면 inputReducer의 반환값이 {...} | undefined로 되어있다. 📌 useReducer 함수 useReducer 내부는 switch문으로 되어 있고, action.type은 'title', 'description', 'color'로 세 경우가 있다. 어떻게하면 반환값이 undefined일 가능성이 있을까. action.type이 'title', 'description', 'color'이 아닌 경우! 그래서 순간 switch문에..

📌 CSR(Clinet Side Rendering) body 안에 id="root"만 들어있음 서버에 HTML 요청 텅텅 빈 HTML 받음 HTML에 링크된 js파일 요청 모든 소스코드가 들어있는 js 받아 렌더링 로직, 프레임워크, 라이브러리의 모든 소스코드: 사이즈 크고, 오래 걸림 필요한 데이터를 서버에 요청해서 동적으로 HTML 생성 viewable(TTV), interactable(TTI) 단점 첫 화면을 보기까지 오래 걸림 좋지 않은 SEO(Search Engine Optimization) 검색 엔진은 웹사이트의 HTML 분석을 하게 되는데, CSR HTML body는 텅텅 비어있어 분석하는 데 어려움 📌 SSR(Server Side Rendering) 서버에서 필요한 데이터 모두 가져와서 H..

코드스쿼드 6개월 과정이 종료됐다..시간 참 빠르다 1월부터 짧으면 이틀부터 길면 3주까지의 미션 완성만을 생각하며 계속 하다보니 6개월이 지났다. 미션이 쉽지 않고 양이 많다보니 미션을 내 마음에 들만큼 제대로 끝낸 게 없었다. 미션 구현에 급하다보니 개념정리를 제대로 못 하고 넘어간 부분들이 많아 코드스쿼드가 종료된 이 시점부터 시작하려고 한다. ✘✘✘ 기초 단단히 다지기 - React : 공식문서, 구글링 - TypeScript : 인프런 강의, 구글링 - Git : 엘리강의 - 알고리즘 : 코없프 유튜브 강의, 헬로코딩 책, 백준, 릿코드 풀이 - 크롱의 Quiz - 크롱의 면접 질문 리스트 ✘✘✘ 가져다 쓰는 게 아니라 확실하게 정리 - useReducer - React.memo, useMemo..

Q랑 프로젝트를 같이 하면서 배우는 게 많다. 미션 마감까지 기능 구현하느라 급할 수 있는데 에러 처리라던지 로딩 처리를 하는 것을 보고 많이 배웠다👍🏼 useRecoilValueLoadable의 state === 'loading'이면 스켈레톤, state === 'hasError'이면 에러 컴포넌트 function LabelTable() { const { state, contents } = useRecoilValueLoadable(LabelOrMilestone('label')); return ( {state === 'loading' && } {state === 'hasError' && {contents}} {state === 'hasValue' && contents.map((labelInfo: labe..

request body의 형태가 json일 때, headers의 Content-Type: application/json 추가해줘야 함! { method: 'POST', headers: { 'Authorization': `bearer ${token}`, 'Content-Type': 'application/json' } body: { ... } }

✱문제1. 체크박스 체크되는 영역 문제 : chakra UI의 Checkbox를 사용해서 선택하는 모달창을 만들었는데, Checkbox만 클릭해야 체크되고 그 외의 MenuItem 요소부분을 클릭하면 모달창이 닫히거나 체크되지 않는 문제 생각 : ui 라이브러리를 사용하지 않고, 직접 짰다면 label을 이용해서 쉽게 해결할 수 있는 문제인데.. 만들어진 걸 가져다 쓰려니까 내가 주는 className이나 data-id값이 어디에 저장되는지 알 수가 없어 많이 헤맸다. 해결 : MenuItem > ItemWrap, Checkbox 구조에서 MenuItem > Checkbox > ItemWrap 구조로 변경 체크박스 자식인 ItemWrap을 클릭해도 체크가 된다. 하지만 라벨 width === 아이템랩 w..

✱JWT 디코딩은 어느 쪽에서..? JWT 토큰을 서버에서 받아서 로컬스토리지에 저장을 했다. 토큰의 public claims로 사용자 이름, 프로필 사진 url이 인코딩되어 있다.이 정보를 사용하려고 할 때, 프론트에서 디코드를 하는 것이 맞는 것일까. 아니면 백엔드에서 디코드를 하고 응답으로 받는 것이 맞을까? 16일에 적었던 글에 큐랑 이야기했던 부분에 대해 간단하게 정리했었다. 요약하면, 보안이 필요한 예민한 정보가 아니라고 하더라도, 프론트에서 디코드를 하는 것보다 백에서 해주는 게 맞을 것 같다는 내용. 그 이후에 백엔드 분과 회의할 때 디코딩을 어떻게 해야할지 말씀을 드려봤다. 백엔드 분께서는 jwt 토큰에 있는 내용들이 예민한 내용이 아니기 때문에 프론트에서 바로 디코딩을 해서 정보를 사용..

✱dataset 상황 : 체크박스 모달에서 라벨이 선택되면 모달창이 닫혔을 때 선택된 라벨이 렌더링돼야 한다. 의도 : 모달 내 메뉴 아이템 요소에 dataset속성으로 라벨에 대한 정보를 객체로 넣고, 클릭 && checked 됐을 때 dataset 정보를 state로 저장해서 렌더링하려고 했음 문제 : dataset의 반환값이 DOMStringMap 이라서 객체를 넘겨줄 수 없음..그냥 문자열로만 받을 수 있음. 이걸 왜 이제 알았지...? 해결 : 코드가 좀 늘어나긴 하지만 각각 키로 주려고 했던 정보들을 dataset을 여러개로 해서 보냄 그리고 클릭핸들러에서 그 정보들을 객체로 만들어줌. ... Object.assign({}, element.dataset) 그리고 추가로, data- 뒤에 가능한..