20210524 HTML01 : HTML 버전, 파일 태그 구성, 이미지 가져오기, 경로, a태그와 router, 개발자 도구, HTML syntax, 요소(부모, 자식, 상위, 하위), 빈 태그, 속성과 값, 인라인과 블럭요소, 인라인-블럭요소, ..
보호되어 있는 글입니다.
20210522 SCSS, Sass 02 : mixin(@mixin, @include), 반복문(@for), 함수(@function), 색상 내장함수, 다른파일 참조하기(@import), 데이터 종류, @each, @content
SCSS 02 Sass(SCSS) 완전 정복! by HEROPY blog SCSS 공식 사이트 mixin JS의 함수처럼 코드를 재활용 하고자 하는 경우, 변수와 다르게 여러개의 코드들을 @mixin 이름을 통해서 선언하고, @include 이름을 통해서 사용 가능함 또한 함수처럼 매개변수를 지정하여 인수도 넣을 수 있음 인수와 매개변수는 순서가 있음 (정확한 위치에 넣어야 정상적으로 인식함) 매개변수의 기본 값을 넣어주는 경우 매개변수명: 기본값으로 선언부에서 매개변수를 만들어 주면 기본값을 사용할 수 있음 기본값을 넣어주고 건너 띄어 순서를 맞추기 위해서는 키워드 인수 를 사용해야함 매개변수명: 값 을 인자로 넣으면 해당 매개변수로 정확하게 인수가 들어감 (순서 상관 없이) 주의) 함수 개념은 따로 ..
20210521 SCSS, Sass 01 : SCSS vs Sass, 주석, 중첩(자손선택자), 자식선택자, 상위선택자 참조, 충첩 속성, 변수, 산술연산
SCSS 01 Sass(SCSS) 완전 정복! by HEROPY blog SCSS 공식 사이트 CSS style 전처리 패키지로서 CSS에서 개발상 불편함을 해소시키고자 여러 기능들을 제공하는 패키지 SCSS vs Sass SCSS 와 Sass 형태의 두가지 문법이 존재함, SCSS는 기존의 CSS와 호환이 잘 되고 비슷함 둘의 문법 차이는 SCSS는 세미콜론, 중괄호를 사용하고 Sass는 인덴트로 범위를 인지하기 때문에 깔끔해 보이긴 하다. Sass의 문제점을 보완하기 위해서 만든 문법이 SCSS라서 SCSS의 문법을 익히는게 좋다. (기능은 똑같다.) 둘의 엄청큰 차이점은, Mixins에서 나타남 표기 SCSS Sass 범위 {} 인덴트 명령종료 ; 없음 mixin @mixin = include @i..
20210519 JavaSciprt 04 : 데이터 가변성(원시형 데이터), 불변성(참조형 데이터), 메모리 사용, 복사(깊은, 얕은 복사), import, export, Lodash API, JSON
JavaScript04 Javascript : 데이터의 불변성, 가변성, 메모리 사용 데이터 불변성 (Immutability) 원시 데이터 (Primitive) : String, Number, Boolean, undefined, null 데이터 불변성 : 메모리에 쓰인 데이터가 변하지 않음, 수정되지 않음 데이터 모양이 다르면 다른 것이다. 새로운 모양의 데이터 일 경우 새로운 메모리를 사용하고 같은 모양의 경우에는 같은 메모리를 사용 (메모리 위치와 데이터 모양의 일치) 원시형 데이터의 메모리 사용 let a = 1; let b = 4; // -------------------- Memory -------------------------- // |1: 1 |2: 4 |3: |4: // ---------..
20210517 JavaSciprt 02 : 함수(매개변수, 인수, arguments 키워드, Arrow function, IIFE, 호이스팅, 타이머함수, 콜백) , 클래스(prototype, functional class, this(normal, arrow), ES6class, 상속)
JavaScript02 Javascript : 함수 함수 선언 function sum(x, y) { console.log(`process : ${x + y}`); // 함수가 호출되면 항상 실행하는 부분 return x + y; // 함수 호출 결과로 변수에 담을 수 있는 곳 }매개 변수와 인수 인수 : 함수를 사용하면서 사용되어지는 진짜 값 sum(1, 3) -> 1, 3 매개변수 : 들어 오는 인수를 어떻게 사용할지 함수 로직을 표현함에 있어서 인수와 로직을 연결하는 변수 sum(x, y) -> x, y 함수의 사용 변수에 담아서 사용하는 경우 반복되는 값을 연산하는 경우 함수 실행 값을 담아서 사용하는 것이 효율적임 // 함수 호출 : process 실행 & 변수에 return 값 저장 const ..
20210513 JavaSciprt 01 Node.js 개념, 환경설정(NVM, NPM, parcel-bundler, 유의적 버전), 데이터 타입, 연산자, 반복문, 조건문, 반복문, 변수유효범위(var, let, const), 형변환(자료형의 따른 연산)
JavaScript01 Node.js Node.js : Chrome V8 JS엔진으로 빌드된 JS 런타임 런타임 : 프로그래밍 언어가 동작하는 환경 환경종류 : 컴퓨터 or 브라우저 프론트 작업할 때 도와주는 것이 필요한데 이를 NodeJS를 통해서 가능 HTML, CSS, JS -> Browser에서만 동작 프론트 작업할 때 도와줄 수 있는 툴을 컴퓨터 환경에서 즉, NodeJS에서 활용할 수 있음 이를 browser에서 결과를 보여줄려면 HTML, CSS, JS로 변환 작업이 필요하고, 변환작업을 NodeJS(컴퓨터) 에서 가능 Node.js 환경설정 NVM (Node Version Manager) window는 NVM - Windows 설치 유의적 버전 : 3단계의 .을 통해 버전을 나타내는 표기법..
20210511 TypeSciprt 06 class : contructor(optional) & initialize(async), 접근제어자(private, protected), getter&setter, readonly, IndexSignature, static, singleton(싱글톤 패턴), 상속(extends, super), abstract
TypeScript06 Class 클래스? ojbect를 만드는 blueprint (설계도) 클래스 이전에 object를 만드는 기본적인 방법은 function JS는 es6 부터 class를 사용 가능 (접근 제한 키워드가 부족함) OPP을 위한 초석 TypeScript 에서는 클래스도 사용자가 만드는 타입의 하나임 (JS보다 강력한 class 기능) class 선언과 사용 class 선언&사용 : 기본 방법 class 키워드 사용 class 이름은 대문자 new 키워드를 이용하여 class를 통해 object를 생성할 수 있음 기본 property에 값을 할당하여 class를 만들고 object를 생성하면 기본 property가 초기값으로 설정되어 object가 만들어짐 class Per { name..
20210510 TypeSciprt 05, CompileOptions(strict 계열), Interface, Type alias
TypeScript05 CompileOptions : strict 엄격하게 type check하는 옵션들을 전부다 킴 --noImplicitAny, --noImplicitThis, --strictNullChecks, --strictFunctionTypes, --strictPropertyInitialization, --strictBindCallApply, --alwaysStrict "strict": { "description": "Enable all strict type checking options.", "type": "boolean", "default": false, "markdownDescription": "Enable all strict type checking options. See more: h..
20210510 CS50: 컴퓨팅 사고 - 정보를 표현하는 방법(2진법, 비트, 바이트, 트랜지스터, ASCII, UNICODE, RGB ), 알고리즘
네이버 커넥트재단에서 운영하는 부스트 코스라는 사이트의 모두를 위한 컴퓨터 과학 (CS50) By David J. Malan이라는 하버드대에서 강의한 CS 강의이다. 해당 글은 강의를 듣고서 정리한 내용 및 img 자료 입니다. (무료 강의) CS50 : 컴퓨팅 사고 (Computational Thinking, Scratch) 컴퓨터 과학 : 단지 문제를 해결하는 것 (어떠한 입력이 있을 때 그로부터 어떠한 출력을, 그 문제에 대한 답을 찾는 과정) 기계는 입출력에 대한 동의가 필요함 (약속) -> 정보 자체의 표현 방법 2진법 우리는 10진법으로 0 ~ 9 까지의 숫자를 가졌지만 , 기계는 0, 1 단 두개의 숫자 뿐이 없다. 그럼에도 컴퓨터는 글, 이미지, 소리, 영상 등 많은 것을 저장하고 있다. ..
20210507 TypeSciprt 04 tsconfig schema, compileOnSave, extends, files, exclude, include, compileOptions(types, typeRoots, target, lib, outDir, outFile, rootDir)
TypeScript04 tsconfig schema 각 option에 대한 설명 https://json.schemastore.org/tsconfig 최상위 프로퍼티 defintions을 기준으로 주로 사용하는 최상위 프로퍼티들 compileOnSave extends compileOptions : 어떤 식으로 컴파일 할 것인지에 대한 options files : 어떤 파일들을 컴파일 할 것인지에 대한 setting include exclude references compileOnSave file을 save하면 compile 하는 옵션(에디터에서 되는 설정이고 아무데서나 되는 것은 아님) true or false 값을 줄수 있고 default는 false 값 VS 2015 with ts 1.8.4 이상 또는..
