javascript & react

13-1 자바스크립트로 무엇을 할까 웹의 요소를 제어합니다 • 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음 • 웹 사이트 UI 부분에 많이 활용 • 예) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴 한 화면에서 탭을 눌러 내용만 바뀌도록 하는

• 변수(variable) : 값이 여러 번 달라질 수 있는 데이터• 상수(constant) : 값을 한번 지정하면 바뀌지 않는 데이터• 영어 문자, 언더스코어(), 숫자를 사용한다• 첫 글자는 영문자, 기호, $기호를 사용한다• 띄어쓰기나 기호는 허용하지 않는다예)

15-1 함수 알아보기 여러 동작을 묶은 덩어리, 함수 함수는 왜 사용할까? 함수 선언 및 호출 15-2 var를 사용한 변수의 특징 변수의 적용 범위 스코프 알아보기 var와 호이스팅 변수의 재선언과 재할당 15-3 let와 const의 등장 let을 사용한 변수

16 자바스크립트와 객체 객체 알아보기 객체란? 자바스크립트의 내장 객체 Array 객체 Array 객체의 메서드 Date 객체 브라우저와 관련된 객체 브라우저와 관련된 객체 알아보기 window 객체의 프로퍼티 window 객체의 메서드 navigator 객체 h

17 문서 객체 모델(DOM) 문서 객체 모델 알아보기 문서 객체 모델이란 DOM 트리 DOM 요소에 접근하고 속성 가져오기 DOM에 접근하기 웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티 속성을 가져오거나 수정하는 getAttribute

만약 name() 함수에서 "유선" 대신 다른 이름 값들을 출력하고 싶다면 어떻게 해야할까?"유선" 내용이 바뀔때마다 함수를 수정해야한다면무척이나 번거로운 일이다.이런 경우에 매개변수를 이용하면 아주 유용함선언적 함수=>익명함수 와 람다함수의 형태로 바꿔보자예) 매개변

변수로서의 함수Functions as Variables화살표의 함수Arrow Functions객체 메서드Object Methods인수로서의 함수Functions as Arguments\-함수를 매개변수로 넘길 수 있다\-함수를 일반적인 변수처럼 매개변수로 넣어주거나 하

DOM(Document Object Model)텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링 하려면 웹문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야한다.https://poiemaweb.com/js-dom

DOM treeDOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다.객체의 트리로 구조화 되어 있기 때문에 DOM tree라 부른다.DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다.요소의

이처럼 HTMLCollection는 실시간으로 Node의 상태 변경을 반영하기 때문에 loop가 필요한 경우 주의가 필요하다. 다음 게시물과 같은 방법으로 회피할 수 있다.반복문을 역방향으로 돌린다.while반복문을 사용한다. 이때 elems요소가 남아있지 않을 때까지

설치하기 >npm install -g create-vite 프로젝트 생성하기 >create-vite my-vue-project(파일명) cd my-vue-project 개발 서버 실행하기 >npm run dev 프로젝트 파일에 들어가서 실행 시켜보니 sh: vit

컴포넌트 구조 리액트의 보편적인 폴더 구조는 아래와 같습니다. -page -components -hooks -utils -constants -store -... 위 보편적인 구조라도 각 폴더 내부에서 컨벤션을 정할 게 정말 많습니다. 특히 매일 가장 많이 생산되는 컴

url=/폴더경로(page.tsx)페이지 만들기각 폴더경로에 페이지 하나씩page.tsxindex.tsxexport 하면서 시작컴포넌트 이름보다 파일 이름이 중요그리고not-found.tsx ( 예외처리 페이지 )네비게이션바(공통)compononents > naviga

javascript에서 HTTP요청을 보내고 응답을 받는데 사용되는 도구.'fetch'는 웹브라우저의 내장 api입니다.별도의 라이브러리 설치할 필요없이 자바스크립트에서 바로 사용가능하다.'fetch'API는 XMLHttpRequest를 대체하는 더 간단하고 강력한 기

상태란 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음.즉 문자열, 배열 객체 등의 형태로 응용 프로그램에 저장된 데이터개발자 입장에서 관리해야하는 데이터들 사앹를 관리하는 방법에 대한 것프로덕트가 커짐에 따라 어려움도 커짐상태들은 시간에 따라 변

이전의 글에서는 Data fetching, updating 을 알아보았는데,이번 글에서는 Caching, Synchronization에 대하여 알아보자.cacheTime : 메모리에 얼마만큼 있을 건지 (해당 시간 이후 GC에 의해 처리, default 5분)stale

점 표기법객체내에 캡슐화되어있는 것에 접근하려면 먼저 점을 입력해야한다.그 다음 접근하고자 하는 항목을 적습니다.간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수 있습니다.다른 객체를 객체 멤버의 값으로 갖는 것도 가능합니다.예를

이 코드에서 'for'문은 여러 개의 이미지 요소들에 클릭 이벤트 핸들러를 설정하기 위해 사용됩니다.이 'for'문은 'image' 배열에 포함된 각 이미지 요소에 대해 반복하면서 클릭 이벤트를 설정합니다.반복적으로 작업하여 수행:여러 이미지에 동일한 작업을 반복해서

useState 는 React 훅으로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다.useState는 두개의 값을 반환하는데, 첫번째 값은 현재 상태 값이고, 두 번째 값은 업데이트하는 함수입니다.사용할 코드는 TypeScript 이기 때문에, 상태 값의 타입을

ChatGPT해당 오류 메시지는 PostCSS 설정에서 특정 플러그인을 로드하는 과정에서 발생한 문제를 나타냅니다. 다음 단계들을 통해 문제를 해결해보겠습니다.프로젝트 설정 확인먼저, 필요한 패키지들이 제대로 설치되어 있는지 확인합니다.패키지 설치필요한 PostCSS