post-thumbnail

Prototype

Javascript는 흔히 프로토타입 기반 언어(prototyped-base language)라 불린다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미이다. 프로토타입 객체도 또 다시 상위

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

네이티브 앱, 웹 앱, 하이브리드앱, 모바일 웹

네이티브 앱은 흔히 말하는 '애플리케이션'을 의미한다. 모바일 기기에 최적화된 언어로 개발된 앱으로 안드로이드 SDK를 이용해 Java로 만드는 앱과 iOS 기반의 SDK를 이용해 Swift로 만드는 앱들이 네이티브 앱에 속한다. 기기에 최적화된 기능을 구현할 수 있다

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

바벨 - 전체 설정 파일과 지역 설정 파일

바벨 설정 파일은 크게 두 가지 종류로 나뉩니다. 첫 번째는 모든 자바스크립트 파일에 적용되는 전체 설정 파일입니다. 바벨 버전 7에 추가된 babel.config.js 파일이 전체 설정 파일입니다.두번째는 자바스크립트 파일의 경로에 따라 결정되는 지역 설정 파일입니다

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

바벨 - extends, env, overrides 속성

extends: 다른 설정 파일을 가져와 확장 가능env, overrides : 환경별 또는 파일별로 다른 설정을 적용 가능extends 속성을 사용하면 다른 설정 파일을 가져와 사용할 수 있습니다.플러그인에 옵션을 설정할 때는 배열로 만들어서 두 번째 자리에 옵션을

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

바벨 - 기본 사용법

바벨 실행 및 설정 바벨이란 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 초기의 바벨은 ES6 코드를 ES5코드로 변환해주는 컴파일러였다. 현재는 바벨을 이용해 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법들을 사용할

2020년 8월 27일
·
0개의 댓글
post-thumbnail

이벤트 버블링, 캡처링, 위임

이벤트 등록 웹 애플리케이션의 이벤트 등록입니다. button 요소에 클릭 이벤트를 등록했습니다. button을 클릭하면 onClick 함수가 실행되는 코드입니다. event 인자를 출력해보면 이벤트와 관련된 정보를 확인할 수 있습니다. 그렇다면 브라우저는 어떻게

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

웹 워커

Web Worker는 script 실행을 메인 쓰레드가 아니라 백그라운드 쓰레드에서 실행할 수 있도록 해주는 기술 입니다. 이 기술을 통해 무거운 작업을 분리된 쓰레드에서 처리할 수 있으며, 이를 통해 메인 쓰레드(일반적으로 UI 쓰레드)는 멈춤, 속도저하 없이 동작할

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

REST , HTTP 메서드

REST는 Representational State Transfer의 약자입니다. 핵심은 Representational State, 번역하면 대표적인 상태. 이때 이야기하는 상태는 서버가 가지고 있는 리소스의 상태입니다.즉, REST는 통신을 통해 자원의 표현된 상태를

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

LocalStorage, SessionStorage, Cookie

Web Storage Web Storage의 두가지 방식 = 웹 스토리지 객체(web storage object) = LocalStorage와 SessionStorage LocalStorage와 SessionStorage는 HTML5에 추가된 저장소입니다. 간단한 키

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

react-redux, reselect 패키지

npm install react-reduxProvider 컴포넌트Provider 컴포넌트 하위에 있는 컴포넌트는 리덕스의 상태 값이 변경되면 자동으로 컴포넌트 함수가 호출되도록 할 수 있다. store 객체를 Provider의 속성 값으로 전달. Provider 컴포넌

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

JS) LeetCode - Climbing Stairs

Climbing Stairs한번에 1칸 또는 2칸씩 계단을 오를 수 있는데, n단계까지 오르기 위해서는 총 몇가지 방법이 있는가?뭐 이런 문제다.n = 1 경우 방법 1개n = 2 경우 방법 2개n = 3 경우 방법 3개1칸을 오르고 남은 1칸을 한번에 오르기 => 1

2020년 8월 24일
·
0개의 댓글
post-thumbnail

리덕스로 상태 관리하기

리덕스는 자바스크립트를 위한 상태 관리 프레임워크다. 컴포넌트 코드로부터 상태 관리 코드를 분리 할 수 있다.서버 렌더링 시 데이터 전달이 간편하다. 로컬 스토리지에 데이터를 저장하고 불러오는 코드를 쉽게 작성할 수 있다.같은 상태 값을 다수의 컴포넌트에서 필요로 할

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

렌더링 속도를 올리기 위한 성능 최적화

리액트는 데이터(속성 값 + 상태 값)과 컴포넌트 함수로 화면을 그린다. 속성 값이나 상태 값이 변경되면 리액트가 자동으로 컴포넌트 함수를 이용해서 화면을 다시 그린다. 이것이 리액트의 역할이다. 리액트에서 최초 렌더링 이후에는 데이터 변경 시 렌더링을 하는데 다음 단

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

useEffect 의존성 배열 관리 방법

useEffect 의존성 배열 관리 방법 의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수이다. 의존성 배열의 내용이 변경되었을 경우 부수 효과 함수가 실행된다. 의존성 배열은 잘못 관리하면 쉽게 버그로 이어지기 때문에 입력하지 않는게 좋지만 필요에 있

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

자바스크립트 엔진, Event Loop, Web API, Task Queue

Event Loop what the heck is the event loop anyway 이벤트 루프에 대한 유튜브 영상이다. 짧은 영상이지만 정말 좋은 영상같다. 영상을 보고 정리해보았다. 위 사진 처럼 자바스크립트 개발을 진행하다보면 다양한 용어들을 접한다.

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

Hook

컴포넌트에서 생성된 값 중에는 렌더링과 무관한 값도 있는데, 이 값을 저장할 때 useRef 훅을 사용한다. ex) setTimeout이 반환한 값을 저장해두고 clearTimeout을 호출 시 사용useRef를 사용하여 이전 상태 값 저장하기 useState 훅도 이

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

this

자바스크립트 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에도, arguments 객체와 this를 암묵적으로 전달 받는다.자바스크립트의 this는 Java와 this와 다르다.Java에서의 this는 인스턴스 자신(Self)을 가르키는 참조변수이다. this가

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

HTTP, GET과 POST 차이

HTTP는 웹상에서 클라이언트와 서버 간에 요청/응답(request/response)으로 데이터를 주고 받을 수 있는 프로토콜입니다. 클라이언트가 HTTP 프로토콜을 통해 서버에게 요청을 보내면 서버는 요청에 맞는 응답을 클라이어트에 전송합니다. 이 때 HTTP 요청에

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

비동기 처리와 콜백 함수

자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미합니다.제이쿼리 ajax 통신의 예입니다.getData() 함수는 https://domain.com/products/1 HTTP G

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

margin과 padding

margin과 padding 기준이 되는 border를 기준으로 내부 여백은 padding, 외부 여백은 margin

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