PWA란? 모바일 기기에서 웹 사이트를 볼 때 마치 네이티브 앱과 같은 동작을 가능하게 하는 방법 >> 사이트 자체의 개선(표시 속도 등의 기술적인 개선) Progressive Web Apps 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술 웹과 앱 모두의 장점을 결합한 제품 설치할 필요가 없지만, 홈 화면에 아이콘 추가 및 푸시알림도 가능하여, 사용자와 접촉 기회를 늘릴 수 있음 읽기 속도와 표시의 고속화, 오프라인 열람 등 다양한 이점을 가지고있음 PWA에서 구현할 수 있는 기능 ◆ 푸시 알림 일반적인 앱처럼 푸시 알림을 보낼 수 있음. 브라우저를 닫고 있는 상태의 사용자에게 푸시 알림을 보낼 수 있기 때문에, 웹사이트와 비교하면 현격히 접촉 횟수를 늘릴 수 있습니다. 푸시 알림을 ..

https://ko.reactjs.org/docs/hooks-effect.html 1. useReducer 훅이란? - useState를 대체할 수 있는 함수이다. - React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. - 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. ( 콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있는데, 이 부분은 이후 확인해 보자. ) - reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. ※ useReducer를 사용하기 위한 구성요소들은 다음과 같다. 1. useReducer 함수 import React, { useReducer } from "rea..

https://ko.reactjs.org/docs/hooks-effect.html 1. useEffect 훅이란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. - 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다. 1) 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 2) 즉, 라이프사이클 훅을 대체할 수 있게 되었다. (componentDidMount, componentDidUpdate, componentWillUnmount) - 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가..

우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는 SPA (Single Page Application) 방식 - 기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. - 새로운 페이지를..

create-react-app으로 설치한 react프로젝트인 경우 css-loader, style-loader를 따로 설치하지 않아도 webpack에서 사용하는 css 설정을 사용할 수 있다. ※ 참고 css-loader : @import, url() 등의 구문을 해석, 적용해 준다. style-loader : 태그를 통해서 CSS를 DOM에 적용해 준다. css를 적용할 수 있는 방법들에 대해 알아보자. 1. 인라인(inline) styling 적용 - html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으로 입력한다. - 속성명은 케밥 케이스(kebab case)가 아닌, camelCased property names 를 사용한다...

https://ko.reactjs.org/docs/lists-and-keys.html 0. 들어가기 앞서 - 어떨때 map 함수를 쓰면 좋을까? 앞으로 알아가겠지만 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 간단히 형태 살펴보고 자세히 알아보도록 하자. ex) for문 const numbers = [1, 3, 5] for (let i = 0; i { console.log(number); }); - 앞으로 알아가겠지만 맵으로는 for문보다 더 좋은 장점들,..