yoon-arc의 코딩 일지

HTML에서 CSS을 적용하는데 다양한 방법이 있듯리액트에서도 다양한 방법을 통해 CSS를 적용할 수 있습니다.이번 포스팅에서는 별도의 모듈 설치 없이 CSS를 적용하는 방법을  세 가지를 설명하겠습니다.1. inline style 사용2. css file을 통한 stylesheet 사용3. style.module.css file 사용  📌인라인 스타일(Inline Style)인라인을 통해 스타일을 지정할 시 태그 안에 style = {}를 작성한 뒤 css 정보를 담은 객체를 작성하면 됩니다.key로 속성을, value로 속성 값을 넘겨주며 객체기 때문에 세미콜론(;)이 아닌 콤마(,)로 구별해야 합니다.js 기반이기 때문에 하이픈으로 글자를 구별했던 기존 css와 달리, 인라인으로 전달할 시 카멜케..

타입스크립트의 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 활용하기 좋습니다.타입스크립트에는 아주 다양한 유틸리티 타입이 있는데, 오늘은 그중에서 9개를 함께 살펴보도록 하겠습니다- Keyof- Partial- Required- ReadOnly- Record- Pick- Omit- Exclude- NonNullable 📌  유틸리티 타입(Utility Type)  인터페이스의 key값을 union 형태로 받을 수 있습니다.한 번에 한 개의 키만 전달할 수 있으며, 존재하지 않는 key를 할당하게 될 경우 에러 문구가 뜹니다.인터페이스명 앞에 keyof를 붙여 사용할 수 있습니다interface Person { name : string; age : number; address ..

Java나 C# 같은 정적 언어의 경우, 함수 또는 클래스를 정의하는 시점에 매개 변수나 반환값의타입을 선언해줘야 합니다. 타입스크립트 또한 정적 언어기에, 정의하는 시점에 값들의타입을 명시해둬야 합니다. 하지만 타입을 미리 선언하기 어려운 경우도 존재합니다.이럴 때 활용하면 좋은 것이 바로 제네릭입니다.   📌  제네릭이란?제네릭이란, 타입을 마치 함수 파라미터처럼 사용하는 것입니다.선언 시점이 아닌 생성 시점에 타입을 명시해서 다양한 타입을 사용할 수 있게 해 줍니다. 정의할 때 특정한 타입을 선언하지 않고, 사용할 때 실제 타입을 지정할 수 있기 때문에클래스, 함수, 인터페이스를 다양한 타입으로 재활용 할 수 있습니다.이번 포스팅을 통해 함수, 인터페이스, 클래스에서의 제네릭 활용 예시를 살펴보겠..

자바스크립트는 기본적으로 프로토타입 기반의 객체 지향 언어입니다.자바스크립트에서 제공하는 클래스는 다른 객체 지향 언어의 클래스와는 조금 다른 느낌으로, 조금 특별한 함수정도에 가깝습니다. 타입스크립트가 지원하는 클래스도 ES6의 클래스와 대부분 비슷하지만 몇 가지 고유한 확장 기능이 있습니다.먼저 자바스크립트에서의 클래스를 살펴보도록 하겠습니다.  ES6에서의 클래스는 내부에 메소드만을 포함할 수 있습니다.내부에서 클래스 프로퍼티를 선언할 수 없고 반드시 생성자(constructor)를 통해 내부에서 속성을 선언하고 초기화 해야합니다.class Person { constructor(name){ this.name = name; } speak(){ //메서드라 ok console..

이번 포스팅에선 타입스크립트에서의 함수를 살펴보도록 하겠습니다. 📌 함수타입스크립트에서의 함수는 매개 변수와 return에 대한 타입을 지정할 수 있습니다.return값이 없을 경우 void로 선언하면 됩니다.//매개 변수 타입 선언function numInput (num : number):void {//return이 없으므로 void console.log(`number ${num} input`);}numInput(3); //number 3 inputnumInput('hi'); ERROR : number이 아닌 string이 들어옴//매개변수, return값 타입 선언function myName (name: string): string { return `my name is ${name}!`;}co..

이번 포스팅에서는 타입스크립트에서의 인터페이스를 살펴보도록 하겠습니다.인터페이스에 대해 본격적으로 설명하기 전, 객체를 함수의 인자로 받을 때 예시 상황을 먼저 살펴보겠습니다. 📌 타입스크립트에서의 객체let group1 = { groupName: 'mermade'}; //객체의 속성 값을 출력해줄 함수function logGroupInfo(group : object) { console.log(group.groupName);}logGroupInfo(group1);  group1안의 groupName이라는 속성값을 출력하고 싶을 때, 위처럼 코드를 작성한다면 아래와 같은 에러 문구가 뜹니다.   이는 object 타입의 속성값에 접근할 때 주의해야 할 점 중 하나로,object 타입은 객체의 프로퍼..

타입스크립트가 기본 제공하는 타입은 크게 12가지가 있습니다.모두 소문자로, 변수명 뒤에 명시하는 것으로 타입을 선언할 수 있습니다1. number2. string3. boolean4. null5. undefined6. any7. object8. array9. tuple10. enum11. void12. never  📌 number//number 타입임을 명시let num : number = 3;  📌 string//string 타입임을 명시let name : string = 'yoon'; 📌 boolean//true를 담고 싶을 때let isTrue : boolean = true;//false를 담고 싶을 때let isFalse : boolean = false;  📌 nullnull은 값을 갖는..

타입스크립트(TypeScript)는 2012년 마이크로소프트에 의해 처음 공개된 프로그래밍 언어로기존 자바스크립트가 갖고 있던 단점을 보완하고 보다 효율적으로 개발할 수 있도록 설계됐습니다. 때문에 보통 타입스크립트는  자바스크립트의 확장판 또는 엄격 버전으로 많이 소개되는데요, 텍스트만으로는 와닿지 않을겁니다.아래에서 구체적인 내용을 살펴보도록 하겠습니다    타입 명시적 이름에서부터 느껴지지만 타입스크립트는 자바스크립트에 비해 타입을 명시적으로 가져갑니다. 자바스크립트에서 변수는 단순히 데이터를 담는 컨테이너 역할을 하기 때문에타입을 미리 선언해줘야 하는 C, C++, Java 등의 언어와 달리 특정 종류의 변수로 선언할 필요는 없습니다.공간을 미리 만들어 둔다면 알아서 들어오는 데이터 타입을 유추하..