드리프트의 뉴 코딩 이야기

안녕하세요? 오늘은 React의 useReducer에 대해 완벽히 이해하는 시간을 가져볼까 합니다. ** 목차 **React 상태 관리의 최적 접근 방식useState와 useReducer 기본useState 사용 예시useReducer 사용 예시두 개의 훅 비교useReducer를 활용한 복잡한 상태 관리의 장점상태 업데이트 로직의 분리와 재사용성이벤트 소스 모델로서의 활용복잡한 상태 변경의 명확화Immer를 활용한 상태 업데이트 간소화useReducer와 Immer의 통합useState를 이용한 Immer 활용최적의 방법과 성능useState와 useReducer의 적절한 사용성능에 대한 영향React에서의 최상의 사례 예시결론React 상태 관리의 최적 접근 방식 React에서는 컴포넌트 상태를 관..

안녕하세요? Cloudflare에서 밀고 있는 Hono에 대해 간단히 알아 보겠습니다. 공식 웹 사이트 Hono - Ultrafast web framework for the EdgesHono is a small, simple, and ultrafast web framework for the Edges. It works on Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js. Fast, but not only fast.hono.dev ** 목 차 **Hono 웹 프레임워크 소개create-hono 명령어Cloudflare Workers3분 내에 배포하기응답 보내기, 요청 처리하..

안녕하세요? 오늘은 리액트 초보자가 볼 만한 치트 시트 개념으로 모던 리액트에서 다루는 내용을 빠르게 훑어 보도록 하겠습니다. ** 목 차 **React 요소 (Elements)리액트 요소 속성 (Element Attributes)리액트 요소 스타일 (Element Styles)React 프래그먼트 (Fragments)리액트 컴포넌트React PropsReact Children PropsReact 조건문 (Conditionals)리액트 리스트 (Lists)리액트 컨텍스트 (React Context)리액트 훅 (React Hooks)React useState 훅리액트 useEffect 훅React useRef리액트 useContextReact useCallbackReact useMemoReact 요소 (E..

JSR: 새로운 Javascript 패키지 레지스트리 최근에 JSR이라는 용어가 화제가 되고 있습니다. JSR은 JavaScript Registry의 약자로, 다음 세대 JavaScript/TypeScript 패키지 레지스트리를 의미합니다.이 글은 JSR에 대한 작성자의 단편적인 정보를 모아 작성한 것입니다. 오류가 포함되어 있을 수 있습니다. 그럴 경우 지적해 주시면 감사하겠습니다.npm과 어떤 점이 다를까요?npm은 Node Package Manager의 약자로, 이름 그대로 Node.js용으로 개발된 패키지 매니저 및 해당 패키지 매니저가 사용하는 레지스트리입니다. 그 편리함 때문에 Node.js 이외의 브라우저나 다른 런타임에서도 사용됩니다. 예를 들어 Svelte는 브라우저용 패키지이지만, No..

이 글은 Koyeb와 Neon에 대한 소개입니다. 최신 서버리스 플랫폼을 사용하여 확장 가능한 인프라를 간편하게 구축하고 저렴하게 운영할 수 있습니다.Koyeb이란?Koyeb은 웹 애플리케이션 및 API 배포를 지원하는 서버리스 플랫폼입니다. 개발자 중심의 서버리스 플랫폼으로, 배포와 관련된 복잡한 작업을 최소화했습니다. Koyeb 문서 바로가기Koyeb의 장점무료로 배포 가능Heroku의 무료 플랜이 종료되었지만, Koyeb에서는 1개 서비스까지 무료로 배포할 수 있습니다.GitHub 연동이 간편Koyeb는 3가지 배포 방법을 제공합니다.GitHub 연동 후 Koyeb 런타임에서 실행GitHub 연동 후 리포지토리 내 Dockerfile 실행Docker Hub 등 레지스트리에서 Docker 이미지를 가..

안녕하세요? 오늘은 Blog을 이해하지 못하시는 분들을 위해 간단하게 알아보는 시간을 가졌습니다.** 목 차 **시작하기 전에Blob이란 무엇인가요?Blob의 사용 방법데이터 다운로드데이터 업로드responseType 프로퍼티시작하기 전에어제 파일을 다루는 구현 중에, GitHub Copilot이 다음과 같은 제안을 했는데요.const config = { headers: { "content-type": "multipart/form-data" }, responseType: "blob",};try { const res = await this.axios.post( "/api/export_file", formData, config ); const url = window.URL.creat..

React가 컴파일됩니다. 이제 메모이제이션을 잊으셔도 됩니다. 요 근래, React 팀은 React에 대해 작업한 내용을 블로그 포스트로 발표했습니다. React 팀의 Andrew Clark는 변경 사항을 잘 설명해주었습니다:  React 팀의 발표에서 컴파일된 React에 대해 언급이 있었고, 당영히 v19에서 컴파일된 React가 나올거라고 추측했었는데요.아마도 컴파일된 React는 아마도 다음 버전일 거 같습니다. React가 "컴파일"되는 것이 무엇을 의미하는지 혼란스러워하는 사람들에게 이 글이 도움이 됐으면 합니다. React의 전체 이야기를 보지 않았다면 종종 따라가기 어려울 수 있으므로 예시와 역사적 맥락을 보여드리겠습니다. ** 목 차 **미래의 React는 아마도 SvelteJS처럼 컴..

안녕하세요?개인적으로 자바스크립트 공부할 때 보는 유용한 코드 모음집입니다.** 목 차 **문자열을 배열로 분해문자열의 for...of첫 글자를 대문자로, 나머지를 소문자로 변환indexOf를 사용한 문자열의 출현 횟수 카운트문자열을 Unicode 정규화normalize 메소드의 구문NaN의 비교Number 타입의 포맷min ~ max의 난수배열에서 임의의 요소를 가져오기월의 마지막 날날짜 차이날짜/시간 값을 문자열로 변환Date 타입의 포맷레이블 문법의 break배열의 인덱스끝에서 요소를 가져오기배열의 요소 가져오기배열에 여러 요소 추가/교체/삭제splice 메소드의 구문요소 추가요소 교체요소 삭제배열의 모든 요소 위치 검색중첩 배열 평탄화flat 메소드의 구문다차원 배열의 요소 수 얻기배열 내의 요소..

안녕하세요? 프론트엔드 디벨로퍼가 되기로 마음먹었을 때부터 생소한 웹 관련 용어 공부하면서 정리해 보았습니다.1. 웹이란 무엇인가1.1. 웹의 용도1.2. 웹을 지탱하는 기본적인 3가지 기술1.3. 웹의 특징2. 웹의 역사2.1. 웹 이전2.2. 인터넷2.3. 하이퍼미디어2.4. 분산 시스템2.5. 웹의 탄생2.6. 웹의 표준화2.7. 웹 API를 둘러싼 논쟁 'SOAP VS REST'2.8. 그리고 현재2.9. 부연설명: 하이퍼미디어 포맷의 역사3. REST4. REST라는 아키텍처 스타일4.1. REST에서 중요한 '리소스'라는 개념4.2. REST를 구성하는 특징5. URI5.1. URI의 포인트5.2. URL과의 차이(URI와 URL과 URN)5.3. 구성6. HTTP의 기본6.1. HTTP란6...

** 목 차 **Promise의 코드화Promise를 사용하는 방법(약속을 지킨 경우)Promise를 사용하는 방법(약속을 지키지 않은 경우)Promise의 상태란 무엇인가?Pending 상태란 무엇인가?Promise를 어떻게 사용하는가?"Promise를 반환한다"는 것은 무엇을 의미하는가?Promise를 연결하는 방법8.1. 두 개의 Promise를 연결간단한 함수를 사용하여 여러 Promise를 연결하는 예를 들어보겠습니다.안녕하세요? JavaScript의 Promise를 사용해보신 분들 중에도 실제로 어떻게 작동하는지 이해하지 못하고 계신 분들이 계실 것입니다. 또한 JavaScript를 처음 배우시는 분들 중에는 Promise라는 용어를 들어보셨지만 그게 무엇인지 잘 모르시는 분들도 계실 것입니다..