1. 들어가며프론트엔드 개발 시에 인증과 관련된 작업을 하면서 Best Practice가 없다보니 헤맸던 경험을 많이 했었습니다. 이는 특히 JWT 방식의 인증을 할 때 더욱 심해지는데요. access token을 클라이언트 쪽에서 관리해주게 되면서 여러가지 문제를 마주할 수 있습니다. 이에 대한 구현 방식은 정말 프로젝트마다 다르기 때문에 프로젝트 요구사항이나 보안 요구사항에 맞게 구현해 주어야 하는데, 적절한 방법을 골라 사용하기 위해서는 어떤 상황들이 발생할 수 있고 각 상황별 어떤 대처 방법이 있는지 알아야 합니다. 더 이상 웹 애플리케이션은 단순한 정적 사이트가 아니라 정적 컨텐츠와 동적 컨텐츠의 복잡한 구성을 이루고 있습니다. 일반적으로 웹 애플리케이션의 모든 로직은 브라우저 단에서 실행된다고..

1. 들어가며요즘의 소프트웨어 개발에서는 마이크로서비스, 클라우드 네이티브 아키텍처, 클라이언트 디바이스(모바일 앱, 웹 앱, IoT 등)로 전환하게 되는 추세를 맞이하면서 새로운 아키텍처 패러다임이 필요해지게 되었습니다. 그 중에 가장 대두되고 있는 패턴은 BFF(Backend for Frontend) 아키텍처입니다. 애플리케이션이 더욱 분산적이게 되면서 유지 관리가 용이하며 안전한 사용자 경험을 가져다 주기 위해 개별 고객의 요구에 맞는 백엔드 서비스를 커스텀하는 것이 중요해졌습니다. 2. BFF란?BFF는 말 그대로 프론트엔드를 위한 백엔드를 말하는 용어입니다. 각 프론트엔드 인터페이스에 전용 백엔드 계층을 제공하는 아키텍처 패턴이 핵심입니다.  각 프론트엔드(모바일 앱, 웹 앱, 스마트 기기 등)..

1. 들어가며소프트웨어쪽 공부를 하다보면 디자인 패턴이나 아키텍처에 대해 많이들 들어보셨을 겁니다. 사실 디자인 패턴이 많이 사용되는 분야는 백엔드이지만(싱글톤, 팩토리, 빌더, .....) 프론트엔드도 마찬가지로 이와 비슷한 고민으로부터 나온 몇가지 디자인 패턴이 존재한다는 사실 알고 계셨나요? 디자인 패턴이란? 디자인 패턴은 소프트웨어 개발의 일반적인 문제에 대한 표준화된 솔루션을 제공합니다. React에서의 디자인 패턴 React에서 디자인 패턴을 활용하면 확장성, 유지보수성, 효율성 측면에서 더욱 뛰어난 애플리케이션을 만들 수 있습니다. 이번 포스팅에서는 컨테이너 & 프레젠테이션 컴포넌트 패턴(Container and Presentational Components Pattern), 고차 컴포넌트 ..

1. Headless?Headless는 말 그대로 '머리가 없다'라는 의미를 갖고 있습니다. 소프트웨어 아키텍처에서 이는 UI, 즉 사용자 인터페이스가 없는 시스템을 말하는 것이며, 백엔드 로직은 존재하지만 이를 직접적으로 보여주는 프론트엔드가 없는 구조를 의미합니다. 2. Headless CMS(Content Management System)Headless CMS는 콘텐츠 관리 시스템(CMS)에서 콘텐츠 저정과 관리 기능만 제공하고, 이를 표시하는 프론트엔드 레이어는 제공하지 않는 시스템입니다. 대신 API를 통해 콘텐츠를 제공하여 다양한 플랫폼에서 활용할 수 있게 합니다. 장점으로는 다음과 같은 것들이 있습니다.유연성: 웹, 모바일 앱, IoT 기기 등 다양한 채널에 콘텐츠를 제공할 수 있습니다.스케..

1. 들어가며이 포스팅에서는 타입스크립트에서 enum이란 무엇이고, 런타임 동작 시에 어떻게 동작하는지, 왜 const enum을 쓰는 것이 더 좋은지 알아보도록 할 것입니다. 또, 일반적인 enum과 const enum의 차이점과 컴파일 후 각각이 코드에 어떤 영향을 미치는지에 대해서도 다룰 것입니다. 2. Enum 이란?Enum은 자바스크립트의 확장 type-level이 아닌 TypeScript의 몇 안 되는 기능 중에 하나입니다.- 공식 TS 문서 enum은 enumeration(열거형)의 줄임말로, 명명된 상수 집합을 정의할 수 있게 해줍니다. 여기서 말하는 상수는 애플리케이션에서 보통 '고유한 값'을 나타내기 위해 사용하는데요. 예를 들어, 'on', 'off' 기능이 있는 스위치 버튼의 경우 ..

Fetch API네이티브 브라우저 API로 Node.js 프로젝트에 라이브러리를 설치할 필요가 없습니다.클라이언트는 요청의 데이터를 JSON으로 변환하여 전송해야 합니다.응답에 404 또는 500 예외가 있어도 예외를 발생시키지 않습니다.응답 상태를 명시적으로 확인해야 합니다.response.json() 프로미스를 resolve 하여 응답 데이터를 가져옵니다. Fetch API는 Internet Explorer를 제외한 모든 브라우저를 지원합니다.예시 코드: //sends data using fetch api.async function getUserInfoFetch(){ try { let userInfo = await fetch('https://jsonplaceholder.typi..

1. 들어가며React 개발을 하다보면 custom hooks를 구현해주어야 할 일이 많이 있는데요. 커스텀 훅을 사용하면 개발자가 여러 컴포넌트에서 로직을 재사용할 수 있기 때문에 코드를 더 유지보수하기 쉽고, 모듈화하여 읽기 쉽게 만들 수 있다는 장점이 있습니다. 다음에 나올 10가지의 커스텀 훅은 실제로 많이 사용되는 것들이며, 경우에 따라 유용한 커스텀 훅이 있으니 참고하시면 좋을 것 같습니다. 2. useFetchuseFetch 훅은 일반적으로 API에서 데이터를 가져오는 데 사용될 수 있습니다. loading, error 및 response status를 관리하며 데이터 검색에 필요한 모든 로직들을 캡슐화하고 있습니다. import { useState, useEffect } from 'reac..

1. 들어가며Tanstack Query는 React에서 데이터 페칭을 위해 다양한 기능을 제공하는 라이브러리로, 캐싱 및 동기화, 데이터 업데이트 등을 효율적으로 관리할 수 있습니다. Tanstack Query에서 'Query Key'는 핵심 요소 중에 하나로, 데이터를 식별하는 key로 동작하여 데이터의 고유성(unique)을 식별하고 알맞은 캐싱 동작이 이루어지도록 하는 데 중요한 역할을 합니다. 2. Query Key FactoryQuery Key Factory는 Tanstack Query에서 Query Key를 생성하기 위한 함수나 객체 자체를 의미하빈다. 복잡하거나 계층적인 구조를 갖는 Query Key를 관리해야 하는 경우 유용하게 사용될 수 있는데요. Query Key Factory 기법을 ..