차곡차곡

REACT 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 사용자 정의 태그를 만드는 기술이다. React 환경 구축 새 폴더 생성 → visual Studio로 생성한 폴더 열기 → NodeJs.org(node.js 공홈에서 설치 ) → Vs code 터미널 에서 npx create-react-app . 입력 ( 현재 폴더에 리액트 설치하는 명령어 ) → 설치 완료가 되면 react app 이 브라우저를 통해 자동 실행됨 React 디렉토리 구조 - create-react-app 을 통해 리액트 설치시 어떤 디렉토리 구조를 가지는가? my-app/ ├── node_modules/ ├── public/ │ ├── favicon.ico │ ├── index.html │ ├── logo192...

제어 할 태그 선택 웹 페이지의 특정 태그를 동적으로 선택하고 선택된 태그의 스타일 속성을 변경하는 방법 중 하나다. getElementsById ( Id 선택자 ) 가장 간단하고 효율적임 각 태그는 고유한 id를 가질 수 있어 id를 통해 해당 태그를 쉽게 선택 html 코드에 id 속성 추가 동일한 id를 가진 태그가 여러개 존재할 경우 오류 발생 예시 버튼 getElementsByClassName ( Class 선택자) 하나 이상의 태그에 동일한 클래스 이름을 부여하여 선택 id 선택자 보다 유연하고 재사용 가능 html 코드에 class 속성 추가 동일한 class를 가진 태그가 여러개 선택 가능 예시 버튼 1 버튼 2 const button = document.getElementsByClassN..

변수 ( Variable ) 프로그래밍에서 변수(Variable)은 데이터를 저장하는 공간에 붙여진 이름이다 변수를 통해 저장된 데이터에 접근하거나 데이터를 수정할 수 있다. 데이터를 저장할 공간 프로그램 실행 중에 값이 변경 될 수 있음 var , let 키워드 사용하여 선언 변수 사용 목적 데이터 값을 재사용하고 관리할 수 있다 코드의 가독성을 향상 시킬 수 있다 값을 변경하거나 조정해야하는 경우에 유용하다 상수 ( Constant ) 한번 값을 할당받으면 그 값이 바뀌지 않는 변수를 의미한다 javascript에서 const 키워드를 사용하여 상수를 선언할 수 있으며 코드의 가독성과 안정성이 향상된다. 한번 값이 할당받으면 변경되지 않음 프로그램 실행 중에 값이 변경 될 수 없음 const 키워드 ..

앞에서 살펴봤었던 외부 파일을 참조한 자바스크립트에대해 좀 더 살펴 보겠다. 외부 링크를 참조할때 스크립트 로딩 방식을 제어하는 속성을 사용한다. 이 종류에는 2가지가 있다 1. async 와 2.defer 속성이다. 주로 defer 속성을 더 많이 사용하지만 알아둬서 나쁠 건 없으니 2가지 모두 소개해보겠다 1.async 속성 html 문서가 파싱 될때 스크립트 파일이 비동기적으로 로드 되도록 한다. 이는 스크립트 로딩이 html 문서의 파싱 과정을 방해하지 않음을 의미한다 async 속성이 사용된 스크립트는 로딩이 완료되는대로 즉시 실행하며 스크립트 실행 순서가 보장되지 않음을 의미한다. 따라서 서로에게 의존하지 않는 독립적인 스크립트에 적합함 좀 더 쉽게 설명해보자면 async 속성은 여러 사람과 ..

HTML과 JavaScript는 웹 페이지를 동적으로 만드는데 핵심적인 역할을 한다. HTML이란? 웹 페이지의 구조를 정의하는 마크업 언어 JavaScript란? 웹 페이지의 동적 기능을 추가할 수 있는 스크립팅 언어 Script 태그 사용 방법 1. HTML 문서내에 script 태그 사용하기 script 태그의 위치는 페이지 로딩 시간과 사용자 경험에 직접적인 영향을 미친다. 현대 웹 개발에서는 페에지의 로딩 속도를 최적화 하기 위해 html 문서 하단에 script 태그를 배치하는것이 일반적이다. HTML과 JavaScript의 만남 2. 외부 JavaScript 파일 참조하기 'async'와 'defer' 속성을 활용하여 외부 스크립트 파일의 로딩 방식을 제어함으로써 사용자 경험을 향상시킨다. ..