react (46) 썸네일형 리스트형 [코드잇] 리액트 웹 개발 시작하기 (6) 1. 빌드하기 1) 개발된 프로젝트 빌드하기 npm run build 2) 빌드한 것 로컬에서 실행하기 - serve 프로그램을 다운 받고 build 폴더에서 서버 실행 npx serve build 2. 웹 사이트 배포하기 (AWS S3) - 클라우드 컴퓨팅 서비스에서 제공하는 웹 서버를 사용 - 스토리지 -> S3 (구글 드라이브 같은 저장소) - 1년간 무료 그 이후 유료 - 버킷 만들기 - 모든 퍼블릭 차단 버튼 해제 - 정적 웹 사이트 호스팅 -> S3에 올린 파일을 웹 사이트로 만듬 -> 활성화 체크 - 인덱스 문서, 오류 문서 둘다 index.html을 넣어줌 ( 오류 문서 = 파일이 없는 경로로 접속하는 경우에 보여 줄 HTML 파일) ( 경로 처리를 리액트로 가능) - 버킷 정책 = 웹 브.. [코드잇] 리액트 웹 개발 시작하기 (5) 1. 컴포넌트 재사용 app.js import { useState } from 'react'; import Board from './Board'; import Button from './Button'; function random(n) { return Math.ceil(Math.random()*n); } function App () { const [myHistory, setMyHistory] = useState([]); const [otherHistory, setOtherHistory] = useState([]); const handleRollClick = () => { const nextMyNum = random(6); const nextOtherNum = random(6); setMyHistory([.. [코드잇] 리액트 웹 개발 시작하기(4) 1. state - 리액트에서 state란 상태가 바뀔 때마다 화면에 새롭게 그려내는 방식으로 동작하는 것 - 리액트에서 state를 만들고, state를 바꾸기 위해서는 useState라는 함수를 활용 import { useState } from 'react'; // ... const [num, setNum] = useState(1); // ... - 디스트럭처링 문법으로 작성 - useState 함수가 초깃값을 아규먼트로 받고 그에 따른 실행 결과를 요소 2개를 가진 배열의 형태로 리턴 - 첫번째 변수는 원하는 state의 이름을 지어줌 - 두번째 변수는 state 이름앞에 set을 붙인 다음 카멜케이스로 이름을 지어주는 것이 일반적 - state는 변수에 새로운 값을 할당하는 방식으로 변경하는 것이.. [코드잇] 리액트 웹 개발 시작하기(3) 1. 컴포넌트 리액트 엘리먼트 - JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 됨 import ReactDOM from 'react-dom'; const element = 안녕 리액트!; console.log(element); ReactDOM.render(element, document.getElementById('root')); - 이런 객체를 리액트 엘리먼트라 부름 - 리액트 엘리먼트를 ReactDOM.render 함수의 인수로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄어줌 리액트 컴포넌트 - 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법 - 리액트 컴포넌트의 이름은 반드시 첫 글자를 대문자로 작성해야 함 mport ReactDOM.. [코드잇] 리액트 웹 개발 시작하기 (2) 1. 가위바위보 간단버전(1) import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 가위 바위보 가위 바위 보 , document.getElementById('root')); 2. JSX에서 자바스크립트 사용하기 import ReactDOM from 'react-dom/client'; const product = 'MacBook'; const model = 'Air'; const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Dis.. [코드잇] 리액트 웹 개발 시작하기 (1) - 리액트로 웹 사이트를 개발할 때에는 주로 create-react-app이라는 것을 사용 - create-react-app은 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태의 프로젝트를 생성해 주는 도구 - Vs Code의 터미널에서 crete-react-app 명령어를 실행 -> 새로운 리액트 기반 웹 애플리케이션을 생성하는 명령어 - npx 명령어는 npm 패키지를 설치하고 곧바로 실행시켜줌 npx create-react-app 개발 모드 실행 - cd는 change directory의 약자로, 현재 커맨드 라인 도구가 위치한 경로를 변경하는 역할 - 먼저 생성한 프로젝트 폴더 안으로 들어가고 이후에 npm start 명령어를 통해 애플리케이션을 실행 cd 프로젝트 폴더명.. 이전 1 ··· 3 4 5 6 다음
