✅ Number.parseInt(string, radix) 1. 문자열을 radix에 해당하는 "진수로 읽어서" → 10진법인 숫자형으로 바꿈. 예제코드1 ) parseInt("10", 2); // 2 - 파라미터 "10"을 2진법으로 읽어서, 10진법으로 변환한 값을 리턴함. parseInt("0021", 3); // 7 - 파라미터 "0021"을 3진법으로 읽어서, 10진법으로 변환한 값을 리턴하였습니다. 예제코드2 ) function solution(idx) { return parseInt(idx, 10); } // 실행코드 console.log(solution('1234')); // 1234 (문자 "1234"를 10진법으로 읽어서, 10진법인 정수로 바꿈) console.log(solution(..
전체 글
오늘 속도개선 결과물을 시연해보다가 내 컴퓨터에서는 잘 작동되는데, 다른 분이 테스트 할 때는 오류가 생기는 것을 발견했다. 그 이유는 내 환경은 네트워크 속도가 빨라서 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/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 ..