매료매료의 개발 이야기

버전 컨트롤 시스템 X

Automated deploy system, build system X

모니터링 시스템 X

테스터 X, 테스팅 environment, staging environment X

유닛 테스트 X, 코드 리뷰 X

버그 트랙킹 시스템 X

개발자에게 웹 디자인을 시킨다든지, 하드웨어 서포트를 요구

<ol>

- Ordered List, 순서가 있어야 하는 목록 : 중요도 표시에 활용가능

- 자식으로 <li> 만 포함 가능

- display:block

- 속성(start:시작값, type:항목번호유형(a,A,i,l,1), reversed:역순정렬(IE X)) 

<ul>

- Unordered List, 순서가 필요하지 않은 목록

- 자식으로 <li> 만 포함 가능

- display:block

- <ol> 보다 <ul>을 많이 사용함.

<li>

- List Item, 목록 안에 있는 각각의 항목

- 단독으로 사용 불가

- display:list-item

- 속성(value:시작값)

<dl>

- Description List, 용어와 설명의 전체 집합

- <dd>, <dt>만 자식요소라 가질수 있음. -> 많이 활용되지 못함.

- key/value 형식을 표현할 때 유용함.

- display:block

<dt>

- Defintion Term, 용어를 명시함

- display:block

<dd>

- Definition Details, 용어를 정의함

- display:block

마이그레이션이란?

단순하게 서비스 중인 한 어플리케이션 또는 모듈 등을 전혀 다른 환경(OS, 미들웨어, 하드웨어 등)

에서도 돌아갈 수 있도록 전환하는 것을 의미

예를 들어, C로 개발된 솔라리스 OS 기반 프로그램을 시스템이 노후화되어

리눅스 기반의 새로운 시스템에서 돌아갈 수 있도록 하려면

솔라리스 OS에서 참조하던 라이브러리, API(함수) 등에 대해

동일한 역할을 하는 리눅스 기반의 그것으로 1:1 변환/매핑하는 작업이 필요

(이런 것이 단순하게 바라본 마이그레이션의 의미. 다른 측면에서 C-->Java로 가는 포팅하고는 다른 개념)

스프린트(sprint)

- 사전적 의미 : 단거리 전력질주.

- 작은 기능 하나에 대한 계획, 개발, 테스트, 기능 완료 주기

- 보통 1주 ~ 4주 사이의 기간 동안 스프린트를 진행. 스프린트 기간 동안, 스크럼을 수행하는 구성원들은 단거리 전력질주(sprint)를 하듯 집중해서 자신의 업무를 수행

- 스프린트 기간이 끝나면 스크럼 구성원은 해당 스프린트때 무엇을 했는지 리뷰, 해당 스프린트를 돌아보며 드는 생각을 함께 공유

애자일(agile)

- 사전적 의미 : 민첩한, 기민한, 재빠른, 날렵한

- 요구사항이 변화하는 것을 당연한 전제로 두고, 변화하는 요구사항에 민첩하게, 기민하게, 재빠르게, 날렵하게 대응하며 소프트웨어 개발

스크럼(scrum)

- 사전적 의미 : 럭비에서 반칙이 있을 때, 양편 선수가 밀집하여 서로 팔을 꼭 끼고 뭉치는 일. 그 사이로 굴려 넣은 공을 자기편 쪽으로 빼냄.

- 프로젝트 관리를 위한 상호, 점진적 개발 방법론이며, 애자일 소프트웨어 공학 중의 하나

SVG(Scalable Vector Graphics)
- XML기반 표준 벡터 그래픽 포맷
- 해상도에 독립적(화면깨짐x, 선명)
- 모든 웹브라우저 지원O
- DOM이 많을수록 느림.

Canvas
- PIXEL로 드로잉
- 텍스트 랜더링에 약함
- 모든 웹브라우저 지원X(웹사이트에 적합X)
- 높은 퍼포먼스

구글 이스터 에그
/* 기울기 처리 + 회전 */
body {
  transform: rotate(1deg); // 1도 회전
  animation-name: roll; // roll이라는 이름의 애니메이션을 설정한다.
  animation-duration: 4s; // 애니메이션 동작시간
  animation-iteration-count: 1; // 애니메이션 반복 횟수
}

@keyframes roll { // 애니메이션의 시작부터 종료 부분까지 어떠한 동작을 할 것인지 지정
  // 100%는 종료부분(to로 지정가능) - 0%는 시작부분(from로 지정가능)
  100% {
      transform: rotate(360deg)
  }
}

/* 깜빡임 처리 */
@keyframes blink {
  80% {
  	opacity: 0.0
  }
}

span {
	animation: blink 1s steps(1, end) 0s infinite
}

1. 뷰(Vue)
- CDN 파일 로딩으로 사용, 쉬움
- 공식 라우터, 상태 관리 라이브러리 존재
- HTML파일에 마크업을 작성하는 것이 기본 설정
- 콧수염 괄호 {{ }} 로 데이터 바인딩
- Directive 라는 특별 HTML Attritbute를 이용하여 template 기능을 확장.
- data를 vue 인스턴스에서 접근해서 변경할 수 있다.
- template과 render function을 모두 사용.
- 빠른 렌더링과 더 작은 용량
- MVVM 패턴(ViewModel): 백엔드에서 넘어온 데이터를 model 에 담아 View로 넘어가는 중간 지점
- 컴포넌트 간의 직접적인 통신을 불가능하게 되어있음(하위->상위->하위 ; 이런식으로 통신해야함)
- 상태관리 라이브러리(Vuex) ;; inapp과 비슷하다고 생각됨...
- 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴
- state: 컴포넌트 간에 공유할 data
  - getters : 변경된 state값을 받아옴
  - mutations : state값을 변경하기 위한 메서드를 정의(setters라고 생각하면 쉬움)
- view: 데이터가 표현될 template
- actions: 사용자의 입력에 따라 반응할 methods
- 네비게이션 가드
- 뷰라우터로 특정 url에 접근할 때 해당 url의 접근을 막는 방법
- 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할때 사용하는 기술
- 전역가드 : 어플리케이션 전역에서 동작(beforeEach)
- 라우터 가드 : 특정 URL에서만 동작(beforeEnter)
- 컴포넌트 가드 : 라우터 컴포넌트 안에 정의하는 컴포넌트 가드(beforeRouteEnter, beforeRouteUpdate. beforeRouteLeave)
- v-model: Form요소 개발시 사용
- v-bind: 데이터 속성을 해당 HTML 요소에 연결할 때 사용
- v-on: 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용

--------------------------------

2. 리액트(React)
- Webpack 같은 모듈 번들러를 사용해서 프로젝트 구성해야함
- Component 라는 개념에 집중이 되어 있는 라이브러리
- 조합 : props와 state를 받아 html를 랜더
- props(불변)
  - 컴포넌트에 전달해주는 값
  - this.props를 통해 접근가능, 부모컴포넌트로부터 받은 데이터는 자식컴포넌트에서 프로퍼티로 사용가능
- state(가변)
  - 컴포넌트 내부적으로 들고 있는 값
- lifeCycle API
  - 컴포넌트 마운트/업데이트/언마운트 전후로 처리할 로직을 설정하거나 리렌더링을 막아줌.
- props, state가 바뀌면 컴포넌트는 리랜더링됨.
- 생태계가 넓고 사용하는곳이 많음
- 내장 기능(HTTP 클라이언트, 라우터, 심화적 상태 관리 etc)
- 페이스북에서 만듬(Virutal DOM: Model을 Mutate 하지말고 기존DOM을 날리고 새로 만든다는 관점)
- 플젝이 커질수록 빛을 발하고, 테스팅이 수월
- web과 native 앱 개발에 모두 사용 가능
- 상태관리 라이브러리(Redux, Mobx)
- 상태관리를 컴포넌트 바깥에서 하기 위해 사용
- 단방향 데이터 바인딩
- JSX
- 속성을 가진 트리 구조를 정의
- Javascript와 XML을 합침으로 탄생 - XML을 허용하기 위한 Javascript의 확장 문법
- 단순히 xml만 허용하는 것이 아닌, javascript의 변수나 프로퍼티의 값의 바인딩에 대한 추가적인 기능도 제공
- script/type="text/jsx"로 선언하거나, .jsx 파일을 include해야함.
- 주석사용 : {/* */}
- <Fragment></Fragment> 사용 : v16.2
- 기존 array 관련 메소드 사용
  - push, pop... : 사용 X
  - map, filter, concat : 사용 O
- 라우팅 : react-router, Next.js

리액트 실습 - Virtual DOM을 이용하여 필요한 경우만 DOM을 조작 <!-- React Library --> <script src="https://fb.me/react-0.13.3.js"> </script> <!-- In-browser JSX transformer --> <script src="https://fb.me/JSXTransformer-0.13.3.js"> </script> <script type="text/jsx"> var HelloWorld = React.createClass({ render: function(){ return ( <p> 안녕, <input type="text" placeholder="이름을 입력해주세요"/>! 지금 시간은 {this.props.date.toTimeString()} 입니다 </p> ); } }); setInterval(function(){ React.render( <HelloWorld date={new Date()} />, document.getElementById('test') ); }, 500); </script>

--------------------------------

3. 앵귤러(Angular)
- 구글이 지원
- Webpack 같은 모듈 번들러를 사용해서 프로젝트 구성해야함
- 웹플젝에서 필요한 도구가 내장(라우터, HTTP 클라이언트 etc)
- TypeScript와 함께 사용.
- 양방향 데이터 바인딩
- 개발자가 자신의 용도에 맞게 HTML Tag를 제작하여 사용할 수 있게 함.(커스텀 태그를 지원)
- DOM 조작이 어려움



--------------------------------

4. 백본(Backbone)
- 자바스크립트 라이브러리에 의존(underscore, jquery 에 dependancy함)
- Model-Collection-View 3가지 요소를 구성하여 웹애플리케이션을 구현
- 경량 애플리케이션에 적합
- 진입장벽이 낮음
- 일부분에 사용할때 빛을 발휘함.
- SPA(Single Page Application)에 초점을 맞춘 프레임워크
- 별도의 백엔드 환경이 필요없이, RESTFUL API구현으로 가능.
- Event, Model, Collection, Router, History, Sync, View 등의 하위모듈로 구성
- Collection
- 일종의 목록 데이터. Array형태의 JSON객체집합을 받아서 구성. 루프를 돌며 지정된 Model 형태에 맞는 인스턴스 구성
- model의 집합. view와 연결되어, model에 변화가 생길 때 손쉽게 view(UI)를 갱신할 수 있음
- Model
- Model은 Collection에 포함되는 개별 단위의 Data 객체
- 어떻게 활용하느냐에 따라 Collection 없이 단독으로 불러와서 사용할 수도 있음
- View
- 애플리케이션을 시작할 때 new 생성자를 통해 Backbone.View 객체 인스턴스를 만듬.
- 데이터 변화에 대한 표현도 Backbone.View 객체를 통해 드러냄
- DOM Element를 Backbone.View 인스턴스로 감싸는 이점은 Backbone.Model과 연동을 통해 Model의 변화에 대해 View의 변화를 자동적으로 적용시킬 있다는 점
- Model을 연동시키지 않더라도 Backbone.View가 주는 편리한 Event, Method 관리 방식을 적용시킬 수 있음
- Event
- Model이나 Collection에 on 메소드를 이용해서 손쉽게 바인딩할 수 있으며 원하는 경우 off로 unbind


--------------------------------

5. 엠버(Ember)
- 방대한 라이브러리, 서포트 네트워크
- 장기적인 프로젝트에 적합





=================================
그외 필요한사항 정리 [임시]

1. 프로미스(Promise)
- 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄.
- 3가지 상태를 보유
- pending(대기): 이행하거나 거부되지 않은 초기 상태
- fulfilled(이행): 연산이 성공적으로 완료됨
- rejected(거부): 연산이 실패함.
- 메소드
- catch : 에러처리시 사용, 끝에 사용!
- then : promise 객체의 fullfill/reject 인스턴스를 받아서 처리.
- finallly
- IE 지원x



2. 타입스크립트(TypeScript)
- 타입(제네릭)선언이 필요한 언어


3. 언더스코어(underscore.js)
- Collection이나 Array, Object와 같은 데이터 또는 데이터 집합체에 대한 Sort, Filter, Map 등의 연산에 특화되어 있는 라이브러리
- '_' 를 사용(jQuery가 $를 사용하는것과 같은 맥락)
-

4. require.js
- 자바스크립트 파일/모듈 로더
- https://d2.naver.com/helloworld/591319

"여러 종류 칼 중 과일 깍을 때는 과도를 사용하듯이, 용도에 맞는 기술을 사용하기 위해서는 배경지식이 필요하다."


CSS는 쉽고 간단하지만 갈수록 요구사항과 스펙이 복잡해지고, 그에 따른 유지보수도 힘들어지고 있다.
이를 극복하기 위해 CSS전처리기들이 등장하였는데, SCSS/SASS가 그것이다.

SASS(Syntactically Awesome Style Sheets)
- Ruby 언어 기반 (사용을 위해선 설치되어 있어야함)
- 변수($), 연산자, 조건문, 반복문 사용

SCSS(Sassy CSS)
- SASS와 CSS 사이의 차이를 좁히는 방향으로 변화하는 과정에서 등장
- 기존 문법틀은 CSS와 동일

Good

- 중복되지 않은 클래스 명으로 다이렉트로 CSS를 주는 것이 가장 좋다.

- 상속을 사용해라

Bad

- Universal 규칙을 피해라 * { ... }

- 쓸모없는 태그나 클래스를 붙이지 마라 .menu#id { ... }

- 자손 선택자를 피해라 : CSS에서 가장 느린 선택자

// display: flex;
컨테이너에 flex를 적용하는 것이 시작.
아이템들이 배치된 방향의 축을 Main Axis
Main Axis와 수직인 축을 Cross Axis 이라 한다.
Main Axis = 오뎅꼬치

// -------------------------------------------------------------------------------
// start of 배치(부모요소)
// -------------------------------------------------------------------------------

// flex-direction: 접두사(row-, column-)별 정렬 방향 지정
// 배치방향 설정: 아이템들이 배치되는 축의 방향을 결정
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.

// flex-wrap:  flex-direction과 자주 같이 사용됨.
// 줄넘김 처리 설정
// 컨테이너가 더이상 한줄에 담을 여유공간이 없을때 아이템 줄바꿈을 어떻게 할 것인가?
nowrap: 모든 요소들을 한 줄에 정렬합니다. 넘치면 삐져나감.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

// flex-flow
// flex-direction & flex-wrap 을 한꺼번에 지정할 수 있는 단축 속성
// flex-direction, flex-wrap 순으로 써주면 됨.
flex-flow: row wrap;

// -------------------------------------------------------------------------------
// end of 배치(부모요소)
// -------------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// start of 정렬(부모요소)
// -------------------------------------------------------------------------------

// justify-content: 가로 선상의 정렬 
// 메인축방향 정렬
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.(양 끝 요소들은 벽에 붙음)
space-around: 요소들 주위에 동일한 간격을 둡니다.
space-evenly: 요소들 둘레 + 양 끝에 균일한 간격.(* IE, Edge 미지원!!!)

// align-items: 세로 선상의 정렬 (전체) cf. align-self: 개별요소에 적용
// 수직축 방향 절렬
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.(텍스트 베이스라인 기준)
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

// align-content: 여러 줄 사이의 간격을 지정 cf. align-items: 컨테이너 안에서 어떻게 모든 요소들이 정렬하는 지정.
// 여러행 정렬
// flex-wrap: wrap이 설정된 상태에서 아이템들의 행이 2줄이상 되었을 때의 수직축 방향 정렬 결정하는 속성
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
space-evenly: 요소들 둘레 + 양 끝에 균일한 간격.(* IE, Edge 미지원!!!)
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

// -------------------------------------------------------------------------------
// end of 정렬(부모요소)
// -------------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// start of 플렉스 아이템에 적용하는 속성들(자식요소)
// -------------------------------------------------------------------------------

// flex-basis
// flex 아이템의 기본크기 설정(auto, %, px, rem, content)

// flex-grow (<-> flex-shrink)
// 아이템이 flex-basis의 값보다 커질수있는기 결정하는 속성
// flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다는 의미.

// flex : flex-basis, flex-grow, flex-shrink 세가지 속성을 한번에 쓸수있는 축약형 속성

// order : 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
// 배치순서