프로젝트 폴더 내에 클라이언트와 api서버가 함께 있을 때 서버를 키기 위해서는 각각 packge.json이 있는 폴더로 이동하여 npm 명령어를 실행해야 하는 번거로움이 있다. 이런 불편함을 해소하고 하나의 명령어로 두개의 서버를 킬 수 있는 concurrently라는 npm 패키지가 있다. npm install concurrently --save 설치 후에 아래의 dev명령어와 같이 입력하면 동시에 두개의 서버가 실행된다 --prefix 명령어는 client폴더 안에서 "npm run start"를 실행한다는 뜻이다 "scripts": { "start": "nodemon server/index.js", "dev": "concurrently \"npm run start\" \"npm run start ..

데스크탑에서 크롬이나 모바일 안드로이드 같은 경우 beforeinstallpropmt 이벤트를 사용해서 다운로드 버튼을 만들 수 있지만 ios는 작성일 기준까지도 불가능하다. 1. beforeinstallpropmt 이벤트 등록하기 import React, { useEffect, useRef } from "react"; ... let deferredPrompt = useRef(null); useEffect(() => { console.log("Listening for Install prompt"); window.addEventListener("beforeinstallprompt", (e) => { e.preventDefault(); deferredPrompt.current = e; }); //설치가 되어..

next js에서 pwa를 적용하여 모바일에서 다운로드가 가능하게 만드는 튜토리얼 입니다 1. next js 설치 npx create-next-app next js를 설치한다 2. next-pwa 설치 npm install next-pwa next js 프로젝트 안에 next-pwa 패키지를 설치한다 3. next.config.js 파일을 생성한다 해당 파일 안에 아래와 같이 작성한다 const withPWA = require('next-pwa') module.exports = withPWA({ pwa: { dest: 'public' } }) 다른 웹팩에 관련된 패키지를 적용하려면 아래와 같이 한다. const withPlugins = require("next-compose-plugins"); const..

pwa 설치가 가능하다는 것은 명시적으로 보여주기 위해 배너에 pwa 다운로드 버튼을 넣어서 노출시켰다. 이 배너는 pwa를 다운로드 받았을 시에 노출이 되지 않기는 원했다. 안드로이드에서는 beforeinstallpropmt 이벤트를 통해 pwa로 시작되는지 웹페이지로 시작되는지 감지가 가능하지만 ios에서는 불가능하다. window.addEventListener("beforeinstallprompt", (e) => { e.preventDefault(); deferredPrompt.current = e; }); ios는 media쿼리를 사용하여 감지할 수 있다. @media all and (display-mode: standalone) { body { background-color: yellow; } ..

github에서 push나 pull 등을 할 때마다 비밀번호를 입력하는 것은 생각보다 번거로운 일이다. 그렇다고 글로벌로 user설정을 하기에도 애매한 경우가 있다. 이럴때에는 ssh설정을 통해서 해결 할 수 있다. 1. ssh 키를 생성한다 ssh-keygen -t rsa -b 4096 -C "your_email@gmail.com" passphrase를 입력해야 키 파일이 생성된다. 키 파일은 ~/.ssh 폴더에 생성된다 2. 생성된 키 값을 github - setting 페이지의 SSH keys에 붙여넣기 한다 3. 그 후 로컬에서 ssh 키를 등록한다 #ssh-agent를 시작 $ eval $(ssh-agent) #개인키를 등록 $ ssh-add ~/.ssh/id_rsa

협업을 위해 github에서 private repo를 만든 후 초대가 되었다. 그후 클론을 하려 했으나 fatal: repository not found' error가 발생했다. 이를 해결하려면 git 주소에 내 아이디를 입력해주어야 repo를 찾을 수 있다 git clone https://git계정이름@github.com/cameronmcnz/private-github-repo.gi @뒤의 부분은 github repo의 주소이다. 참고 : https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/Five-ways-to-fix-Gits-fatal-repository-not-found-error Five ways to fix..

기존에 아파치를 통해서 ssl인증을 통해 https설정을 하였다. api서버를 띄운 후에 테스트를 하는 도중 크롬에서 api서버가 https가 아니기 때문에 보안상의 문제가 있다고 하며 값을 가져오지 못하는 이슈가 생겼다. 이를 해결하는 방법은 크롬 보안 설정을 하거나 api서버에도 ssl인증을 하는 방법이 있다. 실제 서비스를 생각한다면 당연히 후자의 방법으로 해야 문제가 없을 것으로 생각하여 삽질을 시작하였다. 아파치 virtualHost 세팅을 생각해 보았을 때 virtualHost 포트를 하나 생성해서 기존처럼 proxypass를 통해 api서버로 보내면 될 것으로 생각하고 virtualHost *:3001, proxypass localhost:3001 설정을 해보았으나 작동하지 않았다. 아파치의..

NameVirtualHost *:80 ServerName 서버주소 Redirect / https://서버주소 # SSL Virtual host add ServerName 서버주소 # ErrorLog /www/home/logs/error_log SSLEngine on SSLCertificateFile certificate.crt파일경로 SSLCertificateKeyFile private.key파일경로 SSLCertificateChainFile ca_bundle.crt파일경로 DocumentRoot 루트디렉토리경로 ProxyPass / http://localhost:3000/ ssl 설정 후 proxyPass를 통해 node서버가 돌아가고 있는 localhost:3000으로 리다이렉트 시킴

beforinstallpropt라는 wepAPI를 사용하여 클릭시에 홈화면에 추가 할 수 있도록 했다. 다만 ios에서는 불가능하고 안드로이드만 가능하다 useEffect에서 이벤트를 생성한다 let installPrompt = null; useEffect(() => { console.log('Listening for Install prompt'); window.addEventListener('beforeinstallprompt', (e) => { // For older browsers e.preventDefault(); console.log('Install Prompt fired'); installPrompt = e; // See if the app is already installed, in that..