Hello Jay's Programming World!

안녕하세요. Jay 입니다. 오늘은 React-markdown(https://github.com/remarkjs/react-markdown)을 소개해보려고 합니다.  간단한 프로젝트로 openai API 응답을 받아서 화면을 그려주는 프로젝트를 해보게 되었습니다. 해당 API는 SSE(Server-Sent-Event)로 동작하는데,..

Turbopack 53% 더 빠른 로컬 서버 시작 94% 더 빠른 코드 업데이트시, 새로고침 Server Actions (Stable) caching과 revalidating 통합 간단한 함수나 기본적인 형태로 동작 Partial Prerendering (Preview) 빠른 초기 정적 응답 + 스트리밍 동적 콘텐츠 Next.js Learn (New) App Router, authentication, database등의 무료 코스 추가 Next.js 14 Next.js 14 includes included performance, stability for Server Actions, a new course teaching the App Router, and more. nextjs.org

new Root API 이전에는 Root Container에 변화가 없더라도, 새로 랜더링하기 위해 Root를 반드시 체크했어야만 했다. 위 과정이 무의미하다고 판단하여 새로운 Root API를 생성함. 매번 Root를 체크하지 않음. 새로운 Root API에는 Callback이 제거되었는데, hydration, SSR 과 함께 Callback을 사용하면 타이밍이 개발자의 생각과 다르게 작동할 수 있기 때문이다. automatic batching 더 나은 랜더링 성능을 위해 state 업데이트를 하나로 그룹화 하는 것을 의미한다. 모든 state 업데이트는 리액트에서 발생하는 이벤트 내부의 업데이트와 동일한 방식으로 처리하여 랜더링 횟 수를 최소화 함. automatic batching을 원하지 않는 경..

이벤트 리스너 내부에서 상태를 접근하면 최신의 상태를 가져올 수 없습니다. 이벤트 리스너가 등록될 시점의 상태로만 접근이 가능합니다. 그렇다면, 최신의 상태를 가져오기위해서는 어떻게 해야할까요? useRef를 이용해 이 문제를 해결 할 수 있습니다. 간단한 예제 프로그램을 만들어봤습니다. 화면에는 현재 count 상태 값을 출력하고, 버튼을 클릭하면 count 값을 1 증가시킵니다. 증가된 상태 값은 바로 적용되어 화면에 출력됩니다. 브라우저 화면을 더블 클릭하면 count 값을 alert 창에 출력하도록 이벤트 리스터도 추가했습니다. import "./App.css"; import { useEffect, useState } from "react"; function App() { const [count,..

selectors는 atoms이나 다른 selectors를 입력으로 받아드리는 순수 함수이다. selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 이 말은, 최소한의 상태만 atoms에 저장하고, atoms과 selectors를 조합/가공하여 파생될 수 있는 모든 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로 쓸데 없는 상태의 보존을 방지한다. selector 함수 내부에서 사용하는 atoms 또는 selectors가 업데이트 되면 해당 selector 함수도 다시 실행된다. const fontSizeLabelState = selector({ key: 'fontSizeLabelState', get: ({get}) => { const fontSize = g..

React를 위한 상태관리 라이브러리. Recoil을 사용하면, atoms(공유 상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms 상태의 단위로서, 업데이트와 구독이 가능. atom이 업데이트되면 구독하고 있는 모든 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다. 런타임에 생성 가능. Selectors atoms나 다른 selectors를 입력으로 받아들이는 순수 함수 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용. 최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생 되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산하므로서 쓸모 없는 상태의 보존을 방지 참고: 주요 개념 | Reco..

먼저, create-next-app 명령어를 이용해서 기본 프로젝트를 생성합니다. --typescript 명령어를 이용하여 typescript 프로젝트로 설정했습니다. yarn create next-app --typescript nextjs-typescript-redux 그 다음은 필요한 패키지들을 설치합니다. yarn add redux redux-thunk next-redux-wrapper react-redux @types/react-redux 패키지 설치가 완료되었으면, 프로젝트 루트(root)에 redux라는 이름의 폴더를 생성합니다. 그리고 그 내부에 store.ts, types.ts 파일과 actions, reducers라는 이름의 폴더를 생성합니다. 아래 그림과 같이 생성되면 됩니다. type..

Docker란? 컨테이너 기반의 오픈소스 가상화 플랫폼 컨테이너 격리된 공간에서 프로세스가 동작하는 기술. 하나의 서버에 여러개의 컨테이너를 실행하면 서로 영향을 미치지 않고 독립적으로 실행 이미지 컨테이너 실행에 필요한 파일과 설정값등을 포함하고 있는 것. 이미지를 실행한 것이 컨테이너! 같은 이미지에서 여러개의 컨테이너를 생성할 수도 있다. 레이어 저장 방식 도커 이미지는 컨테이너를 실행하기 위한 모든 정보를 갖고 있기 때문에 보통 용량이 수백메가에 이름. 기존 이미지에 파일 하나를 추가했다고 모든 이미지를 교체하는 것은 너무 비효율적 이미지는 여러개의 읽기 전용 레이어로 구성되고 파일이 추가되거나 수정되면 새로운 레이어가 생성됨. 이미지에서 수정된 레이어만 다운받으면 되는 형식으로 사용. Docke..

Amazon S3 확장성, 데이터 가용성 및 보안과 성능을 제공하는 객체 스토리지 서비스. 특징 모든 종류의 데이터를 원하는 형식으로 저장 저장할 수 있는 데이터의 전체 볼륨과 객체 수에는 제한이 없음 Amazon S3는 간단한 Key 기반의 객체 스토리지이며, 데이터를 저장 및 검색하는데 사용할 수 있는 고유한 객체 키를 할당. Amazon S3는 간단한 표준 기반 REST 웹 서비스 인터페이스를 제공 안전함 CloudFront Amazon CloudFront는 개발자 친화적 환경에서 짧은 지연 시간과 빠른 전송 속도로 데이터, 동영상, 애플리케이션 및 API를 전 세계 고객에게 안전하게 전송하는 고속 콘텐츠 전송 네트워크(CDN) 서비스 CDN(Content Delivery Network) CDN(콘..

개인 프로젝트를 개발할 때는 딱히 신경쓰지 않아도 될 수도 있지만, 실무에서는 개발 환경, QA 환경, 운영 환경등 각 환경마다 서버 주소나 변수들이 다른 경우가 많습니다. 그래서 각각 환경에 맞게 변수들을 등록해두고 환경에 맞게 변수가 자동적으로 적용되도록 해야합니다. 오늘은 env-cmd 패키지를 이용하여 환경변수를 설정해보겠습니다. 먼저, env-cmd를 설치합니다. npm install env-cmd or yarn add env-cmd 설치를 했다면, 환경변수 파일을 생성합니다. 저는 아래와 같은 이름과 내용으로 두 개의 파일을 생성하겠습니다. .env.dev NEXT_PUBLIC_MODE=dev .env.prod NEXT_PUBLIC_MODE=prod 그리고 package.json 파일을 수정합..