조아마시

쓸모 있는 상세페이지 만들기

분류 전체보기 134

[자바스크립트] this 키워드 / call(), apply(), bind() 메서드

this 키워드객체 내부에서 사용될 때: this는 해당 객체 자신을 가리킵니다.함수 내에서 사용될 때: this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다.메서드로 호출될 때: this는 호출한 객체를 가리킵니다.일반 함수로 호출될 때: this는 window 객체를 가리킵니다.생성자 함수로 호출될 때: this는 생성된 객체를 가리킵니다.이벤트 핸들러 내에서 사용될 때: this는 이벤트가 발생한 요소를 가리킵니다.call() 메서드함수의 call() 메서드는 함수를 호출하고, 첫 번째 인자로 this를 지정할 수 있습니다.두 번째 인자부터는 함수에 전달할 인자를 나열합니다.function greet(greeting, name) { console.log(`${greeting}, ${this..

[자바스크립트] 변수 const / let / var

자바스크립트에서 변수를 선언하는 방법은 크게 세 가지가 있습니다: const, let, var. 각 방식마다 변수의 특성과 용도가 다르기 때문에 상황에 맞게 적절하게 선택하는 것이 중요합니다.1. const상수 선언: const 키워드는 변수값을 변경할 수 없는 상수로 선언합니다. 한 번 선언된 값은 절대로 바꿀 수 없으며, 선언하지 않고 사용하려 하면 에러가 발생합니다.호이스팅: const 변수도 호이스팅이 발생하지만, 선언되지 않은 변수처럼 undefined 값으로 초기화되지 않고 선언 블록까지 참조할 수 없습니다.블록 범위: const 변수는 선언된 블록 범위 내에서만 유효합니다. 예를 들어, if 문이나 for 루프 안에서 const 변수를 선언하면 해당 블록 밖에서는 사용할 수 없습니다.사용 예..

[Vue] Vue3 defineExpose 사용 가이드

defineExpose는 Vue 3에서 자식 컴포넌트의 API를 부모 컴포넌트에 직접적으로 공개하는 강력한 기능입니다. 기존의 props, emit 방식보다 더 효율적이고 유연한 데이터 전달 방식을 제공하며, 컴포넌트 간의 코드 재사용성을 높여줍니다. 1. defineExpose 기본 원리defineExpose는 자식 컴포넌트의 setup() 함수 내에서 사용됩니다. 객체를 인수로 받아, 공개하고 싶은 컴포넌트 내부 API를 키-값 쌍 형태로 정의합니다.자식 컴포넌트 (ChildComponent.vue)import { defineExpose } from 'vue';export default { setup() { const data = ref('초기 데이터'); const addData = (..

웹개발/vuejs 2024.07.20

Vue 3 및 Router 4 기초부터 상세 가이드

Vue 3 소개Vue 3는 프론트엔드 웹 개발을 위한 JavaScript 라이브러리입니다. 2020년 9월에 출시된 최신 버전은 TypeScript 지원, Composition API, Reactivity API 등 여러가지 개선 사항을 제공합니다. Vue 3는 가볍고 사용하기 쉽고, 배우기 쉬우면서도 강력하고 유연한 프레임워크로 평가받고 있습니다.Vue Router 4 소개Vue Router 4는 Vue 3와 함께 사용되는 공식 라우팅 라이브러리입니다. SPA(Single Page Application) 구축에 필수적인 기능을 제공하며, URL 변경에 따라 동적으로 뷰를 렌더링하고, 라우트 간 이동을 관리하는 역할을 합니다.Vue 3 & Router 4 사용 장점SPA 구축: 페이지 이동 없이 URL ..

웹개발/vuejs 2024.07.20

[Vue] Vue3에서 새창 띄우기

Vue 3에서 postMessage 이벤트를 이용한 자식 컴포넌트와 부모 컴포넌트 간 통신Vue 3에서 자식 컴포넌트와 부모 컴포넌트 간 통신 방법에는 다양한 방식이 존재하지만, postMessage 이벤트를 활용하는 방법은 비교적 간단하고 유연한 장점을 제공합니다.1. postMessage 이벤트란 무엇인가요?postMessage 이벤트는 웹 브라우저에서 서로 다른 창이나 웹 페이지 간에 메시지를 전달하는 데 사용되는 API입니다. 자식 컴포넌트와 부모 컴포넌트가 서로 다른 DOM 트리에 위치하는 경우, postMessage 이벤트를 통해 안전하고 효율적으로 통신할 수 있습니다.2. postMessage 이벤트를 활용한 자식-부모 컴포넌트 통신 예시:부모 컴포넌트 (ParentComponent.vue)..

웹개발/vuejs 2024.07.19

[Vue] TypeError: Intl.RelativeTimeFormat is not a constructor 에러 해결 방법

Vue에서 Intl API를 사용하여 다국어 기능을 구현하는 방법은 다음과 같습니다.1. 필요한 패키지 설치:vue-i18n 패키지를 설치합니다. 이 패키지는 Vue 컴포넌트에서 Intl API를 쉽게 사용할 수 있도록 도와줍니다.npm install vue-i18n2. 번역 파일 준비:src/locales 디렉토리를 생성합니다.각 언어 코드에 해당하는 번역 파일을 [언어 코드].json 형식으로 생성합니다.예를 들어, 한국어 번역 파일은 ko.json 이름으로 생성하고 다음과 같은 내용을 포함합니다.{ "message": "안녕하세요, Vue Intl!", "welcome": "환영합니다!"}3. Vue I18n 인스턴스 설정:main.js 또는 App.vue 파일에서 Vue I18n 인스턴..

웹개발/vuejs 2024.07.19

[lodash] Array

Lodash는 JavaScript에서 배열, 객체, 문자열 등 다양한 데이터 구조를 다루는 데 유용한 유틸리티 라이브러리입니다. 특히 배열 관련 함수는 다양한 작업을 간결하고 효율적으로 수행하도록 지원합니다.1. _.chunk(array, [size=1])array를 지정된 크기(size)의 그룹으로 나누어 배열들의 배열을 만듭니다.const numbers = [1, 2, 3, 4, 5, 6, 7];const chunks = _.chunk(numbers, 2);console.log(chunks); // 출력: [[1, 2], [3, 4], [5, 6], [7]]2. _.compact(array)array에서 거짓 값 (false, null, 0, "", undefined) 을 모두 제거한 새로운 배열을 ..

[자바스크립트] is, has, can으로 시작하는 변수 이름 규칙 알아보기

자바스크립트 변수 이름을 지을 때, 명확하고 이해하기 쉬운 이름을 사용하는 것이 중요합니다. 특히, is, has, can과 같은 단어로 시작하는 변수 이름은 변수의 특성을 명확하게 드러낼 수 있어 코드를 읽는 사람이 변수의 역할을 쉽게 이해하는 데 도움이 됩니다.1. is로 시작하는 변수:용도: 논리적인 값을 저장하는 변수에 사용됩니다. 변수 값이 참인지 거짓인지를 나타냅니다.예시:isUserLoggedIn: 사용자가 로그인되어 있는지 여부를 나타내는 변수isDarkMode: 웹사이트가 다크 모드인지 여부를 나타내는 변수isFileSaved: 파일이 저장되었는지 여부를 나타내는 변수2. has로 시작하는 변수:용도: 특정 속성이나 기능이 있는지 여부를 나타내는 변수에 사용됩니다.예시:hasAdminis..

[Vue] Vue3에서 setup() 함수와 함께 Axios와 Async/Await 사용하기

Vue3에서 setup() 함수와 함께 Axios를 사용하여 비동기 API 호출을 처리하는 방법은 다음과 같습니다.1. 설치먼저 Vue와 Axios를 설치해야 합니다. 아직 설치하지 않았다면 다음 명령어를 사용하여 설치하십시오.npm install vue axios2. 기본 사용법다음은 setup() 함수, Async/Await를 사용하여 API 호출을 수행하고 응답 데이터를 반환하는 간단한 예제입니다.3. 오류 처리위 예제에서는 try...catch 블록을 사용하여 API 호출 중 발생하는 오류를 처리합니다. 오류가 발생하면 catch 블록 내의 코드가 실행되고 오류 내용이 콘솔에 출력됩니다.4. 여러 API 호출setup() 함수와 Async/Await를 사용하여 여러 API 호출을 순차적으로 수행할..

웹개발/vuejs 2024.07.16

[Vue] Vue2에서 Axios와 함께 Async/Await 사용하기

Vue 2에서 Axios를 사용하여 비동기 API 호출을 처리할 때 Async/Await를 사용하는 방법은 다음과 같습니다.1. 설치먼저 Vue와 Axios를 설치해야 합니다. 아직 설치하지 않았다면 다음 명령어를 사용하여 설치하십시오.npm install vue axios 2. 기본 사용법다음은 Async/Await를 사용하여 API 호출을 수행하고 응답 데이터를 콘솔에 로깅하는 간단한 예제입니다. 데이터 가져오기 이름: {{ data.name }} 3. 오류 처리위 예제에서는 try...catch 블록을 사용하여 API 호출 중 발생하는 오류를 처리합니다. 오류가 발생하면 catch 블록 내의 코드가 실행되고 오류 내용이 콘솔에 출력됩니다.4. 여러 API 호출Async/Await를 ..

웹개발/vuejs 2024.07.16

[Vue] Vite에서 환경변수 env 사용하기

Vite는 프론트엔드 개발을 위한 빠르고 현대적인 빌드 도구입니다. 환경변수를 사용하여 개발, 테스트 및 프로덕션 환경에서 앱의 구성을 쉽게 관리할 수 있습니다.1. 환경변수 설정Vite는 .env 파일을 사용하여 환경변수를 설정합니다. 이 파일은 프로젝트 루트 디렉터리에 위치해야 합니다..env 파일에 각 환경변수를 다음 형식으로 정의합니다.KEY=VALUE예를 들어, 다음은 API_KEY 및 BASE_URL 환경변수를 설정하는 .env 파일입니다.API_KEY=my-secret-api-keyBASE_URL=https://my-app.com주의: 민감한 정보(예: API 키, 비밀번호)는 .env 파일에 저장하지 마세요. 이러한 정보는 환경변수로 설정해야 합니다.2. 코드에서 환경변수 사용Vite는 i..

웹개발/vuejs 2024.07.16

[자바스크립트] Axios에서 POST와 GET으로 불러오는 차이

axios에서 GET과 POST는 서버와 데이터를 주고받는 방식에 있어 중요한 차이점을 가지고 있습니다.1. 사용 목적GET: 서버에 있는 자원을 조회하는 데 사용됩니다. 즉, 데이터를 가져오는 역할을 합니다. 서버 상태를 변경하지 않고 정보만 얻을 때 사용합니다.POST: 서버에 새로운 데이터를 전송하거나 기존 데이터를 수정하는 데 사용됩니다. 즉, 데이터를 변경하는 역할을 합니다. 사용자 입력 정보를 전송하거나 데이터베이스에 새로운 레코드를 추가할 때 사용합니다.2. 요청 메시지GET: 요청 메시지의 URL에 파라미터를 포함하여 데이터를 전송합니다. URL 길이 제한이 있기 때문에 소량의 데이터 전송에 적합합니다. 또한, 캐싱이 가능하기 때문에 동일한 요청을 반복적으로 수행할 때 유용합니다.POST:..

HTML 이스케이프의 웹 접근성 사용 목적

HTML 이스케이프는 웹 페이지의 콘텐츠를 모든 사용자가 안전하고 접근 가능하게 만드는 데 중요한 역할을 합니다. 특히 시각 장애인이나 스크린 리더를 사용하는 사용자에게 필수적인 요소입니다.HTML 이스케이프의 주요 웹 접근성 사용 목적은 다음과 같습니다.1. 악성 코드 공격 방지:악의적인 사용자는 스크립트, 이미지 또는 기타 유해한 코드를 웹 페이지에 삽입하여 사용자 시스템을 공격할 수 있습니다.HTML 이스케이프는 특수 문자를 무해한 형태로 변환하여 이러한 공격을 방지하는 데 도움이 됩니다.2. 올바른 텍스트 표시 보장:특수 문자는 웹 브라우저에서 다양한 방식으로 해석될 수 있습니다.HTML 이스케이프는 특수 문자가 웹 브라우저에서 항상 동일한 방식으로 표시되도록 하여 텍스트 깨짐이나 오류를 방지합니..

728x90