자바스크립트 - 다중 포인터 패턴 (Multiple Pointer)

다중 포인터 패턴이란? 다중 포인터 패턴은 위치에 해당하는 값 각 조건에 따라서 끝이나, 중간으로 이동하는 패턴입니다. 예시 1 오름 차순으로 정렬된 배열에서 합계가 0인 첫 번째 쌍 구하시오 풀이 1 function sumZero(arr){ for(let i = 0; i < arr.length; i++){ for(let j = i+1; j < arr.length; j++){ if(arr[i] + arr[j] === 0){ return [arr[i], arr[j]]; } } } } sumZero([-4,-3,-2,-1,0,1,2,5]) 이중 for문을 사용하여 해결할 수 있지만, 이렇게 사용하면 시간 복잡성이 O(n2)가 된다. 풀이 2 function sumZero(arr) { var left = 0;..

• format_list_bulleted Develop/자료구조 & 알고리즘
• · 2024. 4. 5.
• textsms

자바스크립트 - 빈도수 세기 패턴 anagram

문제 빈도수 세기- validAnagram 두 개의 문자열이 주어졌을 때, 두 번째 문자열이 첫 번째 문자열의 애너그램인지 확인하는 함수를 작성합니다. 애너그램은 다른 글자의 글자를 재배열하여 형성된 단어, 구 또는 이름입니다. (예시: cinema -> iceman) 그냥 풀이 1 function validAnagram(str1, str2){ if (str1.length !== str2.length) { return false; } str1 = str1.split('').sort((function compare(a, b) { if (a > b) return -1; if (a < b) return 1; return 0; })) str2 = str2.split('').sort((function compar..

• format_list_bulleted Develop/자료구조 & 알고리즘
• · 2024. 4. 2.
• textsms

자바스크립트 - 객체와 배열 성능 차이

자바스크립트에서 데이터를 저장할 수 있는 방법 중객체 또는 배열을 선언하여 여러 데이터를 저장할 수 있습니다.객체 (Object)var obj = { name: 'superman', age: 23, job: Front-end}; 객체는순서가 중요하지 않고 빠르게 데이터를 가져와야 할 경우에 주로 사용합니다.key & value 방식으로 데이터를 저장합니다.데이터 접근하여 값을 가져오는 속도가 빠릅니다.데이터 추가 / 삭제 빠릅니다.배열 (Array)var arr = ['superman', 'batman', 'pororo']; 배열은순서가 중요한 경우에 주로 사용합니다.배열에 값을 접근 할 때 빠릅니다.배열에 값을 추가 / 삭제할 때, 마지막 index에 추가 삭제하는 경우 빠릅니다.다만, 처음..

• format_list_bulleted Develop/자료구조 & 알고리즘
• · 2024. 3. 31.
• textsms

자바스크립트 - 함수 속도 측정할 수 있는 방법 console.time(), performance.now()

프론트엔드 개발에서 성능 향상은 중요한 요소 중에 하나 입니다. 성능 향상을 위해 자바스크립트 함수 속도를 측정 할 수 있는 방법에 대해서 알려드리겠습니다. console.time() console.time(); doSomething(); console.timeEnd(); // default: 8007.467041015625 ms console 의 static 메서드인 time을 이용해서 속도를 측정할 수 있습니다. time 메서드 호출 이후, timeEnd 메서드를 호출하기까지의 시간을 계산해서 콘솔에 표시 해줍니다. 간단히 속도를 콘솔에서 확인할 수 있는 장점이 있지만, 콘솔에서만 확인할 수 있고, 데이터로 처리 하거나, 다른 방법으로 확인할 수 없는 단점이 있습니다. performance.now()..

• format_list_bulleted Develop/JavaScript
• · 2024. 3. 31.
• textsms

Vue Slot 사용법

Slot 이란? Vue에는 Slot이라는 기능이 있습니다. 부모컴포넌트에서 자식 컴포넌트로 temlplate을 전달할 수 있는 기능입니다. Props를 이용해서 데이터를 전달할 수 있지만, template은 전달할 수 없고, Props 만을 이용해서 각각의 template를 전달하려면 코드가 복잡하고 알아보기 어렵게 됩니다. Slot를 이용하면 공통적인 template를 직관적으로 사용할 수 있습니다. Slot 사용법 Content BaseCard 내부에 작성한 Content 가 slot 태그 내부에 들어가게 됩니다. named Slot 사용법 두개의 template를 사용하고 싶을 때가 있습니다. 아래와 같은 방법으로 사용할 수 있습니다. Header Content header 가 들어갈 곳에는 slo..

• format_list_bulleted Develop/Vue
• · 2024. 3. 30.
• textsms

3•6•9년차 직장 생활 슬럼프 해결 방법

세상일 중에 직장생활은 가장 쉽기도 하지만, 직장 생활 도중에 많은 고비들이 있기도 합니다. 직장생활을 하다보면 슬럼프가 찾아올 때가 있습니다. 현재 하고 있는 일에 의미를 찾지 못하거나 무기력증에 빠지기도 합니다. 특히나 3년차, 6년차, 9년차에 슬럼프가 많이 찾아오고, 심지어 3개월 6개월 9개월에도 찾아 온다고 합니다. 3년차 슬럼프 직장 생활 3년차가 되었을 때, 대부분 사수분들과 선배들은 개발자들의 빠른 이직으로 대부분 퇴사를 하였습니다. 3년차가 되었을 때는 업무도 손에 익고, 제가 맡고 있는 부분에 대해서는 회사 내에서는 가장 이해도가 높다는 자신감도 있었습니다. 자신감이 였다면 좋겠지만 곧 과도한 자신감은 오만이였던 것 같습니다. 다른 선배가 와서 일을 이렇게 하라고 지시를 하거나, 알려..

• format_list_bulleted 일상/이야기
• · 2024. 3. 30.
• textsms

자바스크립트 - 원시형(primitive) 이란?

primitive이란? 자바스크립트의 원시형 타입이 있습니다. 객체도, 메서드도 속성을 가지지 않은 데이터 입니다 primitive 종류 총 7개가 있습니다. String Number Boolean null undefined 그리고 ES6 문법에서 Symbol ES 2020 문법 BigInt 가 추가 되었습니다. Symbol BigInt 예시 var str = 'superman'; console.log(str.length); // 8 str 변수에 superman 값을 담고 length 속성을 부르게 되면 8이 콘솔에 찍히게 됩니다. 문자열 데이터가 어떻게 length라는 속성을 가지게 되는건가요? length를 호출할 때, String 객체 래퍼를 만들고, 그 객체 length 속성 값을 가지고 오게 ..

• format_list_bulleted Develop/JavaScript
• · 2024. 3. 26.
• textsms

비트 코인이 21세기 최고의 발명품인 이유

1비트 가격이 1억을 달성하였습니다. 2018년에 2천만원, 2021년에 8천만원을 달성하였는데, 결국 1억을 달성하였습니다. 비트코인이란? 비트코인은 블록체인을 기술을 이용하여 만들어진 화폐 입니다. 탈중앙화 등의 특징이 있습니다. 구매력을 보존할 수 있는 최고의 자산은? 자산에는 여러가지 종류가 있습니다. 부동산, 금, 주식, 종이 화폐 등이 있습니다. 하지만 이 자산들은 자신의 구매력을 보존할 수 없거나 관리가 힘들다는 문제가 있습니다. 종이 화폐 종이 화폐의 주체는 정부 입니다. 정부 정책에 따라서 통화량을 늘리거나 줄이거나, 조절을 합니다. 이러한 과정에서 화폐 가치는 점점 떨어지게 되면서 구매력을 잃게 됩니다. 주식, 회사 회사의 성장은 정부 정책, 기술 트렌드의 변화에 밀접한 관련이 있습니다..

• format_list_bulleted 일상/재테크
• · 2024. 3. 16.
• textsms

Break a leg 뜻 의미

Break a leg 뜻? 행운을 빌어 Break a leg은 행운을 빌어라는 뜻입니다. Good luck 과도 같은 뜻입니다. 다리를 부시자 이런 말이 왜 행운을 빌어라는 뜻일까요? 무대나 중요한 일이 있을 때, 행운을 빌어주는 말은 하면 오히려 더 안 좋은 일이 생길 수도 있다고 생각해서 반대로 부정 타는 말을 해서 무사히 무대를 마쳐라는 의미를 가지고 있습니다. 미나씨, 또 프사 바뀌었네요 라는 드라마의 OST 제목이 Break a leg 이길래 무슨 뜻인지 궁금해서 찾아보았습니다. 영화 드라마의 주인공인 이미나 대리를 응원해 주는 말이었나 봅니다.

• format_list_bulleted 일상/이야기
• · 2024. 2. 26.
• textsms

자바스크립트 - async await 비동기 처리하기

비동기 asynchronous 란? 특정 작업이 완료할 때까지 대기하지 않고, 다른 작업을 먼저 진행하고 특정 작업이 완료가 되면 이벤트에 응답할 수 있는 방법입니다. fetch('https://dummyjson.com/users') .then(res => res.json()) .then(console.log); // to do something fetch 작업을 진행하고, 아래에는 다른 작업들이 진행되게 됩니다. 그리고 then 을 이용하여 api 호출이 완료가 되면 완료 이후 로직이 타게 됩니다. async / await 여러 비동기 함수를 콜백함수를 이용해서 처리하면, 콜백 지옥에 빠질 수 도 있습니다. 그렇게 되면 코드가 복잡하게 되어서 로직을 이해하기 어려울 수 있습니다. async / awai..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 24.
• textsms