전체 글

Postman - Mock Server 사용법Mock 데이터를 받아와서 프론트엔드 통신 테스트 할 때 사용 1. Create workspace서버를 만들어줄 workspace를 만든다. 2. workspace 이름 지정 후 접근 권한 설정 -> Create일단 나만 쓸 거라서 Only me로 했다.  3. 사이드바에 Mock Server 등록왼쪽 맨 아래 버튼 누르기 ->  Mock servers 토글 켜기  4. Mock Server 만들기Mock servers 클릭 -> Create mock server   Request URL에 데이터를 받아올 주소 입력 -> Next  Mock Server 이름 지정 후 Create Mock Server  5. request - example 생성Collectio..

Pinia상태 관리 라이브러리https://pinia.vuejs.kr/ Pinia | The intuitive store for Vue.jsIntuitive, type safe, light and flexible Store for Vuepinia.vuejs.org  여러 컴포넌트에서 동일한 값을 가져다 써야 할 때 필요한 곳에서 import를 해서 쓴다. 여러 곳에서 많이 쓴다면 상태를 쓰는 컴포넌트마다 import를 해줘야 하기 때문에보통 main.js에서 import 한 후 사용한다. Pinia 설치npm insatll pinia  Pinia 사용import { createPinia } from "pinia";const pinia = createPinia(); main.jsimport { create..

Props부모가 자식한테 넘겨주는 데이터Emit자식이 부모한테 넘겨주는 데이터 PropsdefineProps 를 사용해서 자식 컴포넌트와 데이터를 주고 받는다. App.vue   Parents.vue 부모 컴포넌트 부모가 작성한 메시지: {{ toChild }}   Child.vue 자식 컴포넌트 부모로부터 받은 메시지: {{ message }}    반복문을 통해 데이터 전달Parents.vue 부모 컴포넌트   Child.vue 자식 컴포넌트 {{ product.name }} {{ product.price }}  EmitdefineEmits 를 통해 데이터를 주고 받는다. Parents.vue 부모 컴포넌트 자식에게 전달받은 메시지: {{ fromChild }} ..

12.16  ~ 12.20이번 주는 유독 피곤했던 것 같다. 한 달이 되니까 몸이 슬슬 한계가 와서 힘들고 늦잠도 많이 자고... 체력적으로 힘들었던 한 주였다. 그리고 요즘 정말 춥지 않나요넘 추워서 이번 주부터 롱패딩과 목도리를 꺼냈답니다..🧣 다들 감기 조심 !!이번 주에 배운 내용 [JS] 자바스크립트란? [Web] 웹 스토리지 / 쿠키 [JS] 자바스크립트 기본 문법 [Web] 웹 브라우저 권한 설정 (알림, 비디오) [JS] DOM이란? / DOM 요소 다루기 [Vue] Vue.js란? / Vue.js 특징 / Vue.js 프로젝트 생성 (Vite) [JS] 배열 다루기 [Vue] VSCode에서 Vue.js 템플릿 설정 (Vue.js Snippet) [JS] 비동기 통신 / ..

ref, reactive?와 연동되어 JS의 값이 바뀌면 바로 에서 보여지는 내용도 바뀌는 변수= 데이터 바인딩 (JS 코드와 HTML 태그를 연결해주는 것) ref : 숫자나 문자열 같은 기본형 변수reactive : 객체나 배열 같은 참조형 변수 ref 기본 타입의 값을 이용해  반응성을 가진 데이터를 생성할 때 사용 ref 변수 생성import { ref } from 'vue';const message = ref('안녕하세요');const x = ref(10);  ref 값 변경값을 변경하는 함수를 만들어준다.const x = ref(10);const changeValue = () => { x.value = x.value + 1;} 버튼을 클릭 시 함수가 실행될 수 있게 등록해준다. {{ mess..

Vue Router란?https://router.vuejs.org/ Vue Router | The official Router for Vue.jsThe official Router for Vue.jsrouter.vuejs.org vue.js 공식 라우터 라이브러리SPA를 손쉽게 만들 수 있도록 도와준다. Vue Router가 제공하는 기능컴포넌트 기반의 라우팅을 구현할 수 있다.Vue.js의 전환 효과(Transition)를 적용할 수 있다.Vue Router 사용vue router 설치npm install vue-router@4  router js 파일 생성src > router 폴더 생성 > index.js 파일 생성 routes 배열 안에 원하는 경로와 해당 경로에 띄울 컴포넌트를 넣어준다.// r..

자주 사용하는 snippet을 설정하기 위해 검색해서 찾아보았다. 1. 사용할 템플릿 만들기script를 위로 올려서 사용할 것이기 때문에 script를 위로 올렸다.   2. vue.json 수정Ctrl + Shift + P 로 명령창을 열어서 Code Snippet 검색 Configure Snippets 선택 후 vue 검색 후 엔터 위에서 만든 템플릿을 문자열로 변환해야 한다.개행은 \n, 탭은 \t를 넣어준다.\n\n\n\t\n\n\n{ "vue-init": { "prefix": "vue-init", "body": [ "\n\n\n\t\n\n\n" ], "description": "vue.js init snippet" ..

Vue.js란?웹 페이지를 만들기 위한 자바스크립트 기반 프론트엔드 프레임워크React의 가상 DOM을 활용한 성능 최적화의 장점과 Angular의 데이터 바인딩을 쉽게 처리할 수 있는 템플릿 기능의 장점을 따온 프레임워크Vue.js의 특징선언적 렌더링(Declarative Rendering)Vue는 표준 HTML을 템플릿 문법으로 확장하여 JS 상태(State)를 기반으로 화면에 출력될 HTML 을 선언적으로 확장할 수 있다.반응성Vue는 JS 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행가상 DOM이란?일반적인 DOM 하나의 태그를 변경하는 경우 브라우저는 parsing -> style -> layout -> paint -> composite의..

웹 브라우저에서 알림 기능을 지원하는지 확인if('Notification' in window) { console.log('지원함');} else { console.log('지원 안 함함')}알림 권한 요청// 알림 기능을 브라우저에서 지원하면, 권한을 요청Notification.requestPermission().then(permission => {console.log(permission);}) 알림 띄우기버튼 알림 내용 수정 (이미지 띄우기)const noti = document.querySelector('#noti');noti.addEventListener('click', () => { console.log('실행'); const notification = new Notification('제목..

웹에서의 데이터 저장데이터를 서버가 아닌 클라이언트에 저장할 수 있다. 보통 로컬 스토리지, 세션 스토리지, 쿠키를 사용하고 가끔 Service workers를 사용한다.로컬 스토리지와 세션 스토리지의 차이는 서비스의 데이터 크기 차이고,쿠키는 보안 설정 같은 것을 할 수 있다. 개발자 도구 -> 애플리케이션 에서 확인할 수 있다. 로컬 스토리지지속적으로 필요한 데이터를 저장할 때 사용한다.백엔드 서버와 상관 없고, 브라우저를 껐다 켜도 유지된다. 키와 값으로 저장한다.window.localStorage.key01 = "value01";버튼 눌러서 저장되게 하기로컬 스토리지 저장 세션 스토리지일시적으로 큰 데이터를 저장할 때 사용한다.백엔드 서버와 상관 없고, 브라우저 껐다 키면 초기화된다.세션 스토리지..