Ryu.log

React.memo() 사용팁 정리 Created: Apr 14, 2021 10:27 AM Tags: React, javascript 요약: React.memo() 사용 팁 React.memo() 사용 팁 정리 React에서는 UI성능 증가를 위해 **React.memo()** 를 지원한다. React.memo() **React**에서는 먼저 컴포넌트를 랜더링 한 뒤, 이전 랜더링 된 결과와 비교하여 랜더링 결과가 이전과 다르다면, DOM을 업데이트 한다. export function User({ name, data }) { return ( name: {name} data: {data} ); } export const MemoizedUser = React.memo(User); React.memo() 로 ..

Typescript Created: Apr 7, 2021 12:54 PM Tags: javascript, typescript TypeScript 란? TypeScript는 JavaScript의 Superset 이다. 완전히 새로운 언어가 아닌, JavaScript를 기반으로한 언어이다. JavaScript의 모든 기능을 포함하고 있으며, JavaScript에 존재하지않는 새로운 기능을 제공한다. 즉, TypeScript는 JavaScript 코드를 보다 쉽고, 강력하게 작성할 수 있는 좀 더 나은 버전의 JavaScript라 할 수있다. TypeScript를 사용함으로 얻을 수 있는 이점 버그를 줄인다. 쉬운 유지보수가 가능해진다. 질좋은 코드 작성이 가능하다. TypeScript의 특징 타입 표기 변수..

CSS Flexible Box Layout Created: Jun 4, 2020 2:50 PM Tags: CSS3, Flexbox 요약: FlexBox layout CSS Flexible Box Layout FlexBox 란? flexbox 는 요소의 크기가 불명확하거나 동적으로 변할 때(window size 조절로 인한 요소 크기 변경), 효율적으로 요소를 정렬,분산,배치 할 수 있는 방법을 제공하는 CSS3 의 새로운 레이아웃 방식. flexbox 는 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다. flexbox 는 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기처리를 줄일 수 있다. flexbox 는 CSS만으로 다양한 레이아웃을 구현할 수 있게 해준다..

Vue Study Created: Aug 7, 2020 5:35 PM Tags: Vue 요약: Vue JS Study Vue JS Webpack 사용없이 먼저 basic한 Vue를 먼저 사용해본다. 유용한 자료 Vue.js 2.3 CheatSheet 1. Vue 의 Basic 구조 basic한 기본 구조 el Vue 와 html Element를 연결하여 Vue가 관리하게 한다. (Vue에게 테그 통제권을 넘긴다.) data Vue 에서 사용할 data 들의 집합. methods Vue 에서 사용 할 methods 들의 집합.* v-model {{value}} v-model input테그와 data를 연결시켜준다. input 테그에서 데이터 입력 시 vue에서 관리하는 data 부분인 value 변수와 동..

Sass (Syntactically Awesome Style Sheets) Created: Jun 4, 2020 2:50 PM Tags: CSS3, SASS, SCSS 요약: 더나은 Sass 사용법을 위한 Sass 파악 Sass (Syntactically Awesome Style Sheets) Sass(Syntactically Awesome StyleSheets)는 CSS의 한계와 단점을 보완하여, 보다 가독성 높고, 재사용에 유리한 CSS를 생성하기 위한 CSS 확장(extension)이다. Sass가 제공하는 기능 CSS의 간결한 문법은 배우기 쉽고 명확하다. 프로젝트 초기에는 문제가 보이지않지만, 규모가 커지고 수정이 빈번하게 발생함에 따라 쉽게 지저분해진다. 이러한 CSS의 태생적 한계를 보완하기..

Hooks 사용법 Hooks는 React에서 Component를 함수형으로 개발 하도록하기위해 새로 만들어 졌다. Hooks를 사용하면 함수형 컴포넌트를 사용하면서도 State제어가 가능하다. 또한 Class형 Component에 비해 획기적으로 코드량이 확연하게 줄어든다. React에서는 기존 Class방식의 Component가 아닌 Hooks를 권장한다. useState hooks에서 state를 다룰때 사용된다. import React, { useState } from 'react'; const App = () => { const [check, setCheck] = useState(0); const onClickEvent = () => setCheck(check + 1); return ( Hooks..

webpack 설정 파일 정리 React를 사용하려고 웹팩을 쓰려하면 핵심 파일인 webapck.config.js파일의 설정값이.. 작성하려 할때마다 까먹는다.. 자꾸 까먹다보니 자꾸 다시 검색을 하게되고... 악순환 그래서 각 속성들의 역할들을 정리 해놓는다. package.json 먼저 package.json파일에 어떤 디펜더시가 들어가는지 확인해본다. // packaage.json file { "name": "Webpack Setting", "version": "1.0.0", "description": "Webpack Setting", "main": "index.js", "scripts": { "dev": "webpack" }, "author": "Junho Ryu", "license": "ISC"..

AutoComplete.js Demo : https://ryujun.github.io/demos/JavaScript/AutoComplete/ Github : https://github.com/RyuJun/AutoComplete.js AutoComplete.js는 es6++ 문법으로 작성된 input박스 자동완성 module이다. 초성검색, 중단검색, 전체검색 등을 지원하며 각종 검색 Search Bar 구현에 사용 될 수 있다. 지원 chrome, firefox, while 등등의 모던브라우저 및 ie9 버전 이상에서 지원함 설치 및 사용방법 일반 웹 페이지 웹 페이지에서 사용하려면 html파일 ... AutoComplete.js는 es6++문법으로 작성되어 ie에서 작동하지 않는다. AutoComple..

유효성 검사할때 등등, 업무중 꽤 많이 쓰는데, 항상 찾기 귀찮아서 한글, 영어, 숫자, 특수문자 구분 정규식을 모아보았다. 한글,영어,숫자,특수문자 구분 정규식 모음 var check_num = /[0-9]/; // 숫자 var check_eng = /[a-zA-Z]/; // 문자 var check_spc = /[~!@#$%^&*()_+|?:{}]/; // 특수문자 var check_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크사용방법 test() 함수를 이용하면 boolen 값을 얻을 수 있다. check_num.test(str); //숫자 return 값 true / false check_eng.test(str); //영문 return 값 true / false check_spc.test(..

회사에서 진행하였던 작업이며, 사이트의 Rolling 배너들을 효율적으로 관리하기 위해 제작된 slider plugin이다. Carousel.js Carousel.js는 es6++ 문법으로 작성된 Carousel module이다. slider, fade등의 기능들을 지원하며, 사이트의 배너 관리를 위하여 제작 Demo : https://ryujun.github.io/demos/JavaScript/Carousel/ Github : https://github.com/RyuJun/Carousel.js 지원 chrome, firefox, while 등등의 모던브라우저 및 ie9 버전 이상에서 지원함 ( ie9 에서는 transition이 적용 되지 않아서, Motion등이 default로 적용됨 ) 설치 및 사..

ES6++ 지원브라우저 현황 ES6++ 지원 브라우저 현황을 자세하게 볼수 있는 곳이 있어서 공유 해본다! 아래 URL로 들어가면 컴파일러 /폴리필 부터시작하여 데스크탑 브라우저 및 서버 / 런타임 / 모바일까지 한눈에 ES6++ 문법과 함수들 지원여부를 알 수 있다. https://kangax.github.io/compat-table/es6/

재미있는 작업을 해서 올려본다.. 회사에서 진행하였던 작업이며, Canvas를 통해 마치 복권을 긁는듯한 모션을 보여주는 js 모듈이다. Demo : https://ryujun.github.io/demos/JavaScript/lotteryScratch/ Github : https://github.com/RyuJun/lotteryScratch lotteryScratch.js lotteryScratch.js는 HTML5 canvas를 사용하여 제작되었다. 마치 복권을 긁는 듯한 이벤트를 처리해주는 자바스크립트 라이브러리 이며, 브라우저에서 각종 이벤트 페이지 제작에 사용될 수 있다. 지원 chrome, firefox, while 등등의 모던브라우저 및 ie9 버전 이상에서 지원함 설치 및 사용방법 일반 웹 ..

Axios인스턴스와 async/await을 통한 콜백 지옥 탈출 LoL-state 프로젝트를 진행하며 Riot API 서버에 접근하여 데이터를 받아오는 통신부분은 Promise 기반의 Axios로 처리했다. 기존 비동기 코드의 콜백지옥을 훌륭하게 탈피한 Promise이지만 작업을 하다보니 처리가 애매한 부분이 생겼다. import axios from 'axios'; const ApiDefault = { url : "https://kr.api.riotgames.com/lol", key : "XXXXXXXXXXXXXX" } getLOLData = () => { let summonerUrl, matchUrl, leagueUrl; if(this.state.input.length { matchUrl = `${Ap..

Webpack Proxy 설정으로 CORS 도메인 문제 해결 CORS (Cross-Origin Resource Sharing) 란? 웹브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스팩이다. 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로, 교차 출처 자원 공유(Cross-Origin Resource Sharing)라는 이름으로 표준화가 되었다. Webpack Proxy 설정으로 CORS 도메인 문제 해결 웹 개발 시 JavaScript 를 통해 http 요청을 날리면 콘솔창에 에러가나면서 실패한다. 이 에러를 간단하게 말하자면 동일 출처 정책으로 인해 같은 도메인이 아니라면, 요청받은 도메인 헤더에서 CORS를 활성화하지 않는이상 브라우저 단에서 ..

원시타입(primitive type)과 참조타입(reference type) JavaScript의 자료형에는 두가지 형태가 존재한다. 원시타입 (primitive type)과 참조타입(reference type) 두가지 타입이 존재하는데. 이 두가지 타입을 자세히 알아보자. 원시타입(primitive type) String, Number, Boolean, Null, Undefined와 같은 타입이며 ES6(ECMAScript 2015)에서Symbol타입이 추가되어 총 6개의 로 이루어진 타입이다. 원시타입은 메모리에 값을 그대로 저장한다. const a = 3100; let b = a; b = 3; console.log(a); // result 3100참조 없이 값이 변동되었을때 메모리에 값을 그대로 저..

highlight.js를 이용한 코드 하이라이팅 회사 업무도중 highlight.js 플러그인을 사용해야하는 상황이 생겼다. highlight.js는 코드의 하이라이트를 구현해주는 플러그인이다. 많은 언어와 다양한 스타일을 제공하고, 자동으로 언어를 감지하는 기능도 갖추고 있다. 현재 162개의 언어를 지원하며 CDN으로 이용시 22개의 언어를 지원한다. 검색 결과 CDN으로 사용하는 방법만 웹상에 가득해서, npm을 통한 모듈로서 highlight.js를 사용하는 방법을 기록해 놓는다. CDN 방식 먼저 CDN을 통한 highlight.js 사용방법은 아래 코드를 페이지 테그 사이에 위치시킨다. 기본적인 사용 방법은 페이지에 아래 코드를 입력하고 class부분에 언어를 넣어준다. body { backg..

CRA(create-react-app) Webpack sass-loader 기본 루트 설정CRA (create-react-app)으로 생성된 React 프로젝트는 다양한 컴포넌트 스타일링 방식이 있다.여러 방법이 존재하지만 기본 스타일루트를 지정해주어서 전역변수처럼 활용하는 스타일링 방법에대해 알아본다. src디렉토리 안에 styles라는 디렉토리를 생성하고 utils.scss파일을 만들어서,자주 사용 될 수도 있는 Sass 변수 및 믹스인을 따로 분리하여 전역변수와 같이 사용 할 때 utils.scss에 담긴 변수 및 믹스인을 사용하려면, 위 코드처럼 상대경로를 쭉 입력해 주어야 하는 번거로움이 있다. 이부분은 필수 적인 작업은 아니지만, 해두면 좋을 수 있는 작업이다.Webpack에서 Sass를 처리..

Array.prototype.splice()Array.prototype.splice() 메서드는 배열내 요소를 삭제, 추가, 변경이 자유롭게 가능하다. let months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at 1st index position console.log(months); // expected output: Array ['Jan', 'Feb', 'March', 'April', 'June'] months.splice(4, 1, 'May'); // replaces 1 element at 4th index console.log(months); // expected output: Array ['Jan'..

Array.prototype.unshift()Array.prototype.unshift() 메서드는 새로운 요소를 배열의 맨앞쪽에 추가한 뒤, 합쳐진 배열을 반환한다. let array1 = [1, 2, 3]; console.log(array1.unshift(4, 5)); // output: 5 console.log(array1); // output: Array [4, 5, 1, 2, 3] 반환값메서드를 호출한 배열과 추가된 배열값이 합쳐진 배열예제코드 let arr = [1, 2]; arr.unshift(0); // result of call is 3, the new array length // arr is [0, 1, 2] arr.unshift(-2, -1); // = 5 // arr is [-2, ..

Array.prototype.shift()Array.prototype.shift() 메서드는 배열의 첫번째 요소를 제거하고, 제거된 요소를 반환한다. arr.shift(); 반환값배열에서 제거된 첫번째 요소를 반환한다. 빈 배열일 경우 undefined를 반환한다.예제코드 let myFish = ['angel', 'clown', 'mandarin', 'surgeon']; console.log('myFish before: ' + myFish); // "제거전 myFish 배열: angel,clown,mandarin,surgeon" let shifted = myFish.shift(); console.log('myFish after: ' + myFish); // "제거후 myFish 배열: clown,mand..