본문 바로가기

전체 글260

(1)인터렉티브_자바스크립트_Java Script_맛보기, 요소노드를 변수,유사배열로 저장,호출하기 ● Default 상태 :- index.html 0 - + - style1.css 0 - + - 출력장면● 요구사항 :"-" / "+" 버튼을 누를 시, 위에 출력된 숫자값 1값씩 증감, 감소되도록 한다.color 버튼을 누를 시, 위에 출력된 숫자의 텍스트가 버튼 색깔로 변경되도록 한다.● 답 :- index1.js//1) 위의 동작에 관련된 태그들을 변수로 저장//출력된 숫자const myNum = document.ge.. 2024. 11. 28.
(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.

티스토리툴바