728x90 전체 글748 [Vue] input에서 사용자가 입력한 값 받는 방법 (@input, @change, v-model) React에서 input을 사용할 때는 onChange()라는 이벤트 핸들러를 사용하는 것처럼,Vue에서는 input을 사용할 때 @input or @change를 사용할 수 있습니다. (@input = v-on:input) 🆚 차이점@input (= v-on:input): input 무언가를 입력할 때마다 내부에 있는 코드(함수)가 실행됩니다.@change (= v-on:change): input에 무언가를 입력한 후 커서가 다른 곳으로 이동했을 때 내부에 있는 코드(함수)가 실행됩니다.🖥️ 문법 기존에 input에 이벤트 핸들러를 사용할 때 파라미터로 받던 e.target.value (or event.target.value)는 Vue에서 앞에 $만 추가해 주면 됩니다. 또.. 2024. 4. 24. [Vue] 컴포넌트 다중 단어 네이밍 규칙 설정 Vue 프로젝트를 만들고, 코드를 컴포넌트화 시키거나 페이지를 만들기 위해.vue 파일을 생성해서 name을 설정하다 보면아래와 같은 오류가 발생합니다. 이 오류는 Vue.js의 linting 규칙 중 하나인 'vue/multi-word-component-names'를 사용하여 컴포넌트 이름을 다중 단어로 지정하도록 하는 규칙입니다. 기본값이 true이기 때문에 따로 설정해주지 않는 이상 name을 두 단어 이상으로 설정해주어야 합니다. 이 경우 package.json > eslintConfig > rules에 해당 설정을 아래와 같이 false로 바꿔주고 서버를 재구동하면 오류가 사라집니다. "eslintConfig": { ... "rules": { "v.. 2024. 4. 24. [Vue] 이미지 데이터 바인딩 (Require) / v-bind = : & v-on = @ / props, emit 1️⃣ 이미지 데이터 바인딩 (Require)for in을 사용해서 반복문 돌리면서 img src에 데이터 바인딩을 해야 하는 경우가 있었는 데 그 경우 "'./assets/imgs/img' + i + 'jpg'"를 하면 이미지가 정상적으로 노출되지 않는다. 왜냐하면 저렇게 이미지를 불러오는 경우 String 형태로 인식하기 때문에 이 경우 require()를 사용하여 템플릿 내에서 동적으로 이미지 경로를 생성할 수 있습니다. 🖥️ 코드 📹 참고 [Vue.js] img 태그의 src 바인딩 하는 방법Vue.js에선 element의 속성을 동적으로 처리할 때 v-bind라는 Directive를 사용한다. (Vue.js의 Direct...blog.naver.com 2️⃣ .. 2024. 4. 23. [Vue] 초기 세팅 및 익스텐션 설정 1️⃣ 초기 세팅 Node.js 최신 버전 설치 Node.js — Run JavaScript Everywhere Node.js® is a JavaScript runtime built on Chrome's V8JavaScript engine. nodejs.org VSCode 에디터 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Li.. 2024. 4. 23. 코딩 알려주는 누나의 React 강의를 마치며 4월 2일을 기점으로 약 20일 동안 (중간에 못한 날도 며칠 있지만) React에 대한 전반적인 복습과 Redux, React-Query 복습 및 활용하는 방법, Axios Instance, Intersection 하는 방법, 협업해서 파일 구조 설정하는 방법, 비즈니스 로직, UI 분리해서 컴포넌트화 하는 방법 등등 전체적으로 한번 복습하면서 정리할 수 있었던 시간이었던 것 같습니다! 이미 개발자로 일하고 계신 분들에게는 아는 내용일 수 있지만 저처럼 다른 언어를 주로 사용하다가 React나 관련 라이브러리들을 한번 활용하면서 복습해보고 싶다거나 개발자를 준비하고 계신 분들이 듣기 좋은 강의였다고 생각합니다! 아쉬웠던 점을 찾아보자면.. 아무래도 개발자를 준비하시는 분들에게 중점을 둔 강의이다 보니 .. 2024. 4. 22. [React] useState를 선언할 때 let이 아닌 const를 사용하는 이유 강의를 듣다가 useState를 선언할 때 왜 let이 아닌 const를 사용하는지에 대한 의문이 생겼고, 강의 내용을 쓸 수 없기 때문에 구글링을 통해서 클로저에 대한 부가적인 이해 및 관련 글을 읽게 되었다. hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s dudghsx.tistory.com 위 두 글을 정독하게 되었는 데 useState를 함수 뜯어보았을 대략적으로나마 어떤 방식으로 hook이 작동되는지 알 수 있었고 그 과정 속에서 클로저의 역할을 이해하게 되었는 데 (이해.. 2024. 4. 3. 코딩 알려주는 누나의 React 강의를 시작하며 이직을 준비하면서 어떤 부분을 채워나가면 좋을지 고민하면서 패스트캠퍼스, 인프런 등과 같은 강의 사이트도 찾아보고 유튜브로 구독해 뒀던 분들의 강의 영상도 찾아보면서 어떤 걸 들어야 할지 고민을 많이 해보았는 데 이전 회사에서는 Next.js를 중심으로 개발을 진행하였다 보니 React를 중심으로 기초부터 복습할 수 있으면서도 Redux와 React-Query까지 함께 학습하여 실습 프로젝트와 함께 활용해볼 수 있는 점에서 매력적으로 다가왔습니다. 처음부터 다시 시작한다는 마음으로 열심히 해보고 싶습니다 3. (✨2024 최신 업데이트)리액트: 프론트엔드 개발자로 가는 마지막 단계 html 강좌부터 시작하여 javascript 그리고 이번 react 강의까지 모두 누나쌤과 함께 하였습니다! 약 5달 전까.. 2024. 4. 2. [React] useMemo 🔗 출처 🖥️ useMemo의 기능 ⚠️ useMemo는 결과값을 기억해두는 React Hook이기 때문에 빈번하게 사용할 경우 성능에 안좋은 영향을 줄 수 있습니다. 1️⃣ 복잡한 계산을 저장해 놓는 용도 아래 코드를 예시로 들자면 🙅♂️ 렌더링 될 때마다 expensiveCalculate 함수가 재실행되기 때문에 복잡한 작업을 수행해야 하는 경우 불필요한 함수가 매번 재실행되는 것이기 때문에 성능 저하 문제를 초래할 수 있습니다. 즉, 복잡한 작업을 할수록 비싼 값을 내야 한다. import React, { useState } from "react"; const expensiveCalculate = (numbers) => { console.log("calculate sum...."); return .. 2024. 3. 29. [React] useRef 🔗 출처 : 설명도 너무 깔끔하게 잘해주시고, 예제도 같이 따라 해볼 수 있어서 useRef에 대해서 어렵게 느껴진다면 시청해 보기 아주 좋을 것 같습니다! 🙅♂️ React에서 변수를 사용하지 못하는 이유 값의 변화를 UI에 실시간으로 보여줄 수 없다. 화면이 렌더링 되면 변수의 값이 초기화된다. 🥸 특징 : useState의 장점 + 변수의 장점을 합친 React Hook이다 👉 useState의 특징 렌더링 되도 값이 유지된다. 변화를 실시간으로 화면에 보여줘야 하기 때문에 매번 렌더링이 일어난다. (렌더링이 많아지면 성능에 안 좋음) 👉 변수의 특징 렌더링 되면 값이 사라진다. 변화를 실시간으로 화면에 보여주지 않아도 되기 때문에 성능에 좋다. 👉 useRef의 특징 useState와 변수의 장.. 2024. 3. 28. 이전 1 2 3 4 5 6 7 ··· 84 다음 728x90
