짧은코딩

이미지 레지스트리이미지 레지스트리는 이미지를 저장하기 위한 저장소레지스트리에서 이미지를 저장하고 공유 가능대표적인 레지스트리는 Dcoker Hub -제공하는 기능이미지 공유 이미지 검색이미지 버전 관리보안파이프라인-이미지가 저장되는 공간호스트 머신의 로컬 스토리지퍼블릭 레지스트리프라이빗 레지스트리이미지가 로컬 스토리지에 있으면 그걸 실행하고, 없으면 퍼블릭이나 프라이빗 레지스트리에서 다운 받아 컨테이너로 실행 -Docker Hub 말고 나만의 레지스트리를 사용하는 법서버에 레지스트리를 설치해서 사용HARBORDocker 프라이빗 레지스트리퍼블릭 클라우드의 서비스를 사용하는 방법AWS의 ECRAzure의 Container Registry(ACR)-이미지명 규칙이미지 이름에는 이미지를 어디서 다운 받았는지,..

이미지소프트웨어의 실행법부터 알아보자하드웨어 자원을 이용할 수 있게 해주는 OS가 필요라이브러리나 패키지에 의존하여 실행 혹은 런타임 언어가 필요개발자가 개발한 애플리케이션이나 다운로드 받은 소프트웨어가 필요하지만 도커에서는 이런 과정 없이 이미지를 실행함.어떻게 가능한걸까?예를 들어 Nginx 이미지를 실행하면, 이미지를 통해서 컨테이너를 실행했기 때문이미지는 파일 시스템의 특점 시점을 저장해 놓은 압축 파일임이미지는 소프트웨어가 실행되기 위해 필요한 모든 것들을 미리 준비해서 압축따라서 이미지를 다운 받아서 OS의 격리된 공간에서 컨테이너가 실행되는 것-이미지의 특성이미지는 운영 체제의 백업 기능(스냅샷)과 유사하다.언제든지 해당 시점의 소프트웨어를 실행할 수 있기 때문이다.하지만 이미지는 백업 기능..

가상화 기술이란?IT에서는 실제로 존재하는 것을 물리적, 가상으로 존재하는 것을 논리적이라 함 -도커는 가상화 기술도커를 사용하는 이유는 하나의 컴퓨터에서 그냥 프로그램 4개를 돌리다가 1개가 자원을 많이 쓰거나, 에러 발생 시 다른 프로그램에도 영향을 줌 결국 하나의 OS에서 여러 프로그램을 돌리는 건 매우 안 좋음도커를 사용하면 프로그램들이 논리적으로 분리되어 있어서 안전함하드웨어 여러 개를 사용하는 것보다. 좋은 컴퓨터 1대를 사용하는 것이 비용적으로 더 저렴함가상화 기술의 종류가상화 기술은 하이퍼바이저와 컨테이너 2가지가 있음하이퍼바이저하이퍼바이저는 컴퓨터에 설치되는 프로그램(Host OS에서 설치 가능)하이퍼바이저는 가상 OS(게스트 OS)를 실행/종료 가능각 OS 마다 시스템 콜 표준이 다르다..

loading.tsx와 error.tsx loading.tsx, error.tsx 파일을 만들어두면 로딩 중에는 loading.tsx가 보이고, 에러가 발생하면 error.tsx가 보이게 할 수 있다. React의 Suspense와 error boundary를 이용하여 구현할 수 있다. Next의 Loading UI and Streaming 공식 문서 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming Routing: Loading UI and Streaming | Next.js Built on top of Suspense, Loading UI allows you to create a fallback ..

useFormState와 useFormStatus 로그인이나 회원가입 같은 부분에서 Form을 통해 처리를 하곤 한다. 이때 아이디나 비밀번호가 비어있으면 에러 메시지를 알려줘야 한다. 그럴 때 useFormState, useFormStatus를 사용하면 편하다. 하지만 이 기능은 아직 실험적인 기능이긴 하다. useFormState https://react.dev/reference/react-dom/hooks/useFormState useFormState – React The library for web and native user interfaces react.dev -예시 코드 import { useFormState } from "react-dom"; async function increment(p..

useSelectedLayoutSegment useSelectedLayoutSegment는 ActiveLink를 만들 때 유용한 hooks이다. next에 내장되어 있는 기능이다. -useSelectedLayoutSegment import {useSelectedLayoutSegment} from "next/navigation"; export default function NavMenu() { const segment = useSelectedLayoutSegment(); console.log(segment); return ; } 만약 "compose/tweet" 주소에 있으면, segment는 "compose"가 나온다. 즉, useSelectedLayoutSegment는 최상위 부모 경로만 나온다. -u..

만들려는 기능 모달을 띄웠는데, 이전 페이지가 유지되고 주소가 바뀐다. 로그인 버튼을 누르면 "/login"으로 갔다가 "/i/flow/login"으로 리다이렉팅 된다. 패러렐 라우트와 인터셉터 라우트를 이용해서 구현한다. 패러렐 라우트 Parellel은 병렬이라는 의미를 가지고 있다. 즉, Parallel Route는 병렬 라우트로 해석할 수 있고, 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다. 패러렐 라우트는 뒤에 화면이 남아있으면서 모달을 띄우고 주소를 변경할 수 있는 기능이다. 폴더 구조 app/(beforeLogin)/layout.tsx import {ReactNode} from "react"; import styles from '@/..

app router app router는 기존에 있던 page router의 문제점들을 해결한 새로운 폴더 구조이다. 아직 Next에서 page router를 지원하긴 하지만 신규 기능은 app router에만 적용될 것이다. 그렇기에 장기적으로 보면 app router에 대해 잘 이해할 필요가 있다. 파일 생성 npx create-next-app@lastst 폴더 구조 public public 폴더에는 주로 누구나 접근 가능한 사진들을 저장한다. 만약 특정한 조건을 가진 사람만 접근이 가능해야 하면 다른 곳에 저장해야 한다. src/app app 폴더 안에는 페이지를 설정하는 파일들이 들어간다. 페이지 외에 파일이 필요하면 다른 폴더를 만들어서 작성하면 된다. -layout.tsx layout.tsx는..

리페칭을 할 때 중요하게 봐야 되는 것은 서버가 만료 데이터를 업데이트 한다는 것이다. 창을 포커스하는 트리거를 하면 잠시 로딩 인디테이터가 나타나는데 이는 만료되었던 데이터를 가져오기 때문이다. 데이터는 시간이 지나면 자연스럽게 만료된다. stale 쿼리는 어떤 조건 하에서 자동적으로 다시 가져오기가 된다. 새로운 쿼리가 많아지거나 그 쿼리가 처음 호출, 쿼리를 사용하는 컴포넌트 증가, 트리거, 네트워크가 다시 연결되면 리페칭이 일어난다. 그리고 리페칭 간격이 지난 경우에도 리페칭이 다시 일어나는데 이 경우 간격을 둬서 서버를 폴링하고 사용자가 딱히 무엇을 하지 않아도 데이터가 리페칭 된다. 리페칭은 전역 혹은 특정 쿼리로 할 수 있다. refetchOnMount, refetchOnWindowFocus..

useQuery의 select 옵션을 사용하면 쿼리 함수가 반환하는 데이터를 반환할 수 있다. React Query는 불필요한 연산을 줄이기 위해 memoization을 하여 최적화를 한다. 이때 select 함수를 사용하는데 select 함수는 데이터와 함수가 모두 변경되었을 때만 실행되고삼항 연산자로 비교한다. 검색한 데이터와 동일한 데이터고 select 함수에도 변동이 없으면 select 함수는 재실행되지 않는 것이 React Query 최적화이다. 따라서 select 함수는 안정적인 함수일 필요가 있어서 익명 함수는 올 수 없다. 익명 함수를 사용하고 싶다면 useCallback를 사용하면 된다. 사용법 const selectFn = useCallback( (data) => { getAvaila..