본문 바로가기

전체 글234

(2)React_초급_React 개발자 도구, 확장 프로그램 설치 ● React Developer tools ○ 순서1_ Google에 "react developer tools" 검색 ○  순서2_바로 보이는 링크 접속 => 앱 설치 ○  순서3_설치가 완료되면, 웹페이지 상단 오른쪽에 퍼즐모양 버튼 클릭 => React Developer Tools가 설치된 것을 볼수 있다.또는 웹페이지에서 "F12" 누르면 생기는 개발자 도구에서도 "React Develop Tools"를 열 수 있다.● React Developer tools의 역할 : => 해당 React 프로젝트 내 구성하는 컴포넌트들의 구조를 볼 수 있다. 2024. 11. 21.
(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.
(12)JavaScript중급_4_이벤트 활용_Input태그관련 이벤트 ＃알아야 할 개념 :● 개념_1 : Input_Focus 관련 event.type , event.프로퍼티○ 정의 :Input 태그가 마우스 포인터로 눌러 Focus 된 상태에 관한 기본적인 event.type.- event.type (4가지 : 2 + 2)○ Form 태그를 요소노드로 했을 시, Focus됐을 때,  : 'focusin'Focus가 풀렸을 시 : 'focusout'○ 해당 Input 태그를 요소노드로 했을 시, Focus됐을 때,  : 'focus'Focus가 풀렸을 시 : 'blur'※왜저렇게 차이를 두었을까? => 'focus'와 'blur'는 Input 태그에 더 세부적인 기능, 동작을 적용시에 활용법 같다.● 개념_2 : Input 입력 관련 event.type , event.프로.. 2024. 11. 15.

티스토리툴바