분류 전체보기 (45) 썸네일형 리스트형 React 앱을 S3+CloudFront로 배포하기(1) - S3 Bucket 생성 지금부터 S3와 CloudFront로 React application을 배포했던 과정을 정리해볼까 한다. 순서는 다음과 같다. S3 Bucket 생성 CloudFront 설정 도메인 구입하여 설정 S3 Bucket 생성하기 1. S3 버킷 생성하기 AWS S3 console로 들어간다. 버킷 만들기로 들어가서 원하는 버킷 이름과 AWS Region을 설정하면 된다. 2. 모든 퍼블릭 액세스 차단 유지 클라우드 프론트를 통해 유저들의 접근을 허용할 예정이다. 모든 퍼블릭 액세스 차단을 유지하자. 3. 버킷 만들기 클릭 4. 생성된 버킷의 속성 탭 들어가서 정적 웹 사이트 호스팅 편집 클릭 5. 호스팅 편집하기 정적 웹 사이트 호스팅 -> 활성화 호스팅 유형 -> 정적 웹 사이트 호스팅 인덱스 문서 -> i.. 자바스크립트 환경변수 설정하기 환경 변수란? 일반적으로 우리는 하나의 코드를 관리하지만 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포한다. 따라서 어느 환경에 배포하느냐에 따라서 다르게 설정해야하는 항목은 환경 변수를 통해 관리하게 된다. 즉, 환경에따라 다르게 관리하는 변수라고 생각하면 될 것 같다. 우리팀의 경우 yarn start를 통한 development의 경우에는 아래와 같은 url 설정이 필요했고 const BASE_URL = 'https://dev.cvi-korea.kro.kr/api/v1'; const LOGIN_CALLBACK_URL = 'http://localhost:9000'; yarn build를 통한 production 경우에는 아래와 같은 url 설정이 필요했다 const BASE_URL = 'h.. Npm vs Yarn Package Manager 패키지 매니저는 패키지의 설치, 업데이트, 삭제를 편리하고 안전하게 수행하기 위해 사용되는 툴이다. Node.js의 대표적 패키지 매니저로는 npm과 yarn이 있다. 먼저 npm에 대해 알아보자. npm npm은 자바스크립트 런타임 환경인 Node.js의 기본 패키지 관리자이다. 전세계적으로 가장 많은 자바스크립트 개발자들이 사용하는 패키지 매니저이다. npm의 등장으로 개발자는 새로운 기능을 추가할 때 코드를 직접 작성하거나 github를 통해 다운로드하지 않아도 되게 되었다. 그런데 npm의 다운로드 수가 계속해서 늘어나면서 사용자가 많아질 수록 몇 개의 문제를 마주쳤다. 대표적인 예로는 의존성 문제가 있다. 개발자들이 동일한 패키지의 다른 버전을 사용하는 경우가 생겼다.. Redux 리덕스란 상태 관리 라이브러리입니다. 리덕스를 사용하면, 컴포넌트 내에 상태들을 글로벌하게 관리할 수도 있고, 파일로 따로 모아서 상태를 관리하면서 더 효율적인 상태관리를 할 수 있습니다. 즉, 모든 컴포넌트들이 쉽게 하나의 상태를 공유할 수 있습니다. 개인적으로는 어떠한 상태를 읽는 컴포넌트와 상태에 변화를 주는 컴포넌트가 서로 다른데, 트리 구조상 서로 멀리 있을 때 글로벌하게 상태를 관리할 필요가 있다고 느끼는 편입니다 : ) 왜냐하면 두 컴포넌트는 서로 연결되어있지 않기 때문에, 두 컴포넌트를 연결할 수 있는 부모 컴포넌트에서 해당 상태를 가지고 있어야 하고, 이는 앱의 규모가 크고 트리의 구조가 깊다면 엄청난 props drilling을 발생시킬 수도 있기 때문입니다. Dispatch() 디스패.. State vs Props 리액트에서 컴포넌트의 상태를 관리하는 방법은 크게 2가지다. 하나는 변경할 수 있는 상태를 다루는 것이고 → state 하나는 변경할 수 없는 상태를 다루는 것이다 → props props와 state의 구분하기 전에 공통점부터 알아보자면 props와 state는 Javascript의 일반 객체이다. props와 state는 화면의 렌더링을 발생시킨다. Props(Properties) Props의 가장 큰 특징은, 부모 컴포넌트로부터 내려오는 상태라는 것이다. 따라서 props는 읽기 전용(read-only)이고, 이 특성을 위해서 리액트는 자바스크립트의 Object.freeze() 메서드를 사용하여 props를 읽기 전용 데이터로 만든다. 특정 상황에서는 props가 부모 컴포넌트로부터 안 내려오면, .. Immutable이란? 리액트에서는 setState() 함수를 통해서만 state를 update 하는데, 이때 기존의 상태(객체)의 값을 직접 수정하면 안 된다. 즉, 리액트에서 state는 생성된 이후에 다시는 그 상태를 변경할 수 없다. 그 이유는 setState나 hook의 setter함수를 통해 상태를 변경하지 않으면 리액트는 상태의 변경을 감지하지 못해서 리렌더링을 하지 않기 때문이다. 이때 리액트에서는 상태를 immutable 하게 관리하라고 한다. 🤔 리액트의 상태가 immutable 하면 어떤 점이 좋을까요? 의도치 않게 특정 객체가 변경되면, 해당 객체를 참조하던 객체의 값이 같이 변경되는 side effect를 낮출 수 있다. 이에 따라 디버깅이 쉬워지고 프로그램 복잡도가 낮아진다. prevState와 nex.. 제어 컴포넌트 vs 비제어 컴포넌트 리액트로 폼을 다루는 방법은 크게 두 가지가 있다. 바로 제어 컴포넌트와 비제어 컴포넌트이다. 우테코 강의 시간에서도 두 방식에 대해 크루들과 코치들이 같이 논의하는 시간을 가졌던 기억이 있다. 그런데 그때에 잘 이해하지 못 한 부분이 많았어서 오늘 한 번 정리해보고자 한다. 참고로 나는 제어 컴포넌트를 선호하는 편인 것 같다 ㅎ ㅎ 이유는 흠,,,,아무래도 나는 리액트에서 ref의 사용을 지양하고자 하는 생각이 있어서 자연스레 제어 컴포넌트를 통해 폼을 구현하는 편인 것 같다. HTML Form 엘리먼트는 그 자체가 내부에 상태를 가진다. 이 특성에 의해 폼을 다루는 두 가지 방법이 존재할 수 있다. 미리 정리해보면, 폼 엘리먼트가 가지는 상태를 그대로 사용하는 것이 비제어 컴포넌트이고, 중간에 Rea.. Key KEY? 왜 사용해야 할까? Key는 컴포넌트 배열을 렌더링 할 때 어떤 element에 변화가 있는지 알아내기 위해 사용하는 값이다. 조금 더 추가해 설명해보자면, 리액트가 DOM 업데이트를 위해 이전 V-DOM과 현재 V-DOM에 대해 비교 연산하는 과정을 재조정이라고 한다. 이 재조정 과정에서 빛을 발하는 게 key다. 부모 요소에서 여러 자식 요소가 병렬적으로 많이 있을 때, key를 사용하면 이전 자식에 비해 현재 자식 중에 어떤 게 추가되고, 어떤 게 삭제되었는지 정확히 알 수 있다. 리액트에서는 데이터의 변화가 잦고 그에 따라서 새로운 컴포넌트를 생성할 수도, 수정할 수도, 삭제할 수도 있다. 이런 상황에서 우리는 key가 없다면 일일이 모든 컴포넌트를 순차적으로 탐색하며 변화가 있는 컴포넌.. 이전 1 2 3 4 5 6 다음
