Frontend

Javascript undefined/undeclared/null and NaN 🧟

헷갈릴수 있는 undefined/undeclared/null 과 NaN에 대하여 정리하려고 합니다. undefined (아무런 값도 할당되지 않았다) 변수가 선언이 된 이후에 undefined로 초기화된 상황입니다. 스코프에 변수가 선언이 되었으나 아직 아무런 값도 할당되지 않았다는 것을 의미합니다. 변수는 선언 -> 초기화 -> 할당의 순서를 가지게 됩니다. var의 경우 호이스팅이 일어나게 될때 선언이 끌어올려지고 undefined로 초기화가 이루어 집니다. var test; console.log(test) // undefined console.log(typeof test) // undefined undeclared (선언조차 되지 않았다) console.log(name) // Uncaught Ref..

React React-query InfiniteQuery 예제 ∞

React 쿼리의 InfiniteQuery 사용에 대한 한글로 된 예시가 많은것 같지 않아 작성해보려 합니다. React-query의 InfiniteQuery를 사용하면 다음 page의 데이터를 간편하게 불러올 수 있습니다. 준비해줘야 할것은 pageParam을 입력받는 api 요청 함수, getNextPageParam에서 pageParam을 올려주면 됩니다. keepPreviousData 옵션을 이용하면 다음 데이터가 fetching 되기 전까지 이전 데이터를 유지할 수 있고 getPreviousPageParam와 fetchPreviousPage를 이용하면 이전 페이지의 데이터를 가져올 수 도 있습니다. 정말 다양한 옵션과 쓰임새가 있을 수 있는데 기본이 가장 중요하므로 기본만 구현된 예제를 작성해 보..

React 글자 4개로 React 컴포넌트 최적화 가능(번역글) 🤔

제목이 클릭을 유발하는 자극적인 글일 수 있지만 부분적으로는 사실이다. 아래 두개의 예제를 살펴보자 // 예제 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getItem(cacheKey)) ) useEffect(() => { window.localStorage.setItem(cacheKey, count) }, [cacheKey, count]) return ( Count: {count} setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ) } // 예제 2 const Counte..

Javascript intersection observer api 👀

1번 상황 서비스하고 있는 사이트에 이미지가 2200개가 있다고 가정하겠습니다. 웹의 로드와 동시에 2200개의 이미지를 전부다 받아와야 한다면 사용자는 기다리는 동안 커피를 사올수 있고 세차도 가능할 지도 모릅니다. 2번 상황 3500개의 DOM 객체가 있고 이들이 화면에 나타나면 색깔이 변해야 한다는 기획이 있다고 가정해 보겠습니다. css의 animation 속성을 이용해 색깔을 계속 바꿔지도록 할 수도 있어서 화면에 나타나고 딱 한번만 색깔이 바뀌어야 한다고 조건을 추가하겠습니다. scroll 이벤트를 걸고 모든 DOM 객체들의 getBoundingClientRect를 이용하여 뷰포트 내의 위치를 가져오고 이를 이용하여 클래스를 변경해주는 방식도 있을 수 있을것 같습니다. getBoundingCl..

React conatiner/presentational -> hook 📝

React 에서 Presentational/Container Component로 관리를 해야한다는 이야기를 듣게 되었습니다. 두개의 컴포넌트는 어떤 컴포넌트를 의미하는지 알고 싶어 예전의 medium글을 읽게 되었습니다. 그리고 이 글을 읽으며 훅의 도입 이유중 하나인 상태로직의 재사용에 대해 이해하게 되었고 컴포넌트는 바보 컴포넌트로 생성을 해야 한다는 생각을 더 강하게 하게 되었습니다. 바보 컴포넌트란 주어진 props를 보여주기만 하는 컴포넌트를 의미합니다. 바보 컴포넌트는 재사용이 쉬워진다는 장점이 있습니다. 글을 살펴보면서 훅은 왜 등장하게 되었고 훅을 주로 사용하는 현재의 시점에서는 저 당시에 존재했던 개념을 어떻게 활용하면 더 좋은 코드를 작성할 수 있을지 알아보려 합니다. 여기서 말하는 더..

Typescript class 🏛

es6에서는 class가 등장하였습니다. class는 syntatic sugar로서 이를 babel로 변환하면 prototype으로 변환되는 것을 볼 수 있습니다. syntatic sugar란 alias와 같은 개념으로 이해하시면 좋습니다. 복잡한 기능을 간단하게 사용할 수 있도록 도와줍니다. React의 jsx도 대표적인 Syntatic sugar입니다. Typescript에서 class를 사용하는 경우 어떠한 것들을 적용해야 하는지 알아보려 합니다. js class class Person { constructor(name){ this.name = name } sayName() { console.log(this.name) } } ts class typescript에서는 변수를 미리 선언해주어야 합니다...

Javascript async/await, Promise 실수 포인트 🗝

async/await에서 에러 처리 new Promise((resolve, reject) => { throw new Error('this is error') }).catch(e => console.log(e)) // 에러내용 출력 new Promise(async (resolve, reject) => { throw new Error('this is error') }).catch(e => console.log(e)) // pending Promise 안에서 async를 사용하여 Error를 반환한 두번째의 경우에는 에러가 정상적으로 반환되지 않습니다. 이 상태면 Promise는 계속 pending 상태가 되고, 메모리를 차지하고 있게 됩니다. 왜 그럴까요? promise 내부에서는 resolve, rejec..

Javascript 콜백 📞

콜백함수, 콜백함수 지옥, Promise의 등장, generator를 이용한 promise.then 지옥의 탈출, es8에서의 async/await 등장 이와 같은 흐름을 들어보셨고 콜백에 대한 이야기 또한 많이 접했었습니다. 위의 흐름이 등장하게 된 원인인 콜백 함수에 대해서 알아보려고 합니다. 콜백 함수란 다른 함수에 매개변수로 넘겨준 함수를 말합니다. 아래와 같은 두개의 예시가 있을것 같아요 // 1번 // button.addEventListener('click', function() { console.log(this) // button element }) // 2번 // function sayHi(name) { console.log(`hi ${name}`) } function wrongInput(..

React Redux-saga's work flow from component 🙋‍♂️

컴포넌트에서 dispatch를 통해 action을 넘겼을때 동작하는 순서 1. ui에서 action creator를 통해 action을 생성하고 이를 dispatch를 통해 Store로 넘깁니다. 2. store로 넘어오면 이를 감지하고 있던 saga(watch)에서 action의 type에 맞는 effect를 실행하게 됩니다. 3. redux-saga에서는 effect를 통해 객체를 반환하기만 하고 이 객체는 middle-ware로 전달이 됩니다. 4. 실질적인 함수의 실행은 미들웨어에서 실행이 됩니다. 5. put을 통해 store에 dispatch를 전달하고 store에서는 리듀서를 통해 상태를 변화시킵니다. 6. 상태가 변화가 되면 상태를 참조하고 있던 컴포넌트는 리렌더링이 발생하게 됩니다. --..

React Jsx 🌱

jsx는 React.createElement를 반환하기 위한 Syntatic sugar 입니다. Syntatic Sugar은 좀 더 편리하게 사용하기 위해 도와주는 것으로 이해할 수 있습니다. 예를 들면 Javascript의 class, React의 jsx가 있습니다. javascript의 Class는 babel로 변환해 보면 prototype으로 구성되어 있음을 React의 jsx는 bable로 변환해 보면 React.createElement를 반환함을 확인할 수 있습니다. 둘다 원래는 직접 prototype, React.createElement로 작성해야 했던것을 Class, jsx를 사용함으로써 편리하게 사용할 수 있는 것이죠 jsx는 클래스형 컴포넌트에서 사용합니다. render내부에서 retur..