익명의 개발노트

1. 바벨의 기능 1) ECMA6이상의 버전을 ECMA5로 변환해주는 자바스크립트 컴파일러 2) 코드압축, JSX문법, 타입스크립트와 같은 정적인 언어, Proposal 단계에 있는 문법 등을 사용 할 수 있다. 2. 사전 설치 준비물 1) 핵심인 @babel/core 2. 바벨을 실행하는 여러가지 방법 1) @babel/cli로 실행하기 2) 웹팩에서 babel-loader로 실행하기 3) @babel/core를 직접 실행하기 4) @babel/register로 실행하기 3. cli로 실행하기 먼저 예제에 필요한 플러그인을 설치한다. npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transf..

업무에 있어서 내가 가지고 있는 전체 지갑리스트 중 내가 가지고 있는 지갑리스트를 제외하면, 내가 가지고 있지 않은 지갑리스트가 필요하다. 없는 부분만 API로 요청을 하여, 받아와야하기 때문임. 기존에 for문을 두번 썼기에... 복잡도도 O(n^2) 성능이 엄청 후달린다. for(let i=0; i !getArrayList.includes(x));

오픈 소스이고, 코드 퀄리티를 위해 사용한다. 소프트웨어 품질 관리 기준에 따르면, 1) Reliability - 버그 2) Security - 해커나 잠재적인 보인 이슈에 대해 보여준다. 3) Maintainability - Code Smell, 사소한 이슈지만 추후 이슈가 될 수 있는 사항들이다. 4) Coverage - Unit Test 결과 및 테스트하지 않은 코드 분기, Line등을 확인가능하다. 5) Duplications - 코드 중복 6) Size - 코드에 대한 여러가지 정보를 제공 (LOC, Functions, Class수등) 7) Complexity - 순환 복잡도등을 체크 위 사항들을 대시보드 형식으로 사용자에게 보여줌으로써 소프트웨어 엔지니어로 하여금 좋은 퀄리티의 코드를 작성할 ..

context API는 리액트 내장 모듈이다. 기능은 리덕스 처럼 전역적으로 상태를 관리할 수 있게 해준다. 리덕스, MobX 등등 상태관리 도구라고 생각하면 좋을 듯 싶다. 기본적으로는 사용하고자 하는 곳에 createContext()로 선언해서 사용하며, 인자값으로 기본값을 넣을 수 있다. const UserContext = React.createContext({ username: 'unknown', helloCount : 0, onHello : () => {} }); 위 값은 기본값이다. class App extends Component { constructor(props){ super(props); this.state = { username : 'Mike', helloCount : 0, onHel..

1. 형제 컴포넌트간에 데이터를 전달하고 싶을때, 이벤트 버스를 사용한다. 유지보수성을 위해서 이벤트 버스를 util 폴더에다가 하나의 js파일로 생성해서 필요할때 마다 import해서 사용한다. //EventBus.js import Vue from 'vue'; export const EventBus = new Vue(); 이벤트를 전달하고자하는 쪽, 받는쪽 둘다 이벤트 버스를 사용하며, 전달하고자하는 쪽은 EventBus.$emit('이벤트명', 전달하고자 하는값) 받는 쪽은 EventBus.$on('이벤트명', 콜백함수에 받고자하는 값 인자로 넣기) 사용하면 된다. 보내는 쪽 EventBus.$emit('value',this.marketPrice.formattedPrice); 받는 쪽 beforeUp..

1. spa를 구현하기 위한 2가지 기능 1) js에서 브라우저로 페이지 전환 요청을 보내는데, 서버로 요청을 보내지 않아야 함. 2) 브라우저의 뒤로가기 버튼 처럼 사용자의 페이지 전환 요청을 js에서 처리할 수 있다. 이때도 서버로 요청을 보내지 않아야 한다. 이런 기능을 만족하는 api는 pushState, replaceState, popstate이벤트이다. 우선 브라우저 히스토리에는 state값을 저장 할 수 있는 stack이 존재한다. import React, { Component } from 'react'; // import Box from './box4/Box4'; // import './App.css'; class App extends Component { componentDidMount(..

1. 일반 css사용 우리가 아는 일반적인 css 이다. 단점은 재사용성에 불리하고, 빌드시 css가 하나의 파일로 합쳐지기 때문에 클래스 네임이 중첩되면 css 가 꼬여버린다. 2. css-module사용 리액트에서 css파일은 하나로 합쳐지기 때문에 클래스 네임이 같으면 css가 꼬여버리기 때문에 모듈시스템을 사용하면, 클래스 네임이 중첩되어도 css는 꼬이지 않는다. [fileName].module.css 로 이름을 짓는다. import React from 'react'; import style from './Button2.module.css'; function Button({size}){ if(size === 'big'){ return 큰 버튼; }else{ return ( 작은 버튼; ) } }..

1.image import error처리 뷰에서 컴포넌트에서 sass, css 사용시 img src=""경로주소를 입력해도 화면에서 안 뜨고 에러가 나는 경우가 있다. This relative module was not found: ~~~~ 다른 곳에는 나오는데 해당페이지에서 계속 에러가 나는 경우 아래와 같은 방식(~@)으로 해결 할 수 있다. src="~@/assets/images/popup-wallet.svg" 2.multi button event handler 위와 같이 각각의 버튼 클릭시 열렸다가 닫히는 기능을 구현하고자 할때 어떻게 이벤트를 처리해야하나?? 멀티 인풋처럼, 네임을 지정해줘서 처리를 해야하는가?? 통상 토글이벤트 구현시, 단일은 script부분에서 data에 button: fal..

보통 하나나 두 개 이상의 비동기 작업을 순차적으로 실행해야 하는 상황을 흔히 보게 되고, 순차적으로 각각의 작업이 이전 단계 비동기 작업이 성공하고 나서 그 결과값을 이용하여 다음 비동기 작업을 실행해야 하는 경우를 의미하 는데 이런경우 프로미스 체인을 사용한다. 작성 순서대로 앞에 작업이 끝나면 실행 된다. 내가 업무에서 사용한 내용을 예로 들면, 하나의 작업이 끝난 다음에 실행될 수 있도록. static example(){ return new Promise(function(resolve,reject){ backendAPI.getWallet(function(res){ (..생략) this.test(); resolve(); },function(err){ (..생략) }) }) } static test(..

1. new Promise( function(resolve, reject)) 패턴 프로미스를 사용할때는 2가지 패턴이 있다. new Promise(function(resolve, reject)){}, Promise.resolve(function()) 에러처리를 할때 reject를 처리하냐 안하냐에 따라서 위의 두가지 방법중 하나를 선택하면 좋을 것 같다. 우선 백엔드에서 가져 온 값이 프로미스 기반이기때문에 A->B->C 로 전달해서 써야하는 상황이 왔다. C는 뷰를 담당하는 화면이고 , A,B는 비지니스 로직단이다. 따라서 C는 vue파일로 되어있고, A,B는 js파일로 구성되어 있다. A->B로 전달 클로져로 전달 받았는데, B에서 C로 갈때 그냥쓰면 undefined가 뜬다. C에서는 우선 프로미스..