본문 바로가기

FrontEnd ✨/❄️ React16

[http-server] 페이지 로드하기 http 서버를 실행할 때 아래와 같은 명령어를 실행한다. http-server --proxy http://localhost:8080? ./build http-server 설치 → 빌드 하고 → http-server --proxy http://localhost:8080? ./build 참고자료 React router with http-server we use react-roucter-dom with http-server , when user loads main page and click navigation links , new pages will loaded perfectly , but when user refresh page in that route , it returns 404 . It m... st.. 2023. 11. 14.
[http-server] 이 시스템에서 스크립트를 실행할 수 없으므로~ 오류 해결 해커톤 준비를 하며 간단한 웹서버 사용을 위해 http-server를 사용해야했다. http-server 설치는 다음과 같이 하면 된다.npm install --global http-server 그리고 이 서버를 실행하기 위해서는 http-server라는 명령어를 입력하면 된다.http-server 하지만 이 코드를 입력하니 에러 메세지가 발생하였다.해결방법PowerShell을 관리자 권한으로 연다.ExecutionPolicy을 입력하면 Restricted  설정된것이 보일것이다.Set-ExecutionPolicy Unrestricted를 입력하면위와 같은 메세지가 뜰것이다. Y를 입력해준다. 그리고 다시ExecutionPolicy를 입력하면 Unrestricted 로 바뀐것을 확인할 수 있다.다시 ht.. 2023. 11. 13.
[React] 이미지 업로드 & 미리보기 기능 만들기 (1) 리뷰 작성을 하는 창에서 사진 3개를 첨부할 수 있도록 하고, 사진 미리보기를 띄워주도록 해야했다. 이번 포스팅은 단순 기능 구현과 공부한것들의 기록이고, 다음 포스팅에서 서버와의 연결을 기록하도록 하겠다.✨알아야할것FileReaderWeb API웹 브라우저에서 제공하는 API개발자가 브라우저 상에 쉽게 개발할 수 있도록 도와주는 객체의 모음파일을 읽을 수 있게 해주는 객체File, Blob 객체를 핸들링할 때 사용됨.Blob : 이미지, 사운드, 비디오와 같은 멀티미디어 데이터 다룰때 사용데이터의 크기(Byte) 및 데이터 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용함.위의 객체를 사용해 특정 파일을 읽어들여 JS에서 파일에 접근할 수 있도록 도와줌readAsDataURL파일을 URL로.. 2023. 8. 24.
[React] axios 서버 연결중 request failed with status code 405 HTTP 405오류는 서버가 허용하지 않는 method를 이용하였을 때 발생하는 오류이다.즉, 메서드가 매칭되지 않아서 발생하는 오류라고 보면 된다.요청된 URL에 대해 웹 서버에서 HTTP 메서드를 허용하지 않을 때 발생 나는 서버에서 PATCH로 요청했는데 POST로 보내서 나는 오류였다.이렇게 수정하니 오류 해결 완료 2023. 8. 23.