꿈꾸는 개발자

Docker로 Nuxt3을 실행하게 되면 위와 같은 Error가 발생한다.  해결 방법docker-compose up --force-recreate명령어 설명docker-compose up: 이 명령어는 docker-compose.yml 파일에 정의된 서비스를 기반으로 컨테이너를 생성하고 시작합니다. 필요한 경우 이미지도 빌드하고, 네트워크, 볼륨 등을 설정합니다.--force-recreate: 이 플래그는 기존의 컨테이너가 이미 존재하는 경우에도, 기존 컨테이너를 중지하고 새로 생성하여 시작하게 합니다. 즉, 모든 컨테이너를 강제로 다시 생성(recreate)합니다.아마 기존에 이미 생성된 Docker Container가 있어서 충돌이 발생하는 것으로 보인다.

Rate Limiting Rate Litming이란 일정한 시간 동안 호출할 수 있는 API 수를 의미한다. 사용자가 혹은 개발자의 실수로 일정 시간 동안 제한된 수 이상의 요청을 보내게 되면 요청이 실패하게 된다. (보통은 429 too many request error가 반환된다) 보통 서버에서 rate limit을 적용하면, 서버의 안정성을 높일 수 있다.  하지만 본 글은 rate limit에 관해 다루는 글이 아니기 떄문에, 자세한 사항들은 추가적으로 학습하길 권장한다. 프론트에서 Api call 제한하는 방법 회사에서 rate limit에 대응의 필요성을 인지한 후 여러 방법을 시도해봤다.  첫 번째, tanstack Query을 활용한 요청 제한처음에는 tanstack query에서 위와 같..

GraphQL은 페이스북에서 만든 쿼리 언어이다. graphQL은 Graph+Query Language의 줄임말이다. Server API를 통해 정보를 주고 받기 위해 사용하는 Query Language를 의미한다. 결론: API를 위한 쿼리 언어이다. GraphQL에선 모든 데이터가 그래프 형태로 연결되어 있다고 전제한다. 일대일로 연결된 관계도 여러 계층으로 이루어진 관계도 모두 그래프이다. GraphQL은 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송할 수 있다. (엄청난 장점) GraphQL로 그래프 순회 상황 가정: 도서 목록 시스템을 구축 하나의 도서 목록에는 많은 책과 저자가 있으며, 각 책에는 최소한 한 명의 저자가 있다. 또한, 최소한 한 권의 책을 같이쓴 ..

보호되어 있는 글입니다.

주제:스토리북과 함께하는 컴포넌트 주도 개발 컴포넌트에 대한 설명: 재사용할 수 있는 코드 블록 우리가 생각하는 컴포넌트의 종류: (3가지를 구별해서 생각하는 것이 중요하다) Component Web Component 빌드 필요X 표준화됨 바로 사용할 수 있다 (커스텀도 가능하다) React Component Web Component: 정의: 웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다. 웹 컴포넌트 VS React react가 표준이 아니고 웹 컴포넌트가 표준인 이유?: 웹 컴포넌트는 별도의 설치 없이 사용할 수 있다. (근본적인 차이점) 웹 컴포넌트도 다른 사람이 만들 것을 사용할 수 있다..

react-query는 아래와 같은 기능들을 보다 간편하게 할 수 있도록 도와준다(그 외에도 다양한 기능을 제공). 해당 기능들을 통해 클라이언트 상태와 서버 상태를 명확하게 구분을 해준다. 서버 상태 가져오기 캐싱 동기화 및 업데이트 사용하는 이유 우아한테크세미나(보다 자세한 내용은 관련 링크를 참고하세요) 우테크 세미나 내용을 참고해보면, 직관적인 API 호출, 서버 상태관리의 용이성, client side에 정제된 상태 관리 등 다양한 이유들이 나온다. 개인적인 이유: 아직 사용해보지 않았기 때문에 관련 내용들이 얼마나 강력한 편의성을 제공할지 알지 못하지만 개인적으로 팀 프로젝트를 진행하면서 redux-toolkit을 통해 비동기 데이터를 처리 시도를 할 때 이것을 관리하는 것이 상당히 애매하다는..

redux-toolkit을 사용하다보면 가장 큰 단점이 새로고침을 했을 때 상태들이 초기화된 다는 것이다. plain JS에선 localstorage에 저장해서 상태를 유지할 수 있지만, redux에서 굳이 상태를 유지하기 위해 모든 상태를 일일이 다 localstorage 저장하는 것은 너무 힘들어 보인다....이런 문제를 간편하게 해결할 수 있는 것이 redux-persist이다 먼저 redux-persist를 사용하기 위해선 따로 redux-persist를 설치해줘야 한다 npm i redux-persist 사용법 redux-persist는 localstorage 뿐만 아니라, session storage, async storage 등 종류에 따른 storage를 제공한다. 하지만 본 글에서 주로 ..

보호되어 있는 글입니다.