자바스크립트의 콜백함수
🐥 F-Lab 프론트엔드 멘토링에서 정재남님의 코어 자바스크립트 4장 콜백함수를 읽고 정리한 내용입니다
Categories
Books
자바스크립트의 실행 컨텍스트
📖 F-Lab 프론트엔드 멘토링을 통해 정재남 님의 코어 자바스크립트 2장 실행 컨텍스트를 읽고 정리한 글입니다.
자바스크립트의 데이터 타입
📝 F-Lab 프론트엔드 멘토링에서 정재남님의 코어 자바스크립트 1장 데이터 타입을 읽고, 개인적으로 궁금했던 내용을 함께 정리한 글입니다.
[객체지향의 사실과 오해] 06 객체지도
<객체지향의 사실과 오해, 조영호 지음 / 위키북스> 6장을 읽고 정리한 내용입니다.
[객체지향의 사실과 오해] 05 책임과 메시지
<객체지향의 사실과 오해, 조영호 지음 / 위키북스> 5장을 읽고 정리한 내용입니다.
[객체지향의 사실과 오해] 04 역할, 책임, 협력
<객체지향의 사실과 오해, 조영호 지음 / 위키북스> 4장을 읽고 정리한 내용입니다.
[객체지향의 사실과 오해] 03 타입과 추상화
<객체지향의 사실과 오해, 조영호 지음 / 위키북스> 3장을 읽고 정리한 내용입니다.
[객체지향의 사실과 오해] 02 이상한 나라의 객체
<객체지향의 사실과 오해, 조영호 지음 / 위키북스> 2장을 읽고 정리한 내용입니다.
[객체지향의 사실과 오해] 01 협력하는 객체들의 공동체
<객체지향의 사실과 오해, 조영호 지음 / 위키북스> 1장을 읽고 정리한 내용입니다.
[스프링 입문을 위한 자바 객체 지향의 원리와 이해] 03. 자바와 객체 지향
<스프링 입문을 위한 자바 객체 지향의 원리와 이해, 김종민 지음 / 위키북스> 를 읽고 정리한 내용입니다.
[Clean Code] 1. 깨끗한 코드
로버트 C.마틴의 클린 코드를 읽고 정리한 내용입니다.
[코어 자바스크립트] 01 데이터 타입
코어 자바스크립트(정재남 지음, 위키북스)를 읽고 정리한 내용입니다.
최적화
[코어 웹 바이탈 최적화] 프로젝트에서 FID 개선하기
TBT 향상을 통해 FID 개선하기
[코어 웹 바이탈 최적화] 프로젝트에서 CLS 개선하기
CLS 메트릭에 좋지 않은 징조가 포착되었다. 크롬 개발자 도구의 Performance 패널에서 확인해보면 Experience 섹션이 생기면서 Layout Shift 레이아웃 이동이 발생하는 구간에 빨간색 블록이 생겼다.
[코어 웹 바이탈 최적화] CLS 최적화하기
CLS는 뷰포트 내에서 발생한 예기치 않은 레이아웃 이동의 영향분율과 거리율분을 곱한 값이다.
[코어 웹 바이탈 최적화] CLS(Cumulative Layout Shift, 누적 레이아웃 이동)란?
코어 웹 바이탈의 메트릭에는 LCP, FID, CLS가 있다. 지금까지 LCP, FID에 대해 알아보았고, 마지막으로 CLS에 대해 알아보려 한다.
[코어 웹 바이탈 최적화] FID 최적화하기
FID(First Input Delay, 최초 입력 지연)은 사용자가 페이지와 처음 상호 작용한 시점부터 브라우저가 실제로 해당 상호 작용에 응답한 시점까지의 시간을 측정한다. 사용자에게 사이트의 첫인상을 제공할 수 있다는 점에서 중요한 메트릭이라 할 수 있다.
[코어 웹 바이탈 최적화] FID(First Input Delay, 최초 입력 지연)란?
FID(First Input Delay, 최초 입력 지연)란?
[코어 웹 바이탈 최적화] 프로젝트에서 LCP 개선하기
이전 포스팅을 통해 LCP의 의미와 측정 방법, 최적화 방안에 대해 알아 보았다.
[코어 웹 바이탈 최적화] LCP 최적화하기
LCP 점수를 개선하기 위한 방법을 알아보자!
[코어 웹 바이탈 최적화] LCP(Largest Contentful Paint, 최대 콘텐츠풀 페인트)
LCP(Largest Contentful Paint, 최대 콘텐츠풀 페인트)란?
[코어 웹 바이탈 최적화] 코어 웹 바이탈이란?
사내 프로젝트는 구글 서치 콘솔 서비스로 구글 검색결과 및 사이트 사용 경험에 대한 결과를 모니터링하고 있다.
React
React Components, Elements, and Instances
React Components, Elements, and Instances 을 읽고 제가 이해한 내용을 정리합니다.
React Query(리액트 쿼리): Query Invalidation
Query Invalidation
React Query(리액트 쿼리): Mutations
Mutations Queries와 다르게 Mutations는 주로 데이터를 생성하거나, 업데이트하거나, 지우거나 혹은 서버 사이드 이펙트를 수행하는 목적으로 사용된다. Mutations는 useMutation 훅으로 사용한다. 아래 코드는 서버에 새로운 todo를 추가하는 mu...
React Query(리액트 쿼리): Caching
리액트 쿼리가 캐싱을 어떻게 관리하는지 알아보자 이를 통해 리액트 쿼리에서 패치한 데이터의 라이프 사이클을 이해할 수 있다 아래 포스팅의 ‘Important Defaults’ 의 staleTime과 cacheTime에 대해 이해하고 읽으시면 좋습니다 :) React Query(리액...
React Query(리액트 쿼리): Query Keys
Query Keys 기본적으로 리액트 쿼리는 쿼리의 고유한 key를 바탕으로 해당 쿼리에 대한 캐싱을 관리한다.
React Query(리액트 쿼리): Query Functions
Query Functions 쿼리 함수는 프로미스를 리턴하는 함수이다.
React Query(리액트 쿼리)를 사용해보자: Queries
상태 관리 라이브러리로 Redux(Redux-saga, Redux-toolkit), Recoil을 사용해왔다. 프로덕트를 릴리즈한 이후에 캐싱에 대한 필요성이 대두되었다. 빈번하게 변경되는 데이터가 아니라면 매번 서버에 요청을 날리는 것보다, 캐싱된 정보를 제공하는 것이 서버의...
스크롤값에 따라 계속해서 리렌더링되는 헤더 컴포넌트 리팩토링하기
리팩토링을 하게 된 배경 프로젝트를 진행하며 헤더에 대한 디자인 요구 사항은 아래와 같았다. 헤더의 기본적인 디자인은 로고 이미지는 하얀색이다. 헤더 전체의 배경색은 투명색이다. 헤더 내부의 글자는 하얀색이다. 헤더 내부의 ...
Javascript
자바스크립트의 콜백함수
🐥 F-Lab 프론트엔드 멘토링에서 정재남님의 코어 자바스크립트 4장 콜백함수를 읽고 정리한 내용입니다
자바스크립트의 실행 컨텍스트
📖 F-Lab 프론트엔드 멘토링을 통해 정재남 님의 코어 자바스크립트 2장 실행 컨텍스트를 읽고 정리한 글입니다.
자바스크립트의 데이터 타입
📝 F-Lab 프론트엔드 멘토링에서 정재남님의 코어 자바스크립트 1장 데이터 타입을 읽고, 개인적으로 궁금했던 내용을 함께 정리한 글입니다.
Switch Case vs Object Literals
Switch Case와 Object Literals 중 어떤 것을 사용하는게 좋을까?
for loop와 filter 메소드 비교
for loop 와 filter 중에 무엇을 사용할까?
[코어 자바스크립트] 01 데이터 타입
코어 자바스크립트(정재남 지음, 위키북스)를 읽고 정리한 내용입니다.
Next.js
SSG에서 빌드 타임 이후 변경 사항을 즉각 반영해보자: Next.js의 Preview Mode
🔊 F-Lab 에서 3월 11일에 주최한 블로그 해커톤에 참여하여 작성한 글입니다 :)
Next.js의 API Routes
API란? Application Programming Interface의 약자로 응용 프로그래밍 인터페이스라는 뜻이다. 컴퓨터나 컴퓨터 프로그램을 연결하는 역할을 한다. 예를 들어, 고객이 어떠한 데이터를 요청했을때 DB에 접근하기 위해서는 프론트엔드가 백엔드와 연결되어야 하고, ...
Next.js의 SEO
🔍 SEO를 위한 도구
Next.js의 Routing
Next.js의 Routing을 알아보자! 💌
Next.js의 Data Fetching
Next.js의 Data Fetching을 알아보자!✨
Blog
Next.js에서 CKEditor5 사용하기
호옥시 Next.js에 CKEditor를 설치하시다가 고통 받고 들어오셨나요 !! 저도 그 마음을 잘 압니다 😇 썰을 풀어보겠읍니다. . .
This is the very Beginning
Everyday little by little I’m getting better and better :)
HTML
DOCTYPE 을 왜 지정해야 할까?
HTML5 에서는 웹 표준을 따르는 Full Standards Mode 로 렌더링하기 위함이다. DOCTYPE 을 선언하지 않는 경우 Quirks Mode 로 렌더링이 되어 웹 사이트가 깨지는 등의 문제가 생길 수 있다.
CS
캐싱 처리하기
캐시란 자주 사용되는 콘텐츠나 데이터 등을 임의의 저장소에 두고 재사용하는 것을 의미한다. 변경이 드문 데이터에 대해 서버에 계속해서 요청을 보내는 것은 굉장히 낭비적인 일이다. 따라서, 캐싱을 잘 사용하는 것은 최적화에 큰 도움이 될 수 있다.
Typescript
타입스크립트 유틸리티와 Index Signature 사용하기
타입스크립트(Typescript)의 유틸리티 타입(Utility Types)중 Pick, Partial을 사용해보자!