컨테이너가 가진 문제점 Docker 를 활용하면 특정 프로그램을 컨테이너로 띄울 수 있음 이 프로그램에 기능이 추가되면 새로운 이미지를 만들어서 컨테이너 실행시켜야함 이 때 Docker는 기존 컨테이너에서 변경된 부분을 수정하지 않고, 새로운 컨테이너를 만들어서 통채로 갈아끼움  이때 기존 컨ㄴ테이널르 새로운 컨테이너로 교체되면 기존 컨테이너에서 내부에 있던 데이터도 삭제됨 -> 만약 MySql 을 실행시키는 컨테이너였다면 MySQL 에 저장되어있는 데이터도 삭제됨 따라서 컨테이너 내부에 저장된 데이터가 삭제되면 안되는 경우에는 볼륨이라는 개념을 활용함  Docker Volume이란?도커 컨테이너에서 데이터를 영속적으로 저장하기 위한 방법 볼륨은 컨테이너 자체의 저장 공간을 사용하지 않고, 호스트 자체의..

1. 이미지 다운로드 docker pull [이미지명]  2. 이미지 다운로드 확인docker image ls  3. 이미지들은 어디에서 다운로드 받는 것일까? (Docker hub) https://hub.docker.com/ Docker Hub Container Image Library | App ContainerizationIncrease your reach and adoption on Docker Hub With a Docker Verified Publisher subscription, you'll increase trust, boost discoverability, get exclusive data insights, and much more.hub.docker.com 이전에 다운받았던 nginx ..

Docker 전체 흐름을 파악하기 위해서 Docker를 활용해서 nginx 를 설치해본다.  nginx?nginx란 여러 기능을 가진 서버 중 하나이다. 웹 서버를 (HTML 웹 페이지를 렌더링 시키는 역할)    1. nginx 이미지 다운로드 ❯ docker pull nginx  2. 이미지 다운로드 받은 것 확인docker image lsd  3. 컨테이너 실행docker run --name webserver -d -p 80:80 nginx  4. http://localhost:80 으로 확인해본다 .   5. 컨테이너 실행되고 있는 지 확인하는 명령어 docker ps   6. 컨테이너 종료 ❯ docker stop webserver1(컨테이너 이름)

1. windowhttps://myanjini.tistory.com/entry/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90-%EB%8F%84%EC%BB%A4-%EB%8D%B0%EC%8A%A4%ED%81%AC%ED%83%91-%EC%84%A4%EC%B9%98 2. mac os https://happylie.tistory.com/78

- 현업에서 Docker를 많이 쓰는 이유     이식성 : 특정 프로그램을 다른 곳으로 쉽게 옮겨서 실행할 수 있는 특성  - 매번 귀찮은 설치 과정을 거치지 않아도 됨- 항상 일관되게 프로그램을 설치할 수 있다. (버전, 환경 설정, 옵션, 운영체제) Docker 란?컨테이너를 사용하여 각각의 프로그램을 분리된 환경에서 실행 및 관리할 수 있는 툴   컨테이너(Contianer)란?- 하나의 컴퓨너 환경 내에서 독립적인 컴퓨터 환경을 구성해서, 각 환경에 프로그램을 별도로 설치할 수 있게 만든 개념 - 하나의 컴퓨터 내에서 여러개의 미니 컴퓨터 환경을 구성할 수 있는 형태 - 여기서 말하는 미니 컴퓨터를 보고 Docker 에서는 컨테이너라고 부른다.    컨테이너와 컨테이너를 포함하고 있는 컨테이너를..

https://medium.com/@iamkjw/fullcalendar-with-react-2e22ce4e36ea FullCalendar with React프로젝트에서 캘린더를 사용해서 일정을 관리하는 기능이 필요해서 이번에 사용한 캘린더 라이브러리인 FullCalendar를 소개해 보려 한다.medium.com https://jquense.github.io/react-big-calendar/examples/?path=/docs/addons-drag-and-drop--example-1 Webpack App jquense.github.io  https://velog.io/@fearofcod/React-Big-Calendar React-Big-Calendar프로젝트 중 구글 캘린더 기능을 가진 달력을 찾던 ..

https://velog.io/@seoltang/infinite-scroll-react-query 상향식 무한 스크롤 구현해서 채팅 내역 조회 개선하기 (React Query)무한 스크롤로 성능과 UI 두 마리 토끼 잡기 (w. useInfiniteQuery)velog.iohttps://fordang.tistory.com/165 Next.js에서 react-query 활용한 무한스크롤 완전정복(useInfiniteQuery, useLocalStorage)눈물이 좀 날 뻔 했다. 다른 FE 개발자 분들은 헤매지 마시라고 기록을 남긴다. (...빠이팅! ) 거두절미하고 바로 시작  00. 백엔드에서 가져와야할 데이터 형식내가 백엔드에서 받아온 데이터fordang.tistory.com   1. refecthQ..

Tanstack-query에서 staleTime과 gcTime은 데이터를 캐싱하고 관리하는데 중요한 두 가지 설정 값이다. 1. staleTime데이터가 얼마나 오래 '신선한 상태'로 유지되는지를 정하는 시간 staleTime 내에는 같은 쿼리에 대한 새로운 네트워크 요청이 일어나지 않고, 캐시 데이터를 그대로 사용하게 된다. 예를 들어 staleTime을 5분으로 설정하면, 데이터를 가져오고 나서 5분 동안 데이터가 '신선하다'고 판단해서 쿼리 호출 시 추가 네트워크 요청 없이 캐시 데이터를 계속 사용한다. 그리고 5분이 지난 후 해당 쿼리를 호출하면 새로운 요청을 보내서 데이터를 갱신한다. staleTime 기본값은 0임 2. gcTime해당 쿼리를 사용하는 곳이 없게 된 이후에도 캐시 데이터를 얼마..

Introduction - React Three FiberReact-three-fiber is a React renderer for three.js.r3f.docs.pmnd.rs 1. React-three-fiberReact-three-fiber는 React 기반으로 Three.js를 사용할 수 있게 해주는 라이브러리입니다. Three.js는 3D 그래픽 렌더링에 있어 가장 널리 사용되는 JavaScript 라이브러리이지만, DOM과는 별개의 렌더링 환경을 필요로 합니다. React-three-fiber는 이를 React의 상태 관리 및 컴포넌트 구조와 통합하여 다음과 같은 장점을 제공합니다.https://r3f.docs.pmnd.rs/getting-started/introduction Introduct..

개발 라이브러리 1. DOM -> React   2. SVG -> D3.js (Data visualizing)https://d3js.org/ D3 by Observable | The JavaScript library for bespoke data visualizationD3 The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibilityd3js.org  3. Canvas ->Three.js 2D -> p5.js , pixi.js (게임업계에서 많이 사용함)   3D -> Three.js , babylon.js https://threejs.org/ Thre..