제목 : Node.js 의 혼란 속에서 NestJS 가 제시한 질서란부제목 : 다양한 언어와 프레임워크를 둘러본 시각으로서의 NestJS이 글을 작성하는 이유다양한 프로그래밍 언어, C, C++, Java, JavaScript, TypeScript, .. 를 작성하여 프로그램을 제작해 보며,기존 언어들을 넘기 위해 개발 생산성과 프로그램 성능을 둘 다 잡은 신생 프로그래밍 언어RustGoZig를 살펴보며, 현대식 프로그래밍 언어가 어떤 점을 표방하고 만들었는지 분석하며 보았다.Rust 는 어떤 느낌이었냐면Rust 는 Memory Address Borrow 라는 통칭 "메모리 빌림" 에 초점을 두고 있었다.기존 C, C++ 에서 발생하는 메모리 누수를 원천적으로 차단하기 위해 만들어진 대표적인 언어의 기능..
typescript
제목 : 점진적인 리액트 프로젝트 도입 과정과 문제 해결 과정이 글을 작성하는 이유는?빠른 프로젝트 생성과 웹 페이지 생성에 초점이 맞춰진 현대 프로그래밍 트렌드는 AI 로 인해더욱 중요해진 요소로 꼽히고 있다.현재 프로그래밍 세상에서, 오히려 해당 분야에 대한 깊은 공부는 공감받지 못하는 사회라는 것을 느낀다.오히려, 빠른 개발을 요하는 실제 프로덕션 세상에서, 깊은 이해를 위한 시간 소비는 사치라고 생각할 지 모른다.아니, 그것이 당연할 지도 모른다.그러나, 나는 역발상으로, 리액트라는 단어가 가지는 수많은 의미를 탐색해 왔다.리액트는 무엇인지, 어떤 것으로 이루어져 있는지, 어떤 방법론을 사용하는지 등등..심지어는 JavaScript 의 es6 이상 버전이 어떻게 es5 로 폴리필 되는지 확인할 정..
Typescript 의 데코레이터를 이해해 보자타입스크립트로 작성하는 프레임워크, NestJS 와 같은 프레임워크는 Typescript 를 거의 중점적으로 사용한다.이 과정에서, Typescript 에서 제공하는 Decorator(데코레이터) 를 사용하게 된다.모든 프레임워크의 공식 문서가 그렇듯, 프레임워크의 유입과 점유율을 위해,깊게 들어가지 않고 마치 핸드북처럼 간편하게 알려주는 것이 트렌드인 것 같다.나는 공식 문서를 통해 공부하는 스타일이다.NestJS 는 애너테이션을 통해 DI, IoC, AOP 의 틀을 만들었다.DI - Dependency Injection : 의존성 주입IoC - Inversion Of Control : 제어 역전AOP - Aspect Oriented Programming ..
4장 - 이벤트 핸들링 리액트의 이벤트 시스템 - React Typescript Versionsrc/ 안에 들어가는 모든 .ts 파일은 맨 위에 import React from 'react'가 들어갑니다!코드 내부의 (...)안에 들어간다고 생각하시면 됩니다.일단, 기본적인 틀은 Say.tsx 로부터 시작합니다!먼저, 작성했던 Say.tsx 파일부터 보겠습니다.Say.tsx// (...)import { useState } from 'react'const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('Hello!'); const onClickLeave = () ..
함수 컴포넌트에서 useState 사용하기사실상 제일 많이 사용하게 됩니다.Hook 이라는 요소에 속합니다.useState 사용하기Say.tsx// (...)import {useState} from 'react'const Say = () : JSX.Element => { const [message, setMessage] = useState(''); const onClickEnter = () : void => setMessage('Hello'); const onClickLeave = () : void => setMessage('Good Bye!'); return ( 입장 퇴장 )}export default Say..
state - Typescript컴포넌트 내부에서 바꿀 수 있는 값props는 상위 컴포넌트에 의지, state는 내부에서 직접 변경이 가능합니다.솔직히 클래스형 컴포넌트는 굉장히 까다롭습니다.나중엔 대부분 함수형 컴포넌트만 쓰게 됩니다.그래도 코드 참고 할 때, 읽을 줄 알아야 해서 이해는 필수입니다!! 클래스형 컴포넌트의 statesrc/ 디렉토리에 여전히 작성하시면 됩니다.Counter.tsx// (...)import { Component } from 'react';interface StateFace{ number : number;}class Counter extends Component { constructor(props : {}){ super(props); /..
비구조화 할당 문법을 통해 props 내부 값 추출하기 - Typescript앞선 문법에서는 props를 그대로 사용했습니다.이번에는 함수 내부에서 변수에 할당 하여 사용 할 것 입니다.먼저 알아야 할 것!props 로 오는 값은 Object의 형태를 띄고 있습니다.Example// App.tsx에서 name, children 값을 보내 왔다고 가정하겠습니다.props = { name : 'Gong', children : 'React'}// name : string, children : string 인 것을 알 수 있습니다.// 따라서,interface PropFace{ name : string; children : string;}// props로 오는 name 그리고 childre..
클래스형 컴포넌트앞에서 보았던 App 컴포넌트는 함수형 컴포넌트입니다.다른 컴포넌트 선언 방식인 클래스형 컴포넌트를 작성 해 볼 겁니다. - Typescript//위에 항상 들어가야 합니다.//import React from 'react'// (...)import { Component } from 'react'class App extends Component { render() : JSX.Element { //const name = 'react' 도 상관없습니다. const name : string = 'react'; return { name } }}export default App; src 디렉토리에 MyComponent.tsx 파일을 생성해 보..
코드 이해하기먼저, src/ 내부의 모든 ts, tsx 파일은 맨 위에 디폴트로 import 해야하는 항목이 있습니다.import React from 'react';typescript 를 적용하기 위해서 필수로 입력해야 하는 문장입니다.먼저, yarn create react-app [생성한 프로젝트 이름] --template typescript로 생성한파일을 이해하기 위해 src/App.tsx 파일을 열어봅니다.import React from 'react';import logo from './logo.svg';import './App.css';function App() : JSX.Element { return ( Edit src/App.ts..
기초적인 Typescript 문법을 알아야 합니다1. 변수 선언 방법const typeString : string = "Hello World"const : 변하지 않는 고정 값이라는 의미입니다.typeString : 제가 임의로 정한 변수 이름입니다.string : Typescript에서는 모든 변수에 타입이 지정이 되어야 합니다.2. 함수의 반환값 선언 방법const App : () : JSX.Element => { return ( Hello World );};App : React 프로젝트를 작성 시, "컴포넌트" 를 모아서 처리하는 역할로 계속 쓰이게 됩니다.JSX.Element : "React.FC" 로 선언하는 방식이 있지만, JSX.El..
