JS
-
[Vue.js] 라이프사이클 훅 (Lifecycle Hooks)📗 Vue.js 2025. 4. 16. 16:27
포스팅 이전에 앞서 💡 Vue.js의 라이프사이클(Lifecycle)이란?Vue 컴포넌트는 단순히 한 번 만들어지고 끝나는 게 아니라, 탄생부터 소멸까지 일련의 단계를 거칩니다. 이 과정을 컴포넌트 생명주기(Lifecycle)라고 부릅니다.쉽게 말하면, 컴포넌트가생성되고 (create), DOM에 붙고 (mount), 업데이트되고 (update), 사라지기까지 (unmount) 이 전체 흐름을 Vue가 내부적으로 관리하고 있으며, 가장 중요한 요소는특정 시점마다 실행할 코드를 직접 작성할 수 있다는 것입니다. 이때 사용하는 게 바로! 라이프사이클 훅(Lifecycle Hooks) 입니다. Vue 3에서는 컴포넌트의 생명주기 동안 특정 시점에 실행할 수 있는 라이프사이클 훅(Lifecycle Hooks)..
-
[Vue.js] Props와 Emits📗 Vue.js 2024. 12. 5. 16:39
Vue.js의 컴포넌트 시스템은 애플리케이션을 재사용 가능한 작은 단위로 나눌 수 있도록 도와줍니다.이 과정에서 부모와 자식 컴포넌트 간의 데이터 전달과 이벤트 처리가 중요합니다.Vue3의 1-2. 자식 컴포넌트 자식 컴포넌트 {{ msg }} 결과 부모 컴포넌트의 메시지가 자식 컴포넌트로 전달되어 화면에 출력됩니다. defineProps는 Vue3의 2-2. 자식 컴포넌트 자식 컴포넌트 이벤트 발생시키기 결과 자식 컴포넌트에서 버튼을 클릭하면 이벤트가 발생하고, 부모 컴포넌트가 해당 이벤트를 처리하여 알림을 띄웁니다. defineEmits는 Vue3의 문법에서 자식 컴포넌트가 부모 컴포넌트에 이벤트를 전달할 때 사용하는 함수입니다. emit을 통해 자식 컴..
-
[Vue.js] 템플릿 문법 및 데이터 바인딩📗 Vue.js 2024. 12. 2. 15:34
1. 템플릿 문법이란?Vue.js의 템플릿은 HTML 기반으로 작성되며, 일반 HTML 태그에 Vue만의 특별한 문법을 추가하여 동적인 콘텐츠를 쉽게 표현할 수 있습니다. 템플릿은 데이터와 DOM을 연결하는 역할을 하며, 사용자 인터페이스(UI)를 구성하는 기본 단위입니다. 대표적으로 보간법이 있습니다. 보간법 (Interpolation)Vue 템플릿 문법의 핵심은 보간법입니다. 이중 중괄호(콧수염 괄호) {{ }} 를 사용해 데이터를 템플릿에 렌더링할 수 있습니다. {{ title }} {{ new Date().toLocaleDateString() }} 위 코드에서는 title 데이터와 현재 날짜가 동적으로 화면에 렌더링됩니다. 데이터가 변경되면 화면도 즉시 업데이트됩니다. 2. 데이터 바인딩이란..
-
[백준] 24267번: 알고리즘 수업 - 알고리즘의 수행 시간 6 (Node.js)📝 알고리즘/백준 2024. 9. 11. 15:24
접근방식우선 문제의 코드를 변경하면 아래와 같습니다.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까지 반복..
-
[백준] 24266번: 알고리즘 수업 - 알고리즘의 수행 시간 5 (Node.js)📝 알고리즘/백준 2024. 9. 10. 15:05
접근방식나름 삼중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 타입으로 처리할 수 없는 엄청 큰 값이 나올 것 같더라구요. 자..
-
[백준] 24265번: 알고리즘 수업 - 알고리즘의 수행 시간 4 (Node.js)📝 알고리즘/백준 2024. 9. 9. 17:35
접근방식이번 문제는 알고리즘의 수행시간3과 비슷해보이지만 반복문의 범위가 다릅니다.반복문의 입력 크기 n에 대해 선형적으로 실행되더군요. MenOfPassion(A[], n) { sum 우선 보기 쉽게 javascript로 변형해보았습니다. 외부 반복문과 내부 반복문으로 나눠서 보겠습니다. 외부 반복문i는 0부터 n-1번까지 반복합니다.이 말은 즉, 우리가 잘 알고 있듯이 n번 반복을 의미합니다. 내부 반복문j는 i+1부터 n-1번까지 반복합니다. i = 0 일 때, j는 1부터 n-1번 반복합니다.i = 1 일 때, j는 2부터 n-1번 반복합니다.i = n-1 일 때는 j = n 이므로 n i = n-2 일 때는 j = n-1 이므로 딱 1번 실행됩니다. 그럼 j 루프에서 반복되는 횟수는 ..
-
[백준] 24264번: 알고리즘 수업 - 알고리즘의 수행 시간 3 (Node.js)📝 알고리즘/백준 2024. 9. 9. 13:51
풀이 ⏰이중for문의 시간복잡도에 대해 다루고 있습니다.이중 반복문을 사용하면 시간복잡도가 O(n^2)가 됩니다.=> 외부 반복문 n번, 각 외부 반복문마다 내부 반복문 n번 실행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 백준 24264번 링크👉 https://www.acmicpc.net/..
-
[백준] 24263번: 알고리즘 수업 - 알고리즘의 수행 시간 2 (Node.js)📝 알고리즘/백준 2024. 9. 9. 13:16
접근방식이전 게시글 [백준] 24262번: 알고리즘 수업 - 알고리즘의 수행 시간 1 (Node.js) 와 마찬가지로알고리즘의 시간 복잡도에 대해 다루는 기초문제이며 제시된 코드의 시간복잡도를 분석하는 문제입니다. 시간복잡도와 빅오표기법(Big-O)에 대한 짧은 설명글은이전 게시글에 있으니 필요하시면 확인하시는게 좋을 것 같습니다😄 이번 문제 또한 시간복잡도에 관한 문제이며, 저번 게시글에는 O(1)에 대한 문제였지만이번에는 for문이 들어간 O(n)에 대한 문제입니다. 풀이 ⏰const readline = require("readline");const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});..