valleycho

Storybook 이란? Storybook은 UI 개발을위한 도구입니다. 구성 요소를 분리하여 개발을 더 빠르고 쉽게 만듭니다. 이렇게하면 한 번에 하나의 구성 요소에서 작업 할 수 있습니다. 복잡한 개발 스택을 시작하거나 특정 데이터를 데이터베이스에 강제로 넣거나 애플리케이션을 탐색하지 않고도 전체 UI를 개발할 수 있습니다. Storybook을 사용하여 웹 응용 프로그램에서 작은 원자 구성 요소와 복잡한 페이지를 만듭니다. UI라면 Storybook으로 만들 수 있습니다. Storybook은 재사용을 위해 구성 요소를 문서화 하고 버그를 방지하기 위해 구성 요소를 자동으로 시각적으로 테스트하는 데 도움이 됩니다. 맨 아래의 [참고 문서]의 react용 스토리북 튜토리얼을 보고 작성하였으며, 작성 도중..

리액트 환경설정!! create-react-app(CRA)을 사용하여 쉽게 구성하는 방법이 있긴하지만, CRA에는 SSR이 안되어있고, eject해서 직접 셋팅 설정을 변경할 수도 있지만, 구조가 복잡하므로 이해가 안된 상태에서 설정을 변경하기란 쉽지 않다. CRA를 사용할 경우 CRA의 업데이트의 따른 유지보수가 어렵고, 개발환경의 자유도가 줄어든다. 그러므로 직접 하나하나 셋팅하는 방법으로 해보자! 1. 폴더 생성 후 vscode로 폴더 연 후의 bash쉘에서 명령어를 순차적으로 입력한다. npm init -y 2. react를 설치한다. npm i react react-dom 3. type이 정의된 react와 react-dom을 설치한다. ( js는 타입이 명시가 안되어있기 때문에 type명시된 ..

16. 인터페이스 및 클래스 인터페이스(interface)를 통해 값이 따라야 할 제약을 타입으로 표현 할 수 있다. 인터페이스 타입을 통해 값의 형태(shape)를, 즉 값이 어떤 멤버를 가져야 하고 각 멤버의 타입은 어때야 하는지를 서술할 수 있다. 클래스(class)를 이용해 객체 지향 프로그래밍 언어와 비슷한 방식으로 코드를 구조화 할 수 있다. 타입스크립트의 클래스는 ES6에 추가된 클래스 문법의 확장으로, 접근 제어자 등의 유용한 추가 기능을 제공한다. 인터페이스 → 타입 별칭과의 차이점 타입 별칭을 이용해서 기본 타입, 배열과 튜플, 유니온 타입 등에 새로운 이름을 붙일 수 있다 (type UUID = string). 인터페이스로는 해당 타입을 표현하는 것이 불가능하다. 타입 별칭은 실제로는..

7. 기본 타입 7.1 boolean const isTypeScriptAwesome: boolean = true; const doesJavaScriptHasTypes: boolean = false; 7.2 number const yourScore: number = 100; const ieee754IsAwesome: number = 0.1 + 0.2; 7.3 null / undefined null 타입과 undefined 타입은 각각 null과 undefined라는 하나의 값만을 갖는다. 이 두 값을 자기 자신의 타입, 그리고 아래에서 언급될 void 타입 이외의 타입에 할당하려 하면 타입 에러(TS2322: Type 'null' is not assignable to type 'number' 등)가 발생한..

5. 원소 순회 5-1. for-in 5-2. forEach → ES5부터 ForEach 메소드가 추가, 이 메소드는 배열의 원소를 인자로 받는 콜백 함수를 인자로 받아, 배열내의 각 원소에 대해 해당 콜백을 실행한다. → [참고 2]의 예제를 보면 이해할 수 있는데, 배열의 원소, 즉 ,langs나 langs2의 배열의 원소를 인자로 받아서 출력하는 결과를 확인 할 수 있다. 단점은 반복문 중간에 break 혹은 return 등을 사용해 실행흐름을 제어할 수 없다. 5-3. for-of → ES6버전에서는 ForEach(ES5 버전)의 단점인 반복문 중간에 break 혹은 return등의 실행흐름을 제어할 수 없다는 단점을 보완하기 위해 추가되었다. - for-of 문법과 for-in 문법의 차이점 f..

3. 함수 함수를 다른 함수의 인자로 넘길 수도 있고, 함수가 함수를 리턴하기도 하는 등 함수가 다른 문자열, 숫자 등의 값과 동일하게 취급된다. 때문에 함수는 자바스크립트 프로그래밍에서 가장 핵심적인 역할을 차지한다. 3-1. 기본 매개변수 → ES6 이전 버전은 매개변수 값이 없으면 그거에 따른 예외처리를 해줘야하는 번거로움이 있었지만 ES6버전 이후부터는 1번째 줄에 기본 값을 선언하면 함수를 호출할 때 매개변수 값이 없어도 자동 세팅되어 [참고 1]과 같은 결과 값이 출력된다. 3-2. 화살표 함수 → function () {...} (ES5 버전)에서의 내용이 더 간단하게 사용하기 위하여, () => {...}(ES6 버전)으로 변형됬다. → getNames()를 호출하면 a.getName()은..

TS 안의 JS가 포함되므로 TS 및 JS의 관한 내용을 필자는 함께 포함해서 작성할 것이다. 매뉴얼 순서는 순차적으로 ECMAScript -> typescript 순서이지만 ECMAScript에 typescript를 접목시켜서 작성할 것이다. 타입스크립트 환경설정이 귀찮다면, 연습용 사이트로 바로 아래 링크를 추천! www.typescriptlang.org/play?#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcI..

- ng-container와 pipe 1. 테스트 코드 작성 2. [참고 1]의 코드 작성 후 홈페이지에서 용량 확인 → orders 모듈에 작성 후 ng-container 부분을 false로 작성하였고, 용량은 15.7KB 나온 것을 확인 할 수 있다. 그러면 ng-container ngIf의 false 부분을 true로 변경해보자. 3.ng-container의 ngIf를 true로 변경한 홈페이지 용량 확인 → 용량이 똑같다. 이는 false일 때 주석인 부분도 용량을 똑같이 차지한다는 것을 의미한다. 그러면 용량을 차지하고 있으면 로드하는 속도가 저하되는 원인이 될 수 있다. 이를 어떻게 줄일까? pipe를 이용해보자. 4. 아래의 파일 내용과 같이 작성 후 용량 확인 → 용량이 줄었다. 15.7K..