익명의 개발노트

예를 들어 회원가입하는데, 회원가입정보가 각기 다른 테이블에 저장된다면?? 비밀번호만 따로 저장된다고 치면, 로직을 어떻게 세워야하나? 기본정보 테이블 저장 후 비밀번호 테이블에 비밀번호를 기본정보테이블의 값을 가지고 FK로 저장할 것이다. 그냥 저장을 해버리면, 기본정보만 저장되고, 비밀번호는 저장되지 않는 경우가 발생할 수 있다. 이렇게 동시에 다른 테이블에 저장을 해야할 때는 트랜젝션을 이용해야한다. 트랜젝션의 중요한 4가지 속성이 있다. 원자성(atomicity): 트랜잭션은 모두 실행되거나 아예 실행되어서는 안된다. 성공적인 트랜잭션은 commit 하고 실패한 트랜잭션은 abort 한다. commit은 데이터베이스를 변경하여 영속적이게 하며, abort는 데이터베이스 변경을 undo 하거나 삭제..

mysql -u 유저명 -h 접속IP(DB IP) -p //ex) mysql -u username -h 127.0.0.1 -p

Sequelize는 자바스크립트 ORM이다. 간략하게 설명하면 백엔드에서 데이터베이스에 날리는 쿼리를 자바스크립트 객체와 함수로 처리한다. 일반적으로 쿼리 날려 사용하는 것보다는 생산성이 더 뛰어나다고 한다. 단점은 쿼리가 복잡해지면 ORM으로 표현하는데 한계가 있고, 성능이 raw query에 비해 느리다. 대부분의 ORM에서는 이런 경우를 대비하여 raw 쿼리를 실행할 수 있는 방법도 제공하고 있다. DDL, DML도 정의할 수 있다. 기본작동원리는 모델설정 => DB migration => DB반영 npm install --save sequelize Sequelize는 Promise 기반이며, 이것을 사용하기 위해서는 DB가 설치되어야 한다. mysql사용시 mysql 모듈을 설치해주어야 한다. n..

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. 정의 : 함수의 실행을 중간에 멈추고 재개 할 수 있는 기능 2. 장점 1) 필요한 순간에 값을 계산하기때문에 불필요한 메모리를 낭비를 방지할 수 있다. 2) 실행을 멈추고 재 시작할 수 있기 때문에 멀티태스킹이 가능하다. 3. 사용법 1) function* 함수명(){} 으로 *를 사용하여 쓴다. 2) yield를 이용해서 함수를 멈출 수 있다. 3) yield 오른쪽에는 iterator값이 들어간다. 4) 결과값은 제네레이터 객체를 반환한다. 5) 제네레이터 객체는 next, return, throw 메서드를 가지고 있다. function* f1(){ yield 10; yield 20; return 'finished'; } const gen = f1(); 위 함수를 실행하려면, gen.next(..

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(..