# Tech (23) # Tech/React [Typescript React] 컴포넌트 만들기 컴포넌트가 시작이자 끝입니다. 리액트에서 컴포넌트는 알파이자 오메가입니다. 사용자가 보게될 페이지에서 작은 부분들을 컴포넌트로 추출하고,이러한 컴포넌트를 알맞게 조립해서 페이지가 완성되는 것이죠. 프로그래머가 할 일은 작은 컴포넌트를 클래스나 함수로 구현하고,이 컴포넌트를 조합해서 더 큰 컴포넌트나 페이지를 만드는 것 뿐입니다. 컴포넌트는 오직 두가지. 상태가 있느냐, 없느냐. 컴포넌트는 상태State의 유무에 따라 분류할 수 있습니다.상태가 있는 컴포넌트 State Component상태가 없는 컴포넌트 Stateless Component 어떤 데이터에 의해 보여줘야하는 구조가 바뀐다면 상태가 있는 것이고,항상 똑같은 구조만 보여준다면 상태가 없는 것이죠. 가장 간단한 예시로 카운터를 들 수 있는데,상태.. 2019. 12. 6. 12:39 # Tech/React [Typescript React] JSX 문법 JSX, TSX ? JSX는 DOM 요소를 표현하기 위해 사용하는 React의 태그문법입니다.HTML의 태그문법과 유사하기 때문에 배우는데 큰 어려움은 없습니다. 아래의 태그문법에서 element의 우측값이 문자열도 HTML도 아님에 주목해주세요.이 문법을 사용하려면 tsx확장자로 코드를 작성해야 합니다. const element: JSX.Element = ( Hello, World! ); 이제 내부적인 관점에서 살펴보자면, JSX 문법은 아래처럼 JSX 객체로 변환된 뒤에 element에 저장됩니다.즉, JSX 문법은 필수가 아니라는 뜻이죠. const element: JSX.Element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, w.. 2019. 12. 5. 23:26 # Tech/React [Typescript React] 리액트 프리뷰 왜 리액트를 사용해야 하나요? 리액트는 쉽게 사용자 인터페이스를 작성할 수 있게 도와주는 자바스크립트 라이브러리입니다.상황에 맞게 페이지를 렌더링하고, 효율적으로 화면에 띄우는 역할을 하죠. 아래의 원 페이지 앱을 살펴보시면, 리액트는 사용자가 버튼을 누를 때 마다, 바뀌는 부분을 렌더링한 뒤, 효율적으로 페이지를 갱신하는 동작을 수행합니다. 물론 리액트를 사용하지 않아도 위의 예시를 만들 수 있겠지만, 썩 좋은 방법은 아닙니다.뒤에서 리액트가 해줬던 수많은 부분들을 직접 구현해야 하기 때문이죠. 특히 조금만 페이지를 바꾸더라도 발생하는 DOM 변경비용을 최소화하기 위해서는,웹 어플리케이션 성능 최적화에 대한 깊은 이해가 필요합니다. 리액트는 알아서 최적화하여 페이지를 변경해주기 때문에,프론트엔드의 깊은.. 2019. 12. 5. 20:28 # Tech/React TypeScript로 React 시작하기 개요 TypeScript와 React는 모두 매력적인 기술입니다. 그렇다면 하나만 쓰지말고 둘 다 사용하는 것은 어떨까요? 해당 포스팅에서는 타입스크립트와 리액트를 같이 사용할 수 있는 방법을 알려드립니다. 차근차근 따라해보세요. 필수 패키지 설치 TypeScript 이전 포스트에 상세하게 설명한 것이 있으므로 여기서는 요점만 짚고 넘어가겠습니다. 먼저 타입스크립트를 설치한 뒤. npm install typescript @types/node -d타입스크립트 환경설정 파일(tsconfig.json)을 생성하고, npx tsc --init컴파일러 옵션을 다음과 같이 변경합니다. { "compilerOptions": { "outDir": "./out", "rootDir": "./src", "sourceMap".. 2019. 12. 5. 04:20 # Tech/NodeTS VSCode TypeScript 프로젝트 생성하기 타입의 세계에 오신것을 환영합니다! 타입스크립트는 이른바 타입이 존재하는 자바스크립트라고 불리며, 자바스크립트의 장점이자 단점이였던 지나치게 지나친 유연성을 엄격하게 강제하기 위해 만들어졌습니다. 타입검사가 없으니 잘못된 인자를 넘겨주는 경우가 부지기수였고, 다른 사람이 작성한 코드라면 십중팔구죠. function addTwoNumber(x, y){ return x + y; } const num = 123 ; const str = '456'; const ans = addTwoNumber(num, str); // '123456' 동적타입에 고통받으신 여러분들을 위해, 안전한 타입스크립트의 세계로 안내해드리겠습니다. 준비물 챙기기 타입스크립트의 세계를 경험하기 위해서는, 먼저 준비물부터 챙겨야 합니다. 먼저.. 2019. 12. 5. 02:03 # Tech/DynamoDB DynamoDB 깊게 입문하기 (2) - DynamoDB Deep Dive (2) DynamoDB 주요기능 - Stream 테이블에 조작(추가/삭제/갱신)이 가해질 때 발생하는 비동기적 알림 데이터. AWS 서비스에서 트리거로써 활용될 수 있다. 어떤 조작이 가해졌는지, OLD_VALUE와 UPDATED_VALUE에 대한 정보도 들어있다. DynamoDB 주요기능 - TTL 데이터에 수명을 달아주는 기능. 각 아이템 항목마다 MyTTL 속성이 추가되며, 해당 시각이 자나가면 테이블에서 삭제된다. 단, 데이터가 생성되고 몇 분 이후에 사라지는 개념이 아니라,데이터가 생성될 때 애초에 데이터가 사라지는 시각을 정하는 방식이다. (2020-02-13 추가됨)TTL이 초과되어 데이터가 삭제되는 경우에는 WCUs도 사용되지 않고 요금도 발생하지 않는다.수작업으로 데이터를 삭제하지 않아도 되고,.. 2019. 11. 17. 02:33 # Tech/DynamoDB DynamoDB 깊게 입문하기 (1) - DynamoDB Deep Dive (1) NoSQL 장점 유연한 수평확장 수평확장 (Scale-Out)이 쉽고 유연하다. RDB에서 수평확장을 하려면 머리가 꽤 아플것이다. 빠른 레이턴시 대규모 서비스도 저렴하게 운영이 가능하며 응답속도도 빠르다. 유연한 스키마 RDB보다 유연한 스키마 설계가 가능하다. 단점 조인이 불가능하므로 복잡한 데이터 로직이 포함되어 있으면 성능이 급감한다. 데이터 모델들이 혼자서도 운용될 수 있도록 독립적으로 설계 해야한다. DynamoDB 장점 더 빠른 레이턴시 어떤 규모의 서비스에서도 빠른 응답이 가능하다. 구체적으로는 10ms 미만의 레이턴시라고 자랑하고 있는데 미션 크리티컬한 시스템에서도 사용할 수 있다고 설명한다. 완전 관리 시스템 완전 관리형이므로 개발자는 데이터 조작 및 스키마 정의에만 신경쓰면 된다. 스.. 2019. 11. 17. 00:17 이전 1 2 3 다음
