Aairon 개발 블로그

react는 state를 상위 컴포넌트에서 관리하고 해당 state를 하위 컴포넌트 props로 내려주는데 하위 컴포넌트가 많아질 수록 props를 계속 전달하기 때문에 불편해 질 수 있다. context API를 사용하면 이 문제를 해결할 수 있다. context API를 사용하면 모든 컴포넌트가 context에 있는 state를 받을 수 있게 된다. 이번 포스트에서는 useContext와 useReducer를 사용한 예제를 통해 context API 사용 방법을 익혀보자. 개인적으로 이렇게 context와 component는 폴더로 구분해서 사용하는 것을 좋아한다. ├─components | └─Component.jsx ├─context | └─ContextProvider.jsx └─app.js co..

react와 node js로 만든 프로젝트를 heroku cli를 이용하여 배포하는 방법에 대해 알아보자. 1. heroku cli를 다운로드 받는다 devcenter.heroku.com/articles/heroku-cli The Heroku CLI | Heroku Dev Center The Heroku CLI Last updated 01 September 2020 The Heroku Command Line Interface (CLI) makes it easy to create and manage your Heroku apps directly from the terminal. It’s an essential part of using Heroku. Download and install The Heroku ..

heroku는 배포를 쉽게 할 수 있게 만들어 주는 서비스이다. heroku를 이용한 배포 방법 중 heroku cli를 이용해 배포를 하기위해 heroku cli를 다운 받았다. The Heroku CLI | Heroku Dev Center The Heroku CLI Last updated 01 September 2020 The Heroku Command Line Interface (CLI) makes it easy to create and manage your Heroku apps directly from the terminal. It’s an essential part of using Heroku. Download and install The Heroku CLI requires Git devcent..

프로젝트 폴더 내에 클라이언트와 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..