코딩쌀롱

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

문제 Leetcode Find Pivot Index 문제 - input: 정수 배열 nums - output: pivot index의 왼쪽의 모든 값의 합과 오른쪽의 모든 값의 합이 같을 때의 pivot index, 없으면 -1 풀이 80ms / 98.33% var pivotIndex = function(nums) { let total = nums.reduce((a,b) => a+b) let leftSum = 0; for(let i = 0; i < nums.length; i++) { const rightSum = total - leftSum - nums[i]; if(leftSum === rightSum) return i; leftSum += nums[i]; } return -1; }; pivot 인덱스 ..

알고리즘을 다시 처음부터 시작해보려고 한다. 코드스쿼드가 끝났으니 이제 모두 내가 알아서 해야한다! 처음부터 매일매일 쌓아가보자👊🏼 문제 Leetcode Move Zeroes 문제 - input: 정수 배열 nums - output: 0이 아닌 정수는 순서 그대로, 0만 오른쪽으로 이동한 배열 - 주의! 배열 복사하지 말고 in-place로 풀이 76ms / 93.54% var moveZeroes = function(nums) { let left = nums.indexOf(0); if(left === -1) return nums; let right = left; for(let i = left; i < nums.length; i++) { if(nums[right] === 0) right++; else { ..

7월 6일 토스의 비동기 영상을 보았다. 최근에 useRecoilValueLoadable 코드를 블로그에도 작성(링크)했었는데, 가독성이 좋지 않은 코드였다! 깔끔하다고 생각했어서 충격이기도 했고, 잘못된 점을 알게돼서 기쁘기도 했다. async 함수의 장점을 다음과 같이 설명했다. '성공하는 경우'만 다루고, '실패하는 경우'는 catch절에서 분리해 처리한다. '실패하는 경우'에 대한 처리를 외부에 위임할 수 있다. 비동기가 성공적으로 응답을 받았을 때의 코드만 작성해서 동기적으로 보일 수 있게끔 하고, 로딩과 에러는 외부에 위임하는 것. 그래서 내가 작성했었던 useRecoilValueLoadable의 코드는 좋은 코드라고 하기 어려웠던 것이다. 리액트 컴포넌트 내에서 조건문으로 성공, 로딩, 에러..

코드스쿼드 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..

📌 상황1 이슈 트래커의 라벨페이지에서 라벨들을 get할 때 selector를 사용해서 response 값을 받으려고 했다. 그런데 라벨, 마일스톤을 한 selector로 받아올 수 있으면 좋을 것 같아 인자를 넘길 수 있는 selectorFamily를 사용했다. path값을 인자로 넘겨서 라벨, 마일스톤이 한 selector를 사용할 수 있게끔 했다. ✱selectorFamily - 공식문서 공식문서를 보면 코드가 아닌 글들은 이해하기 어렵다ㅠㅠ 좀 더 익숙해지면 이해할 수 있게 될까... selector 문서와 같이 영어로 보면서 이해하려고 노력해봤다. ‣ key: 내부적으로 atom을 식별하는데 사용되는 고유한 문자열, 앱 전체의 atom, selector에 대해 고유해야 함! key값이 똑같은 게..

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 토큰에 있는 내용들이 예민한 내용이 아니기 때문에 프론트에서 바로 디코딩을 해서 정보를 사용..