creamymood의 개발 공부 발자취 💭

어렵다 ..꼬리에 꼬리를 무는 질문의 연속인 새 고ㅏ목 채찍피티.. 미안해. ... 지피티 괴롭혀서 그나마 쉽게 정리할 수 있게 된 파트 🥹 1. 컴포넌트란?2. 컴포넌트 만들기3. 컴포넌트 종류4. 함수형 컴포넌트와 클래스형 컴포넌트 차이5. 클래스형 컴포넌트 함수형 서로 변환해보기💡✨컴포넌트 ?→ 리액트(React)에서 **컴포넌트(Component)**란 UI를 구성하는 독립적인 블록.쉽게 말하면, 웹 페이지의 한 부분을 담당하는 재사용 가능한 코드 조각 ! → 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다.💡✨컴포넌트를 만들어보자❶ 컴포넌트 정의하기: 사용하고 싶은 컴포넌트를 만들기 위해 원하는 마크업을 추가 하기* 리액트 컴포넌트 이름은, 대문자로 시작..

🕊️JSX란 ?JSX는 JavaScript에 HTML을 섞어서 쓸 수 있게 만들어주는 문법그래서 "JavaScript XML"이라는 뜻으로 JSX라는 이름이 붙었고,리액트에서 이걸 쓰면 HTML처럼 쓰면서도 자바스크립트 기능도 같이 쓸 수 있음 !    → JSX는 JavaScript XML→ JSX란, JavaScript를 확장한 문법입니다. - JSX는 JavaScript와 XML/HTML을 합친 것이라고 볼 수 있습니다.- React에서는 JSX를 이용하여 화면에 UI를 나타냅니다.- JSX를 사용하면 하나의 파일에 HTML 구조와 JavaScript를 함께 사용할 수 있습니다.- 기존에는 .html 파일과 .js 파일로 구분하여 작성해 왔습니다. // JSX 문법function App() { r..

공부하던 중, 코드를 따라 쳐보고 싶고, 예제를 연습해보고 싶은데..vite 설치 후에, 어느 파일에 쳐야하는지 몰랐다. 같은 동기분께 여쭤보기도 하고,지피티에게 물어서 알게되어 정리해보기. 일단 리액트 사용 단계(?) 부터 차근차근 알아보자. 한눈에 보기 ! ✨❶ 프로젝트 생성: npm create vite@latest my-react-app --template react❷폴더 이동 & 패키지 설치: cd my-react-app && npm install❸개발 서버 실행: npm run dev------깃 선택-----------❹src 폴더에서 코드 작성❺ 프로젝트 빌드: npm run buildReact 프로젝트 생성 & 실행 단계❶Vite로 React 프로젝트 생성터미널을 열고 원하는 폴더(예: ..