프론트엔드

오늘 속도개선 결과물을 시연해보다가 내 컴퓨터에서는 잘 작동되는데, 다른 분이 테스트 할 때는 오류가 생기는 것을 발견했다. 그 이유는 내 환경은 네트워크 속도가 빨라서 api 응답이 빨리와서 문제가 없었지만, 다른 분의 컴퓨터에서는 api 응답 속도가 느려 api응답이 오기도 전에 데이터가 없는 채로 이미 먼저 렌더 되버렸기 때문이다. 이를 해결하기 위해 Network 패널의 Throttling 을 조절하며 네트워크 연결이 느릴 때를 재연하며 디버깅해나갔다. - Name : 다운로드 속도, 업로드 속도, RTT (라운드트립 시간) ※ RTT : 지연속도, (다운로드 요청하는 동안에 걸리는) 지연 시간인 것임. Fast 3G: 1.6mb/s, 750kb/s, 562.5ms Slow 3G: 500kb/s,..

History api란 : 브라우저의 세션 히스토리에 대한 접근, 조작 기능 기능을 제공하는 것 ✅ history.back() , history.forward(), history.go(step: integer) : 히스토리 스택을 조작할 수 있다. 1. history.back() : 방문 기록의 뒤로 이동하기. 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같다. history.back() 2. history.forward() : 방문 기록의 앞으로 이동하기. 사용자가 브라우저 도구 모음의 앞으로 가기 버튼을 누른 것과 같다. history.forward() 3. history.go(step: integer) : 세션 기록에서 현재 페이지의 위치를 기준으로, 상대적인 거리에 위치한 특정 지점..

✅ router-link spa 구현 가능: 브라우저를 새로고침 하지 않고도 다른 페이지로 이동됨.: 주소 이동시 페이지 전체를 새로 로드하는게 아니라,  가상돔을 통해 바뀐 부분을 확인해서 그 부분만 서버로부터 받아와 리렌더링 하게 된다.사용: app 내부 페이지 간의 전환을 관리하는데 사용하는게 좋음구현 예제: 처음 렌더시에 html,css,js파일을 다 다운한 뒤 '/list' 페이지로 바뀌었을 땐 다른 부분만 새로 받아와 렌더해준다. ✅ a 태그spa 구현 불가: 주소가 이동되면 페이지 전체를 다시 불러와서 처음부터 다시 렌더링 해야한다.사용: 외부 URL로 이동시 사용하는게 좋음 구현 예제: 처음 렌더시에 html,css,js파일을 다 다운, '/test' 페이지로 바뀌었을 때도 아예 새로 ht..

✅ Mixin mixin을 사용하면 mixin의 모든 옵션이 → mixin을 사용하는 컴포넌트에 혼합됨 (mixin의 script에서 사용되는 모든 옵션 다 혼합됨! import, created...등등) mixin과 사용하는 컴포넌트에 중첩되는 옵션이 있으면 : 컴포넌트의 옵션이 우선하여 적용된다. mixin에 정의된 함수(Hooks)가 컴포넌트에 정의된 함수보다 먼저 호출된다. // MyMixin.js export default { created() { console.log("My mixin"); }, }; // Component.vue // 결과 : My mixin , component1 ✅ 전역 Mixin - mixin을 전역으로 사용할 수 있다. - 전역 mixin은 사용자 지정 옵션 처리에만!..

✅ 문제 center값이 바뀌면 자식 컴포넌트에서 이벤트 버스를 받아 로직을 처리해야 하는데 자식 컴포넌트에서 이벤트 버스가 받아지지 않았다. - Parent.vue watch{ center(){ this.$bus.$emit("eventBus") } } - Childrun.vue created: async function() { ... await this.method(); this.$bus.$on("eventBus", this.someMethod); ... }, ✅ 이유 : vue에서 이벤트 버스를 할 때 이벤트 바인딩을 늦게하기 때문에! await는 프로미스가 resolve 될 때 까진 그 뒤의 로직은 실행되지 않고 대기중이다. 때문에 Childrun 컴포넌트가 create 될 때 await 뒤에 ev..

JavaScript에서 성능 측정을 위해 사용되는 메서드입니다. 이 메서드를 사용하면 코드의 실행 시간을 측정할 수 있습니다. performance.now()는 현재 시간을 나타내는 타임스탬프를 반환하며, 밀리초 단위로 정밀도가 높습니다. 예제 // 성능 측정 시작 var startTime = performance.now(); // 측정하려는 작업(함수실행) function() // 성능 측정 종료 var endTime = performance.now(); // 실행 시간 계산 (밀리초 단위) var duration = endTime - startTime; console.log("작업 소요 시간: " + duration + "밀리초"); 위 예제에서는 performance.now() 를 사용하여 작업의 ..

✅ data함수가 일반 function 일 때 vue에서 data함수를 정의할 때 this가 vue 인스턴스 객체를 가리키는게 중요함. 일반적인 function함수를 사용하면 this는 new Vue()에서 new 키워드로 생성한 인스턴스 객체인 "vue인스턴스 객체"를 가리키게 됨. data() { console.log("this", this); // VueComponent return { list: [{},{}] } }; ✅ data함수가 arrow function 일 때 THIS arrow함수 사용하면 this는 상위 스코프의 this를 가리키게 됨. 따라서 vue인스턴스 객체가 있는 상위 스코프(전역 객체)를 가리키게 되어 undefined가 나오는 것임. data: () => { console...

문제 https://school.programmers.co.kr/learn/courses/30/lessons/131124 1차 시도 // 1. 멤버와 리뷰 테이블을 id 기준으로 조인 하는데 이때, 유형별로 그룹바이로 묶어 리뷰를 카운팅하고, 최대 리뷰쓴 사람 1명의 id만 추출 // 2. 이후 REST_REVIEW 테이블에서 추출된 id값과 같은 데이터를 조회 // 3. name,text,date조회 후 정렬 select MEMBER_NAME, REVIEW_TEXT, DATE_FORMAT(REVIEW_DATE, "%Y-%m-%d") AS REVIEW_DATE from REST_REVIEW , (select P.MEMBER_NAME, R.MEMBER_ID from MEMBER_PROFILE P join ..

v-model은 input, select, textarea에서 사용할 수 있다. input 이벤트: input type="text", textarea change 이벤트 : input type="checkbox", input type="radio", select default modifiers v.model.lazy- input 요소에서 포커스가 빠지면 data가 업데이트 된다. v.model.number - input에 입력된 값을 숫자형으로 바꿔준다. v.model.trim - js의 string의 trim 메서드와 같다. 입력값 앞뒤 공백을 제거해준다. checkbox에서의 true-value, false-value checkbox의 v-model로 바인딩한 data가 Boolean 형태이기 떄문..

prop을 자식 컴포넌트에 넘겨주는 것 처럼, 어떤 틀에 "template 자체"를 넘겨서 자식 컴포넌트에서 렌더할 수 있음. HTML 삽입 미리보기할 수 없는 소스