React

이전부터 Webpack을 이용해 만들어두고 싶었던 React 보일러플레이트를 만들어봤다. 여러 레퍼런스를 참고하며 만들어봤는데 플러그인 부터 로더, 설정 내용까지 하나하나 차근차근 기록하며 살펴보자. 회사에 내가만든 보일러플레이트, 라이브러리 등등이 점점 쌓여가는 걸 보며 힘들지만 뿌듯한 요즘이다..⭐️ Webpack 이란? 웹팩은 단순히 말하자면 모듈 번들러이다. 모듈 : 웹팩에서의 모듈은 각종 .js .css .png 등 웹 애플리케이션을 구성하는 자원을 말한다. 번들러 : 자원을 조합해서 빌드 결과물을 만드는 역할 ES2015부터 모듈 이라는 문법을 지원하게 되었고 이 모듈을 사용하는 이유는 다른 사람의 코드나 내가 만든 코드들을 재사용하고 싶을 때 사용한다. 기존에는 태그를 통해 코드를 불러오고 ..

요즘 Next.js를 사용하며 CSS-IN-JS 대응이 안되는 문제로 Tailwind CSS를 자주 사용하고 있다. VScode 에서 Tailwind CSS IntelliSense 라는 확장 프로그램을 제공해 Tailwind에서 정해진 포맷을 보여주지만 약간의 불편함이 있다. 설정을 통해 해결해보자! Tailwind Tailwind는 CSS 프레임워크로 엄청나게 많은 utility class로 이루어진 프레임워크다. 만들어져 있는 utility class를 class에 넣어주기만 하면 해당 스타일링이 적용된다. 사용법 설치방법은 공식페이지를 참고하자. 공식페이지를 따라 설치했다면 사용법은 별거 없다. function App() { return ( ); } export default App; 정해진 uti..

회사에서 4deps의 카테고리 기능을 만들어야 했는데 재귀 컴포넌트를 활용해 반복 코드를 줄일 수 있었습니다. 4deps를 기준으로 잡았지만 재귀를 사용하면 몇 deps든 보여줄 수 있죠! 성능적인 문제는 별개지만 브라우저의 성능이 발달하면서 이정도는 문제가 없다 판단했습니다. 재귀 알고리즘 재귀는 알고리즘의 하나로 주로 코딩테스트 문제를 풀 때 많이 접할 수 있는데, 가장 대표적인 재귀 알고리즘을 사용한 사례로는 피보나치 수열이 있다. const fibonacci = (num: number) => { if (num < 2) { return num; } return fibonacci(num - 1) + fibonacci(num - 2); }; 간단하게 설명하자면 "자기 자신을 호출하는 함수"를 재귀 함수..

debnounce란 ? - debounce는 여러 개의 순차적 이벤트 호출을 마지막(또는 처음) 하나의 호출만 하도록 하는 프로그래밍 기법 - 주로 검색, 스크롤 같은 반복적인 이벤트가 일어날 때 사용하며 유명한 라이브러리인 lodash를 설치하면 간단하게 사용할 수 있다. - 만약 회원가입에서 이메일의 중복확인을 onChange 이벤트로 체크한다고 했을 경우 사용자의 입력마다 API 호출을 하게 되는데 이러면 끔직한 서버 비용폭탄을 맞을 수 있다. debouncing 예제 useEffect(() => { console.log(`http 요청 ${formData.email}`); }, [formData.email]); useEffect를 이용해 email input이 서버에 같은 아이디가 있는지 중복확인..

useState ⭐️ React의 state는 컴포넌트 내부의 변경 가능 한 값이다. 함수형 컴포넌트에서 useState 훅을 사용해 상태를 변경한다. import React, { useState } from 'react'; function App() { const [number, setNumber] = useState(0); return ( {number} ); } export default App; React 패키지에서 useState를 불러와 import 후 사용할 수 있다. useState의 인자에는 초기값을 할당한다. (불리언이나 배열, 객체도 할당 가능) useState는 배열을 반환하는데 이때 첫번째 number는 원소의 현재 상태, 두번째 원소는 Setter함수를 반환한다. setState..

useLocation 훅 ⭐️ useLocation 훅은 현재의 URL을 대표하는 location '객체' 를 반환한다. 객체안에는 pathname, search, hash, state, key 프로퍼티가 존재한다. pathname : 현재 주소의 경로 (쿼리스트링, 해시 제외) search : pathname 이후에 ? 부터의 문자열 (쿼리스트링) hash : pathname 이후에 # 부터의 문자열 (해시) state : location 객체로 화면이동을 시킬 때 코드 상으로 보내는 객체 key : history stack에서 location 객체를 찾기 위한 고유 키 사용법 import { useLocation } from 'react-router-dom' const Home = () => { co..

import { useState } from "react"; const useForm = (initialState = {}) => { const [formData, setFormData] = useState(initialState); const InputChangeHandler = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; return { formData, InputChangeHandler, }; }; export default useForm; Custom Hook을 이용해 form을 만들때 재활용이 가능하게 만들어봤다. 우선 initaialState의 Default 값을 빈 객체로 만..

메모이제이션(memoization) 이란?⭐ 프로그래밍에서 반복되는 결과를 메모리에 저장 해놓고 다음에 같은 결과가 나올 때 다시 계산할 필요없이 빨리 실행 하는 기법이다. JavaScript에서는 클로저 를 통해 계속 유지되는 저장공간을 만들 수 있다. 두 hooks 는 메모이제이션을 이용한 방법으로 불필요한 렌더링을 막을 수 있으나, 사용 자체로도 프로그램에 사용량이 채워지므로 사용하기 전 신중히 생각 해 봐야한다. useMemo 사용법 📄 const memo = useMemo(() => { return blabla; },[list]) useMemo는 첫번째 인자로 콜백 함수를 두번째 인자로 의존성(dependency) 배열을 받는다. useMemo는 list가 변한다면 콜백 함수를 실행하고 blab..