오늘의 CODE

Instructions. In this kata you are required to, given a string, replace every letter with its position in the alphabet. If anything in the text isn't a letter, ignore it and don't return it. "a" = 1, "b" = 2, etc. 이 문제를 풀기 위해서는 받은 텍스트를 각 알파벳의 인덱스로 변환해야 한다. 만약, 받은 텍스트에 문자가 아닌 것이 포함되어 있다면, 무시하고 반환값에 포함시키지 않는다. Example. alphabetPosition("The sunset sets at twelve o' clock.") result. "20 8 5 19 21 1..

사용법 let regexp = /^[0-9]*$/, val = document.querySelector('input).value; if( !regexp.test(val) ) { alert("숫자만 입력하세요"); val = val.replace(regexp,''); } 정규식 모음 1. 한글만 /[a-z0-9]|[ \[\]{}()?|`~!@#$%^&*-_+=,.;:\"'\\]/g 2. 자음/모음 불가 /([^가-힣\x20])/i 3. 자음/모음 가능 /([^가-힣ㄱ-ㅎㅏ-ㅣ\x20])/i 4. 이메일 // 기본체크 /^[-A-Za-z0-9_]+[-A-Za-z0-9_.][@]{1}[-A-Za-z0-9_]+[-A-Za-z0-9_.][.]{1}[A-Za-z]{1,5}$/ /^([a-z0-9_\.-]+)@([\..

자바스크립트 정규식 생성 // 리터럴 방식 const regex = /abc/; // 생성자 방식 const regex = new RegExp("abc"); /패턴(pattern)/플래그(flag) 정규식 플래그(Flags) Javascript에서 정규식을 생성할 때 고급 검색을 위한 옵션을 정할 수 있도록 플래그를 지원한다. 플래그는 리터럴 방식인지 생성자 방식인지에 따라 설정하는 방식이 다르다 // flags에 필요한 설정값이 들어감 const regex1 = /abc/flags; const regex2 = rew RegExp(/abc/, flags); Flag Meaning Description i Ignore Case 대소문자를 구별하지 않고 검색 g Global 문자열 내의 모든 패턴 검색 m ..

Description persistence 함수를 이용해 양의 매개변수 num을 받아 한자릿수에 도달할 때까지 값을 곱하고 곱한 횟수를 return 하시오. Example(with Result) 39 --> 3 (3*9=27, 2*7=14, 1*4=4) 999 --> 4 (9*9*9=729, 7*2*9=126, 1*2*6=12, 1*2=2) 4 --> 0 Solution 1. 더보기 function persistence(num) { let times = 0; num = num.toString(); while(num.length !== 1) { times++; num = num.split('').map(Number).reduce((a,b) => a*b).toString(); } return times; }..

제목부터 흥미롭지 않은가? '자바스크립트 프레임워크의 전쟁이 끝났다.' 심지어 부제는 '승자는 단 하나이다.' 궁금하지 않을 수 없지~ 안그래도 변화가 빠른 프론트엔드의 세계에서 어깨춤을 추고 있는데 뭔가 제목부터가 너무 자신만만한 것으로 보아 왠지 시험이 끝난 것만 같은 속이 후련해지는 듯한 착각이 느껴지는 듯 했다. ㅎㅎ 그래서 오늘의 article로 선정했다. 참고로 이 article에서는 라이브러리와 프레임워크의 경계를 나누지 않은 듯한 느낌이 든다. (개인적으로 굳이 나눠서 생각할 필요가 없다고도 생각한다) 그러므로 이에 대한 혼란이 없길 바란다. 이것도 누군가 한사람의 의견일테니 너무 심각하지 않게 가볍게 읽으시길 바라며 이제 시작~!! ** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가..

우선, typescript를 global로 설치한다. yarn global add typescript npm install -g typescript 설치 후 아래의 명령어를 입력하면 tsconfig.json 파일이 자동 생성된다. npx tsc --init tsconfig란? Typescript로 작성된 코드는 Javascript로 변환해줄 트랜스파일러(컴파일러)가 필요하며 이런 컴파일 과정에서 사용자가 필요한 여러 옵션을 설정한 파일이 tsconfig.json 파일이다. tsconfig.json 컴파일 옵션 정리 { "compilerOptions": { /* 기본 옵션 */ "target": "es5", /* 사용할 특정 ECMAScript 버전 설정 (예시, es5 지정 시 화살표 함수는 일반 fun..

우선 react로 설치한 뒤 아래의 순서에 맞춰 지갑을 연동해보았다. 만약 아래와 같이 진행했지만 뭔가 정상적이지 않다면 오타의 가능성이나 버전을 먼저 확인해보길 바란다. 멀고도 험한.. 블록체인의 길.. 걸음마부터 출발! 설치 npm i @web3-react/core @ethersproject/providers 설정 설치한 @web3-react/core에서 제공하는 Web3ReactProvider를 App root의 provider로 제공하고 web3 객체를 인스턴스화 하는 getLibrary 함수를 정의하여 props로 전달한다. src/index.js import React, { StrictMode } from 'react'; import ReactDOM from 'react-dom/client';..

package.json은 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일이다. 일반적으로 Root 디렉토리에 위치한다. npm init 으로 package.json을 생성했다면 터미널에서 입력 프로세스와 함께 프로젝트 정보는 이미 name(프로젝트명)과 version(1.0.0)이 자동 입력되어 생성되었을 것이다. 패키지 변경은 버전 변경과 함께 제공되어야 한다는 것만 우선 기억하도록 하자. 이번 글은 패키지 정보에 포커스를 맞출 것이므로 프로젝트 정보에 대한 추가 설명을 진행하지 않겠다. 패키지와 모듈 1. 패키지 패키지는 package.json으로 설명되는 파일 또는 디렉토리이다. 패키지는 npm 레지스트리에 공개되기 위해 반드시 package.json 파일을 가지고 있어야 한..

클라이언트에서 요청(request)를 보내면 서버는 요청을 처리해서 응답(response)을 한다. 이 때 브라우저와 서버간에 데이터를 주고 받기 위한 방식으로 HTTP 프로토콜을 사용한다. HTTP 프로토콜이란 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 상호간에 정의한 (데이터 교환 교환을 위한)규칙을 말한다. HTTP 프로토콜은 서버에 연결하고 요청해서 응답을 받으면 연결을 끊어버리는 Connectionless(비연결지향)와 연결을 끊는 순간 통신이 끝나며 상태 정보를 유지 않는 Stateless(상태정보비유지)라는 특징을 가진다. 이러한 특징 때문에 세션과 같은 별도의 추가 정보를 관리하지 않기 때문에 이러한 추가 정보를 가지고 있어야 하는 상황에는 쿠키, 세션 등을 이용해 클라이언트..

클론 코딩 책을 보고 따라하던 중 기재된 내용과는 다르게 자꾸 에러가 나는 상황이 발생했다. 아무래도 책이다보니 출판 후 업데이트 되기가... ㅎㅎ React-router가 v6로 업데이트 되어 생기는 에러가 대다수였다. 최신 뉴스는 아니었지만 그동안 React에 소홀했던 나에겐(반성반성😑 ) 당황스러웠다. 내용을 잊지 않기 위해 정리해본다. Migration 프로세스 1. React V16.8 이상으로 업그레이드 2. React Router V5.1 이상으로 업그레이드 내부의 모두 제거 커스텀 리팩토링 - components나 render 속성을 사용하는 대신 children 속성 사용 3. React Router V6으로 업그레이드 V6버전은 V5버전 대비 번들 사이즈가 많이 줄었다고 한다. (이전 ..