리액트 서버를 netlify 를 통해 정상 배포했다. 이 때 다른페이지로 이동 후 새로고침을 하면 아래와 같은 에러메시지가 나타난다. page not found 는 404 에러로, 현재 url 에서 찾고자 하는 자원을 못찾았을 때 발생한다. 이전 까진 정상적으로 보이던 화면이 왜 새로고침 이후엔 보이지 않을까? 원인 내 설정에서 리액트가 최초 접속할 때의 url 은 / 이다. 그리고 이 때 index.html 을 읽는다. 즉 해당 url 에 대한 자원은 index.html 로 정해져 있다. 하지만 화면을 넘기면서 라우팅된 url 이 예를 들어 /a 혹은 /b 가 됐을 땐, 각 url 에 맞는 자원이 존재하지 않는다. index.html 처럼 정해진 자원이 없다. (react 는 single page ap..
env 란? 개발을 하다보면 포트, DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. create-react-app을 사용하여 프로젝트를 시작했다고 가정하고 글을 적겠다. create-react-app으로 프로젝트를 시작하면 기본적으로 dotenv모듈이 같이 설치가 되므로 따로 설치를 하지 않아도 된다. .env.local, .env.development, .env.test, .env.production 등 여러 종류가 있지만 이번 프로젝트에서는 .env.deve..
📗 Component 란? 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. React에서 Component는 재사용 가능한 각각의 독립된 UI구성 단위라고 볼수 있다 💡 Component 사용 이유 기능별로 코드가 나뉘어 있기 때문에 수정을 해야 할 경우 쉽게 찾을 수 있어 유지 보수에 용이하다. 코드를 재사용 할 수 있어 반복되는 코드의 양을 줄일 수 있다. 여러번 사용된 컴포넌트가 있을 경우 수정작업이 들어왔을때 단순반복 작업을 줄일 수 있다. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있는데, 해당 페이지가 어떻게 구성되어 있는지 파악하기에 용이하다. 💡 어떤 HTML들을 Component 만드는게 좋을까 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋음 ..
HTML 삽입 미리보기할 수 없는 소스 CRA로 리액트 프로젝트를 생성하면 위에 사진과같이 세팅이된다. CRA에 구성폴더 및 파일들을 살펴보도록 하겠다. public 우리가 웹을 배포한다는 건 특정 폴더를 서버 컴퓨터에 올려두는 것을 말한다. public은 화면에 실제로 출력되는 파일들을 모아둔 곳이다. 리액트로 우리가 따로 설정을 안하였지만 웹펙은 public 을 바라보게 하고있다. index.html 실제 우리가 작성한 코드가 index.html파일 안에있는 id="root" 인 div 아래에 출력된다. manifest.json 웹앱 매니페스트란 앱에 대한 정보를 담고 JSON 파일이다. 배경색은 어떠한 색인지, 앱의 이름은 무엇인지, 홈스크린 화면에 추가할 때 아이콘은 어떤 것인지 등의 정보를 담고..
HTML 삽입 미리보기할 수 없는 소스 CRA로 리액트를 실행하기 위해선 먼저 node.js를 설치해 주어야 한다. 설치 방법은 아래의 링크 참고 https://velog.io/@dngur9801/Node.js-%EC%84%A4%EC%B9%98-%EB%B0%8F-LTS%EB%B2%84%EC%A0%84%EA%B3%BC-Current%EB%B2%84%EC%A0%84 create ceact app 이란? React 개발 환경을 설정하기 위해서는 babel과 webpack에 대한 설정이 필요하고, 이외에도 여러 개발 환경을 설정해 주어야 한다. 이러한 설정을 간단하게 대신해주는 것이 create-react-app 줄여서 CRA라고도 부른다. cra에서는 babel과 webpack을 포함하여 React에서 필요한..
