FrontEnd/React

프론트엔드 작업을 하다보면 DOM 에 직접 접근하는 ref 속성을 사용하는 경우가 꽤 많이 온다. DOM 이란? Document Object Model의 약자로써 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다. HTML은 등의 태그들로 이루어져 있는데, 이를 계층적으로 구조화하고 제어할 수 있도록 여러가지 메소드를 제공해주는 트리 자료 구조를 바로 DOM 이라고 할 수 있다. 아래는 DOM의 예시이다. React로 작업을 할 때, state..

프론트엔드에서는 UI 작업을 할 때에 재사용성이 높은 디자인들을 컴포넌트로 구성하는 작업이 필수적이다.컴포넌트 작업을 여러 사람이 하다보면, 내가 가져다 사용해야 할 컴포넌트 이름이 뭐고 어디에 있지?? 이렇게 혼란이 올 때가 많다. 또한 컴포넌트를 코드를 직접 변경해가며 변화를 확인하는 것은 매우 귀찮다.이를 방지하기 위해 모든 컴포넌트들을 한눈에 파악하고, 코드 변경없이 컴포넌트들의 변화를 한번에 확인할 수 있는 Storybook이라는 도구가 있다. npx storybook init 프로젝트에서 위 명령어를 터미널에 입력하면 스토리북 설치를 진행할 수 있다.  설치가 완료되기 전 Storybook에서 제공하는 ESLint 를 설치 여부를 묻는 단계가 있다.  ESLint 는 내제되어있는 Linter가..

이전 포스팅에서 Vite와 Yarn berry 세팅을 마쳤다. 해당 세팅으로 인해 당연히 배포 방법도 달라질 것이다. 그래도 크게 변하는 건 없어서 이번 포스팅을 통해 해당 세팅 시 배포 방법을 정리하려고 한다. 기본적인 리액트 프로젝트 배포 방법 https://doyourbestcode.tistory.com/124 https://doyourbestcode.tistory.com/125 https://doyourbestcode.tistory.com/126 ✅ 윈도우(Windows) ✅ React(Create React App + Typescript) ✅ Vite + Yarn berry(Zero-installs) Dockerfile 작성 FROM node:18 AS builder # set working d..

우리는 지금까지 NPM 패키지 매니저를 사용해왔다. 그러나 NPM 패키지 매니저에 관해서 항상 많은 문제점들이 제기되어 왔다. https://toss.tech/article/node-modules-and-yarn-berry 해당 블로그에 정리가 매우 잘 되어있다. 다시 복기하는 겸 내 블로그에 작성하며 공부해보기로 했다. 비효율적인 의존성 검색 NPM 프로젝트에서 node에 진입 후 react 패키지를 찾는 상황을 연출해보자. 위에서 볼 수 있듯이 npm은 패키지를 찾기 위해 상위 디렉토리의 node_modules 폴더를 탐색하게 되고, 바로 찾지 못할 수록 느린 I/O 호출이 반복되게 된다고 한다(실패하기도 함). 환경에 따라 달라지는 동작 위에서 보았듯이 NPM은 패키지를 찾지 못하면 상위 디렉토리의..

브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다. 그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)"이라는 해결 방법을 사용해야 했다. 보통 리액트 등의 프론트 프로젝트를 시작 시 웹펙(webpack) 으로 번들링을 진행한다. 콜드 스타트 방식으로 개발 서버를 구동할 때, 번들러 기반의 도구의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만이 실제 페이지를 제공할 수 있다. * 콜드 스타트(Cold Start): 최초로 실행되어 이전에 캐싱한 데이터가 없는 경우를 의미 위의 그림처럼 번들링 후에야 개발 서버를 구동할 수 있으므로 개발 서버를..

프론트 프로젝트 배포에 성공하여 안도하던 찰나, 큰일이 발생하였다. 우리는 사용자의 목소리를 분석하여 노래를 추천해주는 서비스를 구현해 보았는데, 이를 위해서는 목소리 녹음 기능이 필수적이였다. 우리는 사용자 PC에서 미디어의 스트림을 얻어내는 MediaStream의 API인 getUserMedia를 사용하였다. 문제는 이 기능이 로컬에서는 잘 동작하였는데, http로 배포한 주소에서는 오류가 발생하였다. 원인을 찾아보니 getUserMedia는 https에서만 동작한다는 설명이 있었다. 이를 해결하기 위해 백 프론트 모두 인스턴스에 https를 적용하기로 하였다. HTTP HTTP (HyperText Transfer Protocol)​​는 텍스트 기반의 통신 규약으로 인터넷에서 데이터를 주고받을 수 있..