J-BBang J-BBang

혹시 Vue3 시작하기를 보고 오신 분들 중에서npm create vue@3를 하셨을 때 위와 같이 뜨시는 분들은 Node버전을 꼭 체크해주시길 바랍니다! SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs' 위와 같은 에러는 Node.js 버전이 낮기 때문에 parseArgs를 지원하지 않기 때문에 생기는 오류라고 합니다. parseArgs에 생소한 저또한 찾아본 결과Node.js 16.17.0 이상에서 새롭게 도입된 함수로커맨드라인에서 전달된 인자들을 쉽게 처리하기 위한 내장 함수라고 합니다.import { parseArgs } from 'node:util';const args = parseA..

포스팅 이전에 앞서 💡 Vue.js의 라이프사이클(Lifecycle)이란?Vue 컴포넌트는 단순히 한 번 만들어지고 끝나는 게 아니라, 탄생부터 소멸까지 일련의 단계를 거칩니다. 이 과정을 컴포넌트 생명주기(Lifecycle)라고 부릅니다.쉽게 말하면, 컴포넌트가생성되고 (create), DOM에 붙고 (mount), 업데이트되고 (update), 사라지기까지 (unmount) 이 전체 흐름을 Vue가 내부적으로 관리하고 있으며, 가장 중요한 요소는특정 시점마다 실행할 코드를 직접 작성할 수 있다는 것입니다. 이때 사용하는 게 바로! 라이프사이클 훅(Lifecycle Hooks) 입니다. Vue 3에서는 컴포넌트의 생명주기 동안 특정 시점에 실행할 수 있는 라이프사이클 훅(Lifecycle Hooks)..

Vue.js의 컴포넌트 시스템은 애플리케이션을 재사용 가능한 작은 단위로 나눌 수 있도록 도와줍니다.이 과정에서 부모와 자식 컴포넌트 간의 데이터 전달과 이벤트 처리가 중요합니다.Vue3의  1-2. 자식 컴포넌트 자식 컴포넌트 {{ msg }}   결과 부모 컴포넌트의 메시지가 자식 컴포넌트로 전달되어 화면에 출력됩니다. defineProps는 Vue3의  2-2. 자식 컴포넌트 자식 컴포넌트 이벤트 발생시키기   결과  자식 컴포넌트에서 버튼을 클릭하면 이벤트가 발생하고, 부모 컴포넌트가 해당 이벤트를 처리하여 알림을 띄웁니다. defineEmits는 Vue3의 문법에서 자식 컴포넌트가 부모 컴포넌트에 이벤트를 전달할 때 사용하는 함수입니다. emit을 통해 자식 컴..

1. 템플릿 문법이란?Vue.js의 템플릿은 HTML 기반으로 작성되며, 일반 HTML 태그에 Vue만의 특별한 문법을 추가하여 동적인 콘텐츠를 쉽게 표현할 수 있습니다. 템플릿은 데이터와 DOM을 연결하는 역할을 하며, 사용자 인터페이스(UI)를 구성하는 기본 단위입니다. 대표적으로 보간법이 있습니다. 보간법 (Interpolation)Vue 템플릿 문법의 핵심은 보간법입니다. 이중 중괄호(콧수염 괄호) {{  }} 를 사용해 데이터를 템플릿에 렌더링할 수 있습니다. {{ title }} {{ new Date().toLocaleDateString() }} 위 코드에서는 title 데이터와 현재 날짜가 동적으로 화면에 렌더링됩니다. 데이터가 변경되면 화면도 즉시 업데이트됩니다. 2. 데이터 바인딩이란..

⭐ Node.js란?Node.js는 서버 측 애플리케이션을 JavaScript로 작성할 수 있게 해주는 런타임 환경입니다. 공식 홈페이지에서 정의하는 Node.js는"V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임" 이라고 정의하였습니다. 이 말은 즉, Node.js가 브라우저 외부에서도 JavaScript를 실행할 수 있게 한다는 것을 의미합니다.일반적으로 JavaScript는 웹 브라우저에서만 실행되어 웹 페이지의 동작을 제어하지만,Node.js는 브라우저가 아닌 환경에서도 JavaScript가 서버 역할을 수행할 수 있도록 합니다. Node.js가 V8 엔진을 채택한 이유는 이 엔진이 JavaScript 코드를 직접 기계어로 변환하여실행 속도를 비약적으로 높일 수 있기 때문입니..

여느때와 같이 npm run dev로 프로젝트를 열려고 하니 위와 같은 에러가 떴습니다. SyntaxError: Unexpected token '??='??= 는 Javascript의 최신 문법으로 변수가 null or undefined 일 때만 값을 할당하는 연산자입니다.근데 제 프로젝트에서는 저러한 문법을 사용하지 않았습니다. 그럼 이는 종속성(dependencies) 중 하나가 해당 연산자를 사용하고 있을 가능성이 큽니다.예를 들어, 프로젝트에 사용된 라이브러리나 빌드 도구(ex: Vite, Webpack, Babel)가 이 연산자를 포함하는 최신 JavaScript 문법을 사용하고 있을 수 있습니다. 해당 문법을 사용하려면 Node.js는 16.9.0 이상이 필요합니다.만약 Node.js 버전이 ..

접근방식우선 문제의 코드를 변경하면 아래와 같습니다.MenOfPassion(A[], n) { sum   3중 for문을 통한 계산의 수행 횟수를 구해야하는데, 변수가 i, j, k가 있습니다.이 과정에서 i 가 성립을 해야하는 상태이면서i가 고정이 되면, j는 그다음 값, k는 j의 그 다음 값을 고르는 방식입니다. i는 0부터 n - 2 까지 돕니다.즉, n - 1번 반복합니다.(0부터 n-2까지니까 n-2+1) j는 i + 1부터 n - 1까지 반복합니다.i = 0이면, j는 1부터 n - 1까지 값을 가지며 n - 1번 반복합니다.그리고 i가 증가할수록, j는 증가한 만큼 반복이 줄어듭니다. k는 j + 1부터 시작해서 n까지 반복합니다.i = 0이면 j = 1이고, k는 2부터 n까지 반복..

접근방식나름 삼중for문일거니 해서 쉽게 생각했는데, 자꾸 틀리더라구요...😰이건 제 틀린 코드입니다.const readline = require("readline");const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});let input = [];rl.on("line", function (line) { input.push(line);}).on("close", function () { // MenOfPassion(A[], n) { // sum  다시 문제를 보며, 뭐가 문제일까 봤더니  최댓값이 500,000일 경우 number 타입으로 처리할 수 없는 엄청 큰 값이 나올 것 같더라구요. 자..