컴퓨터공방

리액트 설치 node.js 설치 node.js => 브라우저에서만 사용할 수 있는 자바스크립트를 브라우저 밖에서도 사용할 수 있게함 vscode 설치 커맨드 create-react-app으로 리액트 프로젝트 생성 npm init react-app vscode, 터미널에서 npm init react-app . 개발 모드 실행 npm run start 개발 모드 종료 ctrl + C 리액트 개발자도구 (리액트구조를 살펴볼 수 있는 도구) React Developer Tools 검색후 설치 F12 누른후 확인 components - 리액트 개발의 기본적인 단위 페이스북, 인스타그램, 넷플릭스 모두 리액트로 만들어져 있다. 접속후 리액트 개발자도구로 확인해봐도 좋다.

/* eslint-disable */ // import logo from './logo.svg'; import React, {useState} from 'react'; import './App.css'; function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 스커트 추천', '남자 봄옷 추천']); let [따봉, 따봉변경] = useState(0); // deep copy function 글자순정렬() { var newArray = [...글제목]; newArray = newArray.sort() 글제목변경( newArray ); } return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경( 따봉 + 1 )} }>👍{따봉} 2월 17일 발..

- 일단 변경함수 써야함 - 변경함수(대체할 데이터) state는 직접 건들지말고 deep copy해서 그걸 건드려라 *변경함수 제작시 기억할 것 1. 일단 기본 state 카피본 만들고 (Spread Operator) 2. 카피본에 수정사항 반영 3. 변경함수()에 수정사항 반영된 카피본 집어넣기 /* eslint-disable */ // import logo from './logo.svg'; import React, {useState} from 'react'; import './App.css'; function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 스커트 추천', '남자 봄옷 추천']); let [따봉, 따봉변경] = useState(0); /..

*따봉을 누를때마다 1이 증가하는 코드 /* eslint-disable */ // import logo from './logo.svg'; import React, {useState} from 'react'; import './App.css'; function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 스커트 추천', '남자 봄옷 추천']); let [따봉, 따봉변경] = useState(0); return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경( 따봉 + 1 )} }>👍{따봉} 2월 17일 발행 { 글제목[1] } 3월 17일 발행 { 글제목[2] } 2월 17일 발행 ); } export default App; /* eslint-disa..

// import logo from './logo.svg'; import React, {useState} from 'react'; import './App.css'; function App() { let [글제목, 글제목변경] = useState('남자 코트 추천'); let [글제목2, 글제목변경2] = useState('여자 스커트 추천'); let [글제목3, 글제목변경3] = useState('남자 봄옷 추천'); return ( 개발 Blog { 글제목 } // 데이터 바인딩 2월 17일 발행 { 글제목2 } 3월 17일 발행 { 글제목3 } 2월 17일 발행 ); } export default App; state는 변수 대신 쓰는 데이터 저장공간이다. => HTML이 자동으로 재렌더링 된다. ..

왜 App.js가 메인페이지인가? index.js에서 public/index.html에 App.js의 HTML코드를 넣어달라고 작성되어 있음 index.js => public/index.html의 id root div에 태그를 넣어주세요 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to ..

설치순서 1. Node.js 검색 후 최신버전 설치 => create-react-app 라이브러리를 사용하기 위해서 Node.js를 설치함, npm을 이용한다. 2. Visual Studio Code 에디터 설치 3. 폴더생성 4. 에디터에서 작업폴더 Open Folder 5. npx create-react-app 프로젝트명 입력 6. 프로젝트명의 하위폴더를 다시 Open Folder 7. 코드짠걸 미리보기 띄우기, 터미널에서 npm start 입력 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 새로운 React 앱 만들기 – React A JavaScript library for bui..

모바일 App처럼 스무스하게 동작하는 웹들 (SNS) 웹앱을 만들때 가장유용한 React 1. 앱으로 발행이 쉽다. 2. 앱처럼 뛰어난 UX 3. 그냥 웹사이트보다 비즈니스적 강점 바보도 이해할 수 있다는 코딩애플님의 강의 시작해보려한다.