React

api활용

작성자:

1. 시작파일 파일다운로드 파일활용방법 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 시작 파일 #2. 연관링크 🔗 연관링크 API란? fetch와 promise 예제 MDN fetch MDN try…catch 문 axios 공식홈 #3. fetch fetch() fetch 함수는 웹에서 데이터를 요청하고 받아오는 자바스크립트 기능이다. 간단하게는 fetch('주소')를 사용해 데이터를 요청하고, .then()을 통해 받은 데이터를 처리한다 우리의 레시피 앱은 … 더 읽기

앱제작-준비

작성자:

1. 시작파일 파일다운로드 파일활용방법 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 시작 파일 #2. App 컴포넌트 비우기 ./src/App.js 컴포넌트를 깨끗하게 정리하자. App.js function App() { return <div className='App'></div>; } export default App; 1 2 3 4 5 index.js 수정 index.js import React from 'react'; import ReactDOM from 'reactdom/client'; import './index.css'; import App … 더 읽기

router

작성자:

Info: 🐨 목차 https://qwerewqwerew.github.io/retype-react/레시피앱/8/#1-시작파일 https://qwerewqwerew.github.io/retype-react/레시피앱/8/#1-시작파일 1. Router 이해 (Part1) 1.1. 시작파일 Info: 💡 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 파일다운로드 1. 다운로드 받은 start.zip 파일의 압축을 푼다 1. 새 리액트 앱을 설치한다. 리액트 앱 설치를 모를경우 아래 링크를 참고한다. 🔗[리액트 설치안내](https://www.notion.so/b2b65b3a6a9743ef84174efb17630e12) 1. 리액트 앱의 설치가 왼료 되었으면 1번의 파일압축을 푼다 1. … 더 읽기

컴포넌트

작성자:

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

event

작성자:

1. React Event Listener 이벤트리스너 설명 onClick 마우스 클릭 이벤트를 처리합니다. onChange 인풋 필드나 셀렉트 박스와 같은 폼 요소 값이 변경될 때 발생합니다. onSubmit 폼이 제출될 때 발생합니다. onFocus 요소가 포커스를 받았을 때 발생합니다. onBlur 요소가 포커스를 잃었을 때 발생합니다. onKeyDown 키보드의 키를 누르는 이벤트를 처리합니다. onKeyUp 키보드의 키를 떼는 이벤트를 처리합니다. onScroll 스크롤 이벤트를 … 더 읽기

시작하기

작성자:

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

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 = … 더 읽기

노코드리액트

작성자:

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

컴포넌트

작성자:

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** # 앱 진입점 … 더 읽기