연습장

https://imagineu.tistory.com/23#main.scss [CSS] SCSS 아키텍처 7-1 pattern 폴더 및 파일 정리 하는 기준 (+ 실제 구성)CSS 공부를 위해 Udemy에서 advanced css인강을 하나 들었었는데, 그 인강에서 SCSS 파일들을 구분해놓은 방식이 신기했었다. 나중에 알고보니까 그렇게 파일을 구분해놓은 것이 CSS 아키텍처 중 하나인imagineu.tistory.com https://sass-guidelin.es/ko/#section-37 Sass Guidelines — Korean translation분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드.sass-guidelin.es 7-1 패턴abstracts, base, comp..

https://poiemaweb.com/typescript-generic TypeScript - Generic | PoiemaWeb제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이poiemaweb.com 정적 타입 언어의 경우, 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하여야 한다.그런데 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우가 있다. 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 재사용이 가능..

https://poiemaweb.com/typescript-interface TypeScript - Interface | PoiemaWeb인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다.poiemaweb.com 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다.인..

https://poiemaweb.com/typescript-class  ES6 문법 기존 프로토타입 기반 객체지향 언어보다 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있는 단순명료한 새로운 문법을 제시하고 있다.  사실 여기서의 클래스도 함수이고 기존 프로토타입 기반 패턴이다.   1. 클래스 정의ES6 클래스는 클래스 몸체에 메소드만을 포함할 수 있다. 생성자 (constructor) 내부에서 클래스 프로퍼티를 선언하고 초기화한다.// person.jsclass Person {  constructor(name) {    // 클래스 프로퍼티의 선언과 초기화    this.name = name;  }  walk() {    console.log(`${this.name} is walking..

https://poiemaweb.com/typescript-typing TypeScript - Typing | PoiemaWeb타입 선언은 코드 예측성을 향상시킨다. 또한 타입 선언은 강력한 타입 체크를 가능하게 하여 문법 에러나 타입과 일치하지 않는 값의 할당 등 기본적인 오류를 런타임 이전에 검출한다. VSCode와poiemaweb.com 1. 타입 선언 (Type Declaration)TypeScript는 아래와 같이 변수명 뒤에 타입을 명시하는 것으로 타입을 선언할 수 있다.선언한 타입에 맞지 않는 값을 할당하면 컴파일 시점에 에러가 발생한다. 기본적인 오류를 런타임 이전에 검출한다.  // booleanlet isDone: boolean = false;// nulllet n: null = nul..

https://poiemaweb.com/typescript-introduction TypeScript - Intro & Install | PoiemaWebTypeScript 또한 AltJS의 하나로써 자바스크립트(ES5)의 Superset(상위확장)이다. C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejlsberg(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoftpoiemaweb.com  1. node.js 설치 2. TypeScript 컴파일러 설치 및 사용법$ npm install -g typescript 3. 버전 확인tsc -v  TypeScript 컴파일러(tsc)는 TypeScript 파일(.ts)을 자바스크립트 파일로 트랜스파일링한다. TypeSc..

https://joshua1988.github.io/ts/why-ts.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%9E%80 Why TypeScript? | 타입스크립트 핸드북타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면joshua1988.github.io 타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다.타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다..

개발은 뭐랄까... 코드를 짜고 있으면... 레포트나 논문, 자소서를 쓰던..그시절 창작의 고통이 떠오르며 예술가가 되는 기분이 든다. 특히.. css에서 많이 그렇게 생각한다.  기존의 요구사항에 있던 다른 조건들에서는 할 수 있는건 거의다 한것 같고..'선택구현' 에 있던 조건들은 표현이 애매모호하거나, 개발환경 세팅을 다시해야되는것들이 남아있다.  그래서 이제는 미루고 미뤘던 css를 작성 할 때가 온 것 같다.  대충 쪼개서 보면 크게 3가지로 고려할 수 있지 않을까? 1. 상단 부분 (Item 추가 / 필터 버튼 / 정렬 버튼)--  2. 개별 Item -- 각 workState 에 따라서 ( wait / going / end )  테두리 색을 다르게 줘도 좋을것 같다. ?  3. 전체적인 배치..

크롬 - 구글 검색을 주로 이용하는데, 갑자기 어색함을 느낌 검색시에 다음과 같이 글씨가 진하게 / 볼드체 표시되는 느낌을 받았다.   하지만 엣지에서는 잘 동작하는걸 확인 했다. 따라서 크롬 브라우저의 폰트에 문제가 있지 않을까 고민을 하였고  크롬의 설정 - 모양 - 글꼴 에서 글꼴을 바꿔보니 효과가 있어서 이대로 해결 이라 생각했는데..     vscode 에서 실행한 페이지에서는 여전히 볼드체로 나오는것을 확인    Noto Sans KR 폰트를 삭제 후 다시 설치하여 문제 해결  시작 -> 설정 -> 글꼴 검색 -> 삭제 -> 재설치 https://fonts.google.com/noto/specimen/Noto+Sans+KR Noto Sans Korean - Google FontsNoto is ..

보통 html 과 css 를 작성하고 저장하면 반영이되는데, scss 는 컴파일을 거쳐야하기 때문에 이를 확인하려면 컴파일을 수행해야되는 번거로움 이 있다.색깔 하나 바꿀때마다 컴파일해서 확인할 수는 없지않나.... ' Live Sass Compiler' 확장프로그램을 설치하여 이러한 문제를 완화 할 수 있을듯 하다. 확장 프로그램에서 Live Sass Compiler 를 검색,줄이 안그어진 최신버전을 설치 폴더 구조 생성 DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>head..