BilliG 프로젝트에서 API 통신으로 데이터를 fetching 할 때, 리액트쿼리의 useQuery를 통해 isLoading, isError를 받아와 컴포넌트 내에서 비동기처리 로직을 작성했었다. 이렇게 작성한 코드가 올바른 방법인지에 대해 코치님들께 질문을하였고

리액트에서 상태 관리는 굉장히 중요한 부분이다. 그렇기에 Redux, MobX, recoil, jotai 등등... 많은 상태 관리 라이브러리들이 출시되어 사용되어지고 있다. 나는 2차 프로젝트에서 Client-side-state는 Zustand, Server-side

원티드 프리온보딩 사전미션-todolist에서 invalidateQueries, useLayoutEffect 사용 경험 기록.

유튜브 클론코딩에서 사용한 useLocation, useNavigate, useParams에 대한 내용.

BilliG 프로젝트 회고입니다.

Cross-Origin Resource Sharing의 약자이며 도메인 또는 프로토콜, 포트가 다른 서버의 자원을 요청하는 매커니즘을 말한다.브라우저에서만 가지고있는 CORS 정책이 있다.클라이언트와 서버가 동일한 ip에서 즉 동일한 서버에서 동작하고 있다면 resou

같은 경로에 대해서 get, post 같은 요청 메소드를 나눠서 여러줄 쓰게되면 비슷한 코드가 반복적으로 쓰인다.이런 경우 app.route()를 사용 하면 아래와 같이 정리 할 수 있다. app.route(경로)를 써준 후 체이닝 형태로 요청 method를 추가해주면

서버 어플리케이션에서 에러처리는 굉장히 중요한 부분이다. 서버는 적게는 수십, 많게는 수천 수만명의 사람들이 동시에 이용하는 것이기 때문에 적절한 에러처리를 하지 못했을 경우에는 많은 사람들이 서버를 이용하지 못하는 심각한 상황이 발생 할 수 있다. 에러 처리를 잘

Middleware express는 middleware의 연속이라고 할 수 있다. 즉 여러개의 미들웨어가 체이닝으로 연결되어 있는 것이다. 서버에 요청이 들어오게 되면 미들웨어를 순서대로 거치게 되므로 설정된 순서가 매우 중요하다. 또한 우리가 작성한 미들웨어에서 ne

자바스크립트 엔진은 크게 Memory Heap 과 Call Stack으로 나눌 수 있다.변수를 선언하여 오브젝트, 문자열, 숫자등을 할당하게 되면 데이터들은 전부 메모리 힙에 저장된다. 메모리 힙은 구조적으로 정돈된 자료구조가 아니기 때문에 자료들이 여기저기 흩어져 저

컴퓨터(운영체제) 위에서 독립적, 연속적으로 메모리에서 실행되고 있는 프로그램을 말한다. 예를 들어 영상편집 프로그램, 음악 재생 프로그램 같은 것들이 여기에 속하고, 각각의 프로세스들은 할당된 메모리, 데이터들과 같은 리소스 자원들이 정해져 있다.프로세스에는 총 4개

자바스크립트는 프로토타입을 기반으로 한 객체지향언어다. 자바스크립트에서 생성자 함수나 클래스로 만들어진 모든 객체는 기본적으로 Object라는 프로토 타입을 가지고 있다. 또한 모든 객체 내부에는 숨겨진 \[prototype]을 가지고 있는데 이는 객체 간 상속을 위한

컴파일 언어들과는 다르게 JavaScript, TypeScript는 동적으로 this 바인딩이 결정된다.(Dynamic binding). 때문에 원리를 제대로 모르면 오류를 발생시킨다고 하니, 공부하고 이해한대로 정리해보자.Execution context는 실행 환경이

인자로 함수를 받거나 (콜백함수), 함수를 반환하는 함수를 고차 함수(Higher order function)라 부른다.배열에는 대표적으로 forEach, filter, map , reduce.. 등 제대로 알고 쓰면 유용한 고차함수가 많이있다.자주 쓰이는 고차함수의

자바스크립트 공부하면서 어렵게 느끼던 파트 중 하나가 class 였기 때문에, 제대로 개념을 잡아보고 싶었다.객체를 만들때 예전에는 생성자 함수를 사용했지만 지금은 class를 사용한다.class는 객체를 생성할 수 있는 템플릿 이라고 생각하면 편하다.class를 사용

서로 관련있는 속성 (데이터)과 행동(함수-method)을 묶어주기 위해 사용한다.밀접하게 관련있는 속성과 행동을 객체로 묶어야한다.Object literal { key: value }new Object();Object.create();key는 문자, 숫자 ,문자열,

컴퓨터를 구성하는 가장 중요한 3가지하드디스크 (저장장치)CPU (연산장치)메모리 (데이터를 빠르게 읽고 쓰기위해 임시적으로 저장해놓는 곳)컴퓨터에서 문서파일을 실행시킬 때 발생하는 일하드디스크에 저장된 파일을 선택 하면 어떻게 열것인지 연산하는 작업을 CPU가 처리하

우리가 작성한 JS코드들이 브라우저 위에서 동작하려면 브라우저 자체에 내장되어있는 자바스크립트 엔진이 꼭 필요하다.자바스크립트는 런타임 시 코드를 한줄씩 한줄씩 번역하여 실행하기 때문에 동적타입언어 (Dynamic type)이다.이렇게 작동하게 해주는것을 인터프리터라

드림코딩의 브라우저 101 강의 section 중 하나인 Carrot game을 이틀간에 걸쳐 완성했고, 오늘 솔루션 영상을 봤다.솔루션 영상을 보면서 내가 작성한 코드와 엘리가 작성한 코드를 비교해 보고, 리팩토링 과정을 거쳤다. 이 과정에서 내가 고쳐야 할 부분과

star.jpg라는 1M 크기의 이미지 파일을 요청해서 받아올 때, 캐시가 없다면, 데이터가 변경되지 않아도 계속 네트워크를 통해서 1M 크기의 이미지 파일을 다운로드해야 한다. 이런 경우 인터넷 네트워크는 매우 느리고 비싸기 때문에 브라우저 로딩 속도가 느려지고, 느