공부 기록용 공부 기록용

리액트 개발에서는 화면에 표시하는 데이터나 길이가 변하는 상태 등을 모두 State로 관리한다.리액트 훅useState const [State 변수, State 업데이트 함수] = useState();const [State 변수, State 업데이트 함수] = useState(초깃값);src/App.jsximport { useState } from "react";import { ColoredMessage } from "./components/ColoredMessage";export const App = () => { // State 정의 // const [State 변수, State 업데이트 함수] = useState(초깃값); const [num, setNum] = useState(0); // ..

PropsProps는 컴포넌트에 전달하는 인수 같은 것으로 컴포넌트는 전달받은 Props에 따라 표시하는 스타일과 내용을 변경한다.동적으로 컴포넌트를 재사용할 수 있도록 Props로 조건을 전달한다.아래와 같이 style을 작성하면 번거롭고 코드가 길어진다.src/App.js// 다른 파일에서도 사용할 수 있도록 export 한다.// export 한것을 import 하면 다른 파일 안에서 사용할 수 있다.export const App = () => { // 버튼 클릭 시 실행되는 함수 정의 const onClickButton = () => { alert("콘서트 가고 싶다!"); }; // CSS 객체 const contentStyle = { color: "blue", font..

1. JSX 표기법 JSX 표기법에서는 함수의 반환 값을 HTML 태그를 기술할 수 있고 그것을 컴포넌트로 다뤄 화면을 구성한다.public/index.htmlsrc/index.js// react-dom 라이브러리에서 ReactDOM이라는 이름으로 모듈을 import 한다.import ReactDOM from "react-dom";// 함수 정의const App = () => { // return null; return 두밧두 와리와리;};// 첫번째 인수 render 대상, 두번 째 인수 render 위치// 리액트에서는 함수명을 HTML과 같이 태그로 감싸서 컴포넌트로 다룰 수 있다.ReactDOM.render(, document.getElementById("root"));return 이후 행이 ..

index.html Hello world! 영역 1 입니다. 영역 2 입니다. style.csshtml { height: 100%; width: 100%;}.container { border: solid 1px #ccc; padding: 16px; margin: 8px;}script.js// selector로 요소 얻기// getElementById 사용const title1 = document.getElementById("title");console.log(title1);// querySelector 사용const title2 = document.querySelector("#title");console.log(title2);// 클래스명으로 엘리먼트 얻기 const..

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 동작을 의미합니다. 이 동작은 의도치 않은 버그와 예측하기 어려운 코드 동작을 초래할 수 있기 때문에 문제가 될 수 있습니다.1. 변수 값의 예측 불가var로 선언된 변수가 호이스팅되면, 코드에서 변수가 선언된 위치와 관계없이 최상단에서 선언된 것처럼 동작합니다. 이로 인해 예상치 못한 undefined 값이 발생하거나, 의도와 다른 동작이 나타날 수 있습니다.console.log(name); // 출력: undefinedvar name = "Alice";console.log(name); // 출력: "Alice"2. 재할당과 재선언 문제var로 선언된 변수는 같은 스코프 내에서 여러 번 재선언할 수 있..

1. const, let을 이용한 변수 선언 var 변수를 선언 시 문제점1) 변수를 덮어 쓸 수 있다.2) 다시 선언(재선언)할 수 있다.3) 함수 스코프와 호이스팅 (Function Scope & Hoisting)var는 블록 스코프를 무시하고 함수 스코프만 따른다.이는 if, for 같은 블록 내에서 선언된 변수가 블록 외부에서도 접근 가능하게 된다.또한 var로 선언된 변수는 호이스팅(hoisting)이라는 메커니즘에 의해 변수 선언이 스코프의 최상단으로 끌어올려진다.function test() { if (true) { var number = 10; // 블록 내에서 선언 } console.log(number); // 출력: 10 (블록 밖에서 접근 가능)}test()..

1. Node.js LTS 설치https://nodejs.org/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org npm(Node Package Manager): Node.js의 기본 패키지 관리자로 자바의 maven, gradle 같은 의존성 관리 도구 (패키지 다운로드하고 의존성 관리하는 것, 라이브러리를 다운 받아서 빌드해주는 도구)npx: npm 버전 5.2.0부터 기본으로 포함되어 있다. npx는 특정 Node.js 패키지를 설치하지 않고도 한 번 실행할 수 있도록 도와준다. npm -> 라이브러리를 다운 - 빌드 - 프로젝트 3개(로..