gaki

테스트

유병각 — Sat, 20 Jan 2024 08:59:44 +0900

테스트 글쓰기

wkfwkrehd?

const a =1 0;

리액트 - 주요 개념

유병각 — Thu, 21 Jul 2022 09:13:30 +0900

그 함수는 이전 state를 첫 번째 인자로 받아들일 것이고, 업데이트가 적용된 시점의 props를 두 번째 인자로 받습니다.

디자이너를 위한 UI, UX 디자인

유병각 — Wed, 20 Jul 2022 12:52:11 +0900

앱을 사용할 때 사용자가 누구인지 시작해서 사용자의 배경, 사회적 조건, 신체적 조건, 좋아하는 색상 및 싫어하는 색상까지 디자인 요소로 반영해야한다.

목적 의식 없이 디자인을 하는게 아니라 앱의 사용 계층을 예상하고 그들에 맞는 UI 를 만들어야한다.

화려한 디자인을 만들고 그 디자인을 자랑하는 식의 페이지가 아니라, 그에 맞게 UI 를 만들어야 좋은 서비스가 될 수 있다.

Strict Null Checks 를 사용해야하는 이유

유병각 — Mon, 18 Jul 2022 13:18:21 +0900

TypeScript (Strict Null Checks)

기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입니다. 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미합니다.

하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능합니다. (예외적으로 undefined는 void에 할당 가능합니다) 이건 많은 일반적인 에러를 방지하는 데 도움을 줍니다. 이 경우, string 또는 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있습니다.

OSI 7계층이란?

유병각 — Sun, 17 Jul 2022 20:46:37 +0900

OSI 란, Open Systems Interconnection Reference Model 의 약자이다.

이름만 봐서는 무슨 뜻인지, 어떤 역할을 하는지 잘 모르겠지만 대충 시스템 연결에 관련된 모델이라고 추측해 볼 수 있다.

1. 개요

OSI 는 7 계층으로 구분되어있다.

OSI 라는 건물에는 1층부터 7층 까지 있다.

이렇게 층을 나눈 이유는 통신이 일어나는 과정을 단계별로 파악 할 수 있기 때문이다. (코드를 짤 때 하나의 역할을 갖고있는 함수의 느낌)

이렇게 층을 나누면 당연하게도, 오류 발생 시 오류가 발생한 곳만 고치면 된다.

이러한 이점때문에 OSI 는 기능에 따라서 7개의 계층으로 구분되어 있다.

2. OSI 의 7 계층

OSI 의 7계층 그림

1계층 - 물리계층

이 계층에서는 전기적, 기계적 특성을 이용해서 통신케이블로 데이터를 전송하는 역할을 한다.

이 계층에서 사용되는 통신 단위는 비트이며 데이터는 0과 1로 나타내어진다.

이 계층에서는 단지 데이터를 전송만 할 뿐, 전송하는 데이터가 무엇인지, 어떤 에러가 있는지는 신경쓰지 않는다.

그냥 데이터만 전송할 수 있는 애이다. 이 계층에 속하는 장비는 통신 케이블, 리피터, 허브 등이 있다.

2계층 - 데이터 링크 계층

2계층에서는 1계층에서 송, 수신되는 데이터들의 질을 관리하는 역할을 한다.

정보의 오류와 흐름을 관리해 안전한 정보의 전달을 수행할 수 있도록 도와준다.

이 계층에서는 맥 주소를 가지고 통신하게 된다.

이 계층에서 전송되는 단위를 프레임이라고하고, 대표적인 장비로는 브리지, 스위치 등이 있다.

2계층에서는 물리 계층에서 발생 할 수 있는 오류를 찾아내고, 수정하는데 필요한 기능적 수단을 제공한다.

주소값은 MAC 주소를 사용하는데 이는 물리적인 네트워크마다 다른 독립적인 값이다.

데이터 링크계층은 고유한 물리적인 주소를 가지고 있다.

프레임에 주소부여(MAC - 물리적주소)

에러검출/재전송/흐름제어

3계층 - 네트워크 계층

물리 계층(1계층)과 데이터 링크 계층(2계층) 에서는 안정적인 데이터를 송,수신하는 역할을 했다면 3계층은

이 데이터를 목적지까지 라우팅하는 기능을 수행한다. 즉, 목적지를 설정해 송, 수신하는 경로를 탐색하고, 탐색한 경로로 패킷을 전달해주는것이 이 계층의 역할이다.

이 계층의 대표적인 장비는 라우터이다.

정보를 전달할 목적지를 알기위해서, 당연히 이 계층은 IP 주소를 사용한다.

네트워크 계층은 여러개의 노드를 거칠때마다 경로를 찾아주는 역할을 하는 계층이다.

다른 네트워크와 데이터를 주고받으면서 인터넷이 가능하게 만드는 계층이다.

4계층 - 전송 계층

커밋하지 않은 상태에서 다른 branch 로 checkout 시 발생하는 상황

유병각 — Fri, 8 Jul 2022 09:15:22 +0900

https://velog.io/@junsikchoi/TIL-Git-%EC%BB%A4%EB%B0%8B-%EC%97%86%EC%9D%B4-Checkout-%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4-%EC%9D%BC%EC%9D%B4-%EC%9D%BC%EC%96%B4%EB%82%A0%EA%B9%8C

[css] css 선택자, 합성자 (Selector, combinator)

유병각 — Tue, 5 Jul 2022 17:06:19 +0900

선택자

1. Universal selector (전체 선택자)

사용법: *

모든 html 요소들을 선택한다.

예시:

* {

margin: 0;

};

2. Type selector (타입 선택자)

사용법: html element 이름으로 선택

특정 html element 를 선택한다.

예시:

button {

width: 100px;

}

3. Class Selector (클래스 선택자)

사용법: 클래스 이름 앞에 . 을 붙여서 사용

특정 클래스 elements 를 선택한다.

예시:

.table {

width: 200px;

height: 200px;

};

4. ID Selector (아이디 선택자)

사용법: 아이디 앞에 # 을 붙여서 사용

특정 Id 의 elements 를 선택한다.

예시:

#my_id {

width: 200px;

};

5. Attribute Selector (속성 선택자)

사용법: element 의 속성과 속성 값을 이용해서 element 를 선택한다.

예시:

a[href^="www"] {

width: 200px;

}

해석: a 엘리먼트 중에 href 의 속성 값이 www 로 시작하는 모든 앨리먼트들의 width 를 200px 으로 만든다.

attribute selector 에 관한 자세한 정보는 아래 링크에

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Attribute selectors - CSS: Cascading Style Sheets | MDN

The CSS attribute selector matches elements based on the presence or value of a given attribute.

developer.mozilla.org

합성자 (Combinators)

1. Descendant combinator

모든 자식 엘리먼트들 중 뒤에 있는 셀렉터에 해당하는 엘리먼트들의 css 를 변경

div p {

width: 100px;

}

해석 : div 의 모든 자식 노드들 (손자 노드, 증손자 노드 등 모든 자식 노드 포함) 중 p 에 select 되는 노드들의 width 를 100px 로 한다.

2. Child combinator

정확히 앞의 셀렉터에 선택된 엘리먼트로부터 1단계 밑 자식들 중에 뒤에 있는 셀렉터에 해당하는 엘리먼트들의 css 를 변경

ul > li {

width: 50px;

};

해석: ul 의 바로 아래 자손들 중 li 에 해당하는 엘리먼트들의 width 를 50px 로 변경

3. General sibling combinator

앞의 셀렉터보다 순서상 뒤에 있는 형제 엘리먼트들 중에서 뒤의 셀렉터에 해당하는 엘리먼트들의 css 를 변경

.red_list ~ li {

width : 400px;

};

해석: red_list 라는 클래스를 가진 엘리먼트보다 뒤에 있는 엘리먼트들 중에서 li 에 해당하는 모든 엘리먼트들의 width 를 400px 로 변경

4. Adjacent sibling combinator

앞의 셀렉터와 바로 뒤에 붙어있는 형제, 두번째 셀렉터에 해당하는 엘리먼트들의 css 를 변경

div + p {

width: 100px;

};

div 엘리먼트 바로 뒤에 나오는 형제 p 엘리먼트의 css 를 변경한다.

[node] nvm use not working ( 노드 버전 변경 안될때) zsh: bad CPU type in executable: node 에러핸들링

유병각 — Tue, 5 Jul 2022 10:24:55 +0900

노드의 버전 변경이 안될때 해결법

(M1 맥북기준)

nvm deactivate

위 명령어를 터미널에 입력하면, 현재 사용하고있는 노드 버전이 deactivate 됨

그 후, nvm use "원하는 노드버전" 을 하면 원하는 노드버전으로 변경이됨.

zsh: bad CPU type in executable: node

I have installed nvm using brew. After that, I installed node version of 16 through nvm and check the current version using node -v to see whether the node is working properly. However, when I inst...

stackoverflow.com

근데 위와 같은 에러가 뜨면, (m1 맥북이면 위 에러가 뜸)

softwareupdate --install-rosetta

위명령어를 터미널에 입력하고, 다시한번 nvm use "노드버전" 을 하면 정상적으로 원하는 노드로 변경이됨

[ts] 클래스 protected 프로퍼티에 관해서 알아보자.

유병각 — Tue, 5 Jul 2022 10:14:50 +0900

안녕하세요. gaki 입니다.

오늘은 자바스크립트 클래스의 protected 에 관해서 다뤄보겠습니다.

A 라는 클래스에 protected 로 정의된 property 와 method 가 있다고 가정합시다.

그럼 A 라는 클래스 내부에서는 당연히 protected 로 정의된 것들에 접근할 수 있습니다.

하지만 외부에서는 A 라는 클래스 안에 protected 된 것들에 접근할 수 없습니다. 여기까지는 private 과 똑같은데요.

protected 와 private 의 차이점은, private 는 private 된 속성을 오직 해당 클래스 내부에서만 접근 할 수 있다는 점이지만,

protected 는 해당 속성을 해당 클래스 내부 + 자식 클래스 에서도 접근 할 수 있다는 점이 다릅니다.

class Person {
    region: string;
    name: string;
    age: number;
    protected time:string;
    private _pri: number;

    constructor(name, age, region) {
        this.name = name;
        this.age = age;
        this.region = region;
        this.time = "10:21";
        this._pri = 10;
    }

    eat(food) {
        console.log(`${this.name} is eating ${food}`);
    }

    get pri() {
        return this._pri;
    }

    set pri(num:number) {
        this._pri = num;
    }

    protected sleep() {
        console.log(this.time);
        console.log("sleep");
    }
}

class Gak extends Person {
    name: string;
    age: number;
    region: string;
    h : number;

    constructor(name, age, region, h) {
        super(name, age, region);
        this.h = h;
    }

    sleepp() {
        this.sleep();
        console.log(this.time);
    }
}

const gak = new Gak("gak", 15, "seoul", 133);

// private property getter test
console.log(gak.pri);
// private property setter test
gak.pri = 1111;
console.log(gak.pri);

// protected method test on child class
gak.sleepp();

? private 속성을 getter 와 setter 를 통해 클래스 외부에서 변경 할 수 있는지 ? => 가능하다.

[ts] 클래스 extends, implements 에 대해서

유병각 — Mon, 4 Jul 2022 17:36:32 +0900

계기: 코드를 보다가 클래스의 extends 와 Implements 가 나왔는데, 특히 implements 에 대해서 잘 몰라서 찾아봤습니다.

참고링크 : https://stackoverflow.com/questions/38834625/whats-the-difference-between-extends-and-implements-in-typescript

What's the difference between 'extends' and 'implements' in TypeScript

I would like to know what Man and Child have in common and how they differ. class Person { name: string; age: number; } class Child extends Person {} class Man implements Person {}

stackoverflow.com

1. class 의 extends 기능

클래스의 extends 는 클래스를 확장시킬 때 사용됩니다. 그리고 부모, 자식 관계가 형성됩니다. (부모 , 자식 관계의 프로토타입 체인이 형성됨)

class Person {
    region: string;
    name: string;
    age: number;

    constructor(name, age, region) {
        this.name = name;
        this.age = age;
        this.region = region;
    }

    eat(food) {
        console.log(`${this.name} is eating ${food}`);
    }
}

class Gak extends Person {
    name: string;
    age: number;
    region: string;
    h : number;

    constructor(name, age, region, h) {
        super(name, age, region);
        this.h = h;
    }
}

const gak = new Gak("gak", 15, "seoul", 133);
console.log(gak);

위의 코드에서 Gak 이라는 클래스는 Person 클래스를 확장시켜서 만들었습니다.

즉, Gak 클래스의 인스턴스는 Person 클래스의 인스턴스의 값들을 기본으로 가지고, 거기다 추가로 특정 기능을 가집니다.

즉, Gak 의 부모가 Person 이 되며, Gak 인스턴스에서 Person 에 있는 속성이나 메서드에 접근했을때 프로토타입 체인을 타고 부모에게로 가서 사실상 부모인 Person 의 속성이나 메서드에 접근하는 것이지요.

2. class 의 implements 기능

클래스의 implements 는 (내가 공부한 바로는) 타입스크립트 interface 를 값으로 받으며, 해당 값으로 클래스의 타입을 설정하는 역할을 한다.

interface Person {
    name: string;
    age: string;
    eat(): void;
}

class SuperMan implements Person{
    name: string;
    age: string;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    eat() {
        console.log(this.name);
    }
}

const Jack = new SuperMan("Jack", "15");
Jack.eat();

SuperMan 이라는 클래스는 Person 이라는 interface 를 Implements(도구) 로 받는다.

이때 SuperMan 클래스의 인스턴스에는 최소한 Person Interface 에 속한 내용들이 존재해야한다.