log_J

✅ 왜 사용하는가?Recoil을 사용해 칸반보드를 만드는 프로젝트를 진행중이었다.atom 데이터를 LocalStorage로 저장해브라우저를 닫거나 새로고침을 해도 데이터가 유지될 수 있게 구현하고 싶었다.  1️⃣ 초기 해결방법atom.ts 파일에서 직접 LocalStorage를 연결했다.데이터 수정이 있을 때 마다 LocalStorage에 setItem을 해줬다. const initData = localStorage.getItem('to-do');export const boardState = atom({ key: 'boards', default: [], default: initData ? JSON.parse(initData) : [],});  그런데 Kanban board 특성상 추가, 삭제, 수..

✔ Vercel 이란? 💡 프론트엔드 개발자들을 위한 클라우드 서비스를 제공하고 있는 회사. React.js의 확장판 개념인 Next.js를 개발하는 회사. 호스팅 뿐만 아니라 다양한 기능을 제공하고 있고 무료 플랜에서도 많이 이용할 수 있다. Vercel로 프로젝트 배포를 해보자! 1. 회원가입 교육을 목적으로 한 개인 프로젝트 배포용으로 사용할 예정임으로 Hobby 체크. Name 칸에는 한글 입력은 불가능하다. Github 연동으로도 회원가입이 가능하다. 아무것도 원하지 않는다면 Continue with Email로 진행하면 되지만, 나는 깃허브를 연결해줬다. 이메일 연동 후 이런 화면이 떴다면, 회원가입 완료! 2. VSCode 실행하기 Build가 완료된 프로젝트 파일에 Terminal을 켜준다..

💡 useCallback ? useCallback은 React.memo, useMemo와 같이 memoization과 관련된 최적화 기능에 사용되는 React Hook이다. useMemo와 동일하게 함수형 컴포넌트 안에서만 사용 가능하다. ✅ 언제 컴포넌트의 리렌더링으로 불필요하게 함수가 재생성되는 경우, 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. ✅ 어떻게? const function1 = useCallback(() => {} , [/* 의존성 배열 */] ); 의존성 배열에 변화를 감지할 인자를 전달하면, 배열 내부의 값이 바뀔 때 마다 useCallback의 첫 번째 인자인 콜백 함수를 호출해 memoization된 함수로 리턴한다. ❗ 주의 의존성 배열에 빈 배열을 전달하면 컴포..

💡 Memoization 이미 계산 해 본 연산 결과를 기억해, 재연산하지 않고 필요로 할 때 기억해둔 데이터를 반환하는 것을 말한다. 연산과정을 최적화 시킬 수 있다는 장점이 있다. 오늘 포스팅 할 React.memo와 useMemo는 모두 Memoization과 관련된 함수이다. 두 함수 모두 최적화 기능에 많이 사용된다. ✔ React의 리렌더링 조건 컴포넌트 내부의 state가 변경됐을 때 컴포넌트의 Props가 변경됐을 때 부모 컴포넌트가 리렌더링 됐을 때 리액트의 컴포넌트들은 위 세 가지 조건으로 리렌더링하게 된다. 그러나 세 가지 조건 모두 충족시키기엔 아주 쉬우며, 때때로 리렌더링이 불필요한 컴포넌트까지 실행시킨다. 혹은 너무 잦은 리렌더링으로 오래 걸리는 연산을 계속해서 반복해야하는 경우..

💡 async ? await ? ES2017에 도입된 비동기 처리 문법 Promise 로직을 더 쉽고 간결하게 사용할 수 있게 도와준다. Promise를 대체하는 기능은 아니고 보이는 문법을 다르게 하여 가독성을 높히고 유지보수가 편리하게끔 만든 문법 ✔ 사용법 function 키워드 앞에 async / 비동기 처리 앞에 await 를 붙여 사용한다. 1) async async를 붙인 함수는 promise를 리턴하는 비동기 함수가 된다. async를 붙인 함수의 return 값은 promise의 resolve 함수의 argument와 같다. /* 함수 선언식 */ async function helloAsync() { return 'hello Async' } /* 함수 표현식 */ const helloAs..

💡 콜백 지옥 (Callback Hell) ? 자바스크립트는 비동기 작업을 처리할 때, 콜백 함수를 사용한다. 만약, 비동기 작업의 결과를 가지고 콜백 내부에서 또다른 콜백 함수를 사용한다면 어떻게 될까? 위 사진처럼 콜백의 콜백이 중첩되면서 코드의 가독성이 나빠지고 유지보수도 어려워진다. 이러한 문제를 "콜백 지옥" 이라고 한다. 그렇다면 위 코드처럼 콜백지옥에서 벗어나려면 어떻게 해야하는 걸까? 💡 Promise Promise는 비동기 처리에 사용되는 객체이다. 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. ✔ Promise의 3가지 상태 프로미스는 비동기 작업의 결과를 약속한다. 프로미스 객체를 생성하면, 비동기 작업은 진행중이거나, 성공하거나, 실패..

💡 블록킹(Blocking) VS 논블록킹(Non- Blocking) 블록/논블록 개념은 기술적으로 명확히 구분이 되는 개념이다. 블록킹을 이해하기 위해선 아래의 용어를 정확히 짚고 넘어가야 한다. ✔ 제어권 함수를 실행할 권리 제어권을 어떻게 처리하느냐에 따라 블록킹과 논블록킹의 차이가 나타난다. 두 개의 함수 A, B 가 있다고 가정해보자. A함수가 먼저 실행된다고 할 때, 블록킹과 논블록킹의 차이는 아래와 같다. 1) 블록킹 메인 함수가 함수 A에게 제어권을 주며 A를 호출한다. A 함수는 실행되고 A 함수가 끝날 때 까지 B함수에게 제어권을 넘겨주지 않는다. A 함수가 종료되면 B 함수에게 제어권을 주고 호출한다. 즉, 호출된 함수의 모든 코드가 끝날 때 까지 제어권을 계속 가지고 다른 함수에게 ..

생명주기(생애주기 - Lifecycle) 란? 💡 컴포넌트가 화면에 나타나고, 리렌더가 발생하고, 사라지기까지의 과정 탄생 Mount 컴포넌트가 화면에 나타난다. 변화 Update 컴포넌트 내부의 state가 변경 / 부모가 리렌더 / Props가 변경 등 컴포넌트 자신이 리렌더 되는 상황 리렌더 되는 과정을 업데이트(변화하는 순간)라고 함 죽음 Unmount 컴포넌트가 화면에서 사라진다. 컴포넌트 라이프사이클은 왜 알아야 할까? 컴포넌트가 mount, update, unmount 되는 순간에 어떤 작업을 수행시킬 필요가 있다. 예시) mount - 초기화 update - 해당 변화를 통해 발생할 수 있는 예외 처리 unmount - 컴포넌트가 사용하던 메모리를 반환 React를 사용해서 소프트웨어를 더..

프로그래머스 Lv.2 문제를 풀다가 오랜만에 접근법이 떠오르지 않아 고민을 오래한 문제를 직면했다. 문제 Finn은 요즘 수학공부에 빠져 있습니다. 수학 공부를 하던 Finn은 자연수 n을 연속한 자연수들로 표현 하는 방법이 여러개라는 사실을 알게 되었습니다. 예를들어 15는 다음과 같이 4가지로 표현 할 수 있습니다. 1 + 2 + 3 + 4 + 5 = 15 4 + 5 + 6 = 15 7 + 8 = 15 15 = 15 자연수 n이 매개변수로 주어질 때, 연속된 자연수들로 n을 표현하는 방법의 수를 return하는 solution를 완성해주세요. 제한사항 n은 10,000 이하의 자연수 입니다. 코드 function solution(n) { let answer = 0; let sum = 1; let i ..

💡 Props란 무엇인가? 부모 컴포넌트로 부터 전달받은 값. 컴포넌트의 속성(Property)를 의미한다. ✅ Props 특징 1. Readonly 상위 컴포넌트로 받은 Props는 컴포넌트에서 수정이 불가능하다. 💡 React는 단방향 데이터 흐름으로 하위 컴포넌트는 데이터를 받을 수 있지만 상위 컴포넌트에 넘길 수 없다. 만약 하위 컴포넌트에서 데이터를 수정해도 상위 컴포넌트는 이를 알 수 없기 때문에 Props는 수정이 불가하다. 2. 객체 타입이다. 컴포넌트는 반드시 1개의 argument를 갖는다. 상위 컴포넌트에서 하위 컴포넌트에 여러 Property를 넣어 전달해도 객체형태의 argument 하나만 받을 수 있다. 3. 구조분해 할당을 사용할 수 있다. Props를 구조분해 할당을 사용하면..