기술면접이 제일 어려울꺼 같아 일주일에 1~2번 정리해서 외우고 가야겠다.. 🥲 cs 🧩브라우저 주소창에 www.google.com을 입력하면 어떤일이 일어나나요? 입력된 주소를 기반으로 DNS서버에 요청을 보내고 입력된 도메인 이름에 대한 IP주소를 찾아 브라우저에게 응답합니다 브라우저는 DNS 서버로부터 받은 IP주소를 사용하여 해당 서버로 HTTP요청을 보내고 www.google.com이 HTTP 요청의 Host 헤더 필드에 포함됩니다. GET / HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0 Accept: text/html,app..

리액트 쿼리를 쓰면 좋다고 해서 공부하려고 하는데 아직 개념이 덜 잡힌거 같다 🥲 React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다. =>기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어 해결하기 위해 React-Query가 만들어졌다. React-Query 장점 서버사이드 상태 관리와 관련된 여러 가지 반복적인 작업들을 손쉽게 처리할 수 있다 데이터뿐만 아니라 isIdle, isLoading, isFetching, isSuccess, isError..

원래는 리액트쿼리에 대해 공부하려 했는데 어느 글에서 리액트쿼리를 알기이전에 AJAX에 알아야 한다고 하여 양심에 찔려 이글을 정리해보려고 한다 AJAX (Asynchronous Javascript And XML) =>자바스크립트를 통해서 서버에 데이터를 요청하는 것 AJAX는 XML에 기반한 종합 기술로 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용하는 기술 AJAX는 하나의 독립된 기술이 아니다. AJAX 화면 HTML + CSS 로 구성 및 작성 화면에 대한 조작과 상호 작용 문객체모델(Document Object Model : DOM)로 처리 데이터 교환 XML 형식 데이터 변환과 ..

리액트의 모든 컴포넌트들은 라이프사이클이 존재하는데 그거에 대해 크게생각해 본적도 없지만 기술면접때 중요할꺼 같아 정리하려고 한다 🥲 리액트의 라이프사이클은 크게 4가지로 설명할 수 있다. 최초로 컴포넌트 객체가 생성될 때 한 번 수행되어지는 componentDidMount()와 초기에 화면을 그려줄 때와, 업데이트가 될 때 호출되는 render() 그리고 컴포넌트의 속성 값 또는 상태값이 변경되면 호출되어지는 componentDidUpdate()와 마지막으로 컴포넌트가 소멸될 때 호출되어지는 componentWillUnmount()가 라이프사이클의 역할이다 Mounting 컴포넌트가 처음 실행될 때 Mount라고 한다 컴포넌트가 시작되면 context, deflautProps와 state를 저장 => ..

상태 관리를 리덕스,리덕스툴킷 라이브러리만 사용해서 관리했는데 리액트에도 상태를 전역으로 관리하는 훅이 있어서 가끔 굳이 라이브러리를 설치하면서 전역으로 관리를 해야할까 생각 했던곳에 적용해야겠다 싶어 공부하고자 한다 React Hook인 useContext()는 Context를 좀 더 편하게 사용할 수 있게한다 =>Context는 전역 상태 관리를 할 수 있는 수단일 뿐이고, 상태 관리 라이브러리는 상태 관리를 더욱 편하고, 효율적으로 할 수 있게 해주는 기능들을 제공해주는 도구이다(상태 관리 라이브러리와 Context 완전히 별개의 개념이다),Context를 쓴다면, 각기 다른 상태마다 새롭게 Context를 만들어주어야 한다 Context API란? 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해..

플젝 하면서 멘토님이 Interceptor를 사용하는 방법이 있다고 플젝 끝날 때즘 알려주셨고.. 이미 짠코드를 걷어내기가 힘들것 같아서 플젝 끝나고 코드를 걷어내볼려고 공부하려고 한다 Axios는 HTTP 요청과 응답을 가로채는 Interceptor를 지원한다 Axios 인스턴스는 요청과 응답에 대해 각각 Interceptor 관리자를 가지고 있고, 이 관리자들은 요청이나 응답을 가로챌 때 실행할 핸들러를 관리한다 => Axios 인스턴스가 ‘요청을 보내기 직전’과 ‘응답을 받은 직후’에 미리 등록한 핸들러들을 차례로 실행한다 언제 사용할까? API 요청마다 해줘야 하는 반복적인 작업이 있을 때(예: 헤더에 토큰 싣기) 에러 관리를 한 곳에서 하고 싶을 때 Request Interceptor 요청에 대..