# Tech (23) # Tech/DynamoDB DynamoDB + GUI 로컬 개발환경 세팅하기 테스트는 로컬환경에서 하자! 개발 환경> Windows 10> Node.js (with NPM) 데이터베이스 로직이 잘 동작하는지 확인하기 위해서는실제 데이터베이스에 데이터를 주어가며 확인하는 것이 좋지만. DynamoDB를 AWS 위에서 테스트를 한다면,테스트 과정도 실사용량에 청구되는 것은 물론이고, 테스트케이스 데이터를 매번 삭제하는 것도 귀찮은 작업입니다. 그럴때는 DynamoDB를 로컬에서 테스트하는 것을 고려할 수 있습니다. 데이터베이스를 싹다 날려버리는 것도 편하고,로컬에서 이루어지므로 사용량도 청구되지 않기 때문이죠! Local DynamoDB 설치하기 DynamoDB는 쿼리와 최적화가 어려울뿐이지 설치와 셋팅 자체는 어렵지 않습니다!먼저 아래의 링크에서 자신의 환경에 맞는 DynamoDB.. 2019. 12. 9. 12:33 # Tech/React [Typescript React] 상태 끌어올리기 공통된 상태는 끌어올리자 어떤 컴포넌트들은 본질이 같은 데이터를 보여주어야 할 경우가 있습니다. 화씨와 섭씨 변환기가 대표적인 예시인데,둘 중 하나를 바꾸면 반대쪽도 바뀌어야 하기 때문이죠. 사실 화씨와 섭씨의 본질 데이터는 같습니다.본질 데이터를 공유할 수 있도록 제어되는 컴포넌트 기법을 활용하면 되겠군요. 공통된 상태를 공통 조상의 상태로 끌어올리는 것.이것을 상태 끌어올리기라고 합니다. 2019. 12. 7. 14:13 # Tech/React [Typescript React] 컴포넌트 제어 form 요소는 또 다른 내부 데이터를 갖는다. 리액트에서 제공하는 HTML 컴포넌트 중 form 요소는 특별하게 작동합니다.폼 요소 내부에 담긴 데이터는 this.state와는 다르기 때문이죠. 아래의 코드를 한번 살펴볼까요? interface Prop {} interface State { name: string; } class NameForm extends React.Component { constructor(prop: Prop) { super(prop); this.setState({ name: "" }); } render() { return ( ); } } 위 코드에서 this.state.name와 #name.value는 따로 놉니다.사용자가 폼의 값을 바꾸어도 컴포넌트의 상태는 변경시킬 수 없죠... 2019. 12. 7. 13:03 # Tech/React [Typescript React] 리스트 컴포넌트 컴포넌트를 배열에 담아 렌더링하자 여러개의 리액트 객체를 표시해야 할 때는, JSX 문법에 배열을 사용할 수 있습니다.각각의 컴포넌트 타입이 달라도 동작하며, 특히 리스트를 보여줘야 하는 컴포넌트를 만들 때 유용합니다. let list: ReactNode[] = [ Hello, React!, Installation, First, Download the library from the link below. ]; let element = {list}; ReactDOM.render(element, document.getElementById("app")); 이런 사용방법은 리스팅아이템li을 쉽게 출력할 수 있도록 도와줍니다.아래는 순서없는 리스트 태그ul의 예시입니다. HTML : Lorem Ipsum Dolor.. 2019. 12. 7. 02:42 # Tech/React [Typescript React] 상태 관리 라이브러리 깊숙한 곳에 숨겨진 함정 클래스 컴포넌트에 있는 setState 메소드는 주의해야 할 특징을 가지고 있습니다.쉽게 설명하자면 병렬로 처리하지만, 여러개가 묶일 때 까지 미룬다. 입니다.비동기로 작동한다. (=상태가 즉시 변경되지 않는다.)최적화를 위해 여러 setState를 묶어서 처리할 수 있다. 아래의 카운터 컴포넌트를 살펴볼까요? interface Props { delta: number; } interface State { count: number; } class Counter extends React.Component { private intervalID: any; constructor(props: Props) { super(props); this.state = { count: props.delt.. 2019. 12. 6. 15:16 # Tech/React [Typescript React] 조건부 렌더링 조건부 렌더링 이미 이전 포스트에서 조건부 렌더링에 대한 대부분의 이야기를 마쳤습니다.이 포스트는 조건부 렌더링에 대해 이야기한 부분만 모아놓은 글입니다. 1.대문자로 시작하는 변수에 컴포넌트를 담는 테크닉을 응용하면 동적으로 컴포넌트를 결정할 수 있습니다.import React from "react"; class LogoutPannel extends React.Component {} class LoginPannel extends React.Component {} let isLogin: boolean = false; let Pannel = isLogin ? LogoutPannel : LoginPannel; let element = ; 2.true, false, undefined, true는 JSX 안에서.. 2019. 12. 6. 14:32 # Tech/React [Typescript React] 이벤트 핸들링 JSX 태그에 이벤트 핸들러 달기 JSX 태그에 이벤트 핸들러를 달고싶다면, 아래의 3가지만 기억하세요.나머지는 HTML 태그처럼 사용하시면 됩니다!문자열 대신 함수를 전달합니다.이벤트 핸들러 함수의 이름은 lowerCalmelCase으로 짓습니다.이벤트 핸들러 함수의 첫 번째 인자는 this로 바운딩해야 합니다. html + js : function toggleLasers(){ ... } JSX : interface ToggleState { isToggleOn: boolean; } class Laser extends React.Component { constructor(props: ToggleState) { super(props); this.state = { isToggleOn: props.isTogg.. 2019. 12. 6. 14:16 # Tech/React [Typescript React] 컴포넌트 생명주기 클래스형 컴포넌트는 규칙에 맞게 움직입니다. 클래스형 컴포넌트는 정해진 생명주기에 맞게 움직입니다. 생명주기 메소드를 오버라이딩하면,다음과 같은 일을 할 수 있죠.특정 조건에서 렌더링 하지 않기.업데이트 전에 해야할 일 수행하기. (데이터 획득 및 ...)컴포넌트가 제거될 때 해야할 일 수행하기. ... 아래는 16.4 버전에서의 생명주기 모형도입니다.리액트 버전마다 생명주기가 다릅니다. 이전 또는 이후의 생명주기가 보고싶다면,React Lifecycle Method Diagram 홈페이지를 참조해주세요. 컴포넌트가 처음 생성될 때 이 범주에 해당되는 생명주기 메소드는 다음과 같습니다.constructorcomponenetDidMount( ) componenetDidMount 메소드는 화면에 처음 컴포넌.. 2019. 12. 6. 13:45 이전 1 2 3 다음
