📖 들어가며 이번 포스팅에서는 React에서 사용되는 상태관리 라이브러리에 대해서 각각의 특징과 개인적인 견해가 들어가 있습니다. 현재 포스팅에서 다룰 주요 네 가지 라이브러리입니다. react-redux & redux-toolkit recoil zustand jotai React에서 상태 관리 라이브러리와 함께 개발을 하다 보면 위에서 언급한 네 가지 라이브러리 중 하나쯤은 분명 알고 계시리라 생각합니다. 위 이미지는 최근 1년간 네 가지 라이브러리의 NPM 동향입니다. 현재 추세로 봤을 때 1위: redux (react-redux & redux-tookit) 2위: zustand 3위: jotai 4위: recoil 위 순위로 보입니다. 그럼 간단한 코드 예제와 함께 특징을 알아보겠습니다. Redux..

📖 들어가며 Next.js 14버전 app router 프로젝트의 styled-comoponents에서 vanilla-extarct로 마이그레이션을 진행함에 있어서 다크모드 기능도 같이 진행하게 되었습니다. 그리고 이번 다크모드를 적용하면서 next-themes를 활용해 봤는 데 사용 경험이 매우 좋았습니다. 또한, app router에서 vanilla-extract로 다크모드를 구현함에 있어서 참고자료가 많지 않다는 것을 깨달았기 때문에 글을 작성하려 합니다. 그럼 이제 Next.js app router에서 vanilla-extract + next-themes를 활용한 다크모드를 한번 구현해 봅시다. 🧐 next-themes 소개 https://github.com/pacocoursey/next-them..

📖 들어가며 기존 프로젝트에서 Next.js 14버전의 앱 라우터에서 styled-components를 사용하고 있었습니다. 이전에 Next.js 11버전에서 14버전으로 마이그레이션을 진행하면서 남아있던 부분이었습니다. 앱 라우터에서 서버 컴포넌트를 지원하기 시작하면서, 서버 컴포넌트 활용 해보고자 마이그레이션을 진행했습니다. 그럼 먼저 왜 마이그레이션을 진행했고, 왜 vanilla-extract를 선택했는지 간략히 설명해 볼게요. 🔍 앱 라우터(app router)에서 styled-components의 문제점 styled-components는 서버 컴포넌트를 지원하지 않기 때문에, styled-components를 사용하려면 'use client'를 명시함으로써 클라이언트 컴포넌트를 강제적으로 사용해..

📖 들어가며 최근 다양한 웹 서비스를 접해보면 간편한 SNS 로그인으로 쉽게 서비스를 이용할 수 있습니다. 이런 간편한 SNS 로그인이 바로 OAuth2.0 프로토콜을 통해 진행됩니다. 그럼, OAuth가 어떤 배경에서 등장하였고, 현재는 어떻게 표준화되어 OAuth2.0이라는 이름으로 사용되고 있는지, 그 흐름에 대한 개념을 함께 알아보겠습니다. 🧐 OAuth 등장배경 웹 서비스의 다양성이 증가하면서, 안전하게 정보를 공유하는 방법에 대한 필요성이 생겼습니다. 이로 인해 OAuth(Open Authorization)라는 개념이 탄생하게 되었습니다. 이를 설명하기 위해서 한 가지 예를 들어 볼게요. 우리의 서비스가 사용자에게 사용자의 구글에 대한 정보를 제공하려면 어떻게 해야 할까요? 사용자가 구글에 대..

📖 들어가며 이번 포스팅은 웹 소켓(Web Scoket)에 대한 포스팅을 하려고 합니다. 이 글을 읽으시는 분들은 아마 웹 소켓이 무엇인지 정도는 알고 있을 것이라고 생각합니다. 맞습니다. 실시간 통신이 필요할 때 적극적으로 사용되는 기술입니다. 그럼 왜 실시간 통신을 할 때 웹 소켓을 사용하는지, 기존에는 어떤 방식을 사용했고, 어떤 문제를 해결해 주는지, 어떻게 동작하는지 등등 알아보겠습니다. 웹 소켓의 등장 배경 초기의 인터넷 통신 방식은 주로 HTTP를 이용한 클라이언트(요청) - 서버(응답) 모델을 통해 진행되었습니다. 즉, 클라이언트가 서버에 요청(Request)을 보내고, 서버가 이에 응답(Response)하는 반이중 통신 방식을 따릅니다. 이 방식이 페이지를 요청하는 등의 간단한 작업에는 ..

들어가며 📖 자바스크립트를 이해하는 데 있어서 실행 컨텍스트(Execution Context)의 개념에 대해서 숙지하는 것은 중요합니다. 자바스크립트의 핵심 개념 중 하나로, 자바스크립트의 코드의 실행 순서와 방식을 결정하게 되죠. 실행 컨텍스트(Excution Context)란❓ 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다. 그래서 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 아래와 같은 동작을 수행합니다. 호이스팅(hoisting) 외부 환경 정보 구성 this 값 설정 등등 이로 인해 다른 언어에서는 발견할 수 없는 특이한 형상들이 발생합니다. 동작 과정 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보..

📖 들어가며 비동기 처리 패턴을 알아보기 앞서, 비동기 처리란 무엇일까요? 비동기 처리란? 특정 코드의 연산이 완료될 때까지 전체 코드의 실행을 중단하지 않고, 다음 코드를 우선적으로 실행하는 방식을 말합니다. 이렇게 동작하는 함수를 자바스크립트에서는 '비동기 함수'라고 합니다. 비동기 처리의 한계점은 작업 완료 시점을 예측하기 어렵다는 점입니다. 하지만 이것은 비동기 처리의 본질적인 특성이며, 이를 효과적으로 관리하는 것이 중요합니다. 자바스크립트는 기본적으로 싱글 스레드(single-threaded) 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 즉, 자바스크립트는 코드가 작성된 순서대로, 위에서 아래로, 동기적으로 처리된다는 것을 의미합니다. 그렇다면 어떻게 자바스크립트가 비동기적인 ..

📖 들어가며 Next.js 13 버전 이후에는 Rust 언어로 개발된 Turbopack이 도입되었습니다. Next 14 버전으로 마이그레이션을 진행하고 Turbopack으로 개발 환경을 실행했을 때 맞이한 문제에 대해서 정리해보려 합니다. 문제 발생 ❗ Turbopack으로 개발 환경을 실행하자 아래와 같이 오류가 발생했습니다. 이 오류에 대해 검색해 보니 "컴포넌트의 이름이 잘못되었거나, import 경로가 잘못 입력되었을 때 발생한다"는 설명을 찾을 수 있었습니다. 이에 따라 import 된 부분을 잘 확인해 보라는 조언이 있었습니다. 그러나, 제 코드에서는 import가 정상적으로 이루어졌기 때문에 수정할 부분이 없었습니다. 따라서 에러 메시지를 다시 확인해 본 결과 'DarkModeBtn' 컴포넌..

📖 들어가며 먼저, 웹 렌더링(Web Rendering)이란 웹 페이지를 사용자에게 보여주는 과정을 의미합니다. 이 렌더링 방식에 따라서 로딩 속도, 검색 엔진 최적화(SEO), 사용자 경험 등이 달라집니다. 이 과정을 간단히 비유하자면, 레스토랑에서 요리를 주문한다고 가정해 보겠습니다. 레스토랑에서 손님(사용자)이 메뉴(웹 페이지)를 주문하고, 요리사(서버)가 요리(웹페이지)를 준비하고, 웨이터(브라우저)가 요리를 손님에게 가져다주는 과정과 비슷합니다. 여기서 요리사가 요리를 준비하는 과정이 바로 렌더링(Rendering)입니다. 이렇게 중요한 웹 렌더링에는 여러 가지 방식이 있습니다. 오늘 알아볼 렌더링 방식들은 아래와 같습니다. 클라이언트 사이드 렌더링(Client Side Rendering, CS..