HTML 문서에서 최상의 객체는 window 이다. html 문서에서 위의 코드는 아래와 같다.순수 JavaScript 문서 JS 파일에서객체 생성 하기기본형식var 학생 = {}console.log(typeof 학생); 변수와 함수 추가하기var 학생 = { name: 'kim', sayHi: function () { console.log('Hi'); }} 객체에 함수를 추가하는 방식 표현 2가지 sayHi: function () { console.log('Hi'); }, sayHi() { console.log('Hi'); } 객체 찍어내기function Student(name) { this.name = name;..
React 에서 데이타의 흐름은 부모 컴포넌트에서 자식 컴포넌트로 흐른다. 반대로는 불가능하다.이말은 부모는 자식을 변화시킬 수 있지만, 자식은 부모를 변화 시킬 수 없다. 규모가 커지고 복잡해진다면? 혹시 자식이 부모를 변화시킬 수 있다면? 화면 랜더링은 너무나 복잡해진다. 전역 변수를 선언하고 각각의 컴포넌트에서 확인하면 간단하지 않을까?하지만 해결 해야할 중요한 문제가 있다? 전역 변수를 참조하는 컴포넌트가 변수의 변화를 자동으로 감지해서 화면을 갱신해야 한다.즉 이벤트를 구독하고 화면을 갱신하는 프로그램을 제작해야 한다. 이러한 문제를 해결해 주는것이 Redux 모듈이다. 우선 저장소가 필요하다./redux/store.jsimport React from 'react';import { config..
설치npm install react-router-domimportimport { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'; 사용법 (v6부터 Switch 에서 Routes로 변경됨) Home About Contact } /> } /> } />
React 학습 기본 단계JavaScript 기본기 다지기:React는 JavaScript 기반이므로, JavaScript 문법과 개념을 충분히 이해하고 있어야 합니다.ES6+ 문법 (let, const, arrow functions, destructuring, spread operator 등)을 학습합니다.React 설치 및 환경 설정:Node.js와 npm을 설치합니다.Create React App 도구를 사용하여 React 프로젝트를 초기화합니다.JSX 문법 이해하기:JSX는 JavaScript를 확장한 문법으로, HTML과 비슷하게 생겼지만 JavaScript 코드 내에서 HTML을 작성할 수 있게 합니다.JSX의 기본 문법과 사용 방법을 익힙니다.컴포넌트 이해하기:React의 핵심은 컴포넌트입니..
useMemo 훅은 특정 계산을 메모이제이션하여 성능을 최적화하는 데 사용됩니다. 이 훅을 사용하면 불필요한 계산을 피할 수 있습니다. 즉, 종속성 배열이 변경되지 않는 한 이전 계산 결과를 재사용합니다 import React, { useMemo } from 'react';const MyComponent = ({ items }) => { const computedValue = useMemo(() => { // items 배열에 대한 복잡한 계산 수행 return items.reduce((acc, item) => acc + item.value, 0); }, [items]); return ( Computed Value: {computedValue} );}; 위의 예제..
reduce 메서드는 배열의 모든 요소를 단일 값으로 합치거나 누적할 때 유용합니다.reduce 는 map 함수처럼 배열의 모든 요소를 루프 돈다. 영어 단어의 뜻처럼 간단하게 줄여서라는 의미로 좀더 간단하게 처리할 수 있다. 특징은 배열 요소를 한번씩 돌때, 반환된 값을 다음 루프에서 확인 할 수 있다. 기본문법 2개의 기본 매개 변수와 2개의 추가 매개 변수(옵션)array.reduce(callback(accumulator, currentValue[, index[, array]])[, initalValue]) arrumulator : 콜백의 반환값을 누적함 -> 이전 콜백 함수의 반환값currentValue : 현재의 배열요소.index (옵션) : 배열의 인텍스값.array (옵션) : reduce..
일반적인 자바스크립트 함수function add(a) { return a;}기본문법const functionName = (parameter1, parameter2) => { // function body return someValue;}; 두 숫자를 더하는 화살표 함수const add = (a, b) => { return a + b;};console.log(add(2,3)); 단축문법 단일 표현식인 경우 중괄호{}와 return 생략 가능const add = (a,b) => a+b; 매개 변수가 하나인 경우 괄호 생략 가능const square = a => a * a; 매개 변수가 없는 경우 빈 괄호() 를 사용한다.const greet = () => console.log('Hello World!'..
npm run build 명령어는 React 애플리케이션을 배포할 준비가 된 최적화된 형태로 빌드합니다. 이 명령어를 실행하면, 프로젝트 디렉토리의 루트에 build라는 폴더가 생성되고, 이 폴더 안에는 애플리케이션을 배포할 수 있는 정적 파일들이 포함됩니다. 다음은 npm run build 명령어가 하는 주요 작업들입니다:npm run build의 주요 작업코드 번들링 (Bundling):Webpack과 같은 번들러를 사용하여 모든 자바스크립트, CSS, 이미지 파일 등을 하나의 파일이나 여러 개의 파일로 결합합니다.코드가 번들링됨으로써 브라우저가 애플리케이션을 로드할 때 필요한 HTTP 요청의 수가 줄어들어 성능이 향상됩니다.코드 압축 (Minification):JavaScript와 CSS 코드를 압..
는 React에서 개발 모드에서 사용되는 특별한 컴포넌트로, 애플리케이션에서 잠재적인 문제를 감지하는 데 도움을 줍니다. 이는 특히 개발 환경에서 유용하며, 프로덕션 빌드에서는 영향을 미치지 않습니다.주요 기능오래된 API 사용 감지:React는 시간이 지나면서 일부 API를 더 이상 사용하지 않도록 권장하거나 제거할 수 있습니다. StrictMode는 이러한 오래된 API를 사용하는 코드를 감지하고 경고를 표시합니다.부실한 생명주기 메서드 감지:componentWillMount, componentWillReceiveProps, componentWillUpdate와 같이 React 16 이후로 사용을 권장하지 않는 생명주기 메서드의 사용을 감지하고 경고를 표시합니다.함수 컴포넌트 내에서의 부적절한 사용 ..
Node.js는 서버 사이드 애플리케이션 개발을 위해 설계된 오픈 소스, 크로스 플랫폼 런타임 환경입니다. 주요 특징1. 비동기 이벤트 드리븐 구조: Node.js는 비동기 이벤트 드리븐 구조를 사용하여 동시성을 높입니다. 이를 통해 많은 클라이언트 요청을 효율적으로 처리할 수 있습니다.2. V8 엔진 기반: Node.js는 Google의 V8 JavaScript 엔진을 사용하여 JavaScript 코드를 실행합니다. 이 엔진은 매우 빠르고 효율적입니다.3. 단일 스레드 이벤트 루프: Node.js는 단일 스레드 이벤트 루프를 사용하여 동작합니다. 이는 I/O 작업이 비동기적으로 처리되므로 성능이 매우 좋습니다.4. NPM (Node Package Manager): Node.js는 방대한 모듈 라이브러리..
// 페이지 언로드 시 스크롤 위치를 저장 window.addEventListener('beforeunload', function() { localStorage.setItem('scrollPosition', window.scrollY); }); // 페이지 로드 시 스크롤 위치를 복원 window.addEventListener('load', function() { if (localStorage.getItem('scrollPosition') !== null) { window.scrollTo(0, localStorage.getItem('scrollPosition')); localStorage.removeItem('scrol..
