CodeIt_Sprint/React_초급19 (18)React_초급_DiceGame_React_Project_2_인라인 작성부분 - 이전 JSX 작성 과정 링크 : https://kojammin.tistory.com/201- CSS 예시자료 받을 수 있는 링크 : https://kojammin.tistory.com/199 ▣저번 과정까지 기본 구조, 작동 부분을 구현했으니, 이제 CSS 스타일 작업으로 꾸미기를 하는 과정◎ 6_ 전체 배경화면, 폰트의 Style 적용 => index.html의 style 시트에 직접 적용- index.html ● 출력 장면 :◎ 7_ Header 부분 => "F12"를 눌러 부분이라는 것을 알 수 있다.● 순서1_ [src]폴더에 [Style]폴더를 따로 생성, Header부분 담당의 [Header.css] 생성, 컴포넌트에 import로 적용 하기○ [src]폴더에 [Style] 폴더 .. 2024. 11. 26. (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. 이전 1 2 3 4 5 다음
