JavaScript

[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] 특수문자 제거 / 체크

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

[JS] select에서 선택한 값 가져오기

코드 빨강색 노랑색 초록색 const changeValue = (target) => { // 선택한 option의 value 값 console.log(target.value); // option의 text 값 console.log(target.options[target.selectedIndex].text); } 코드 설명 See the Pen select 선택한 값 by bolgang13 (@bolgang13) on CodePen. select 요소에서 value 키워드로 접근, value 값을 가져올 수 있습니다. 선택한 text 값은 해당 select 요소에서 현재 선택한 option의 인덱스 값으로 가져올 수 있고, 해당 값에서 option 목록을 지정해 해당 text 값을 가져올 수 있습니다.

[React] 리액트를 사용하는 이유

1. 리액트를 사용하는 이유 흔히 우리가 자주 보는 Instagram, facebook 같은 사이트의 새로고침이 없이 변경되는 모습, 마치 앱처럼 보이는 동적인 웹 페이지 SPA(Single Page Application), CSR(Client Side Rendering)의를 사용한 페이지라고 할 수 있습니다. 정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 단순한 기업소개 페이지는 유저의 인터랙션은 중요하지 않는 요소로 볼 수 있기에 단순한 HTML과 CSS로만으로도 구현이 가능합니다. 정적, 동적 페이지. 동적인 페이지는 유저의 행동과 흐름에 따라 웹페이지의 구성을 달리해주어야 하는 페이지를 말합니다. 즉 유저의 요청 정보를 처리한 후 제작한 ..

[JS] 배열 특정 값 포함 여부, 중복체크 (includes, indexOf, some, every)

includes const array = [1, 2, 3, 4, 5]; array.includes(6); // false array.includes(3); // true array.includes(3, 3); // false includes 메서드는 배열이 특정 요소의 포함 여부를 판별합니다. 첫 인자값에는 탐색할 요소를 보내며 두번째 인자값에는 탐색을 시작할 위치를 보냅니다. (기본 값 0) indexOf const array = [1, 2, 3, 4, 5]; array.indexOf(6); // -1 array.indexOf(3); // 2 array.indexOf(3, 3); // -1 indexOf 메서드는 배열에서 특정 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환..

[JS] textarea 줄바꿈 갯수

코드 const rowsCount = (target) => { // 개수 console.log( target.value.split("\n").length - 1 ); } Enter를 입력 시 줄바꿈 되는 개행(\n)을 기준으로 잘라 개수를 셀 수 있습니다.