반응형 "The code generator has deoptimised..."의 뜻이 무엇일까? 무슨 뜻일까? CRA로 시작한 프로젝트의 기존 번들러 Webpack을 Vite로 마이그레이션 하는 중에 "The code generator has deoptimised the styling of..."라는 로그가 보여서 무슨 의미인지 궁금했다. 찾아보니 이것은 Babel의 compact 옵션과 관련이 있었다. 이 옵션은 개행(newlines)과 공백(whitespace)을 결과 코드에서 생략할지에 대한 여부를 결정하는 데 사용되고, 이 설정 값에 따라 추가적인 공백이나 개행을 제거할 수 있다. export function setupCounter(element) { let counter = 0 const setCounter = (count) => { counter = count element.innerHT.. 2024. 2. 20. [JavaScript] 배열에서 특정 요소 제거하기 프로그래밍을 하다 보면 배열에서 특정 요소를 제거해야할 때가 있다. 이 글에서 자바스크립트 배열의 특정 요소를 제거하는 방법에 대해 알아보자. 배열에서 특정 요소를 제거하는 방법 splice() 메서드 사용 splice() 메서드는 첫 번째 인자로 주어진 인덱스에서 시작해서, 두 번째 인자로 주어진 개수만큼의 요소를 제거한다. splice() 메서드는 요소의 교체 및 추가에도 쓰인다. indexOf() 메서드를 사용하여 제거할 값의 인덱스를 먼저 찾을 수 있다. const array = [1, 2, 3, 4, 5]; const index = array.indexOf(3); // 값 3의 인덱스를 찾는다. if (index > -1) { array.splice(index, 1); // 인덱스 위치에서 1개.. 2023. 5. 20. [JavaScript] Axios 사용하기(feat.CDN, Webpack) axios는 자바스크립트에서 사용하는 promise 기반 HTTP 클라이언트 라이브러리이다. 브라우저와 node.js 환경에서 모두 사용 가능하며, XMLHttpRequests와 node.js의 http 모듈을 사용하여 HTTP 요청을 처리한다. XHR 객체를 사용하기 때문에 브라우저 호환성이 좋고, 더 다양한 설정을 지원하기 때문에 요청에 대한 세밀한 제어가 가능하다. 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)뿐만 아니라 요청과 응답 데이터의 자동 직렬화와 역직렬화를 지원한다.(기본적으로 객체를 'JSON'으로 직렬화한다.) 이렇게 다양한 기능으로 인해 axios는 많은 프로젝트에서 HTTP 클라이언트 라이브러리로 사용된다. 그럼 이제 자바스크립트에서 axios를 어떻게 다운.. 2023. 4. 5. 자바스크립트는 모든 것이 객체일까? 왜인지는 모르겠지만 나는 꽤 오랫동안 자바스크립트의 값(value)들이 모두 객체(object)라고 생각을 했었다. 블로그든 강의든 어디선가 잘못 이해하고, 그 내용이 머릿속에 강하게 남았나보다. 많은 시간이 지나고, 이제서야 개념을 바로잡게 되었다. 결론부터 말하자면 자바스크립트에서 대부분의 것들은 객체이지만, 원시값(primitive)이 있으며, 이들은 객체가 아니다. 다음으로 객체란 무엇인지, 왜 모든 값들이 객체라고 생각을 했는지, 그리고 그 값은 왜 객체가 아닌지에 대해서 자세히 알아보자. 객체 알아보기 객체는 관련된 데이터와 함수(프로퍼티와 메서드)를 가지는 복합 자료 구조이다. 자바스크립트의 객체는 실제로 동적 구조와 프로토타입 기반의 상속 덕분에 매우 유연하고 강력한데, 이는 언어의 중요한.. 2023. 3. 30. Babel 이해하기 이름이 왜 바벨(Babel)일까? 바벨(babel)의 원래 이름은 '6to5'였다. 바벨을 만든 세바스찬 맥켄지(Sebastian McKenzie)는 호주의 고등학교 마지막 학년에 6to5를 만들기 시작했고, 그 당시 만든 계기가 정확히 기억이 나지 않는다고 했다. ES6를 우연히 만났고, 그 후 어찌저찌 'estraverse'라는 파서 라이브러리를 발견해서 더 깊이 배우기로 결심하고, 오픈 소스에 대한 환상이 떠오른 것 같다고 말한다. '6to5'라는 이름에서 알 수 있듯이 미래에 사용(future-proof)하기 적합한 이름은 아니었다. 많은 사용자들은 이것이 단지 ES6가 지원되기 전까지의 '임시 해결책'이라고 생각했지만, 맥켄지는 이것이 미래가 보장될 뿐만 아니라 잠재적으로 미래의 표준에 영향을 .. 2023. 3. 6. Stack Frame과 Execution Context는 같은 개념일까? 최근 자바스크립트를 좀 더 깊게 이해하고자 공부 중인데, 혼란스러운 두 용어가 있다. 바로 실행 컨텍스트(execution context)와 스택 프레임(stack frame)이다. 콜 스택을 설명할 때 둘의 용어를 혼용해서 사용하는 것이었다. 스택 프레임(Stack Frame)이란? 어떤 함수든 호출되는 순간 스택에는 그 함수를 위한 영역이 할당된다. 이것을 스택 프레임(stack frame)이라고 한다. 즉, 함수의 실행 데이터가 스택 프레임에 저장되는 것이다. 다르게 말하면, 스택 프레임은 스택 영역에 차례대로 저장되는 함수의 호출 정보이다. 스택 프레임에는 매개변수, 호출이 끝난 뒤 돌아갈 반환 주소값, 함수에서 선언된 지역 변수 등이 저장된다. 따라서 이것이 실제 실행 스택이며, 각 프레임은 해.. 2022. 12. 7. 오늘 하루 그만 보기 모달 윈도 구현하기(feat.Cookie) 마케팅 회사의 개발자로 일하다보니 꽤 많은 온라인 쇼핑몰에서 모달 윈도를 다양하게 활용하고 있다는 것을 알게 되었습니다. 특히 사용자의 구매 유도를 위한 배너 광고 형식을 자주 보는 것 같아요. 배너 광고 형식 외에도 프로모션 알림, 공지사항 등이 있겠네요. 여기엔 '오늘 하루 그만 보기', '3일 동안 보지 않기'와 같은 기능도 포함이 되어 있습니다. 이러한 기능은 어떻게 구현을 하는지 해당 기능을 중심으로 알아보겠습니다. 왜 쿠키(Cookie)일까? '오늘 하루 그만 보기'와 같은 기능은 대부분 쿠키를 통해서 구현을 합니다. 현재 네이버의 프로모션 알림도 쿠키를 통해 제어를 하고있습니다. 확인하는 방법은 개발자 도구를 켜서 애플리케이션 탭의 쿠키에서 확인을 하실 수 있습니다. 네이버에서 '3일 동안 .. 2022. 8. 18. 이전 1 2 3 4 5 다음 반응형
