vs code extentions에 대해서 작성한 글에 이어서 현재 제가 사용하고 있는 확장기능에 대해서 작성합니다 1. HTML Snippets 확장기능 이름처럼 html snippet으로 html이나 jsx 파일에서 태그들을 쉽게 작성할 수 있게 해줍니다. 그림처럼 태그를 입력한 후 tab키를 누르면 코드가 작성됩니다. 만약 실수로 창을 껐다면 ctrl + space를 누르면 창이 다시 나타납니다 2. Reactjs code snippets react를 사용할 때 컴포넌트 등을 쉽게 만들 수 있는 스니펫입니다. 저는 주로 rsc 단축어를 많이 사용합니다 3. Path Intellisense Path Intellisense는 path를 가이드해주는 확장기능입니다. 4. Prettier - Code fo..

이번 장에서는 리덕스를 사용하기 위해 알아야하는 용어와 개념에 대해 알아보겠습니다 state 관리 간단한 react counter 컴포넌트를 살벼보겠습니다. 버튼을 누르면 컴포넌트의 state가 증가합니다 function Counter() { // State: a counter value const [counter, setCounter] = useState(0) // Action: code that causes an update to the state when something happens const increment = () => { setCounter(prevCounter => prevCounter + 1) } // View: the UI definition return ( Value: {count..

이 글은 리덕스 docs를 해석, 요약 한 글입니다(ko.redux.js.org/tutorials/essentials/part-1-overview-concepts) 리덕스 docs에서는 redux essentials(리덕스 핵심)을 살펴본 후 튜토리얼로 진행하는 것을 권장합니다 2탄 - 리덕스를 사용하기 위해 알아야하는 용어 및 개념 redux 기본 핵심 튜토리얼 2탄 - redux 용어 및 개념 이번 장에서는 리덕스를 사용하기 위해 알아야하는 용어와 개념에 대해 알아보겠습니다 state 관리 간단한 react counter 컴포넌트를 살벼보겠습니다. 버튼을 누르면 컴포넌트의 state가 증가합니다 f jcon.tistory.com 3탄 - redux app 구조 redux 강의 기본 핵심 튜토리얼 3탄..

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..