json-server모듈로도 쓸 수 있고 독자 실행으로도 쓸 수 있음Sort에서 -쓰면 내림차순예) http://localhost:3000/todos?_sort=-id페이지네이션 지원http://localhost:3000/todos?_sort=-id&_page=1&_per_page=2https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1..
전체 글
우당탕탕 개발 기록번들링WebPack, Vite웹팩은 초기 로딩 시간이 좀 필요한 단점이 있음히든파일?=> 리눅스/맥에서는 .~~로 쓰면 파일이 안 보이는 히든파일임프로젝트 골격App.vue → 엔트리 포인트, 컴포넌트package.json ⇒. “type: module” ⇒ esmodule쓰겠다vite.config.js '@': fileURLToPath(new URL('./src', import.meta.url)) => at 의미jsconfig.json"paths": { "@/*": ["./src/*"] }package-lock.json디렉토리 아니고 그냥 파일이 파일이 package.json에 의존하고 있음App.vuescript setupimport 할 때는 파스칼 케이스만 가능사용자 정의파스칼, 케밥 케이스 모두 ..
HTML 스타일 적용 방법태그 직접 기술 ⇒ 인라인 스타일스타일 태그 ()디폴트 값 정의 (xxx.css )DOM 처리에서는 스타일 코드를 el.style.속성명 ~~~ 이런 식으로 변환Vue.js에서 HTML 스타일 적용 방법v-bind:style스타일 변경되는 경우데이터 속성에 JS 객체로 작성도 쓰긴 함(스타일이 딱히 바뀌지 않는다면)@이벤트.stop ⇒ stopPropagation@이벤트.prevent ⇒ preventEvent방법 1코드가 상대적으로 길어짐스타일 많아지면 관리에 유리(중략) data() { return { // 초기 스타일 style1: { backgroundColor: 'aqua', ..
이벤트인라인 이벤트 처리v-on 디렉티브v-on:[이벤트 이름]="표현식"@[이벤트 이름]="표현식"(이 이벤트가 발생했을 때 ~해라 라는 의미)이벤트 객체가 필요한 경우예시 ) @click="test($event)”여기서의 test 함수는 methods에 정의이벤트 핸들러 메서드인라인 이벤트 핸들러에서의 this도 vue 인스턴스 의미이벤트 객체preventDefault() : 기본 이벤트 자동 실행 금지stopPropagation() : 이벤트 전파 중단기본 이벤트@이벤트.preventevent.preventDefault() 호출 효과자주 쓰는 예시 : (e) ⇒ e.target.value 대신 currenet.target.value 해도 됨!이벤트 전파버블링 전파 차단할 때 가장 많이 쓰는 .sto..
Vue 인스턴스Vue.createApp()으로 만든 객체전체 컴포넌트 트리는 애플리케이션 인스턴스 마운트 할 때 렌더링data 옵션컴포넌트가 관리 추적 해야 할 데이터 등록할 때 사용리턴 객체가 Proxy로 래핑됨반드시 객체 리턴하는 함수로 정의(Vue3부터)계산된 속성속성 이름은 함수명HTML 템플릿 출력용 속성data: function{}이 같은 레벨에 computed 옵션에 함수 객체 등록아래에서 this.num의 this는 해당 컴포넌트의 인스턴스가 된다.this.num은 프록시 객체업데이트는 함수 내에 있는 프록시 객체에 의존하고 있는 데이터에 변화가 생기면 다시 계산된다.data() { return { num: 0, }; co..
📌 Stream (스트림)🔹 백엔드에서의 Stream순환 가능한 데이터 구조로, 각각의 요소에 대한 데이터를 처리하는 역할IntelliJ Debugger에서 확인 가능.종료 연산(Terminal Operation)을 호출해야 최종적으로 실행됨.예: .forEach(), .collect(), .reduce()🔹 프론트엔드에서의 Stream데이터를 여러 개의 작은 청크(Chunk)로 쪼개서 전송하는 방식.예) 1시간짜리 동영상을 한 번에 다운로드하는 것이 아니라, 청크 단위로 데이터 받아서 실시간 재생🔹 버퍼(Buffer) vs 캐시(Cache)버퍼 (Buffer)나중에 사용할 데이터를 미리 받아놓는 구조 (예: 스트리밍에서 버퍼링) / 미래 지향적 개념캐시 (Cache)과거에 사용한 데이터를 저장해..
Vue 디렉티브(지시자)뷰에게 지시를 내리는 것주로 v-로 시작HTML에 속성으로 표현됨텍스트 출력innerHTML(태그로 동작), textContext 등이 속성이 있었는데, 이런 역할을 하는 뷰의 디렉티브들.v-text : textContent 역할(텍스트 그대로 출력)v-html : innerHTML 역할(태그가 적용됨)표준속성(title, width 이런 거)의 모든 값은 문자열v-bind 디렉티브요소의 속성을 바인딩문자열이 아닌 js 표현식으로 처리태그명 : 속성=”표현식” ⇒ 이 약식 표현을 많이 씀일반 속성에 사용특징단방향!⭐⭐UI 갱신용으로만 사용함즉, 뷰모델 변화가 화면에는 반영되지만 반대로 화면의 입력값이 뷰모델에는 반영되지 않음v-model 디렉티브양방향 데이터 바인딩주로 form 요..
Proxy내가 알고 있는 프록시는 프록시 서버인데,, Vue.js의 프록시도 이건가? 해서 찾아보니 프록시 적용하는 법이 나오긴 했다.🔽- FE와 BE API 서버가 같은 호스트에서 돌아가지 않고 있다면 API 요청 시 Proxy가 필요하다.- Vue.js에서 프록시를 사용하려면 vue.config.js에서 아래와 같이 옵션을 설정해주면 된다.module.exports = { devServer: { proxy: 'http://localhost:4000' }} 하지만 수업에서 배운 건 Proxy 객체!그래서 관련된 자료를 다시 찾아보니 ES6에서 도입된 개념이다. Proxy 객체란?다른 객체에 대한 proxy를 생성해주는 기능을 한다.그럼 proxy는 뭐냐? 해당 객체의 기본 작동들을 가로채거..
MVVM 패턴안드로이드 개발을 하며 배우고 적용했던 MVVM 패턴!하지만 벌써 수년 전이라 기억이 잘 나지 않았는데 Vue.js를 공부하며 다시 찾아보았다. Model-View-ViewModel 구조로 이루어져 있으며,비즈니스 로직과 UI 분리를 위해 설계된 패턴이다.아무래도 앱 크기가 커지고 확장될수록 유지보수하기 어려워지기 때문에 나왔다고 한다.이때View는 HTML, CSS로 작성된 유저 인터페이스와 관련된 부분View Model은 이런 view의 데이터 흐름이나 논리 등 상태 및 연산과 관련된 부분Model은 도메인에 특화된 데이터를 다루는 부분이다. 이렇게 되면뷰는 뷰모델에 대해 알고 뷰모델도 모델에 대해서 알고 있지만거꾸로 모델은 뷰모델을 모르고, 뷰모델은 뷰에 대해 모른다.즉, 뷰모델은 뷰..
🍊 구름톤 기록 시리즈🍊🍊 구름톤 13기 참가 후기 - (1) 지원서 작성 팁🍊 구름톤 13기 참가 후기 2 - 1일 차 특강 | 숙소 정보 구름톤 일정은 대략 이렇습니다 🔽 첫날은 사실상 해커톤보다는 교육과 아이스브레이킹입니다.1일차는 구름스퀘어 in 제주에서 이루어졌는데 제주시청과 가까운 곳이고 조금 외진 곳에 있어요. 저는 교육장에서 걸어서 25분 정도 걸리는 곳에 숙소를 잡았었는데, 사실 날씨를 보고 제주 기온이 높길래 봄날씨(?) 즐기며 산책할 겸 걸어가면 좋겠다~라는 생각이었어요. 하지만 제주는 기온이 높아도 정말 칼.바.람.이 붑니다... 얼어붙을 것 같은 쌩쌩 부는 바람을 생각하면 다음에는 훨씬 가까운 곳에 잡을 것 같습니다.. 그리고 슬랙으로 운영진 측에서 추천해 준 라마다 시티..