0. 들어가기 전 최근 회사에서 업무를 보면서 History에 대한 부분에 이슈가 있었다. 브라우저에서 이동을 하는 과정에서 기록을 남기지 않고 가야하는 이슈가 있었는 데, 이에 대해 window.location.href를 이용하여 이동하는 것이 아니라 window.location.replace를 이용하여 해결을 했지만 해당 객체에 대한 정리가 필요할 거 같아서 작성을 한다. 1. Location 객체 window.location은 Location 객체를 가르킨다. 우리는 Location 객체를 이용하여 현재 웹 페이지의 URL 정보를 얻거나, 변경할 수 있다. Location 객체에는 데이터에 대한 정보를 받아올 수 있는 인스턴스의 속성과 메서드로 구성되어있다. Location은 읽기 전용의 프로퍼티지..

이번 글은 MSW를 이용하여 백엔드 API를 Mocking 하는 방법에 대해 알아보자. 실제로 프로젝트에 들어가게된다면 내가 프론트 엔드 작업을 할 때 API가 있을 수도 있지만, 없는 경우도 많다. 보통 프로젝트를 할 때는 프론트엔드에서 UI를 구성하는 작업과 백엔드의 API를 개발하는 작업이 작업 순서상 동시에 진행되는 데 이러면 UI를 구성할 때 백엔드로부터 데이터를 받아올 수 없기 때문에 Fake 데이터인 더미 데이터를 만들어서 사용한다. 그렇게 만들어둔 더미 데이터는 API가 완성된다면 사용하지 않고 백엔드로부터 데이터를 받아오지만 단순하게 가짜 데이터인 더미 데이터를 사용하는 것이 아니라 실제로 호출할 수 있는 가짜 API를 사용하면 좀 더 안정적으로 UI를 구성할 수 있다. Mock Serv..

조건문 조건문은 특정한 조건에 따라 코드 진행을 달리하는 분기처리를 하는 문법으로, Javascript에서는 if문과 switch문을 많이 사용하며, 논리 연산자와 삼항 연산자로도 사용이 가능하다. 조건문 if문 if문은 소괄호 안의 조건식이 참이 될 때, 중괄호 안의 코드를 실행 시킨다. const age = 21 if(age >= 20){ console.log("성인 입니다.") } // 성인 입니다. 조건문 if else문 단순하게 나이가 20살 이상일 때뿐만 아니라 20살이 아닐 때라는 분기처리를 희망하면 else를 아래와 같이 사용한다. if문의 모든 조건들의 해당되지 않는 나머지 경우의 수일 때 else 중괄호 안의 식이 실행이 된다. const age = 18 if(age >= 20){ co..

반복문 Javascript에서 코드를 특정한 횟수를 반복하거나 리스트 형태의 데이터를 순회하고 싶을 때 반복문을 사용 합니다. 주로 많이 사용하는 반복문은 for을 이용한 횟수를 중요시하는 반복문들이 있습니다. for for each for in for of 반복문 for 반복문 for은 코드를 특정한 횟수를 반복할 때 사용합니다. for (let i = 0; i 조건식 -> 반복 코드 -> 후위식의 순서대로 진행 되며, 반복하다가 조건식이 false일 때 반복을 멈춥니..

Hoisting Hoisting이란 변수의 선언만을 해당 스코프의 맨 위로 끌어올리는 것을 의미한다. 아래의 예시를 보고 이해해보자. 아래의 1번을 보면, x는 console.log아래에서 선언과 초기화가 이루어져있는 데도, Error가 아닌 undefiend가 나오고 있다. 이것이 Hoistring의 예시라고 생각하면 된다. 1번처럼 작성한 코드가 Hoistring으로 2번처럼 아래에서 선언된 변수가 선언만은 위에서 되어 undefined가 나오는 것이다. // 1번 console.log(x) // undefiend var x = 1 // 2번 var x console.log(x) x = 1 그렇다면 Hoisting이 안 된다면 어떻게 될까 아래의 예시를 보면 Hoisting이 되지 않는다면 Refer..

JavaScript에는 동시성 모델인 Event Loop, Call Stack, Callback Queue가 있다. Event Loop EventLoop는 여러개의 스레드를 사용하고, 그 중 우리가 작성한 JavaScript가 실행되는 스레드를 메인 스레드라한다. 이 메인 스레드는 Node JS 프로세스에서는 하나만 존재하며, 한 순간에 한 줄씩 실행된다. 하지만 그 이외의 일을 하는 워커 스레드는 여러개가 존재할 수 있다. Call Stack Call Stack이란 지금 시점까지 호출된 함수들의 Stack이다. 여기서 Stack은 자료 구조 중 하나며, 아래에서 위로 차곡 차곡 쌓이지만, 위에서부터 빼내는 자료 구조다. 즉 함수가 호출 될 때 마다 하나 씩 쌓이고, 리턴 할 때 빠지게 된다. 이벤트 루..

우리가 어떠한 상태를 관리할 때는 useState()를 사용해서 해왔지만, useState()는 컴포넌트 내부에서 이루어진다는 것이 있다. 그러기에, A 컴포넌트에서 B 컴포넌트로 상태 전달할 때의 어려움도 존재하였다. 이를 해결 하는 방법이 useReducer다. useReducer는 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 시킬 수 있기에, 컴포넌트 바깥에 작성하거나, 다른 파일에서 작성 하고 불러와서 사용할 수도 있다. useReducer에서 reducer는 현재 상태(state)와 액션 객체(action)를 파라미터로 받아 새로운 상태를 반환하는 함수다. reducer에서 반환하는 상태는 곧 컴포넌트가 가지게 될 새로운 상태가 된다. 여기서 action은 상태를 업데이트를 하기 위한 정보..

해당 자료로 공부하고 정리한 게시글 입니다. https://www.daleseo.com/react-hooks-use-callback/ useCallback useCallback은 useMemo와 더불어, 성능의 최적화를 위해서 사용하는 React Hook으로, useMemo가 값을 memoization 하기 위한 훅이였다면, useCallback은 함수를 memoization하기 위한 훅이다. useCallback은 2개의 인자를 받는 데, 첫번째 인자는 콜백 함수, 두번째 인자는 의존성 배열을 받게 되며, 첫번째 인자로 넘어온 함수를 의존성 배열 내의 값이 업데이트 될 때까지 저장해두고 사용할 수 있다. 예를 들dj add() 함수는 a와 b를 받아 더한 후 반환하는 함수이고, 컴포넌트 함수 안에서 선..

useMemo useMemo는 컴포넌트의 성능을 최적화 할 수 있는, React의 대표적인 Hook으로, Memo는 Memoization을 의미한다. Memoization는 기존의 수행한 연산의 결과값을 어딘가에 저장해두고, 동일한 입력이 들어오면 재사용을 하는 프로그래밍 기법을 의미한다. React의 함수형 컴포넌트는 렌더링 -> Component 함수 호출, 모든 내부 변수의 초기화의 순서를 거치게 되기에, 아래의 예제에 있어서 item이라는 변수의 값은 항상 초기화 되기에, itemValue 함수는 항상 다시 호출된다. 지금은 가벼운 함수지만, 무거운 함수라면, 계속 다시 함수를 호출하는 것은 매우 비효율적이다. function Component(){ const value = itemValue() ..

JSDoc JSDoc은 JavaDoc과 유사한, JavaScript용 API 생성기인데, 문서 주석을 코드와 함께 직접 소스 코드에 추가할 수 있다. 오늘은 JSDoc을 활용하여 개발을 좀 더 쉽게 하는 방법에 대해 학습해보자. 함수 printWord를 만들어 예를 들어보자 printWord는 인자 하나를 받아, 콘솔에 출려하는 함수다. 우리는 해당 함수를 아래와 같이 선언 하고 호출 할 것이다. const printWord = (word) => { console.log(word) } printWord('Hello') 하지만 함수가 많아지고, 혼자가 아닌 여럿이서 개발을 하게 되면 어떨까?? 분명 해당 함수가 어떤 역할을 하는 지 무엇을 매개 변수로 받는 지를 쉽게 파악하기 어렵다. 따라서 JSDoc을 ..