본문 바로가기

JavaScript

 (46)
React - Component Styling 이 글에선, 컴포넌트를 스타일링 하는 방법에 대해 알아봅니다. 1. Style Loaders create-react-app은 webpack 기반으로 동작하고, style-loader와 css-loader가 기본으로 설치/설정되어 있습니다. 따라서, css-loader를 사용해 JS 파일에서 CSS 파일을 로드할 수 있고, style-loader를 사용해 CSS 빌드 결과물을 ) } 5. Ant Design UI/UX를 쉽게 구현할 수 있게 해주는 프론트엔드 프레임워크입니다. Ant Design 설치 $ npm i antd Ant Design 사용 import "antd/dist/antd.css"; import { Calendar } from 'antd'; function App() { return ( ...
React - React Router DOM 이 글은 react-router-dom 6 버전을 기준으로 작성되었습니다. 1. React Router? React를 위한 클라이언트 측 라우팅 라이브러리입니다. URL이 바뀌면 페이지를 새로고침하지 않고, 필요한 부분만 로드합니다. React는 기본적으로 UI 구축에만 초점을 맞추기 때문에, 라우팅을 위한 내장 프로그램이 없습니다. create-react-app 구성에 기본적으로 포함되어 있지 않기 때문에, 별도로 설치해야 합니다. https://reactrouter.com/docs/en/v6/getting-started/concepts#main-concepts React Router vs. React Router DOM react-router는 핵심 컴포넌트와 기능을 export 합니다. react-..
JSX - 기본 개념과 문법 정리 1. JSX? const element = Hello, world!; 위의 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며, JavaScript를 확장한 문법으로 React에서 Element를 생성하기 위해 사용됩니다. https://ko.reactjs.org/docs/introducing-jsx.html 아래의 예처럼, 자식 요소가 있는 HTML을 JSX 없이 React Element로 생성해보겠습니다. hello hi ReactDOM.render( React.createElement('div', null, React.createElement('h1', null, 'hello'), React.createElement('ul', null, React.createElement('li', ..
TypeScript - class class와 object는 OOP(Object Oriented Programing)의 기본 개념입니다. class는 object가 생성되는 데 사용되는, 사용자 정의 청사진(설계도) 또는 프로토타입입니다. class는 어떠한 객체의 공통적인 속성 또는 메서드 집합을 나타냅니다. JavaScript에서의 class 간략 사용법 class 키워드를 사용해 class를 만들 수 있다. class 네이밍엔 파스칼 표기법을 사용한다(예: PascalCase) new 키워드를 사용해 class의 object를 만들 수 있다 constructor 함수를 이용해 object를 만들면서 값을 전달할 수 있다. class 내부에서 this를 사용하면, 만들어진 object에 접근할 수 있다. TypeScript에서 tar..
TypeScript - interface Java 프로그래밍 언어에서 interface는 Class의 규격을 지정하는 데 사용되는 추상 자료형입니다. 상속받은 interface의 구현을 강제하여 코드의 일관성을 유지시키는 데 도움이 됩니다. TypeScript에선, interface를 타입 체크를 위해 클래스 뿐만 아니라 변수, 함수에도 사용할 수 있습니다. interface를 타입으로 선언하거나 상속받은 개체는 interface를 준수해 구현해야 합니다. 1. 변수에 인터페이스 적용 변수의 규격을 지정할 수 있습니다. // 사람이라면, 이름과 나이가 있어야 한다 interface Person { name: string; age: number; }; // 변수에 인터페이스를 적용 const p1: Person = { name: 'mark', a..
TypeScript - 타입 호환성 일반적으로 슈퍼 타입을 서브 타입에 할당할 수 없습니다. (공변) // sub1은 sup1의 서브 타입 let sub1: 1 = 1; let sup1: number = sub1; sub1 = sup1; // 오류 발생: 서브 타입에 슈퍼 타입을 할당할 수 없음 // sub2는 sup2의 서브 타입( array는 object의 서브 타입 ) let sub2: number[] = [1]; let sup2: object = sub2; sub2 = sup2; // 오류 발생 // sub3은 sup3의 서브 타입( 타입이 같은 요소를 가진 tuple은 array의 서브 타입 ) let sub3: [number, number] = [1,2]; let sup3: number[] = sub3; sub3 = sup3; ..
TypeScript - Type System 타입스크립트에는 Structural Type System과 Nominal Type System의 두 가지 체계가 있습니다. 타입스크립트는 기본적으로 Structural Type System을 따릅니다. 1. Structural Type System 구조가 같으면, 같은 타입이다. interface IDuck { quack(): void; } class MallarDuck implements IDuck { quack() { console.log('Quack!'); } } class RedheadDuck { quack() { console.log('q~uack!'); } } function makeNoise( duck: IDuck ) { console.log( duck.quack() ); } makeNoi..
TypeScript - Type의 종류 TypeScript는 JavaScript를 포함하고, 추가적인 타입들을 제공합니다. JavaScript의 기본 자료형 Boolean Number String Null Undefined(, Undeclared) Symbol Array Object Literal Function TypeScirpt에 추가된 요소 Any Unknown Never Void Enum Tuple Union, Intersection 문법 Type Alias Literal JavaScript의 자료형은 알고 있다는 전제 하에, TypeSciprt에 추가된 요소들을 알아보겠습니다. 1. Any 어떤 타입이어도 상관없는 타입입니다. 컴파일 시에 타입 체크가 정상적으로 이뤄지지 않기 때문에, 사용하는 걸 권장하지 않습니다. any가 필요한..

티스토리툴바