리액트(React): 모달 팝업시 뒷배경(오버레이) 스크롤 되지 않게 하기

body 태그의 css를 변경합니다. position을 fixed로 하고, top의 위치를 현재 스크롤 위치로 설정한 뒤 overflow-y: scroll; width: 100%; 을 추가 지정하면 스크롤바로 인해 배경의 위치가 움직이지 않고도 스크롤 방지를 할 수 있습니다. useEffect를 사용해 css를 변경하며, 모달이 사라질 때에는 useEffect의 return을 사용해 body의 cssText를 리셋시킨 다음 window,scroll을 이용해 현재 스크롤 위치로 더보기…

리액트(React): Redux-saga 기초 사용법 요약 (상태 관리시 부수효과 관리하는 미들웨어)

리액트(React): React Redux 요약 정리 redux-saga 깃허브 역할 redux-saga는 애플리케이션에서 일어나는 사이드 이펙트(side effects) (데이터를 불러오는 비동기 처리나 브라우저 캐쉬에 접근하는 행위들)을 쉽게 관리하며 효과적인 실행, 손쉬운 테스트 그리고 에러 핸들링을 쉽게 해준다.   특징 saga 패턴을 차용 (참고 블로그) 미들웨어로서 역할을 수행 (React는 Redux 액션을 수행하면 Redux-Saga에서 디스패치하여 Redux의 더보기…

React: 리액트 공식 자습서 (틱택토 게임)의 ‘개선 사항’ 구현해보기

자습서: React 시작하기 리액트 공식 자습서로 처음 제시하는 과제는 ‘틱택토’ 게임입니다. 자습서라는 이름에 맞지 않게 이해하기 어렵고 구현 난이도가 높은 편입니다. 이 자습서의 구성은 먼저 자습서가 제시하는 범위의 예제를 완성한 후에, 추가 구현사항 6가지를 스스로 풀어보도록 하고 있습니다. 기존 코드는 다음과 같습니다. See the Pen Tic Tac Toe by Dan 더보기…

React + Redux-saga + Typescript로 만든 이미지 판매 사이트 (ImageShop)

이미지 판매 사이트 (ImageShop) React + Redux-saga + Typescript 로 제작한 이미지 판매 사이트입니다. 저장소: https://github.com/ayaysir/React-ImageSell 참고서적 및 API 서버 출처: 실전 리액트 (온노트) 영상으로 보기 특징 외부 API 서버를 이용한 SPA 형태의 홈페이지 React-router를 이용한 URL 라우팅 구현 Functional Hooks 사용, MVVM 패턴에 맞춰 페이지, 컨테이너, 컴포넌트 역할 구분 관리자 더보기…

타입스크립트 + typesafe-actions: createReducer 사용 예제 (redux-actions의 handleActions 대체)

1. redux-action의 handleActions 대용으로 typesafe-actions의 createReducer 를 사용합니다. # NPM npm install typesafe-actions # YARN yarn add typesafe-actions 참고로 redux-action은 리덕스에서 액션 생성 함수, 리듀서를 작성하기 편하게 하기 위한 목적으로 사용됩니다. import { createAction } from “redux-actions” import { createReducer } from “typesafe-actions” // 액션 타입 const START_LOADING = “loading/START_LOADING” 더보기…

리액트(React): React Redux 요약 정리

이 글은 위 동영상 강의들을 요약 정리한 것입니다.   Redux와 React Redux는 같은 의미인가요? 아닙니다. Redux는 상태 관리 라이브러리로, 상태관리 패턴인 Flux의 일부를 변형하여 간단하게 상태 관리가 가능하도록 만들었습니다. 이것은 제이쿼리, 일반 자바스크립트, 다른 SPA 프레임워크 등 다양한 환경에서 사용가능하도록 제작되었으며 리액트 전용으로 만들어진 것은 아닙니다. Redux의 상태관리 기법을 리액트 더보기…

리액트(React): useState (함수형 컴포넌트에서 변수 관리)

리액트에서 function 기반 컴포넌트(hook)는 한 번 렌더링되고 끝나는 것이 아닙니다. 리액트의 컴포넌트는 실시간으로 끊임없이 렌더링되며 여기서 일반 변수 등을 사용하면 컴퓨터의 자원 낭비와 성능 저하를 불러올 수 있습니다. 리액트의 함수 컴포넌트 체제에서 변수 등의 상태들을 관리할 수 있는 방법이 여러 가지 있는데 useState는 상태 관리의 아주 기초적인 형태입니다. 통상적인 변수 더보기…

React로 만든 영화 정보 제공 사이트 (2020)

https://github.com/ayaysir/movie-reactjs React(리액트)의 functional hook + Material UI 를 이용한 영화 정보 제공 사이트입니다.   사용 기술 ReactJS React Hooks API Axios ES6+ JavaScript HTML CSS Material-UI   주요 기능 외부 API를 통해 영화 정보를 보여줌 무한 스크롤 (Infinite Scroll) 별점 표시 기능 내용 보기 기능 영화 목록 정렬 기능 (DB 더보기…

리액트(React): react-router-dom을 이용한 라우팅 기능 사용하기 기초

1) 터미널에서 프로젝트 폴더로 이동한 뒤 npm에서 react-router-dom을 설치합니다. npm i react-router-dom –save   2) App.jsx 에서 <BrowserRouter> 태그쌍을 작성한 뒤 안에 라우팅 관련 정보를 작성합니다. <Route> 태그는 주소를 입력받으면 특정 컴포넌트로 이동합니다. exact는 정확히 이 path만 받아들인다는 의미이며 다른 주소는 적용되지 않습니다. 만약 exact를 사용하지 않는다면 /anyurl 등 모든 더보기…