2기

1. TypeScript란?TypeScript는 자바스크립트의 상위 집합 언어로, 자바스크립트에 정적 타입을 추가하여 코드의 안전성을 높일 수 있다.자바스크립트로 컴파일되어 실행되고 TypeScript는 동적 타입 언어인 자바스크립트와 달리 코드 작성 단계에서 타입 오류를 확인할 수 있다.동적 타입: 런타임에서 동작할 때 타입 오류 확인정적 타입: 코드 작성 단계에서 타입 오류 확인, 자바스크립트로 컴파일(Node.js 환경)  2. tuple실제 배열을 사용하는 개념인 건 같지만 아이템의 개수와 각 아이템에 대한 타입, 그리고 데이터의 순서까지 고려하여 지정할 수 있도록 한다.   3. 타입 추론(Inference)타입스크립트는 기본적으로 타입 추론을 하기 때문에 무조건 타입을 정의한다기 보단 타입스크..

1. 사용자 지정 CSS색상 변수 정의CSS에서 사용할 색상 변수를 정의한다.색상 변수를 사용하면 일관된 색상 테마를 쉽게 적용하고 관리할 수 있다.html { --color-black: #0e111b; --color-white: #fff; --color-white-50: rgba(255, 255, 255, 0.5); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-10: rgba(255, 255, 255, 0.1); --color-white-5: rgba(255, 255, 255, 0.05); --color-primary: #fdc000; --color-..

1. 컴포넌트 생성 클래스코어 Component 클래스 정의먼저, 코어 Component 클래스를 정의하기 위해 payload 인수를 받아 tagName과 같은 속성을 지정하여 동적으로 HTML 요소를 생성할 수 있게 해준다. export class Component { constructor(payload = {}) { const { tagName = 'div' } = payload; this.el = document.createElement(tagName); this.render(); } render() {}} 생성자: 생성자는 payload 객체를 인수로 받아, 구조 분해 할당을 통해 tagName을 추출하고 기본값은 'div'로 설정한다.요소 생성: this.el은 지정된 ta..

1. Modulesimport와 export 패턴exportexport default 123export const str = 'abc'export const arr = []export function hello () {} 여러개의 데이터를 내보낼 때 export 키워드를 사용한다.하나의 데이터를 내보낼 때 export default 키워드를 사용한다. importimport { str as string, arr, hello as helloFunction } from './module.js'console.log(string, arr, helloFunction)import * as object from './module.js'console.log(object.str, object.arr, object.hel..

1단계 6주차쯤되서 slack에 공지사항 하나가 올라왔다!    바로 기다리던 웰컴키트를 수령하라는 공지였다! 🥹 이전에 카테캠을 준비하면서 1기때 웰컴키트를 제공했다는 것을 1기 쿠키즈분들의 블로그를 둘러보면서 알게되었는데, 이제 나도 카테캠 2기의 쿠키즈로서 웰컴키트를 수령할 수 있다는 것에 감회가 새로웠다! 공지해주신 장소에서 수령하라는 안내에 바로 해당 장소로 달려갔다!    받아본 웰컴 키트 박스는 진한 검정색으로 굉장히 시크한 모습으로 나를 맞이하고 있었다. 빨리 열어보자!    “Welcom, Kookies!”라는 안내문으로 따뜻하게 맞이하고 있었다.장기간 동안 열심히 카테캠 참여해서 미래의 성장해 있는 나를 상상해보면서 떨리는 마음으로 종이를 걷어냈다 😳    이것저것 뭔가 꽉꽉 채워져..

SCSS(SASS)를 사용하는 이유?표준 CSS로 작성하면서 반복되는 선택자로 인해 코드가 길어지는 문제가 발생하곤한다.SCSS와 같은 CSS Preprocessor를 사용하면 이러한 문제점을 개선할 수 있다.  CSS Preprocessor란?CSS Preprocessor는 전처리기라는 의미로, CSS가 동작하기 전에 사용하는 기능을 의미한다.전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting), 조건문, 반복문, 다양한 단위(Unit)의 연산 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.이렇게 작성한 전처리기 코드를 웹에서 동작 가능한 표준 CSS로 컴파일하는 과정을 거치게 된다.이 컴파일은 Vite, Parcel, Webpack과 같은 번들러를 통해 ..