Stack Building

1. AWS 시작하기 Amazon EC2 : https://aws.amazon.com/ko/ec2/?hp=tile&so-exp=below 본 예제에서의 설치버전 : Ubuntu Server 16.04 LTS (HVM), SSD Volume Type – ami-f293459c – 첫 가입시 무료로 이용할 수 있는 인스턴스 입니다. port 설정안내 – python에서 별도의 포트를 설정하지 않으면 기본으로 5000번 포트를 사용한다. – AWS에서 보안영역에서 5000번 포트를 개방하도록 설정이 필요하다. – 위치 : Console > NETWORK & SECURITY > Security Groups – 해당 인스턴스 선택 후 아래와 같이 설정해준다. 2. Python 서버 설정 step1 : 서버설정 전..

플라스크 서버에서 API 방식으로 데이터를 전송하면서 json을 payload로 사용하게 되었다. 객체나 메소드를 보내기보다 스트링을 전달하는 것이 오류 발생을 막기에 좋다. json으로 보낼 때에는 jsonify({'key':value, ...})를 return 하는 함수를 짜고, requests를 사용해 post 방식으로 url에 보내면 된다. 받아올 때에는 request.get_json()을 사용한 후 일반적인 파이썬 딕셔너리에 접근할 때처럼 접근하면 된다.

"액션과 리듀서 사이의 중간자" 사용처 비동기 작업 (ex. 네트워크) 콜백 지옥 비동기적으로 해야할 일이 많아지면, 코드의 구조는 자연스레 깊어질 것이고 그러면 코드를 읽기 힘들어진다. 하는 일 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정 PromiseMiddleware (사용 예제: 예제 코드 분석) (1) promise - ES6에서 비동기 처리를 다루기 위해 사용되는 객체 (2) redux-promise-middleware promise가 payload로 전달되면 요청이 시작, 성공, 실패 할 때 액션의 뒷부분에 _PENDING(시작), _FULFILLED(성공), _REJECTED(실패)를 반환한다. ※ 이 글은 velopert님 블로그의 이..

component 컴포넌트 - 자바스크립트 함수와 유사하지만, 실제로는 클래스 - 화면에 무엇을 그려주는가?를 의미 - props를 받아 리액트 요소를 반환함. - render() 필수 컴포넌트는 props와 state 두 가지의 인스턴스를 가진다 - props: 컴포넌트의 mounting, updating 프로세스 시점에 값이 할당될 뿐 컴포넌트 내부에서 값을 변경할 수 없음. 컴포넌트 간에 데이터를 주고받는 방법. - state: 상황에 따라 변경되어야 하는 값 라이프 사이클에 근거하여 작성 참고 자료 React의 기본, 컴포넌트를 알아보자

출처: 권동섭 교수님 github 검색창에 도시 이름을 영문으로 입력하면 해당 도시의 기온, 습도 등을 그래프로 보여주고, 그 아래에 평균치를 보여주며 도시 위치를 구글맵으로 보여주는 웹사이트다. 이번 프로젝트는 미세먼지 정보를 보여주는 웹사이트 프론트를 만드는 것이라서 유사한 기능을 하고 있는 예제를 분석해 보기로 했다. 아래 분석에서 node_modules 폴더는 단순한 모듈 모음이고, css는 꾸며주는 기능이므로 제외했다. public은 기본 리액트 템플릿과 똑같다. manifest.json은 웹이 안드로이드 홈에 올라갈 때 메타데이터로 쓰인다. src 안에는 actions, components, containers, reducers 폴더가 있다. actions는 액션, reducers는 리듀서를 ..

리덕스에 대해 자세히 기술한 이 페이지를 참고하여 공부 목적으로 요약 정리함 등장 배경 - 너무 많은 상태 관리 - 복잡한 코드 - 변화와 비동기(asynchronous, 위임, *)의 혼용 => 상태 변화가 일어나는 시점에 제약, 상태 변화 예측 가능하게 3가지 원칙 - 모든 state(상태)는 하나의 store 안에 하나의 객체 트리 구조로 저장 - state를 변화시키는 방법은 action 객체의 전달 외에 없다. (store.dispatch) - action에 의해 상태 트리가 어떻게 변화되는지 순수 함수로 작성해야 한다. 이 순수 함수가 바로 reducer다. 이전 state를 변경하는 것이 아니라 새로운 state 객체를 생성, 반환 action - "무언가 일어난다" 기술 (간단한 소식들이라..

공통점 - 리액트 컴포넌트에서 다루는 데이터 컴포넌트 (예제 출처: velopert 님 블로그 글) - props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수 (*) - 받아온 props 값은 this. 키워드로 조회 가능 - 단순히 props를 받아 보여주기만 하는 컴포넌트는 간단하게 함수형(예제는 출처 참고)으로 작성 가능. 함수형에는 state와 LifeCycle이 빠져 있어 초기 마운트가 미세하게 빠르고 메모리를 덜 사용함. props - 부모컴포넌트에게서 (위로부터) 받는 값 - 컴포넌트 자체에서 defaultProps로 설정 가능 (빠트리거나 일부러 비우는 경우) 디폴트 선언 방법은 두가지가 있음 (위 예제 출처 게시글 참고)..

이 글을 공부 목적으로 일부 요약, 발췌함 - 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리. - View에만 초점, 라우팅 기술 없음 특징 1. JSX 문법 (여기에 정리함, 과 같이 html 코드를 여러개의 리액트 파일로 분할하여 작업 가능) 2. 컴포넌트 기반 (코드 재사용, 유지보수 가능, 한 페이지에 한 html 파일 방식 아님) 3. Virtual DOM (불필요한 연산이 매번 일어나는 기존 DOM을 한번 더 추상화해 변화를 미리 인지할 수 있도록 함. 사용자가 변화를 인지하지 않아도 가상 돔에서 자동으로 감지, 업데이트) 참고 리액트 서버 사이드 랜더링 설명

잘 설명되어 있는 블로그 글을 요약, 추가 + 이 글을 덧붙임 public - 가상 돔을 사용하기 때문에 실제 돔 필요. 즉 가상 돔이 들어갈 빈 껍데기가 필요. - 일반적으로 이 폴더 내의 파일을 건드릴 일은 거의 없다. src - 리액트 개발이 이루어지는 메인 폴더 - 빠른 재빌드를 위해 여기 안의 파일만 webpack이 처리함. 한줄 정리: App.js에 정의한 컴포넌트들을 index.js에서 으로 사용하고, 이를 껍데기 템플릿인 index.html에 삽입한다. index.js - src 폴더에 있음 - 메인 프로그램 - 자바스크립트 엔트리 포인트 - html 템플릿 및 자바스크립트 컴포넌트 조합, 렌더링 App.js - src 폴더에 있음 - 컴포넌트 정의 - 실제로 화면에 표시되는 내용 정의 -..

JSX - 일반적으로 자바스크립트 내에서는 html 태그 사용이 불가능하지만, 이를 가능하게 함. - 자바스크립트 부분을 알려주기 위해 { }를 사용함. - Babel은 JSX 로더를 가짐. - 속성과 내용 전부에 들어갈 수 있음. - ReactDOM은 JSX에 포함한 값을 escape 처리하여 XSS로부터 안전함. 아래와 같은 코드는 JSX를 사용한 예시를 보여준다. (이미지 출처: '기초부터 배우는 React - Part 1')