전체 글102 [React/Google Map] 구글맵 기본 마커 지우기 이번 프로젝트에서는 구글맵을 이용해서 웹사이트를 만들어야 했다.그래서 구글맵을 다루는 방법을 차근차근 기록하려한다.이번 포스팅은 구글맵에서 기본적으로 표시되는 마커를 지우는 방법이다. 구글맵을 리액트로 불러와준다. (이건 나중에 제대로 익히고 나서 포스팅하도록 하겠다.) 1. 기본으로 출력되는 지도구글맵 API를 사용하면 기본적으로 랜드마크, 식당, 주차장 등 마커들이 표시된 지도가 출력 된다.내가 사용해야할 지도는 이러한 정보가 필요 없었기 때문에, 최대한 깔끔한 지도를 출력하고 싶었다. 2. 마커 출력 설정 해주기구글맵에서 기본으로 제공해주는 기능이다. 아래의 사이트로 들어간다.https://mapstyle.withgoogle.com/ Styling Wizard: Google Maps APIsTo i.. 2023. 11. 14. [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. [Github] 협업과 git clone, 과 fatal: '브랜치이름'could be both a local file and a tracking branch. 깃허브로 협업을 해야해서 다른 팀원의 레파지토리를 들고 와서 그곳에 업로드 해야했다.시작부터 꽤 난관이었어서 다음에 또 에러가 날 경우 해결하기 위해서 기록한다. 1. 깃허브로 협업하기 : git clone1. 파일을 저장할 폴더를 하나 만든다.2. cmd창을 연다.ⓐ cd 파일 경로 입력ⓑ git clone '연결할 ULR'그러면 폴더에 여기 깃허브에서 받아온 폴더가 하나 생성된다.ⓒ npm installⓓ git pull ' URL' (브랜치 이름)(ex. git pull https://github.com/어쩌구/git develop)메인에 올리기 전에 develop 브랜치에 업로드 해야해서 develop을 pull해왔다. 이런식으로 작성하고 npm start해보면 완료. 무사히 팀원들이 올렸던 화.. 2023. 8. 23. 이전 1 ··· 14 15 16 17 다음
