![]()
문제발생 리액트에서는 페이지 이동을 원할 때 a태그를 사용을 권장하지 않는다. 이유 - 1. 페이지 새로고침 방지, 2. 내부라우팅, 3. 브라우저 히스토리 관리 위와 같은 이유로 리액트에서는 라우터(Router)라는 라이브러리를 사용하여 페이지 이동을 권장한다. 그렇다면 라우터는 어떻게 사용할까? 문제해결 1. 라우터 다운로드 npm install react-router-dom 2. index.js 수정 (라우터 적용) import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; // 라우터 라이브러리 임포트 import "./index.css"; imp..
![]()
위와 같은 CSS 파일이 있다고 가정하자. 파일 관리의 필요성과 컴포넌트 재사용성을 높이기 위해 styled-components 를 도입하기로 하였다. 기존 CSS 파일을 어떻게 styled-components로 변환해야 할까? 방법은 간단하다. CSS 선택자인 클래스 이름으로 styled-componet를 생성하면 된다. 이후 각 선택자들의 CSS스타일을 각 styled-component에 붙여넣어주면 된다.
![]()
문제 발견 위와 같이 img 태그 컴포넌트에 src 경로를 직접 설정하면 에러가 발생한다. 이에 넣을 이미지 파일의 경로를 import 하여 props 형태로 전달해야한다 문제 해결 이미지 경로를 import 하여 props 형태로 전달한 결과 에러가 발생하지 않음을 볼 수 있다 결과 이미지가 잘 삽입 되었다.
![]()
문제발견 "리액트 컴포넌트에 부트스트랩을 이용한 스타일링은 어떻게 할까?" 문제해결 1. public / index.html 에 부트스트랩 시작을 위한 코드를 추가한다 https://getbootstrap.com/docs/5.3/getting-started/introduction/ 2. 적용하고 싶은 컴포넌트에 클래스를 이용하여 부트스트랩 스타일링을 한다 https://getbootstrap.com/docs/5.3/layout/columns/ 결과
https://www.peterkimzz.com/github-pages-nuxtjs/
![]()
문제 코드 코드 수정 라인 결과 문제 코드 Elvis Presley He was an American singer and actor. In November 1956, he made his film debut in Love Me Tender. He is often referred to as" the King of Rock and ROll" 코드 수정 라인 결과
![]()
문제 코드 코드 수정 라인 결과 문제 (3번) 코드 Elvis Presley He was an American singer and actor. In November 1956, he made his film debut in Love Me Tender. He is often referred to as" the King of Rock and ROll" 코드 수정 라인 결과
