공부 기록일지📚

axios는 클라이언트와 서버가 서로 요청과 응답을 주고 받을 수 있게 도와주는 HTTP 클라이언트 패키지입니다. axios는 여러 기능을 제공하는데 (그래서 fetch보다 개인적으로 더 선호합니다.) 이 중 interceptor에 대해서 배워봅시다. axios interceptor 기능이란 "어떤 요청을 보낼 때 그리고 어떤 응답을 받아와서 처리할 때, 직전에 요청과 응답을 가로채주는 기능입니다. 클라이언트에서 서버에 요청을 보내기 직전 서버에서 응답을 받아와 클라이언트에서 사용하기 직전(.then. catch라는 후속처리 메서드를 실행하기 직전)에 가로챈다고 생각하면 됩니다. axios를 사용하기 전엔 당연히 npm or yarn(패키지 매니저) 로 설치해줘야 겠죠? * axios 써드 파티 라이브러..

리액트에서 임의로 js파일에 에러를 냈을 때, 브라우저에서는 아무런 요소도 볼 수 없고 흰 화면만 나타난다. 이유는 바로 "에러가 나면 스크립트가 실행을 멈추기 때문이다." try - catch (+ finally) 예시 코드 에러를 임의적으로 만들어놓은 상황(상수에 다른 값을 재할당했습니다.) const a = 1; a = 2; //위와 같이 임의로 에러를 냈을 때 에러난 부분부터 스크립트가 실행을 멈추고 // 아래의 코드는 실행이 안된다. return ( 안녕하세용 😎 React.js ); } 상수 a를 2로 변경하는 코드(에러코드) 이후의 멀쩡한 코드들은 그대로 브라우저에 렌더링시켜야 합니다. 이럴 때 에러 핸들링을 해줍니다. 에러가난 부분은 보여주지 않더라도 정상적으로 구동하는 애들은 보여주기 위..

Memoization fetch를 활용한 API호출 (JSON placeholder 활용) Lifecycle 제어 useReducer 사용하기 Context API 사용하기 에 대해서 제 velog에 정리해놓았습니다. 각각 링크를 걸어놨으니 필요 시 확인하시면 됩니다. 카카오톡 서버가 터지는 바람에 벨로그로 피신갈 수 밖에 없었어용 홍홍이.. 개인적으로 벨로그가 생각보다 사용하기 편한 느낌을 받아서 아예 이주를 할까 고민중입니다. 티스토리가 좀 더 다양하게 커스텀할 수 있는 느낌이긴 하지만요. 🐕 .. 또 티스토리에 포스팅하니 익숙해서 좋아지는 간사한 마음..😪

백엔드 or 서드파티 API에 네트워크 요청이 필요한 어플리케이션을 개발할 때, Axios 및 Fetch와 같은 HTTP 클라이언트를 사용합니다. Fetch와 Axios 모두 Promise 기반의 HTTP 클라이언트입니다. 즉, 이 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve)혹은 거부(reject)할 수 있는 promise가 반환됩니다. Fetch API는 모던 브라우저에 내장되어있어 따로 설치할 필요가 없는 반면 Axios는 서드파티 라이브러리로 CDN 또는 yarn 과 같은 패키지매니저를 통해 설치하여 node.js혹은 브라우저 환경에서 사용 가능합니다. 에러 처리에 있어서 Fetch, Axios 모두 이행(resolve)되거나 거부(reject)된 promise를 반환합니다. Pr..

자바스크립트의 싱글 스레드 작업 수행 방식(싱글 스레드? 콜스택이 1개라고 생각하시면 됩니다.) 스레드? 코드를 한줄씩 실행시켜주는 일꾼이라고 생각하면 된다. JS는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행 중 일때는 다음 작업을 수행하지 않고 기다림 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행함 -> 동기 방식의 처리 일을 하고 있을 때 다른 작업을 할 수 없는 방식을 "블로킹 방식"이라고도 합니다. 동기처리 방식의 문제점 하나의 작업이 너무 오래 걸리게 되면, 해당 작업이 완료될 때까지 모든 작업이 올 스탑되기 때문에 전반적인 흐름이 느려집니다. -> 멀티 쓰레드로 해결하면되지만 JS는 싱글 스레드라서 "비동기 작업"으로 해결합니다. 싱글 스레드 방식을 이용하면서..

✔ 모든 본문의 내용은 벨로퍼트님의 리액트 라우터 v6 튜토리얼을 보고 정리했습니다. 상세한 내용을 원하시면 하단의 링크를 통해 확인 가능합니다. 👾토픽마다 이모지 표시를 해두었습니다. 주관적인 느낌이며 참고만 하시면 됩니다. ⭐ -> 유용하지만 개인적으로 어렵거나 생소함 😎 -> normal 쉬움 라우팅이란? 웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미합니다. 여러 페이지로 구성된 웹 어플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템입니다. 리액트에서 라우트 시스템을 구축하는 선택지는 크게 두가지 입니다. 리액트 라우터(React Router): 해당 라이브러리는 리액트의 라우팅 관련 라이브..

CSS으로 레이아웃을 하는 방법에는 여러가지가 있습니다. 그 중에서도 대표적으로 flex, grid 레이아웃 시스템을 예시로 들 수 있습니다. Grid와 Flex의 가장 큰 차이점은 Flex는 한 방향 레이아웃 시스템이며(1차원) Grid는 두 방향(가로-세로)레이아웃 시스템(2차원)이라는 것입니다. 결과적으로 Flex보다 더 다채로운 레이아웃 구성이 가능하게 됩니다. -> 개인적으로 Grid와 Flex의 차이점을 잘 이해하고 필요할 때 둘을 적절히 혼용하는 것이 좋은 거 같습니다. Grid는 Flex와 마찬가지로 컨테이너와 아이템만 있으면 됩니다. 아래는 그리드의 기본적인 HTML 구조입니다. A B C D E F G H I //✅부모 요소인 div.container를 Grid Container(그리드..

이전에 정리한 생활코딩의 내용을 빌려오자면 this는 이렇게 정의할 수 있다. this ? this란 함수 내에서 함수 호출 맥락(context)를 의미한다. 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 의미이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점 역할을 한다. this는 상위 객체를 가르킨다. apply ,call을 활용해 제어가 가능하다. 함수호출 어떠한 객체에 소속되어 있지 않은 함수를 호출했을 때 this는 무엇을 가리키는가? -> this === window 사실상 window가 생략됐을 뿐이지(암시적으로 사용되고 있는 window) window가 해당 함수를 포함하는 전역객체인 것이다. 🙋‍♂️this는 무엇..