카테캠

어떻게 진행되는가?1학기 동안 총 10주에 걸쳐 진행한 카카오 테크 캠퍼스 1단계인 개발 기초 교육이 끝났다.1단계에서는 제공해주신 강의와 라이브 특강을 듣고 매주 학습일지를 제출해야 한다.추가로 2번의 미니과제를 수행하고 깃허브로 PR을 날려 제출해야 한다. 강의는 필수 강의와 선택 강의로 나뉘어지는데, 선택 강의는 부족한 부분이나 더 학습하고 싶을 때 선택해서 들을 수 있는 강의이고, 필수 강의는 카카오 테크 캠퍼스에서 정한 필수 수강률에 맞춰 학습해야 한다. 아무래도 학기 중에 진행하는 것이다 보니 학업과 병행해서 진행한다는 점에서 매우 힘들었다.강의도 매우 디테일하고 양도 상당한데다가 학습한 내용을 일지에 정리하는 것까지 하면 시간이 매우 부족하기 때문이다.  무엇을 얻었나?디테일한 학습의 기회이..

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과 같은 번들러를 통해 ..