기록하는 공부

1. VSCode를 실행하고 새 터미널 창을 열고 생성하고자 하는 프로젝트 경로로 이동한 후, 아래 명령어를 작성한다. npx create-react-app 생성할프로젝트명 --template typescript 2. VSCode에서 Prettier과 ESLint를 찾아 설치한다. ESLint 란 ? 더보기 ESLint는 JavaScript 코드에서 문제점을 식별하고 예방하는 도구로 이를 통해 일관된 코드 스타일을 유지하고 코드 품질을 향상할 수 있다. ESLint는 설정 파일을 사용하여 린트 규칙을 정의한다. 이 규칙은 코드 스타일, 코드 오류, 보안 문제 등 다양한 측면에서 지원된다. 예를 들어, 함수 정의 시 인자의 이름을 정의하는 것, 변수 선언 시 초기화를 권장하는 것, 반복문에서 변수를 재할당..

Language/Javascript, Typescript, React 2023. 5. 6. 16:08

먼저, 나는 VSCode를 이용해서 프로젝트 코드를 작성하려고 한다. 1. VSCode를 실행시키고 새 터미널을 누른다. 2. 하단에 터미널 창에서 프로젝트를 생성하고자 하는 경로로 이동한다. 이동 시에는 cd 폴더명 명령어를 입력해서 이동이 가능하다. 아니면 파일 탐색기에서 경로를 복사해온 후 cd 복사한 경로 를 입력해도 이동이 가능하다. 복사한 경로를 VSCode 터미널 창에 입력한다. 3. "npx create-react-app my-app --template typescript" 명령어를 입력해 타입스크립트 프로젝트를 생성한다. npx create-react-app my-app --template typescript 4. 생성된 파일들을 살펴보고 실행시켜 본다. 프로젝트 실행 명령어는 npm s..

Language/Javascript, Typescript, React 2023. 5. 4. 21:32

React 설치 후 사용하던 폴더를 닫고 새 react 작업 폴더를 만드려고 했다. 여기저기 구글링을 해보면서 리액트 앱을 만들고 삭제하는 것을 반복하다가 갑자기 어느 순간 src, public 폴더가 생성되지 않고 오직 package.json, yarn.~, node_modulles 폴더만 존재했다. 너무나 당황스러웠지만 구글링을 해보면서 create-react-app을 지웠다가 깔았다가 해보았지만 해결되지 않았다. 그러다가 어떤 방법으로 오류를 해결할 수 있었는데 그 방법을 공유하고자 한다. 오류 해결 방법 #1 create-react-app을 설치했던 경로에서 "npm uninstall -g create-react-app" 명령어를 입력한다. 본인이 작업을 하려고 했던 경로(폴더)에서 "create..

Language/Javascript, Typescript, React 2023. 4. 4. 20:52

강의출처 https://youtu.be/IxydSMI4Qjg useAxios useAxios는 React Hooks 중 하나로, Axios 라이브러리를 사용하여 HTTP 요청을 보내고, 그 결과를 처리할 수 있게 해주는 기능이다. Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 비동기적으로 데이터를 가져올 수 있다. useAxios를 사용하면 Axios를 통해 비동기적으로 데이터를 가져오고, 그 결과를 상태로 저장하여 컴포넌트에서 사용할 수 있다. useAxios는 useState와 useEffect와 같은 방식으로 사용된다. 컴포넌트 내부에서 호출하여, 두 개의 매개변수를 받는다. 첫 번째 매개변수는 Axios에서 사용하는 설정 객체(config)이며, 두 번째 매개변수는 옵션 객체..

Language/Javascript, Typescript, React 2023. 4. 4. 13:59

강의출처 https://youtu.be/WIkZP_8gxm0 useNotification useNotification은 React Hooks의 하나로, 브라우저의 Notification API를 사용하여 웹 페이지에서 알림을 보낼 수 있게 해주는 기능이다. 이를 사용하면 사용자가 브라우저 창을 닫거나 다른 탭으로 이동해 있을 때도 알림을 보낼 수 있어서, 사용자가 페이지 외부에 있을 때에도 중요한 정보를 전달할 수 있다. useNotification은 useState와 useEffect와 같은 방식으로 사용된다. 컴포넌트 내부에서 호출하여, 브라우저에서 Notification 객체를 생성하고, 알림을 보낼 때 사용되는 함수를 반환한다. 예제코드 import React, { useState, useEffe..

Language/Javascript, Typescript, React 2023. 4. 3. 23:42

강의 출처 https://youtu.be/_f6ZnnuE0A0 useScroll useScroll은 React Hook 중 하나로, 스크롤 위치를 추적하고 그에 따라 상태를 업데이트할 수 있게 해주는 Hook이다. 일반적으로 웹 페이지에서 스크롤이 발생하면 페이지의 콘텐츠가 이동하고, 이에 따라 특정한 액션을 취해야 할 때 useScroll Hook을 사용할 수 있다. 예를 들어, 스크롤이 일정 위치에 도달하면 UI 요소를 변경하거나, 페이지 상단에서 스크롤이 발생할 때 스크롤 상단 버튼을 표시하는 등의 작업을 수행할 수 있다. useScroll Hook은 useEffect를 사용하여 구현된다. useEffect는 스크롤 이벤트를 수신하고, 스크롤 위치를 업데이트하여 상태를 변경한다. 이때 useRef ..

Language/Javascript, Typescript, React 2023. 4. 3. 22:49

강의출처 https://youtu.be/TxZBPBCKiHE useFadeIn useFadeIn은 React Hook 중 하나로, 페이지나 요소가 나타날 때 애니메이션과 함께 부드럽게 나타나게 만드는 데 사용된다. useFadeIn Hook은 useEffect Hook을 사용하여 컴포넌트가 마운트될 때, opacity 속성을 이용하여 fade-in 애니메이션을 적용한다. useFadeIn Hook은 사용자가 설정한 duration(지속 시간)과 delay(지연 시간)에 따라 애니메이션을 제어할 수 있다. 아래 예제 코드를 통해 살펴보자 ! 예제코드 import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-..

Language/Javascript, Typescript, React 2023. 4. 3. 20:21

강의출처 https://youtu.be/sY1omh4to3s useBeforeLeave React Hook 중 하나로, 마우스 커서가 브라우저 창을 벗어날 때 실행되는 함수를 등록할 수 있게 해주는 Hook이다. 아래 예제 코드를 보면서 공부해 보자! 예제 코드 import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; const useBeforeLeave = (onBefore) => { const handle = (event) => { const {clientY} = event; if(clientY { document.addEventListener("mouseleave", handle); ret..

Language/Javascript, Typescript, React 2023. 4. 2. 23:01