개발노트

TypeScript TypeScript는 정적 타입을 지원하는 프로그래밍 언어로서, 자바스크립트의 상위 집합(superset)입니다. 마이크로소프트에서 개발한 오픈소스 언어로, JavaScript 코드를 TypeScript로 변환하여 사용할 수 있습니다. TypeScript는 JavaScript의 기능을 모두 포함하면서 타입 시스템과 몇 가지 새로운 기능을 추가하여 개발자들이 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있도록 돕습니다. 사용이유 개발자의 의도와 다르게 실행되거나, JavaScript 특성상 컴파일을 하기전에 오류를 잡지 못하기 때문에(JS는 컴파일 후에 오류가 발생 했음을 알려주는 Runtime 오류만 나옴) TypeScript를 사용하여 Type을 정해주고 오류를 컴파일 전에 미리 ..

React Router React v6부터는 문법 변동 사항이 있습니다. - 참고링크: https://reactrouter.com/en/6.12.1 Home v6.12.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com React Router 패키지 설치하기. React Router는 react-router-dom이라는 패키지로 제공되므로, 프로젝트 디..

map() map()은 JavaScript 배열에서 사용되는 메서드로, 배열의 각 요소를 순회하면서 각 요소에 대해 지정된 동작을 수행하고 그 결과를 새로운 배열로 반환합니다. map()은 원본 배열을 변경하지 않고 새로운 배열을 생성합니다. array.map((currentValue, index, array) => { // 동작 수행 return transformedValue; }); map()은 주어진 함수를 배열의 각 요소에 대해 순차적으로 호출하고, 각 요소에 대해 함수의 반환 값을 새로운 배열에 저장합니다. 그리고 최종적으로 새로운 배열을 반환합니다. array: map()을 호출하는 배열 자체입니다. currentValue: 배열의 현재 요소 값입니다. index (선택 사항): 배열의 현재 ..

useEffect useEffect는 React의 훅(Hook) 중 하나로, 컴포넌트가 렌더링될 때나 특정 상태가 변경될 때 특정 작업을 수행할 수 있도록 도와줍니다. useEffect를 사용하여 컴포넌트의 생명주기 메서드나 사이드 이펙트 로직을 작성할 수 있습니다. import React, { useEffect } from 'react'; function MyComponent() { useEffect(() => { // 컴포넌트가 마운트될 때 실행되는 작업 console.log('컴포넌트가 마운트됨'); return () => { // 컴포넌트가 언마운트될 때 실행되는 작업 (정리(clean-up) 함수) console.log('컴포넌트가 언마운트됨'); }; }, []); useEffect(() =>..

Props ReactJS에서 props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터를 나타냅니다. Props는 컴포넌트 간에 데이터를 효율적으로 전달하고 상태를 공유하는 데 사용됩니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 일방적으로 전달됩니다. 부모 컴포넌트에서 자식 컴포넌트로 전달된 props는 자식 컴포넌트 내에서 읽기 전용으로 사용됩니다. 즉, 자식 컴포넌트는 props 값을 변경할 수 없고, 오로지 읽기만 가능합니다. Props를 사용하여 컴포넌트에 데이터를 전달할 수 있습니다. 이 데이터는 문자열, 숫자, 불리언, 객체, 배열 등 다양한 형태일 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때, 자식 컴포넌트에서 해당 props를 사용하여 UI를 동적으로..

preventDefault() preventDefault는 이벤트의 기본 동작을 취소하는 메서드입니다. 이벤트가 발생했을 때 기본 동작을 수행하지 않도록 막는 데 사용됩니다. 일반적으로, 웹 페이지에서 발생하는 이벤트(예: 링크 클릭, 폼 제출 등)는 기본 동작이 정의되어 있습니다. preventDefault 메서드는 이벤트 객체의 메서드로 호출됩니다. 일반적으로 이벤트 핸들러 함수 내에서 사용됩니다. 로그인 위의 예시에서 handleSubmit 함수는 submit 이벤트를 처리하는 핸들러입니다. event.preventDefault()를 호출하여 기본 동작인 폼 데이터의 서버 전송과 페이지 새로고침을 중지시킵니다. 그 후, 폼 데이터를 수집하고 처리하는 등의 추가 동작을 수행할 수 있습니다. 이를 위해..

로컬 스토리지(Local Storage)는 웹 브라우저에서 제공하는 클라이언트 측 웹 스토리지 기능으로, 작은 데이터를 사용자의 로컬 컴퓨터에 영구적으로 저장할 수 있습니다. 자바스크립트의 localStorage 객체를 사용하여 로컬 스토리지에 데이터를 저장하고 검색할 수 있습니다. 1. 값 저장 // 로컬 스토리지에 데이터 저장 localStorage.setItem('username', 'John'); // 객체 형태의 데이터 저장 var user = { name: 'Jane', age: 25, }; localStorage.setItem('user', JSON.stringify(user)); 위의 코드에서 setItem 메서드를 사용하여 'username' 키로 'John' 값을, 'user' 키로 u..

일정시간 간격을 두고 function을 호출해야할 때가 있습니다. 일정 시간에 주기적으로 호출하려고한다면 setInterval() 메서드를 사용하고, 일정시간 뒤에 한번만 호출하길 원한다면 setTimeout() 메서드를 사용하면 됩니다. 1. setInterval(function, delay); 일정시간 간격으로 호출하기 function sayHello() { console.log('안녕하세요!'); } setInterval(sayHello, 1000); // 1초마다 sayHello 함수 호출 위의 코드에서 sayHello 함수는 1초마다 한 번씩 호출됩니다. 웹 브라우저의 개발자 도구 콘솔에는 '안녕하세요!'가 매 초마다 출력될 것입니다. clearInterval() 메소드로 타이머 취소하기 var..

document 객체. document는 웹 페이지를 구성하는 HTML 문서를 나타내는 객체입니다. 웹 브라우저에서 HTML 문서가 로드되면, 브라우저는 문서를 파싱하여 document 객체를 생성합니다. 이 객체는 웹 페이지에 존재하는 HTML 태그, CSS 스타일, JavaScript 코드 등 모든 정보에 접근하고 조작할 수 있도록 합니다. document 객체는 HTML 문서의 모든 요소를 참조할 수 있습니다. 예를 들어, document.getElementById() 메서드를 사용하여 문서 내에 특정 ID를 가진 요소에 접근할 수 있습니다. 또한, document.getElementsByTagName() 메서드를 사용하여 문서 내에 특정 태그 이름을 가진 요소에 대한 참조를 가져올 수도 있습니다...

자바스크립트에서 함수는 코드 블록으로서 재사용 가능한 작업 단위를 정의하는 데 사용됩니다. 함수를 사용하면 코드를 모듈화하여 관리하기 쉽게 만들고, 코드의 가독성을 높이고, 코드의 재사용성을 높일 수 있습니다. 함수는 특정한 작업을 수행하거나 값을 반환하는 데 사용될 수 있습니다. 기본적인 Function 작성법. function addNumbers(a, b) { var sum = a + b; return sum; } var result = addNumbers(3, 5); console.log(result); // 8 출력 위 예제는 addNumbers 함수는 a와 b라는 두 개의 Parameter(매개 변수) 를 받고, 이를 더한 값을 Return 합니다. (함수를 통해 값을 다른 변수에 저장하고 싶다..