Front-end 관련 포스팅

자바스크립트의 개념정리를 담은 글들은 ES, 리액트를 사용하면서 사용했던 stack이나 library의 사용법등을 다룬 글들은 React로, 그외 내용을 담은 글들은 ETC로 분류함.

Nextjs
React
ES
ETC

|

August 29, 2023

Next.js 최적화하기

Next.js에서 앱의 초기 렌더링 성능 향상을 위해 여러 방안들을 제시한다. 이 방법들은 결국 화면 표시에 필요한 data fetching과 렌더링 하는 번들 사이즈의 효율화에 달렸다.

Read post

|

August 19, 2023

Next.js에서 SEO 향상 전략

SEO(Search Engine Optimization)은 사용자가 검색어를 입력했을 때, 해당 검색 결과에 검색엔진에 의해 높은 순위를 차지할 수 있도록 웹사이트를 설계하는 전략 및 기술을 이야기한다. Next.js에서 SEO를 향상시키는 방법에 대해 알아보자.

Read post

|

August 13, 2023

Execution Context

자바스크립트 코드의 실행 순서를 관리하는 콜 스택에는 함수가 쌓이지 않는다. 대신 함수가 실행 될 때, 함수가 실행되는데 필요한 정보들을 담은 실행 컨텍스트가 콜 스텍에 쌓이게 된다.

Read post

|

August 3, 2023

Object

자바스크립트 객체(JavaScript Object)는 값과 mothod(function)를 갖는 여러 속성(property)을 hold하는 독립형 container다. 원시형을 제외하면 자바스크립트의 모든 자료형은 객체가 된다. 자바스크립트 객체는 다른 언어의 Hash, Map이나 Dictionary와 비슷하나, 오브젝트 생성자로 선언되어야한다.

Read post

|

July 29, 2023

도메인 입력후

대표 면접질문인 도메인 입력 후 어떤일이 있어나나요? 라는 질문에는 개발자가 알아야할 많은 것들이 담겨있다. 이 포스팅에서는 그 중에서 네그워크에 관련된 이야기를 다룬다. ISO 계층구조를 통해 조금 더 체계적으로 알아보자.

Read post

|

July 27, 2023

REST 아키텍처와 API

REpresentational State Transfer의 약자인 REST는 분산 하이퍼미디어 시스템을 위한 아키텍처 스타일이다. 주로 API를 소비하는 프론트엔드 입장에서는 API에 특정 아키텍처의 원칙을 적용하면서 오는 장단점이나 어려움을 알기 힘들다. 다만 추상적으로나마 REST API에 대해 생각해 본바를 기록해 두고자 이 포스팅을 작성한다.

Read post

|

July 27, 2023

자바스크립트 동작방식

데이터 패칭을 할 때, 가끔 await를 누락하는 실수를 하면 패칭된 데이터가 아닌 프로미스 객체를 반환 받는 경우가 생긴다. 이를 이해하기 위해선 자바스크립트의 동작원리를 알아야한다. single threaded인 자바 스크립트가 어떻게 비동기 작업을 다루고 멀티 테스킹이 가능한 것처럼 보이는지 알아보자.

Read post

|

June 15, 2023

Loading UI and Streaming

큰 데이터 패칭이 요구되는 SSR페이지의 TTI가 커지는 문제가 있다. 이 때, Next.js의 Streaming기능은 순차적으로 진행되는 렌더링 과정을 여러개의 덩어리로 쪼개서 병렬로 처리할 수 있게 도와준다. 또한 메타 데이터생성은 Streaming을 기다리므로 SEO에도 영향을 주지 않는다.

Read post

|

June 11, 2023

App Router - data fetching

app router에서 fetch() api는 서버에서 데이터를 캐싱하고 컴포넌트의 렌더링을 결정한다. 캐싱 뿐만 아니라 동일 요청을 자동으로 제거하고 병렬 요청을 지원하며 패칭 시간을 크게 절약한다. 또한 react에서 제공하는 chech()는 fetch()로 가지고 올 수 없는 데이터들을 캐싱하도록 도와준다.

Read post

|

June 11, 2023

Next.js App Router

리액트18부터, 서버 컴포넌트를 지원하면서 Next.js 13부터 서버 컴포넌트와 클라이언트 컴포넌트를 섞어서 페이지를 구성할 수 있게 됐다. 기존의 페이지 단위로 결정됐던 SSR, CSR방식이 더 세분화 되어 더 나은 성능을 기대할 수 있게 됐다.

Read post

|

May 26, 2023

RESTful API

RESTful API는 웹 개발에서 일반적으로 사용되는 아키텍처 스타일로 이를 통해 클라이언트와 서버간의 독립적인 개발과 api 자체의 확장성, 다양한 환경에서 호환성 유지한다. 표준 원칙들을 지키는 api는 프론트엔드와 백엔드 사이에 원활한 개발을 도와주며 동시에 둘을 독립적으로 유지시켜준다.

Read post

|

May 24, 2023

getServerSideProps

Next.js에서는 서버사이드 렌더링(SSR)과 빌드 시점에 정적 페이지 렌더링(SSG)를 지원해 클라이언트 사이드 렌더링(CSR)의 단점인 TTFB를 크게 줄일 수 있다. 여기서는 Pages Router를 이용한 프로젝트에서 SSR을 이용하는 방법을 소개한다.

Read post

|

April 20, 2023

useMemo와 useCallback

useMemo와 useCallback은 성능 최적화와 함수 메모이제이션을 위해 사용된다. useMemo는 동일 입력에 대해 이전 값을 재사용하는데 사용되어 불피요한 재계산을 줄여주며, useCallback은 함수의 재 렌더링을 막아 자식컴포넌트에 전달되는 함수는 자식컴포넌트의 불필요한 렌더링도 막아준다.

Read post

|

April 10, 2023

Styled Component

Styled Components는 React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리다. 이 라이브러리는 JavaScript 파일 내에서 CSS 스타일을 정의하고 컴포넌트에 적용할 수 있게 해준다. Styled Components를 사용하면 CSS 클래스명을 작성하거나 별도의 CSS 파일을 생성할 필요 없이 컴포넌트에 스타일을 직접 적용할 수 있다.

Read post

|

April 10, 2023

Time Ago

Time-ago 형식은 현재 시간과 과거 시간 간의 차이를 읽기 쉬운 방식으로 표현하는 방법이다. 이를 구현하기 위해 다양한 라이브러리와 기술이 존재하는데, 대표적인 예로 Moment.js와 date-fns 등이 있다.

Read post

|

April 10, 2023

Global snippet setting

함수형 컴포넌트를 만들기 위해 기본 코드를 치는 일과 같이 반복적이고 정해진 작업들은 코딩을 하면서 여간 귀찮은 작업이 아닐 수 없다. 이런 작업들을 단축키 처럼 지정해서 빠르게 작업할 수 있는 방법이 있다.

Read post

|

April 10, 2023

Closure

Closure는 함수가 접근하여 수정 변경할 수 있는 변수들이 속한 영역들을 가르킨다. 이는 렉시컬 환경과 밀접한 관련이 있으며 렉시컬 환경을 이해하면 클로저는 쉽게 이해할 수 있다.

Read post

|

April 10, 2023

React Query

Redux와 같은 상태관리 툴은 서버에서 오는 데이터를 관리하기엔 다소 비효율 적인 면이 있다. 다른곳(서버)에서 관리 되는 정보파 정보의 변화를 서버의 도움 없이 파악할 수 없어, 효율적인 자원 관리를 위해 swr이나 react-query와 같은 도구가 필요하다.

Read post

|

April 10, 2023

React Redux

상태관리 툴인 Redux는 클라이언트 전반에 걸쳐 사용되거나 변경되어야 하는 상태들을 관리한다. 컴포넌트끼리 전달하는 방법에는 유지보수 측면에서도 좋지 않고 앱을 지나치에 복잡하게 만들기 때문이다. 상태 관리 툴은 러닝커브를 극복하면 매우 편리한 도구지만 오버헤드와 보일러플레이트가 존재하기 때문에 필요한 부분에서만 사용되어야 한다.

Read post