Frontend (12) 썸네일형 리스트형 [React] 웹의 역사와 Next.js 🔸 웹의 역사 1. Mosaic Web Browser(1993)와 Netscape Navigator(1994) 등장 Mosaic Web Browser와 Netscape Navigator는 HTML과 CSS로만 이루어진 정적인 웹사이트였습니다. 사용자에게 조금 더 좋은 서비스를 제공하고자 동적인 웹사이트를 만들기 위해 고민합니다. 2. Javascript의 등장 Brendan Eich가 Javascript를 개발하였고, Netscape Navigator에는 javascript 엔진을 내장하여 출시하게 됩니다. 3. AJAX 등장 Jesse James Garrett이 비동기적으로 데이터를 받아오고 처리할 수 있는 기술이 등장합니다. 4. jQuery의 등장 Microsoft가 Internet Explorer.. [React] Redux middleware 리덕스 미들웨어 🔸 Redux란? 리덕스는 Flux 패턴을 구현한 대표적인 라이브러리 중의 하나입니다. Flux 패턴 페이스북에서 애플리케이션에서의 데이터 흐름이 복잡해며 발생하는 문제를 해결하기 위해 발표한 패턴입니다. 이 패턴은 데이터가 단방향으로만 흐르고, 새로운 데이터를 넣으면 처음부터 데이터 흐름이 다시 시작됩니다. 이를 통해서 상태의 전이 현상을 없애주고 예측 가능하다는 특징을 가지게 됩니다. 동작 화면에서 액션이 발생하면 이를 디스패처가 리듀서에 전달하고, 리듀서는 상태를 변경합니다. 이 모든 상태는 스토어에서 관리합니다. 한계 리덕스 스토어에서는 동기적으로 액션을 디스패치하고, 리듀서 함수를 호출하여 state를 업데이트하는 것을 담당합니다. 즉, 비동기 처리는 수행하지 못하는 한계가 있습니다. 🔸 Red.. [Javascript] Generator 안녕하세요. 오늘은 Generator에 대해서 알아보도록 하겠습니다. 🔸 Generator란? Generator는 함수의 실행을 중간에 멈췄다가 재개할 수 있는 함수입니다. 이때 컨텍스트는 저장된 상태로 남아 있습니다. 예제 Generator 함수는 호출되어도 즉시 실행되지 않고, 함수를 위한 Iterator 객체를 반환합니다. function* idMaker() { let index = 0; while (index < 3) { yield index++; } } let iter = idMaker(); console.log(iter.next()); //{value: 0, done: false} console.log(iter.next()); //{value: 1, done: false} console.log.. [React] State Management 상태 관리 안녕하세요. React를 사용해보신 분들은 useState나 redux를 이용하여 상태 관리를 해본 경험이 있으실 겁니다. 오늘은 상태 관리의 역사, 라이브러리 등등에 대해 알아보도록 하겠습니다. 🔸 상태란? 컴포넌트 안에서 관리되는 변경 가능한 데이터 저장소로, 상태가 변경되면 컴포넌트가 리렌더링 됩니다. 리액트에서는 useState을 사용하여 상태관리를 할 수 있습니다. import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( {count} setCount(count+1)}> click me ); } 위 코드에서 count 변수는 상태라고 할 수 있습니다. 버튼 클릭 여부에 .. [Javascript] Prototype 프로토타입 안녕하세요. 자바스크립트에 대해 공부하다 보면, '자바스크립트는 프로토타입 기반 언어이다.'라는 말을 들어보셨을 겁니다. 오늘은 여기서 말하는 프로토타입이 무엇인지에 대해서 알아보도록 하겠습니다. 자바스크립트에서 사용되는 프로토타입이란 용어는 크게 두 가지로 나뉩니다. 첫 번째는 자기 자신을 만들어낸 객체의 원형을 의미하는 Prototype Link이고, 두 번째는 Prototype Property가 가리키고 있는 Prototype Object입니다. 🔸 Prototype이란? 자바스크립트의 모든 객체는 자신을 생성한 객체 원형에 대해 연결을 갖습니다. 이때 자기 자신을 생성하기 위해 사용된 객체 원형을 프로토타입이라고 합니다. 즉, 위에서 말한 Prototype Link가 가리키고 있는 객체를 말합니다.. [Javascript] Promise 안녕하세요. 오늘은 Promise에 대해서 알아보도록 하겠습니다. 🔸 Promise란? Promise란 현재에는 당장 값을 얻을 수 없지만, 미래에는 얻을 수 있는 데이터에 접근하기 위한 방법을 제공합니다. 현재 값을 얻을 수 없다는 것은 데이터를 얻는데 지연 시간이 존재한다는 것입니다. (대표적으로 network 통신으로 데이터를 얻는 경우가 있습니다.) 지연 시간이 발생하는 작업을 동기로 처리하면, 그 시간 동안 사용자는 브라우저를 사용할 수 없게 됩니다. 따라서 지연 시간이 발생하는 것들은 대부분 비동기로 처리하고 있습니다. Promise는 비동기 처리에 사용되는 객체로, 콜백 지옥 문제를 해결하기 위해 ES2015에 공식적으로 추가되었습니다. Promise가 등장하기 전에는 비동기 처리를 할 때 .. [Javascript] Garbage Collection 안녕하세요. 오늘은 Garbage Collection에 대해 알아보도록 하겠습니다. Javascript에서는 객체, 문자열 등이 생겨날 때 메모리가 할당되며, 이들이 더 이상 사용되지 않을 때 자동으로 메모리가 반환됩니다. 자동으로 메모리를 관리하는 것을 Garbage Collection이라고 합니다. 🔸 Garbage Collection 이란? 메모리 관리 방법 중의 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요 없게 된 영역을 해제하는 기능입니다. 필요없는 데이터가 메모리에 계속 쌓인다면, 결국 메모리 사용량을 초과하겠죠? 그럼 로딩 속도가 느려지는 등의 문제를 야기합니다. C언어 같은 저수준 언어에서는 개발자가 수동으로 메모리를 비워줘야 합니다. 하지만 Javascript에서는 필요.. [Javascript] Closure 클로저 안녕하세요. 오늘은 클로저(Closure)라는 개념에 대해 알아보려 합니다. 클로저에 대해 배우기 전에! 혹시 실행 컨텍스트에 대해 알고 계신가요? 실행 컨텍스트라는 개념에 대해 알고 있으면 이해하기도 훨씬 쉬워집니다. (실행 컨텍스트에 대해 학습하고 싶으신 분은 지난 포스팅을 참고해주세요!) 실행 컨텍스트에 대해 아시는 분들도 간단한 예제로 몸 풀기를 해볼까요? var outer = function() { var a = 1; var inner = function(){ console.log(++a); }; inner(); }; outer(); 위 예제에서는 콜 스택에 실행 컨텍스트가 어떤 순서로 쌓일까요? 먼저 코드가 실행되면, 전역 컨텍스트가 생성되어 콜 스택에 들어가게 됩니다. 그 후에 함수가 실행된.. 이전 1 2 다음
