개발노트

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

※React App 배포를 시작하기 전, 아래 링크에 들어가셔서 순서대로 진행 부탁드리겠습니다. https://mroh1226.tistory.com/84 GitHub Page 무료 호스팅 이용하기 1. GitHub Repository에 Web 프로젝트를 커밋, 푸시합니다. (리포짓토리를 Public으로 설정) 2. 설정에서 Repository의 Name을 설정합니다(Name이 도메인 뒷 주소가 될 예정) 3. Pages로 이동하여 위에서 생성한 Rep mroh1226.tistory.com React App GithubPage 설정하기. 1. 위 준비가 끝났다면 터미널로 돌아가서 아래와 같이 명령어를 작성하여 패키지를 설치해줍니다. npm install gh-pages 2. 설치가 완료되었다면, packa..

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 (선택 사항): 배열의 현재 ..

fetch fetch() 함수는 JavaScript에서 네트워크 요청을 보내고 응답을 받을 수 있는 기능을 제공하는 웹 API입니다. fetch() 함수를 사용하여 서버와 데이터를 주고받을 수 있습니다. fetch(url) .then(response => { // 응답을 처리하는 코드 }) .catch(error => { // 에러 처리 코드 }); fetch() 함수는 첫 번째 인수로 요청을 보낼 URL을 받습니다. 요청을 보내면 Promise 객체가 반환됩니다. 이후 then() 메서드를 사용하여 응답을 처리하거나 catch() 메서드를 사용하여 에러를 처리할 수 있습니다. Fetch()로 JSON 데이터 받기 fetch('https://api.example.com/data') .then(respon..

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

Create React App은 React 애플리케이션을 빠르고 간단하게 설정할 수 있는 공식적인 도구입니다. 이 도구는 React 애플리케이션을 구성하는 데 필요한 모든 설정 및 빌드 작업을 자동화하여 개발자가 더욱 편리하게 개발할 수 있도록 도와줍니다. Create React App을 사용한 React JS개발 특징 제로 구성: Create React App은 초기 설정과 빌드 설정에 대한 복잡한 작업을 최소화합니다. 개발자는 바로 React 애플리케이션을 작성하고 실행할 수 있습니다. 설정 파일을 작성하거나 환경을 구성할 필요가 없습니다. 개발 서버: Create React App은 개발 서버를 제공하여 애플리케이션을 개발하는 동안 빠르고 쉽게 변경 사항을 확인할 수 있습니다. 파일이 수정될 때마다..

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

State에 들어가기 앞서 구조 분해 할당을 이해해야합니다. Dstructuring assignment(구조 분해 할당) 구조 분해 할당을 통해 배열이나 객체의 요소를 변수로 추출할 수 있습니다. 이때 추출된 변수들은 할당 연산자(=)를 사용하여 우측의 배열이나 객체에서 해당 위치 또는 속성의 값을 가져옵니다. 구조 분해 할당은 배열이나 객체의 일부분만을 추출할 수도 있습니다. 이때는 추출하지 않을 요소는 쉼표(,)로 무시하면 됩니다. 1. 배열 구조 분해 할당 (Array) const array = [1, 2, 3]; // 기존 방식 const a = array[0]; const b = array[1]; const c = array[2]; // 구조 분해 할당 const [a, b, c] = array..

forEach는 배열의 각 요소에 대해 반복적으로 작업을 수행하기 위한 배열 메서드입니다. forEach 메서드는 콜백 함수를 사용하여 배열의 각 요소에 대해 작업을 수행합니다. 1. forEach 사용법 array.forEach(callback(currentValue, index, array), thisArg); array: 반복 작업을 수행할 배열입니다. callback: 각 요소에 대해 실행될 콜백 함수입니다. currentValue: 현재 처리 중인 요소의 값입니다. index (선택적): 현재 처리 중인 요소의 인덱스입니다. array (선택적): forEach 메서드를 호출한 배열입니다. thisArg (선택적): 콜백 함수 내에서 this로 사용할 객체입니다. 2. 다양한 forEach 작성..