제로하우스

Netlify Page Not Found 에러 Vue를 netlify를 통해 배포했을 경우, 메인 페이지는 표시되지만 다른 페이지에 접근하려는 경우 아래와 같이 Page Not Found 에러가 발생한다. 검색해보니 이는 React에서도 동일하게 발생하였다. 원인 최초 접속할 때의 url인 /는 index.html에서 읽는다. 하지만, SPA(Single Page Application)인 Vue와 React에서는 다른 화면으로 넘어가는 라우팅된 url에 대한 적절한 자원이 존재하지 않는다. 따라서 Page Not Found 에러가 발생하게 된다. 해결방법 Vue 혹은 React의 public 폴더 아래에 _redirects라는 파일을 생성한다. (확장자는 없다. 그리고 해당 파일 내부에 아래 코드를 작성..

HTTP 요청 메서드 혹은 HTTP 동사는, 주어진 리소스에 수행하길 원하는 행동을 나타낸다. HTTP 요청 메소드 종류 GET: 특정 리소스의 표시를 요청한다. HEAD: GET 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문을 포함하지 않는다. POST: 특정 리소스에 entity를 제출할 때 쓰인다. PUT: 목적 리소스 모든 현재 표시를 요청 payload로 바꾼다. DELETE: 특정 리소스를 삭제한다. CONNECT: 목적 리소스로 식별되는 서버로의 터널을 맺는다. OPTIONS: 목적 리소스의 통신을 설정하는데 쓰인다. TRACE: 목적 리소스의 경로를 따라 메시지 loop-back 테스트를 한다. PATCH: 리소스의 일부만을 수정하는데 사용된다. CRUD 측면에서의 이해 자주 사용하..

PWA? PWA는 Progressive Web App의 약자로, 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 개발된 웹앱이다. PWA의 특징 PWA는 다음과 같은 장점이 있다. 설치 X: 별도 설치 없이, 지원하는 웹 브라우저를 통해 페이지 접속 후 바탕화면에 앱 아이콘을 추가할 수 있다. 푸시알림: 푸시알림도 사용가능하다. (iOS 및 iPadOS는 2023년부터 지원 예정) 오프라인: 오프라인 상태에서도 웹앱에 접근이 가능하다. 이외에도 다음과 같은 특징이 있다. 참고 자료 https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction https://geundung.dev/85

Request 객체에서 데이터 받아오기 JavaScript, Axios, Express.js를 사용하는 경우를 예시로 살펴본다. 💡 req.body JSON과 같은 데이터를 받을 때 사용한다. // axios로 요청보내기 await axios.({ url: "http://localhost:8080", method: "POST", data: { title: "hello", content: "hello world", } }) 서버에서 받을 때는 아래와 같이 설정해주어야 한다. (express 4.16.0 버전 이상) const express = require("express") app.use(express.json()); app.use(express.urlencoded({ extended: true })) ..

ngrok이란? ngrok(엔그록)은 방화벽을 넘어서 외부에서 로컬에 접속할 수 있게 하는 터널 프로그램(Secure tunnels to localhost)이다. 시작하기 다음의 명령어로 ngrok agent를 설치한다. choco install ngrok 설치한 ngrok agent를 ngrok 계정에 등록한다. Authtoken은 ngrok 사이트에 회원가입(로그인) 후에 `Dashboard > Getting Started > Your Authtoken`에서 가져올 수 있다. ngrok config add-authtoken 포트를 열고 해당 포트를 등록한다. ngrok http ngrok http 8000# 예시 위 명령어를 입력하면 터미널 창 전체가 ngrok의 접속 상태를 알 수 있는 대시보드처럼..