programming (118) 썸네일형 리스트형 REST Service에 대하여 REST API란? Representational State Transfer 웹을 좀 더 효율적으로 사용하기 위한 아키텍처 REST 구성 - 자원(URI) - 행위(METHOD) - 표현 REST 특징 ( 아직 모호한 개념 ) 1) uniform interface : URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일 2) stateless (상태없음) : 작업을 위한 상태가 따로 없음. API는 들어오는 요청만 단순히 처리. 3) Cacheable(캐시가능): HTTP가 가진 캐싱 기능이 적용됨, HTTP프로토콜에서 사용하는 헤더(Last-modifed, E-tag)를 이용하여 캐싱 구현 가능 4) Self-descriptiveness(자체 표현 구조) : RE.. [Vue.js] #11 네비게이션 바(NavBar) 만들기 [specific concept] 1. 조건에 따라 class 값 추가/제거 - isOpened라는 boolean 변수의 값에 따라 open 추가/없음 토글 됨 - @click 속성으로 toggleMenu 함수 실행됨 [예제 코드] 1. /componets/NavBar.vue 만들기 HOME About Users About Users 2. App.vue 템플릿 상단 NavBar 추가하기 [실행결과] [Vue.js] #10 vue-router 데이터 전달하기 (params, props) 1. main.js props로 받겠다 true 설정 import { createApp } from 'vue' import { createWebHistory, createRouter } from 'vue-router'; import App from './App.vue' // router 쓰일 Component import Home from './views/Home.vue'; import About from './views/About.vue'; import User from './views/User.vue'; import UserDetail from './views/UserDetail.vue'; //routes 정하기 const routes = [ { path : '/', component: Home, n.. [Vue.js] #9 vue-router 사용하여 메뉴 navigation 링크만들기 1. view 폴더생성 2. 페이지 생성(About.vue, Home.vue, User.vue, UserDetail.vue) // About.vue 내용 (Home, User, UserDetail 모두 동일) About 3. main.js : routing 내용 설정 import { createApp } from 'vue'; import { createWebHistory, createRouter } from 'vue-router'; import App from './App.vue' // router 쓰일 Component import Home from './views/Home.vue'; import About from './views/About.vue'; import User from './views/U.. [Javascript] Callback 과 Promise 와 async-await 폴더구조 data.json 파일 내용 { "hello" : "world" } package.json 만드는 방법 npm init --yes [index.js 작성] 파일을 읽는 javascript 파일 시스템 모듈 import fs from 'fs' // 프로미스를 리턴 import fsPromise from 'fs/promises' 콜백함수로 표현 import fs from 'fs'; fs.readFile('data.json', 'utf-8', (err, data) => { if(err) { console.log(err) return } console.log("callback", data) }); Promise로 표현 import fsPromise from 'fs/promises' fsPromise.r.. [Vue.js] #8 css에서 vue 제공 변수 사용하기 computed 안에서 지정한 color 값을 css에서 받아와서 표현하기 그냥 조건에 따라 color 값을 바꾸고 싶을 때 v-bind를 사용한다 [예시코드] {{ name }} {{ birth }} {{ compareBirth }} {{ compareBirth }} [실행결과] [Vue.js] #7 computed, methods 차이점 1. computed : 뷰에서 제공 - 캐시가 가능함 - 호출시 이전에 계산했던 것을 사용 - console.log 찍힌 횟수를 확인해보자 - 호출시 compareBirth 형태로 호출 {{ name }} {{ birth }} {{ compareBirth }} {{ compareBirth }} [실행결과 (computed)] 2. methods : 뷰에서 제공 - 캐시가 안됨 - 호출시 매번 연산 - console.log 찍힌 횟수를 확인해보자 - 호출시 compareBirth() 형태로 호출 {{ name }} {{ birth }} {{ compareBirth() }} {{ compareBirth() }} [실행결과(methods)] HTTP 헤더 총정리 헤더란? HTTP 통신의 일부 [공통 헤더] 요청 과 응답에 모두 사용되는 헤더, Content 시리즈는 엔티티 헤더라고 불린다. (예시 사진에 안나와 있는 헤더도 있음) Date : HTTP 메시지가 만들어진 시각, 자동으로 생성됨 Connection : HTTP/2 -> 없음, HTTP/1.1 -> keep-alive Cache-Control : 캐시 관련 헤더***********(매우 중요 - 웹성능을 최대로 높이기위해, 원하는 시점에 캐싱을 하고, 지우고가 중요, 불필요한 통신을 하지 않도록), 아래 옵션들 속성해서 사용 가능 no-store : 아무것도 캐싱하지 않음, 저장하지 않음 no-cache : 모든 캐시를 쓰기 전에 서버에 이 캐시 써도 돼? 물어봐라 라는 뜻 = max-age:0으로 .. [Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기 1. 프로젝트 내에 components/Card.vue 파일 생성 # components/Card.vue {{ name }} {{ description }} 2. 프로젝트 내에 components/CardList.vue 파일 생성 # components/CardList.vue 3. 최상위 컴포넌트 App.vue 수정 # App.vue 4. 원하는 이미지 파일 넣기(loki.png, thor.png) /public 폴더 밑에 이미지 파일 추가 5. 최종 파일트리 6. dev 서버 돌리기 npm run dev [실행 결과] [Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기 https://vitejs-kr.github.io/guide/ 시작하기 | Vite 시작하기 들어가기 전에 Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 vitejs-kr.github.io vite로 시작하기 (Vue 에서 권장) $ npm create vite npx: 6개의 패키지를 3.697초만에 설치했습니다. √ Project name: ... Vue-Study √ Package name: ... vue-study √ Select a framework: » vue √ Select a variant: » vue Scaffolding project in C:.. 이전 1 ··· 5 6 7 8 9 10 11 12 다음
