전체 글234 (17)React_초급_DiceGame_React_Project_1_JSX작성부분 https://kojammin.tistory.com/199 (15)React_초급_React_Design_최종 실습문제 2문제(이건 여러번 복습)◎ 연습문제1 : 앞의 레슨들에서는 리액트의 개념을 배우면서 기능을 하나씩 완성해 보았습니다. 이제 남은 것은 이미지를 배치하고 CSS로 디자인을 마무리하는 거겠죠? 완성에 필요한 이미지 파kojammin.tistory.com위의 문제의 Dicegame 프로젝트를 만들어본 과정입니다.◎ 1_ index.js 작성 과정 //직접적으로 출력되는 js파일● [index.html]코드를 봤을 때, 태그 내 자식인 div#root 안에서 제작될 것이다.-index.html ● 그래서, index.js는 아래와 같이 작성 시작import를 통해 ReactDom을 불러.. 2024. 11. 26. (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. 이전 1 ··· 9 10 11 12 13 14 15 ··· 59 다음
