'FE' 카테고리의 글 목록

FE

[Vue] devServer 구성하고 proxy 설정하기

2024.09.06

로컬에서 실행시킬 때 간혹 안 돌아갈 때가 있었다. (400번대 에러)그럴 때마다 항상 요청하는 url로 잘 날아가고 있는지, 클라이언트와 서버 사이의 연결이 잘 설정되어있는지 확인해야한다.vue.config.js는 Webpack 설정을 확장하거나 사용자 정의하는 데 사용되는 구성 파일이다.🔔 vue.config.js가 필요한 경우 - 기본 설정을 넘어 프로젝트에 특정 요구사항이 있을 때- 개발 서버 설정을 변경하거나 webpack 플러그인을 추가할 때- API 프록시를 설정하거나 외부 CSS/JS 라이브러리를 추가할 때 위와 같이 해당 파일을 통해 기본적인 설정을 변경하거나 새로운 기능을 추가할 수 있다. 이 파일에서 설정할 수 있는 옵션들은 다음과 같다. 🔹 주요 설정 옵션들 publicPat..

FE

[FE] 비동기

2024.06.17

콜백과 프로미스 객체calback 함수 하나의 데이터처럼 사용되는 함수다른 함수에 인수로 전달되어 해당 함수의 내부에서 호출되는 함수기본적인 실행의 다음 순서를 보장하는 장점 가지고 있음사용패턴 불편 (콜백지옥)Promise비동기 작업을 처리하기 위한 객체 async-awaitAsync-await함수 앞에 async 붙이면 항상 promise 반환 await 키워드는 async 함수 안에서만 사용 가능하며 promise가 해결될 때까지 기다림 예외처리 (then, catch, finally)then작업이 성공했을 때 실행될 함수 설정catch작업이 실패했을 때 실행될 함수 설정finally최종적으로 제대로 동작하던 혹은 거부되던 상관없이 가장 마지막에 실행할 내용 설정try-catchtry { //..

FE

[FE] Vuex

2024.06.17

Vue.js 애플리케이션에서 상태 관리를 효율적으로 하기 위해 사용되는 중앙 집중식 상태 분리 패턴 및 라이브러리 ❓사용하는 이유 중앙 집중식 상태 관리 여러 컴포넌트 간에 공유되는 상태를 보다 쉽게 관리하고 상태 흐름 예측 가능 단방향 데이터 흐름상태(state)가 변경될 때마다 특정한 방법(mutations)을 통해서만 상태 변경하도록 강제하여 애플리케이션의 상태 변경을 추적하고 디버깅하기 쉽게 만듦상태 예측 가능성상태를 변경할 때 항상 명식적인 변이(mutations)을 통해서만 변경 가능 코드의 모듈화 가독성 높이고 각 모듈을 독립적으로 개발 및 테스트 복잡한 상태 관리를 간단하게컴포넌트 간에 상태 공유 또는 비동기 작업(API 호출)을 관리하는 것의 복잡성 감소 Vuex Store 구성 mo..

FE

[FE] Vue2 문법 정리 1

2024.06.11

Vue 문법 정리 1Vue2 기준으로 정리 1. 인스턴스와 라이프사이클 ✴️ 인스턴스 생성 // main.jsimport Vue from 'vue';import App from './App.vue';new Vue({ render: h => h(App),}).$mount('#app'); 생성된 인스턴스는 애플리케이션의 주요 구성 요소로 데이터와 메서드를 관리하고 DOM과의 상호작용 처리 ✳️ 주요 속성 및 옵션 데이터 (Data) : Vue 인스턴스의 데이터는 data 옵션을 통해 정의되며 반응성을 가짐 👉 데이터가 변경되면 DOM이 자동으로 업데이트됨new Vue({ el: '#app', data: { message: 'Hello, Vue!' }}); 메서드 (Methods) : Vue..

FE

[FE] Vue 개념 및 설치

2024.06.10

Vue란 프론트엔드 개발도구 중 하나 가벼운 크기와 직관적인 문법👉 Virtual DOM을 사용하여 변경된 부분만 업데이트하고 필요한 최소한의 DOM 조작을 수행하여 빠른 렌더링 속도와 효율적인 업데이트 관리 제공 자체적으로 상태 관리 도구인 Vue jsx 내장👉 애플리케이션의 상태 관리를 위한 공식 상태 관리 라이브러리 페이지 전환을 위한 기능인 Vue js Router 제공 👉 페이지 간의 전환과 URL 기반으로 뷰를 동적으로 로딩하고 관리기존 html과 유사한 Template 형식 제공개발 방식의 단순함👉 동적인 표시 위해 v-if 문법만 제공 반응성 (Reactivity)데이터 갱신하면 화면도 바뀜 🛠️ Vue 도구패키지 관리자 : npm, yarn Vue CLI : 신속한 Vue.js ..

[Vue] devServer 구성하고 proxy 설정하기

[FE] 비동기

[FE] Vuex

[FE] Vue2 문법 정리 1

[FE] Vue 개념 및 설치

티스토리툴바