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

1. 들어가며JavaScript는 웹 개발의 핵심 언어로서, 복잡한 애플리케이션을 효율적으로 관리하기 위해 모듈 시스템이 필요합니다. 모듈 시스템은 코드의 재사용성과 유지 보수성을 향상시키며, 개발 과정에서 필수적인 요소로 자리 잡았습니다. 이번 글에서는 JavaScript의 두 가지 주요 모듈 시스템인 CommonJS(CJS)와 ES Modules(ESM)를 비교하여 그 특징과 차이점을 알아보겠습니다. 2. CommonJSCommonJS는 2009년 서버 사이드 자바스크립트 개발을 촉진하기 위해 만들어진 모듈 시스템 사양입니다. Node.js가 이 사양을 채택하면서 서버 사이드 JavaScript의 사실상 표준이 되어왔습니다. 작동 방식 CommonJS는 require 함수와 module.exports..

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. 들어가며NPM(Node Package Mangaer)과 YARN(Yet Another Resource Negotiator)은 둘 다 자바스크립트 프로젝트에서 의존성을 관리하기 위해 사용되는 패키지 매니저입니다. (주로 Node.js 기반의 프로젝트에서 사용됩니다.) 이 둘은 같은 목적을 위해 기능을 제공하지만, 성능이나, 특징, 접근 방식에서의 약간씩 차이가 존재합니다. 사실 취향에 따라 사용하는 경우가 많아 새로운 프로젝트를 진행하실 분들이나 현재 프로젝트에서 패키지 관련한 불편함이 있다면 둘 간의 차이를 통해 어떤 것을 사용하는 것이 좋을지에 대해 방향성을 잡아주는 글이 되었으면 좋겠습니다. 2. 설치npm은 Node.js를 설치하면 같이 설치가 됩니다. 그렇기에 추가적인 설치가 필요하지 않습니..