매료매료의 개발 이야기

vw(viewport width)

- 브라우저의 크기에 맞게 반응

- width에 사용

- viewport값의 100분의 1(ex. 전체 width가 1000px 일경우 1vw는 10px가 됨)

- IE9부터 지원

vh(viewport height)

- 브라우저의 크기에 맞게 반응

- height에 사용

- viewport값의 100분의 1(ex. 전체 height가 1000px 일경우 1vh는 10px가 됨)

- IE9부터 지원

* vmin/vmax

- vh,vw 중 더 작은것을 찾아 적용/vh,vw 중 더 큰 것을 찾아 적용

- 실무에서 거의 사용x

calc

- css속성값을 계산식으로 지정

- +, -, *, / 연산자 사용가능

- 중첩 사용 가능

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

- vw, vh와 좋은 시너지를 발휘

// 헤더영역이 50px이고, 컨텐츠 영역을 헤더를 제외할 부분으로 하고 싶다면
height: cacl(100vh-50px);

* 위 요소를 사용할 때는 하위 브라우저에서도 반영이 되게 fallback(대체 스타일 시트)를 같이 써주면 좋다.
.org-box {
	height: 100%;
    height: 100vw;
}

em

- 폰트를 기준으로 비례되는 크기

- 1em은 부모의 폰트 크기로 계산 (ex. 부모폰트의 크기가 10px이면 1em은 10px가 됨)

- 계산이 번거로움

- IE3부터 지원

rem

- 폰트를 기준으로 비례되는 크기

- 1rem은 html 최상위 요소인 root element 폰트 크기와 비례됨

- IE9부터 지원

// html의 폰트사이즈를 62.5%로 지정해둘 경우
// 1rem = 10px가 됨(브라우저가 저장해주는 기본 폰트 사이즈는 16px 이므로)
html {
	font-size: 62.5%;
}

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxN0QyOTY2NjI0MzAxMUU4OENCMTkwNTRGOTUzNkNGMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxN0QyOTY2NzI0MzAxMUU4OENCMTkwNTRGOTUzNkNGMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE3RDI5NjY0MjQzMDExRTg4Q0IxOTA1NEY5NTM2Q0YxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE3RDI5NjY1MjQzMDExRTg4Q0IxOTA1NEY5NTM2Q0YxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+B9qswwAAAJNJREFUeNrs1jEKQjEQBNDZIKROYfFLwU5yEK/gXTzCr2xsvFQ6IVYBLxBEAsE4OcQKwg7Mst1ju5WU0hHAjV2glze7xhjPQvAZQlgYNa21hpwzROTg5mWa2Iz3Hs5NCjuHH8dAAw000EADDTTQwD8Ax4Yjl1L2fIbVlN47xhgfrvcJnmqtF3areNmLvfLVf3wFGABm2ybAqw1QMAAAAABJRU5ErkJggg==',

img의 src가 위와 같은 긴 코드가 들어간 경우는 base64 인코딩 방식을 사용하는 것

Base64는 데이터 64진법을 나타내는 것.

작은 이미지 파일을 인라인으로 작성하므로 서버에 요청하지 않고 이미지를 사용 할 수 있음. 

이미지 파일을 base64로 인코딩 후, 결과를 복사해 사용하면 됨.

// 기본 형태
data:[<mediatype>][;base64],<data>

// HTML ➡︎ img태그 src  
<img src="data:image/<이미지확장자>;base64,<data코드>")

// CSS ➡︎ background-image  
background-image: url('data:image/<이미지확장자>;base64,<data코드>')

장점 : 간단한 구현, 빠른 로딩속도

단점 : 코딩 라인 증가, 용량이 커짐

View Asset Component

: 렌더링에 필요한 JSX와 스타일을 관리하는 컴포넌트

View컴포넌트에서 JSX 영역을 Props Object로 추상화 하고, JSX를 VAC로 분리해서 개발하는 설계 방법

1. 다운로드한 SVG 파일의 소스 코드를 URL-Encorder for SVG 사이트에서 Data URIs 포맷으로 변환한다.
2. 변환된 URL을 CSS의 background-image: url() 값으로 적용한다.

// HTML
<i class="icon_play"></i>


// CSS
body {
  background-color: #303033;
}

.icon_play {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23fff' d='M26.878 20.844l-12.342 7.837c-.466.296-1.084.159-1.38-.308-.102-.16-.156-.346-.156-.536V12.163c0-.553.448-1 1-1 .19 0 .376.054.536.155l12.342 7.838c.466.296.604.914.308 1.38-.079.124-.184.23-.308.308z' transform='translate(-100 -326) translate(100 326)'/%3E%3C/svg%3E%0A");
  background-size: cover;
}

도커

- 기술적인 개념이자 도구

- 이미지를 컨테이너에 띄우고 실행하는 기술

- 1개의 컨테이너를 관리하는데 최적

쿠버네티스

- 도커를 관리하는 틀

- 도커를 기반으로 컨테이너를 관리하시는 서비스

- 여러 개의 컨테이너를 관리하는데 최적

https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f

의존성

node_modules // 실제 설치된 의존성들이 위치한 곳

package.json // 어떤 의존성이 있는지를 알려주는 파일

package-lock.json // 실제로 프로젝트에 설치되어야 하는 의존성의 정확한 버전 등을 관리. 여럿이서 작업하는 프로젝트가 항상 동일한 의존성을 가질수 있도록 하는 역할 --> git과 같은 버전 관리 시스템에서 관리해야하고, 변경된 package-lock.json을 push하게 된다면 변경하고자 하는 의존성들만 update되었는지 체크가 필요!

dotenv?

nodejs로 개발 할경우 .env라는 파일에 중요한 정보(db connection, port 및 레디스 설정 ... 등)를 환경변수로 저장하여 정보를 관리.

(* java의 경우 properties를 만들어서 운용)

(.env 파일 대신 .yml, .ini. .json 의 방법도 존재함)

.gitignore 파일에 추가 필요

.env 파일에 변수명 정의하기

REACT_APP_API_SERVER_TYPE = local
REACT_APP_API_SERVER_PATH = /maeryo
REACT_APP_API_SERVER_URL = http://localhost:4100
REACT_APP_API_SERVER_TIMEOUT = 20000

변수명은 자유롭게 정의하면 됨.

.env 파일에서 작성한 환경변수를 사용하기

process.env.PORT

maria DB

1. nextval 사용
-> auto_increment 컬럼에서는 사용불가
2. selectkey 
-> mybatis 에서만 사용가능
3. last_insert_id() 사용
-> SET @REO_MANAGE_SEQ = SELECT LAST_INSERT_ID() + 1;
로 사용할 경우 모두 정상동작은 하지만,
-> 문제는 seq값이 기하급수적으로 증가하게됨.
-> SET @REO_MANAGE_SEQ = (
SELECT LAST_INSERT_ID() + 1
FROM orgn_simul_manage
WHERE SEQ = #{simulManageSeq}
);
-> 로 사용할 경우 duplicate key 오류 및 subquery가 여러 행을 리턴하는 오류

var 는 function-scoped(함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.) 이고, 

// var는 function-scope이기 때문에 for문이 끝난다음에 i를 호출하면 값이 출력이 잘 된다.
// 이건 var가 hoisting이 되었기 때문이다.
for(var j=0; j<10; j++) {
  console.log('j', j)
}
console.log('after loop j is ', j) // after loop j is 10


// 아래의 경우에는 에러가 발생한다.
function counter () {
  for(var i=0; i<10; i++) {
    console.log('i', i)
  }
}
counter()
console.log('after loop i is', i) // ReferenceError: i is not defined

그럼 항상 function을 만들어서 호출해야 할까? 그건 아니다.

javascript에서는 IIFE(즉시실행함수표현; immediately-invoked function expression, pronounced "iffy")라는것이 있다.

IIFE로 function-scope인거 처럼 만들 수가 있다.

// 이 코드를 실행하면 에러없이 after loop i is 10이 호출된다.
(function() {
  for(i=0; i<10; i++) {
    console.log('i', i)
  }
})()
console.log('after loop i is', i) // after loop i is 10

// i가 호이스팅되어서 global variable이 되었기 때문이다.

// IIFE는 쓰는데 호이스팅을 막기 위해서는 use strict를 사용
// 아까랑 다르게 실행하면 i is not defined라는 에러가 발생한다.
(function() {
  'use strict'
  for(i=0; i<10; i++) {
    console.log('i', i)
  }
})()
console.log('after loop i is', i) // ReferenceError: i is not defined

let, const는 block-scoped(모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.) 이다.

javascipt에는 그동안 var만 존재했기 때문에 아래와 같은 문제가 있었다.

// 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않는다.
var a = 'test'
var a = 'test2'

// hoisting으로 인해 ReferenceError에러가 안난다.
c = 'test'
var c

위와 같은 문제점으로 인해 javascript를 욕 하는 사람이 참 많았다.

하지만 let, const를 사용하면 var를 사용할때보다 상당히 이점이 많다.

두개의 공통점은 var와 다르게 변수 재선언 불가능이다.

let은 변수에 재할당이 가능하지만,

const는 변수 재선언, 재할당 모두 불가능하다.

// let은 선언하고 나중에 값을 할당이 가능하지만
let dd
dd = 'test'

// const 선언과 동시에 값을 할당 해야한다.
const aa // Missing initializer in const declaration

// 단, const는 객체로 정의할 경우, 하위 값들에 대한 제약은 발생하지 않는다.
const unit = {
	model: 'aa"
}
unit.model = 'dd';
console.log(unit.model); // 'dd'

결론

변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다. 원시 값의 경우, 가급적 상수를 사용하는 편이 좋다. 그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

var와 let, 그리고 const는 다음처럼 사용하는 것을 추천한다.

• ES6를 사용한다면 var 키워드는 사용하지 않는다.
• 재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
• 변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 보다 안전하다.

변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많다. 그리고 객체는 의외로 재할당을 하는 경우가 드물다. 따라서 변수를 선언할 때에는 일단 const 키워드를 사용하도록 하자. 반드시 재할당이 필요하다면(반드시 재할당이 필요한지 한번 생각해 볼 일이다.) 그때 const를 let 키워드로 변경해도 결코 늦지 않는다.

Promise

- 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값

- 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체

- chaning을 통해 비동기 작업을 순차적으로 실행할 수 있음. (콜백과 비교하였을때 원하는만큼 .then을 호출할 수 있음)

- resolve, reject는 async/await 문법이 생긴후로 쓸모없어짐. -> Promise.then / catch가 거의 필요없음.

Async

- function() 앞에 async 키워드를 추가하면 await 키워드가 비동기 코드를 호출할 수 있게 해주는 함수

- 언제나 promise를 반환함.

Await

- async 함수 안에서만 동작

- 자바스크립트는 await 키워드를 만나면 Promise가 처리될때까지 기다림.

- 최상위 레벨 코드에선 사용할수 없으나, 익명 async 함수로 코드를 감싸면 사용가능.