CodeIt_Sprint87 (16)React_초급_React_배포하기 ● 배포하기 위해 React 프로젝트를 [Build]폴더로 정리 생성하기- 완성된 React 프로젝트 접속 중 터미널을 열어서, 아래의 명령어 작성 후, 기다리면 탐색기에 [buld]폴더 생성되어있음install run build● Local 환경에서 웹페이지가 잘 동작하는지 확인하기○ 순서1_ serve라는 간단한 로컬 서버 생성 :npx serve build ○ 순서2_ "순서1"의 명령어를 작성 후, 터미널에 아래와 같은 출력이 나온다.- Local의 링크 : 오직 내 컴퓨터에서만 접속해서 웹페이지 출력 확인 가능- Network의 링크 : 같은 랜|| 같은 와이파이 접속된 다른 기기도 웹페이지 출력 확인 가능● 참고) React 터미널의 모든 명령어 복습프로젝트 생성하기npm init react .. 2024. 11. 25. (15)React_초급_React_Design_최종 실습문제 2문제(이건 여러번 복습) ◎ 연습문제1 : 앞의 레슨들에서는 리액트의 개념을 배우면서 기능을 하나씩 완성해 보았습니다. 이제 남은 것은 이미지를 배치하고 CSS로 디자인을 마무리하는 거겠죠? 완성에 필요한 이미지 파일이랑 참고할 수 있는 HTML, CSS 코드를 올려드릴 테니까, 프로젝트의 완성도를 높여봅시다. 아래 코드는 어디까지나 예시일 뿐이니까, 마음껏 완성해보세요! 😎 ● 예시 HTML 코드 : 주사위게임 던지기처음부터 나 기록 총점 0 상대 .. 2024. 11. 25. (14)React_초급_React_Design_3_React에 CSS 적용하는 여러가지 방법 ● 이미지 파일 불러오기 : import VarImg from '이미자파일 경로' + VarImg}>- Ex : import diceImg from './assets/dice.png';function Dice() { return ;}export default App;● 인라인 스타일 : const style 객체 ○ const style에 시트 넣을 때, 속성명 : 카멜Case대입 연산자 : ':' ('=' 아님)연결 연산자 : ', ' (';' 아님)- Ex : import diceImg from './assets/dice.png';const style = { borderRadius : '50%', width : '120px', height : '120px',};function Dice.. 2024. 11. 25. (13)React_초급_React_Design_2_외부CSS파일 불러오기 ● 과정1_ index.js에 index.css적용하기○ 순서1 : [src폴더] 내에서, [Style폴더]를 생성 후, index.js를 꾸미는 담당을 하는 CSS파일 생성○ 순서2 : index.css 에 body의 배경색, 글자색 css 코드 작성 후, index.js에 불러오기- 외부 CSS 파일 불러오는 방법 : import + 'css파일 경로' //처음부터 이렇게 알려주던가 시발import './Style/index.css';○ 출력 결과 :● 과정2_ Button.js 컴포넌트에 아래와 같이 작성된 Button.css를 적용하기○ Button.css.Button{ padding : 14px 27px; border-radius: 9999px; outline : none; cursor .. 2024. 11. 25. 이전 1 ··· 9 10 11 12 13 14 15 ··· 22 다음
