post-thumbnail

리액트 적응기 - state & props

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, component는 리렌더링 된다.props와 state는 일반 Javascript의 객체이다.두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지

2022년 6월 16일
·
0개의 댓글
post-thumbnail

리액트 적응기 - Virtual DOM 가볍게 훑어보기

Virtural DOM (VDOM)은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이고 이러한 과정을 Reconciliation(재조정)이라고 한다.Virtual DOM에 대해

2022년 6월 16일
·
0개의 댓글
post-thumbnail

리액트 적응기 - JSX에 대해 생각해보기

ReactDOM.render는 2번째 인자로 전달한 root 컨테이너의 컨텐츠를 제어할 수 있다. 즉, root 컨테이너의 자식 노드들을 제어할 수 있다는 의미가 된다. 제어한다는 의미?React의 diffing 알고리즘을 root 컨테이너의 자식 컴포넌트들에게 적용한

2022년 6월 16일
·
0개의 댓글
post-thumbnail

리액트 적응기 - useEffect

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.useEffect는 class component의 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각할

2022년 5월 24일
·
1개의 댓글
post-thumbnail

리액트 적응기 - svg 사용하기

react에서 svg를 사용하는 법을 확인하기에 앞서, svg와 png의 차이점에 대해서 간략하게 설명해보려 한다.이미지를 svg로 사용하게 되면 좋은 점은 아래와 같다.모든 크기의 브라우저를 원할하게 지원한다. (무한한 확장 가능)svg의 일부를 스타일링 할 수 있다

2022년 5월 16일
·
1개의 댓글
post-thumbnail

리액트 적응기 - contextAPI

Context 객체를 생성하는 방법은 아래와 같다.defaultValue에는 실제 Provider의 value에 넣는 객체의 형태와 일치시켜주는 게 좋다.Context 코드를 볼 때 내부 값이 어떻게 구성되어있는지 파악하기 쉽고, 실수로 Provider를 사용하지 않았

2022년 5월 8일
·
0개의 댓글
post-thumbnail

리액트 적응기 - 컴포넌트 반복(key)

리액트 사용 방법이 익숙하지 않아... 사용하기 어렵다..!리액트 적응기를 일주일에 하나씩 작성하며 리액트 사용법에 대해 익숙해지자!!리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.key가 없을 때는 Virtural

2022년 5월 1일
·
1개의 댓글
post-thumbnail

프로토타입(Prototype)

자바스크립트는 프로토타입(prototype)기반 언어이다.클래스 기반 언어에서 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다.어떤 생성자 함수(Constructor)를

2022년 4월 10일
·
0개의 댓글
post-thumbnail

콜백 함수(callback function)

콜백함수는 다른 코드(함수 또는 메서드)에게 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백함수를 적절한 시점에 실행한다.setInterval에 첫 번째 인자로 cbFunc()를 넘겨주면 cbFunc

2022년 4월 10일
·
0개의 댓글
post-thumbnail

타입스크립트 interface, type 컨벤션과 readonly 속성

자판기 미션에서 처음으로 적용한 타입스크립트!타입스크립트가 익숙하지 않고 부족한 부분이 많은 것 같다.🥲앞으로 키워드를 가지고 하나씩 정리해봐야겠다.😑이번에는 리뷰어님이 알려주신 interface / type의 convention 그리고 readonly 속성에 대해

2022년 3월 27일
·
0개의 댓글
post-thumbnail

Cypress에서 API 모킹하기

1. 발생한 문제..😡 우테코 나만의 유튜브 강의실 미션중 마주한 문제이다.. 우선 상황은 이렇다! Youtube API 키를 사용해서 검색된 결과의 동영상의 정보를 가지고와 검색된 결과의 타이틀, 썸네일을 보여주는 작업을 하고 있었다. 문제는 Youtube A

2022년 3월 20일
·
0개의 댓글
post-thumbnail

jest test코드 작성시 마주하게 될 문제! - localStorage

1. 발생한 문제.. 😡 나만의 유튜브 강의실 미션중 마주한 문제이다... test 코드를 작성하고, 기능을 구현하고... 를 하던 중! 미션에서 사용중인 localStorage, fetch를 사용한 코드를 jest에서 test 하게 된다면.. 짠...! ReferenceError 코드를 보면 localStorage is not defined를 볼...

2022년 3월 19일
·
1개의 댓글
post-thumbnail

scroll 이벤트 컨트롤 - throttle!

우테코 미션(나만의 유튜브 강의실)을 하면서 마주하게된 무한 스크롤.. 학습 키워드에 throttle(스로틀)이 있어 이번 미션 페어인 유세지와 함께 스로틀에 대해 알아보았다. 스로틀의 사전적 의미는 "목을 조르다" 라는 의미를 가지고 있다. JavaScript에서 스로틀은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 ...

2022년 3월 13일
·
0개의 댓글
post-thumbnail

innerHTML을 지양하자

DOM을 변경할 때 innerHTML을 지양해야 하는 이유는? 도서 '모던 자바스크립트 Deep Dive'를 읽으면 해당하는 부분은 아래와 같이 설명된다. XXS(크로스 사이트 스크립팅) 공격에 취약하다. 대안으로 제시되는 것은 insertAdjacentHTML인

2022년 3월 7일
·
0개의 댓글
post-thumbnail

private class field를 사용하는 이유는?

해당 리뷰는 우아한테크코스 Level1 자동차 경주 게임 미션 STEP2의 피드백 중 일부이다. public 필드는 클래스 내부, 자식 클래스 내부, 클래스 인스턴스를 통한 접근이 모두 허용된다. private 필드는 클래스 내부에서만 접근이 가능하다. 즉, pri

2022년 3월 7일
·
0개의 댓글
post-thumbnail

부정 조건문 < 긍정 조건문

나는 조건문을 작성할 때 말이지.. 나는 무의식적으로 조건문을 작성할 때 로직이 변경될 경우 네이밍을 변경하기 보다는 ! Not 연산자를 이용해 반대되는 값을 체크하곤 했다. 예를 들어 빈 값인지 체크하는 경우 isEmpty 함수를 만들었다고 가정하자. 로직이 조금이라도 변경되어 빈 값이 아닌 즉, 값이 있는 경우 참인 조건을 사용해야할 때 !(Not...

2022년 3월 5일
·
2개의 댓글
post-thumbnail

What is this?

우테코 피드백 수업중 깜짝 퀴즈가 있었는데.. this 관련된 문제를 접하게 되었다. 나는 분명 this가 바인딩 되는 방식을 이해하고 있다고 생각했지만, 순간 지나가는 퀴즈에서는 this의 바인딩을 찾는 것을 헷갈렸고 피드백 수업이 끝나고 나서도, 혼란스러웠다.

2022년 3월 5일
·
2개의 댓글
post-thumbnail

값(value), 식(expression), 문(statement)에 대해 아는가..?

포코가 값, 식, 문에 대해 설명이 가능한가? 라고 물었다. 값, 식, 문..?? 모르겠다. 😵‍💫 초심으로 돌아가 값, 식, 문에 대해 정리해보자. 01. 값 (value) 값은 식이 평가되어 생성된 결과를 의미한다. 변수는 하나의 값을 저장하기위해 확보

2022년 3월 5일
·
0개의 댓글
post-thumbnail

Webpack의 기본 설정

1. entry / output 1. webpack 패키지와 webpack terminal 도구인 webpack-cli를 설치한다. 프로젝트에 설치할 경우 -D 옵션을 줘 devDependencies로 설치한다. 2. webpack.config.js 파일을 생성

2022년 3월 3일
·
0개의 댓글
post-thumbnail

<section>, <article>, <div> 용도에 맞게 사용하기!

섹션 구분을 조금 더 의미 있게 div가 아닌 section 혹은 article을 사용할 수 있다. `` HTML `` tag는 플로우 컨텐츠를 위한 통용 컨테이너다. CSS로 꾸미기 전에는 컨텐츠나 레이아웃에 어떤 영향도 주지 않는다. `` 요소는 "순수" 컨테이너로서 아무것도 표현하지 않는다. 대신 다른 요소 여럿을 묶어 class, id 속성으로...

2022년 3월 2일
·
0개의 댓글