FOIT는 폰트가 완전히 다운로드될 때까지 화면에서 텍스트를 숨기는 방식을 의미합니다. 사용자는 폰트가 로딩되는 동안 텍스트를 볼 수 없으며, 폰트 다운로드가 끝난 후에야 텍스트가 노출됩니다. 이 방식의 단점은 폰트 로딩이 지연될 경우, 사용자에게 불편함을 줄 수 있다

웹사이트를 만들면서 누구나 한 번쯤 마주치는 문제가 바로 이미지 최적화입니다. 이번에 진행한 프로젝트에서도 Lighthouse 성능 검사를 해봤더니 이미지가 JPG 형식이라서 성능 점수가 생각보다 좋지 않았어요. 이미지는 웹사이트의 성능과 사용자 경험에 정말 큰 영향을

리액트로 만든 카드 리스트 페이지에서 A 카드를 클릭해 상세 페이지로 이동하고, 스크롤을 내렸다.이후 뒤로가기를 누르면 카드 리스트로 돌아오는데, 스크롤이 내려간 상태가 그대로 유지되었다.다른 카드를 클릭해도 여전히 스크롤이 내려간 위치에서 열리는 문제가 발생했다.리액

최근에 토이 프로젝트를 진행하면서 날짜 데이터를 사용자에게 보여줘야 하는 부분이 생겼다. 처음에는 JavaScript의 기본 Date 객체를 사용하려 했지만, 날짜 포맷팅과 로케일 지원이 번거로웠다. 그래서 좀 더 편리한 방법을 찾다 보니 date-fns, moment

웹 프로젝트에서 폰트는 디자인과 가독성을 결정하는 중요한 요소입니다. 이번 글에서는 웹 폰트 서비스를 이용하는 방법과 직접 폰트를 다운로드하여 적용하는 방법을 비교해 보겠습니다.먼저 네이버 한글 폰트 사이트에 접속합니다. https://hangeul.naver

CSS 프레임워크. 미리 정의된 클래스를 사용하여 HTML 스타일을 쉽게 적용할 수 있음클래스 기반 : Utility-first라는 개념하에 클래스 이름으로 스타일링 가능. HTML와 CSS를 분리를 최소화하여 재사용성을 높임.커스텀 설정 : tailwind.confi

서버 및 클라이언트에서 자바스크립트 코드를 실행하고 데이터를 초기화하는데 사용되는 개념이다. (서버측과 클라이언트측에서 둘 다 실행될 수 있음으로 SSR, CSR 모두 사용 가능) 해당 컴포넌트를 사용하면 서버에서 데이터를 미리 가져와 클라이언트로 전달하거나, 클라

Next.js는 파일 시스템 기반의 라우팅인 Pages Routers 을 제공한다.파일을 Pages 라는 폴더 안에 생성하면, 자동으로 라우팅이 적용된다.pages/faqs/index.ts 파일 ⇒ “/faqs” 라는 경로로 자동으로 라우팅이 적용 (따로 라

데이터 페칭 (Data Fetching) 정리 글

package.json 파일의 Dependencies VS devDependencies에 대해 정리한 글

NextJS를 사용한 강의를 듣기 전에 NextJs에 사전에 공부하고, 공부한 내용을 정리한 글

의도한대로 코드를 실행시키려면 브라우저가 어떻게 렌더링 되는지 파악해야 더 효율적인 코드를 작성할 수 있다고 생각해서 정리한 글입니다.

react toast 외부 라이브러리 2개를 비교하고, 선택한 이유에 대해 정리한 글입니다.

이번 글에서는 변수를 선언할 때 사용하는 var, let, const 키워드의 각 특징에 대해 정리한 글입니다.

이번 글에서는 리액트 라우터를 공부하며 알게 된 지식, 간단한 예제를 통해서 리액트 라우터 기본 사용 방법에 대해서 정리했습니다.

리액트를 이용해서 웹페이지를 구현할 때 사용하는 방법이며 간편하게 아이콘(react-icons)을 적용하는 방법을 정리한 글이다.

UUID 전세계 하나밖에 없는 ID 만드는 라이브러리 정리글

라이브러리와 프레임워크에 대한 설명 + 차이점

리액트 개념, 등장 배경, 발전 과정, 사용하는 이유?

토이 프로젝트를 만들다가 type='module'를 추가했더니 발생한 CORS 에러