React Hook Form React Hook Form React에서 form의 값을 쉽게 검증할 수 있게 해 주는 라이브러리 적은 양의 코드를 사용 npm install react-hook-form을 통해 설치 useForm hook을 통해 register, handleSubmit 등의 메소드를 꺼내서 사용 가능 register: 특정 컴포넌트에 대한 값 검증 규칙을 등록해 줌 handleSubmit: form의 데이터를 제출할 때 사용되는 메서드, 값에 대한 validation을 수행 References https://www.react-hook-form.com/

Create React App TypeScript Create React App TypeScript Create React App을 통해 react app을 만드는 경우, javascript 대신 typescript를 이용하고 싶을 때가 있음 새 프로젝트를 만드는 경우, 다음과 같이 creat-react-app 명령어 뒤에 --template typescript를 붙이기만 하면 됨 npx create-react-app my-app --template typescript 다만 이미 create react app으로 프로젝트를 만든 경우에 변경하고 싶다면, 다음과 같이 추가적인 패키지를 설치해 줘야 함 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 이후 js 파일을 ts, jsx 파일을 tsx 파일로 변경하면 됨 References https://create-react-app.

JSX JSX Javascript를 확장해서 XML을 추가한 문법 (공식 js 문법은 아님) React element를 생성하며, babel이 이를 자바스크립트로 변환 다음과 같이 xml로 내용을 감싸는 형태로 사용 js 코드를 사용하기 위해서는 {} 로 감싸면 됨` const name = "John Doe"; const elemnt = <h1>Hello, {name}</h1>; const getGreeting = (user) => { if (user) { return <h1>Hello, {user}</h1>; } return <h1>Hello, Stranger</h1>; }; JSX에서 css class를 사용하고 싶은 경우, className이라는 용어로 사용해야 함 References https://ko.

React State React State 컴포넌트 내부에서 변경 가능한 데이터를 관리할때 state를 사용 props와의 차이점은, props는 컴포넌트 내부에서 데이터 변경 불가 매개변수처럼 전달만 됨 보통 동적인 데이터, 사용자의 입력에 따라 달라지는 데이터를 다룰 때 주로 사용됨 const [var, setVar] = useState("default")와 같이 useState를 이용해 정의 var = 3 과 같이 사용하지 않고, setVar(3)과 같이 사용 References https://onlyfor-me-blog.tistory.com/463 https://lakelouise.tistory.com/260 https://goddaehee.tistory.com/301

Create React App으로 React 설치 Create React App으로 React 설치 React로 SPA를 만들기 위해 사용하는 도구 Node >= 6 이상 필요하며, npm 및 npx를 사용하는 방법을 통해 설치 npm 사용 npm install -g create-react-app create-react-app my-app cd my-app npm start npx 사용 npx create-react-app my-app cd my-app npm start References https://reactjs-kr.firebaseapp.com/docs/installation.html#creating-a-new-application https://github.com/facebookincubator/create-react-app#create-react-app-

npm 및 설치 npm 및 설치 Node Package Manager의 약자로, 자바스크립트 패키지 매니저 세계에서 가장 큰 소프트웨어 저장소이기도 함 설치 및 관리에 CLI를 사용 Node.js를 설치할 때 같이 설치되며, node.js 설치에는 nvm을 사용 설치 예시 nvm install 16 nvm use 16 npm -v References https://poiemaweb.com/nodejs-npm https://www.w3schools.com/whatis/whatis_npm.asp https://github.com/nvm-sh/nvm

Axios Fetch API 요청 라이브러리 자바스크립트에서 API 요청을 보낼 경우 Axios 혹은 Fetch라는 라이브러리 사용 두 방식에는 차이점 존재 Fetch ES6부터 생긴 자바스크립트 내장 라이브러리 별도의 설치가 필요 없음 구형 브라우저에서는 지원하지 않음 데이터를 JSON으로 변환해주는 과정이 필요하는 등 axios에 비해 기능이 부족 Axios 외부 라이브러리로, npm 등을 이용해서 설치해야 함 구형 브라우저에 대한 지원이 뛰어남 Response의 timeout에 대한 처리 방법 존재 자동으로 JSON 변환을 지원해 주는 등 기능이 많고, response를 다루기 쉬움 XMLHttpRequest 객체를 이용함 References https://tlsdnjs12.

Vue Router Example Vue Router Example vue.js에서 router를 사용하는 방법. vue3 및 vue-router-4를 기준으로 설명 Composition API 사용 src/routes/index.js history에서 hash mode 혹은 history mode 설정 가능 import { createRouter, createWebHistory } from "vue-router"; import Component1 from "../components/Component1"; import Component2 from "../components/Component2"; export default new createRouter({ history: createWebHistory(`${YOUR_PUBLIC_PATH}`), routes: [ { path: "/", component: Component1 }, { path: "/path", component: Component2 }, ], }); src/main.js import { createApp } from "vue"; import App from ".

Vue Github Pages Vue-cli로 만든 프로젝트에서 github pages를 이용해 배포하는 법 Vue 프로젝트 내에 vue.config.js 파일을 생성하고 publicPath 항목과 outputDir 항목을 입력 publicPath: 루트 도메인으로부터의 경로를 나타내는 항목. 레포지토리 이름을 입력하면 됨 outputDir: 빌드된 파일의 저장 경로를 나타내는 항목. Github pages를 이용하기 위해서는 "docs"라고 입력하면 됨 다음은 실제 vue.config.js 파일 예시 const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, publicPath: "/{YOUR_REPOSITORY_NAME}", outputDir: "docs", }); npm run build를 통해 프로젝트 빌드 다음과 같이 docs 폴더가 생성됨을 확인할 수 있음 깃허브 repository에 push

Vue Router Vue Router Vue.js 에서 페이지간 이동을 제공해주는 공식 라이브러리 페이지를 이동할 때 실제로 DOM을 다시 그리지는 않고 컴포넌트를 갱신함 :를 이용해 동적인 주소를 라우팅하는 dynamic routing 가능 Ex) path: "/users/:uid"로 라우팅을 설정한 경우 /users/37와 같은 경로를 라우팅 가능 Vue router은 mode라는 속성을 가지고 있고, mode에 따라 브라우저에 표현되는 URL이 다름 Hash mode: url에 #가 붙음, SEO 불가능, 서버 통신 불필요 History mode: url에 #가 안 붙음, SEO 가능, 서버 통신 필요 References https://velog.