전체 글

해당 글은 Inflearn(인프런) ‘비전공자도 이해할 수 있는 Docker 입문/실전' 강의를 토대로 작성되었습니다.비전공자도 이해할 수 있는 Docker 입문/실전 Docker 기본 개념먼저 Docker 를 왜 배우는 걸까? Docker를 쓰는 이유에는 여러가지 장점이 있지만 특정 프로그램을 다른 곳으로 쉽게 옮겨서 설치 및 실행할 수 있는 특성인 이식성 때문이다. 글을 작성하는 본인을 포함하여 특정 프로그램을 배우기 위해 필요한 툴을 설치할 때, 그 과정이 불편해서 특정 블로그나 강의 등에서 알려준 방식대로 설치해도 이상하게 에러가 뜨거나 제대로 안 깔릴 때가 있다. 지우고 다시 깔아봐도 계속해서 똑같은 에러가 뜨기도 한다. 그 이유는 다양하다. 버전을 다른 걸 설치했거나, 운영체제(Window, ..

1. 프로세스와 스레드▪프로세스: 운영체제로부터 자원을 할당받은 작업의 단위.▪스레드: 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위.  프로그램 → 프로세스 먼저 프로세스와 스레드에 대해 본격적으로 설명하기 전에 프로그램에 대해서 설명하고 가야 한다. 프로그램이란, 컴퓨터에서 어떤 작업을 위해 실행할 수 있는 '정적인 상태'의 파일을 말한다.ex) 윈도우의 *.exe 파일이나 MacOS의 *.dmg 파일 등등 사용자가 눌러서 실행하기 전의 파일을 말한다프로세스는 프로그램이 실행되서 돌아가고 있는 상태, 컴퓨터에서 연속적으로 실행되고 있는 '동적인 상태'의 컴퓨터 프로그램이다.즉, 프로그램이 운영체제로부터 실행에 필요한 자원을 할당받아 프로세스가 되는 것이다. 프로세스 → 스레드과거에는 프로그램을..

1. MongoDB 연결먼저 MongoDB의 가입하지 않았을 경우, 가입 후에 mongoDB Atlas 데이터베이스와 Collection을 만들어 주세요.(저 같은 경우는 오랫동안 MongoDB를 사용안하다가 사용해서 Network Access 에 연결한 IP 가 Inactive 상태여서 연결이 안되었는데, 오랫만에 사용해주시는 분은 IP Adress가 Active 상태인걸 확인해주세요) 그리고 가입해서 DataBase를 만들면 연결할 때 필요한 URI랑 password를 줍니다. 어딘가에 잘 적어두시면 됩니다. URI 형식은 다음과 같습니다. mongodb+srv://:@.xxxxxxx.mongodb.net/?retryWrites=true&w=majority2. NextJS에서 사용하기기술 스택 : n..

클라이언트 라우터 캐시브라우저에 저장되는 캐시로 페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터를 보관한다.클라이언트 라우터 캐시 동작과정 먼저 이전 게시물의 풀 라우트 캐시에 의한 동작과정을 살펴보면 다음과 같다. 먼저 인덱스 페이지에 초기 접속 요청을 보내면, 인덱스 페이지의 경우는 정적인 페이지이기 때문에 next 서버에 있는 풀 라우트 캐시에 인덱스 페이지가 저장되어 있는지 확인하고 풀 라우트 캐시된 데이터가 있으면 그대로 반환하고 서치 페이지 같이 동적인 페이지에서 풀 라우트 캐시는 스킵되고 사전 렌더링 과정을 통해 렌더링된 페이지를 반환하게 된다. 하지만 이런 과정을 보면 사실 비효율적일 수 있는데, 그 이유는우리가 전달 받은 페이지 데이터는 HTML, JS Bundle, RSC ..

풀 라우트 캐시(Full Route Cache)풀 라우트 캐시란 Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능을 말한다. 그림과 같은 과정에서 /a 라는 경로를 갖는 페이지가 풀 라우트 캐시를 가질 수 있는 페이지라고 할때, 빌드 타임 시 사전렌더링과정에서  먼저 리퀘스트 메모이제이션과 데이터 캐시 등의 캐시 과정들을 거쳐서 렌더링이 완료가 되면 완료된 렌더링 결과를 Next 서버 측 풀 라우트 캐시라는 곳에 미리 저장하게 된다. 그래서 실제로 빌드 타임 후 서버를 가동하여 /a 라는 경로로 접속을 요청하게 되면 빌드 타임에 미리 렌더링해서 풀 라우트 캐시에 저장된 렌더링 결과를 불러오기 때문에 새롭게 렌더링할 필요가 없이 캐시된 페이지를 그대로 브라우저에게 전송하여 빠른 ..

1. 데이터 캐시(Data Cache)먼저 데이터 캐시란 Fetch 메서드를 활용해서 api 서버로 부터 불러온 데이터를 넥스트 서버 측에서 캐싱해두는 그런 기능을 말한다. 그래서 이러한 데이터 캐시를 이용하며 영구적으로 데이터를 보관하여 불필요한 데이터 패칭의 요청을 방지하거나 특정 시간을 주기로 데이터를 갱신시킬 수 있다.const response = await fetch(`~api`, { cache: "force-cache" }); 그래서 위와 같이 fetch 메서드의 두 번째 인수로 객체 형태의 추가적인 옵션을 설정하여 캐시를 적용할 수 있게된다. 캐시 옵션에는 위와 같이 다양한 옵셥이 존재한다. 참고로 next 앱에서 데이터 캐시의 옵션은 Fetch 가 아닌 Axios 등의 다른  HTTP Re..

앱 라우터의 서버 컴포넌트 도입으로 인해 데이터페칭 방식이 기존의 방식과 변하여 데이터를 페칭한다. 먼저 기존의 페이지 라우터에서 데이터를 페칭하는 방식에는 SSR, SSG, Dynamic SSG 방식이 있었고, 이런 방식을 이용해 데이터를 직접 페칭하여 이 데이터를 페이지 컴퍼넌트에 props 로 넘겨주는 구조로 데이터를 페칭하였다. 이러한 페이지 컴포넌트는 사전렌더링 과정에서 서버측에서 한번 브라우저 측에서 하이드레이션 과정에서 한번 더 실행되어 데이터를 불러오기 위해서는 GetServerSideProps 나 GetStaicProps 등등의 특수한 함수를 이용했어야 했다. 하지만 서버 측에서 불러온 데이터를 컴포넌트 트리 최상단에 위치하는 페이지 컴포넌트에게만 props 로 전달이 될거기 때문에 데이..

App Router 에서도 기존의 Page Router 버전과 동일한 방식으로 네비게이팅, 페이지 이동을 한다. 하지만 App Router 에서 부터 서버 컴포넌트를 사용하여 차이점이 하나 발생한다. JS Bundle 파일 뿐만 아니라 RSC Payload를 같이 보내주는데, 그 이유는 JS Bundle 는 클라이언트 컴포넌트만 포함되어 있어 RSC Payload 를 통해 서버 컴포넌트 까지 같이 보내준다. 그렇지 않으면 클라이언트 컴포넌트만 보내게 되어 서버 컴포넌트로 구성된 부분의 데이터는 브라우저에서는 누락이 되어 정상적으로 페이지를 이동할 수 없게 된다. 그래서 App Router 에서는 페이지 이동 요청시  JS Bundle 과 RSC Payload를 함께 전달하게 된다.네비게이팅을 통한 페이지..