stonesy

useEffect컴포넌트가 렌더링될 때 특정 작업을 수행하거나, 상태가 props가 변경될 때마다 특정 작업을 수행할 수 있도록 한다. useStatestate의 값이 변경되면 컴포넌트가 리렌더링 된다. useState: 상태가 업데이트되면 컴포넌트가 다시 렌더링된다. 렌더링에 반영되어 UI에 영향을 미치는 상태를 관리할 때 사용한.useRef: 값이 변경되더라도 컴포넌트가 다시 렌더링되지 않는다. 즉, useRef는 값이 변경되더라도 화면에 영향을 미치지 않는 상태를 관리할 때 사용한다.따라서 입력 값이 화면에 즉시 반영되거나 다른 컴포넌트가 해당 상태를 참고해야 하는 경우가 아니라면 useRef를 사용하여 리렌더링을 방지할 수 있다.  useMemouseMemo는 여러 개의 state가 있을 때 불필..

📌빌드란?웹 개발에서 소스 코드를 최적화하고 변환하여 프로덕션 환경에서 사용할 수 있는 형태로 만드는 것을 말한다. 널리 사용되는 빌드 도구로는 Webpack, Vite 등이 있다. ✔👀 Webpack가장 널리 사용되는 자바스크립트 모듈 번들러 중 하나다. Webpack은 CommonJS와 ES 모듈을 모두 지원하며, 별도의 변환 없이도 require와 module.exports를 인식하고 처리할 수 있다. 반면 모든 모듈을 분석하고 의존성을 파악하며 이로인해 프로젝트의 규모가 커질수록 빌드 시간이 길어질 수 있다. ✔👀 ViteVite는 빠른 빌드 속도와 즉각적인 모듈 업데이트를 제공한다. ES 모듈을 기반으로 동작하여 브라우저가 ES모듈을 직접 해석할 수 있다. 이로 인해 초기 빌드 없이 필요한..

✨타입과 집합 타입은 여러 개의 값을 포함하는 집합으로 생각할 수 있다. 그리고 타입 간에는 서로 포함 관계(슈퍼-부모 타입, 서브-자식 타입)이 존재한다. ✔타입 호환성A와 B 두개의 타입이 존재할 때 A 타입의 값을 B 타입으로 취급해도 괜찮은지 판단하는 것업캐스팅: 서브 타입의 값을 슈퍼 타입의 값으로 취급하는 것 ✔다운캐스팅: 반대로 슈퍼 타입의 값을 서브 타입의 값으로 취급하는 것 ✖→ 집합의 포함 관계처럼 업캐스팅은 모든 상황에 가능하지만, 다운 캐스팅은 대부분의 상황에 불가하다. ✔Unknown(전체 집합)모든 서브 타입을 부분집합으로 갖는 전체 집합으로 unknown 타입 변수에 모든 타입의 값을 할당할 수 있다. 반대로 unknown 타입의 값은 any를 제외한 어떠한 타입의 변수에도 할..

📌TypeScript 개요 및 기초✨TypeScript 개요TypeScript란 어떤 언어인가?TypeScript란 JavaScript를 더 안정적으로 사용할 수 있도록 Type이라는 안전장치를 추가한 확장판 JavaScript라고 할 수 있다.※참고: tsconfig.js → TypeScript의 컴파일러 옵션 파일이다.※참고: tsconfig.js → TypeScript의 컴파일러 옵션 파일이다.  ✨TypeScript의 원시타입: number, string, boolean, null, undefinedTypeScript의 원시타입인 Type number, string, boolean, null, undefined에 대해 TypeScript를 사용하는 방법은 다음과 같다.// type 주석 또는 t..

이번에 프로젝트를 진행하면서 팀원들끼리 코딩컨벤션을 정해 정리해보았다. 🤍프론트엔드 코딩컨벤션 ※참고프론트엔드 코딩 컨벤션☑️식별자: 변수, 함수, 배열, 클래스 등과 같은 프로그래밍 요소를 구분하고 식별하기 위해 사용되는 이름❌ 직관적으로 의미를 파악할 수 있도록 가급적이면 약어를 사용하지 않습니다.❌ 한글을 직번역한 변수명을 사용하지 않습니다.❌ 공백을 허용하지 않습니다.❌ 언어에서 사용하는 예약어를 사용하지 않습니다.👌🏻 변수, 함수는 카멜 케이스로 선언합니다.userName, totalAmount, orderName // goodusername, TotalAmount, order_name // bad👌🏻 배열은 복수형으로 선언합니다.👌🏻 private 변수는 _를 접두사로 선언합니다...

Custom HookCustom Hook은 다음과 같은 경우에 사용하면 좋다고 한다.재사용성: 여러 컴포넌트에서 동일한 로직을 반복해서 사용하는 경우, Custom Hook으로 분리하면 코드를 재사용할 수 있어 유지보수가 용이하다.컴포넌트 가독성 향상: 컴포넌트 내부에 비즈니스 로직이 많아지면 가독성이 떨어질 수 있다. Custom Hook으로 로직을 분리하면 컴포넌트가 더 깔끔하고 이해하기 쉬워진다.단일 책임 원칙: 컴포넌트가 한가지 책임만 가지도록 하기 위해 Custom Hook을 사용해 로직을 분리하면 좋다. 이렇게 하면 각 컴포넌트가 명확한 역할을 가지게 되어 코드의 유지보수가 쉬워진다.상태 관리와 부수 효과 처리: 복잡한 상태 관리나 부수 효과(side effects)를 처리할 때, Custom..

CRA란 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린편이다. 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 위의 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 vite를 사용한다.*Esbuild: Go 언어로 작성된 JavaScript 빌드툴, 속도가 빠름 📌Webpack과 Vite의 차이점개발서버Webpack: 소스 코드와 모든 종속 관계의 모든 번들링 후 서버가 준비된다.Vite: Esbuild로 미리 번들링한 모듈을 필요할 때 동적으로 가져오기 때문에 즉각적으로 서버가 구동된다.프로덕션 빌드Webpack: 각 모듈을 범위마다 함수로 매핑하여 결합한다.Vite: 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합한다. 중복을 제거하기 때..

🔎재사용 가능한 & 일관성 있는 컴포넌트 만들기버튼 컴포넌트를 재사용 가능하게 + 일관성 있게 만들어보자. 1. 목표/요구사항1) 버튼의 shape은 항상 동일해야 한다.버튼의 전체적인 모양은 변하지 않아야 한다. 즉, 어떤 크기를 갖든, 어떤 색을 갖던지 간에 border-radius, padding 값에 대한 속성들은 고정되어 있어야 한다. 2) variant props을 통해 preset된 색상을 선택할 수 있어야 한다.일관성 있는 디자인을 구현하기 위해 제한적으로 props를 통해 정의된 스타일을 적용할 수 있도록 만든다.미리 정의된 색을 variant라는 props을 이용하여 선택할 수 있도록 만든다. 3) size props를 통해 preset된 크기를 선택할 수 있어야 한다.색상과 마찬가지..

Netlify, Firebase로 React 프로젝트를 배포하는 방법을 알아본 이후, AWS를 통한 React 프로젝트 배포방법도 알아보았다🙌🏻 AWS를 통해 React와 같은 SPA를 배포하는 방법은 2가지가 있다. AWS EC2를 활용한 배포와 AWS S3+cloudfront를 활용한 배포이다. 이때, 각 배포 방법에서 배포할 수 있는 서버가 다르다. EC2를 이용한 경우 웹 서버와 WAS 서버를 배포할 수 있고, S3+cloudfront를 이용한 경우 정적 콘텐츠을 배포할 수 있다. 🔎EC2를 통한 배포 EC2를 통해 웹 서버와 WAS 서버를 배포할 수 있기 때문에, react 프로젝트를 배포하기 위해서는 express 서버를 이용해야 한다. express 서버는 웹 서버로도 이용할 수 있고, WA..

Netlify로 React 프로젝트를 배포한 이후, 여러가지 배포방법을 공부해보고 싶어서 Firebase를 이용해 React 프로젝트를 배포하는 방법도 정리해보았다🙌🏻 🔎Firebase Firebase는 개발을 편리하게 해주는 클라우드 기반의 모바일 및 웹 애플리케이션 개발 플랫폼이다. 애플리케이션 개발 과정에서 사용되는 기능(예: 사용자인증, DB, 배포)들을 정형화된 서비스로 제공함으로써 개발자들이 더 빠르고 효율적으로 개발할 수 있게 한다. 🔎Firebase를 통해 React 프로젝트 배포하기 Firebase가 제공하는 기능들 중 배포 서비스를 이용해보도록 하자. 1. 프로젝트 생성하기 아래 링크에서 “프로젝트 만들기”로 프로젝트를 생성한다. https://console.firebase.google..