JS

[티스토리] JavaScript 소스코드 하이라이트 추가하기

문제점 해당 블로그는 티스토리에서 제공해주는 플러그인 코드 테마를 사용하고 있습니다. 하지만 JavaScript 코드 블록에 소스코드를 입력하면 메서드 부분이 똑같은 검은색이어서 가독성을 해치는 것 같았습니다. highlight.js를 사용해보기도 하였고 다른 방법을 찾아보았지만 만족하는 코드 하이라이트를 찾지 못하였습니다. 결국 나온 결론이 " 구현되어있는 하이라이트 원하는 기능에 추가를 시키자! "였습니다. 해결 먼저 하이라이트 된 코드의 색깔 스타일을 추가했습니다. 그 후 선언된 하이라이트 코드 블록 모두를 가져와 정규식으로 메서드인 코드만을 구분했고 스타일을 적용시켰습니다. $target .html(html.replace(/(\.[A-z]+\()/g, `$1`)) .html(html .replac..

[JS] 두 날짜 사이의 일수 구하기

코드 const getDateDiff = (d1, d2) => { const date1 = new Date(d1); const date2 = new Date(d2); const diffDate = date1.getTime() - date2.getTime(); return Math.abs(diffDate / (1000 * 60 * 60 * 24)); // 밀리세컨 * 초 * 분 * 시 = 일 } getDateDiff("2021-09-01", "2021-10-01"); // 30 코드 풀이 두 날짜의 밀리초의 차이(date1 - date2 수식)를 통해서 두 날짜의 차이 값을 계산해 주는 방법입니다. 차이 값을 하루의 밀리초인(1000 * 60 * 60 * 24)으로 나눠주면 밀리초가 아닌 일 단위 값을 얻..

[JS] 연속된 순서를 가진 숫자, 영문 체크하기

A가 3번 들어간 문자를 찾는 방법은 정규식을 이용하면 간단한 코드로 체크할 수 있습니다. const a = "AAAbbCC"; a.match(/[A-z]{3}/); // AAA 하지만 ABC 처럼 연속되는 순서를 가진 영문을 체크할 수 없습니다. const str = "1234"; // 예시 const chrStr = [...str].map(v => v.charCodeAt()); let preStr = 0; let chr = 0; chrStr.forEach(s => { if (Math.abs(preStr - s) == 1) { chr++; } preStr = s; }) console.log(chr); // 3 문자의 unicode 코드로 이전의 문자값의 차로 구분하는 코드입니다. 함수화 시킨 코드 파라..

[React] 컴포넌트(Component) 에 대해

컴포넌트는 템플릿 이상의 기능을 수행합니다. 데이터를 UI로 만드는 가장 최소한의 단위 모듈을 의미합니다. 독립적이며, 재사용 가능하게 만든 부품 조각들을 의미하며 리액트로 만들어진 홈페이지는 즉 컴포넌트의 조합입니다. 근본적으로 컴포넌트는 데이터를 입력받아 DOM Node를 출력하는 함수를 뜻합니다. Props를 받아 Node를 랜더 하는 함수에 가까운 개념입니다. props React에서 props는 변하지 않는 데이터입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용합니다. 컴포넌트에 props로 전달하는 방식은 아래와 같이 사용합니다. // const Modal = (props) => { return ( { props.name } ); } 컴포넌트에 전달되는 props는 객체 형태로 전달되며..

[JS] 체크박스 전체 선택 , 해제

코드 See the Pen Untitled by 장혁수 (@hyukson) on CodePen. 코드 풀이 전체 선택, 해제 기능을 추가할 input에 change 이벤트를 걸어 해당 element를 받아옵니다. target으로 받아온 input element의 체크상태를 checked로 접근이 가능합니다. 리스트에 있는 input들을 모두 해당 checked 속성 값과 같게 만들어 주면 됩니다.

[JS] 개행문자 제거하기

코드 // 줄바꿈 제거 str.replace(/\n/g, ""); // 엔터 제거 str.replace(/\r/g, ""); // 공백 제거 str.replace(/\s*/g, ""); // 개행문자 모두 제거 str.replace(/\n|\r|\s*/g, "");

[JS] 줄바꿈, 공백 제거하기

replace로 제거 const str = `aa bb cc dd ee ff`; // 줄바꿈 제거 str.replace(/\n/g, ""); // 공백 제거 str.replace(/\s*/g, ""); str.replaceAll(" ", ""); 개행 문자를 사용하여 제거하는 방법과 replaceAll 메서드를 이용하는 방법입니다. split 메서드로 제거 const str = `aa bb cc dd ee ff`; // 줄바꿈 제거 str.split("\n").join(""); // 공백 제거 str.split(" ").join(""); 줄 바꿈은 개행 문자 \n을 기준으로 자르는 방식을 사용했습니다.

[JS] 대문자, 소문자로 변환하기

const str = "abcDEF"; // 대문자 const upper = str.toUpperCase(); // ABCDEF // 소문자 const lower = str.toLowerCase(); // abcdef 대문자와 소문자로 변환시키는 메서드는 각 toUpperCase과 toLowerCase입니다. 문자열 -> 대문자는 String.toUpperCase메서드를 사용하며, 문자열 -> 소문자는 String.toLowerCase메서드를 사용하여 변환 할 수 있습니다.

[JS] 소수 판별하기

소수란? 소수란 1과 자신만으로 나누어 떨어지는 1보다 큰 양의 정수를 뜻합니다. 2, 3, 5, 7, 11, 13... 와 같은 수는 소수가 됩니다. 소수를 구하는 3가지의 방법을 알아보겠습니다. n까지 모두 판별하기 1이 아닌 2부터 n사이의 모든 정수를 다 나누어 떨어지는 수가 있는지 확인하는 방법입니다. const isPrime = (n) => { for (let i = 2; i < n; i++) { if (n % i === 0) { return false; } } return true; } n의 제곱근 (√n) 까지만 계산하기 n의 제곱근 (√n) 값으로 나누어 떨어지면 √n의 배수라는 뜻이므로 소수가 아니게 됩니다. 예를 들어보자면 25의 제곱근은 √25(5) 입니다. 이때 5까지만 반복문이 ..

[JS] 프로그래머스 소수 만들기

출처 https://programmers.co.kr/learn/courses/30/lessons/12977 코딩테스트 연습 - 소수 만들기 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 programmers.co.kr 문제 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요. 제한사항 nums에 들어있는 숫자의 개수는 3개..

[JS] 프로그래머스 오픈채팅방

출처 https://programmers.co.kr/learn/courses/30/lessons/42888 코딩테스트 연습 - 오픈채팅방 오픈채팅방 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오 programmers.co.kr 문제 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다. "[닉네임]님이..

[JS] 특수문자 제거 / 체크

모든 특수문자를 체크하는 정규식 const reg = /[^a-zA-Z0-9ㄱ-힣]/g; '가나$sW2^&d!_ㅎ^@'.replace(reg, ''); // '가나sW2dㅎ' [^]를 이용해서 위 조건들을 묶어 이와 반대되는 문자를 찾아내는 정규식입니다.. 숫자, 영어, 한글에 해당하지 않는 문자는 특수문자라고 가정을 하고 걸러주는 방식을 사용해봤습니다. 해당 정규식을 활용한 코드 See the Pen REGEX special string by hyukson (@hyukson) on CodePen.