Code Playground

< h1 > Code Playground </ h1 >

아주 오랜만에 다시 시작한 알고리즘 문제 풀기! (그동안 노션으로 휘리릭~ 간단하게 정리하는 것에 맛들려서 블로그에 손을 안댔는데 매우 반성하고 있다. 하하...) Squares of a Sorted Array Given an integer array nums sorted in non-decreasing order, return an array of the squares of each number sorted in non-decreasing order. Example 1: Input: nums = [-4,-1,0,3,10] Output: [0,1,9,16,100] Explanation: After squaring, the array becomes [16,1,0,9,100]. After sorting, i..

코로나때문에 크리스마스 연휴지만 어디 나가지도 못하고 집에 갇혀 지내는 요즘, 여기저기 돌아다니면서 연말 기분을 내는 대신 집에서 차분히 2020년을 되돌아보며 1년을 회고하자는 마음으로 노트북을 켰다. 올해는 정말 많은 일들이 일어난 해였다. 작년 여름에 개발자가 되겠다고 굳게 결심하고 공부를 시작한 것이 결실을 맺어 올해 1월 6일에 프론트엔드 개발자로 첫 출근을 하였다. 회사에서 정말 좋은 동료들을 만났고, 1년 간 많은 성장을 했다. 내가 1년간 한 것과 아쉬운 것들을 간단하게나마 정리해보려고 한다. 입사하고 최종 부트캠프에 합격하기까지 (1Q) 회사에 잘 적응 부트캠프 기간에 3가지 과제 해결 (레거시 API 교체 / 사내에서 사용하는 라이브러리 제작 및 개선) 부트캠프 합격 웹팀 코드 스타일 ..

import { ExampleComponent } from './example'; // ... 회사에서 react-router를 쓰면서 주로 위와 같은 방식으로 routing을 하다가 router v5 버전부터 아래와 같이 Route 컴포넌트 안에 child 컴포넌트를 합성하는 방식이 더 권장되는 것을 발견하고 바꾸었다. import { ExampleComponent } from './example'; // ... 근데 이걸로 바꾸는 순간 한 가지 이슈가 발생했는데... 😨 바로 이 이슈였다. 탭을 이동할 때마다 주소 뒤에 query parameter가 바뀌고, 이 query parameter가 바뀔 때마다 UI가 바뀌는 화면이 있었는데, Routing 방식을 바꾸니까 갑자기 탭을 아무리 클릭해도 화면이..

리액트 상태 관리 리액트로 개발을 할 때 리액트에서 기본으로 제공하는 상태 관리 메소드들을 사용하는 것이 가장 간단하고 편리하겠지만, 약간의 한계는 분명히 있다. 리액트 컴포넌트의 상태는 상위에서 하위로 단방향으로 흘러갈 수밖에 없는데, 이 과정에서 거대한 트리 구조가 만들어지고, 무수히 많은 re-render가 일어난다. 자식 컴포넌트에서 부모 컴포넌트의 상태를 제어하기 위해서는 부모 컴포넌트가 본인이 가지고 있는 상태를 제어할 수 있는 메소드들을 자식 컴포넌트에 전달을 해주어야만 가능하다. 그러니까 자식 컴포넌트에서 상위에서 전달된 메소드들로 무언가 상태를 변경하면 부모 컴포넌트들부터 하위에 연결된 컴포넌트들 전부가 re-render 된다. 리액트에 Context API라는 것이 생기면서 리액트에서도..

JavaScript에서 숫자 타입이 아닌 값을 숫자로 바꿀 때는 주로 Number나 parseInt를 사용한다. Number When used as a function, Number(value) converts a string or other value to the Number type. If the value can't be converted, it returns NaN. Number는 함수로 사용 시 string이나 다른 값들을 Number type으로 변환해준다. 만약에 값을 변환할 수 없을 때는 NaN을 리턴한다. parseInt The parseInt() function parses a string argument and returns an integer of the specified radix..

useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); 대부분 useState hook으로 리액트의 상태 관리를 하게 되는데, 가끔 상태 로직을 상태 변화가 일어나는 컴포넌트로부터 분리시키고 싶을 때 useReducer를 유용하게 사용할 수 있다. useReducer는 주로 복잡한 상태 로직을 가졌거나 다음 state가 기존 state에 의존성을 가질 때 사용된다. 또한 useReducer를 사용하면 하위 컴포넌트에게 callback 함수가 아니라 dispatch 함수를 넘겨줄 수 있어 유지보수 관점에서 매우 편리해진다. (하위 컴포넌트들에게 계속 prop으로 전달, 전달, 전달을 할 필요가 없어지니까!) 사실 Redux의 ..

Kent C. dodds의 Epic React 강의에서 React hooks - useEffect: HTTP requests 챕터를 정리해보려고 한다. 일단 간단하게 API를 호출해서 화면에 API 응답으로 온 랜덤 강아지 이미지를 보여주는 예시를 만들어보려고 한다. const fetchRandomDog = (error) => fetch("https://dog.ceo/api/breeds/image/random").then((data) => { if (error) { throw error; } return data.json(); }); 그리고 에러가 나는 상황을 연출하기 위해 인자로 error가 넘어오면 error를 throw하고, 그 외의 경우에는 fetch받은 data를 JSON format으로 변환해..

정말 오랜만에 글을 쓰려고 블로그를 켰더니 너무 낯설다. 회사 일이 바쁘다는 핑계로 살짝 멀리했었는데 블로그야 미안... 회사 슬랙에 Kent C. dodds의 Epic React 강의에 관심있는 사람 있으면 같이 공동구매해서 듣자는 제안이 올라왔는데 쿨하게 회사에서 지원을 해줘서 공짜로 들을 수 있게 되었다. 🎉 강의 챕터는 요렇게 구성되어있다. 넘나 알찬 구성 🥰 React Fundamentals React Hooks Advanced React Hooks Advanced React Patterns React Performance Testing React Apps React Suspense Build an Epic React App Epic React Expert Interviews 오늘은 React ..

TypeScript의 Utility Type 업무할 때 종종 튀어 나오는 애들인데 내가 잘 모르는 것 같아서 한 번 쭉 정리해보았다. 정리하다보니 진작 알아뒀으면 유용하게 많이 썼을텐데 싶은 것들이 엄청 많다. 심심할 때마다 다시 읽어봐야겠다. Partial 주어진 Type의 모든 property를 optional로 세팅한 Type을 구성한다. 다시 말해 주어진 Type의 모든 부분 집합 type을 return한다. 즉, 아래 Todo interface에 title과 description이 정의되어 있는데, Todo 중에서 일부 속성으로만 이루어진 type을 지정하고 싶을 때, Partial을 사용하면 된다. interface Todo { title: string; description: string; ..

Form 다루기 이제 svelte에서 input 요소들을 어떻게 다루는 지 살펴보도록 하자. - Input Text - AddPersonForm.svelte Add a new person Add Person 먼저 form 태그에 3가지 input 태그를 만들고 각 input에 변수를 binding했다. 그리고 handleSubmit 함수를 form 태그에 submit 이벤트로 등록해주었다. 이 때 지난 번에 소개한 preventDefault라는 Event modifier를 이용하여 form 태그의 기본 동작을 막아주었다. 이제 form 태그 안에 있는 button을 클릭하면 submit 이벤트가 발생하여 handleSubmit 함수가 실행될 것이다. (bind:value는 아래 글에서 자세히 설명했으므로..