REACT26 react 프로젝트에 redux 적용하기 #1 이번에 진행중인 토이 프로젝트에서 상태관리 라이브러리인 redux를 적용하게 되었습니다. 문제는 아직 한 번도 사용해본적이 없는 라이브러리이기에 실전에 앞서 redux가 어떤 방식으로 동작하는지, 어떻게 적용시키야 하는지 알아보기 위해 기존에 있던 react 프로젝트를 redux를 이용한 구조로 바꾸는 튜토리얼을 진행해보려고 합니다. 리팩토링 할 대상은 지난번 리액트 튜토리얼을 진행했던 무비앱. 이 리액트 프로젝트를 redux를 이용한 프로젝트로 탈바꿈 시켜보는게 오늘의 목표입니다. 막상 진행하려고 하니 정말 아무것도 모르는 제로 베이스 상태였기 때문에 유튜브에 올려져있는 벨로퍼트(김민준)님의 강좌를 참고하였습니다. 우선 기존 레파지토리를 남기고 새 프로젝트에서 작업을 시작하기 위해 새 저장소를 생성하겠.. 2020. 9. 16. 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #3 이전 포스팅에 이어지는 내용입니다. 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #1 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #2 위 포스팅을 먼저 보고 와주세요! 지난 포스팅에서 ssh 인증을 통해 외부에서 인스턴스로 접근하는 과정까지 진행했습니다. 이제 빌드 파일을 업로드 하고, nginx 설정에서 이 빌드 파일을 띄워주도록 변경해보겠습니다. 인스턴스에 처음 접속하면 홈 디렉토리로 연결됩니다. (~) 빌드 파일을 이곳에 먼저 올려보겠습니다. scp -i ~/.ssh/id_rsa -r ./build/ 유저이름@인스턴스주소:./ 여기에선 파일 전송 명령어인 scp를 사용합니다. -i 옵션은 인증서의 위치, -r 옵션은 하위 파일들을 포함하는 .. 2020. 9. 12. 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #2 이전 포스팅인 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #1에 이어지는 내용입니다. 지난 시간에 우리는 GCP에 우분투 인스턴스를 생성하고, nginx를 설치하여 서버를 가동시키는 과정까지 진행했습니다. 그럼 이제 리액트 프로젝트를 가져와서 nginx에 연결하는 과정까지 해보겠습니다. 이번 프로젝트를 진행하면서 많은 시간을 정보 검색에 할애했었는데, 원하는 내용을 찾지 못해서 이곳저곳에서 토막 지식을 붙여다가 겨우 성공했습니다... 삽질은 힘드네요. 우리의 최종 목표는 빌드된 파일만을 서버에 업로드하고, 배포 과정을 단축시킬 수 있는 스크립트를 작성하는 것 까지입니다. 그럼 시작하겠습니다. nginx를 설치했다면 주어진 외부 IP주소를 통해 들어갔을때 기본 화면이 보입니다.. 2020. 9. 11. 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #1 토이 프로젝트에 프론트엔드로 참여하고 있던 중 작업중인 내용을 백엔드 개발자분들이 확인할 수 있다면 좋을 것 같다는 생각이 들었습니다. github page를 이용하면 빠르고 손쉽게 올릴 수 있었지만, 기왕 올리는거 여러가지를 많이 경험해 볼 수 있도록 GCP를 이용해 구성하기로 하였습니다. 아직 한 번도 사용해 본 적이 없어 하나씩 검색해보며 첫 삽을 떴기 때문에 다소 헤매는 감이 있을수도 있습니다. ㅎㅎ 가장 먼저 구글 클라우드 플랫폼에 가입하여 무료 크레딧을 받았습니다. 처음보는 이름의 메뉴도 많고 다양한 작업을 할 수 있을 것 같이 보이지만... 오늘 제 목적은 서버를 올려 웹 페이지를 띄워주는것이기 때문에 새 VM(가상머신) 인스턴스 만들기를 클릭하여 새 공간을 구성합니다. 몇 가지 설정을 상황.. 2020. 9. 10. React에서 PC/모바일 각각 라우팅하기 반응형 웹 디자인을 사용하면 접속하는 기기의 사이즈에 따라 페이지의 크기를 유동적으로 구성할 수 있다. 하지만 필요에 따라 모바일과 PC에서 아예 다른 화면을 보여줘야할 때가 있는데, 이럴 때 사용할 수 있는 방법이다. npm을 이용해 react-device-detect 패키지를 설치하고, npm install react-device-detect --save App.js에 공식 페이지에서 안내하는 용법에 따라 코드를 입력해준다. import { BrowserView, MobileView, isBrowser, isMobile } from "react-device-detect"; function App() { return ( This is rendered only in browser This is rende.. 2020. 7. 16. 노마드 코더 리액트 튜토리얼 강의 완강 후기 얼마 전 노마드 코더에서 유튜브에서 무료로 제공중인 리액트로 영화 앱 만들기 시리즈를 완강했다. 이전에 리액트로 포트폴리오 페이지를 만들어봤지만 말 그대로 CRA만 했을뿐, 리액트를 사용하는 의미가 없었다고 봐도 무방했는데 이번 기회에 리액트스러운? 프로그램을 짜는데 많은 도움이 되었다. 역시 배울 기회가 있다면 독학보다는 이렇게 강좌를 통해서라도 배우는게 좋다고 느껴졌다. (물론 도와줄 멘토가 있다면 금상첨화겠지만!) 강의 진행은 간단하다. 영화 정보를 제공하는 사이트에서 뿌려주는 api를 통해 영화 목록을 띄워주는 화면을 구현하는것이 목표이고, 실제로 강사인 니콜라스(노마드 코더)씨가 구현하는 과정을 처음부터 끝까지 모두 보여준다. 이론은 꼭 필요한게 아니라면 생략하고 실전 위주로 보여주다보니 강의 .. 2020. 7. 13. 이전 1 2 3 4 5 다음
