썸네일 [FE/JS] 정규표현식 정리 2021.04.1520일차 입사 39일차.일반적으로 정규표현식은 JS에서 처리한다.전화번호나 주민번호, 사업자번호 등 숫자만을 입력하거나 ID나 PW에 특수문자를 제거하기 위해 사용한다.매번 필요할때마다 하나씩 검색하는 수고를 덜기위해 자주쓰는 정규표현식을 정리해두려고 한다.  1. 숫자만 입력 ( replace )function fn_regExNumber( str ) {    chkStr = /[^0-9]/gi;    return str.replace( chkStr, "" );}  2. 영어만 입력 ( charCodeAt )function fn_regExEng( str ) {        for ( int i = 0; i str.length; i++ ) {        if ( str.charCodeA..
썸네일 [FE/JS] JavaScript로 Json 생성하기 2021.04.1118일차 입사 35일차.내가 주말마다 시간을 쏟는 Football Manager시리즈는 작년에 매치엔진 문제로 크고 작은 이슈들이 있었다.FM개발자들은 선수들의 방향전환속도, 태클속도, 태클범위 등의 매치엔진을 구성하는 요소들을 .json파일로 생성했었고, json파일의 key와 value를 그대로 노출시켰기 때문이었다. 지금은 2021시리즈로 넘어오면서 json파일을 암호화해서 접근을 막아버렸지만,어제 공부한 fs.writeFile()로 FM의 매치엔진파일인 physical_constraints.json를만들어보려고 한다.   1. writeFile()을 이용한 json생성  ① JSON.stringify()는 Json으로 변환해준다. // fs모듈을 사용하기 위한 선언const fs..
썸네일 [FE/JS] fs module 2021.04.10 17일차 입사 34일차. React를 공부하기 위해 샀던 책 2권에는 fs에 대한 설명없이 fs.으로 시작하는 메소드들을 사용했기 때문에 좀 당황스러웠다. 내가 사용하는 기능들에 대해서는 꼭 알고 넘어가는 것이 나의 공부목표이기에 fs모듈에 대한 개념을 알고 기록하려고 한다. 1. fs 모듈 ① 출처 : 오픈튜토리얼스 (링크) ② FileSystem의 약자. 파일처리와 관련된 모듈이다. ③ const fs = require('fs'); 를 코드 맨위에 선언해주어야 사용가능하다. 2. fs.writeFile( '경로 및 파일명', 작성할내용, [파일을 저장하는 방식], function(err) {} ) ① fs.writeFile()은 비동기방식, fs.writeFileSync()는 동기..
썸네일 [FE/JS] 주민등록번호 유효성체크 2021.04.0916일차 입사 33일차.회사를 상대로 하는 프로젝트에는 사업자번호, 법인번호, 주민등록번호의 유효성을 체크하는 자바스크립트가 있다.처음엔 NICE 같은 곳에서 API를 받아 비교하는 방법으로 진행하는 줄 알았으나, 실제로는 입력한 번호가 유효한지 체크하는 알고리즘이 있었다. 이미, 인터넷에 유효성검사에 관한 코드들이 많기 때문에, 최대한 중복되지 않는 직접 만든 코드를 작성해보기로 했다.   1. 주민등록번호 유효성체크  ① 출처 : 모바일 개발 Blog's (링크)  ② 출처로 가져온 블로그에는 Java의 주민등록번호 유효성 검사 코드가 있다.  ③ 아래의 코드는 내가 직접 작성해본 코드다.// jumin1 = 주민번호 앞 6자리, jumin2 = 주민번호 뒷 7자리function f..
썸네일 [FE/JS] 사업자번호 유효성체크 2021.04.0815일차 입사 32일차.회사를 상대로 하는 프로젝트에는 사업자번호, 법인번호, 주민등록번호의 유효성을 체크하는 자바스크립트가 있다.처음엔 NICE 같은 곳에서 API를 받아 비교하는 방법으로 진행하는 줄 알았으나, 실제로는 입력한 번호가 유효한지 체크하는 알고리즘이 있었다. 이미, 인터넷에 유효성검사에 관한 코드들이 많기 때문에, 최대한 중복되지 않는 직접 만든 코드를 작성해보기로 했다.    1. 사업자번호 유효성체크  ① 출처 : Hello World! (링크)  ② 출처로 가져온 블로그에는 사업자번호 유효성체크의 알고리즘과 스크립트가 있다.  ③ 아래의 코드는 내가 직접 작성해본 코드다.// strBN = 문자열 파라미터// 1번 방법function fn_chkBusinessNum..
썸네일 [FE/JS] JavaScript ES6 문법정리2 2021.04.01 14일차 입사 25일차. JavaScript ES6 문법정리 3회차 1. (배열)변수명.filter( 파라미터 => 조건 ) ① 배열 또는 Json Object의 값들 중, 조건을 정해 원하는 값을 출력하는 함수. ② 문자열간의 비교를 조건으로 설정하면, 에러를 발생하지 않지만 원하는 결과를 얻을 수 없다. const smartPhone = [ { made: '애플', ver: '12', model: '아이폰', price: 100 }, { made: '삼성', ver: '21', model: '갤럭시', price: 80 }, { made: 'LG', ver: 'VELVET', model: '벨벳', price: 50 }, ]; // 스마트폰의 가격이 60이상인 Json Object..
썸네일 [FE/JS] form태그의 자동 Keyup 이벤트 (submit) 막기 2021.03.26 11일차 입사 20일차. 내가 세운 기준에서 form을 사용하는 이유는 굳이 버튼을 누르지 않고, Enter키를 누르면 데이터를 submit 할 수 있기 때문이다. 을 이용해서 쉽게쉽게 넘길 수 있지만, required 속성이 먹히지 않거나, 입력한 데이터를 체크 후, submit을 할때는 을 사용한다. 너무 간단하고 기초적인 내용이지만, 처음 보는 예외의 경우를 봤고 직접 경험했기 때문에 해당 내용에 대해 적는다. 가 1개일 때, Enter키를 누르면 submit이 수행된다. // 버튼의 type속성이 'button'임에도 Enter키를 누르면 submit이 진행된다. Submit 실행 해결방법 ① type속성이 'text'인 input 태그를 1개 더 만들어준다. ② onsubmi..
썸네일 [FE/JS] 프로그래스 바 div 태그로 만들기 2021.03.25 10일차 입사 18일차. 22일부터 약 3일간 블로그를 쉬어서 그 동안 못올린 내용들은 한 번에 올린다. 프로그래스 바는 사실 html5에서 지원하는 태그를 사용하면 쉽게 만들 수 있다. 하지만, 태그는 safari, IE 등 몇가지 브라우저를 지원하지 않아서 태그를 사용하는 것이 좋다. 사실 오늘 태그로 만들었다가 다시 만들었다. 까다로웠던 점은 로딩이미지 뒤에 화면은 Fix해서 스크롤을 이동해서 늘 Image가 가운데 있어야 하는 점이었다. 답은 position : fixed style을 사용하는 것이다. 1. 프로그래스 바 body 만들어주기 ① var progressBody = "" + "" + "" ② function으로 만들어서 common.js에 스크립트를 작성하고, 필요..
썸네일 [FE/JS] 동적 form 생성해서 POST method로 전달하기 2021.03.25 10일차 입사 18일차. 22일부터 약 3일간 블로그를 쉬어서 그 동안 못올린 내용들은 한 번에 올린다. 시작부터 요구사항 분석에 참여하고, DB, UI설계를 진행하는 프로젝트에 참여하는 것은 주니어 개발자에게 큰 행운이다. 컬럼을 추가하든 자료형의 길이를 길게 하든 짧게 하든 아무 상관이 없기 때문이다. 오늘은 Step1. 페이지에서 SELECT해서 가져온 리스트 중 버튼을 클릭하면, 몇가지 인증 과정이 짜여진 Step2, Step3를 건너뛰고 바로 Step4로 건너뛸 수 있도록 JS를 짜는 과업을 받았다. 까다로웠던 점은 1. @PostMapping 어노테이션을 사용한 Controller 2. 기존의 Controller의 구조 그대로 사용해야 함 3. form은 이미 Step1 페..
썸네일 [FE/JS] JavaScript 문법정리2 ( ~ ES5 ) 2021.03.19 9일차 입사 12일차. JavaScript ES5, ES6 문법정리 2회차 1. Math.trunc( 숫자형 파라미터 ) ① 숫자를 파라미터로 전달해서 소수점 자리를 제거하고 정수값만 가져오는 함수 ② 숫자가 아니면 NaN을 리턴. console.log(`1.23 -> ${Math.trunc( 1.23 )}`); console.log(`-1.23 -> ${Math.trunc( -1.23 )}`); console.log(`문자 -> ${Math.trunc( '문자' )}`); [ 결과 ] 1.23 -> 1 -1.23 -> -1 문자 -> NaN 2. split( 문자형 파라미터 ) ① 문자열변수명.split( 문자 ) ② 파라미터를 기준으로 문자열을 나눈 후, 배열형식으로 리턴. let..
썸네일 [FE/JS] JavaScript ES6 문법정리 2021.03.14 4일차 입사 7일차. ES5 문법만 사용하다보니 React를 공부할 때 너무 힘들다. ES6는 반드시 공부해야만 하는 내용이었다. 1. Template String ① $를 사용. 백틱(`) 안에 ${변수명} 또는 ${메소드명}을 입력하면 변수의 값 또는 메소드의 값이 출력된다. ② 작은따옴표(‘)가 아닌 백틱(Esc 밑의 버튼)을 사용해야만 한다. ③ 백틱안에 변수나 메소드를 사용할 수 있기 때문에 +를 사용하지 않고 가독성을 높일 수 있다. ④ ES6에 새로 추가된 문법. 2. 객체 확장 표현식 ① 객체의 변수를 선언할 때, 키값을 생략하면 자동으로 키의 이름으로 키값을 지정한다. ② ES6에 새로 추가된 문법. ③ 메소드 작성 시, function을 제외하고 작성할 수 있다. 3..
썸네일 [FE/JS] JavaScript 문법정리 ( ~ ES5 ) 2021.03.14 4일차 입사 7일차. ES5의 문법들 중, 자주 사용하거나 필요하지만 몰랐던 문법들을 따로 정리해야할 필요성을 느꼈다. 1. indexOf( 파라미터 ) ① 변수명.indexOf( 찾고 싶은 문자 또는 문자열 ); ② 파라미터의 값이 변수안에 존재하면 시작위치의 Index를 리턴. / 없을 경우, -1을 리턴. 2. 동적 배열 ① = new Array( ); / = [] 으로 선언. ② 배열이름.push( '입력값' ); 을 사용해서 값을 입력한다. 3. JSON 필드 추가 ① 객체명.추가할 필드명 = '입력값'; ② JSON은 HashMap과 비슷한 구조로 이해하면 좋을 것 같다. 4. forEach ① 배열명.forEach ( function ( 변수명 ) ) { ... } ② I..
라이브러리 브랜드 그룹 | Architalks

티스토리툴바