May 10, 2023
정의 실행 컨텍스트는 로 구현한 코드의 런타임 평가를 추적하는데 사용되는 사양 장치이다. 에서 실행 컨텍스트라는 개념을 통해 다음과 같은 기능을 수행할 수 있다: 코드의 실행 순서를 결정한다. 변수나 함수 등의 식별자를 등록하고 관리한다. 렉시컬 환경의 정보를 기억하고 상위 스코프와 하위 스코프와의 연결 관계를 나타내어 스코프 체이닝이 가능하게 한다.…
May 09, 2023
정의 는 변수나 함수와 같은 자원에 부여된 이름 바인딩이 유효한 범위이다. 즉, 자원에 접근 가능한 범위를 나타낸다. 프로그래밍에서 스코프라는 개념을 통해 다음과 같은 이점을 누릴 수 있다: 다른 스코프 내에서 같은 식별자 이름을 사용해도 이 발생하지 않는다. 자원에 대한 접근 범위를 제한할 수 있다. 범위 전역 스코프(Global Scope) 어느 …
May 08, 2023
useMutation 서버에 새로운 데이터를 추가하거나 기존의 데이터를 수정하거나 삭제하는 등의 조작을 하기 위해서는 을 사용한다. 파라미터 mutationFn 가 동작하면 작동하는 함수이다. 보통은 서버에 비동기 API 요청을 하는 코드를 작성한다. : 함수의 인자로 전달한 값 onMutate 가 동작할 때 작동하는 함수로, 보다 빨리 실행된다…
May 08, 2023
서버가 응답하는 결과를 클라이언트에서도 미리 예측이 가능한 경우에는 응답을 받기까지 기다리는 시간이 사용자 입장에서 답답하다고 느껴질 수 있다. 이럴 때 서버로 보낸 요청이 당연히 성공할거라는 낙관적인 생각을 가지고 변경 사항을 미리 반영하는 방법을 사용할 수 있는데 이를 낙관적 업데이트(Optimistic Update)라 한다. 예를 들어서 게시글의 좋…
May 07, 2023
서버의 데이터를 가져오는 경우에는 , , 를 사용한다. useQuery 하나의 에 해당하는 단일 데이터를 서버에 요청할 때 사용한다. 예제 코드 파라미터 queryKey 패칭한 데이터를 캐싱하는 데 사용하는 고유한 키이다. 쿼리 키가 변화하면 는 해당 쿼리 키에 대한 데이터를 새롭게 반영한다. queryFn 데이터를 패칭할 때 동작하는 함수이다. 보…
May 06, 2023
쿼리 키 는 쿼리 키를 기반으로 쿼리 캐싱을 관리한다. 따라서 특정 쿼리 키를 가진 데이터를 가져와야 할 때 이미 캐싱된 데이터가 있다면 그 데이터를 가져와서 사용한다거나, 혹은 무효화해서 새롭게 가져오도록 한다거나 하는 동작이 가능하다. 부터 쿼리 키는 배열로 작성해야 하는데, 배열의 내부에는 이 들어갈 수도 있고 가 들어갈 수도 있다. 같은 키…
May 06, 2023
는 선언적인 방식으로 서버의 상태를 클라이언트로 가져오고, 캐싱하고, 동기화하고, 업데이트 할 수 있는 라이브러리이다. 등장 배경 서버 상태는 다음과 같은 특성을 갖는다: 실제 데이터가 통제할 수 없는 원격 위치에 존재한다. 데이터를 패칭하고 업데이트하는데 비동기적인 API를 필요로 한다. 실제 데이터가 다른 사람에 의해 변경될 수 있다. 데이터를 적…
May 04, 2023
우선 배포해야 할 프로젝트를 기반의 프론트엔드 프로그램과, 기반의 백엔드 프로그램 두 가지로 생각했다. 배포하기 위한 여러 방법을 알아보니 나 같이 인프라 자원을 가상화해서 제공하는 를 이용하는 방법과, 나 같이 서비스가 배포를 쉽게 할 수 있게 지원하는 를 이용하는 방법이 있었다. 왠만해서는 비용이 들지 않는 방법으로 하고 싶었는데…
May 03, 2023
사이드 프로젝트를 시작한 계기 대학교에서 2~3번 정도의 프로젝트를 했었지만 나를 포함해서 팀원의 개발 경험이나 설계 경험이 적었다보니 어떻게든 기한 내에 완성하기 위해서 막바지에는 시연에 문제가 없을 정도로만 기능 구현에 급급해서 개발했던 경우가 많았다. 그렇다보니 내부는 스파게티 코드처럼 되어서 정리가 되지 않았는데 이러한 결과물을 포트폴리오에 프로젝…
May 01, 2023
프로젝트의 규모가 커질수록 코드를 하나의 단일 책임을 수행하는 작은 모듈로 분할해서 구현하게 되는데 경로가 깊어지는 경우 다른 파일을 불러올 때 굉장히 복잡해 질 수 있다. 그래서 절대 경로로 하도록 설정하면 편리한데, 설정 과정을 작성해 보고자 한다. React 프로젝트 로 초기화한 프로젝트를 기준으로 할 때 크게 두 가지의 설정이 필요하다. 에게 …