Engineering/Frontend

[React] 프로젝트 구조, 프로젝트 파일 수정 및 배포

💡프로젝트 구조React 프로젝트를 구성할 때 효율적이고 유지보수가 용이한 폴더 구조를 만드는 것은 매우 중요하다.이를 위해서는 기능적으로 연관된 파일들을 그룹화하고, 각 파일이 어디에 속하는지 명확하게 파악할 수 있도록 구조를 설계해야 한다.프로젝트 구조를 적용할 때는 팀원들과의 커뮤니케이션을 통해 일관된 방식으로 파일을 구성하도록 한다. 1. src/ 디렉터리index.js 살펴보기프로젝트의 구조에서 가장 중요한 것은 src 폴더이다. src는 source의 약자로, 프로젝트의 모든 소스 코드가 포함된 최상위 디렉터리이다.src 폴더에는 입구 파일이라고 할 수 있는 index.js 파일이 있다. npm start 명령어로 create-react-app을 구동시키면 index.js를 찾아서 적혀 있는..

Engineering/Frontend

[React] 개발자 환경 구축: Node.js, Create React App

💡ReactReact는 사용자 인터페이스(UI) 개발에 초점을 맞춘 JavaScript 프론트엔드 라이브러리로, 복잡하고 동적인 웹 페이지를 개발하는 데에 용이하다.간단하게 말하면 React는 사용자 정의 태그를 만드는 기술이라고 할 수 있다.실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 분야에서 널리 사용된다. React의 특징 및 장점React는 Facebook(현 Meta)에서 개발한 JavaScript UI 라이브러리이다.Facebook은 매우 다양한 컴포넌트와 복잡한 사용자 인터페이스를 가지고 있는데, 이러한 복잡성에 대응하기 위해 개발된 것이 React이다.가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 UI 업데이트를 처리한다. 이를 통해..