Blog | 📝 TIL(Today I Learned)

201107

2020년 11월 7일 · 약 6분

younho9

Strict Mode#

ES5 부터 지원
전역 또는 함수 body의 선두에 use strict 추가
암묵적 전역 변수 방지

변수, 함수, 매개변수의 삭제 방지

function foo(a) {    'use strict';
    delete a;    // SyntaxError: Delete of an unqualified identifier in strict mode.}

매개변수 이름의 중복 방지
with 문의 사용

일반 함수의 this 에 undefined 바인딩

'use strict';
function foo() {    console.log(this);}
foo(); // undefined

function foo() {    console.log(this);}
foo(); // Window

DOCTYPE#

Document Type의 약자로 문서가 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바로 표시할 수 있도록 해주는 것이다.

☝ DOCTYPE 은 레거시한 이유로 필요하다. 생략하면 브라우저가 문서를 quirks mode(호환 모드) 로 렌더링하고, 포함하면 브라우저가 문서를 no-quirks-mode(또는 standard mode) 로 렌더링 한다.

quirks mode vs standard mode#

`quirks mode`#

오래된 문서가 최신 브라우저에서 "비표준 모드"(과거 Navigator 4 or IE 5)를 적용해서 동작한다.
최신 브라우저에서 깨지지 않고 보여지게 되지만, 브라우저 별로 다르게 보여지게된다.

`standard mode`#

표준 HTML, CSS를 적용하여 렌더링한다.

DTD (Document Type Definition)#

문서 형식을 정의한 것으로 DOCTYPE 을 명시할 때 사용할 수 있다. DTD 에는 다음과 같은 것들이 있다. 모든 타입의 특성을 다 파악하는 것은 무리가 있을 것 같고, 현재 시점에서 HTML5 문서를 작성하기 위해 <!DOCTYPE html> 을 사용하는 것이 최선이다.

XHTML 1.1
XHTML 1.0
- Strict DTD
- Transitional DTD
- Frameset DTD
HTML 4.01
- Strict DTD
- Transitional DTD
- Frameset DTD
HTML 5

크로스 브라우징#

바벨#

바벨은 현재 및 이전 브라우저 또는 환경에서 ES6 이상의 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는데 사용되는 도구 모음(toolchain)이다.
바벨은 세 단계로 빌드를 진행한다.
1. 파싱 (Parsing) : 코드를 읽고 추상 구문트리(AST)로 변환하는 단계
2. 변환 (Transforming) : 바벨 플러그인이 추상 구문 트리를 변경하는 단계
3. 출력 (Printing) : 변경된 결과물을 출력하는 단계
컴파일러로써 바벨 플러그인(구문 변형)과 폴리필이 하는 일(내장된 함수/객체 구현 )을 구분하는 것이 중요하다.
- 화살표 함수
  구문 변형으로 이전 버전의 코드로 만들 수 있다.
```
// 컴파일 전const sum = (a, b) => a + b;
```
```
// 컴파일 후'use strict';
var sum = function sum(a, b) {    return a + b;};
```
- Promise
  Promise 는 ES6에서 추가된 표준 내장 객체(standard built-in object)이다. 따라서 구문 변형으로 이전 버전의 코드로 만드는 것이 불가능하기 때문에, 이를 위한 폴리필을 추가해주어야 한다.
바벨의 useBuiltIns 옵션
- 기본적으로 import 'core-js' 는 core-js 의 모든 폴리필 가져옴
- useBuiltIns: entry 옵션을 주면 import 'core-js' 에서 "대상 브라우저에 필요한" 폴리필을 모두 가져옴
- useBuiltIns: usage 옵션을 주면 import 를 하지 않아도 코드를 정적 분석하여, 코드에서 사용하고 있는 폴리필만 가져온다.
  - 지원하려는 "브라우저 마다" 필요한 폴리필만 import 하려면 어떻게 해야하는가? ex) ie, chrome이 타겟인 경우 promise를 사용하면, promise 폴리필을 import 해야하지만, 이는 chrome에게는 불필요하다.
  - 번들에 포함시키는 것까지 최적화 하려면 런타임 검사기를 사용하거나 User-agent 기반 감지를 해야 되는데, 이는 리소스랑 시간이 많이 든다.
    zloirock/core-js
    [Feature Request] Polyfill using dynamic import. · Issue #518 · zloirock/core-js
  - module , nomodule 의 지원 여부에 따라 번들링을 나눠 최적화하는 방법도있다.
    Serve modern code to modern browsers for faster page loads

201106

2020년 11월 6일 · 약 4분

Younho Choo

younho9

일반 함수 vs 화살표 함수#

const shape = {    radius: 10,    diameter() {        return this.radius * 2;    },    arrowDiameter: () => {        return this.radius * 2;    },};
console.log(shape.diameter());// 20console.log(shape.arrowDiameter());// NaN
const diameter = shape.diameter;const arrowDiameter = shape.arrowDiameter;
console.log(diameter());// NaNconsole.log(arrowDiameter());// NaN

function Shape() {    this.radius = 10;    this.diameter = function () {        return this.radius * 2;    };    this.arrowDiameter = () => {        return this.radius * 2;    };}
const shape = new Shape();
console.log(shape.diameter());// 20console.log(shape.arrowDiameter());// 20
const diameter = shape.diameter;const arrowDiameter = shape.arrowDiameter;
console.log(diameter());// NaNconsole.log(arrowDiameter());// 20

일반 함수는 호출할 때 동적으로 this 를 바인딩한다.
화살표 함수는 선언할 때 정적으로 this 를 바인딩한다. (언제나 상위 스코프의 this 를 가리킨다.)
일반 함수는 prototype 프로퍼티를 가진다. ⇒ constructor 함수로 사용될 수 있다.
화살표 함수는 prototype 프로퍼티를 가지고 있지 않다. ⇒ constructor 함수로사용될 수 없다.

생성자 함수(constructor)와 프로토타입(prototype)#

function Person(name, age) {    this.name = name;    this.age = age;}
// Person.prototype = { constructor: function Person(...) { ... } }// Person.prototype.constructor = function Person(...) { ... }
const foo = new Person('foo', 30);// foo: Person { name: 'foo', age: 30 }// foo.__proto__: { constructor: function Person(...) { ... } }// foo.__proto__.constructor = function Person(...) { ... }

2020-11-06-201106-image-0

2020-11-06-201106-image-1

☝ __proto__ 는 ECMAScript의 스펙이 아닌 일부 모던 브라우저가 구현한 것으로, [[Prototype]] 를 접근하는 속성이다.

function Person(name) {    this.name = name;    this.getName = function () {        return this.name;    };}
console.log(Person.prototype); // { constructor: function Person(name) { ... } }
function Child(name, age) {    Person.call(this, name);    this.age = age;    this.getAge = function () {        return this.age;    };}
console.log(Child.prototype); // { constructor: function Child(name, age) { ... } }
Child.prototype = Object.create(Person.prototype);
console.log(Object.create(Person.prototype)); // Person {}console.log(Child.prototype); // Person {}console.log(Child.prototype.constructor); // function Person(name) { ... }
Child.prototype.constructor = Child;
console.log(Child.prototype);// Person { constructor: function Child(name, age) { ... } }
var child = new Child('foo', 20);
console.log(child.getName()); // 'foo'console.log(child.getAge()); // 20

클래스 문법은 단지 "구문적 설탕" 인가?#

class User {    constructor(name) {        this.name = name;    }
    sayHi() {        alert(this.name);    }}
let user = new User('John');user.sayHi();

function User(name) {    this.name = name;}
User.prototype.sayHi = function () {    alert(this.name);};
let user = new User('John');user.sayHi();

ES6의 클래스 문법을 사용하는 것과 일치한 결과를 기존 function + prototype 문법의 조합으로 만들 수 있기 때문에 일부 사람들은 단지 클래스 문법을 "구문적 설탕" (syntax sugar)라고 말한다.

하지만 몇 가지 중요한 차이가 있다.

class 문법을 사용해서 만든 함수엔 특수 내부 프로퍼티인 [[FunctionKind]]: "classConstructor" 가 이름표처럼 붙어서, 이 클래스 생성자를 new 와 함께 호출하지 않으면 에러가 발생한다.
클래스의 메소드는 non-enumerable 로, for ... in 구문 등의 객체 순회에서메소드는 순회하지 않는다. (enumerable 플래그가 false 이다.)
클래스는 항상 use strict 모드이다.
이외에도 getter, setter, 믹스인 등의 기능이 있다.

클래스와 함수에서의 `new` 연산자 동작#

2020-11-06-201106-image-2

Python 가상 환경 설치

2020년 9월 25일 · 약 1분

Younho Choo

younho9

가상 환경 생성#

python3 -m venv .venv

가상 환경 활성화#

source .venv/bin/activate

확인하기#

which python

참고자료#

파이썬에서 venv로 가상 환경 사용하기

Python 배포

2020년 9월 15일 · 약 1분

Younho Choo

younho9

파이썬(PYTHON) #25_ 파이썬 패키지 등록하기 (pip 배포하기)

Pypi 에 내가 만든 패키지 배포하면서 알게된거

Github Action + TIL crawler

2020년 9월 11일 · 약 1분

Younho Choo

younho9

Events that trigger workflows

Crontab.guru - The cron schedule expression editor

▶️ Github Actions에 추가된 schedule 기능으로 Crontab 대체하기

우아한테크캠프 10일차

2020년 7월 15일 · 약 1분

Younho Choo

younho9

1. 현장 이해하고 대응하기#

2. 프로젝트를 통해서 JS익히기#

3. 향상된 UX를 목표로 개발하기#

4. 함께 자라기#

함께 학습하기
간단한 프로젝트 함께 만들어보기
피드백
피곤하지만 함께 맞춰복
업무를 분석하고 github issue/project로 일감 만들어서 관리하기
PR 보내기
코드리뷰 하기
git branch 전략세워보기

5. 기초는 튼튼하게#

지속가능한 공부
TCP/IP를 포함한 HTTP 중심 네트워크 공부
백엔드 접해보기

6. HTML CSS에서 FE엔지니어로#

200712

2020년 7월 12일 · 약 2분

Younho Choo

younho9

CSS#

@import : 다른 스타일 시트에서 스타일 규칙을 가져옴

사용자 지정 CSS 속성(CSS 변수, 종속 변수)

선언

element {    --main-bg-color: brown;}

사용

element {    background-color: var(--main-bg-color);}

하위 호환성 및 프론트엔드 빌드#

Can I use... Support tables for HTML5, CSS3, etc

ECMAScript 6 compatibility table

transpilling을 통해서 하위 브라우저에서도 동작하게 문법을 바꾼다.
polyfill을 통해서 지원하지 않는 native API를 다른 코드로 동작하게 한다.

npm init -y : npm init -—yes 로 npm init 시에 나오는 설정에 모두 yes로생략하여 진행함
--save-dev is used to save the package for development purpose. Example: unit tests, minification..
--save is used to save the package required for the application to run.

babel#

하위 브라우저가 지원가능하도록 transpiling

Webpack#

모듈 번들러

JavaScript modules

var path = require('path');
module.exports = {    mode: 'none',    entry: './index.js',    output: {        filename: 'bundle.js',        path: path.resolve(__dirname, 'dist'),    },    module: {        rules: [            {                test: /\.css$/,                use: ['style-loader', 'css-loader'],            },        ],    },};

mode : development, production, none 모드 중 설정
entry : 시작점
output : 결과물
module : 로더

DOM#

200711

2020년 7월 11일 · 약 2분

Younho Choo

younho9

HTTP#

HyperText Transfer Protocol

2020-07-11-200711-image-0

2020-07-11-200711-image-1

클라이언트는 서버에게 HTML 파일을 요청(Request), 서버는 응답(Response)

Request Message#

GET /1.html HTTP/1.1 => 요청행
Host: localhost:8080 => 네트워크의 컴퓨터 식별하는 이름
User-Agent : ... => 유저 컴퓨터, 웹브라우저 정보
Accept-Encoding : gzip, deflate, br => 데이터 양이 많으면 압축해서 전송하는데, 어떤 압축방식을 지원하는지 설명
If-Modified-Since: => 마지막으로 페이지를 다운받은게 언제인지 확인하여 다시 다운받을지 결정
<blank line> => 블랭크로 헤더와 바디 구분
Request Message Body

Response Message#

2020-07-11-200711-image-2

status : 서버의 응답 결과를 알려줌.
- version : HTTP 1.1 ...
- status code : 100, 200, 403, 404,
  List of HTTP status codes

그 외#

HTTPS, SSL
Cache
cookie
web storage
proxy

우아한테크캠프 8일차

2020년 7월 10일 · 약 4분

Younho Choo

younho9

코드리뷰#

node 로 백엔드를 하다보면 shared 폴더를 만들고 환경을 잘 갖추고 백과 프론트가 공유하기도 한다.

HTML은 구조
- p 태그를 쓸 때는 paragraph인지
- 글자를 크게하자 하고 h3를 쓰면 안된다.
- list 태그 → 다음 홈페이지의 뉴스 리스트
CSS는 스타일

프로젝트 구조#

CSS, JS를 분리하는 경향

현대의 프레임워크는 컴포넌트 별로, 다른 방식으로 모으기도 함.

개발할 땐 항상 나눠서

소프트웨어가 항상 변경된다는 가정을 하고 개발하라. 서비스 코드가 변경이 된다.

좋은 코드를 만드는 방법, 변경이 용이한 코드. 변경을 했을 때 다른 코드에 영향을주지 않는 코드

변경될 때 영향을 덜 주고 수정도 쉽게 되고 기능도 추가되고 ...

나눠서 역할별로

CSS 공통 부분 > Global, common ...

모든 리팩토링은 중복부터

JS 파일 자체는 모듈이기 때문에, is 등이 들어가면 어색해보일 수 있다.

매직넘버를 없애라 - 코드에서 숫자, 문자열을 쓸 때 분리해라.

JS에서 CSS를 조작할 일이 있을 때 → classList에 remove, add, toggle 등으로 조작한다. 스타일을 직접 조작하지 않음.

유지보수가 가능한 코드
가독성이 좋은 코드
테스트가 쉬운 코드
역할이 명확한 함수
접근할 일이 많으면 변수에 담아서
이벤트를 어디서 등록해야 할까?
조건도 함수로 나눠라

캠프의 목적#

어떻게 모듈화를 잘할까
어떻게 변경이 용이한 코드를 만들까
프레임워크를 써도 모듈화가 자동으로 되는게 아니다

변수명#

오픈소스를 자주 보면 도움이 된다.
좋은 회사면 동작하는 서비스 소스를 볼 수 있다

나만의 유틸리티를 만들어가는 걸 해보세요.

함수를 범용적으로
인풋이 있고 아웃풋이 있는 것이 테스트가 편한 코드

찾아보기#

setInterval 단점
왜 setTimeout을 재귀적으로 사용하는지
ES 모듈

렌더링을 자주 일으키지 말아라
함수가 짧아서 좋다
과도할 정도로 나누는게 낫다

ES 모듈#

프론트에서도 import export를 사용할 수 있다.
모듈 관리는 의존성 관리이다.

util은 범용성 있는 것, 비즈니스 로직과 무관한

백엔드에서 매직넘버를 사용하면 크리티컬한 이슈가 생긴다.

회원가입 로그인

→ 클라이언트에서 validation, 서버에서 validation을 해줘야 한다.

도구를 이해하고 써야한다.

aspective-oriented programming#

실제로 중요한건 유지 보수, hotfix가 자주 일어난다.

우아한테크캠프 4일차

2020년 7월 6일 · 약 3분

Younho Choo

younho9

팀 프로젝트에 대해...#

스프린트 회의#

팀의 목표 수립, 위키 등록
개발해야 할 내용을 feature 단위로 추리고 issue 항목에 등록

스크럼#

상태, 어제 한 일, 오늘 한 일을 5분 내로 짧게 이야기
서로의 건강, 심리, 개발 진행 상태를 나누고 이해하기 위함
결과를 위키에 매일 작성

데모#

미니 세미나#

팀 주간 회고#

서로 격려하고 피드백 나누며 함께 성장하기
이번 주에 잘한 점, 아쉬운 점

배민상회 로그인/회원가입 페이지 구현#

그라운드 룰#

깃 셋업#

브랜치#

케밥 케이스

master
develop
frontend
backend
feature/issue-#
document

파일명 / 폴더명#

케밥 케이스

커밋 - 타입별 커밋 메시지 머릿말 붙이기
git add . , git commit -m "" 최대한 자제해보기

ex) [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test]

컨벤셔널 커밋을 참조함.

Conventional Commits

PR 방식#

내가 보낸 PR은 상대방이 Squash and Merge 하기

이슈로 나누기#

GitHub로 프로젝트 관리하기 Part1 - 이슈 발급 부터 코드리뷰까지 | Popit

위키#

기능 명세화#

프로젝트 진행 방법#

월요일

화요일 - 몽촌토성역 큰집 11층, 9시

수요일, 목요일 - 범계역 스타벅스, 9시

목요일 완성을 목표로, 금요일 오전에는 문서 정리나, 리팩토링 정도만

금요일 오전 11시까지

배민상회 회원가입/로그인#

아이디 input

Strict Mode#

DOCTYPE#

quirks mode vs standard mode#

quirks mode#

standard mode#

DTD (Document Type Definition)#

크로스 브라우징#

바벨#

일반 함수 vs 화살표 함수#

생성자 함수(constructor)와 프로토타입(prototype)#

클래스 문법은 단지 "구문적 설탕" 인가?#

클래스와 함수에서의 new 연산자 동작#

가상 환경 생성#

가상 환경 활성화#

확인하기#

참고자료#

1. 현장 이해하고 대응하기#

2. 프로젝트를 통해서 JS익히기#

3. 향상된 UX를 목표로 개발하기#

4. 함께 자라기#

5. 기초는 튼튼하게#

6. HTML CSS에서 FE엔지니어로#

CSS#

하위 호환성 및 프론트엔드 빌드#

babel#

Webpack#

DOM#

HTTP#

Request Message#

Response Message#

그 외#

코드리뷰#

프로젝트 구조#

캠프의 목적#

변수명#

찾아보기#

ES 모듈#

aspective-oriented programming#

팀 프로젝트에 대해...#

스프린트 회의#

스크럼#

데모#

미니 세미나#

팀 주간 회고#

배민상회 로그인/회원가입 페이지 구현#

그라운드 룰#

깃 셋업#

브랜치#

파일명 / 폴더명#

PR 방식#

이슈로 나누기#

위키#

기능 명세화#

프로젝트 진행 방법#

배민상회 회원가입/로그인#

`quirks mode`#

`standard mode`#

클래스와 함수에서의 `new` 연산자 동작#