FrontEnd 이상혁

번들러와 트랜스파일러

내가 예전에 작성한 블로그웹페이지 베포과정속 "build"에서 한번 다룬적이 있다 하지만 그때에는 저 블로그의 이름 그대로 베포에 대한 과정에 대해 설명하는 자리였기에 간단하게번들러와 트랜스파일링이 뭔지, 그 결과는 뭔지 간단히 서술했다 이번에는 해당 과정에 대해서 조금더 공부해봤다번들러번들러를 설명하기 전에 번들이 뭔지, 그리고 왜 필요한지에 대해 설명하겠다번들(bundle): 여러 파일을 하나로 결합 번들이란 말그대로 여러 파일을 하나로 결합한 덩어리다 우리가 만든 애플리캐이션의 여러 파일들을 하나로 묶어 파일 요청 수를 줄이고, 브라우저가 아닌 환경에서 개발된 코드를 브라우저가 이해할 수 있는 형태로 변환하며, 최신 자바스크립트 문법이나 모듈화된 코드를 사용할 수 있게 해준다번들러의 등장 배경초기의..

이 책은 자바스크립트 코딩의 기술 중제3장, 특수한 컬렉션을 이용해 코드 명료성을 극대화하라를 정독한 후에 작성하였다들어가기이 챕터의 주제는 제목처럼 특수한 컬렉션을 사용해서 코드의 명료성 향상 하는 것이다 컬렉션이란 언어가 제공하는 값을 담을 수 있는 형태라고 이해하면 된다 js의 대표적인 컬렉션으론 Array, Type Array,Key - Value 형태의 Object, Map, Set등이 존재한다 이번 챕텨에선 키 - 값 형태의 컬렉션인 Object와 Map, Set에 대해 알아볼 것이다객체를 이용해 정적인 키-값을 탐색하라값을 연속적으로 저장할 수 있는 컬렉션을 Array(배열)이라고 한다 많은 언어에서 배열을 지원하지만, js의 배열의 특징은 유연함이다하지만 유연하다고 해서 항상 배열을 사용..

들어가며이번에 내 친구가 이런 링크를 보내줬다 이걸 보고 웹에서는 기울기를 감지하는 방법이 없을까?라는 궁금증으로 시작하게 되었다DeviceOrientationEventDOE는 라우저가 제공하는 이벤트 객체로,우리가 eventlistener로 등록하면 기기에서 기울기 값을 받아 반환해 준다작동원리우리 기기 안에 있는 하드웨어로 값을 받아온다 가져오는 하드웨어는 앞뒤 기울기를 감지하는 가속도계와,기기의 회전각을 가져오는 자이로스코프가 있다 기기가 움직이면 기기 내의 하드웨어가 원시데이터를 기기의 os로 보낸다 그러면 os는 그 원시데이터를 각각의 정제된 데이터로 변환을 한다 그 후 OS는 브라우저에 정제된 데이터를 보내고,브라우저는 이를 바탕으로 js event 객체를 생성합니다 위 과정이 끝나면 이제 j..

이제까지는 약간 shadcn의 대한 이해가 두루뭉실했는데, 최근에 이를 활용한 프로젝트를 보니 이해가 단번에 되어서 shadcn을 주제로 블로그 글을 적어보았다Shadcn 세련된 디자인과 뛰어난 접근성을 갖춘 컴포넌트 모음, 그리고 코드 배포 플랫폼.선호하는 프레임워크와 호환되며, 오픈소스로 자유롭게 사용할 수 있습니다. shadcn/ui란 Radix UI 및 Tailwind CSS를 사용하여 구축된 복사하여 붙여 넣을 수 있는 재사용 가능한 컴포넌트의 모음이다 shadcn/ui는 기존의 컴포넌트 라이브러리(예: MUI, Chakra UI 등)와는 다른 접근 방식을 제공한다라이브러리를 설치해서 사용하는 것이 아니라, 직접 컴포넌트를 복사해서 프로젝트 안에 구성하게 된다 그래서 공식문서를 보면 컴포넌트 ..

오늘의 주제는 react hook form에 대해서 공부해 봤다 내가 프로젝트를 하는데 폼 작성하는 기능이 주를 이루는 프로젝트라이번기회에 react hook form을 사용하자고 결정하고 자세하게 배워봤다React Hook FormPerformant, flexible and extensible forms with easy-to-use validation.유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다. npm install react-hook-form react hook form은 React에서 폼을 쉽게 다룰 수 있도록 도와주는 라이브러리이다 여기서 폼이란 html태그중 하나인 form을 의미하는 것으로html에서 사용자가 값을 입력하고 제출할..

react에서, 2020년 12월에 server component를 소개했다 그 후 next.js에서 server component를 적극 도입 & 확장했다이에 따라 next.js에서는 client component와 server component, 2가지 형식으로 사용할 수 있다 하지만 client component는 알고 있었지만 server component는 언제 사용해야할지 몰랐다Before Server component...먼저 서버 컴포넌트가 있기전, react의 컴포넌트가 브라우저에서 어떻게 렌더링 되는지 한번 알아보자React문법으로 코드작성babel을 만나 vanilla js 코드로 변환js기반 element로 변환(vitual dom)현재 dom과 vitual dom을 비교비교 후 u..

이번에 공부한 기술은 Tanstack-Query이다 원래 React에 최적화된 fetching 라이브러리였지만Vue, Solid, Svelte 등 다양한 프레임워크까지 기능이 확장되어 React-Query라는 이름대신tanstack이라는 이름으로 다른 라이브러리와 함께 묶였다 사용방법//npmnpm install @tanstack//yarnyarn add @tanstack/react-query//pnpmpnpm add @tanstack/react-query설치 후 최상위 컴포넌트를 provider로 감싼다 내가 이번에 공부하고 사용한 기능은 useQuery와 use-mutation이다useQueryuseQuery는 서버에서 데이터를 fetch 하는 데 사용된다import { useQuery..

지금의 블로그는 monorepo의 설명과 팀 더모먼트 8기의 1차 과제이다Monorepo모노레포란 여러 개의 프로젝트를 하나의 저장소(repogitory)에서 관리하는 방식이다위 사진처럼 하나의 저장소에 여러 개의 프로젝트를 관리한다장점프로젝트간에 코드 공유와 협업이 매우 수월해진다 예를 들어 관리자 프로젝트와 일반 클라이언트 사이에 공유하는 코드가 많을 것이다 그럴 때 monorepo를 사용하면 공유하는 코드를 한 번만 작성하고 그냥 관리자 프로젝트랑 클라이언트 프로젝트에 import 해서 사용하면 된다 또한 일반된 개발환경을 경험할 수 있다 하나의 레포지토리에서 여러 가지의 프로젝트를 관리하니 버전과 환경설정을 통일할 수 있습니다 단점하나의 레포지토리에서 여러 개의 프로젝트를 관리한다는 것은 장점이 ..

내가 프로젝트의 기능 중 하나가 모집글을 올리는 것인데 그걸 마크다운을 활용하여 올리게 하자고 의견이 나왔다React-Markdownreact-markdown은 react에서 마크다운 문법을 렌더링 할 수 있게 만드는 React의 라이브러리다 Markdown 형식으로 작성된 텍스트를 HTML로 변환하고, React 컴포넌트로 렌더링 할 수 있도록 해준다그리고 우리는 추가적으로 rehype-raw도 활용해 볼 것이다npm install react-markdown rehype-raw 사용하는 방법은 태그로 안의 요소를 묶어주면 된다 그래서 간단하게 입출력 코드를 작성해 보면import React, { useState } from "react";import ReactMarkdown from "react-ma..

우리가 유명한 웹페이지를 사용하다 보면 지원하는 언어가 여러 가지인 것을 볼 수 있다 한국어, 일본어, 중국어, 영어등등 다양한 언어 지원하기웹페이지에서 다양한 언어를 지원하는 방법은 크게 2가지가 있다자동으로 번역하기 다국어 지원 라이브러리자동으로 번역하기말 그대로 웹페이지의 언어를 감지해서 번역해 주는 방법이다 가장 유명한 방법들로는 Google Translate API나 Microsoft Translator Text API 같은 서비스가 있다 Google Translate APIGoogle Cloud에서 제공하는 번역 서비스로, 다양한 언어를 번역할 수 있습니다. 특징100개 이상의 언어를 지원.자동언어 감지 기능 제공.텍스트, HTML, 문서 번역 가능.Neural Machine Translati..