Back Ground

이미 만들어진 프로젝트에 StoryBook을 추가할때 - 먼저, React cli를 통해서 프로젝트를 생성해준다. [ 생성방법 ] https://backback.tistory.com/291?category=801894 React - 프로젝트 생성 및 babel & webpack 설명 React 프로젝트를 만드는 방법은 여러가지 있지만 Node.js 기반으로 개발할때 유용하게 프로젝트를 생성 할때 [create-react-app] 이 있다. webpack과 babel 등을 사용하여 개발하는 경우가 많은데 해당 도구를 설.. backback.tistory.com - 종속적으로 storybook을 추가한다. 1. npm npm i @storybook/react --save-dev 더보기 React cli가 아..

스토리북(Storybook) StoryBook JS 이란? 스토리북(Storybook)은 한 문장으로 정의가 어려울 정도로 다양한 방식으로 사용되고 있는 UI 컴포넌트 개발 도구입니다. 단순히 회사의 UI 라이브러리를 내부 개발자들을 위해 문서화(documentation)하기 위해서 사용할 수 있고, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로도 사용할 수 있다. 스토리북(Storybook)을 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 된다. 각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 보여주는 하나의 예시라고 생각하시면 이해가 편하실 것 같다. StoryBook JS의 큰 장점인 UI..

NestJS로 Starter프로젝트 생성하여 로컬에서 동작시켜보겠다. nestJS문서 : https://docs.nestjs.com/ Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reac docs.nest..

React Project 생성 - 타입스크립트를 사용할 리액트 프레적트를 만들때 $ npx create-react-app [프로젝트 명] --typescript --typescript 가 있으면 타입스크립트 설정이 적용된 프로젝트가 생성된다. - 만약, 이미 만든 프로젝트에 타입스크립트를 적용하기 싶다면 타입 정의 파일을 다운받는다. $ npm install --save @types/react @types/react-dom 타입스크립트 코드를 작성하기 위해 typescript 패키지도 설치한다. $ npm install --save-dev typescript 다운로드한 typescript명령어를 이용하면 타입스크립트 설정 파일을 생성 할 수 있다. $ npx typescript --init 초기화를 의미..

Promise가 무엇인가? 프로미스는 자바스크립트 비동기처리에 사용되는 객체. 여기서 자바스크립트의 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트 특성'을 위미한다. Promise 코드 - 기초 그럼 프로미스가 어떻게 동작하는지 이해하기 위해 예제 코드를 살펴본다. [간단한 ajax 통신코드 - Callback을 사용한 경우] function getData(callbackFunc) { $.get('url 주소/products/1', function (response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function (tabl..

노드JS란 NodeJS는 크롬 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. Node.js는 이벤트기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js는 패키지 생태계인 npm은 세계에서 가장 큰 오픈소스 생태계이기도 합니다. 1) 서버 노트를 통해 다양한 애플리케이션을 실행 할 수 있지만, 노드는 서버 애플리케이션을 실행하는데 가장 많이 사용됩니다. 2)자바스크립트 런타임 NodeJS는 C언어와 C++로 만들어졌다. 런타임은 특정 언어로 만든 프로그램을 실행 할 수 있는 환경을 뜻한다. 따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 해준다. 기존에는 자바스크립트 프로그램은 인터넷 브라우저 위에서만 실행할 수 있었지만, 브라우저외의 환경에서 자바스크립트를..

Vue 라이프 사이클 인스턴스의 상태에 따라 호출 할 수 있는 속성들을 Life Cycle(생명주기)라 한다. 라이프사이클에 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(Life Cycle Hook)이라고 한다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가지는데 속성의 종류는 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 이렇게 8종으로 나뉜다. 1. Creation [컴포넌트 초기화 단계] Creation 단계에서 실행되는 훅(hook)들이 라이프 사이클 중에 가장 처음 실행된다. 이 단계는 컴포넌트가 돔에 추가되기 전인데 서버 렌더링에서도 지원하는 훅이다. beforeCreate -인스턴스가..

Nest는 Node.js 프레임워크인데 Angular에서 많은 영감을 받았다고 한다. 장점 Nest는 Express를 사용하지만 Fastify와 같은 다양한 라이브러리와 호환성을 제공하므로 사용 가능한 외부 플러그인을 쉽게 사용 할 수 있다. 제공 TypeScript(바닐라 JavaScript와의 호환성 유지 ) 객체지향 프로그램 [ OPP (Object Oriented Programming) ] 기능적 프로그램 [ FP (Functional Programming) ] FRP (Functional Reactive Programming) Fastify는 속도와 오버헤드를 가능한 줄이는데 초점을 둔 Node.js 웹 프레임워크이다. Connect/Express와 Restify와의 호환 가능한 미들웨어를 지원..