전체 글

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/131532 ✅풀이 [나의 풀이] 1. 두 테이블을 USER_ID 기준으로 조인한 후, 성별이 null이 아닌 것만 조회 2. 이후 SALES_DATE를 년 기준으로, 같다면 월기준으로, 같다면 성별 기준으로 그룹화하여 중복 삭제하면서 3. USER_ID를 카운트 한다. 이때 같은 년,월에 중복되는 USER_ID가 있다면 카운트 제외 4. 이후 년,원,성별 순으로 카운트 SELECT YEAR(O.SALES_DATE) as YEAR, MONTH(O.SALES_DATE) as MONTH , U.GENDER, count(distinct U.USER_ID ) as USERS from USER_INFO ..

✅ 문제 https://school.programmers.co.kr/learn/courses/30/lessons/62284 ✅ 풀이 [나의 풀이] SubQuery - 인라인뷰 방식(from절에 서브쿼리 사용) 1. NAME이 yogurt인 것만 조회한 테이블(Y)을 만든다. 2. NAME이 milk인 것만 조회한 테이블(M)을 만든다. 3. 두 테이블 간에 card_id가 같은 것을 조건으로 조인한다. 4. 조인된 테이블에서 cart_id값 조회 => 인라인뷰로 테이블을 두개를 따로 만들었는데, 하나의 서브쿼리로도 충분히 계산할 수 있기 때문에 비효율적인 코드라 생각됨. select M.CART_ID from (SELECT * from CART_PRODUCTS where NAME = 'Yogurt') Y..

sql문에서 변수를 크게 3가지로 나눌 수 있다. 1. 사용자 정의 변수 2. 지역 변수 3.시스템 변수 (아직 사용자 정의 변수만 공부함.) [Mysql] 사용자 정의 변수 : Mysql워크벤치가 종료되면 변수 선언이 없어짐. 변수는 임시로 사용되는 될 뿐임. 1. 기본 형태 SET @변수명 = 변수값; -- 변수 선업 SELECT @변수명; -- 변수 사용 2. 예제 -- 변수 선언 set @var1 = 5; set @var2 = 4.25; -- 변수 사용 select @var1 -- 5; select @var1 + @var2; -- 9.250000000000000000000000000000; -- 변수 선언 set @txt = '가수 이름은? : '; set @height = 165; -- 변수 사..