css를 테스트 해보기위해 html페이지 직접접근 방법이 궁금해짐
create-react-app을 사용하여 생성한 리액트 앱에서 정적 파일에 접근하려면, public 디렉토리 내부에 파일을 저장한 후, 다음과 같은 방법으로 정적 파일에 접근할 수 있습니다.
파일의 URL 경로를 설정합니다.
public 디렉토리 내부에 파일을 저장할 때, URL 경로는 기본적으로 파일이 저장된 경로를 그대로 따라갑니다. 예를 들어, public/images/logo.png 파일의 URL 경로는 http://localhost:3000/images/logo.png 입니다.
파일을 참조합니다.
정적 파일을 참조할 때에는 <img>나 <link>와 같은 HTML 요소에서 파일의 URL 경로를 src나 href 속성으로 설정합니다. 예를 들어, public/images/logo.png 파일을 사용하려면 다음과 같이 작성할 수 있습니다.
jsx<img src="/images/logo.png" alt="logo" />
위 코드에서 /images/logo.png는 public/images/logo.png 파일의 URL 경로입니다.
파일에 접근할 수 있는 경로를 설정합니다.
리액트 앱이 로컬에서 실행될 때에는 기본적으로 public 디렉토리 내부의 파일에 접근할 수 있습니다. 따라서, public 디렉토리 내부에 파일을 저장하면, 해당 파일에 접근할 수 있습니다.
만약 다른 디렉토리에 파일을 저장하려면, 해당 디렉토리의 경로를 public 디렉토리 내부로 복사해야 합니다. 예를 들어, /var/www/images/logo.png 파일을 사용하려면, 다음과 같이 작성할 수 있습니다.
bashcp /var/www/images/logo.png public/images/
위 명령어는 /var/www/images/logo.png 파일을 public/images 디렉토리 내부로 복사합니다. 이후에는 public/images/logo.png 파일을 참조하여 사용할 수 있습니다.
리액트 앱에서 HTML 파일에 접근하려면, public 디렉토리 내부에 HTML 파일을 저장한 후, 다음과 같은 방법으로 HTML 파일에 접근할 수 있습니다. HTML 파일의 URL 경로를 설정합니다. HTML 파일이 저장된 경로와 동일한 URL 경로를 사용합니다. 예를 들어, public/pages/about.html 파일의 URL 경로는 http://localhost:3000/pages/about.html 입니다. 잘 동작합..