.log('FE')

타 회사에서 백엔드로 일하는 친구가 있는데 프론트로 사내에서 전향된 케이스가 하나 있습니다. 그 친구가 데이터 처리를 하는데 예제코드를 보여주더라구요 const a = data.split('-')[0] const b = data.split('-')[1] 아무튼 대화를 하다가 저는 근데 이렇게 split 쓰는것보다 아래처럼 쓰기를 권장했습니다. const a = data.split('-') const x = a[0] const y = a[1] 사실 대량의 텍스트 데이터를 갖고 저렇게 처리할일은 저는 없었다보니 그냥 친구가 보내준것처럼 가끔 작성하기도 했던것같습니다. 그래도 많은 배열 또는 많은 텍스트를 첫번째 예시같이 처리한다면 data 에 대해서 split 을 별도로 두번 실행하기때문에 실행시간 효율면에..

지난 5년간 npm 다운로드수를 확인해 봤습니다. 리액트는 이제 명실상부 프론트엔드 개발에 대표적인 라이브러리로 자리잡은것같습니다. 버전도 벌써 17.x.x 대 버전으로 꾸준한 업데이트와 최신화가 진행되고 있는걸 확인할 수 있습니다. 그만큼 자바스크립트의 중요성은 더 높아지면서 리액트에 대한 이해를 하는것도 중요해진것같습니다. 그래서 이버 포스팅에서는 리액트가 갖는 주요 특징들 위주로 실제 리액트코드는 어떻게 구성되어있나 확인하면서 리액트의 동작에 대해 알아보려고 합니다. JSX 리액트에서는 JSX 문법을 통해서 자바스크립트파일에 마크업 로직을 넣을 수 있습니다. 이 방식덕분에 UI 별로 컴포넌트를 생성하여 재사용하고 동적인 돔을 쉽게 생성해낼 수 있습니다. 순수 자바스크립트로 이런 재사용성있는 컴포넌트..

자바스크립트 기본개념 시리즈의 시작으로 호이 스팅에 대해서 다뤄보려고 합니다. 이 글을 이해하려면 변수, 스코프, 함수에 대해 최소한의 이해와 기본 지식이 바탕이 되어야 합니다. 호이스팅이란? MDN 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 일단 호이스팅이란 사전적 의미는 끌어올리기, 끌어올림 또는 게양 이라는 용어로 해석될 수 있습니다. 자바스크립트에서의 호이스팅역시 선언된 변수나 함수가 끌어올려진다 라는 의미를 갖고있습니다. 예전엔 저도 그냥 끌어올려진다 그래서 변수나 함수는 어디서 선언하더라도 가장 먼저 실행된다 라고만 생각하고 있었습니다. 그러나 호이스팅은 제대로 파고들면 알아야할 연관 개념들이 있고 꽤 디테일한 로직을 갖고있습니다. 우선 변수의 관점에서..

2018/12/31 - [JavaScript] - [saimpleExample] JS Tab Menu 이전의 탭메뉴는 정상적으로 동작은 하는데 추가적으로 다른 탭메뉴를 만들려고하면 중복되는 코드가 발생하고 코드라인도 길어지게된다. 기존의 탭메뉴를 그대로 복사해 내부의 class 명을 모두 변경해줘야하기때문에 유지보수도 어렵고 가독성도 떨어지는 스크립트가 되어버린다. 그래서 기존의 탭메뉴를 활용하여 재활용성이 높은 클래스형태로 만들려고한다, 그중에서도 메서드를 공유하게되는 Prototype 방식을 활용한다. JavaScript 에서는 별도의 클래스 타입이 없기때문에(아직은..) 함수형태로 클래스를 만든다. 이때 함수명은 첫글자부터 대문자를 사용하여 클래스로 사용되는 함수임을 명시해준다. 클래스로지정한 함수..

1. JS 만을 활용한 TAB 메뉴 구성 2. 탭 메뉴 클릭시 컨텐츠 내용 변경 3. 탭 메뉴 클릭시 메뉴의 디자인 변경 HTML Home Resume Self introduvtion Portfolio Connect 안녕하세요 CodeReading 소개에 오신것을 환영합니다. 이력서 자기소개 포트폴리오 연락처 CSS * { margin:0; padding:0; } .tab { width:100%; height:40px; background: #eeeeee; display: flex; justify-content: center; align-items:center; list-style:none; } .tab li { margin:0 1rem; cursor:pointer; padding:1rem 2rem; }..

1. 전화번호중 마지막 4자리는 숨김처리 2. 11자리 넘어가면 더이상 입력 안되도록 3. 출력도 입력된 전화번호만 나오도록 * 실제로 써먹을 용도가 아닙니다 순수하게 연습용입니다. * 실제 처리할때는 정규표현식을 사용합니다. * 숫자는 input 속성의 maxlength 가 안먹힙니다. html css html, body { background: #333333; height:100%; } .wrap { display:flex; justify-content:center; height:100%; align-items:center; flex-direction: column; } .wrap form .number { border:1px solid #cccccc; border-radius:5px; font-si..

/user01.js // export 객체 속성으로 함수 추가 exports.getUser = function() { return {id: 'module01', name: 'codereading'}; } exports.group = {id: 'group01', name: 'Family'}; exports.sum = function (a, b) { return a + b; } 위의 파일은 모듈이 될 파일이고 3종류의 다른 함수와 객체값을 갖습니다. /module01.js // 모듈화한 파일을 불러와서 const 에 저장 const user01 = require('./user01'); // 모듈화한 파일에서의 정보 가져오기 const userName = user01.getUser().name; const u..

- Github 바로가기 Mometum DEMO HTML + CSS + VanilaJS 로만 구현 Open Weaher API 사용 기간 : 약 1일 참조 video : 초보자를위한 Vanila JavaScript 참조 Model : Chrome웹스토어 확장프로그램 Momentum Chrome Browser 에서만 정상 작동 구현목록 Clock User Name Input ToDo Input Weather CurrentLocation CRUD Create (Create User Name, To Do) Read Update Delete (Create User Name, To Do) 기능 시계 User Name 등록 User Name 삭제 리로드시 배경 이미지 랜덤 변경 할일 목록 등록 완료체크시 완료 목록..

1. DatabaseExample 폴더생성 2. app.js 파일 생성 3. $ npm init 4. 모듈 설치 $ npm install express http path body-parser cookie-parser serve-static errorhandler express-error-handler express-session mongodb --save app.js 기본세팅 // Express 기본 모듈 불러오기 var express = require('express'), http = require('http'), path = require('path'); // Express의 미들웨어 불러오기 var bodyParser = require('body-parser'), cookieParser = requ..

* node.js 설치가 이미 이루어 졌다고 가정하고 진행합니다. 현재 사용 버전 v10.9.0 공식홈페이지에 들어가니 LTS 버전이 10.14.2 로 제가 사용하고있는데 낮은 버전이라 업데이트부터 하겠습니다. 버전확인방법 $ node -v // v10.14.2 $ npm -v // v6.4.1 첫번째 노드 프로젝트 만들기 1. NodeTutorial 폴더 생성 2. test.js 파일 생성 3. console.log('첫번째 노드입니다.') 3. $ node test01.js 명령어 입력하여 실행 모듈만들고 호출하기 module.js var calc = {}; calc.add = function(a, b) { return a + b; }; module.exports = calc; - calc 라는 변수..