우당탕탕 아장아장

타입스크립트 스터디 - Learning TypeScript 1장

튼튼한간 — Sun, 23 Apr 2023 18:28:12 +0900

1장 자바스크립트에서 타입스크립트로

타입스크립트의 시발점인 자바스크립트에 대하여

1.1 자바스크립트의 역사

- 1995년 넷스케이프의 브레던 아이크가 10일 만에 설계함

- 2015년부터 매년 새로운 버전을 출시하며 임베디드 애플리케이션 그리고 서버 런타임을 포함한 다양한 환경에서 새로운 버전과 이전 버전과의 호환성을 수십 년 동안 유지

1.2 바닐라 자바스크립트의 함정

- 중요한 언어 확장이나 프레임워크 없이 자바스크립트를 사용하는 것을 '바닐라'라고 부름. 즉 순수한 자바스크립트를 의미

1.2.1 값 비싼 자유

- 가장 큰 불만은 핵심 기능

- 코드의 자유는 자바스크립트를 재밌게 만들기도 하지만, 코드를 안전하게 실행하려고 할 때는 상당한 고통을 동반

1.2.2 부족한 문서

- 언어 사양에는 함수의 매개변수, 함수 반환, 변수 또는 다른 구성 요소의 의미를 설명하는 표준화된 내용이 없음

- 많은 개발자가 블록 주석으로 함수와 변수를 설명하는 JSDoc 표준을 채택

*JSDoc : 자바스크립트 소스 코드에 주석을 달기 위해 사용하는 마크업 언어

- 규모가 있는 코드베이스에서는 사용하기 불편

1.2.3 부족한 개발자 도구

- 자바스크립트는 타입을 식별하는 내장된 방법을 제공하지 않고, 코드가 JSDoc 주석에서 쉽게 분리되기 때문에 코드베이스에 대한 대규모 변경을 자동화하거나 통찰력을 얻기가 매우 어려움

1.3 타입스크립트

- 타입스크립트는 2010년대 초에 마이크로소프트 내부에서 만들어진 후 2012년에 출시 및 오픈소스화 됨

- 프로그래밍 언어, 타입 검사기, 컴파일러, 언어 서비스 네 가지로 설명 됨

1.4 타입스크립트 플레이그라운드에서 시작하기

- 타입스크립트 공식 웹사이트는 플레이그라운드 편집기를 제공

- 편집기에 코드를 입력할 수 있고, IDE(통신 개발 환경)에서 로컬로 타입스크립트 작업을 할 때 보게 되는 동일한 편집기 제안 사항도 확인 가능

1.4.1 타입스크립트 실전

- 코드를 입력할 때 편집기에서 간단한 오류를 미리 알려줌

1.4.2 제한을 통한 자유

- 매개변수와 변수에 제공되는 값의 타입을 지정할 수 있음

- 잘못된 수의 인수를 사용해서 함수를 호출하는 것은 타입스크립트가 제한하는 자바스크립트가 가진 일종의 근시안적인 자유

1.4.3 정확한 문서화

- 타입스크립트는 구문을 적용해 객체의 형태를 설명하고, 우수하고 강력한 시스템을 이용해 객체가 어떻게 보이는지 설명

1.4.4 더 강력한 개발자 도구

- VS Code와 같은 편집기에서 타입스크립트로 코드를 작성하면 편집기는 타입스크립트를 더 깊이 있게 이해

- 코드 이해를 위해 타입스크립트의 타입 검사기를 추가하면 이미 작성한 코드에 대해서도 유용한 제안을 제공

1.4.5 구문 컴파일하기

- 타입스크립트 컴파일러에 타입스크립트 구문을 입력하면 타입을 검사한 후 작성된 코드에 해당하는 자바스크립트를 내보냄

1.5 로컬에서 시작하기

- 컴퓨터에 Node.js가 설치되어 있으면 타입스크립트 실행 가능

1.5.1 로컬에서 실행하기

- 컴퓨터 아무 곳에나 폴더를 만들고 다음 명령어를 실해해 신규 tsconfig.json 구성 파일을 생성

tsc --init

해당 파일은 타입스크립트가 코드를 분석할 때 사용하는 설정을 선언

1.5.2 편집기 기능

- tsconfig.json 파일을 생성할 때 또 다른 이점은 편집기에서 특정 폴더를 열었을 때, 편집기가 이제 해당 폴더를 타입스크립트 프로젝트로 인식한다는 것

1.6 타입스크립트에 대한 오해

1.6.1 잘못된 코드 해결책

- 타입스크립트는 자바스크립트 코드를 구조화하는 데 도움은 되지만, 타입 안정성 강화를 제외하고는 해당 구조가 어떻게 보여야 하는지에 대해서는 어떤 것도 강요하지 않음

- 타입스크립트는 특정 대상만을 위한 독단적인 프레임워크가 아닌 모든 개발자가 사용할 수 있는 프로그래밍 언어

1.6.2 자바스크립트로의 확장

-타입스크립트의 설계 목표 : 현재와 미래의 ECMA스크립트 제안에 맞춘다. 모든 자바스크립트 코드의 런타임 동작을 유지한다.

1.6.3 자바스크립트보다 느림

- 운영 프레임워크 대다수는 타입스크립트의 컴파일러를 전혀 사용하지 않음

- 대신 트랜스파일을 위한 별도의 도구를 사용하고 타입스크립트는 타입 검사용으로만 사용

- 타입스크립트는 코드를 빌드하는 데 시간이 조금 더 걸림

1.6.4 진화가 끝남

- 타입스크립트의 기본 원칙은 거의 변함이 없겠지맘ㄴ, 오류 메시지, 더 멋진 기능 그리고 편집기와의 통합은 시간이 지남에 따라 개선될 것

1.7 마치며

타입스크립트 스터디 - Learning TypeScript 2장

튼튼한간 — Mon, 10 Apr 2023 21:59:48 +0900

2.1 타입의 종류

- '타입'은 자바스크립트에서 다루는 값의 형태에 대한 설명

- '형태'란 값에 존재하는 속성과 메서드 그리고 내장되어 있는 typeof 연산가자 설명하는 것을 의미

- 타입스크립트의 가장 기본적인 타입 :

➡ 일곱 가지 원시 타입 null, undefined, boolean, string, number, bigint, symbl

변수의 원시 타입을 잊어버렸다면 타입스크립트 플레이그라운드 혹은 IDE에서 원싯값을 갖는 let 변수를 입력하고 변수 이름 위에 마우스 가져가면 확인 가능

2.1.1 타입 시스템

- 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집함

➡ 기본적인 작동

1. 코드를 읽고 존재하는 모든 타입과 값을 이해

2. 각 값이 초기 선언에서 가질 수 있는 타입을 확인

3. 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인

4. 겂의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시

2.1.2 오류 종류

- 구문 오류 : 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우

tip : 타입스크립트는 구문 오류와는 상관없이 원하는 결과값이 아닐 수 있으므로 실행하기 전에 구문 오류를 수정

- 타입 오류 : 타입 검사기에 따라 일치하지 않는 것이 감지된 경우

타입스크립트는 타입 오류가 있음에도 불구하고 자바스크립트 코드를 출력할 수 있지만, 출력된 자밧크립트 코드가 원하는 대로 실행되지 않을 가능성이 있다는 신호를 타입 오류로 알려줌. 자바스크립트로 실행하기 전에 타입 오류를 확인하고 발견된 문제를 먼저 해결하는 것이 가장 좋음

2.2 할당 가능성

- 타입스크립트는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정

- 변수에 동일한 타입의 다른 값이 할당될 때는 문제❌

- 타입스크립트 변수에 다른 타입의 값이 할당되면 타입 오류

- 타입스크립트에서 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것 : 할당 가능성(assignability)

➡ 즉, 전달된 값이 예상되 ㄴ타입으로 할당 가능한지 여부를 확인

2.2.1 할당 가능성 오류 이해하기

- 'Type ... is not assignable to type ...' 형태의 오류는 타입스크립트 코드를 작성할 때 만나게 되는 가장 일반적인 오류

- 첫 번째 type은 코드에서 변수에 할당하려고 시도하는 값

- 두 번째 type은 첫 번째 타입이 할당되는 변수

2.3 타입 애너테이션

- 떄로는 변수에 타입스크립트가 읽어야할 초깃값이 없는 경우도 있는데, 기본적으로 변수를 암묵적인 any 타입으로 간주

(세상의 모든 것이 될 수 있음)!

- 초기 타입을 유추할 수 없는 변수는 진화하는 any라고 부름

- 타입스크립트는 초깃값을 할당하지 않고도 변수 타입을 선언할 수 있는 구문인 타입 에너테이션을 제공

- 변수 이름 뒤에 배치되며 콜론과 타입 이름을 차례대로 기재

let rocker: string;
rocker = "Joan Jett";

- 런타임 코드에 영향을 주지 않고, 유효한 자바스크립트 구문도 아님, tsc 명령어를 실행해 타입스크립트 소스 코드를 자바스크립트로 컴파일하면 해당 코드가 삭제

2.3.1 불필요한 타입 애너테이션

- 타입 애너테이션은 타입스크립가 자체적으로 수집할 수 없는 정보를 타입스크립트에 제공할 수 있음

- 하지만 타입스크립트가 아직 알지 못하는 것은 알려주지 못함!

- 타입 애너테이션을 수동으로 작성하는 일은 번거로움

- 코드를 명확하게 문서화하거나 실수로 변수 탕비이 변경되지 않도록 타입스크립트를 보호하기 위해 변수에 명시적으로 타입 애너테이션을 포함하는 것이 경우에 따라서는 유용할 수 있음

2.4 타입 형태

- 타입스크립트는 변수에 할당된 값이 원래 타입과 일치하는지 확인하는 것 이상을 수행

let rapper - "Queen Latufah";
rapper.length; // OK

나중에 rapper 변수를 사용할 때 타입스크립트가 string 타입에서 사용 가능한 작업만을 허용 (알 수 없는 작업은 허용❌)

2.4.1 모듈

- ECMA 스크립트 2015에는 파일 간에 가져오고 내보내는 구문을 표준화하기 위해 ECMA스크립트 모듈(ESM)이 추가

- 사양과 일치시키기 위해 다음 명명법을 사용

모듈 : export 또는 import가 있는 파일

스크립트 : 모듈이 아닌 모든 파일

- 타입스크립트는 최신 모든 파일을 기존 파일과 함께 실행할 수 있음

- 모듈 파일에 선언된 모든 것은 해당 파일에서 명시한 export 문에서 내보내지 않는 한 모듈 파일에서만 사용가능

- 파일이 스크립트면 타입스크립트는 해당 파일을 전역 스코프(변수에 접근할 수 있는 범위)로 간주하므로 모든 스크립트가 파일의 내용에 접근할 수 있음

➡ 즉, 스크립트 파일에 선언된 변수는 다른 스크립트 파일에 선언된 변수와 동일한 이름을 가질 수 없음!!

파일에 Cannot redeclare...라는 오류가 표시되면 파일에 아직 export 또는 import문을 추가하지 않았기 때문

2.5 마치며

- 끝!

input 파일 업로드 확인하기

튼튼한간 — Wed, 15 Mar 2023 15:39:44 +0900

파일이 들어왔는지 확인하기

우클릭해서 속성들어가기

인풋박스 클릭해서 속성에 파일이 있는지 확인!

디스플레이 속성 <section>, <article> flex-grow, flex-shrink

튼튼한간 — Mon, 6 Mar 2023 14:20:40 +0900

1. 디스플레이 속성

section태그는 섹션(부분, 구역, 영역)들을 그룹화 해서 분리하는 역할

➡️ section은 주제별로 구분한 그룹이다.

논리적으로 관계 있는 요소 또는 문서를 분리할 때 사용

article 태그는 문서내에서 그룹화해서 분리하는 역할

➡️ article은 내용이 독립적이다.

article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용, 좀 더 구체적으로 사용

2. flex item의 팽창과 수축 flex-grow, flex-shrink

플렉스박스의 유연한 레이아웃을 가능하게 하는 속성 2가지 : flex-grow, flex-shrink

아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능

flex-grow 사용 예

기본 너비가 "100px" 이기 때문에 기본 너비로 고정되면서 너비 "600px" 인 레이아웃

.item:nth-child(1){flex-grow: 1;}
.item:nth-child(2){flex-grow: 1;}
.item:nth-child(3){flex-grow: 0;}
.item:nth-child(4){flex-grow: 2;}

flex-grow 사용해서 버튼 크기 키움!

flex-shrink 사용 예

.item:nth-child(1){flex-shrink: 1;}
.item:nth-child(2){flex-shrink: 0;}
.item:nth-child(3){flex-shrink: 1;}
.item:nth-child(4){flex-shrink: 2;}

출처 : https://blogpack.tistory.com/863

JS 탭 메뉴 구현하기

튼튼한간 — Thu, 2 Mar 2023 10:18:46 +0900

JS 탭 메뉴 구현하기

HTML

    <div class="tab">
        <ul class="tab-list flex">
            <li class="tab-item all active" data-tab="tab-1">전체</li>
            <li class="tab-item unanswer" data-tab="tab-2">미답변</li>
            <li class="tab-item answered" data-tab="tab-3">답변완료</li>
            <li class="tab-item progress" data-tab="tab-4">진행확정</li>
        </ul>
    </div>
    <div class="sub-title bottom">
        <!-- 클릭 시 이동 -->
        <div class="empty">
            <p id="tab-1" class="empty all active">아직 받은 요청서가 없습니다.</p>
            <p id="tab-2" class="empty unanswer">미답변이 없습니다.</p>
            <p id="tab-3" class="empty answered">답변완료가 없습니다.</p>
            <p id="tab-4" class="empty progress">진행 확정이 없습니다.</p>
        </div>
    </div>

결과 화면

JavaScript

<script>
    $(document).ready(function(){

        $('ul.tab-list li').click(function(){
            var tab_id = $(this).attr('data-tab');

            $('ul.tab-list li').removeClass('active');
            $('.empty').removeClass('active');

            $(this).addClass('active');
            $("#"+tab_id).addClass('active');
      })

    })
</script>

어쩌다 제이쿼리로,,

원래 하려고 했던 순서였지만, 못했던 과정

1. CSS에서 처음에는 모든 empty가 보이지 않도록 지정

2. 특정 class가 부여되면, 보이게 지정

3. 모든 요소를 불러줌

4. 요소마다 클릭이벤트를 지정

5. 클릭한 요소에 매칭되는 empty를 찾음

6. 매칭되는 empty에 클래스를 부여

React 개념 정리 Hooks useRef / useMemo

튼튼한간 — Mon, 27 Feb 2023 21:12:48 +0900

React 개념 정리

useRef

사용방법

const ref = useRef(value)

유용한 상황

1️⃣ 불필요한 렌더링 방지 (저장 공간)

- State의 변화 ➡ 렌더링 ➡ 컴포넌트 변수들 초기화

- Ref의 변화 ➡ NO 렌더링 ➡ 변수들의 값이 유지됨

2️⃣ 손 쉽게 DOM 요소에 접근

- Doucument.querySelector() 와 비슷한 역할

➡ 변화는 감지해야하지만, 그 변화가 랜더링을 발생시키면 안될 때!

(로그인 버튼 등)

useMemo

- 컴포넌트 최적화를 위해 사용되는 Hook

- 메모이제이션(Memoization) : 동일한 값을 리턴하는 함수를 반복적으로 호출해야 할 때, 맨 처음의 값을 메모리에 저장 후 필요할 때 마다 사용

➡ 프로그램 실행 속도를 빠르게 하는 기술

함수형 컴포넌트가 랜더링이 될 때 ( = 함수 호출)마다 모든 내부 변수 초기화

사용방법

const memoizedValue = useMemo(
() => {
// 연산량이 많은 작업을 수행
return compute(a, b)
}, [a, b]);

첫 번째 매개변수 : 콜백함수, 메모이제이션 할 값을 계산해서 반환해주는 함수

두 번째 매개변수 : 의존성 배열, 배열 안의 값이 업데이트 될 때만 콜백함수를 재호출

의존성 배열이 빈 배열인 경우 : 컴포넌트가 마운트 되었을 때만 콜백함수 호출, 이후 항상 같은 값을 가져와서 사용

useMemo(() => {
// 연산량이 많은 작업을 수행
return compute(a, b)
}, []);

의존성 배열이 없는 경우 : 컴포넌트가 렌더링 될 때마다 콜백함수 호출, useMemo()를 사용하는 의미❌

useMemo(() => {
// 연산량이 많은 작업을 수행
return compute(a, b)
});

참고! 자바스크립트

- 원시타입 : String, Number, Boolean, Null, Undefined, Bright, Symbol

- 객체타입 : 원시 타입을 제외한 모든 것 (Object, Array, ,,,)

출처 : 별코딩

객체 타입은 다른 주소에 저장되어 있음!

CSS 중앙 정렬하는 방법

튼튼한간 — Tue, 21 Feb 2023 11:22:09 +0900

CSS 중앙 정렬하는 방법

자기 자신이 중앙으로 갈 경우

➡️ position, margin: auto

부모 요소가 자식 요소를 중앙으로 보낼 경우

➡️ flex, grid, place-items

수직 수평을 개별적으로 할 경우

    /* Flex */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Grid */
    display: grid;
    justify-content: center;
    align-items: center;

전체 가운데 정렬을 할 경우

    /* place-item */
    display: grid;
    place-items:  center;

수평 중앙 정렬할 때 블록요소 vs 인라인(인라인블록)

➡️ 블록 요소는 자기 자신에게 margin: auto

➡️ 인라인(인라인블록)는 부모요소또는 상위요소에 texst-align: center;

자기 자신과 인접해 있는 요소와 수직 중앙을 맞출 경우

➡️ vertical-align: 값; transform: translateY(값);

디스플레이 속성 (inline, inline-block, block) 4가지 특징

튼튼한간 — Tue, 21 Feb 2023 10:29:35 +0900

디스플레이 속성 4가지 특징

1️⃣ 기본 너비 값

2️⃣ 한 줄에 하나 or 여러 개

3️⃣ 크기 값 (너비, 높이)

4️⃣ 상하 마진

인라인 요소 (Inline Elements)

➡️ 글자를 개별적으로 꾸미는 서식에 관련된 태그들

span, a, b, strong, mark, map 등

➡️ 기본 너비 값 : 컨텐츠 너비 값 / 한 줄에 여러개 / 크기 값 ❌ / 상하 마진 ❌

블록 요소 (Block Elements)

➡️ 레이아웃에 관련된 태그, 목록, 제목, 테이블, 시멘틱태그(헤더, 푸터, 메인, 섹션 등)

div, p, table, ul, ol 등

➡️ 기본 너비 값 : 100% / 한 줄에 하나만 배치 / 너비 값, 높이 값 ⭕ / 상하좌우 마진 ⭕

인라인 블록 요소 (Inline Block Elements)

➡️ 이미지를 비슷한 대부분의 폼 요소(버튼, textarea, select 등) ✔️label은 인라인 요소

img, input, button, textarea, Font Icon태그, video, audio

➡️ 기본 너비 값 : 컨텐츠의 너비 값 / 한 줄에 여러 개 배치 / 크기 값 ⭕ / 상하좌우 마진 ⭕

(상하) 마진 겹침 현상 : 둘 중에 더 큰 마진으로 마진을 취하는 것

React 개념 정리 Hooks useContext / useReducer

튼튼한간 — Mon, 13 Feb 2023 21:32:16 +0900

React 개념 정리

Context란?

- 어플리케이션에서 전반적으로 사용할 값을 관리 (사용자 언어, 로그인 상태, UI 테마 등 환경 설정)

- Context와 컴포넌트가 연동되면 재사용이 어려움⭐

- 한마디로 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유한다!

useContext

const value = useContext(MyContext);

- 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할

useContext() 사용 방법

Context 객체 생성

import { createContext } from 'react';
// MyContext 객체 생성
const MyContext = createContext();

Context 객체 내 Provider 컴포넌트를 통한 데이터 전달

useContext로 전달한 인자는 context 객체 그 자체이어야 함

맞는 사용: useContext(MyContext)
틀린 사용: useContext(MyContext.Consumer)
틀린 사용: useContext(MyContext.Provider)

Reduce 란?

- 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운 상태(state) 객체를 반환하는 함수

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

- 컴포넌트의 상태를 관리할 때 사용하는 Hooks

- useState의 대체 함수

dispatch() 사용 방법

dispatch({ key : value })

- 첫번째 인자인 reducer 함수를 실행

- 컴포넌트 내에서 state의 업데이트를 일으키키 위해 사용하는 함수

useState() vs useReducer()

- useState()는 컴포넌트에서 관리하는 값이 한 개

- useReducer()는 컴포넌트에서 관리하는 값이 여러개

참고 : https://ko.reactjs.org/docs/hooks-reference.html#usecontext

React 개념 정리 Hooks useState / useEffect

튼튼한간 — Mon, 6 Feb 2023 21:48:32 +0900

State란?

- 컴포넌트가 가질 수 있는 상태 (동적인 값의 상태)

State의 종류

- 클래스형 컴포넌트의 state 속성 (React Hooks가 나오기 이전에 사용)

- 함수형 컴포넌트의 useState 함수 (16.8버전 이후)

Hooks란?

- 16.8버전 이후 새로 도입된 기능

- 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능을 제공

기능 : 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능

특징 : state와 lifecycle과 같은 기능을 사용 가능하게 해줌

종류 : useState, useEffect, useReducer, useMemo, useCallback, useRef

규칙 : 최상위에서만 호출, 오직 React 함수 내에서만 호출

useState()

함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 줌

import {useState} from 'react'

위의 형태로 'react'라는 모듈에서 useState를 named import해서 사용

const [value, setValue] = useState(값)

값의 형태 : 숫자, 문자열, 객체, 배열

리턴값

첫 번째 원소 : 현재상태

두 번째 원소 : 상태를 바꾸어 주는 함수

성능 최적화를 위해서는 useState()함수의 인자로 콜백 함수를 넣어줌

useEffect()

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정해주는 Hook

컴포넌트가 mount 됐을 때, unmount가 됐을 때, update 됐을 때 특정 작업을 처리할 수 있음

➡ 즉, 클래스형 컴포넌트에서 사용할 수 있던 생애주기 메소드를 함수형 컴포넌트에서도 사용⭕

최초에 한 번 실행하게 하고 싶은 작업을 작성할 때 주로 사용

callback함수와 dependency를 받는다.

import React, { useEffect } from 'react';

useEffect()의 매개변수에 콜백함수만 있는 경우

useEffect(() => {
// 작업
});

useEffect()의 매개변수에 콜백함수, 배열이 있는 경우

컴포넌트가 처음 렌더링 될 때 실행

value 값이 변경 되었을 때 실행

useEffect(() => {
// 작업
}, [value]);

mount될 때만 실행하고 싶을 때

한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣기

배열을 생략한다면 리랜더링 될 때마다 실행

useEffect(()=>{
console.log("렌더링이 완료되었습니다.");
console.log({names});
}, [])

특정 값이 update될 때만 실행하고 싶을 때

함수의 두 번째 매개변수 배열에 검사하고 싶은 값을 넣어 줌

useEffect(()=>{
console.log("렌더링이 완료되었습니다.");
console.log({names});
}, [names])

컴포넌트가 unmount 될 때, update 되기 직전

cleanup 함수 반환 (뒷정리 함수)