리액트 v19
리액트 앱의 일반적인 사용 사례는 데이터 변형(Mutation)을 수행한 다음 이에 대한 응답으로 상태를 업데이트하는 것이다. 예를 들어 사용자가 이름을 변경하기 위해 양식을 제출하면 API 요청을 한 다음 응답을 처리한다.
리액트 v18.0
Concurrent React는 리액트의 핵심 렌더링 모델에 대한 근본적인 업데이트이다. Concurrent React의 주요 속성은 렌더링이 중단 가능하다는 것입니다. 동기식 렌더링을 사용하면 업데이트가 렌더링을 시작하면 사용자 화면에서 결과를 볼 수 있을 때 까지 아무것도 중단할 수 없다. 하지만 동시 렌더링에서는 항상 그런 것은 아니다. 리액트는 업데이트 렌더링을 시작하고 중간에 일시 중지한 다음 나중에 계속할 수 있다. 진행 중인 렌더링을 완전히 포기할 수도 있다.
Next.js + Vercel TTFB 문제 2
에서 Edge runtime으로 TTFB 문제를 해결했었는데, Express를 Next.js로 이미그레이션 후에는 Edge runtime을 사용할 수 없어서 다른 방법으로 문제를
데스크톱, 모바일 호환되는 가로 슬라이더 구현
Next.js 14, Tailwindcss, Typescript 터치 이벤트는 일반적으로 터치 스크린을 가진 디바이스에서 이용가능하다. 하지만, 터치 스크린을 갖는 디바이스를 포함
Next.js + Vercel TTFB 문제
로컬 환경에서는 애플리케이션의 TTFB(Time To First Byte)가 70~150ms정도 걸리는데, 배포 환경에서는 TTFB가 느리면 1500ms, 빠르면 400ms정도가
[번역] Next.js 14
Next.js 14는 다음과 같은 가장 중점으로 둔 릴리스이다. - Turbopack: App & Pages Router에서 5,000번의 테스트 통과 - 로컬 서버 시작이 53%
[번역] 캐싱
Next.js는 렌더링 작업과 데이터 요청을 캐싱하여 어플리케이션의 성능을 향상시키고 비용을 감소시킨다. 기본적으로 Next.js는 성능을 향상시키고 비용을 줄이기 위해 가능한 한
로컬스토리지를 이용한 다크모드 구현
[깃허브 링크](https://github.com/yewonJin/nextjs13-darkmode-example ) Next.js 13에서 웹 스토리지를 이용하여 다크모드를 구현했
[번역] 구성 패턴
리액트 애플리케이션을 빌드할 때, 애플리케이션의 어느 부분을 서버 또는 클라이언트에서 렌더링할지 고려해야 한다. 이 글은 서버 및 클라이언트 컴포넌트를 사용할 때 권장되는 몇 가지
[번역] 클라이언트 컴포넌트
클라이언트 컴포넌트는 요청 시 클라이언트에서 렌더링할 수 있는 인터랙티브한 UI를 만들 수 있게 해준다. Next.js에서 클라이언트 렌더링은 opt-in으로, 리액트가 클라이언트
[번역] 서버 컴포넌트
리액트 서버 컴포넌트는 서버에서 렌더링되고 선택적으로 캐시된 UI를 만들 수 있게 한다. Next.js에서 렌더링 하는 것은 route segments에 의해 더 나누어져있어서 s
[번역] 렌더링
렌더링은 작성한 코드를 유저 인터페이스로 변환한다. 리액트와 Next.js를 사용하면 코드의 일부를 서버 또는 클라이언트에서 렌더링할 수 있는 하이브리드 웹 애플리케이션을 만들 수
쿠키를 이용한 다크모드 구현
쿠키를 이용하여 Next.js 13 환경에서 다크모드를 구현했다. Next.js의 서버 컴포넌트에서는 브라우저의 API를 사용할 수 없다. 즉, 웹 스토리지를 이용할 수 없기 때문
[번역] 데이터 Fetching
데이터 fetching은 모든 애플리케이션의 핵심 부분이다. 이 페이지에서는 리액트 및 Next.js에서 데이터를 fetch하고, 캐시하고, 재검증하는 방법에 대해 설명한다. 데이터를 fetch하는 방법은 4가지가 있다.
[s3-example] 5. S3 이미지 업로드
1. [파일 업로드] 눌러서 파일 선택한다. 2. 선택한 파일을 formData에 추가하고, body에 formData 담아 서버에 POST 요청한다. 3. 클라이언트로부터 받아온
웹 스토리지와 쿠키
브라우저에는 자동 로그인, 브라우저 테마 설정, 임시적인 Form 저장과 같은 이유로 사용자 혹은 사이트의 데이터를 보관할 공간이 있어야 한다. 이를 위해, 브라우저는 **웹 스토
[react-auth-example] 2. 프론트엔드
로컬 스토리지, 세션 스토리지, 쿠키의 차이점을 알기 쉽게 페이지 및 API를 따로 구현했다. 프론트엔드에서 fetch 요청 시 옵션으로 credentials: "include"를
[react-auth-example] 1. 백엔드
해시된 password를 사용하지 않았다. 로그인을 하면 jwt.sign()을 이용하여 토큰을 발급한다. - 웹 스토리지 : JWT를 브라우저에 전달한다. - 쿠키 : 서버에서 쿠
JWT
JWT(JSON Web Token)는 JSON 객체로 당사자 간에 안전하게 정보를 전송하기 위해 사용되는 open standard이다. 주로 공간이 한정적인 환경인 HTTP Aut
[s3-example] 4. S3 이미지 불러오기
퍼블릭화한 S3 버킷의 객체 URL은 https://[버킷명].s3.[버킷리전].awazonaws.com/[객체]로 되어있다. ex) https://doromo-example.s3
[s3-example] 3. 백엔드 구축
Node.js와 express로 백엔드를 구축했다. 백엔드에서 aws-sdk를 이용하여 버킷과 객체에 접근할 것이다. MY_AWS_ACCESS_KEY : IAM 설정에서 발급받은
[s3-example] 2. 버킷 생성 및 권한 설정
AWS S3의 모든 객체는 버킷에 저장되기 때문에 S3에 파일과 폴더를 업로드하려면, 먼저 객체가 저장될 버킷을 생성해야 한다. 또한 Node.js에서 @aws-sdk/client
[s3-example] 1. IAM 설정
Node.js는 @aws-sdk/client-s3 라이브러리를 이용하여 S3 버킷과 객체를 제어한다. 라이브러리를 사용하기 위해서는 일단 AWS S3에서 IAM 사용자를 만들어 액
프로미스
ES6에서 도입된 비동기 처리를 위한 패턴으로 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. get 함수는 비동기 함수이다
동기 처리와 비동기 처리
함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성되어 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행된다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기