JS40 웹팩과 번들러 웹팩의 이해 웹팩(webpack)이란? 웹팩 공식 Github 에서는 웹팩을 모듈(module)을 위한 번들러(bundler) 라고 소개한다. 모듈(module) : 재사용 가능한 코드조각 번들러(bundler): JS, CSS, 이미지 등의 파일을 묶어주는 작업을 번들링(Bundling)이라고 하고, 작업의 결과물은 번들(Bundle)이라고 한다. 마찬가지로 묶어주는 역할을 하는 웹팩(webpack) 같은 친구들을 번들러(bundler) 라고 한다, 웹팩을 사용하는 이유 웹팩을 사용하는이유 근본적으로 번들러(bundler)사용하게 된 이유는 번들러(bundler) 존재하기 전에 웹에서 는 두 가지 방법으로 브라우저에서 JavaScript를 실행했다. 각 기능에 대한 스크립트를 포함해서 사용 모든 프로젝.. 2022. 4. 12. promise 와 async & await callback 함수를 정리 할 때 비동기 처리에 관한 내용도 알아보았고 더 나아가 비동기 작업을 조금 더 깔끔하게 처리하는 promise 대해 알아보려한다. promise 는 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 표시하려고 할 때 사용한다. promise 는 3가지 상태 중 하나를 가지고 있다. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. promise 를 생성하고 연산이 성공적으로 완료하면(fulfilled) then 안에 있는 callback 함수 실행되고 연산이 실패하면(rejected) catch 안에 있는 callback 함수가 실행된다. 또한 .. 2022. 3. 2. callback 함수 어떤 개념을 배울 때 이 개념이 무엇인지 왜 필요한지 어떻게 사용하는지 정리되지 않는다면 제대로 이해하기는 힘들다. 나에게는 callback 함수가 그러했다. callback 함수가 무엇인지는 대충은 알았고 어떻게 사용하는지 또한 알고 있었지만 정확히 무엇인지 왜 필요한지는 알지 못 했다. 이번 기회에 pormise 를 공부하기 이전에 callback 함수도 확실히 정리하고 가려한다. 콜백함수 다른 함수에 인자로 전달되는 함수를 콜백 (callback) 함수 라고 한다. 좀 더 자세히 보면 다른 코드 (함수 또는 메서드) 에게 인자로 넘겨주면서 제어권도 함께 위임하고, callback 함수를 위임받은 코드는 내부 로직에 의해 callback 함수를 적절한 시점에 실행한다. JS 에서 함수는 1급 객체 이.. 2022. 2. 24. 전개연산자 (Spread Opertor) 리액트 공부중 코드중에 처음 보는 녀석을 발견했다. function reducer(state, action) { return { ...state, [action.name]:action.value } } ...state 이렇게 생긴 이 녀석의 이름은 전개 연산자 스프레드 연산자로도 불리는 듯하다. 그나마도 쉽게 이해되는 설명은 이것이었다 '스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.' 쉽게 말하면 spread 의 뜻처럼 배열, 문자열, 객체 등을 펼쳐서 쓴다는 의미다. 그러나 완벽히 이해가 되지 않고 왜 쓰는지, 어떻게 활용이 되는지는 찾아볼 필요가 있었다. 왜 사용하는가? 일단 불변성의 중요성을 알.. 2022. 2. 13. 이전 1 2 3 4 다음
