이 글은 2026년 1월 22일에 작성된 글입니다.HookReact v16.8부터 도입된 기능으로, 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.리액트에서 제공하는 내장 훅(useState, useEffect, ... ) 과 사용자가 직접 정의할 수 있는 Custom Hooks가 있다. useState: 가장 기본적인 Hook. 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌.useEffect: 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있음.useReducer: useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용.useMemo: 함수형 컴포넌트 내부에서 발생하는 연..

이 글은 2026년 1월 21일에 작성된 글입니다.이벤트사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것.DOM요소에만 이벤트 설정이 가능(컴포넌트에 자체적으로 이벤트를 설정할 수는 없다).예제: 함수형 컴포넌트로 이벤트 구현// src/ex04/EventEx.jsimport React, {useState} from 'react';const EventEx = () => { const [form, setForm] = useState({ username: '', message: '' }); const {username, message} = form; // 이벤트 발생하면 form 변경 const onChange = e => { cons..

이 글은 2026년 1월 21일에 작성된 글입니다.JSXJSX(Javascript Syntax Extension): 자바스크립트 확장 문법. Javascript와 XML/HTML을 합친 것.JSX는 내부적으로 XML/HTML코드를 자바스크립트로 변환하는 과정(번들링)을 거치므로 JSX 코드는 최종적으로 자바스크립트 코드로 출력된다.// JSX 사용한 코드const element = ( Hello, world! )// JSX 사용하지 않은 코드const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!')JSX 장점코드가 더 간결..

이 글은 2026년 1월 19일에 작성된 글입니다.스프레드 구문배열이나 객체에 이용할 수 있는 표기법요소 전개와 요소 모으기arr1 = [1, 2];console.log(arr1); // [ 1, 2 ]console.log(...arr1); // 1 2const summaryFunc = (num1, num2) => console.log(num1 + num2);summaryFunc(arr1[0], arr1[1]); // 3summaryFunc(...arr1); // 3const arr2 = [1, 2, 3, 4, 5];const [num1, num2, ...arr3] = arr;console.log(num1); // 1console.log(num2); // 2console...

이 글은 2026년 1월 16일에 작성된 글입니다.모던 자바스크립트모던 자바스크립트: 현재의 개발 표준과 관행을 따르며, 최신 브라우저와 웹 개발 도구에서 지원되는 자바스크립트 버전 및 기술모던 자바스크립트 특징리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리 혹은 프레임워크를 사용npm, yarn 등의 패키지 관리자 사용주로 ES2016(ES6) 이후의 표기법 사용웹팩 등의 모듈 핸들러 사용바벨 등의 트랜스파일러 사용SPA로 작성SPA*: HTML 파일은 하나만 사용하고 자바스크립트를 이용해 DOM을 바꿔 써서 화면 이동을 구현하는 것HTML은 초기 렌더링만 하고 JS단에서 화면을 계속 바꿔줌var, let, const| | 중복 선언 여부 | 재할당 여부 | 변수 스코프 범위 | 호이스팅 |..

이 글은 2026년 1월 15일에 작성된 글입니다.Form ElementForm Element들과 Element들에 사용할 수 있는 메서드를 배웠다.input / textarea`val()` - 선택한 요소의 값을 가져오거나 새로운 값을 적용select radio / checkbox`eq()` - 선택된 요소들의 집합에서 지정된 인덱스의 요소 하나만 선택`prop()` - 선택한 요소의 상태 속성 값을 가져옴// 선택된 요소 중 1번 인덱스 요소를 찾아서 강제로 checked가 true이게 함.AJAX비동기 방식의 웹 개발 기법사용자 모르게 요청을 주고 받음페이지를 새로고침 하지 않고 페이지의 특정 부분을 요청해서 페이지의 일부만 동적으로 업데이트함서버와 통신하는 동안에도 사용자는 다른 작업을 할 수 있..