뉴비벡엔드개발자

react-router-dom React로 구축된 애플리케이션 내에서 라우팅을 관리하기 위해 React 웹 개발에 사용되는 패키지입니다. 이를 통해 개발자는 웹 앱에서 동적 라우팅을 구현할 수 있습니다. 즉, 전체 페이지를 다시 로드하지 않고도 애플리케이션이 브라우저 주소 표시줄의 URL을 기반으로 다양한 구성 요소나 페이지를 표시할 수 있습니다. 이 패키지는 다양한 구성 요소 간 탐색이 기존 다중 페이지 웹 사이트를 모방하는 단일 페이지 애플리케이션(SPA)을 구축하는 데 도움이 됩니다.사용예시 App.jsimport React from "react";import { BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";im..

e.target: 처음에 이벤트를 트리거한 요소를 나타냅니다. 이는 이벤트가 발생하도록 만든 가장 깊이 중첩된 요소입니다. 예를 들어, 내부에 아이콘이 있는 버튼이 있고 아이콘을 클릭하면 e.target은 버튼이 아닌 아이콘 요소 자체가 됩니다.   e.currentTarget: 현재 이벤트 리스너가 붙어 있는 요소를 의미합니다. 이 속성은 현재 이벤트를 처리하고 있는 요소를 참조하므로 이벤트 전파(버블링 또는 캡처 단계) 중에 특히 유용합니다. 동일한 예를 사용하여 이벤트 리스너가 버튼에 연결되어 있으면 버튼 내부의 아이콘을 클릭했는지 여부에 관계없이 'e.currentTarget'이 버튼이 됩니다.   예시Click me icon 결과

State 컴포넌트의 상태를 관리하는 데이터. 사용자의 상호작용이나 시간의 흐름에 따라 변경될 수 있는 데이터를 포함. State의 변경은 보통 이벤트 핸들러나 다른 입력을 통해 발생하며, 변경이 발생하면 컴포넌트가 자동으로 다시 렌더링됩니다. 컴포넌트 내부에서 관리: State는 컴포넌트 내부에서 선언되고 변경됩니다. 컴포넌트의 private 데이터로서 외부에서 직접 접근할 수 없습니다. 동적 UI: State를 사용하여 동적인 사용자 인터페이스를 만들 수 있습니다. setState 함수: 클래스 컴포넌트에서는 setState 메서드를 사용해 state를 업데이트하고, 함수 컴포넌트에서는 useState 훅을 사용합니다. prevState React의 상태 업데이트는 비동기적으로 처리될 수 있으며, 특..

function App() { let [num, setNum] = useState(1); const [input, setInput] = useState(''); const inputChange = (e) => { setInput(e.target.value); } return ( ); }

1. Node.js 설치 Node.js — Download Node.js® (nodejs.org) Node.js — Download Node.js® Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Create React App npx create-react-app my-app 이 명령어는 my-app 이라는 디렉토리를 생성하고, 필요한 모든 의존성을 설치한 후 기본 React 앱을 설정합니다. 3. 프로젝트 디렉토리로 이동 및 서버 시작 cd my-app npm start

pm2는 서버가 꺼지거나 프로세스가 종료되거나 코드가 수정되었을 때 자동으로 재시작 해줌 1. pm2 설치 npm i pm2 -g 2. 실행 pm2 start main.js pm2 start main.js --watch --ignore-watch="data/*" --no-daemon --watch ; 수정할 때 마다 자동으로 재시작 --ignore-watch : 파일 수정, 추가 시 안껏다 켜짐 --no-daemon : 로그 확인 pm2 start main.js --watch --ignore-watch="data/* lib/*" --no-daemon -ignore-watch 디렉토리를 여러개 하고 싶으면 디렉토리를 여러개 하고 싶으면 "data/* lib/*" 이런식으로 하면 됨. 3. 종료 종료하고 싶..

패키지를 import했는데 Cannot find module ' ' or its corresponding type declarations. 해결방법 GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions. GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions. The repository for high quality TypeScript type definitions. - DefinitelyTyped/DefinitelyTyped github.com 사이트..

js 소스코드에 주석으로 @ts-check 를 넣으면 typescript 처럼 소스코드를 체크해줌 // @ts-check vscode에서 /** 하고 엔터를 하면 자동완성이 되는데 파라미터와 return 타입을 정할 수 있다. /** * Initializes the project * @param {object} config * @param {boolean} config.debug * @param {string} config.url * @returns boolean */ export function init(config) { return true; } init 함수를 사용할 때 설명을 볼 수 있다.

ts파일에서 js사용하기 tsconfig.json파일 compilerOptions안에 "allowJs": true 넣으면 .ts 파일안에 js코드 사용가능하다.

Typescipt에서의 차이 추상메서드의 예시는 아래와 같다 abstract class Test { constructor( protected nickname: string, protected level: number ) { } abstract attack(): void abstract guard(): void } class Player extends Test { attack(): void { console.log("Attack"); } guard(): void { console.log("shiled") } } 다음은 인터페이스 예시이다. interface Test2 { nickname:string, level:number, attack():void, guard():void } class Player2 i..