profile
Seize the day

[React] - 속성값 타입 정의하기

prop-types는 속성값의 타입 정보를 정의할 때 사용하는 리액트 공식 패키지다. 속성값의 타입 정보는 컴포넌트 코드의 가독성을 위해서 필수로 작성하는 게 좋다.자바스크립트는 동적 타입언어로 타입이 없기 때문에 배우기 쉽고 간단한 프로그램을 작성할 때는 생산성이 좋

2020년 11월 1일
·
0개의 댓글

[React] - useReducer

useReducer 훅을 사용하면 컴포넌트의 상태값을 리덕스의 리듀서처럼 관리할 수 있다. 그리고 여러 상태값을 관리할 때 좋고, useReducer와 콘텍스트 API를 이용하면 상위 컴포넌트에서 트리의 깊은 곳으로 이벤트 처리 함수를 쉽게 전달할 수 있다. \>사용법

2020년 10월 30일
·
0개의 댓글

[React] - 메모이제이션 훅: useCallback, useMemo

useCallback은 리액트의 렌더링 성능을 위해 제공되는 훅이다. 컴포넌트가 렌더링될 때마다 새로운 함수를 생성해서 자식 컴포넌트의 속성값으로 입력하는 경우가 많다. 이것은 부모 컴포넌트가 렌더링될 때마다 자식 컴포넌트의 속성값으로 새로운 함수가 입력되기 때문에 불

2020년 10월 30일
·
0개의 댓글

[React] - useRef

리액트로 작업하다 보면 돔 요소에 직접 접근해야 할 때가 있다. 예를 들어, 돔 요소에 포커스를 주거나 돔 요소의 크기나 스크롤 위치를 알고 싶은 경우다. 이 때 ref 속성값을 이용하면 자식 요소에 직접 접근할 수 있다. \>사용법다음은 ref 속성값을 이용해서 in

2020년 10월 29일
·
0개의 댓글

[React] - context API

콘텍스트 API를 사용하면 부모 컴포넌트에서 상당히 멀리 떨어져있는 자식 컴포넌트에게 바로, 직접 데이터를 전달할 수 있다.콘텍스트 API를 사용하지 않으면 부모에서 수많은 하위 컴포넌트들을 거쳐 자식 컴포넌트까지 속성값을 내려줘야할 것이다. \>사용법 상위 컴포넌트

2020년 10월 29일
·
0개의 댓글

[React] - 훅 직접 만들기

리액트가 제공하는 훅을 이용해서 커스텀(custom) 훅을 만들 수 있다. 훅을 직접 만들어서 사용하면 쉽게 로직을 재사용할 수 있다.뿐만 아니라 컴포넌트의 복잡도가 낮아져 유지보수에 좋고 단순하고 명시적인 방법으로 리액트스럽게 훅을 사용한다는 장점이 있다. 리액트의

2020년 10월 29일
·
0개의 댓글

Core JavaScript - 2. 실행 컨텍스트

자바스크립트의 핵심 개념과 동작 원리를 이해하기 코어 자바스크립트를 읽고 학습한 내용을 정리합니다.실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다.스택은 출입구가 하나뿐인 깊은 우물 같은 데

2020년 9월 24일
·
0개의 댓글

스코프체인

전역 변수와 지역변수의 관계에서 스코프 체인(scope chain) 이란 개념이 나온다. 내부 함수에서는 외부 함수의 변수에 접근이 가능하지만 외부 함수에서는 내부 함수의 변수에 접근할 수 없다. inner 함수는 name 변수를 찾기 위해 먼저 자기 자신의 스코프에서

2020년 9월 22일
·
0개의 댓글

Window 객체

브라우저 전체를 담당하는 게 Window 객체이고, 웹사이트만 담당하는 게 Document 객체라고 이해하면 된다. Document도 Window 객체 안에 들어있다. window 객체 아래에는 대표적으로 screen, location, history, document

2020년 9월 22일
·
0개의 댓글

Core JavaScript - 1. 데이터 타입

자바스크립트의 핵심 개념과 동작 원리를 이해하기 코어 자바스크립트를 읽고 학습한 내용을 정리합니다. 자바스크립트가 데이터를 처리하는 과정을 살펴봄으로써 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유를 이해하고 이를 적절히 활용할 수 있게 되는 것을 목표로 합니

2020년 9월 21일
·
0개의 댓글
post-thumbnail

[Vue] - Vuex Store 모듈화

Vuex 는 Vue 에서 전역 변수를 사용할 수 있게 도와주는 라이브러리이고 Store 를 전역변수라고 생각하면 이해하기 좀 더 편하다. Store 하나에 Vue 애플리케이션의 모든 전역변수를 선언하고 관리하면 store 자체가 복잡해지기 때문에 여러 개의 store

2020년 9월 6일
·
0개의 댓글

[Vue] - Vuex 기본

Vuex 는 Vue 에서 사용하는 상태 관리 라이브러리모든 컴포넌트에 대한 state 저장소 역할을 하며, 컴포넌트의 상태를 변경 및 관리한다. React 의 Redux 와 같은 역할을 한다. state 는 모든 컴포넌트에서 사용할 수 있는 data, 상태값이다. 단

2020년 9월 6일
·
0개의 댓글

Webpack

Webpack 이란? Webpack 이란 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이

2020년 8월 30일
·
0개의 댓글

[Vue] - Props & Emit

Props 부모 컴포넌트: 자식 컴포넌트한테 props 를 전달한다. 자식 컴포넌트: 부모 컴포넌트한테 props 를 전달받는다. Emit 자식 컴포넌트에서 부모 컴포넌트로 데이터 넘겨주기 자식 컴포넌트 부모 컴포넌트 더 심플하게 Emit 사용하기 자식 컴포넌

2020년 8월 30일
·
0개의 댓글

[Vue] - Todo Vuex

Vuex 기본 세팅 state Vue 에서 data 개념 mutations mutations 를 통해서 state 를 변화시킨다. 여기서 함수를 정의하고 함수 안에 state 로 접근해서 state 를 변경한다. store mutations 에서 메소드를 추가했다.

2020년 8월 23일
·
0개의 댓글

[Vue] Todo App

프로젝트 생성 npx @vue/cli create vue-todo npm run serve 초기세팅 src 폴더 안에 App.vue 초기화 bootstrap 연결 public 폴더 안에 index.html 에서 head 태그안에 연결 App.vue Todo.vu

2020년 8월 23일
·
0개의 댓글

[Vue] - 라이프사이클

2020년 8월 23일
·
0개의 댓글

[Vue] - Basic 속성

v-bind data 를 바인딩 해준다. v-bind 대신 :(콜론) 으로 축약해서 사용 가능 data, methods 키값을 this.키값으로 사용 대부분의 html 속성에 적용 가능하다. v-on 이벤트를 사용할 수 있다.

2020년 8월 22일
·
0개의 댓글

HTML & CSS - Basic of Basic!

HTML HTML 은 웹을 이루는 가장 기본적인 언어로 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. 태그 안에 웹 콘텐츠의 의미가 들어가며, 태그 안에 구조가 들어갑니다. HTML Tag HTML Tag 를 사용하여 웹 브라우저의 표시되는 글, 이미지 등 다

2020년 8월 17일
·
0개의 댓글

[React] Hooks - State, Effect

근데 Hook이 뭔가요? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고, 대신 class 없이 React를

2020년 8월 17일
·
0개의 댓글