본문 바로가기

전체 글159

[JavaScript] 구조분해 할당 구조 분해 할당구조분해 할당이란 배열 혹은 객체의 속성을 개별 변수에 담을 수 있도록 하는 표현식이다. 가끔 배열의 일부분만 필요한 경우가 있는데 이럴 때 여러 방법이 있지만 구조 분해 할당을 사용하면 매우 쉽게 값을 가져올 수 있다.  배열 분해변수를 좌항, 분해하고자 하는 배열을 우항에 놓고 분해한다. 이 때, 배열의 순서를 맞추어야 한다. const fruits = ['apple', 'banana', 'cherry'];// 배열 요소를 변수에 할당const [first, second, third] = fruits;console.log(first); // "apple"console.log(second); // "banana"console.log(third); // "cherry"기본값 지정cons.. 2024. 11. 7.
[JavaScript] for in과 for of for ...in 문for ...in 문은 열거가능한 모든 속성을 반복한다. 이 때 상속된 속성도 같이 접근하게 된다. 여기서 두 가지의 특징이 나타난다.첫 번째로는 상속된 속성에 접근 가능하다는 점과 두 번째로는 열거 가능한 속성을 반복한다는 점이다. 주로 객체의 속성에 접근할 때 사용한다.  상속된 속성에 접근 가능const javaScript = { creator: 'Brendan Eich', createAt: '1995.05', standardName: 'ECMAScript', currentVersion: 2024,};Object.prototype.nickName = 'tiger'; // 최상위 객체인 Object에 nickName이라는 프로퍼티 할당 위 코드에서 javaScript 객체의.. 2024. 11. 5.
[TypeScript] 추상클래스란 무엇인가 (임시) 추상클래스는 클래스들의 클래스이다. 객체지향의 개념을 알고 있으면 추상화라는 개념을 이해할 수 있지만 그렇지 않다면 너무 어렵게 느껴진다. 이번 단원에서는 추상화의 개념과 추상 클래스에 대해 포스팅 하려한다. 추상의 사전적 의미는 다음과 같다.사물이나 표상을 어떤 성질, 공통성, 본질에 착안하여 그것을 추출하여 파악하는 것  뽑을 추(抽): "뽑다", "끌어내다"를 의미한다. 형상 상(象): "형상"이나 "모양"을 뜻한다.  즉, 어떤 대상의 특징만을 뽑아내어 간추리는 것이다. 그렇다면 특징을 어떻게 뽑아낼 수 있을까?  예를 들어 자동차, 비행기, 기차가 있다면 이 것들의 공통된 특징은 바로 '이동수단' 이라는 점이다. 이렇게 추상화를 하면 객체 하나하나의 디테일 보다는 공통된 특징만이 남게 된다.  .. 2024. 10. 30.
[TypeScript] 다형성과 제네릭 서론제네릭의 개념이 헷갈려서 며칠 공부를 해보고 포스팅을 한다. 제네릭이란 선언부에서 타입을 명시하지 않고 호출이 되었을 때 타입을 명시하는 어떠한 타입도 될 수 있는 기법이다.  나는 제네릭이 어떠한 타입도 될 수 있다면 unknown, any와 뭐가 다를까 하는 생각이 들었는데 오늘 드디어 뭔가 깨달은 것 같다 ㅋㅋ. 앞서 말한것 처럼 제네릭은 사용 시점의 인풋에 의해서 타입이 결정된다. 따라서 함수 혹은 인터페이스와 같은 곳에서 많이 사용된다.  반면에 unknown과 any는 사용 용도 자체가 다르다. 애초에 이 두가지를 비교할 수 없을 뿐더러 unknown은 어떠한 타입도 될 수 있지만 사용하기 위해서는 타입을 명시해야 한다는 부분도 다르다. any도 마찬가지로 비슷한 이유로 다르지만 이걸 쓰면.. 2024. 10. 27.
[TypeScript] unknown, void, never 타입에 대해서 알아보자 TS에서는 JS에서만 있는 타입 뿐만 아니라 TS만의 타입도 가지고 있다. 이번에 포스팅 하는 3가지 타입이 그 예시이다. 시작하기에 앞서 간단히 이 타입에 대한 설명을 하자면 unknown은 모든 타입이 될 수 있는 타입이고, void는 아무것도 반환하지 않는 함수에 사용된다. 마지막으로 never는 절대 반환하지 않는 함수에서 사용된다는데 void랑 뭐가 다른지 잘 모르겠다. 강의의 예시로는 에러를 던지는 함수를 보여줬는데 조금 더 생각을 해봐야겠다..  + 지피티한테 물어봤는데 void는 아무것도 반환하지 않는 메서드 즉, 콘솔출력 또는 이벤트 핸들러에서 주로 사용된다고 하고 never는 정상적으로 종료되지 않는 함수 즉 무한루프, 에러 던지기에 주로 사용된다고 한다. unknown어떠한 타입도 될.. 2024. 10. 26.
[TypeScript] Readonly , Tuple에 대해서 알아보자 ReadOnlyReadonly 는 말 그대로 읽기 전용 이라는 키워드 이다. 예를 들어서 어떤 배열을 생성할 때에만 값을 받고 해당 배열을 수정할 수 없게 만들고 싶을 때 사용한다.  또한 readonly 키워드는 배열 및 튜플에서만 사용 가능하다. 사용법은 아래와 같다.let arr : readonly number[] = [1, 2, 3]arr.push(4) //error 이렇게 만들어진 arr 배열은 추가, 삭제, 업데이트 모두 불가하다.  Tuple파이썬을 공부하며 리스트와 튜플의 차이는 가변성과 불변성으로 공부했었다. 타입스크립트에서도 비슷하지만 "타입"을 바꿀 수 없다는 점이 다르다. 먼저 튜플을 선언할 때에는 타입의 순서를 선언한다. let a : [number, string, number] .. 2024. 10. 26.
[TypeScript] 변수와 타입, 함수 생성 서론TypeScript는 JS에서 발생하는 에러를 대비하기 위해 만들어진 언어이다. 자바스크립트에서는 개발자를 위한 에러를 내지 않는다. 계산 식이 잘못 되었더라도 어떻게든 수행한다. 하지만 그로인한 결과값은 원하는 값이 아닌 경우가 많다. 예를 들어 JS에서는 [1, 2,3 ,4] + true 를 실행하면 오류없이 실행이 된다. console.log([1,2,3,4] + true)// result1,2,3,4true 하지만 위 결과는 원하는 결과 값이 아니다. 위와 같은 수식은 옳은 수식이 아니므로 실행 전 개발자에게 알려주어야 한다. 다음은 또 다른 예시이다. function div(val1, val2) { return (val1 / val2)}console.log(div('안녕?'))//res.. 2024. 10. 24.
[SCSS] 파일 구조와 모듈화 서론SCSS를 사용하는 가장 큰 이유이자 핵심이다. 컴포넌트를 재사용하고 컴포넌트끼리의 결합을 통해 하나의 큰 시스템을 구축한다. html과 css만으로는 그런 방법을 사용할 수 없는줄 알았는데 SCSS를 이용하면 객체지향적으로 코드 작성이 가능하다.파일 구조base/components/layout/pages/themes/abstracts/vendors/main.scss이 형식은 SCSS 뿐만이 아니라 리액트나 뷰와 같은 다른 라이브러리에서도 일반적으로 사용한다. 반드시 이 구조를 사용해야 한다는 것은 아니지만 일반적으로 많이 사용하는 구조이니 SCSS에서도 사용하면 쉽게 적용 가능하다.  폴더별 예시 파일 @use이제 해당 폴더에서 컴포넌트를 만든 후 다른 컴포넌트에서 사용하기 위한 키워드는 @use .. 2024. 10. 23.
[SCSS] mixin 사용법 서론mixin과 function은 SCSS를 모듈화 하기 위한 가장 큰 요소라고 생각된다. 잘못 사용하면 정말 가독성이 떨어지고 어려울 수 있지만, 잘만 사용한다면 코드를 훨씬 간결하게 유지할 수 있을 것 같다. 유지 보수 면에서도 훨씬 이점이 많을 거라 생각된다. mixin이란?: 함수와 유사한 개념 단, 함수와 동일하지 않음 (리턴값이 존재 X) 사용법mixin 을 선언할 때에는 @mixin 키워드를 사용한다.사용할 때에는 @include 키워드를 사용한다. 예제 (매개변수가 없는 믹스인)// 매개변수가 없는 믹스인// 선언부@mixin resetList() { margin: 0; padding: 0; list-style: none;}// 사용부ul { background-color: yell.. 2024. 10. 22.