Frontend(7)
-
[Vue.js] axios를 사용한 HTTP 통신, CORS
REST APIURI(자원)와 HTTP 메소드(행위)를 이용해 객체화 된 서비스에 접근하는 것클라이언트의 상태를 저장하지 않으며, 종류에 제한을 두지 않음GET, POST, PUT, DELETE, PATCH, ...axiosPromise 기반의 HTTP 클라이언트 자바스크립트 라이브러리// GET 요청axios.get(url[, config])// POST 요청axios.post(url[, data[, config]])// PUT 요청axios.put(url[, data[, config]])// DELETE 요청axios.delete(url[, config])// PATCH 요청axios.patch(url[, data[, config]])...응답 스키마{ // `data`는 서버가 제공하는 '객체 형..
2025.04.02 -
[Vue.js] Composition API
setup() 메서드data, methods, computed 옵션이 사라짐초기화 작업을 setup()에서 정의beforeCreate,created 단계에서 setup() 메서드가 호출반응성을 가진 상태 데이터, 계싼된 속성, 메서드, 생명주기 훅을 작성객체 형태로 리턴 -> 작성한 데이터나 메서드를 템플릿에서 이용 숫자: {{ cnt }}반응성을 가진 상태 데이터ref() 함수를 이용한 상태 데이터 생성기본 타입의 값을 이용해 반응성을 가진 참조형 데이터 생성스크립트에선 x.value로 접근해야함 (.value를 사용하지 않고 바로 값을 대입하면 반응성을 잃어버림)reactive() 를 이용한 상태배열, 객체 등 참조형에 대해 반응성을 가지도록 함computed()watch()Compostion AP..
2025.03.27 -
[Vue.js] 단일 파일 컴포넌트 - 스타일, 슬롯, provide-inject, 텔레포트
: 컴포넌트가 렌더링하는 요소에 대해 충돌 회피 : 모듈화, 객체화. 반드시 v-bind를 사용해서 연결슬롯부모 컴포넌트와 자식 컴포넌트 사이의 정보 교환 방법 -> props, 이벤트부모 컴포넌트에서 자식 컴포넌트로 템플릿 정보를 전달하는 방법 -> 슬롯명명된 슬롯화면 레아아웃 관리 목적으로 각 영역에 이름을 배정범위 슬롯부모 컴포넌트에서 템플릿에 데이터를 바인딩할 때 자식 컴포넌트의 데이터로 바인딩하는 경우전달된 데이터는 슬롯 템플릿 내부 범위에서만 사용동적 컴포넌트화면의 동일한 위치에 여러 컴포넌트를 표현해야하는 경우에 사용 요소를 템플릿에 작성provide, inject컴포넌트의 계층 구조가 복잡해지면 계층 구조를 따라 연속적으로 속성을 전달해야하는 문제 발생공용 데이터를 부모 컴포넌트(App)에..
2025.03.26 -
[Bootstrap]
부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크호출 코드 (BootStrap 5) Grid: 한 행을 12개의 컬럼으로 구분 -> 균등 분할하기 제일 편함행 정의 클래스.row컬럼 정의 클래스.col.col-sm-*.col-md-*...참고 자료:ITYL 6기 수업자료https://ko.wikipedia.org/wiki/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9_(%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)https://www.w3schools.com/bootstrap5/bootstrap_get_s..
2025.03.21 -
[Vue.js] 이벤트 처리
인라인 이벤트'v-on' 디렉티브로 설정v-on:[이벤트 이름]="표현식"@[이벤트 이름]="표현식"@click = "test($event)" (이벤트 객체가 필요한 경우)이벤트 전파의 3단계버블링의 차단event.stopPropagation() 호출관련 수식어.stop -> event.stopPropagation() 호출과 동일.capture.selfonce@이벤트.enter="..."@이벤트.exact = "..."학습일자 : 2025.03.20.참고자료 :ITYL 6기 수업자료https://99geo.tistory.com/42
2025.03.20 -
[Vue.js] 인스턴스
애플리케이션 인스턴스Vue.createApp() 으로 만든 객체전체 컴포넌트 트리는 인스턴스를 마운트할 때 렌더링data컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용반드시 객체를 리턴하고, Proxy로 래핑계산된 속성data, 속성 변경 시 함수 실행으로 캐싱된 값반응형 데이터를 포함하는 복잡한 논리의 경우에 사용 책을 가지고 있다: {{ publishedBooksMessage }}계산된 속성은 의존된 반응형을 자동으로 추적한다.그래서 `publishedBooksMessage`의 값이 `author.books`에 의존한다는 것을 알고 있으므로, `author.books`가 변경되면`publishedBooksMessage`를 바인딩해 의존하는 모든 것을 업데이트한다. 메서드인스턴스 직접 ..
2025.03.20