React - 동적인 값 관리 useState useState란? 리액트를 통해 인터랙티프한 페이지 작성을 위해서는 useState라는 리액트 Hooks 중 하나를 사용하는 것이 효율적입니다 import React, { useState } from 'react'; 코드 에디터에 따라 다르지만 자동 입력되거나 직접 디스트럭팅하여 import 합니다. useState 사용법 함수형으로 업데이트하는 방식은 아래와 같습니다. 이해를 돕기 위해 수 증감 기능을 작성했습니다. import React, { useState } from 'react'; const PlusMinus = () => { const [num, setNum] = useState(0); const plus = () => { setNum(previ..
Cookies & Local Storage & Session Storage JavaScript 브라우저 안에서 데이터를 저장하는 3가지 방법이 있다. 각 Storage들의 차이점에 대해서 정리해보고자 한다. 각 Storage의 특징 Cookies 4kb의 용량을 가지고 있다 Expire Date를 지정할 수 있다. 브라우저뿐만 아니라 서버와도 통신이 가능하다 Local Storage 10mb의 용량을 저장할 수 있다. 인터넷 기록을 삭제하거나 직접 지우지 않는다면 기록이 삭제되지 않는다. Session Storage 5mb의 용량을 저장할 수 있다. 현재 탭에서만 내용을 저장한다. 브라우저를 종료하면 기록은 사라진다. 확인하는 법 브라우저(크롬)의 개발 툴을 열어 Application 탭을 열면 각 St..
Webpack & Babel JavaScript Webpack webpack이란? > webpack은 js를 모듈화 해주는 모듈 번들러입니다. 여러 개의 자바스크립트 파일을 하나로 모아주는 기능을 합니다. 왜 webpack이 필요할까? 웹 애플리케이션의 발전에 따라 규모는 점점 더 커졌습니다. 이로인해 발생한 문제점들을 살펴보면 웹을 구동하기 위해서는 수 많은 파일을 서버에서 가져와 데이터들을 표시하게 됩니다. 즉 규모가 커질수록 응답 시간이 길어져 느려지게 됩니다. 여러 명의 개발자가 함께 프로젝트를 진행하다 보면 변수명이나 함수명이 겹치는 일이 벌어지면 이는 에러를 야기할 수 있습니다. 이를 해결하기 위해 번들러(Bundler)가 나오게 되었습니다. 대표적으로 webpack, parcel, brows..
엄격 모드(Strict Mode) JavaScript Strict mode 'use strict'; 엄격 모드를 실행하는 JS코드이다 JS를 작성하기 전에 한 번만 써주면 느슨 모드에서 엄격 모드로 쉽게 전환이 가능하다. Strict mode의 기능은 다음과 같다 기존에는 조용히 무시되던 에러들을 에러메세지를 발생시킵니다. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다. 엄격 모드는 ECMAScript의 차기 버전들에서 정의될 문법을 금지합니다. 이러한 Strict mode는 함수와 모듈안에서만 사용할 수도 있다. Strict mode의 내용들은 MDN 사이트에 잘 정리되어 있으므로..
쉐도우 돔(Shadow DOM) JavaScript 쉐도우 돔(Shadow DOM)이란 DOM(Document Object Model)은 HTML의 문서화된 표현이다. 그리고 HTML 문서의 모든 요소와 스타일로 이루어진 DOM은 하나의 큰 글로벌 범위 내에 있다. Shadow DOM은 DOM안의 DOM으로 생각하기 쉬우나 원래의 DOM 트리에서 완전히 분리된 고유의 요소와 스타일을 가진 DOM 트리이다. HTML에 input 태그를 작성하면 아래와 같은 Output을 어떠한 방식으로 만들었느냐는 div태그 여러 개를 이용하여 Shadow-root안에 지정되어있다 즉 브라우저를 확인하는 고객은 볼 수없지만 실제 값안에 저장되어있는 요소들을 칭한다고 할 수 있다. 또한 이러한 Shadow DOM요소들은 글..
프로토타입(Prototype) JavaScript 프로토타입(Prototype)이란 새로운 객체를 만들어 낼 때 부모 객체 안에 사용 가능한 빈 객체가 존재하는데 이를 prototype이라고 한다. 아래 그림과 같이 정의하지 않은 Object가 존재하는 모습을 볼 수 있다. 왜 그런가요? JS는 객체지향언어이다. JS에는 클래스(Class)라는 개념이 존재하지 않았다( ECMA6 표준에서는 Class 문법이 추가되었지만 문법이 추가된 것이고 클래스 기반으로 바뀐 것은 아니다) 하지만 JS에서는 함수와 new를 통해 새로운 객체를 만들 수 있는데 여기서 부모 객체 안에 prototype이라는 빈 객체가 존재하고 사용 가능하다는 점과 상속이라는 특성에 주목해야 한다 프로토타입의 특성 부모 객체에만 가지고 있..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
