Frontend/JavaScript11 [JavaScript] 웹팩 웹팩이란?자바스크립트 애플리케이션의 모듈 번들을 위해 사용되는 오픈 소스 모듈 번들러 모듈모듈은 자바스크립트 애플리케이션을 구성하는 개별 단위 파일종류에는 자바스크립트 모듈, CSS 모듈, 이미지 파일 / 폰트 파일, 라이브러리 모듈 등이 있습니다. 모듈의 장점유지보수성네임스페이스화재사용성 모듈 시스템자바스크립트의 모듈들을 독립적으로 분리하고 의존성을 정의하는 시스템을 말합니다.종류CommonJS주로 Node.js 환경에서 사용다른 모듈을 사용할때 require을, 모듈을 해당 스코프 밖으로 보낼 때에는 module.exports를 사용// math.jsmodule.exports.add = function(a, b) { return a + b;};// app.jsconst math = require.. 2024. 6. 15. [Javascript] 금액 입력 시 자동으로 콤마 삽입 Introductioninput으로 금액을 입력받을 때, input 값에서 자동으로 콤마가 삽입되도록 하는 방법을 알아보려 한다. 동작 과정1. onChange를 이용하여 현재 price 값을 갱신해야 한다.2. price의 숫자 이외의 문자는 모두 제거한다.3. 정규식을 이용하여 3자리마다 콤마를 삽입한다.4. 콤마를 삽입한 값을 setPrice로 갱신한다. ※ price의 값은 콤마가 포함된 string이므로 콤마를 제외하고 숫자로 변환하는 과정을 거쳐야 한다. placeholder="금액" value={price} onChange={(e) => { const inputPrice = e.target.value.replace(/.. 2023. 9. 21. [JavaScript] 버튼 클릭 시 전주, 차주 이동 Introduction다음 동영상과 같이 back 버튼을 누르면 전주로, next 버튼을 누르면 차주로 날짜가 바뀌는 것을 JavaScript로 구현해보려 한다.대략적인 순서는 다음과 같다.1. 현재의 날짜 범위 중 시작 날짜를 가져온다. (ex. 2023-02-06)2. 전주 이동과 차주 이동을 구분한다.3. for문을 이용하여 현재 날짜의 전주/차주를 월~일 순으로 객체 생성한다.4. 생성된 객체의 일자를 각각 요일에 맞게 순서대로 삽입한다.5. 새로 생성된 날짜 범위를 갱신한다. ※ 이때, 전주/차주의 기준점이 되는 주는 항상 화면에 렌더링 된 것을 가져와 사용한다.ex) 현재 날짜 범위가 2023-02-06 ~ 2023-02-12 에서 차주 버튼을 누르면 현재 날짜 범위는 2023-02-13 ~ .. 2023. 2. 25. [JavaScript] 클릭한 태그 찾기 Introduction다음과 같이 onClick 시 실행될 함수가 모두 같은 태그들이 있을 때, 어떤 태그가 클릭해서 함수가 실행됐는지 어떻게 알 수 있을지 알아보려고 한다. ● event.currentTarget 사용방법은 간단한데, getInfo 함수 내에서 event.currentTarget를 콘솔에 찍어보면다음과 같이 클릭한 태그의 속성들이 뜬다.여기서 span 태그 안의 div 태그의 innerText에 접근하고 싶다면event.currentTarget.children[1].innerTextchilder의 배열을 사용한다.결론적으로, 클릭한 태그에 대한 속성을 알고 싶으면 event.currentTarget을 사용하고자식 태그를 활용하고 싶다면 childeren을 이용한다. 2023. 2. 23. [JavaScript] javascript 주요 개념 간단 정리 Introductionjavascript 복습 겸 주요 개념을 아주 간단히 정리해보았다.브라우저 렌더링 과정HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.두 Tree를 결합하여 Rendering Tree를 만든다.Rendering Tree에서 각 노드의 위치와 트리를 계산한다.계산된 값을 이용해 각 노드를 화면 상의 실제 픽셀로 변환하고, 레이어를 만든다.레이어를 합성하여 실제 화면에 나타낸다.브라우저 동작 원리클라이언트가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시한다.데이터 타입원시 타입: number, string, boolean, null, undefined, symbol객체 타입: object연산자산술 연산자, 문자열 연결 연산자, 할당 연산자,.. 2023. 2. 22. [JavaScript] 제너레이터와 async/await 제너레이터와 async/await[Javascript] 비동기, Promise, async, await 확실하게 이해하기제너레이터란?코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수 함수제너레이터와 일반 함수의 차이제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.제너레이터 함수의 정의function* 키워드로 선언하나 이상의 yield 표현식을 포함// 제너레이터 함수 선언문function* genDecFunc() { yield 1;}//제너레이터 함수 표현식const genExpFunc = function* () { yield 1;.. 2023. 2. 16. 이전 1 2 다음
