Deno v2가 출시되었습니다! - Deno v1.0.0부터의 변화와 현재의 실무 관행

Deno v2가 출시되었습니다! - Deno v1.0.0부터의 변화와 현재의 실무 관행Deno v2가 정식으로 출시되었습니다 이번 글에서는 Deno v1.0.0 출시 시점부터 Deno v2.0.0까지의 주요 변화와 실무에서의 적용 사례를 정리해 보겠습니다. Go 스타일 API의 변화 - 웹 표준 준수 강화Deno v1.0.0 당시의 API 설계Deno v1.0.0 시점의 API와 명령어들은 Go의 영향을 많이 받았습니다.예를 들어:다양한 리소스에 대한 IO 인터페이스 (Deno.Reader/Deno.Writer)deno run 명령어 (스크립트 실행기)deno fmt 명령어 (포매터)deno doc 명령어 (API 문서화 도구)deno test 명령어 (테스트 실행기)Deno는 초기부터 웹 표준 준수를 ..

• format_list_bulleted Javascript
• · 2024. 10. 18.
• textsms

최신 React 폴더 구조: 5단계로 쉽게 알아보는 리액트 프로젝트 구성법

최신 React 폴더 구조: 5단계로 쉽게 알아보는 리액트 프로젝트 구성법리액트(React) 애플리케이션을 체계적으로 구성하는 것은 프로젝트가 커질수록 더 중요한 요소로 자리잡는데요. 특히 파일과 폴더를 어떻게 잘 정리하느냐가 프로젝트의 성공 여부에 큰 영향을 미치게 됩니다. 많은 분들이 이 부분에 대해 궁금해 하시더라고요. 그래서 이번 글에서는 제가 여러 해 동안 리액트 프로젝트를 진행하면서 자연스럽게 익힌 폴더 구조를 5단계로 정리해 보려고 합니다. 이 방법은 소규모 프로젝트부터 대규모 애플리케이션까지 모두 적용할 수 있는 실용적인 가이드인데요. 각 단계마다 어떻게 구성할지 알아보도록 할까요? 1. 하나의 React 파일에서 시작하기첫 번째 단계는 아주 간단합니다. 대부분의 리액트 프로젝트는 src/..

• format_list_bulleted Javascript
• · 2024. 10. 18.
• textsms

Next.js에서 알아보는 서버 컴포넌트, 클라이언트 컴포넌트, 정적/동적 라우트 & 캐싱

Next.js에서 알아보는 서버 컴포넌트, 클라이언트 컴포넌트, 정적/동적 라우트 & 캐싱Next.js의 서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component), 그리고 정적(Static) 라우트와 동적(Dynamic) 라우트, 캐싱에 대해 혼란스러우신가요? React 개발자로서 Next.js와 React Server Components(RSC)에 입문하게 되면, 기존에 익숙했던 클라이언트 사이드 React와 서버 사이드 개념이 섞이면서 어떻게 접근해야 할지 막막할 수 있습니다. 이 글에서는 이러한 새로운 패러다임을 이해하기 위한 정신적 모델(Mental Model)을 구축해 나갈 텐데요, 중요한 내용들을 하나씩 간단하게 설명드리겠습니다. 서버 컴포넌트와 클라..

• format_list_bulleted Javascript
• · 2024. 10. 18.
• textsms

모두가 기다리던 XState 완벽 가이드: 시작부터 실전까지

모두가 기다리던 XState 완벽 가이드: 시작부터 실전까지React 상태 관리에 고민이 많으셨나요? 이번에는 XState를 활용한 상태 관리의 모든 것을 알아볼 텐데요. 하지만 먼저, 왜 XState를 배워야 할까요? 제 답변은 간단합니다: XState는 여러분이 필요로 하는 마지막 상태 관리 라이브러리입니다. 다른 상태 관리 라이브러리들(Redux, MobX, Zustand)이 특정 사용 사례에 적합한 반면, XState는 모든 가능한 사용 사례를 포괄하는 완전한 상태 조정 솔루션인데요. 그럼 단점은 무엇일까요? 단 두 단어로 정리할 수 있습니다: 학습 곡선(learn curve). XState는 다른 모든 라이브러리와는 완전히 다른 모델을 기반으로 구축되었는데요. 직접적인 상태 변화(useState..

• format_list_bulleted Javascript
• · 2024. 9. 21.
• textsms

Remix 쉽게 배우기: 플랫 파일 기반 라우팅 완벽 가이드

Remix 쉽게 배우기: 플랫 파일 기반 라우팅 완벽 가이드Remix 웹 프레임워크를 사용해 보셨나요? Remix는 강력한 기능을 제공하지만, 그 중 하나인 플랫 파일 기반 라우팅이 처음에는 다소 복잡하게 느껴질 수 있습니다. 이 글에서는 초보자도 쉽게 이해할 수 있도록 Remix의 플랫 파일 기반 라우팅이 어떻게 작동하는지 자세히 설명하겠습니다. 다양한 예제 코드를 통해 실제로 어떻게 적용되는지도 함께 살펴보겠습니다. 시작해볼까요? 라우팅이란 무엇인가요?웹 애플리케이션에서 라우팅은 사용자가 특정 URL을 방문했을 때 어떤 페이지나 콘텐츠를 보여줄지를 결정하는 과정입니다. 예를 들어, example.com/about에 방문하면 "About Us" 페이지가 표시되고, example.com/contact에 ..

• format_list_bulleted Javascript
• · 2024. 9. 21.
• textsms

React에서 콜백을 활용한 컴포넌트 분리 이해하기

React에서 콜백을 활용한 컴포넌트 분리 이해하기React를 사용하다 보면, 컴포넌트를 어떻게 나누고 서로 소통할지 고민하게 됩니다. 특히, 부모 컴포넌트와 자식 컴포넌트 간의 상태 관리와 데이터 흐름은 중요한 주제입니다. 이번 글에서는 콜백(callback)을 활용하여 컴포넌트를 더 깔끔하고 재사용 가능하게 분리하는 방법을 초보자도 쉽게 이해할 수 있도록 자세히 설명하겠습니다. 예제 시나리오우선, 간단한 예제를 통해 설명을 시작해보겠습니다. 온보딩(가입 안내) 과정을 단계별로 표시하는 컴포넌트를 만든다고 가정해보겠습니다. 온보딩 과정은 다음과 같은 세 단계로 이루어져 있습니다:환영 인사 단계 (WelcomeStep)서비스 약관 동의 단계 (TermsOfServiceStep)완료 단계 (Complete..

• format_list_bulleted Javascript
• · 2024. 9. 21.
• textsms