본문 바로가기
반응형

자바스크립트 - Javascript26

react에서 useState로 배열 상태값 변경하기, spread syntax react에서는 배열에 대해 useState가 동작하지 않는다?react에서 아래와 같이 messages라는, 배열을 갖는 state를 변경하려고 시도하면 변경된 값이 반영안되는 것을 확인할 수 있습니다.이럴 때는, spread 문법을 사용해서 상태값을 변경해주면 됩니다.import React, { useState } from 'react';export default function Chat(props) { let [messages, setMessages] = useState(['test1', 'test2']); function change(){ messages.push("test"); setMessages(messages); } return ( { items.map((item, inde.. 2024. 10. 12.
vue3 빌드하지않고 사용하기 vue3 without npmvue3에서는 빌드하지 않고, npm 없이 사용할 수 있는 방법이 있습니다.{{ message }}위 코드는 "Hello Vue"라는 값을 가진 message 변수의 값을 출력하는 예제입니다.브라우저에서 확인하면, HTML 코드 작성시에는 {{message}} 라고 써있던 부분이,아래와 같이 Hello Vue로 대체된 것을 확인할 수 있습니다.#javascript,#vue,#vue3,#vuejs 2024. 9. 20.
vue3 lifecycle hook, vue3 라이프사이클 순서, vue3 onMounted/unmounted/beforecreate, vue3 라이프사이클 예제코드 vue3 lifecycle hook이란?Vue3의 생명주기 훅(Lifecycle Hook)이란,Vue의 컴포넌트가 생성되고 소멸될 때까지의 다양한 단계에서 특정 로직을 실행하도록 할 수 있는 메소드입니다.이를 통해 개발자는 Vue 컴포넌트의 생명주기 동안에 발생하는 다양한 이벤트에 대응하여 특정 로직을 실행할 수 있습니다.Vue3에서는 아래와 같은 생명주기 훅이 있습니다:beforeCreate: 인스턴스가 생성되고 반응성 속성이 설정되기 전에 호출됩니다.created: 인스턴스가 생성되고 반응성 속성이 설정된 후에 호출됩니다.beforeMount: 인스턴스가 마운트되기 직전에 호출됩니다.mounted: 인스턴스가 마운트된 직후에 호출됩니다.beforeUpdate: 데이터가 변경되어 가상 DOM이 다시 렌.. 2024. 9. 16.
vue3 router 사용법, vue router params, vue router push, vue router history, vue dynamic route Vue3에서는 Vue Router를 사용하여 SPA(Single Page Application)를 구현할 수 있습니다.Vue Router는 여러 개의 컴포넌트를 페이지 단위로 관리하며, URL에 따라 적절한 컴포넌트를 렌더링하여 보여줍니다.Vue Router 설치Vue CLI를 사용하여 프로젝트를 생성할 때 Vue Router를 추가로 설치할 수 있습니다.이미 생성된 프로젝트에 Vue Router를 추가하려면 다음 명령어를 실행합니다.npm install vue-routerVue Router 설정vue router 설치가 완료되면, src 디렉토리 안에 router 디렉토리를 생성하고,그 안에 index.js 파일을 생성하여 Vue Router를 설정할 수 있습니다.import { createRouter.. 2024. 9. 4.
vue3 watch 사용법, vue3 watch 여러개, vue3 watchEffect 사용법 vue3 watch, watchEffect란?Vue3에서는 watch와 watchEffect라는 두 가지 반응형 속성 감시자를 사용하여 데이터 변경을 감지하고 반응할 수 있습니다.주로 데이터의 변화에 따른 부수적인 효과를 처리하는 데 사용됩니다.vue3 watch 사용법watch는 특정 반응형 속성이나 계산된 속성을 감시하며, 이들의 값이 변경될 때마다 콜백 함수를 호출합니다.위의 예제에서는 count 데이터의 변화를 감시하고 있으며, count 값이 변경될 때마다 콘솔에 메시지를 출력하게 됩니다.vue3 watchEffect 사용법watchEffect는 watch와 유사하지만,콜백 함수 내부에서 접근하는 모든 반응형 속성을 자동으로 추적하여,이들 중 어떤 것이든 변경될 때마다 콜백 함수를 호출합니다.위.. 2024. 8. 20.
vue3 slot이란, vuejs slot 사용법, vue slot 여러개, v-slot vue.js slot이란, v-slot이란?slot이란 무엇인가 들어가는 자리라는 의미이며, 게임에서 아이템 슬롯 할때 말하는 슬롯과 같이 쓰입니다.vue js에서 slot은 컴포넌트를 넣을 수 있는 자리를 만들어, 컴포넌트의 재사용성을 높이기 위해 사용되는 기술입니다.vue3 slot 사용법, v-slot먼저, Component에서 아래와 같이 을 사용하여,외부에서 을 주입할 수 있는 자리를 만들어줍니다.Component.vue Component.vue를 사용하는 아래 코드에서, 안쪽에 와 같이 입력을 하면,Component.vue에서 정의한 props를 접근할 수 있습니다.App.vue ✔️ {{ slotProps.item }} 위 코드에 대한 결과는 아래.. 2024. 8. 18.
vue3 provide/inject란?, vue3 provide inject 예제 vue.js provide, inject란?일반적으로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때는 props 를 이용합니다.그런데 부모와 자식 관계가 깊어질수록 props 로 데이터를 전달하니, 프로젝트가 복잡해져서 Event bus나 vuex에 데이터를 담았습니다.하지만, Vue3에서는 Component 간에 데이터를 공유하고 관리하는 방법 중 하나로 provide와 inject를 제공합니다.이 것은 주로 컴포넌트 트리에서 부모와 자식 간에 데이터를 전달하는데 사용되며,간접적인 상속을 통해 중첩된 컴포넌트 구조에서 데이터를 공유할 수 있습니다.provideprovide는 컴포넌트에서 사용할 수 있는 데이터와 함수를 제공하는 역할을 합니다.이는 setup() 메서드 내에서 provide() 함.. 2024. 8. 8.
vue3 props, vue3 props 사용법, vue props function, vue props 전달, vue3 props ref, defineProps, script setup props vue.js Props란?, vuejs props란?vue에서의 props란 data를 부모 component에서 자식 component로 데이터를 전달하기 위한 방식입니다.아래와 같이 두 개의 component로 이뤄진 component가 있다고 칩시다.component1과 component2는 자식 component라 하고, 이 둘을 포함한 component는 부모 component입니다.부모 component에서 자식 component로 데이터를 전달하기 위한 방법이 props가 있는 것이며,props를 이용하면 부모 component에서 값을 변경하는 코드를 한번만 작성하면 여러개의 component에서 사용하는 값을 동시에 바꿀 수 있습니다.component1component2vue3 Props.. 2024. 8. 7.
nvm이란, nvm windows 설치, nvm mac설치, nvm 사용법 nvm 이란?nvm 은 node version manager의 약자로, 여러 버전의 node.js 버전을 관리하는 프로그램입니다.node 버전이 서로 다른 프로젝트에 대해 각 버전에 다른 테스트를 빠르게 진행할 수 있습니다.node와는 별개로, 영어권 국가에서 never mind 의 약자로도 쓰인다고 합니다.nvm 설치하기windows에서 nvm 설치하기1) 아래 주소로 접속합니다.https://github.com/coreybutler/nvm-windows/releases2) 아래와 같이 Assets 쪽에 setup.exe 파일을 다운받아 설치합니다. 또는 아래 링크를 클릭해서 다운받으셔도 됩니다.nvm installmac에서 nvm 설치하기1) 아래 명령어로 ~/.nvm 폴더를 생성합니다.mkdir ~.. 2024. 8. 5.
nodejs / javascript에서 sleep javascript에서 sleep 함수 구현javascript에는 sleep함수가 없어서, 직접 구현해서 사용해야합니다.sleep 함수를 구현하는 법은 다음과 같습니다.//ms micro sec만큼 대기async function sleep(ms) => { return new Promise(resolve=>{ setTimeout(resolve,ms) });}사용법은 다음과 같이 sleep 함수 앞에 await를 붙여서 써 줍니다.console.log('sleep 수행 전');await sleep(1000);console.log('1초 후에 실행결과출력');Promise 없이 Sleep하기 1오래된 자바스크립트 버전 (ecma6 이전)에서는 Promise를 쓸 수 없습니다.이럴 때 대안 첫번째는 babel.. 2024. 7. 25.
cheerio 사용법, node cheerio, cheerio란?, cheerio를 사용한 웹크롤링, cheerio 예제, web scraping cheerio란? cheerio란 한마디로 표현하면 "HTML/XML 을 파싱하고 쉽게 조작할 수 있는 JS 라이브러리" 입니다. cheerio 장점 빠르다. 서버(node)/클라이언트(브라우저) 환경 모두에서 사용가능. jquery 와 비슷한 사용법 $(cssquery)와 같은 문법으로 element를 선택하고, 쉽게 조작할 수 있습니다. jquery 를 사용하셨더라면 쉽게 사용하실 수 있고, jquery에서 핵심부분을 가져와 구현된 라이브러리이기 때문에 안정성이 검증되었습니다. cheerio 설치 cheerio 는 여타 다른 js 와 마찬가지로, 아래와 같이 js 패키지매니저(npm/yarn/pnpm)를 사용하여 설치할 수 있습니다. npm install cheerio yarn add cheerio .. 2023. 11. 13.
vue.js란? vue.js란? (pronounced /vjuː/, like view) vue.js란 한마디로 표현하면 "웹 화면 개발을 쉽고 빠르게 해주는 프레임워크"라고 할 수 있습니다. 좀 더 자세히 설명해보겠습니다. 뷰(Vue, 발음 /vjuː/, like view)는 웹 UI를 구축하기 위한 자바스크립트 프레임워크이다. 표준 HTML, CSS, 자바스크립트 위에 구축되며, UI를 효율적으로 개발할 수 있도록 돕는 선언형 및 컴포넌트 기반 프로그래밍 모델을 제공합니다. 예를 들어, vue의 예시코드로는 다음과 같습니다. import { createApp, ref } from 'vue' createApp({ setup() { return { count: ref(0) } } }).mount('#app') templa.. 2023. 11. 8.
반응형

티스토리툴바