맨동이

[AI] openai.error.RateLimitError: You exceeded your current quota, please check your plan and billing details.

맨동 — Fri, 22 Mar 2024 21:51:14 +0900

유튜브 영상보면서 colab으로 실습좀 해보려했더니 ..

Error Code 429 - You exceeded your current quota, please check your plan and billing details.

이런 에러가 떴다.

냅다 복사해서 검색해보니 나같은 사람이 많았고, OpenAi Help Center 에서도 설명이 나와있었다.

결론부터 말하면 아래 openai 홈페이지에서 credit card를 등록한 사용자만 사용할 수있다는것.

카드 등록부터 애먹었고..

카드 등록을 하고 다시 실행해보니 똑같은 에러가 나서 보니 credit card를 등록하기전 api key말고

카드 등록후 발급한 api key를 사용해야 하는것 같다.

https://platform.openai.com/account/billing/overview

카드 등록할때 5달러 내라고 하는데 실제로 청구되진 않는것 같다.. 일단 쓰자

[Angular] @ViewChild

맨동 — Thu, 1 Feb 2024 20:05:34 +0900

@ViewChild의 정의

@ViewChild는 Angular의 코어 라이브러리에서 제공하는 데코레이터 중 하나로, 자식 컴포넌트나 DOM 요소에 직접 접근할 수 있는 기능을 제공합니다. 이 데코레이터를 활용함으로써, 우리는 컴포넌트의 뷰에 위치한 자식 요소들에 대한 직접적인 제어를 할 수 있게 되는데, 이는 웹 애플리케이션의 동적인 행동을 쉽게 구현하는 데 큰 도움이 됩니다.

@ViewChild의 사용 방법

// @ViewChild(탐색 대상 클래스명) 프로퍼티명: 탐색 대상 클래스명;

@ViewChild(Pane)
  set pane(v: Pane) {
    setTimeout(() => {
      this.selectedPane = v.id;
    }, 0);
  }
  
  @Component({
    selector: 'test',
    template: `               
          <textbox class="input" #AccountInput placeholder="'Input Value.'" [(value)]="account"></textbox>
	`,
    styleUrls: ['./login.component.scss'],
})
export class TESTComponent implements OnDestroy, AfterViewInit {
	...
    pubic inputText:string = '';
    @ViewChild('AccountInput')
    set accountTextBox(v: TextBox) {
      	this.inputText = v.value;
      }
  }
    ... 
 }

위의 코드는 ChildComponent라는 이름의 자식 컴포넌트에 child라는 참조 이름을 부여하는 것을 나타냅니다. 이로써 우리는 이 child라는 참조를 통해 ChildComponent의 메서드를 호출하거나, 프로퍼티를 변경하는 등의 작업을 수행할 수 있게 됩니다.

Template에 있는 AccountInput라는 ID로 할당된 Template 레퍼런스를 매개변수로 받아 set을 통해 변수에 값을 할당하는 등 원하는 작업을 할 수 있습니다.

@ViewChild의 생명주기

@ViewChild는 Angular의 컴포넌트 생명주기에 따라 값이 설정됩니다. 일반적으로 ngOnInit 단계에서는 아직 @ViewChild가 설정되지 않았기 때문에 사용할 수 없습니다. 그러나 ngAfterViewInit 단계부터는 사용이 가능하며, 이 시점부터 자식 요소에 대한 조작이 가능해집니다.

@ViewChild와 @ViewChildren의 차이점

Angular에서는 @ViewChild 외에도 @ViewChildren이라는 데코레이터를 제공합니다. @ViewChild는 첫번째 자식 요소만을 가져오는 반면, @ViewChildren은 모든 자식 요소를 가져옵니다.

[Web] 웹 표준과 웹 접근성

맨동 — Mon, 18 Jul 2022 21:35:26 +0900

웹 표준

웹상에서 지켜야하는 표준 규칙.

W3C에서 지정한 표준안을 지키는 사이트가 웹 표준을 잘 준수한 사이트입니다.

예:

문서 구조: 해당 페이지의 기본 정보를 포함하는 헤드와 본문을 포함하는 바디를 가진다.

표준 엘리먼트 사용: 모든 요소는 시작 태그와 종료태그가 함께 있어야 하며, 모든 요소와 속성은 소문자여야 한다.

인코딩 선언: 모든 HTML 문서는 기본 인코딩으로 'utf-8'을 사용한다.

웹 접근성

웹 접근성은 장애인과 비장애인 모두 웹사이트를 사용할 수 있도록 하는 방식을 가리킵니다.

모든 사용자가 정보와 기능에 차별없이 접근할 수 있어야 합니다.

한국형 웹 컨텐츠 접근성 지침으로 2.0버전이 있으며,

웹 접근성 표준은 원칙, 지침, 검사 항목 3단계로 구성되어 있습니다.

원칙은 웹 접근성 제고를 위한 4가지 원칙, 지침은 각 원칙을 준수하기 위한 13개 지침, 검사는 해당 지침의 준수 여부를 확인하느 22개의 검사 항목으로 구성되어 있습니다.

항목	내용	예제
인식의 용이성	텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있게 적절한 대체 텍스트를 제공해야 합니다.	img 태그의 alt 속성
운용의 용이성	모든 기능은 키보드만으로도 사용 가능해야 합니다.	a, button, input 등의 태그 사용
이해의 용이성	입력 서식은 시각 장애인 등이 해당 서식을 이해할 수 있도록 레이블을 제공해야 합니다.	label 태그
이해의 용이성	레이블을 제공할 수 없는 입력 서식에는 title 을 제공합니다.	input의 title 속성

[Git] git reset과 git checkout의 차이점

맨동 — Mon, 28 Mar 2022 22:55:29 +0900

1. 수정사항 되돌리기

코드를 작성하면서 여러 군데에 로그를 출력하는 코드를 삽입했다던가,

개발 환경에서만 작동하는 코드를 임시로 넣었을 때 그 내용을 되돌리는 경우에는 checkout을 사용합니다.
기존 커밋과 비교해서 직접 수정해도 되지만, 수정한 내용이 많을 경우에 사용하면 편리합니다.

새롭게 추가된 파일, 다시 말하자면 Untracked file의 경우에는 checkout을 하더라도 삭제되지 않습니다.

2. Unstaging

add 명령어로 stage 상태로 만든 파일을 다시 unstage 상태로 만드는 방법은

reset 명령어로 unstage 상태로 만들수있습니다.

3. Commit 되돌리기

3.1. reset

3.1.1. mixed

reset은 말그대로 커밋을 되돌리는 명령어입니다.

파일을 추가하고 커밋한 후,

reset 명령어 뒤에 커밋 아이디를 입력하면 해당 커밋으로 되돌아갈 수 있습니다.
git log를 보면 돌아온 커밋 이후의 커밋들이 전부 사라진 것을 볼 수 있습니다.

하지만 추가한 파일들은 그대로 존재합니다.
status를 보면 어떻게 된 상태인지를 파악할 수 있는데요,
기본적으로 reset을 사용하게 되면 해당 커밋 이후의 내용은 현재 내가 수정한 것처럼 내용 자체는 남아있게 됩니다.

reset을 사용할 때 아무 옵션을 주지 않으면 --mixed 옵션이 기본적으로 들어가게 되는데 그 동작이 위의 내용과 같습니다.

3.1.2. soft

파일들을 추가하고 커밋한 후 reset --soft로 soft 옵션을 걸게되면

log상으로는 동일하게 커밋 내용이 사라지지만 리셋 이후의 수정한 내용 또한 동일하게 존재합니다.

다만, 해당 내용들이 staging area에 존재하게 됩니다.

3.1.3. hard

위와 같이 파일들을 추가하고 커밋한 상태에서 --hard 옵션으로 reset을 실행하면

마찬가지로 커밋이 리셋되면서 해당 커밋 이후의 내용을 모조리 날려버립니다.

3.1.4. 정리

reset은 두 가지 용도로 사용 가능합니다. unstaging이나 commit reset.

commit reset의 경우 세 가지 옵션이 존재하며(mixed, soft, hard), default는 mixed입니다.
공통적으로 리셋시킨 커밋 이후의 커밋은 사라지게 됩니다.

mixed option : 리셋 이후의 커밋 내용들이 unstage 상태로 존재

soft option : 리셋 이후의 커밋 내용들이 stage 상태로 존재

hard option : 리셋 이후의 커밋 내용들이 전부 삭제

3.2. revert

특정 커밋만 되돌리고 싶은 경우에 사용하는 것이 revert 명령어 입니다.

origin 커밋을 기준으로 file1을 추가하고 커밋, file2를 추가하고 커밋했을 때
이 상태에서 file1을 추가한 커밋만 되돌리고 싶다면

git revert [되돌릴 커밋] 을 입력하면 됩니다.

그러면 revert commit 창이 뜨고, revert message를 입력합니다.

로그를 보면 reset과는 다르게 커밋이 사라지지 않고, 방금 전에 입력한 메시지로 새로운 커밋이 생성됩니다.

파일 상태를 보면 file1이 사라진 것을 알 수 있습니다.
즉, revert 명령어는 해당 커밋을 취소하는 커밋을 생성하는 것입니다.

이전 커밋을 취소하고 수정 후에 다시 반영하고 싶은 경우에는 -n 옵션을 사용하면 됩니다.

-n 옵션을 사용하게 되면 바로 커밋 메시지를 작성하는 창으로 전환되지 않고,

취소한 변경사항이 stage area에 존재하게 됩니다.
취소한 내용이 파일 내용을 수정한 것이라면 원하는 대로 다시 수정해 커밋하면 됩니다.

마지막으로 reset 과 checkout의 차이를 짚어보자면

reset	checkout
HEAD가 가리키던 브랜치가 다른 커밋을 가르키도록 한다.	HEAD 자체가 다른 커밋이나 브랜치를 가르키도록 한다
HEAD도 결국 간접적으로 다른 커밋을 가르키게 되는 효과가 생긴다.	브랜치를 통하지 않고, 커밋을 직접적으로 가르키는 HEAD를 Detached HEAD라고 한다

[Javascript] this 간단 정리

맨동 — Wed, 16 Mar 2022 20:33:56 +0900

자바스크립트 this

객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.

메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

자바스크립트는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자 this 를 제공한다.

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.

this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다.

함수를 호출하면 arguments 객체와 this가 암묵적으로 생성된다.

여기서 this가 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정이 된다.

바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.

정리 :

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 생성할 인스턴스
apply/call/bind 메서드에 의한 간접 호출	메서드에 첫번째 인수로 전달한 객체

일반 함수 내부의 this는 strict 모드에서 undefined가 바인딩된다. 일반 함수에서 this를 참조할 필요가 없기 때문이다.

일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 this에는 전역 객체가 바인딩된다.

[TypeScript] Property '...' does not exist on type 'DefaultRootState' - Redux type Error

맨동 — Sun, 6 Mar 2022 18:57:36 +0900

Property 'nav' does not exist on type 'DefaultRootState'

React + TS + redux 사용중

DefaultRootState 값에 찾는 값이 없다는 에러를 발견했다.

해결방법은rootReducer가 있는 곳에 RootState 타입을 선언하고 state에게 알려주면 해결완료!

export type RootState = ReturnType<typeof rootReducer>

[Webpack] webpack5로 webpack-dev-server 사용하기

맨동 — Thu, 3 Mar 2022 00:17:09 +0900

유데미 강의를 보며 typescript에 webpack을 적용하였다.

하지만 강의는 webpack 4버전으로 녹화된 강의였고..

나는 webpack5로 설정을 하던중 다른 부분이 있어 기록으로 남길겸 글을 남기게 되었다.

webpack-dev-server ?

빠른 실시간 리로드 기능을 갖춘 개발 서버로서

디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라지고,

webpack.config.js파일에 devServer 옵션으로 커스터마이징도 가능하다.

22년 3월 기준 npm install 버전과 나의 프로젝트 구성 목록이다.

npm start로 실행했을 시에는 webpack-dev-server가 실행되게 하고,

build시에는 따로 build용 config 파일을 만들어 적용해주었다.

(webpack 4버전에서는 "webpack-dev-server" 를 사용하여 실행하였지만, 5버전에서는 "webpack server" 명령어로 서버를 실행할 수 있다.)

npm start시 실행되는 개발서버에 대한 config 파일을 살펴보면

왼쪽은 webpack 4 오른쪽은 webpack 5

4버전에서는 devServer에 대한 설정을 명시하지 않아도 자동으로 서버가 index.html

파일을 찾아 실행하였지만

5버전에서는 Cannot get/ 에러가 발생하고 index.html 파일을 찾지 못하여서 따로 devServer 설정을 했다.

webpack-dev-server는 기본적으로 번들링 된 파일을 생성하지 않으므로 번들링된 결과물을 메모리에 저장하고, 메모리에 저장된 번들을 브라우저에 넘겨주는 방식이다.

따로 output으로 dist 경로에 추출한 파일을 변경하여도, decServer에 변경사항이 적용되지 않는다.

하지만 pulicPath를 지정해서 기본적으로 메모리상에 있을 dist폴더를 만들고 참조가 가능하다.

결과적으로 dist 폴더에 bundle.js라는 파일명으로 번들링시키고,

indexl.html 파일에서 bundle.js 파일을 참조하면된다.

<script type="module" src="/dist/bundle.js"></script>

이제 터미널에서 npm run start 명령어 실행후 localhost:8080 포트로 접속하면 내가 원하는대로 페이지가 뜬다.

production용 webpack config 파일은 약간 다르다.

왼쪽은 webpack 4 오른쪽은 webpack 5

4버전에서는 컴파일시 dist 폴더를 초기화 하기위해 따로 플러그인을 설정하였지만 5버전에서는 output에 바로 설정할 수 있었다.

config 설정을 저장하고 npm run build 를 실행하면

dist 폴더에 직접 bundle.js 파일이 생성되니 눈으로 확인할 수 있다.

이제 루트폴더에 있는 index.html 을 라이브서버로 실행하면 페이지가 잘 출력된다.

[React] Component 외부 vs 내부 변수 선언

맨동 — Tue, 22 Feb 2022 23:00:10 +0900

Component 외부 vs 내부 변수 선언

React를 사용하다 문득 Component 외부에서 변수 나 함수를 선언하는 것과 내부에서 선언하는 것의 차이가 궁금해져서 구글링을 하게되었다.

결론적으로 크게 차이는 없고 컴포넌트 내부코드의 가독성을 개선하고 싶거나,

특정 함수의 재사용성을 높이고 싶으면 외부로 빼는게 낫다고 한다.

https://stackoverflow.com/questions/62848106/functional-component-write-functions-inside-or-outside-the-component

Functional Component: Write functions inside or outside the component?

I often wrote functional components following a 'Class architecture' where all my function that concern the component are written inside of it like a method in a class. For example, I have here a

stackoverflow.com

컴포넌트 외부 let 사용 ?

하지만 검색을 하다 컴포넌트 외부에서 let은 절대 사용하지 말아야 한다는 것을 알게 되었다.

~~(당연하게 그러고 있었지만 이유는 딱 정의할 수 없었다.)~~

이유는 컴포넌트를 import 해서 사용할 때, return 영역에서 해당 컴포넌트의 hook function 만 반복 실행하는 거고, 컴포넌트 위에 선언한 변수들은 import 할 때 한번만 scan되기 때문에 호출한 컴포넌트 hook은 각각의 컨텍스트를 가지니까 hook 내부 변수는 그 hook에서만 유효한데 반해,

컴포넌트 바깥에 선언한 변수는 해당 파일 내에서 전역 컨텍스트와 비슷하게 정의 된다.

각각의 hook 들에서 해당 변수명을 호출할 때, 내부에 호출한 변수가 없으면 전역 컨텍스트까지 스코프 체인 따라 올라간다. 그래서 let 키워드로 hook 외부에서 선언하면 동일한 변수를 참조해서 문제가 생길 수 있기 때문이다.

[Javascript] constructor 와 non-constructor

맨동 — Mon, 21 Feb 2022 20:07:56 +0900

자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 함수 정의 방식에 따라 함수를 constructor 와 non-constructor 로 구분한다.

constructor : 함수 선언문, 함수 표현식, 클래스

non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수

밑의 예제로 보면 메서드를 인정하는 범위를 구분할 수 있다.

// 일반함수 정의: 함수선언문, 함수표현식
function one() {}
const two = function() {};

// 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수와 같다. 메서드로 인정X
const test = {
 x: function() {}
};

new one(); // -> one {}
new two(); // -> two {}
new test.x(); // -> x {}

// 화살표 함수 정의
const arrow = ()=>{};

new arrow(); // TypeError: arrow is not a constructor

// 메서드 정의
const obj = {
 x() {}
};

new obj.x(); // TypeError: obj.x is not a constructor

[Javascript] 일급 객체

맨동 — Sun, 20 Feb 2022 22:29:11 +0900

일급 객체

일급 객체는 4가지 조건을 만족하는 객체를 말한다.

1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.

2. 변수나 자료구조(객체,배열 등)에 저장할 수 있다.

3. 함수의 매개변수에 전달할 수 있다.

4. 함수의 반환값으로 사용할 수 있다.

자바스크립트의 함수는 4가지 조건을 모두 만족하는 일급 객체이다.

// 1. 함수는 무명의 리터럴로 생성 가능
const increase = function(num) {
 return ++num;
};

const decrease = function(num) {
 return --num;
};

// 2. 함수는 객체에 저장이 가능
const predicates = { increase, decrease };

// 3. 함수는 매개변수에 전달 가능
function Counter(predicate) {
 let num=0;
 
 // 4. 함수의 반환값으로 사용 가능
 return fuction () {
  num = predicate(num);
  return num;
 };
}
 
const increaser = Counter(predicates.increase);
console.log(increase()); // 1
console.log(increase()); // 2

함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 뜻이다.

[Javascript] 스코프 체인과 렉시컬 스코프

맨동 — Fri, 18 Feb 2022 23:05:58 +0900

스코프 체인과 렉시컬 스코프

스코프 체인

함수는 중첩될 수 있으므로 힘수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다.

외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다.

모든 스코프는 위의 그림과 같이 하나의 계층적 구조로 연결된다.

항상 최상위 스코프는 전역 스코프이다.

이처럼 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.

자바스크립트 엔진은 절대 하위 스코프로 내려가면서 식별자를 검색하지 않는다.

상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없음을 의미한다.

function func1() {
 console.log('global function func1');
}

function func2() {
 function func1() {
  console.log('local function func1');
 }

 func1(); // local function func1
}

func2();

결과

함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성된다.

그리고 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 선언하고 생성된 함수 객체를 할당한다.

함수는 식별자에 함수 객체가 할당된 것외에는 일반 변수와 다를 건 없다.

따라서 스코프는 '식별자를 검색하는 규칙' 이라고 표현할 수 있겠다.

함수 레벨 스코프

지역은 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다.

대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록이 지역 스코프를 만들고,

이런 특성을 블록 레벨 스코프라 한다.

하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록 만을 지역스코프로 인정한다.

이것은 함수 레벨 스코프 라고한다.

var i = 10;

for (var i=0; i<5; i++){
 console.log(i); // 0 1 2 3 4
}

console.log(i); // 5

함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수이다.

for문에서 반복을 위해 선언된 변수 또한 var 키워드로 선언하면 전역 변수가 된다.

렉시컬 스코프

var x = 1;

function func1() {
 var x = 10;
 func2();
}

function func2() {
 console.log(x);
}

func1(); // 1
func2(); // 1

함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정하는 방식을 동적 스코프라 한다.

함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 방식은 정적 스코프라 한다.

자바스크립트는 렉시컬 스코프(정적 스코프)를 따르므로 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다.

함수가 호출된 위치는 상위 스코프 결정에 영향을 주지 않는다.

위 예제의 func2 함수는 전역에서 정의된 함수이므로, func1 함수 안에서 호출하였더라도 전역 스코프를 기억한다.

[Javascript] 스코프 Scope

맨동 — Mon, 14 Feb 2022 17:29:42 +0900

Scope

스코프(유효범위) 는 , 자바스크립트를 포함한 모든 프로그래밍 언어의 중요한 개념이다.

function add(x,y) {
 //매개변수는 함수 몸체 내부에서만 참조할 수 있다.
 //매개변수의 스코프는 함수 몸체 내부이다.
 console.log(x,y) //2 5
 return x + y;
}

add(2,5);

// 매개변수는 함수 내부에서만 참조할 수 있다.
console.log(x,y); // ReferenceError: x is not defined

모든 식별자는 자신이 선언된 위치에 의해 자신이 유효한 볌위, 다른 코드가 자신을 참조할 수 있는 범위가 결정된다.

이 유효 범위가 바로 스코프이다. 즉 스코프는 식별자가 유효한 범위를 말한다.

let x = 'global';

function check() {
 let x = 'local';
 console.log(x);
}

check();

console.log(x);

check 함수의 바깥 영역과 내부 영역에 같은 이름을 같은 x변수를 선언 후,

x를 참조하면 자바스크립트 엔진이 둘 중 어느 변수를 참조할 것인지를 결정하는 식별자 결정을 한다.

이때 스코프를 통해 어떤 변수를 사용할지를 결정하게 된다.

따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

참고로 var 키워드로 선언된 변수는 같은 스코프 내에 중복 선언이 허용된다.

let 과 const는 같은 스코프 내에서 중복 선언을 허용하지 않으므로 부작용을 줄여준다.

( var는 재할당,재정의, 호이스팅, for문 종료시에도 접근 가능, 전역 변수남발 등 문제가 많은 놈이다. 쓰지말자)

스코프의 종류

스코프는 전역 스코프와 지역 스코프로 나눌 수 있다.

코드의 가장 바깥에서 선언한 변수는 전역 변수로 전역 스코프를 가지며 어디서든지 참조할 수 있게된다.지역 변수는 함수 내부에서 지역 스코프를 가지며 자신의 지역 스코프와 하위 지역 스코프에서만 유효하다.

[React] Error: Cannot read properties of undefined (reading ~)

맨동 — Sun, 13 Feb 2022 14:40:37 +0900

Cannot read properties of undefined

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

Cannot read properties of undefined 에러는 화면이 렌더가 되지 않을때 콘솔창을 키면 자주 볼 수 있는 오류 메시지다.

에러내용은 친절하게 설명해준대로 undefined 의 프로퍼티를 읽을 수 없다는 것이다.

(무엇을 읽을 수 없는지 어디서 에러가 발생했는지도 친절하게 알려준다.)

오탈자 문제가 아니라면 사용하는 state가 실제로 undefined란 얘긴데,

useState는 비동기로 작동하기 때문에 페이지가 그려지기 전까지 undefined를 가지고 있다가

페이지가 그려진 후 필요한 state를 넣어준다.

해결 방법

해결 방법은 조건문, && 연산자, 옵셔널 체이닝( ?. )을 활용하면 된다.

모두 값이 있을 때만 렌더링할 수 있도록 도와주는 친구들이니 오류를 해결할 수 있다.

[React] React-query 병렬 쿼리

맨동 — Thu, 10 Feb 2022 18:17:29 +0900

병렬 쿼리

정적으로 병렬 쿼리 선언하기

useQuery , useInfiniteQuery 를 나란히 선언하면 자동으로 병렬 쿼리가 실행됩니다.

 function App () {
   // 병렬 실행
   const usersQuery = useQuery('users', fetchUsers)
   const teamsQuery = useQuery('teams', fetchTeams)
   const projectsQuery = useQuery('projects', fetchProjects)
   ...
 }

React의 Suspense모드에서 리액트 쿼리를 사용할 때 첫번째 쿼리가 프로미스를 던지고 다른 쿼리가 실행되기 전에 컴포넌트를 일시 중단하기 때문에 병렬 쿼리가 실행되지 않습니다.

이 때, useQueries 를 사용하거나 useQuery 인스턴스에 대한 별도 구성을 해야합니다.

동적으로 병렬 쿼리 선언하기

react hook에는 다음과 같은 규칙이 있습니다.

후크는 JavaScript 함수이지만 두 가지 추가 규칙을 부과합니다.

최상위 수준에서 Hooks만 호출 합니다 . 루프, 조건 또는 중첩 함수 내에서 Hooks를 호출하지 마십시오.
React 함수 구성 요소 에서만 Hooks를 호출 합니다 . 일반 JavaScript 함수에서 Hooks를 호출하지 마십시오. (Hooks를 호출할 수 있는 다른 유효한 장소가 하나 있습니다. 사용자 정의 Hooks입니다. 잠시 후에 이에 대해 알아보겠습니다.)

때문에 루프, 조건 또는 중첩 함수내에서는 정적(수동)으로 병렬 쿼리를 선언할 수 없습니다.

이 때 useQueries 라는 hook 을 제공해서 동적으로 병렬 쿼리를 구성하여 실행할 수 있습니다.

function App({ users }) {
   const userQueries = useQueries(
     users.map(user => {
       return {
         queryKey: ['user', user.id],
         queryFn: () => fetchUserById(user.id),
       }
     })
   )
 }

종속 쿼리

종속 쿼리는 이전 쿼리의 실행이 마무리 되어야 실행 될 수 있습니다.

이 같은 처리를 하기 위해선 아래와 같이 enabled 옵션으로 쿼리가 실행될 준비가 되었을 때를 알리면 됩니다.

 const { data: user } = useQuery(['user', email], getUserByEmail)
 
 const userId = user?.id
 
 const { isIdle, data: projects } = useQuery(
   ['projects', userId],
   getProjectsByUser,
   {
     // userId 가 존재할때 까지 쿼리를 실행하지 않습니다.
     enabled: !!userId,
   }
 )

[React] React-Quries 기본사항

맨동 — Mon, 7 Feb 2022 21:22:59 +0900

기본사항

쿼리는 기본적으로 유니크한 키로 구분되며 프로미스(Promise) 기반 메서드 (GET, POST 등)로 서버에서 데이터를 가져올 수 있다.

컴포넌트나 커스텀 훅에서 쿼리를 구독하려면 다음과 같이 useQuery 를 호출한다.

 import { useQuery } from 'react-query'
 
 function App() {
   const info = useQuery('todos', fetchTodoList)
 }

여기서 유니크한 키 는 Application 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하기 위해 내부적으로 사용된다.

const result = useQuery('todos', fetchTodoList);

쿼리의 상태는 4가지로 분류할 수 있다.

isLoading , status === 'loading' : 데이터 가져오는 중
isError, status === 'error' : 에러 발생
isSuccess , status === 'success' : 쿼링 성공
isIdle, status === 'idle' : 쿼링 불가능

쿼리 키(Query Keys)

react-query 는 쿼리의 유니크한 키 를 기반으로 쿼리 캐싱을 관리합니다.

쿼리 키(Query Keys)는 문자열이 될 수도 있고 문자 배열이 될 수 도 있습니다.

문자열 : 가장 단순한 형태의 쿼리 키는 문자열 입니다. 쿼리 키로 문자열이 전달되면 문자열을 사용하여 내부적으로 배열로 변환합니다.
useQuery('todos', ...) // queryKey === ['todos']

문자 배열 : 계층 구조의 데이터 / 파라미터가 있는 쿼리

useQuery(['todo', 5], ...)
 // queryKey === ['todo', 5]
 
useQuery(['todo', 5, { preview: true }], ...)
 // queryKey === ['todo', 5, { preview: true }]
 
useQuery(['todos', { type: 'done' }], ...)
 // queryKey === ['todos', { type: 'done' }]

[CSS] hover 시 올라가는 버튼 만들기

맨동 — Thu, 3 Feb 2022 21:21:10 +0900

hover시 살짝 올라가는 버튼UI를 만들어보자.

실행 결과

body {
  background-color:lightgrey;
  display:flex;
  align-items:center;
  height:300px;
}

button {
  cursor: pointer;
  color: black;
  width: 300px;
  height: 30px;
  display: block;
  margin: 0 auto;
  border: solid 1px black;
  background-color: whitesmoke;
  border-radius: 5px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
}

button:hover {
   background-color: #1b273f;
    box-shadow: 0px 15px 20px rgba(27, 39, 63, 0.4);
    color: whitesmoke;
    transform: translateY(-5px);
}

See the Pen Untitled by 김현동 (@gusehd66) on CodePen.

[React] React가 불변성을 지키는 이유

맨동 — Thu, 27 Jan 2022 18:14:15 +0900

React가 불변성을 지키는 이유

React가 불변성을 지키는 이유는 부모컴포넌트가 re-rendering 되거나

state,props가 변화될 때 렌더링이 일어나게 된다.

근데 렌더링을 할지 말지 판단하기 위해 state가 변화되는지를 판단한다.

그 과정에서 state 객체 내의 모든 value를 다 깊은 비교하면 당연하게도 효율적이지 않다.

그렇기 때문에 이전 객체와 현재 객체를 얕은 비교로 판단하기 때문에 불변성의 유지가 중요하다.

state를 직접 변경하게 되면 value 값은 바뀌지만 참조 값은 바뀌지 않으므로 렌더링이 일어나지 않는다.

mutable한 상태를 사용하게 되면 리액트 돔이 제대로 된 추적을 할 수 없을 것이고,

예기치 않은 사이드 이펙트를 발생시킬 수 있다.

어떻게 불변성을 지킬까?

스프레드 문법, map, filter, slice, reduce 와 같은 새로운 배열을 반환하는 메소드들을 활용한다.

setState를 이용할 때 원시타입 경우에는 값을 바로 넣어주어도 되지만

참조타입인 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어주어야 한다.

// 원시타입
const [number, setNumber] = useState(0)
setState(7)

// 참조타입
const [cellPhone, setCellPhone] = useState({ type: 'iphone', series : "12pro" })
setState({...cellPhone, series: '13'})

[Javascript] Reduce 메서드란 ?

맨동 — Tue, 25 Jan 2022 22:24:20 +0900

Reduce 메서드란?

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다.

map과 forEach 와는 조금 다른 누산값을 곁들인 메서드이다.

문법

// reduce
const array1 = [10, 20, 30, 40];

array1.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => {
  return 다음누산값;
}, 초기누산값);

reduce 메서드 자체의 반환값은 100이 된다.

1. 콜백 함수

콜백 함수의 첫 번째 파라미터는 reduce 메서드에서 이 콜백 함수가 동작할 때 return 하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 것이다.

배열의 요소를 다 돌고 마지막 콜백 함수가 동작한 이후의 return 값이 reduce 메서드의 return 값이 되는 것이다.

콜백 함수의 파라미터 생략은, 3,4번째 파라미터만 가능하다.

2. 초기누산 값

두번째 파라미터인 초기누산값을 주지 않으면 배열의 인덱스 0 값이 초기값으로 지정된다.

응용

const hangul = ['가', '나', '다', '가', '나',
   '다', '라', '가', '나', '마'];

const result = hangul.reduce((acc, el, i) => {
  console.log(`${i}번째`)
  console.log(`acc:`, acc);
  console.log(`현재 값:`, el);

  acc[el] = (acc[el] || 0) + 1;

  return acc;
}, {});

console.log("결과: ",result);

위 코드처럼 초기값을 빈 객체로 두고, 배열을 돌면서 중복된 요소를 카운트하는 데에도 충분히 활용할 수가 있다.

참고

두번째 파라미터를 생략 했을 때의 결과

const numbers = [1, 2, 3];

const sum = numbers.reduce((acc, el, i) => {
  console.log(`${i}번째 콜백함수`)
  console.log(`acc: ${acc}`);
  console.log(`현재값: ${el}`);

  return el + acc;
});

console.log(`결과: ${sum}`);

배열의 index 0이 초기값이 되기 때문에, 0번째 콜백 함수는 동작하지 않는다.

콜백 함수의 동작 횟수에 따라 결과에 차이가 있을법한 경우라면 오류로 이어질 수 있기 때문에, 생략은 가능하지만

생략하지 않는 것이 권장된다.

[React] 배열의 key값으로 index를 사용하지 말자

맨동 — Fri, 14 Jan 2022 13:32:43 +0900

Each child in an array should have a unique “key” prop.

배열을 사용하는데 key 값을 까먹고 넣지 않으면

Each child in an array should have a unique “key” prop.

콘솔창에서 위와 같은 문구를 볼 수 있다.

바로 유니크한 key 값이 필요하다는 것!

Key값이 왜 필요한가 ?

<ul>
  <li>첫번째</li>
  <li>두번째</li>  
</ul>

<ul>
  <li>첫번째</li>
  <li>두번째</li>  
  <li>세번째</li>  
</ul>

리스트의 엘리먼트를 하나 더 추가하면 두 트리의 변경은 잘 작동하지만,

key 값이 없기 때문에 변경되지 않은 엘리먼트 또한 재평가를 하게된다.

이런 문제를 해결하기 위해 key값을 ~~넣어주는것이 좋다.~~ 넣어주어야 한다.

key 값을 넣어주게 되면 key값으로 판단하여 변경된 부분만 추가할 수 있게되기 때문인데,

key 값을 index로 사용하게 되면 배열을 추가하거나 삭제할때 바뀐부분을 찾지 못할 수 있게된다.

list가 변경되었을 때 list 가 다시 재평가가 되며 index가 다시 부여 되기 때문이다.

그렇기 때문에 key값에 index를 넣는것은 지양해야 한다.

그래도 정적이고 변경되지 않을 배열에는 사용해도 무방하다.

[React] CRA 디폴트 파일인 reportWebVitals

맨동 — Mon, 27 Dec 2021 20:38:37 +0900

CRA로 리액트 프로젝트를 생성하고 index.js 를 보면 맨 밑에 reportWebVitals() 라는 함수를 실행하고 있는 부분이 있다.

이부분은 같은 폴더의 reportWebVitals 파일에서 가져온 함수를 실행하고 있는 것인데

주석 처리된 예 처럼 함수에 console.log를 넣어주면 개발창으로 앱의 퍼포먼스시간들을 분석하여 객체 형태로 보여준다.

  // metric(측정도구) 이름
  name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';
  // 측정된 현재값 (값이 작을수록 빠른성능을 뜻합니다)
  value: number;
  //  현재 측정값(current value)과 최신 측정값(last-reported value) 차이
  //  첫번째 리포트에서 위 둘값은 항상 같습니다.
  delta: number;
  // 특정 측정도구를 나타대는 유니크한 ID 값으로 중복되는 값들을 관리할 때 사용된다.
  id: string;
  // 계산된 측정값들의 내용들이 배열로 나열 된다.
  // ex) PerformanceNavigationTiming, LargestContentfulPaint
  entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];

Ref

https://github.com/GoogleChrome/web-vitals/#types

[Javascript] 자바스크립트의 표준화

맨동 — Mon, 15 Nov 2021 16:22:08 +0900

넷스케이프 커뮤니케이션즈와 마이크로소프트가 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 추가하고,

이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다.

이러한 문제점을 방지하기 위해 자바스크립트의 표준화가 필요했다.

버전	출시 연도	특징
ES1	1997	초판
ES2	1998	ISO/IEC 16262 국제표준과 동일한 규격 사용
ES3	1999	정규 표현식, try...catch
ES5	2009	(HTML5와 함께 출현한 표준안) JSON, strict mode, 접근자 프로퍼티, forEach, map, filter, reduce, some, every
ES6	2015	let/const, 클래스, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터, 심벌, 프로미스, 이터러블, for...of, 모듈 import/export
ES7	2016	지수 연산자, Array.prototype.includes, String.prototype.includes
ES8	2017	async/await, Object 정적 메서드(Object.values, Object.entries, Object.getOwnPropertyDescriptors)
ES9	2018	Object rest/spread 프로퍼티, Promise.prototype.finally, for await..of
ES10	2019	Object.fromEntries, Array.prototype.flat, Array.prototype.flatMap
ES11	2020	String.prototype.matchAll, BigInt, globalThis, null 병합 연산자, 옵셔널 체이닝 연산자

[React] npm install EEXIST: file already exists 해결하기

맨동 — Thu, 21 Oct 2021 22:19:11 +0900

EEXIST: file already exists

npm i react-router-dom을 하는데 오류가 떴습니다.

react-router-dom 뿐만아니라 npm install 시 이런 오류가 날 수 있는데요!

오류는 이미 사용중이다 존재한다 라고 해서

권한 문제일까 싶어

cmd 창을 관리자 권한으로 실행해서 npm install 을 해도 마찬가지였습니다.

해결책

node_modules 폴더 삭제
npm install
npm audit fix

그리고 실행했더니 성공하였습니다!

[React] Warning: Invalid DOM property `for`. Did you mean `htmlFor`?

맨동 — Sat, 16 Oct 2021 18:00:35 +0900

JSX에서 for 오류

Waring 코드

Warning: Invalid DOM property `for`. Did you mean `htmlFor`?

이유

JSX는 javaScrit이기 때문에 for은 반복의 의미를 가지고 있어서

HTML 상에서는 htmlFor을 써줘야 한다.

해결방법

for대신 htmlFor을 써야한다.

// warning
<label for="attach-file" className="factoryInput__label">

<label htmlFor="attach-file" className="factoryInput__label">

[React] Warning: React does not recognize the `computedMatch` prop on a DOM element

맨동 — Sat, 16 Oct 2021 17:37:32 +0900

Warning 코드

Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element.

react-router-dom을 사용할 때 위와 같은 오류가 뜰 때가 있었다.

기능에 문제는 없지만 오류 코드가 뜨는것이 불편했다.

검색 결과 해결 방법으로는

<Switch>
                <>
                {isLoggedIn ? (
                <div
                    style={{
                        maxWidth: 890,
                        width: "100%",
                        margin: "0 auto",
                        marginTop: 80,
                        display: "flex",
                        justifyContent: "center",
                    }}
                >
                    <Route exact path="/">
                        <Home userObj={userObj} />
                    </Route>
                    <Route exact path="/profile">
                        <Profile userObj={userObj} refreshUser={refreshUser}/>
                    </Route>
                </div>
                ): (<Route exact Path="/">
                    <Auth/>
                </Route>
                )}
                </>
            </Switch>

Switch 태그안에 Fragment 태그(<> </>)를 사용하면된다.

리액트 공식문서 발췌

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

React에서 합법적 인 DOM 속성 / 속성으로 인식되지 않는 소품으로 DOM 요소를 렌더링하려고하면 unknown-prop 경고가 발생합니다. DOM 요소에 허위 소품이 떠 다니지 않도록해야합니다.

[Git] error: GH007: Your push would publish a private email address

맨동 — Thu, 30 Sep 2021 13:24:50 +0900

개인 프로젝트를 여느 날과 똑같이 작업을 하고 커밋&푸시를 했는데 rejected 메시지가 뜨면서 푸시가 되질 않았다..

push 도중 만난

라는 에러 메시지였다.

푸시할 때 개인 이메일 주소를 게시한다는 에러가 떴다.

친절하게 아래에 나와 있는 링크에 들어가서 확인해보니

위의 설정이 체크되어 있었다.

이메일 설정을 변경하다 자동(?) 으로 체크 되었던것 같다.

내용은

내이메일을 노출하는 명령줄 푸시 차단

(작성자 이메일로 비공개 이메일을 사용하는 커밋을 푸시하면 푸시를 차단하고 비공개 이메일 노출에 대해 경고합니다.)

[React] 리액트 렌더링이 두 번 발생하는 이유

맨동 — Mon, 13 Sep 2021 14:00:52 +0900

렌더링이 두 번 발생하는 이유는 React.StrictMode 때문입니다.

npx create-react-app 으로 생성하면 자동 설정이 되있습니다.
따라서 index.js 에서 이 Wrapper를 제거해주면 컴포넌트가 두번씩 호출되지 않습니다.

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다.
Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.
리액트 공식문서

StrictMode는 아래와 같은 부분에서 도움이 됩니다.

안전하지 않은 생명주기를 사용하는 컴포넌트 발견
레거시 문자열 ref 사용에 대한 경고
권장되지 않는 findDOMNode 사용에 대한 경고
예상치 못한 부작용 검사
레거시 context API 검사

[Javascript] Storage(localStorage, sessionStorage)

맨동 — Fri, 3 Sep 2021 16:49:42 +0900

자바스크립트로 웹 개발을 할 때, 데이터를 저장하고 싶은데 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다.

로컬 스토리지 vs. 세션 스토리지

이 두 개의 차이점은 데이터가 어떠한 범위 내에서 얼마나 보존되느냐에 있습니다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지고, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다.

브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다.

반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다.

하지만 이러한 로컬 스토리지의 데이터 영속성(persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당합니다.

로컬 스토리지와 세션 스토리지의 공통점은 두 기술 모두 데이터를 브라우저 상에 저장한다는 것이며, 자바스크립트 API가 완전히 동일한 형태입니다. 따라서, 본 포스팅에서는 로컬 스토리지 기준으로만 예시를 드리려고 합니다. 세션 스토리지를 사용하실 때는 예제 코드의 localStorage 부분을 sessionStorage로 대체하시기만 하면 됩니다.

기본 API

웹 스토리지는 기본적으로 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있습니다. 개념적으로 해시 테이블 자료 구조를 생각하시면 이해가 쉬우실 것 같습니다. 자바스크립트 API의 기본적인 사용 방법은 다음과 같습니다.

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

엄밀하게는 window.localStorage를 사용해야하지만, window 객체의 대부분의 속성이 그러하듯, 줄여서 localStorage로 로컬 스토리지 객체에 접근할 수 있습니다.

브라우저의 콘솔 창을 열고 다음과 같이 테스트를 해보시면 대강 어떻게 사용하는지 금방 감이 잡히실 겁니다.

> localStorage.getItem('name')
null
> localStorage.getItem('email')
null
> localStorage.setItem('email', 'test@user.com')
undefined
> localStorage.getItem('email')
"test@user.com"
> localStorage.setItem('email', 'test@admin.com')
undefined
> localStorage.getItem('email')
"test@admin.com"
> localStorage.removeItem('email')
undefined
> localStorage.getItem('email')
null

주의 사항

웹 스토리지를 사용할 때 주의해야 할 부분이 하나 있는데요. 오직 문자형(string) 데이터 타입만 지원한다는 것입니다.

예를 들어, 숫자형 데이터를 로컬 스토리지에 쓰고 다시 다시 읽어보면 다음과 같이 본래 숫자가 아닌 문자가 나오는 것을 알 수 있습니다.

> localStorage.setItem('num', 1)
undefined
> localStorage.getItem('num') === 1
false
> localStorage.getItem('num')
"1"
> typeof localStorage.getItem('num')
"string"

이러한 웹 스토리지의 성질 때문에 객체형 데이터를 저장할 때 다음과 같이 큰 낭패를 보게 될 수도 있습니다.

> localStorage.setItem('obj', {a: 1, b: 2})
undefined
> localStorage.getItem('obj')
"[object Object]"

이러한 문제가 발생하는 이유는 웹 스토리지는 문자열 데이터 밖에 저장할 수 없기 때문에, 다른 타입의 데이터를 저장하려고 할 때 문자형으로 변환을 하기 때문입니다.

> String(1)
"1"
> String({a: 1, b: 2})
"[object Object]"

해결 방법

웹 스토리지를 사용할 때 위와 같은 문제를 피하기 위해서 많이 사용하는 방법이 JSON 형태로 데이터를 읽고 쓰는 것입니다.

> localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}

위와 같이 로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화(serialization)하고, 읽은 데이터를 JSON 형태로 역직렬화(deserialization)해주면 원본의 데이터를 그대로 얻을 수 있습니다.

배열형 데이터를 로컬 스토리지에 저장할 때도 동일한 방법을 문제를 예방할 수 있습니다.

> localStorage.setItem('nums', JSON.stringify([1, 2, 3]))
undefined
> JSON.parse(localStorage.getItem('nums'))
[1, 2, 3]

데이터 청소

로컬 스토리지에 저장된 데이터는 웹페이지를 닫는다고 해서 사라지지 않으므로 불필요한 데이터가 남지 않도록 직접 청소해주는 것이 좋겠습니다.

> localStorage.length
5
> localStorage.key(0)
"email"
> localStorage.removeItem('obj')
undefined
> localStorage.length
4
> localStorage.clear()
undefined
> localStorage.length
0

참고로 브라우저의 개발자 도구를 통해서 웹 스토리지에 어떤 데이터가 저장되어 있는지를 쉽게 확인하고 삭제할 수 있습니다. 예를 들어, 크롬의 경우 Application 탭에 들어가면 왼편에 Storage 영역이 보일 것입니다.

웹 스토리지에 대한 좀 더 자세한 내용은 아래 MDN 문서를 참고바랍니다.

[Javascript] ES11 (ECMAScript 2020)

맨동 — Thu, 2 Sep 2021 13:01:05 +0900

ES11 에서 추가된 기능들에 대해서 알아보겠습니다.

1. Optional Chaining(?.)

2. globalThis

3. Nullish coalescing Operator(??)

4. Dynamic import

5. BigInt

6. String.prototype.matchAll

7. Promise.allSettled

1. Optional Chaining (?.)

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

const data = {
  user: {
    name: 'foo',
    getName() {
      return this.name
    }
  }
}

const user1 = data?.user // {...}
// 위와 동일한 동작을 함
const user2 = data !== undefined && data !== null ? data.user : undefined // {...}

const userName = data?.user.getName?.() // foo
const firstFriend = data?.user.friends?.[0] // undefined

?.은 읽기나 삭제하기에는 사용할 수 있지만 쓰기에는 사용할 수 없습니다.

?.은 할당 연산자 왼쪽에서 사용할 수 없습니다.

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet";

// SyntaxError: Invalid left-hand side in assignment // 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.

2. globalThis

전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다 먼저 실행되는 특수한 객체입니다.

기존에는 js 실행환경에 따라서

- 클라이언트 사이드 환경(브라우져) 에서는 window, self, frames, this, global 을 사용해서 접근했고,

- 서버 사이드 환경(노드환경) 에서는 global 을 통해서 접근했습니다.

코드가 다양한 실행 환경에서 작동시 별도의 예외처리를 해야하는데, 이제는 globalThis를 이용하면 손쉽게 접근 가능하다는 장점이 있습니다.

// 브라우저 실행 환경 기준

globalThis === window // true

// 브라우져 기준으로 아래 3개는 동일하다.
console.log(globalThis);
console.log(window);
console.log(this);

3. Nullish coalescing Operator (??)

Null 병합 연산자입니다.

??는 왼쪽 피연산자 값이 null이나 undefined일 경우 오른쪽 피연산자를 반환하고,

그렇지 않으면 왼쪽 피연산자를 return하는 연산자입니다.

왼쪽 피연산자가 null 또는 undefined 뿐만 아니라 falsy 값에 해당할 경우 오른쪽 피연산자를 반환하는 논리 연산자 OR (||)와는 다르게 ??를 사용하면 null or undefined인 경우에만 기본 값을 할당해주어 좀 더 안전한 코드를 작성할 수 있습니다.

const data = {
  title: 'foo',
  desc: ''
}

const description1 = data.desc ?? 'default value' // ''
// 위와 동일한 동작을 함
const description2 =
  data.desc !== undefined && data.desc !== null ? data.desc : 'default value' // ''

const description3 = data.desc || 'default value' // 'default value'

4. Dynamic import

import(module) 표현식은 모듈을 읽고 이 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 프라미스를 반환합니다. 호출은 어디서나 가능합니다.

코드 내 어디에서 동적으로 사용할 수도 있습니다.

async/await이나 then/catch를 사용해서 비동기 처리할 수 있습니다.

let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");

import(modulePath)
  .then(obj => <모듈 객체>)
  .catch(err => <로딩 에러, e.g. 해당하는 모듈이 없는 경우>)

// async/await 사용
;(async () => {
    try {
      const module = await import("./myModule.js");
    } catch(error) {
      ...
    }
})()

let {hi, bye} = await import('./say.js');

hi();
bye();

5. BigInt

BigInt는 Number원시값의 표현 최대치인 2^53-1 보다 큰 값을 표현하고 싶을때 사용가능합니다.

BigInt를 사용하려면 정수값 뒤에 n을 붙이거나, BigInt(args)로 인자값을 넣어서 사용합니다.

단점은 Match 메서드와 함께 사용할 수 없으며, Number 타입의 원시값과 같이 연산 할 수 없습니다.

// 정수 리터럴 방식
const bigInt1 = 9007199254740999n
// 생성자 함수 방식
const bigInt2 = BigInt(9007199254740998)

console.log(bigInt1 > bigInt2) // true
console.log(bigInt1 > bigInt2 + 2n) // false
console.log(bigInt2 + 2) // error

6. String.prototype.matchAll

String.protorype.exec 메서드와 유사하게 동작하며, lastIndex로 부터 시작해서 정규표현식과 첫번째로 일치하는

하위 문자열의 정보를 반환하는 String.prototype.exec와 달리 일치하는

모든 하위 문자열의 정보를 포함하고 있는 이터레이터를 return 합니다.

const regexp = /t(e)(st(\d?))/g
const str = 'test1test2'
const array = [...str.matchAll(regexp)]

console.log(array[0]) // ["test1", "e", "st1", "1"]
console.log(array[1]) // ["test2", "e", "st2", "2"]

7. Promise.allSettled

Promise.allSettled 메서드는 인자로 받은 배열이나 iterable 객체를 통해 열거된 Promise 객체들이

모두 실행됐을 때 resolve하는 Promise 객체를 반환합니다.

Promise.allSettled 메서드는 Promise.all 메서드와 유사하지만,

Promise.all 메서드는 열거된 Promise 객체들 중 하나라도 reject되면 자신도 reject하지만

Promise.allSettled 메서드는 이행 여부와 상관없이 전부 다 실행되면 resolve합니다.

// 정수 리터럴 방식
const promise1 = Promise.resolve(10)
const promise2 = new Promise((_, reject) => setTimeout(reject, 100, 'foo'))
const promises = [promise1, promise2]

Promise.allSettled(promises).then(
  results => results.forEach(result => console.log(result.status)) 
  // "fulfilled", "rejected"
)

[Bundler] 번들러

맨동 — Thu, 12 Aug 2021 19:50:19 +0900

1. 번들러의 개념

웹사이트에서는 HTML, CSS, JavaScript가 동작을 합니다.

React, SCSS, TypeScript 등의 여러 라이브러리나 프레임워크를 사용하여 코딩을 진행하고 프로젝트를 제작합니다. 그리고 번들러를 통해 변환하는 과정을 거쳐 HTMl, CSS, JavaScript로 웹에서 동작시킬 수 있도록 합니다.

물론, 번들러가 직접적으로 변환시키는 것은 아닙니다. 예를 들어, SCSS 문법을 CSS로 변환시킬 때 parcel-bundler가 Sass라는 외부 패키지를 설치하여 이로부터 도움을 받아 완료한 것입니다.

3. parcel VS webpack

3.1 parcel

parcel 번들러는 별도의 구성이 없는 단순 자동 번들링을 제공해줍니다. 매우 편리한 번들러이지만 webpack 번들러에 비해 구성이 꼼꼼하지 않습니다. 그러므로 프로젝트의 규모가 커질수록 parcel 번들러의 아쉬움을 발견하는 경우가 있습니다. 이러한 이유로 parcel 번들러는 소/중형 프로젝트에 적합하다고 할 수 있습니다.

3.2 webpack

webpack 번들러는 꼼꼼하고 자세하게 번들링할 수 있는 구성 옵션을 설정해줄 수 있습니다. 그러한 구성 옵션을 통해 개발자의 입맛에 맞게 정리를 할 수 있습니다. 그러므로 당연하게도 중/대형 프로젝트에 유용하게 사용 가능합니다. 그러나 아무래도 이러한 이유로 확인해야할 사항이 많다는 단점이 있습니다.

[React] ESLint

맨동 — Sun, 8 Aug 2021 12:02:49 +0900

ESLint

1. ESLint

개발을 진행하면서 코딩 스타일을 공통적으로 맞추어 진행할 수 있어야 서로 쉽게 이해를 하며 업무를 할 수 있습니다. 이를 도와주는 도구가 바로 ESLint입니다. ESLint 혹은 Lint라 불립니다.

1.1 패키지 설치

npm 명령어로 프로젝트를 시작하고 ESLint 패키지를 설치해보도록 하겠습니다. 개발용 의존성 패키지로 설치하겠습니다. 이는 아시다시피 개발하는 상황에만 필요하며, 웹브라우저에서 동작할 시에는 필요하지 않음을 의미하는 옵션입니다.

$ mkdir eslint-test

$ cd eslint-test

$ npm init -y

$ npm i eslint -D // 패키지 설치

1.2 패키지 초기화

$ npx eslint --init

해당 명령어를 입력하면 ESLint가 초기화됩니다. 그리고 초기화의 결과로 위와 같은 화면을 보여주며 선택하는 옵션에 따라 config 파일이 생성됩니다.

하늘색으로 표시된 옵션이 default 값이며, 이를 선택하도록 하겠습니다.

1.3 eslintrc.js

이제 실제로 VScode로 프로젝트를 열어 설치된 .eslintrc.js 파일을 열어주도록 하겠습니다. 파일 내에는 옵션 내용이 명시되어 있으며, rules에 본인 혹은 팀의 규칙에 맞추어 설정해주시면 됩니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
    semi: ["error", "always"],
  },
};

위의 semi 옵션은 문장 뒤에 세미콜론을 붙이지 않으면 항상 에러로 간주하겠다는 것을 의미합니다.

ESLint의 홈페이지에서 이외에도 여러 옵션을 확인할 수 있습니다.

[React] React Life Cycle - 2

맨동 — Mon, 2 Aug 2021 22:12:08 +0900

Component Lifecycle

이번에는 16.3 버전 이상의 변경된 내용에 대해 살펴보겠습니다.

라이프사이클 변경 사항(v16.3 이상)

constructor
~~componentWillMount~~ => getDerivedStateFromProps
render
componentDidMount
~~componentWillReceiveProps~~ => getDerivedStateFromProps
shouldComponentUpdate
render
~~componentWillUpdate~~ => getSnapshotBeforeUpdate
DOM에 적용
componentDidUpdate
componentWillUnmount

1. getDerivedStateFromProps

getDerivedStateFromProps는 최초 마운트 시와 갱신 시 모두에서 render 메소드를 호출하기 직전에 호출됩니다.

state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무 것도 갱신하지 않을 수 있습니다.

이 메소드는 시간이 흐름에 따라 변하는 props에 state가 의존하는 아무 드문 사용례를 위하여 존재합니다. 예를 들어, 무엇을 움직이도록 만들지 결정하기 위하여 이전과 현재의 자식 엘리먼트를 비교하는 <Transition>와 같은 컴포넌트를 구현할 때에 편리하게 사용할 수 있습니다.

1.1 코드 예시

static getDerivedStateFromProps(nextProps, prevState) {
  console.log("getDerivedStateFromProps", nextProps, prevState);

  return {
    age: 390,
  }
}

ReactDOM.render(<App name="Orosy" />, document.querySelector("#root"));

2. getSnapshotBeforeUpdate

getSnapshotBeforeUpdate는 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되었을 때에 호출됩니다.

이 메소드를 사용하면 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 이후 변경되기 전에 얻을 수 있습니다. 이 라이프사이클 메소드가 반환하는 값은 componentDidUpdate에 인자로 전달됩니다.

이 메소드에 대한 사용례는 흔하지 않지만, 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등을 생각해볼 수 있습니다.

스냅샷 값을 반환하거나 null을 반환합니다.

2.1 코드 예시

아래의 코드는 위에서 언급했던 것처럼 getSnapshotBeforeUpdate를 이용하여 데이터가 업데이트하게 되면 스크롤 위치가 자동으로 변하게 되는 로직을 구현한 코드입니다.

실제로 코드는 이해하기 쉽지 않기 때문에 이러한 방식으로 해당 라이프사이클을 활용하는 것이라고 알아주시면 됩니다.

let i = 0;

class App extends React.Component {
  state = { list: [] };

  render() {
    return (
      <div id="list" style={{ height: 100, overflow: "scroll" }}>
        {this.state.list.map((i) => {
          return <div>{i}</div>;
        })}
      </div>
    );
  }

  componentDidMount() {
    setInterval(() => {
      this.setState((state) => ({
        list: [...state.list, i++],
      }));
    }, 1000);
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.list.length === this.state.list.length) return null;
    const list = document.querySelector("#list");
    return list.scrollHeight - list.scrollTop;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot);
    if (snapshot === null) return;
    const list = document.querySelector("#list");
    list.scrollTop = list.scrollHeight - snapshot;
  }
}

ReactDOM.render(<App name="Orosy" />, document.querySelector("#root"));

3. componentDidCatch

componentDidCatch는 이름에서 알 수 있다시피 자손 컴포넌트에서 오류가 발생했을 때에 호출되는 메소드입니다.

해당 라이프사이클이 나오기 전에는 리액트 앱으로 부분적으로 에러가 발생했을 때, 전체 웹사이트가 동작하지 않는 문제가 있었습니다.

해당 컴포넌트로 오류가 발생하게 되면 해당 화면을 보여줄 수 있게 되었습니다.

그러나 해당 라이프사이클의 단점은 자손 컴포넌트가 아닌 자기 자신에게 오류가 발생하게 되면, 오류를 캐치할 수 없게 됩니다.

그렇기 때문에 에러 바운더리를 가장 부모로 만들어주고 그 하위인 서비스 컴포넌트에서 문제가 발생했을 때에 캐치하는 방식으로 사용하게 됩니다. 그러므로 이 경우에는 에러 바운더리라는 라이브러리를 사용해야 합니다.

3.1 코드 예시

class App extends React.Component {
  state = {
    hasError: false,
  };
  render() {
    if (this.state.hasError) {
      return <div>에러 발생!!</div>;
    }
    return <WebService />;
  }
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }
}

[React] React Life Cycle - 1

맨동 — Mon, 19 Jul 2021 14:34:32 +0900

Component Lifecycle

해당 내용은 16.3 버전 이전의 내용을 다루고 있습니다.

라이프사이클 (v16.3 이전)

1. Component 생성 및 마운트

constructor
componentWillMount
render(최초 렌더)
componentDidMount

1.1 코드 예시

class App extends React.Component {
  state = {
    age: 25,
  };
  constructor(props) {
    super(props);

    console.log("constructor", props);
  }
  render() {
    console.log("render");
    return (
      <div>
        <h2>
          Hello {this.props.name} - {this.state.age}
        </h2>
      </div>
    );
  }

  componentWillMount() {
  console.log("componentWillMount");
  }

  componentDidMount() {
  console.log("componentDidMount");
  }
}

ReactDOM.render(<App name="Dongit" />, document.querySelector("#root"));

위 코드로 Component 생성과 마운트에 대해 알아볼 수 있습니다.

constructor라는 생성자가 콘솔창에 출력이 되고 이후 렌더 메소드에 있는render라는 내용이 출력이 되는 것을 확인할 수 있습니다.

그리고 render 전에는 componentWillMount 그리고 이후에는 componentDidMount 라이프사이클이 콘솔창에 출력되는 것을 볼 수 있습니다.

2. Component props,state 변경

componentWillReceiveProps (state 변경 시, 실행되지 않음)
shouldComponentUpdate
componentWillUpdate
render(최초 렌더)
componentDidUpdate

2.1 코드 예시

이번에는 클래스 컴포넌트로 이벤트 핸들러를 만든 코드입니다.

componentWillReceiveProps(nextProps) {
  console.log("componentWillReceiveProps", nextProps);
}

shouldComponentUpdate(nextProps, nextState)  {
  console.log("shouldComponentUpdate", nextProps, nextState);

  return false;
}

componentWillUpdate(nextProps, nextState) {
  console.log("componentWillUpdate", nextProps, nextState);
}

componentDidUpdate(prevProps, prevState) {
  console.log("componentDidUpdate", prevProps, prevState);
}

ReactDOM.render(<Component />, document.querySelector("#root"));

shouldComponentUpdate는 다른 라이프사이클과는 달리 shouldComponentUpdate는 불린 데이터인 true와 false를 갖게 됩니다. 여기서 값을 false로 지정하게 되면, 이후의 라이프사이클은 실행되지 않습니다. 결국, componentWillUpdate부터 실행되지 않으며, 쉽게 말해 업데이트가 실행되지 않음을 의미합니다.

이로 인해 render의 실행 여부를 결정할 수 있는 중요한 라이프사이클입니다.

2.2 componenetWillReceiveProps

이 라이프사이클은 props를 새로 지정했을 때 바로 호출되며, state의 변경에 반응하지 않습니다.

해당 라이프사이클에서 props에 따라 state를 변경해야 한다면, setState를 이용하여 state를 변경합니다. 그러면 다음 이벤트로 각각 가는 것이 아니라 한번에 변경됩니다.

2.3 shouldComponentUpdate

이 라이프사이클은 props, state 하나만 변경되거나 둘 다 변경되어도 실행이 됩니다. newProps와 newState를 인자로 하여 호출합니다.

위에서 언급했던 것처럼, return type이 불린 데이터입니다. 해당 함수를 구현하지 않으면 디폴트 값은 true이며, false일 경우 render가 호출되지 않습니다.

2.4 componentWillUpdate

컴포넌트가 재렌더링 되기 직전에 불리며, 여기선 setState와 같은 메소드는 사용해선 안됩니다.

2.5 componentDidUpdate

컴포넌트가 재렌더링을 마치면 불리는 라이프사이클입니다.

3. Component 언마운트

3.1 componentWillUnmount

실제로 컴포넌트가 unmount되고 난 후에는 처리할 수 없습니다. 그렇기 때문에 해당 라이프사이클만 활용이 가능합니다.

[React] React Router

맨동 — Fri, 16 Jul 2021 17:54:08 +0900

React Router로 라우팅 하기

SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자바스크립트로 모든 부분을 동적으로 랜더링하는 구조입니다.

그리고 화면의 전체 또는 일부를 브라우저에서 발생하는 이벤트에 따라서 동적으로 갱신할 수 있기 때문에 인터랙티브 한 사용자 경험을 제공할 수 있습니다.

별도의 라이브러리 없이 React로 간단하게 라우팅을 구현할 수 있습니다. 예를 들어, 다음 코드 처럼 현재 어떤 컴포넌트가 랜더링되야 하는지 상태로 관리할 수 있습니다. <header> 내의 특정 메뉴 버튼을 클릭하면 상응하는 컴포넌트로 comp 상태가 바뀌기 때문에 화면에서 <main> 부분이 갱신되게 됩니다.

import React, { useState } from "react";
import Home from "./Home";
import About from "./About";
import NotFound from "./NotFound";

function App() {
  const [comp, setComp] = useState(Home);

  return (
    <>
      <header>
        <button onClick={() => setComp(Home)}>Home</button>
        <button onClick={() => setComp(About)}>About</button>
        <button onClick={() => setComp(NotFound)}>Users</button>
      </header>
      <hr />
      <main children={comp} />
    </>
  );
}

하지만 이런 방식으로 라우팅을 구현하게 되면 사용자 입장에서 다음과 같은 문제가 발생합니다.

특정 페이지에 대한 즐겨찾기 등록이 불가합니다. 컴포넌트가 전환되더라도 브라우저 주소창의 URL은 고정되어 있기 때문입니다.
뒤로 가기 버튼을 누르면 해당 앱내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버립니다.
새로 고침 버튼을 누르면 사용 중이던 컴포넌트가 아닌 무조건 최초에 렌더링되었던 Home 컴포넌트로 이동합니다.
SEO(검색 엔진 최적화) 측면에서도 일반 웹사이트들과 차이가 있어서 검색 엔진에 의해 원치않는 방식으로 색인이 될 수도 있습니다.

React Router란?

React Router는 위에서 살펴본 SPA의 라우팅 문제를 해결하기 위해서 거의 표준처럼 사용되고 있는 네비게이션 라이브러리입니다. React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동이 됩니다. 따라서 SPA에서 제공하는 다이나믹한 사용자 경험을 그대로 살리면서도 기존 웹사이트에서 가능하던 브라우저 상의 매끈한 라우팅을 제공할 수 있습니다.

React Router 설치

React Router는 Web 용과 Native 용이 존재합니다. 아래와 같이 Web 용 react-router-dom을 React 애플리케이션 프로젝트에 설치해줍니다.

$ npm i react-router-dom

React Router 핵심 컴포넌트

Link 컴포넌트

HTML의 <a> 태그와 유사한 기능을 하는 컴포넌트라고 생각하시면 이해가 쉽습니다. <a> 태그는 href 속성을 통해 이동할 경로를 지정하는 반면에 <Link> 컴포넌트는 to prop을 통해서 이동할 경로를 지정해줍니다.

<Link to="/about">About</Link>

예를 들어, 위의 코드는 브라우저에서 클릭이 가능한 About으로 랜더링되고, About를 클릭하면 주소창의 경로가 <도메인 네임>/about으로 갱신됩니다. 일반적으로 화면 상단이나 좌측에 위치한 네비게이션 바를 구현할 때 주로 사용하게되는 컴포넌트입니다.

Route 컴포넌트

<Route> 컴포넌트는 현재 주소창의 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용됩니다. path prop을 통해서 매치시킬 경로를 지정하고 component prop을 통해서 매치되었을 때 보여줄 컴포넌트를 할당합니다.

예를 들어, 위의 코드는 현재 주소창의 경로가 /about일 경우 About라는 컴포넌트를 보여줍니다. 일반적으로 현재 주소창의 URL 경로에 따라 특정 컨텐트를 보여주거나 숨기기 위해서 사용될 수 있습니다.

Router 컴포넌트

<Router> 컴포넌트는 위에 나온 <Route>와 <Link> 컴포넌트가 함께 유기적으로 동작하도록 묶어주는데 사용합니다. 다시 말해, <Route>와 <Link> 컴포넌트는 DOM 트리 상에서 항상 <Router>를 공통 상위 컴포넌트로 가져야합니다.

...

...

...

</Router>

즉, 전체적으로 React Router를 사용하는 어플리케이션은 이와 같은 구조를 가지게 됩니다. 실제 프로젝트에서는 위 컴포넌트들이 여러 파일에 걸쳐서 흩어져 있을 수도 있겠지만, 이 큰 그림을 염두해두고 코드를 읽다보면 어렵지 않게 라우팅 흐름을 파악하실 수 있으실 것입니다.

React Router로 라우팅 구현

자 그럼, 처음에 직접 구현했던 라우팅을 React Router를 이용해서 재구현 해보겠습니다. 먼저 설치한 react-router-dom 패키지로 부터 3가지 핵심 컴포넌트를 임포트해야합니다.

import { Link, Route, BrowserRouter as Router } from "react-router-dom";

사실 React Router가 제공하는 <Router> 컴포넌트가 여러 종류가 있는데, 여기서는 대게 일반적은 라우팅을 위해 사용되는 <BrowserRouter>를 사용하였습니다. 다른 라우터들은 추후 기회가 되면 다른 포스트를 통해서 다루도록 하겠습니다.

먼저, 헤더 부분을 <Link> 컴포넌트를 사용해서 리팩토링 합니다. to prop에 해당 메뉴 클릭 시 이동해야할 경로를 지정합니다.

<header>
  <Link to="/">
    <button>Home</button>
  </Link>
  <Link to="/about">
    <button>About</button>
  </Link>
  <Link to="/users">
    <button>Users</button>
  </Link>
</header>

다음, 메인 부분을 <Route> 컴포넌트를 사용해서 리팩토링 합니다. path prop에 매치 시 비교될 경로를 지정하고, component prop에 매치 시 보여줄 컴포넌트를 할당합니다.

여기서 / 경로를 사용하는 <Route> 컴포넌트에만 exact prop이 사용된 이유는, React Router의 디폴트 매칭 규칙 때문입니다. React Router는 path prop의 경로와 현재 브라우저의 주소창의 URL 경로 (location.pathname)와 비교를 하는데요.

현재 URL 경로 값이 <Route>의 path porp 값과 전체가 아닌 앞부분만 일치해도 매치되는 것으로 간주합니다. 따라서 path가 /일 경우, / 뿐만 아니라 /로 시작하는 모든 URL 경로, 사실 상 가능한 모든 경우의 수의 경로와 매치가 됩니다.

그렇기 때문에, exact prop이 없으면, 의도치 않게 Home 컴포넌트가 URL 경로와 상관없이 항상 보여지게 됩니다. 하지만 exact prop을 붙여주면 URL 경로 값이 <Route>의 path 값과 완벽히 전체가 일치해야 매치되는 것으로 처리를 해줍니다.

<main>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/users" component={NotFound} />
</main>

마지막으로 <Router> 컴포넌트로 위에서 작성한 모든 <Link> 컴포넌트와 <Route> 컴포넌트를 함께 감싸주기만 하면 끝입니다.

import React from "react";
import { Link, Route, BrowserRouter as Router } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import NotFound from "./NotFound";

function App() {
  return (
    <Router>
      <header>
        <Link to="/">
          <button>Home</button>
        </Link>
        <Link to="/about">
          <button>About</button>
        </Link>
        <Link to="/users">
          <button>Users</button>
        </Link>
      </header>
      <hr />
      <main>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users" component={NotFound} />
      </main>
    </Router>
  );
}

이제 브라우저에서 네이게이션 메뉴를 클릭해보면 브라우저의 주소가 현재 페이지에 맞게 갱신이 되는 것을 확인하실 수 있을 겁니다. 뿐만 아니라, 뒤로 가기, 앞으로 가기, 새로 고침 버튼들도 일반 웹사이트를 서핑하듯이 작동하는 것을 확인하실 수 있을 겁니다.

[React] JSX

맨동 — Wed, 14 Jul 2021 13:01:12 +0900

JSX란?

1. 특징

JSX는 JavaScript의 XML입니다.

JavaScript 문법의 확장판으로 리액트에서 요소를 제공합니다.

컴파일에 최적화
확장자는 jsx 또는 js
컴파일 과정이 필요하므로 변환 과정에서 오류가 있다면 빌드 시 오류 발생

2. 사용 이유

1. React.createElement와 JSX를 비교하였을 때, JSX의 가독성이 훨씬 뛰어납니다.

2. Babel과 같은 컴파일 과정에서 문법적인 오류를 인지하기 쉽습니다.

3. 변환 과정

JSX의 문법으로 작성된 코드는 순수한 JavaScript로 컴파일하여 사용할 수 있습니다.

이를 가능하도록 하는 것이 바로 Babel입니다.

4. 사용 방법

4.1 CDN

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

CDN을 통해, 별도의 설치 없이 Babel 사용이 가능합니다.

4.2 작성법

<script type="text/babel"> // 아래에 JSX 문법 작성
  ReactDOM.render(
    <div>
      <div>
        <h1>주제</h1>
        <ul>
          <li>React</li>
          <li>Vue</li>
        </ul>
      </div>
    </div>,
    document.querySelector('#root')
  );
</script>

JSX 문법으로 코드를 작성하면 Babel이 자동으로 JavaScript 문법으로 컴파일을 진행하게 됩니다.

5. JSX 문법

최상위 요소가 하나여야만 합니다.
최상위 요소를 return하는 경우, ()로 감싸야합니다.
자식 요소를 바로 렌더링하고 싶다면, <>자식 요소</>를 사용합니다. 이를 Fragment라 부릅니다.
자바스크립트 표현식을 사용하려면, {표현식}을 이용합니다.
if 문은 사용할 수 없습니다. 삼항 연산자 혹은 &&을 사용합니다.
style을 이용하여 인라인 스타일링이 가능합니다.
class 대신 className을 사용해 class를 적용할 수 있습니다.

[React] Props와 State

맨동 — Tue, 13 Jul 2021 15:04:55 +0900

1. Props, State

Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터이고,

State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다.

둘 중 하나라도 변경되면 렌더링이 일어납니다.

render 함수는 Props와 State를 바탕으로 컴포넌트를 그립니다.

그리고 Props와 State가 변경이 되면, 컴포넌트를 다시 그리게 됩니다.

컴포넌트를 그리는 방법을 기술하는 함수가 바로 render 함수입니다.

2. Props

2.1 Props 사용 예제 (1)

// {message: 'Hello!!!'}
function Component(props) {
  return (
    <div>
      <h1>{props.message}</h1>
    </div>
  );
}

ReactDOM.render(
  <Component message='Hello' />,
  document.querySelector('#root')
);

함수로 컴포넌트를 만들고 props 를 매개변수로 받고 있습니다.

2.2 Props 사용 예제 (2)

class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Component message='Hello' />,
  document.querySelector('#root')
);

클래스로 컴포넌트를 만들고 this 를 사용하여 props에 접근할 수 있습니다.

2.3 기본값 사용 예제

function Component(props) {
  return (
    <div>
      <h1>{props.message}</h1>
    </div>
  );
}

Component.defaultProps = {
  message: 'default값'
}

ReactDOM.render(
  <Component />,
  document.querySelector('#root')
);

직접 값을 지정하지 않고, default 값을 설정하여 화면에 출력해보겠습니다.

class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
  static defaultProps = {
    message: '기본값!',
  }
}

ReactDOM.render(
  <Component />,
  document.querySelector('#root')
);

<Component mesaage='Not default' />으로 직접 값을 지정한다면, Not default 라는 메세지가 출력됩니다.

3. State

State는 현재 클래스 컴포넌트에서만 사용할 수 있는 기능입니다.

하지만 Hooks을 사용하면, 함수에도 사용이 가능합니다.

class Component extends React.Component {
  state = {
    count: 0,
  }
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
        <p>{this.state.count}</p>
      </div>
    );
  }

  // 라이프사이클: 화면에 올리자마자 바로 실행되는 함수
  componentDidMount() {
    setTimeout(() => {
    // this.state.count = this.state.count + 1
    this.setState({
      count: this.state.count + 1,
    })
  }, 3000)
}

0으로 시작한 state 값이 3초 뒤 1로 변하게 되는 코드입니다.

state는 객체 데이터 형태로 제공이 됩니다.

다른 방법으로는 constructor, super를 키워드를 사용하여 클래스의 확장 기능을 이용하여 작성하는 방법도 있습니다.

// state = {
//   count: 0,
// }
constructor(props) {
  super(props);

  //
  this.state = { count: 0 };
}

tate 값을 변하게 만들 때에는 아래의 코드처럼 setState를 호출하여 값이 바뀐 상태로 render 메소드가 자동으로 호출되고, 화면이 다시 그려집니다.

// this.state.count = this.state.count + 1
this.setState({
  count: this.state.count + 1,
})

객체를 전달하는 방법 외에 함수를 전달하는 방법도 있습니다.

항상 setState가 가장 최신의 state 값을 사용하도록 보장하도록 해보겠습니다.

객체를 전달하면 0에서 1이 추가되고 끝나지만, 함수를 사용하게 되면 0에서 1, 1에서 2, 2에서 3 이런 식으로 업데이트가 반영되도록 해줍니다.

this.setState((previousState)=>{
  const newState = { count: previousState.count + 1 }
  return newState
})

위와 같이 setState에 전달하는 함수를 updater라 부르며,

이를 통해 이전 state 값에 접근할 수 있습니다.

setState 호출은 일괄적으로 처리되기 때문에 여러 업데이트 사항이 충돌 없이 차례대로 반영되도록 합니다.

[Web] SPA (Single Page Application)

맨동 — Wed, 7 Jul 2021 14:06:19 +0900

과거의 웹 사이트

전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었습니다.

그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했습니다.

그러나 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고,

매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었습니다.

SPA란 ?

이러한 문제를 해결하기 위해 등장한 것이 SPA(Single Page Application)입니다.

어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA입니다.

뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어나게 해줍니다.

페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것입니다.

장점

사용자 친화적(빠른 반응성, 화면 전환 애니메이션)입니다.
화면에 필요한 부분의 데이터만 받아서 렌더링 하기 때문에 처리과정이 효율적입니다.
서버 요청이 적습니다.

단점

처음 화면을 로딩할 때, 모든 화면이 미리 준비되어 있어야 하기 때문에 로딩에 시간이 걸립니다.
검색엔진 최적화(SEO): SPA의 소스코드는 최초에 앱을 실행하기 위한 script, link 태그나 데이터가 비어 있는 뷰 껍데기 정도로 구성되어 있을 뿐이라 웹 크롤러가 데이터를 수집할 수 없습니다. (극복 가능)

[javascript] async 와 await

맨동 — Mon, 5 Jul 2021 17:39:44 +0900

async & await란?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다.

기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다.

async & await 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

함수의 앞에 async 라는 예약어를 붙입니다.

그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다.

여기서 주의하셔야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다.

일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수입니다.

async & await 간단한 예제

function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items)
  });
}

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}

먼저 fetchItems() 함수는 프로미스 객체를 반환하는 함수입니다.

프로미스는 “자바스크립트 비동기 처리를 위한 객체“입니다.

fetchItems() 함수를 실행하면 프로미스가 이행(Resolved)되며 결과 값은 items 배열이 됩니다.

그리고 이제 logItems() 함수를 보겠습니다.

logItems() 함수를 실행하면 fetchItems() 함수의 결과 값인 items 배열이 resultItems 변수에 담깁니다.

await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then()등을 사용해야 합니다.

하지만 async await 문법 덕택에 비동기에 대한 사고를 하지 않아도 됩니다.

async & await 실용 예제

async & await 문법이 가장 빛을 발하는 순간은 여러 개의 비동기 처리 코드를 다룰 때입니다.

아래와 같이 각각 사용자와 할 일 목록을 받아오는 HTTP 통신 코드가 있다고 하겠습니다.

function fetchUser() {
  var url = 'https://jsonplaceholder.typicode.com/users/1'
  return fetch(url).then(function(response) {
    return response.json();
  });
}

function fetchTodo() {
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  return fetch(url).then(function(response) {
    return response.json();
  });
}

위 함수들을 실행하면 각각 사용자 정보와 할 일 정보가 담긴 프로미스 객체가 반환됩니다.

자 이제 이 두 함수를 이용하여 할 일 제목을 출력해보겠습니다. 살펴볼 예제 코드의 로직은 아래와 같습니다.

fetchUser()를 이용하여 사용자 정보 호출
받아온 사용자 아이디가 1이면 할 일 정보 호출
받아온 할 일 정보의 제목을 콘솔에 출력

그럼 코드를 보겠습니다.

async function logTodoTitle() {
  var user = await fetchUser();
  if (user.id === 1) {
    var todo = await fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
}

logTodoTitle()를 실행하면 콘솔에 delectus aut autem가 출력될 것입니다.

위 비동기 처리 코드를 만약 콜백이나 프로미스로 했다면 훨씬 더 코드가 길어졌을 것이고 인덴팅 뿐만 아니라 가독성도 좋지 않았을 겁니다.

이처럼 async await 문법을 이용하면 기존의 비동기 처리 코드 방식으로 사고하지 않아도 되는 장점이 생깁니다.

async & await 예외 처리

async & await에서 예외를 처리하는 방법은 바로 try catch 입니다.

프로미스에서 에러 처리를 위해 .catch()를 사용했던 것처럼 async에서는 catch {} 를 사용하시면 됩니다.

조금 전 코드에 바로 try catch 문법을 적용해보겠습니다.

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}

위의 코드를 실행하다가 발생한 네트워크 통신 오류뿐만 아니라 간단한 타입 오류 등의 일반적인 오류까지도 catch로 잡아낼 수 있습니다. 발견된 에러는 error 객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리해주시면 됩니다.

위 내용은 캡틴판교님의 블로그 글을 참조하였습니다.

[JavaScript] Promise

맨동 — Sat, 3 Jul 2021 14:17:32 +0900

Promise란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.

자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

Promise의 필요성

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다.

API가 실행되면 서버에다가 데이터를 보내달라는 요청을 보냅니다.

그런데 데이터를 받아오기 전에 데이터를 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨는데,

이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다.

프로미스 코드 - 기초

그럼 프로미스가 어떻게 동작하는지 이해하기 위해 예제 코드를 살펴보겠습니다. 먼저 아래 코드는 간단한 ajax 통신 코드입니다.

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

;위 코드는 제이쿼리의 ajax 통신 API를 이용하여 지정된 url에서 1번 상품 데이터를 받아오는 코드입니다.

비동기 처리를 위해 프로미스 대신에 콜백 함수를 사용했습니다.

위 코드에 프로미스를 적용하면 아래와 같은 코드가 됩니다.

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

콜백 함수로 처리하던 구조에서 new Promise(), resolve(), then()와 같은 프로미스 API를 사용한 구조로 바뀌었습니다.

프로미스의 3가지 상태(states)

프로미스의 상태(states)란 프로미스의 처리 과정을 의미합니다.

new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

new Promise() 메서드를 호출하면 대기(Pending) 상태가 됩니다.

new Promise();

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject입니다.

new Promise(function(resolve, reject) {
  // ...
});

;

Fulfilled(이행)

콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 됩니다.

new Promise(function(resolve, reject) {
  resolve();
});

그리고 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있습니다.

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

Rejected(실패)

reject를 아래와 같이 호출하면 실패(Rejected) 상태가 됩니다.

new Promise(function(resolve, reject) {
  reject();
});

그리고, 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있습니다.

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

프로미스 코드 - 쉬운 예제

간단한 프로미스 코드를 만들어보겠습니다.

이해하기 쉽게 앞에서 살펴본 ajax 통신 예제 코드에 프로미스를 적용해보겠습니다.

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});

위 코드는 서버에서 제대로 응답을 받아오면 resolve() 메서드를 호출하고, 응답이 없으면 reject() 메서드를 호출하는 예제입니다. 호출된 메서드에 따라 then()이나 catch()로 분기하여 응답 결과 또는 오류를 출력합니다.

여러 개의 프로미스 연결하기 (Promise Chaining)

프로미스의 또 다른 특징은 여러 개의 프로미스를 연결하여 사용할 수 있다는 점입니다. 앞 예제에서 then() 메서드를 호출하고 나면 새로운 프로미스 객체가 반환됩니다.

function getData() {
  return new Promise({
    // ...
  });
}

// then() 으로 여러 개의 프로미스를 연결한 형식
getData()
  .then(function(data) {
    // ...
  })
  .then(function() {
    // ...
  })
  .then(function() {
    // ...
  });

그러면 위의 형식을 참고하여 실제로 돌려볼 수 있는 예제를 살펴보겠습니다.

비동기 처리 예제에서 가장 흔하게 사용되는 setTimeout() API를 사용하였습니다.

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 1000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

프로미스 객체를 하나 생성하고 setTimeout()을 이용해 1초 후에 resolve()를 호출하는 예제입니다.

resolve()가 호출되면 프로미스가 대기 상태에서 이행 상태로 넘어가기 때문에 첫 번째 .then()의 로직으로 넘어갑니다. 첫 번째 .then()에서는 이행된 결과 값 1을 받아서 10을 더한 후 그다음 .then() 으로 넘겨줍니다. 두 번째 .then()에서도 마찬가지로 바로 이전 프로미스의 결과 값 11을 받아서 20을 더하고 다음 .then()으로 넘겨줍니다. 마지막 .then()에서 최종 결과 값 31을 출력합니다.

실무에서 있을 법한 프로미스 연결 사례

실제 웹 서비스에서 있을 법한 사용자 로그인 인증 로직에 프로미스를 여러 개 연결해보겠습니다.

getData(userInfo)
  .then(parseValue)
  .then(auth)
  .then(diaplay);

위 코드는 페이지에 입력된 사용자 정보를 받아와 파싱, 인증 등의 작업을 거치는 코드를 나타내었습니다.

여기서 userInfo는 사용자 정보가 담긴 객체를 의미하고, parseValue, auth, display는 각각 프로미스를 반환해주는 함수라고 가정했습니다. 아래와 같이 말이죠.

var userInfo = {
  id: 'test@abc.com',
  pw: '****'
};

function parseValue() {
  return new Promise({
    // ...
  });
}
function auth() {
  return new Promise({
    // ...
  });
}
function display() {
  return new Promise({
    // ...
  });
}

이처럼 여러 개의 프로미스를 .then()으로 연결하여 처리할 수 있습니다.

프로미스의 에러 처리 방법

앞에서 살펴본 프로미스 예제는 코드가 항상 정상적으로 동작한다고 가정하고 구현한 예제입니다. 실제 서비스를 구현하다 보면 네트워크 연결, 서버 문제 등으로 인해 오류가 발생할 수 있습니다. 따라서, 프로미스의 에러 처리 방법에 대해서도 알고 있어야 합니다.

에러 처리 방법에는 다음과 같이 2가지 방법이 있습니다.

1.then()의 두 번째 인자로 에러를 처리하는 방법

getData().then(
  handleSuccess,
  handleError
);

2.catch()를 이용하는 방법

getData().then().catch();

위 2가지 방법 모두 프로미스의 reject() 메서드가 호출되어 실패 상태가 된 경우에 실행됩니다. 간단하게 말해서 프로미스의 로직이 정상적으로 돌아가지 않는 경우 호출되는 거죠. 아래와 같이 말입니다.

function getData() {
  return new Promise(function(resolve, reject) {
    reject('failed');
  });
}

// 1. then()의 두 번째 인자로 에러를 처리하는 코드
getData().then(function() {
  // ...
}, function(err) {
  console.log(err);
});

// 2. catch()로 에러를 처리하는 코드
getData().then().catch(function(err) {
  console.log(err);
});

프로미스 에러 처리는 가급적 catch()를 사용

앞에서 프로미스 에러 처리 방법 2가지를 살펴봤습니다. 개개인의 코딩 스타일에 따라서 then()의 두 번째 인자로 처리할 수도 있고 catch()로 처리할 수도 있겠지만 가급적 catch()로 에러를 처리하는 게 더 효율적입니다.

그 이유는 아래의 코드를 보시면 알 수 있습니다.

// then()의 두 번째 인자로는 감지하지 못하는 오류
function getData() {
  return new Promise(function(resolve, reject) {
    resolve('hi');
  });
}

getData().then(function(result) {
  console.log(result);
  throw new Error("Error in then()"); // Uncaught (in promise) Error: Error in then()
}, function(err) {
  console.log('then error : ', err);
});

getData() 함수의 프로미스에서 resolve() 메서드를 호출하여 정상적으로 로직을 처리했지만, then()의 첫 번째 콜백 함수 내부에서 오류가 나는 경우 오류를 제대로 잡아내지 못합니다. 따라서 코드를 실행하면 아래와 같은 오류가 납니다.

'에러를 잡지 못했습니다(Uncaught Error)' 로그

하지만 똑같은 오류를 catch()로 처리하면 다른 결과가 나옵니다.

// catch()로 오류를 감지하는 코드
function getData() {
  return new Promise(function(resolve, reject) {
    resolve('hi');
  });
}

getData().then(function(result) {
  console.log(result); // hi
  throw new Error("Error in then()");
}).catch(function(err) {
  console.log('then error : ', err); // then error :  Error: Error in then()
});

위 코드의 처리 결과는 다음과 같습니다.

발생한 에러를 성공적으로 콘솔에 출력한 모습

따라서, 더 많은 예외 처리 상황을 위해 프로미스의 끝에 가급적 catch()를 붙이시기 바랍니다.

위 내용은 캡틴판교님의 블로그 글을 참조하였습니다.

[Vue.js] 컴포지션 API - props, context

맨동 — Thu, 1 Jul 2021 13:56:15 +0900

컴포지션 API - props, context

1. 전달인자

setup 펑션은 2가지 전달인자를 가집니다

props
context

1.1 Props

setup 펑션의 첫번째 전달인자는 props입니다. 표준 컴포넌트에서 예상하는 것처럼 setup 내부의 props는 반응성이 있고, 새로운 props가 전달되면 업데이트됩니다.

1.2 Context

setup펑션의 두번째 전달인자는 context입니다. context는 3가지 컴포넌트 프로퍼티를 가지는 일반 JavaScript 객체입니다.

2. 컴포넌트 속성에 접근하기

setup이 실행될 때, 컴포넌트 인스턴스는 아직 생성되지 않았습니다. 결과적으로 아래와 같은 속성에만 접근할 수 있습니다.

props
attrs
slots
emit

즉, 다음 컴포넌트 옵션에는 접근할 수 없습니다:

data
computed
methods

3. 컴포지션 API 비교 예시

3.1 컴포지션 API 사용 전 코드 예시

//App.vue
<template>
  <MyBtn
    class="orosy"
    style="color: red;"
    color="#ff0000"
    @hello="log">
    Apple
  </mybtn>
</template>
<script>
import MyBtn from '~/components/MyBtn'

export default {
  components: {
    MyBtn
  },
  methods: {
    log() {
      console.log('Hello world!')
    }
  }
}
</script>

//MyBtn.vue
<template>
  <div
    v-bind="$attrs"
    class="btn"
    @click="hello">
    <slot></slot>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    color: {
      type: String,
      default: 'gray'
    }
  },
  emits: ['hello'],
  mounted() {
    console.log(this.color)
    console.log(this.$attrs)
  },
  methods: {
    hello() {
      this.$emit('hello')
    }
  }
}
</script>

3.2 컴포지션 API 사용 후 코드 예시

//MyBtn.vue
<template>
  <div
    v-bind="$attrs"
    class="btn"
    @click="hello">
    <slot></slot>
  </div>
</template>
<script>
import { onMounted } from 'vue'
export default {
  inheritAttrs: false,
  props: {
    color: {
      type: String,
      default: 'gray'
    }
  },
  emits: ['hello'],
  setup(props, context) {
    function hello() {
      context.emit('hello')
    }
    onMounted(() => {
      console.log(props.color)
      console.log(context.attrs)
    })

    return {
      hello
    }
  }
}
</script>

4. this 사용법

setup() 내부의 this는 현재 활성화된 인스턴스에 대한 참조가 아닙니다. 다른 컴포넌트 옵션들이 resolved가 되기 전에 setup()이 호출되었기 때문에, setup() 내부의 this는 다른 옵션 내부의 this와 다르게 동작합니다. 이로인해 다른 Options API와 함께 setup()를 사용할 때 혼동이 발생할 수 있습니다.

[Vue.js] 컴포지션 API

맨동 — Thu, 1 Jul 2021 12:51:03 +0900

1. 컴포지션 API의 필요성

//App.vue
<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1>
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

message와 관련된 코드, 그리고 count와 관련된 코드가 나뉘어 작성을 하게 되며 코드가 동작하는 로직을 이해하기 위해서 관련 코드의 옵션 블록을 지속적으로 점프해야합니다.

코드를 이해하기 위해 관련 옵션들을 위, 아래로 이동(스크롤)하여 코드를 보는 행동을 점프라고 표현합니다. 논리적인 관점 단위로 개발을 하려고 해도 이 옵션의 규칙을 지켜야하고 더 많은 논리 주제가 추가될 수록 코드의 양이 많아져 가독성이 떨어지고 유지보수성이 낮아집니다.

그렇다면 동일한 논리적 관심사와 관련있는 코드를 함께 배치할 수 있다면 더 좋을 것입니다. 이것이 바로 Composition API가 할 수 있는 일입니다.

컴포지션 API - 반응형 데이터

2. 반응형 데이터(반응성)

Vue.js의 중요한 개념인 반응성에 대해 살펴본 적이 있습니다. 이를 컴포지션 API로 코드를 수정하여 사용할 수 있으며 이에 대해 살펴봅시다.

2.1 코드 예시

//App.vue
<h1 @click="increase">
  {{ count }}
</h1>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}

클릭 이벤트를 통해 0인 count가 1씩 증가하는 코드로 반응성이 적용되어 있습니다.

2.2 컴포지션 API 사용 예시(중간형)

App.vue
<h1 @click="increase">
  {{ count }}
</h1>
export default {
  setup() {
    let count = 0 // 
    function increase() {
      count += 1
    }

    return {
      count,
      increase
    }
  }
}

위 코드와 똑같이 구현을 했지만, 실제로 이벤트가 동작하지 않습니다.

그 이유는 데이터인 count가 반응성을 갖고 있지 않기 때문입니다.
이처럼 컴포지션 API를 활용할 때에는 특정한 데이터가 반응성을 가지도록 Vue 에서 제공하는 ref라는 기능을 사용해야 합니다.

2.3 컴포지션 API 사용 예시(완성형)

App.vue
<h1 @click="increase">
  {{ count }}
</h1>
import { ref } from 'vue' // vue 패키지에서 ref 기능 가져오기

export default {
  setup() {
    let count = ref(0) // ref 함수의 인수로 초기값 0 입력
    function increase() {
      count.value += 1 // count는 객체 데이터로 반환되므로 value 속성 명시
    }

    return {
      count,
      increase
    }
  }
}

[Vue.js] 컴포넌트 - Refs

맨동 — Wed, 30 Jun 2021 20:02:58 +0900

컴포넌트 - Refs

1.1 개념

비록 props와 이벤트가 존재하지만, 가끔은 자식 요소에 JavaScript를 이용해 직접 접근해야 하는 경우가 있습니다. 이 경우, ref 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있습니다.

mounted() {
    const h1El = document.querySelector('#hello')
    console.log(h1El.textContent)
}

원래의 경우라면 위처럼 DOM API를 사용하게 됩니다.

하지만 참조하겠다는 의미의 ref 라는 속성을 사용하면 해당 기능을 간단하게 사용할 수 있습니다.

1.2 Refs 사용 예시

//App.vue
<h1 ref="hello">Hello world!</h1>
export default {
  mounted() {
    console.log(this.$refs.hello.textContent)
  }

Vue에서 제공하는 ref라는 속성을 통해 해당 요소를 참조할 수 있습니다.

그 참조된 내용은 Vue의 $refs라는 객체에 해당하는 hello라는 이름으로 들어가서 저장이 되는 구조를 갖고 있습니다.

다만, HTML과 연결된 직후만 사용이 가능하므로 created()라는 라이프사이클에서는 사용이 불가합니다.

1.3 컴포넌트에서 Refs 사용 예시

//App.vue(부모 컴포넌트)
<Hello ref="hello" />
import Hello from '~/components/Hello'

export default {
  components: {
    Hello
  },
  mounted() {
    console.log(this.$refs.hello.$el)
  }
}
</script>

//Hello.vue(자식 컴포넌트)
<h1>Hello~</h1>

컴포넌트를 ref라는 속성으로 어떠한 이름(hello)으로 참조를 할 경우에는 참조된 이름 뒤쪽에 $el을 명시해줘야만 해당하는 내용을 참조할 수 있습니다.

그러나 여기서도 컴포넌트의 최상위 요소가 2개 이상이면 $el 속성으로 어떤 요소를 바라봐야하는지 알 수 없게 됩니다.

//App.vue(부모 컴포넌트)
export default {
  components: {
    Hello
  },
  mounted() {
    console.log(this.$refs.hello.$refs.good)
  }
}

//Hello.vue(자식 컴포넌트)
<h1>Hello~</h1>
<h1 ref="good">Good?</h1>

이러한 경우에는 자식 컴포넌트에 ref라는 속성에 이름을 명시하고 부모 컴포넌트에는 $el 이 아닌 $refs의 속성에 자식 컴포넌트에 명시한 이름을 코딩해주면 됩니다.

[Vue.js] 컴포넌트 - Provide, Inject

맨동 — Wed, 30 Jun 2021 19:51:09 +0900

1. Provide & Inject

1.1 개념

일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야할 때 props를 사용합니다. 특정한 두 컴포넌트 사이에 깊이 중첩된 컴포넌트가 있는 구조의 경우 하위 컴포넌트에서 상위 컴포넌트의 무언가가 필요한 경우를 상상해보십시오. 이 경우에 두 컴포넌트 사이의 모든 컴포넌트에 prop를 전달해야하므로 굉장히 번거로울 것입니다.

이러한 경우 provide와 inject 쌍을 사용할 수 있습니다. 부모 컴포넌트는 컴포넌트 계층 구조의 깊이와 상관없이 모든 자식에 대한 종속성 제공자 역할을 할 수 있습니다. 이 기능은 2개의 부분으로 구성됩니다: 부모 컴포넌트는 데이터 제공을 위해 provide 옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject 옵션을 사용합니다.

//App.vue(조상[상위] 컴포넌트)
<Parent :msg="message" />
import Parent from '~/components/Parent'
export default {
  components: {
    Parent
  },
  data() {
    return {
      message: 'Hello world!'
    }
  }
}
//Parent.vue(부모 컴포넌트)
<Child :msg="msg" />
import Child from '~/components/Child'
export default {
  components: {
    Child
  },
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
}
//Child.vue(자식 컴포넌트)
<div>  {{ msg }}  </div>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
}

손자 컴포넌트인 msg를 루트 컴포넌트에 전달하려고 하면 두 단계를 거쳐야만 하고, 중간에 있는 Parent.vue 파일의 props는 사용하지도 않지만 msg라는 데이터를 Child.vue에 전달하는 역할말고는 전혀 사용을 하고 있지 않습니다.

이러한 부분을 해결하기 위한 것이 provide와 inject 키워드입니다.

1.2 Provide, Inject 사용 예시

//App.vue(조상[상위] 컴포넌트)
<Parent />
import Parent from '~/components/Parent'
export default {
  components: {
    Parent
  },
  data() {
    return {
      message: 'Hello world!'
    }
  },
  provide() {
    return {
      msg: this.message // data()의 message 사용할게!
    }
  }
}

위처럼 data()의 message 옵션 부분을 provide의 msg라는 이름으로 사용하겠다는 코드를 작성하면 Parent.vue를 중간 매개체로 사용하지 않아도 됩니다.

결과적으로 html 부분에서는 <Parent /> 코드만 작성해주시면 됩니다.

//Parent.vue(부모 컴포넌트)
<Child /> // :msg="msg" 부분 삭제
import Child from '~/components/Child'
export default {
  components: {
    Child
  }
}

//Child.vue(자식 컴포넌트)
<div>  {{ msg }}  </div>
export default {
  inject: ['msg'] 
}

데이터를 받을 Child.vue에 inject라는 키워드를 사용하여 배열 데이터 안에 provide라는 옵션을 통해서 지정한 이름인 msg를 명시해줍니다.

그러면, msg가 하나의 데이터로 취급이 되어 {{ msg }} 이 부분에서 데이터가 출력되게 만들어줄 수 있습니다.

1.3 주의사항

이렇게 provide, inject라는 키워드를 사용하면 중간 과정 없이 바로 데이터를 전달해줄 수 있습니다. 그러나 여기서 주의사항이 있습니다.

그것은 바로 provide 키워드는 기본적으로 반응성을 제공할 수 없다는 것입니다. 그렇기 때문에 provide는 데이터를 전달해서 출력하는 용도로만 사용하거나 혹은 추가 작업이 필요합니다.

//App.vue(조상[상위] 컴포넌트)
<button @click="message = 'Good?'">
  Click!
</button>
<h1>App: {{ message }}</h1>
<Parent />
import Parent from '~/components/Parent'
import { computed } from 'vue' // computed 가져오기
export default {
  components: {
    Parent
  },
  data() {
    return {
      message: 'Hello world!'
    }
  },
  provide() {
    return {
      msg: computed(() => {
        return this.message // 콜백 함수 형태로 return
      }) // msg: computed(() => this.message) // 중괄호, return 생략 가능
    }
  }
}

//Child.vue(자식 컴포넌트)
<div>  {{ msg.value }}  </div> // msg라는 데이터의 value 속성 값
export default {
  inject: ['msg'] 
}

이처럼 msg라는 provide에서 넘어온 데이터는 계산된 하나의 객체 데이터이며, 그 객체 데이터에서 내가 원하는 데이터를 출력하기 위해서는 그 안의 value라는 속성을 사용해야 합니다.

이렇게 provide 키워드를 사용하여 반응성을 유지하는 데이터를 만들기 위해서는 computed라는 함수를 실행해서 그 내부에서 반응성을 갖고 싶은 데이터를 반환해주면 되는 것입니다.

[Vue.js] 컴포넌트 - Slot

맨동 — Wed, 30 Jun 2021 19:36:13 +0900

컴포넌트 - Slot

1. Slot

1.1 Fallback Contents

//App.vue(부모 컴포넌트)
<MyBtn>Cherry</MyBtn>
export default {
  components: {
    MyBtn
  }
}

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
    <slot></slot>
</div>

slot의 태그로 부모 컴포넌트에서 받을 데이터의 자리를 표시하면 Cherry라는 텍스트를 화면에 출력할 수 있었습니다.

하지만 여기서 slot 태그 내에 내용을 입력할 수 있습니다.

//App.vue(부모 컴포넌트)
<MyBtn></MyBtn>

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
    <slot>Apple</slot>
</div>

slot 태그 내에 텍스트를 입력하면, 그 내용이 출력됩니다.

하지만 부모 컴포넌트에 내용이 없을 경우에만 출력되며, 부모 컴포넌트에 텍스트가 있다면 해당 내용이 출력됩니다.

이렇게 slot 태그 내에 입력한 컨텐츠를 Fallback Contents라 부르고, 대체 컨텐츠라는 의미입니다.

1.2 Named Slots

//App.vue(부모 컴포넌트)
<MyBtn>
    <span>Cherry</span> // text
    <span>(B)</span>    // icon
</MyBtn>

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
    <slot>Apple</slot>
</div>

slot 태그 안에 컨텐츠를 두 개 이상 입력할 수도 있습니다.

하지만 이처럼 입력하게 되면 입력한 순서대로인 텍스트인 Cherry 다음 아이콘 (B)가 출력됩니다.

이러한 순서를 정확히 지켜서 동작하게 하고 싶다면, Named Slots(이름을 갖는 슬롯)을 적용할 수 있습니다.

//App.vue(부모 컴포넌트)
<MyBtn>
  <template v-slot:icon>
    <span>(B)</span>
  </template>
  <template #text> // #: v-slot의 약어 
    <span>Cherry</span>
  </template>
</MyBtn>

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
  <slot name="icon"></slot>
  <slot name="text"></slot>
</div>

먼저 자식 컴포넌트에는 slot 태그에 간단하게 name이라는 속성을 추가해서 각각의 값을 명시해주고,

부모 컴포넌트에는 컨텐츠를 template라는 태그로 감싸줍니다.

그리고 그 태그에 v-slot이라는 속성을 추가해서 자식 컴포넌트에서 정의한 slot 이름을 명시해줍니다.

v-slot은 약어로 #을 사용하며, 약어를 주로 사용합니다.

순서를 보장하면 부모 컴포넌트에서 순서가 뒤바뀐다 하더라도 보장한 순서대로 출력이 됩니다.

[Vue.js] 컴포넌트 - Emit

맨동 — Wed, 30 Jun 2021 19:27:14 +0900

컴포넌트 - Emit

1. 이벤트 상속

//App.vue(부모 컴포넌트)
<MyBtn @click="log">Banana</MyBtn>
export default {
  components: {
    MyBtn
  },
  methods: {
    log() {
      console.log('Click!!')
    }
  }
}

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
    <slot></slot>
</div>
export default {
  inheritAttrs: false
}

MyBtn 태그에 클릭 이벤트 발생시에 실행할 method를 연결하였습니다.

그러나 @click이라는 속성으로 연결을 하였기 때문에 자식 컴포넌트에 inheritAttrs: false 값으로 인해 클릭을 하여도 method가 실행되지 않습니다.

자식 컴포넌트에 최상위 요소가 2개 이상이고 inheritAttrs 옵션을 사용해야하는 경우라면 이벤트를 적용할 수 없습니다.

하지만 이벤트도 $attrs와 비슷하게 필요한 경우에만 개별로 적용할 수 있습니다.

2. Emit

이렇게 이벤트 속성을 가능하게 만드는 것이 바로 emit입니다.

//MyBtn.vue(자식 컴포넌트)
<script>
export default {
  emits: [
    'click'
  ]
}
</script>

위와 같이 emits 라는 옵션을 추가하여 배열 데이터로 부모 컴포넌트에서 추가한 옵션인 클릭 이벤트를 사용하겠다고 명시하시면 됩니다.

//MyBtn.vue(자식 컴포넌트)
<template>
  <h1 @click="$emit('click')">ABC</h1>
</template>

그리고 template 태그에 <h1 @click="$emit('click')"> click 옵션에 $emit이라는 메소드에 emits 옵션에 정의한 'click'을 입력해주시면 됩니다. 그러면 부모 컴포넌트(App.vue)에 정의한 log() 메소드가 실행되는 것을 확인할 수 있습니다.

3. 추가 코드 예시

이렇게 emit이라는 키워드를 통해 원하는 이름의 이벤트를 자유롭게 만들어 사용할 수 있습니다. 그리고 이를 활용하여 부모 컴포넌트와 자식 컴포넌트 간의 이벤트와 데이터를 주고 받을 수 있습니다.

//App.vue(부모 컴포넌트)
<template>
  <MyBtn
    @dongit="log"
    @change-msg="logMsg">
    Banana
  </MyBtn>
</template>
<script>
import MyBtn from '~/components/MyBtn'

export default {
  components: {
    MyBtn
  },
  methods: {
    log(event) {
      console.log('Click!!')
      console.log(event)
    },
    logMsg(msg) {
      console.log(msg)
    }
  }
}
</script>

//MyBtn.vue(자식 컴포넌트)
<template>
  <div class="btn">
    <slot></slot>
  </div>
  <h1 @dblclick="$emit('dongit', $event)">
    ABC
  </h1>
  <input
    type="text"
    v-model="msg" />
</template>
<script>
export default {
  emits: [
    'dongit',
    'changeMsg'
  ],
  data() {
    return {
      msg: ''
    }
  },
  watch: {
    msg() {
      this.$emit('changeMsg', this.msg)
    }
  }
}
</script>

[Vue.js] 컴포넌트 - 속성 상속

맨동 — Wed, 30 Jun 2021 18:56:11 +0900

컴포넌트 - 속성 상속

1. 속성 상속

1.1 클래스 상속

//App.vue(부모 컴포넌트)
<MyBtn class="fruit">Banana</MyBtn>

//MyBtn.vue(자식 컴포넌트)
<template>
  <!-- <div class ="btn orosy"> -->
  <div class="btn"> // 최상위 요소(Root Element)
    <slot></slot>
  </div>
</template>

부모 컴포넌트의 html 요소에 class 속성으로 값을 입력한 경우, 자식 컴포넌트의 btn이라는 클래스에 상속이 됩니다.

이러한 개념을 속성 상속이라고 합니다.

//MyBtn.vue(자식 컴포넌트)
<template>
  <div class="btn"> // 최상위 요소(Root Element)
    <slot></slot>
  </div>
  <div></div> // 최상위 요소(Root Element)
</template>

하지만 자식 컴포넌트에 template 태그 안에 있는 최상위 요소가 2개 이상일 경우에는 부모 컴포넌트에 입력한 속성 값이 어느 부분에 상속이 되어야하는지 판단할 수 없기 때문에 두 요소 모두 상속이 되지 않습니다.

1.2 스타일 상속

//App.vue(부모 컴포넌트)
 <MyBtn class="fruit" style="color: red;">Banana</MyBtn>

위의 내용처럼 속성 값은 class, style 등 여러 개를 입력할 수 있습니다. 이러한 경우에도 속성 상속은 원활히 이루어집니다.

2. 속성 상속 제거

2.1 inheritAttrs

최상위 요소가 1개라면, 속성 상속이 이루어집니다. 그러나 이러한 기능을 없앨 수도 있습니다.

MyBtn.vue(자식 컴포넌트)
<template>
  <div class="btn"> // 최상위 요소(Root Element) 1개
    <slot></slot>
  </div>
</template>
<script>
export default {
  inheritAttrs: false // 속성 상속 제거
}
</script>

inheritAttrs(inherit Attributes)의 값을 false로 입력해준다면, 속성 상속의 옵션을 사용하지 않을 수 있습니다.

2.2 $attrs.class

속성 상속의 옵션을 사용하지 않겠다고 명시한 경우, 필요하다면 개별적으로 속성 상속을 사용할 수 있습니다.

//App.vue
<template>
  <MyBtn class="fruit" style="color: red;">
    Banana
  </MyBtn>
</template>

//MyBtn.vue
<template>
  <div class="btn">
    <slot></slot>
  </div>
  <h1 :class="$attrs.class"></h1> // 속성 상속
</template>

$attrs.class라는 값을 class라는 키워드에 할당해주면 됩니다.

부모 컴포넌트에 입력한 style 속성도 아래와 마찬가지로 상속이 가능합니다.

//MyBtn.vue
<h1
    :class="$attrs.class"
    :style="$attrs.style">
</h1>

이러한 경우 모든 속성을 입력해주어야 한다는 번거로움이 발생하게 됩니다.

부모 컴포넌트의 모든 속성을 상속하는 방법도 있으며, 이는 <h1 v-bind="$attrs">처럼 v-bind로 약어를 사용하지 않고 그 값에 $attrs를 할당해주면 됩니다.

MyBtn.vue
<h1 v-bind="$attrs"></h1>

이처럼 class와 style의 속성인 color까지 상속을 통해 모두 적용된 것을 확인할 수 있습니다.

[Vue.js] 컴포넌트 - 기초

맨동 — Wed, 30 Jun 2021 17:36:57 +0900

컴포넌트 기초

1. 컴포넌트 기본 구성

1.1 App.vue

<template>
  <MyBtn /> // 컴포넌트 렌더링
</template>
<script>
import MyBtn from '~/components/MyBtn' // MyBtn.vue 파일 가져오기

export default {
  components: {
    MyBtn // 가져온 컴포넌트 내부에서 사용할 수 있도록 내보내기
  }
}
</script>

1.2 MyBtn.vue

<template>
  <div class="btn">
    Apple
  </div>
</template>
<style scoped>
  .btn {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: gray;
    color: white;
    cursor: pointer;
  }
</style>

2. 컴포넌트의 특징

2.1 재활용

<template>
  <MyBtn />
  <MyBtn />
  <MyBtn />
</template>

컴포넌트의 장점이라고 한다면, 컴포넌트는 얼마든지 반복해서 재사용할 수 있다는 것입니다.

App.vue 파일에 위와 같이 작성한다면 버튼을 재활용하여 여러 개를 화면에 출력할 수 있기 때문입니다.

2.2 Props

또한, 재활용을 하면서 props라는 개념을 이용하여 App.vue라는 부모 컴포넌트에서 MyBtn.vue라는 자식 컴포넌트로 데이터를 전달할 수 있습니다.

이러한 이유로 props를 통해 구현한 이 기능을 부모 컴포넌트와 자식 컴포넌트 간의 데이터 통신 방법이라고도 이야기합니다.

//App.vue
<MyBtn color="royalblue" />

//MyBtn.vue
<div :style="{ backgroundColor: color }" class="btn"> // 데이터 바인딩
    Apple
</div>
export default {
  props: {
    color: { // 외부에서 color 값을 지정할 때 받을 수 있게 함
      type: String,
      default: 'gray' // 기본값 지정
    }
  }
}

2.3 Props로 클래스 추가

이번에는 props를 이용해 클래스를 추가해보도록 합시다.

//App.vue
<!-- <div class ="large btn"> -->
<MyBtn large />
<!-- <div class ="btn"> -->
<MyBtn large />
부모 컴포넌트에는 large라는 속성을 별도의 값이 없도록 추가해줍니다.

//MyBtn.vue
<div :class="{ large }" class="btn"> Apple </div>
export default {
  props: {
    large: {
      type: Boolean,
      default: false
    }
  }
}

위와 같이 props에 속성 large 객체 리터럴 안으로 type으로 불린 데이터를 지정하고, default 값으로 large라는 속성이 없도록 false를 지정해줍니다.

그러면 위처럼 클래스에 large가 추가되어있고, 그렇지 않은 버튼은 포함되어 있지 않은 것을 확인할 수 있습니다.

2.4 Props로 text 입력

props를 이용하면 text의 내용 또한 입력이 가능합니다.

//App.vue
<MyBtn text="Banana" />
<MyBtn :color="color" />
<MyBtn large color="royalblue" />
<MyBtn />

//MyBtn.vue
<div class="btn"> {{ text }} </div>
export default {
  props: {
    text: {
      type: String,
      default: '' // 기본값은 공백
    }
  }
}

위처럼 MyBtn의 text 속성에 추가한 값이 버튼 안의 내용으로 입력되게 됩니다. 하지만 이를 화면에 출력하게 되면, 문제점을 발견하게 됩니다.

바로 위와 같이 text 속성을 추가하지 않은 개체는 컨텐츠 내용이 출력되지 않게 됩니다.

해결하기 위해 slot이라는 개념을 배워야 합니다.

3. Slot

text를 속성으로 넣게 되면, 위와 같은 문제가 발생하였습니다. 그렇다면 이를 해결하기 위해 html에서 <button>text<button>처럼 컨텐츠 내용으로 직접 텍스트를 입력하는 방법을 활용해보도록 합시다.

//App.vue
<MyBtn>Banana</MyBtn>
<MyBtn :color="color">Apple</MyBtn>
<MyBtn large color="royalblue">Cherry</MyBtn>
<MyBtn>Orange</MyBtn>

이처럼 부모 컴포넌트에 빈 태그가 아닌 열리고 닫히는 태그의 형태로 표시해줍니다. 그리고 그 안에는 컨텐츠로 들어가는 내용을 입력해줍니다.

//MyBtn.vue
<div class="btn">
    <slot></slot> // 컨텐츠 자리 표시
</div>
// 내용 삭제
// export default {
//   props: {
//    text: {
//      type: String,
//      default: ''
//    }
//  }
// }

그리고 버튼 안에 입력할 컨텐츠의 자리를 표시를 할 때 slot 태그를 사용합니다.

이제 위처럼 props에 입력했던 text 내용은 필요가 없으니 삭제합니다.

//App.vue
<MyBtn :color="color">
  <span style="color: red">Banana</span>
</MyBtn>

덧붙여, slot 태그에는 단순히 text만 입력하는 것이 아니라 자식 컴포넌트가 실행되는 부분에서 열리고 닫히는 태그 사이에 있는 모든 내용을 slot이라는 태그 부분으로 대체하여 넣어준다는 개념입니다. 이를 통해 위처럼 span 태그 안에 text를 입력하고, 스타일까지 적용을 할 수가 있는 것입니다.

[Vue.js] 폼입력 바인딩

맨동 — Wed, 30 Jun 2021 17:15:50 +0900

폼 입력 바인딩

폼 입력 바인딩은 v-model 이라는 디렉티브를 사용하여 양방향 데이터 바인딩을 생성합니다.

1. 단방향 데이터 바인딩

<h1>{{ msg }}</h1>
<input type="text" :value="msg" />
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}

위와 같이 데이터를 스크립트 태그로 연결하여 Vue에서 활용할 수 있었습니다.

이렇게 데이터를 출력하는 방법을 단방향 데이터 바인딩이라고 합니다.

데이터에서 html 쪽으로 한 방향으로만 흐르기 때문에 단방향 데이터 바인딩이라 부릅니다.

단방향 데이터 바인딩으로 인하여 input 요소를 수정한다하더라도 수정된 내용이 msg 데이터를 갱신하지 않습니다.

2. 양방향 데이터 바인딩

<h1>{{ msg }}</h1>
<input type="text" :value="msg" @input="msg = $event.target.value"/>

이처럼 input 요소에 이벤트를 청취하도록 합니다. 그리고 msg의 데이터에 $event.target.value를 할당합니다. 이를 통해, msg의 기본값인 'Hello world!'에 수정을 하면 반응성이 이루어져 $event.target.value 값으로 다시 할당이 되는 것입니다.

이러한 개념이 바로 데이터가 양쪽으로 흐르는 양방향 데이터 바인딩이라는 것입니다.

3. v-model

3.1 사용법

위의 양방향 데이터 바인딩을 인라인 요소로 html에 입력하였습니다. 하지만, 이를 더 간단하게 표현할 수 있는 방법이 있으며 그것이 바로 v-model입니다.

<h1>{{ msg }}</h1>
<input type="text" v-model="msg" />

3.2 유의사항

그러나 v-model의 경우 input 요소에 영어가 아닌 한글을 입력하게 되면, 하나의 글자가 완성되지 않으면 연결되지 않습니다. 한 박자 느리게 동작을 하게 되는거죠.

그 이유는 한글이 자음과 모음으로 되어 있어 하나의 문자가 완성되기 전까지는 동작이 지연되기 때문입니다. 이러한 이유로 한글 입력 시에는 v-model이 아닌 $ event.target.value를 사용하셔야 합니다.

<h1>{{ msg }}</h1>
<input type="text" :value="msg" @input="msg = $event.target.value"/>

4.수식어

.lazy

기본적으로, v-model은 각 input 이벤트 후 입력과 데이터를 동기화 합니다. (단, 앞에서 설명한 IME 구성은 제외됩니다.). lazy 수식어를 추가하여 change이벤트 이후에 동기화 할 수 있습니다.:

<!-- "input" 대신 "change" 이후에 동기화 됩니다. --> 
<input v-model.lazy="msg" />

.number

사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다.

<input v-model.number="age" type="number" />

type="number"를 사용하는 경우에 HTML 입력 요소의 값은 항상 문자열을 반영하기 때문에 종종 유용합니다. 만약, 값이 parseFloat()에 의해서 분석할 수 없는 경우, 원래의 값이 리턴됩니다.

.trim

사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거하는 트림처리가 되길 바란다면, v-model이 관리하는 input에 trim 수식어를 추가하면 됩니다.

<input v-model.trim="msg" />

[Vue.js] 이벤트 수식어 와 키 수식어

맨동 — Wed, 30 Jun 2021 16:52:14 +0900

이벤트 수식어

이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일입니다. 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋습니다.

이 문제를 해결하기 위하여, Vue는 v-on이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 된 접미사 입니다.

.stop
.prevent
.capture
.self
.once
.passive

<!-- 클릭 이벤트 전파가 중단되었습니다. -->
<a @click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>

<!-- 수정자는 체이닝이 가능합니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용이 가능합니다. -->
<form @submit.prevent></form>

<!-- 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.-->
<!--즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div @click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다.-->
<!-- 자식 엘리먼트에서는 처리되지 않습니다.-->
<div @click.self="doThat">...</div>

관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시 말하여 v-on:click.prevent.self를 사용하면 모든 클릭을 막을 수 있으며 v-on:click.self.prevent는 엘리먼트 자체에 대한 클릭만 방지합니다.

<!-- 클릭 이벤트는 최대한 한번에 트리거 됩니다.-->
<a @click.once="doThis"></a>

네이티브 DOM이벤트에 독점적인 다른 수식어들과 달리, .once 수식어는 component events에서도 사용될 수 있습니다. 아직 컴포넌트에 대해서 읽지 않았더라도 걱정하시마십시오.

또한 Vue는 addEventListener의 passive option (opens new window)에 해당하는 .passive 수식어도 제공합니다.

<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<!-- 바로, `onScroll`완료되는 것을 기다리는 것을 대신합니다.  -->
<!-- 이 경우에`event.preventDefault()`를 포함하고 있습니다. -->
<div @scroll.passive="onScroll">...</div>

특히 .passive 수식어는 모바일 환경에서 성능향상에 도움이 됩니다.

.prevent 수식어는 무시되고 브라우저에서 오류를 발생시키기 때문에, .passive 수식어와 .prevent 수식어를 함께 사용하지 마십시오. .passive 수식어는 당신이 이벤트의 기본 행동을 무시하지 않기를 원하는 브라우저와 상호작용한다는 사실을 기억하십시오.

키 수식어

키보드 이벤트를 청취할 때, 종종 공동 키 코드를 확인해야 합니다.
Vue에서 키 이벤트를 청취할 때 키 수식어로 v-on 또는 @를 더할 수 있습니다.

<!-- 키가 'Enter'일때만 `vm.submit()`을 호출할 수 있습니다.-->
<input @keyup.enter="submit" />

KeyboardEvent.key 를 통해 노출된 유효 키 이름을 케밥 케이스로 변환하여 수식어로 사용할 수 있습니다.

<input @keyup.page-down="onPageDown" />

위의 예제에서, 핸들러는 $event.key === PageDown 일 때만 호출됩니다.

키 명령어

Vue는 가장흔히 사용되는 키에서 명령어를 제공합니다:

.enter
.tab
.delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
.esc
.space
.up
.down
.left
.right

시스템 수식어 키목록

다음 수식어를 사용해 해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있습니다:

.ctrl
.alt
.shift
.meta

<!-- 알트 + 엔터 -->
<input @keyup.alt.enter="clear" />

<!-- 컨트롤 + 클릭 -->
<div @click.ctrl="doSomething">Do something</div>

수식어 키는 일반 키와 다르며 keyup 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉,keyup.ctrl은 ctrl을 누른 상태에서 키를 놓으면 트리거됩니다. ctrl키만 놓으면 트리거되지 않습니다.

.exact수식어

.exact 수식어는 다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합이 눌러야하는 것을 요구합니다.

<!-- 아래코드는 Alt 또는 Shift와 함께 눌렀을 때도 실행됩니다.-->
<button @click.ctrl="onClick">A</button>

<!-- 아래코드는 Cntl키만 눌려져 있을 때 실행됩니다.-->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다.-->
<button @click.exact="onClick">A</button>

마우스 버튼 수식어

.left
.right
.middle

위 수식어는 특정 마우스 버튼에 의해 트리거 된 이벤트로 핸들러를 제한합니다.

[Vue.js] 이벤트 핸들링

맨동 — Wed, 30 Jun 2021 13:21:29 +0900

이벤트 핸들링

1. 이벤트 청취

v-on 디렉티브는 @기호로,

DOM 이벤트를 듣고 트리거될 때와 JavaScript를 실행할 때 사용합니다.
v-on:click="methodName" 혹은 줄여서 @click="methodName"으로 사용합니다.

<div id="basic-event">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
Vue.createApp({
  data() {
    return {
      counter: 1
    }
  }
}).mount('#basic-event')

2. 메소드 이벤트 핸들러

위의 코드와 같이 간단한 코드의 경우에는 문제가 없지만,

많은 이벤트 핸들러의 로직은 더 복잡하기 때문에 위와 같은 방법은 지양하는 것이 좋습니다.

<div id="event-with-method">
  <button @click="greet">Greet</button>
</div>
Vue.createApp({
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet(event) {
      // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다.
      alert('Hello ' + this.name + '!')
      // `event` 는 네이티브 DOM 이벤트입니다
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}).mount('#event-with-method')

이처럼 methods라는 옵션을 추가한 뒤 greet 함수를 만들어 그 안에 복잡한 로직을 코딩하여 클릭하면 실행할 이벤트 핸들러로써 메소드의 이름을 작성하시면 됩니다.

3. 인라인 메소드 핸들러

메소드 이름을 직접 바인딩 하는 대신에, 인라인 JavaScript 구문에 메소드를 사용할 수도 있습니다.

<div id="inline-handler">
  <button @click="say('hi')">Say hi</button>
  <button @click="say('what')">Say what</button>
</div>

Vue.createApp({
  methods: {
    say(message) {
      alert(message)
    }
  }
}).mount('#inline-handler')

때로 인라인 명령문 핸들러에서 원본 DOM 이벤트에 액세스 해야할 수도 있습니다.

특별한 $event를 사용해 메소드에 전달할 수 있습니다.

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

복합 이벤트 핸들러

이벤트 핸들러 안에서 복합 메소드를 지정할 수도 있습니다.

이러한 방식을 통해 하나의 이벤트에 여러 개의 메소드를 동시에 연결하여 사용할 수 있습니다.

<template>
  <button @click="handlerA(), handlerB()">
    Click me!
  </button>
</template>
<script>
export default {
  methods: {
    handlerA() {
      console.log('A')
    },
    handlerB() {
      console.log('B')
    }
  }
}
</script>

그러나 유의해야할 점은 복합 메소드를 작성할 때에는 ,로 구분하고 각각의 메소드들에 호출하겠다는 ()를 뒤에 붙여줘야 한다는 점입니다.

[Vue.js] 리스트 렌더링

맨동 — Wed, 30 Jun 2021 13:03:45 +0900

리스트 렌더링

1. v-for

v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 fruit in fruits 형태로 특별한 문법이 필요합니다. 여기서 fruits는 원본 데이터 배열이고 fruit은 반복되는 배열 엘리먼트의 별칭입니다.

<template>
  <ul>
    <li
      v-for="fruit in fruits"
      :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

1.1 코드

v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에 대한 두 번째 전달인자 옵션을 제공합니다.

<template>
  <ul>
    <li
      v-for="(fruit, index) in fruits"
      :key="fruit">
      {{ fruit }}-{{ index }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  }
}
</script>

2. 필터링된 결과 표시

2.1 computed 속성

원래 데이터를 실제로 변경하거나 재설정하지 않고, 배열의 필터링되거나 정렬된 버전을 표시할 수도 있습니다. 이 경우 필터링되거나 정렬된 배열을 반환하는 computed 속성을 만들 수 있습니다.

<template>
  <ul>
    <li
      v-for="fruit in newFruits"
      :key="fruit.id">
      {{ fruit.name }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  computed: {
    newFruits() {
      return this.fruits.map((fruit, index) => {
        return {
          id: index,
          name: fruit
        }
      })
    }
  }
}
</script>

실제로 프로젝트를 진행하게 되면, 위와 같이 fruits와 같은 단순한 배열 구조가 아닌 newFruits()와 마찬가지로 배열 데이터 안에 객체 데이터가 있고, 그 객체 데이터 안에는 복잡한 구조로 여러가지 속성들로 데이터가 구분되어 있는 형태로 제공되는 데이터를 활용하게 됩니다.

그러한 데이터들을 화면에 반복적으로 출력하기 위해서는 위와 같은 방법으로 v-for 디렉티브를 작성하셔야 합니다. 특히, v-for 디렉티브를 사용하게 되면 반드시 :key 값으로 배열의 아이템들을 고유하게 구분해줄 수 있는 특정한 속성이 존재해야 하며 이를 통해 화면에 출력되는 내용을 최적화할 수 있습니다.

2.2 shortid 패키지

위와 같은 설명에 덧붙여 :key 값에 들어갈 id값을 고유하게 구분해줄 수 있도록 하는 shortid라는 패키지가 있으며, 이를 설치하여 사용해보도록 합시다.

$ npm i -D shortid

<script>
import shortid from 'shortid' // 설치한 패키지 가져오기
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  computed: {
    newFruits() {
      return this.fruits.map(fruit => ({
          id: shortid.generate(), // shortid를 생성하는 generate() 메소드 실행
          name: fruit
        }))
    }
  }
}
</script>

이러한 패키지를 통해 고유한 값이 필요한 곳에서 손쉽게 만들어낼 수 있습니다.

id 값은 새로고침이 될 때마다 랜덤한 고유의 값으로 바뀝니다.

3. 배열 변경 감지

3.1 변이 메소드

Vue는 감시 중인 변이 메소드를 래핑하면(배열의 데이터를 변경하면) 화면에 출력이 갱신되는 반응성을 갖고 있습니다. 래핑된 메소드는 다음과 같습니다.

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

3.2 배열 교체

이름에서 알 수 있듯이 변이 메소드는 호출된 원래 배열을 변경합니다. 이에 비해 filter(), concat() 그리고 slice()와 같은 원래 배열을 변경하지는 않지만 항상 새 배열을 반환하는 비-변이 메소드도 있습니다. 비-변이 메소드로 작업할 때 이전 배열을 새 배열로 바꿀 수 있습니다.

example1.items = example1.items.filter(item => item.message.match(/Foo/))

이로 인해 Vue가 기존 DOM을 버리고 전체 목록을 다시 렌더링할 것이라고 생각할 수 있습니다. 다행히도 그렇지 않습니다. Vue는 DOM 요소 재사용을 최대화하기 위해 몇 가지 smart heuristics(스마트 휴리스틱, 과학적인 조건보다는 경험이나 직관에 의해 똑똑하게 의사결정을 하는 방식)을 구현하므로, 배열을 겹치는 객체를 포함하는 다른 배열로 교체하는 것은 매우 효율적인 작업입니다.