반응형
[netlify] - 새로고침 에러

[netlify] - 새로고침 에러

React앱을 배포하고 난 후, 호스팅된 페이지에서 메인 페이지가 아닌 /contact 등의 하위 페이지에서 새로고침을 하면 404 에러가 뜨는 것을 발견했다. Router 설정상 리액트의 첫 페이지 url은 '/' 이다. 이곳에서 index.html을 읽기 때문에, '/' 의 페이지가 index.html로 지정되어 있는 것이나 마찬가지다. 그러나 라우팅된 페이지로 이동했을 경우 각 url에 맞는 별도의 파일이 존재하는것이 아니기 때문에, 404 에러를 띄운다. (리액트는 index.html 하나로만 동작하는 SPA이므로..) 따라서 어떤 경로로 접속하든 index.html을 보내주세요~ 라는 코드를 추가해야 한다. public 폴더에 _redirects 라는 이름의 파일을 생성한다. 확장자는 없다. 그..

  • format_list_bulleted 바보일기
  • · 2023. 1. 15.
  • textsms
[React] My Portfolio React 프로젝트

[React] My Portfolio React 프로젝트

My Portfolio React 프로젝트 소요 기간 : 3일 Figma 기획 : https://make-somthing.tistory.com/77 Github: https://github.com/chalinuna/myweb Demo: https://main--bright-mochi-309946.netlify.app/ 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useNavigator, useState, React-Router-Dom@6, styled-components, SCSS(node-sass 라이브러리)) Unsplash Open api 배포 - Netlify 프로젝트 제작 계기 내 프로젝트와 간단한 이력서, 자기소개를 한꺼번에 보여줄 수 있는 포트폴리오 정리 페이지가 ..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2023. 1. 14.
  • textsms
[프로젝트 기획 - React] 포트폴리오 소개 Figma 프로토타입

[프로젝트 기획 - React] 포트폴리오 소개 Figma 프로토타입

포트폴리오 소개 웹 - 프론트 프로젝트 좀 더 깔끔하게 이력서 형식의 포트폴리오가 필요하다고 생각해, 새로 웹 프로젝트를 구상하게 되었다. React를 이용한 정적 페이지로 구상할 것이며 모바일과 여러 브러우저에서 볼 수 있게 반응형을 고려하여 디자인하였다. 사용할 툴 Frontend - React (antd, react-bootstrap, react-router-dom@6, styled-component ... ) Figma 와이어프레임 메인 페이지, 보유 스킬을 정리한 페이지, 프로젝트 모아보기, 간단한 학력 및 자격사항 보기와 이력서를 제공한다. 프로토타입 Demo : https://www.figma.com/proto/YSRBnB0dqFIWAVLQpXe0nm/Untitled?node-id=0%3A1..

  • format_list_bulleted 프로젝트/프로젝트 기획
  • · 2023. 1. 12.
  • textsms
[React] React SPA - Slide Template + 반응형 Nav menu

[React] React SPA - Slide Template + 반응형 Nav menu

React SPA - Slide Template 슬라이드 형태 리액트 SPA 템플릿 무료 배포 Github : https://github.com/chalinuna/slide-template Demo : https://lambent-lily-149f31.netlify.app/ React App lambent-lily-149f31.netlify.app Preview 제작기간 : 2일 배포 : netlify 제작 언어 및 프레임워크 : React.js 상단 고정되어있는 Navbar와, 세로 슬라이드 형식으로 페이지를 이동할 수 있는 SPA 템플릿. 친구에게서 '상단에 메뉴가 고정되어있고, 메뉴를 누르면 슬라이드 형식으로 미끄러져 내려가듯이 페이지를 이동할 수 있는 템플릿을 만들어달라' 고 요청을 받아 간단히 ..

  • format_list_bulleted 프로젝트/React 프론트 프로젝트
  • · 2023. 1. 11.
  • textsms

[React] Cannot read properties of undefined / useState의 값이 불러오기 전에 렌더링됨

1. 옵셔널 체이닝 (?연산자) 2. && 연산자 3. if문 을 써도 Cannot read properties of undefined 오류가 해결되지 않는 경우가 있다... 3개를 다 써도 안되어서 삽질하던 와중에 발견한 방법. useState의 초기값을 null로 주면 말끔히 해결된다. useState([]) 도 안되고, useState('')도 안된다. 무조건 NULL이어야 함. useState(null);

  • format_list_bulleted 바보일기
  • · 2023. 1. 10.
  • textsms
The bucket does not allow ACLs

The bucket does not allow ACLs

Node.js 코드를 통해 버킷에 '쓰기' 를 실행하려 했는데, 버킷의 ACL 권한을 설정해주지 않아서 발생한 문제. acl 권한을 허용해주면 된다.

  • format_list_bulleted 바보일기
  • · 2023. 1. 2.
  • textsms
반응형