본문 바로가기
반응형

분류 전체보기706

[JavaScript] element.matches() - 해당 엘리먼트가 CSS 선택자(selector)로 선택이 되는지 여부 확인 matches() 메서드는 기준 element가 CSS 선택자처럼 (예를 들어 #id, .class, [href ^= https] 등의 선택자들) 선택이 되는지 여부를 확인하는 메서드다. ▷ 구문 targetElement.matches(selectorString); selectorString: CSS 선택자와 동일한 표현식의 문자열 ▷ 예제 1) matches 사용법 Here is id div-01 Here is id div-02 Here is class div-03 mineItRecord const div0 = document.querySelector('#div-0'); const div1 = document.querySelector('#div-1'); const div2 = document.query.. 2022. 5. 27.
[JavaScript] str.match() - 문자열에 원하는 특정 문자열 혹은 정규식과 매치되는 문자열 찾기 String.prototype.match() 메서드는 제목 그대로 기준 문자열에서 원하는 특정 문자열 혹은 정규식과 매치되는 부분을 찾아주는 메서드이다. ▷ 구문 str.match(regexp) regexp: 정규식 개체이며, 정규표현식이 아닌 객체가 전달되면 암묵적으로 정규표현식(RegExp)으로 변환된다. ▷ 예제 1) String.prototype.match() 기본 사용법 let str = 'Hello my blog, My blog name is mine-it-record' // 1. 정규표현식 글로벌 플래그(g) 없이 사용하기 str.match(/name is [a-z]{4}-it/i); // [ // 'name is mine-it', // index: 23, // input: 'Hello my.. 2022. 5. 27.
[프로그래머스] 짝지어 제거하기(LV.2) by javascript - 2017 팁스타운 ▷ 문제 : 2017 팁스타운 - 짝지어 제거하기 LV.2 코딩테스트 연습 - 짝지어 제거하기 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙 programmers.co.kr ▷ 해결 날짜 : 2022.05.18 ▷ 소요 시간 : 20분 ▷ 풀이 과정 : 제목 그대로 짝지어 제거하는 문제이다. 문자열이 매개변수로 주어지고 앞 뒤 문자가 같은 경우 제거해주면 되는 문제였다. 다른 문제 유형 중 괄호 열고 닫기 문제 유형과 비슷해서 그런 방식으로 풀어봤는데, 문자를 하나씩 배열에 담아주면서 마지막에 담긴 문자와 다음에 나오는 문자가 같은 경우 제거해주며, 마지막으로 .. 2022. 5. 18.
[VSCode] sample/dummy text 집어넣기 (ft. Emmet) 더미 텍스트가 필요한 경우 VSCode 같은 것들에는 Emmet이 기본적으로 지원되는 에디터인데, 그 기능을 사용하여 손쉽게 더미 텍스트를 만들 수 있다. * Emmet에 대해 상세하게 알고 싶으면 아래 링크를 통해 확인해봐도 좋을 것 같다. https://code.visualstudio.com/docs/editor/emmet Emmet in Visual Studio Code Using Emmet abbreviations inside Visual Studio Code. code.visualstudio.com lorem 이라고 입력한 후 탭 혹인 엔터를 클릭하면 기본적으로 설정되어 있는 더미 텍스트가 생성된다. Lorem ipsum dolor sit amet consectetur adipisicing el.. 2022. 5. 16.
[프로그래머스] 게임 맵 최단거리(LV.2) by javascript - 찾아라 프로그래밍 마에스터 ▷ 문제 : 찾아라 프로그래밍 마에스터 - 게임 맵 최단거리 LV.2 코딩테스트 연습 - 게임 맵 최단거리 [[1,0,1,1,1],[1,0,1,0,1],[1,0,1,1,1],[1,1,1,0,1],[0,0,0,0,1]] 11 [[1,0,1,1,1],[1,0,1,0,1],[1,0,1,1,1],[1,1,1,0,0],[0,0,0,0,1]] -1 programmers.co.kr ▷ 해결 날짜 : 2022.05.15 ▷ 소요 시간 : 40분 ▷ 풀이 과정 : 문제는 전형적인 그래프 탐색 알고리즘 문제다. 결국 최단거리를 찾아야 하기 때문에 BFS 탐색 알고리즘을 사용하면 된다. 상하좌우 어디로든 갈 수 있기 때문에 방향을 체크해줄 ds를 선언 그리고 방문을 체크해줄 visit을 선언 이 visit 변수를 통해 최종.. 2022. 5. 15.
[프로그래머스] 124 나라의 숫자(LV.2) by javascript - 연습문제 ▷ 문제 : 연습문제 - 124 나라의 숫자 LV.2 코딩테스트 연습 - 124 나라의 숫자 programmers.co.kr ▷ 해결 날짜 : 2022.05.13 ▷ 소요 시간 : 30분 ▷ 풀이 과정 : 문제가 매우 심플하다. 124라는 숫자만 사용할 수 있으며, 특정 숫자를 입력받았을 때 124라는 숫자만 사용하여 표출하면 된다. 1 > 1, 2 > 2, 3 > 4, 4 > 11, 5 > 12, 6 > 14 7 > 21 간단해보여도 이 문제는 효율성을 체크하는 문제라 규칙을 찾아서 푸는 게 중요하다. 결국 규칙은 124 3개의 숫자로 이루어져 있기 때문에 숫자 3을 가지고 규칙을 찾을 수가 있는데, 나머지와 몫을 가지고 문제를 풀 수 있다. ▷ 구현 function solution(n) { let a.. 2022. 5. 13.
[프로그래머스] 스킬트리(LV.2) by javascript - Summer/Winter Coding(~2018) ▷ 문제 : Summer/Winter Coding(~2018) - 스킬트리 LV.2 코딩테스트 연습 - 스킬트리 programmers.co.kr ▷ 해결 날짜 : 2022.05.13 ▷ 소요 시간 : 30분 ▷ 풀이 과정 : 아래와 같은 입력이 주어진다고 한다. skill skill_trees return "CBD" ["BACDE", "CBADF", "AECB", "BDA"] 2 skill_trees중에서 배울 수 있는 skill_tree의 개수를 반환하면 되는 문제다. skill의 대상이 아닌 것들은 순서가 상관없고 skill의 대상이면 skill순서대로 스킬을 배워야 한다. 여기서 중요한 제한 조건은 스킬이 중복해 주어지지 않습니다. 라는 제한 조건이다. 결국 순서라는 게 있기 때문에 정규표현식을 쓰.. 2022. 5. 13.
[VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) 이 게시글 이전에 [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API)라는 게시글을 통해 초기 설정을 잡고 가볍게 사용해 보았다. 이번 글에서는 Vuex의 Core Concepts에 대해서 알아보도록 하자. 물론 Composition API와 같이 사용할 것이다. Vuex의 store 내에는 크게 5가지의 속성이 존재하는데 state getters mutations actions modules 이렇게 5가지의 속성에 대해 하나씩 알아가 보도록 하자. 1. state Vuex는 단일 상태 트리를 사용하는데, 하나의 애플리케이션은 하나의 store만 가진다는 의미이다. 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으며 디버깅 목적으로 현재 .. 2022. 5. 4.
[VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) Vuex는 상태(state)를 관리하는 라이브러리이다. Vuex 같은 상태 관리자는 prop Drilling을 방지하거나 그 외 다양한 라이브러리와 연동시켜 사용하기 위해 사용된다. (*Prop Drilling은 중간 component를 그냥 데이터 전달용으로만 사용하는 이동하는 과정을 일컫는다.) 사실 Vuex가 없어도 Provide와 Inject라는 녀석을 사용하면 Prop Drilling 방지는 물론 여러 가지 다른 컴포넌트로 전달이 가능한데, 반응형으로 만들려면 computed를 사용하거나 소스 추적이 어려워지는 현상 때문에 잘 사용하지는 않는다. 그러므로 Vuex라는 저장소를 두고 같이 쓰는 값들은 하나의 저장소를 통해 관리하고 저장소를 바라보도록 하는게 취지이다. 추가적으로 vuex-persi.. 2022. 5. 4.
반응형
TOP

티스토리툴바