컴포넌트

작성자:

🔗유튜브 강의 완성코드 1. 영상보기 1-2. 컴포넌트와 프롭스란? component: 두번이상 사용되는 UI 요소를 사용자정의 태그로 만들어 사용하는 것 props: 컴포넌트에 전달하는 데이터 2. App.js 파일로 컴포넌트의 정의 알아보기 ./src/App.js 파일을 열고 App() 함수와 App() 함수가 반환하는 값을 보자. import React from 'react'; function App() { //App() 컴포넌트를 정의했고, return ( // App 컴포넌트는 HTML을 반환하고 … 더 읽기

props

작성자:

1. 리액트 props 1.1. 데이터의 동적출력 리액트에서 컴포넌트를 생성하는 문법을 JSX(JavaScript XML: Javascript에 XML을 추가한 확장한 문법) 라고 합니다. jsx 에는 {} 기호 안에 자바스크립트 를 작성하면 자바스크립트 코드를 실행할수 있습니다. MemberItem 컴포넌트에서 사용하고 있는 데이터를 자바스크립트의 표현식으로 변경하여 작성해보겠습니다 1.1.1. 작성 components/MemberItem.js 를 수정합니다. //MemberItem.js import "./MemberItem.css"; const MemberItem = () => { const member = … 더 읽기

시작하기

작성자:

1. 영상 2. create-react-app으로 리액트 앱 만들기 탐색기를 열고 recipe-app 폴더를 만든다. VScode 를 실행후 recipe-app 폴더를 편집창으로 드래그드랍하여 루트폴더로 연다. VScode 에서 ctrl + J ( command + J )를 눌러 터미널을 실행한다. 아래의 명령어를 터미널에 입력한다명령어는 npm 모듈에 내장되어 있는 보일러플레이트( boilerplate )를 사용하여 리액트앱을 현재 폴더에 설치한다는 내용이다. npx create-react-app . 3. README 수정하기 안에 있는 … 더 읽기

컴포넌트

작성자:

1. 리액트컴포넌트 1.1. 리액트 앱 구조 1.1.1. 이미지 리소스 주소 수업에 사용할 이미지 파일의 주소 입니다. http://qwerew.cafe24.com/images/pet-1.jpg http://qwerew.cafe24.com/images/pet-2.jpg http://qwerew.cafe24.com/images/pet-3.jpg http://qwerew.cafe24.com/images/pet-4.jpg http://qwerew.cafe24.com/images/pet-5.jpg http://qwerew.cafe24.com/images/pet-6.jpg http://qwerew.cafe24.com/images/pet-7.jpg http://qwerew.cafe24.com/images/pet-8.jpg 1.1.2. 리액트 앱의 폴더 구성 리액트 앱의 폴더와 파일의 구성과 역할을 알아봅시다. react-test/ |-**node_modules**/ # 의존성 파일을 담은 폴더 |- **src**/ |- **App.js** # 최상위 컴포넌트 |- **index.js** # 앱 진입점 … 더 읽기

노코드리액트

작성자:

프롬프트 vite로 현재 폴더에 React 프로젝트를 생성해줘. 상태관리 라이브러리 없이, 타입스크립트도 사용하지 않고, 자바스크립트 기반의 최소 설정으로 시작하고 싶어. figma Plugin 설치 https://www.figma.com/community/plugin/1301565000406306598 피그마 디자인 → devmode → codia 로 코드 생성 오토레이아웃 활용 https://tud2z3bian80o43m9p4fu3.codia.website/

react-vite-설치

작성자:

리액트 공식문서 불필요한 파일 삭제 – src 폴더에서 불필요한 파일들(.sh, .fcss, index.css 등) 삭제 – 이미지 파일들과 관련 에셋 파일들 제거 – 프로젝트 구조를 간소화하여 필수 파일만 남김 오류 메시지 해석 및 해결 방법 – 터미널의 오류 메시지에서 파란색 파일명 확인 (Ctrl+클릭으로 해당 위치로 이동) – 파일이 없는데 불러오려는 import 구문 제거 – 삭제된 이미지 … 더 읽기

Contact

작성자:

07. Contact.jsx — EmailJS로 이메일 전송 이번 단계에서 할 일 Contact 폼에서 입력한 내용을 실제 이메일로 전송한다. EmailJS — 백엔드 서버 없이 프론트엔드에서 바로 이메일을 보내주는 서비스이다. 피그마 디자인 분석 │ ─── contacts ──────────────────────────────── │ │ │ │ Name │ │ ┌────────────────────────────────────────┐ │ │ │ Value │ │ 높이: 40px │ └────────────────────────────────────────┘ │ │ │ … 더 읽기

바이브코딩

작성자:

1. 피그마(Figam Design) 피그마 디자인 파일을 Make로 전송한다. 2. 메이크(Figam Make) AI 크레딧: stater 플랜의 경우 매달 500크레딧 생성 일일한도 150 크레딧 소진 비용은 코드의 복잡도에 따라 다름 2.1. 생성하기 Make보기 피그마 디자인 파일의 프레임에서 우클릭하여 Make로 전송 선택 아래의 프롬프트 입력 후 메시지 전송 아래 요구사항에 맞게 구현해 [요구사항] React 순수한 css 외부파일(tailwind css … 더 읽기

AboutMe

작성자:

05. AboutMe.jsx — 소개 섹션 이번 단계에서 할 일 학력, 자격사항, 인적사항을 보여주는 소개 섹션을 만듭니다. 재사용 컴포넌트를 만드는 방법을 배웁니다. 피그마 디자인 분석 │ ─── ABOUT ME ──────────────────────────────────── │ │ 끈기와 열정으로 성장하는 오성의입니다. │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ 학력 및 교육사항 │ 인적사항 │ │ │ │ 22.10-22.10 | 수료 … 더 읽기