티스토리챌린지8 (1)React_초급_개발환경셋팅(Window) 순서1_Node.js사이트 접속 => "LTS"버전으로 Download링크 : https://nodejs.org/en순서2_ 파일 설치 경로 : C드라이브 / Program Files 폴더 내 로지정순서3_ 추가 프로그램 설치 여부 체크 박스 : 체크 X, Next순서4_ cmd(명령프롬프트) 접속 => node.js와 npm 설치여부 확인순서5_앞으로 React개발할 폴더를 원하는 위치에 생성 => vscode로 생성된 폴더 열기※주의 : 대문자X, 소문자와 '_'로만 이름으로 설정해야함순서6_vscode의 단축기(Ctrl + '`' key)로 터미널 열기순서7_터미널에 react 프로젝트 생성 명령어 작성 : ● React 프로젝트 생성 명령어 (Terminal)npm init react-app .●.. 2024. 11. 21. (13)JavaScript중급_4_이벤트 활용_Scroll이벤 ＃알아야 할 개념 :● 개념_1 : Scroll 관련 이벤트 객체 ○ event.type (Only one)브라우저 창 기준 scroll을 했을 시, 발생하는 event.type : 'scroll'● 개념_2 : Scroll의 객체는 event객체가 아닌, window객체, window객체 + addEventListener()를 한다.window객체의 프로퍼티 : scrollY //브라우저 창 기준, 몇px만큼 아래로 scroll 했는지 값을 반환window.addEventListener('scroll' , function); ● 개념_3 : 주요 활용 법○ 활용1 : scrollY를 몇 px 이상 내려갈 시, 다른 태그(ex_header_nav)가 그림자 효과 생기도록 코드 구현const headNa.. 2024. 11. 16. (9)JavaScript중급_4_이벤트 활용_Mouse_event_1_클릭관련 ＃알아야 할 개념 :● 개념_1 : Mouse 이벤트 기본 이론○ 정의 :Mouse 포인터에 관한 기본적인 event.type과 event.프로퍼티가 존재한다.○ event.button : 마우스의 왼쪽 클릭, 오른쪽 클릭 , 드래그 버튼 에 따라 0,1,2값을 반환하는 event객체 프로퍼티 :왼쪽 마우스 클릭 : event.button == 0오른쪽 마우스 클릭 ; event.button == 2드래그 클릭 : event.button == 1○ event.type : 요소노드에 addEventListener로 이벤트 핸들러를 추가할 때, 마우스 기본 동작에 추가할 떄, event.type들 //존나 많지만, - 마우스의 어떤 버튼에 관한 event type || 마우스 클릭 횟수에 관한 event t.. 2024. 11. 15. (4)JavaScript중급_3_1_이벤트핸들러 등록 ⊙ 이벤트 핸들러 :＃알아야 할 개념 :● 개념1 : 이벤트 핸들러 등 방법○ 방법1 : 요소노드의 onclick프로퍼티에 함수 할당, 선언const element = document,querySelector('tag'); //요소노드 변수에 저장 element.onclick = function ()//요소노드의 onclick 프로퍼티에 함수 선언 { console.log('함수 호출'); };○ 방법2 : 함수 선언 후 => 요소노드의 프로퍼티 메소드 addEventListener()에 할당, 선언const element = document,querySelector('tag'); //요소노드 변수에 저장 function printBtn() //별도의 함수 선언{ console.log('버튼을.. 2024. 11. 13. 이전 1 2 다음
