react

프론트엔드에서는 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): 최초로 실행되어 이전에 캐싱한 데이터가 없는 경우를 의미 위의 그림처럼 번들링 후에야 개발 서버를 구동할 수 있으므로 개발 서버를..

졸업 프로젝트를 진행하며 플젝 배포 링크를 제출해야했다. 우리는 백과 프론트를 따로 배포하고 있어 그냥 vercel 같은 편리한 배포 사이트를 이용해도 되었지만, 복습할 겸 도커와 EC2 로 배포를 결정했다.(백 프론트 같이 배포할때를 대비하여 도커 적응은 필수...) ✅패키지 매니저: npm ✅윈도우(Windows) ✅React(Create React App) 우선 현재 프로젝트의 루트 경로에 도커파일을 작성해줘야 한다. 위와 같이 루트경로에 Dockerfile.prod 파일을 생성해 주었다. 내부 코드는 아래와 같다. FROM node:14 AS builder # set working directory WORKDIR /app # install app dependencies #copies package..

Input 태그에 onChange 함수를 적용해보며 Throttle 과 Debounce 함수에 대해 알아보는 시간이다~!! 먼저 Styled-components 를 활용하여 나만의 Input 태그를 꾸며준다. 그 후 onChange 함수를 통해 input에 변화가 있을 때 마다 콘솔에 출력해보자. function App() { const textInputted = (e: React.ChangeEvent) => { console.log(e.target.value); }; return ; } const Input = styled.input` width: 300px; height: 50px; background-color: wheat; border-radius: 10px; font-size: 20px; `; ..