공부 기록용 공부 기록용

[React] GitHub Pages에 배포하기 (velog.io) [React] GitHub Pages에 배포하기오늘은 간단한 리액트 페이지를 GitHub Pages에 배포하는 방법에 대해 알아보겠습니다. 당연하겠지만, 서버가 필요한 페이지는 따로 서버를 연결해주어야하니 여기선 다루지않겠습니다.혹시 몰라velog.io

채찍피티 왈`react-router-dom`은 React 애플리케이션에서 클라이언트 사이드 라우팅을 쉽게 구현할 수 있게 도와주는 라이브러리입니다. 페이지 간 이동이나 URL 변화를 관리할 수 있게 해주며, 이를 통해 SPA(Single Page Application)에서도 페이지 전환과 같은 사용자 경험을 제공할 수 있습니다. 예를 들어, 사용자가 특정 경로로 이동하면 해당 경로에 맞는 컴포넌트를 렌더링하고, 뒤로 가기나 앞으로 가기와 같은 브라우저의 내비게이션 기능도 지원합니다. 이 라이브러리를 사용하면, 브라우저의 주소창에 있는 URL에 따라 서로 다른 화면을 렌더링하거나, `Link` 컴포넌트를 이용해 화면 간의 이동을 구현할 수 있습니다. 따라서 `react-router-dom`은 SPA를 만들..

나의 할일을 입력 태그에 작성하고 Add To Do 버튼을 누르면 할일 리스트에 추가되면서 리 랜더링되는 간단한 투두리스트이다. 중요한 부분은 Submit 이벤트를 form 태그에 걸어두고 제출 이벤트가 감지되면 서버로 보내지 않고 왜냐하면 보낼 서버가 없음. 할일 목록을 저정하는 toDos 에 추가하고 li 태그로 리 랜더링한다.  Add To Do# 제출 이벤트를 감지해서 const onSubmit = (event) => { # 고유 동작을 중지시킨다.(submit 을 중지) event.preventDefault(); if (toDo === "") { return; } # [1, ...] -> [1,2,3,4] 으로 리스트가 반환된다. 유용함! ..

지난 시간까지 리액트에서 컴포넌트를 재 랜더링할때 해당 컴포넌트의 모든 코드를 실행해 UI 를 변경했었다. 하지만 이는 불필요한 부분까지 다시 실행시켜 자원을 낭비하기 때문에 useEffect 를 사용하여 이를 줄여볼 것이다.import Button from "./Button";import styles from "./App.module.css";import { useState, useEffect } from "react";function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); co..

지난 시간까지 리액트에서 컴포넌트를 재 랜더링할때 해당 컴포넌트의 모든 코드를 실행해 UI 를 변경했었다. 하지만 이는 불필요한 부분까지 다시 실행시켜 자원을 낭비하기 때문에 useEffect 를 사용하여 이를 줄여볼 것이다.import Button from "./Button";import styles from "./App.module.css";import { useState, useEffect } from "react";function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); co..

Button.js// Button 컴포넌트를 정의합니다. 이 컴포넌트는 props로 'text'를 받아서 버튼에 표시합니다.function Button({text}) { // JSX를 사용하여 버튼 요소를 반환합니다. 버튼 요소 안에 props로 전달된 'text'가 표시됩니다. return {text};}// Button 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냅니다.export default Button; App.jksimport Button from "./Button";function App() { return ( Welcome back!!! );}export default App; 컴포넌트를 따른 js 파일로 분리해서 작성한것인데 아직..

컴포넌트를 재사용하고 효율적인 사용방법을 알아보자 아래의 코드는 동일한 스타일을 가진 버튼을 SaveBtn, ConfirmBtn 컴포넌트로 복사 붙여넣기 한 후 텍스트만 변경한 코드이다. 아쉬운점은 스타일을 그대로 복사 붙여넣기 해서 나중에 고치기도 매우 불편하다. 왜냐하면 배경색을 토마토가 아닌 바나나로 바꾼다고 하면 하나하나 찾아가면서 바꾸어줘야한다. function SaveBtn() { return Save Change; } function ConfirmBtn() { return Confirm; } function App() { return ( ..

기존의 바닐라 JS 와 HTML 은 동적인 부분인 자바스크립트와 정적인 HTML 태그로 이루어져서 분리되어있는 구조이다. 이렇게 되면 span 과 button 을 재사용하려면 코드를 복사 붙여넣기해야한다. 이는 코드를 유지보수가 힘들게 하고 아래의 코드에서는 id 와 class 이름을 다 다르게 해줘야해서 번거롭게 btn1 ~ btn4 를 찾는 작업, 찾았으면 거기에 이벤트를 걸어주는 진짜 사람 짜증나게 하는게 많다. Total clicks : 0 Click me Total clicks : 0 Click me Total clicks : 0 Click me Total clicks : 0 ..