2017년 12월 4일 월요일

SWIFT 란?

SWIFT 란?
 - 애플에서 자사 제품 개발에 활용하고 만든 프로그래밍 언어
 - 안전을 우선으로 하는 프로그래밍 패턴 지향
 - 옵셔널, 제네릭, 프로토콜, 튜플, 익스텐션 등 새로운 기능 도입
 - 오프소스 공유로 애플 플랫폼 외 다양한 플랫폼에서 사용 가능
 - ARC (자동 참조 카운팅) 지원으로 쉬운 메모리 관리
 - 컴파일 언어로 컴파일 성능은 프로그램 실행 속도 향상 및 빌드 시간 단축에 최적화
 - 코드 문법의 자유도가 높아 자신이 원하는 방식으로 코딩 가능하나 가독성이 떨어짐

SWIFT 언어적 특징
 - SAFE : 옵셔널, guard 구문, 오류처리, 타입통제 등을 통한 안전한 프로그래밍 구현
 - FAST :  C 언어 수준의 실행속도 최적화 및 빠른 컴파일러 구현
 - EXPRESSIVE : 세련된 문법
 - 다양한 프로그래밍 패러다임 : 명령형, 함수형, 객체지향, 프로토콜 지향 패러다임




2017년 10월 16일 월요일

Vue 2.x - 시작하기

프론트엔드 자바스크립트 프레임워크 Vue 를 배워보자. 오늘부터 시작!!! 
시작하기에 앞서 Vue의  특징에 대해 알아보자.

구글링을 통해 간략히 정리해보면..
 - 다른 프레임워크에 비해 작고 가벼우며 사용하기 간편
 - React 처럼 "뷰" 에만 초점을 두기 때문에 다른 라이브러리와 혼용하여 사용하기 용이
 - 서버사이드 렌더링 지원 등.

이외에도 많은 특징이 있겠지만 나머지는 직접 개발하면서 알아볼 생각이다.

1. 준비하기
 - Vue Devtools 설치 : Vue 앱을 보다 사용자 친화적으로 검사 및 디버그 가능
    github : https://github.com/vuejs/vue-devtools#vue-devtools
 
각 브라우저 별로 설치 방법이 작성되어 있다 . 난 크롬을 자주 사용하므로 Chrome Extenstion로 
설치하여 사용!!

 - Js debugging tool 설치 : 브라우저에서 실시간으로  JS, CSSS, HTML 코드를 확인할 수 있는 서비스
 
JSBin, JSFiddle, CodePen 등이 있으며 자주 사용하는 서비스 선택!
                                 
2. 설치하기
 - CDN : https://unpkg.com/vue/dist/vue.js

설치하는 방법에는 CDN, NPM, CLI 등이 있지만 일단 시작하는 단계이니 CDN으로 간편 설치!

3. JSBin 활용하여 Vue 로드 및 예제


"뷰" 안에 {{name}} 변수를 만든 후 script 에서  Vue 정의를 통해 data에 넣어 name 변수에 해당하는
값을 지정하니 Output에서 "hello, example"이 출력되었다.

여기서 중요한 것은 name의 값을 Vue 로 정의 했기에 {{name}}에 대입되었음!
아직까지는 쉽다...

참조 :
https://velopert.com/3007
https://kr.vuejs.org/

2017년 10월 11일 수요일

Git 파보자! - 이론편

Git ! 대체 무엇이길래 왜 Git! Git! 하는가? 
대충 개념과 사용법은 알지만 제대로 쓰고 있는지 의문이 들어 제대로 "파보기" 로 했다.

1. Git의 정의
 - 버전 관리를 위한 도구.

구글링을 통해 알아본 바 "버전 관리 도구"
그럼, 버전 관리의 의미는 무엇이고 왜 쓰는데?

2. 버전관리(Version Control System : VCS) 란?
 - 파일의 변화를 시간에 따라 기록 및 특정 시점의 버전을 다시 불러 올 수 있는 시스템.

버전관리의 의미를 알아보니 왜 쓰는지는 알겠다. 개발하며 "돌일킬 수 없는 실수"를 해본 사람
이라면 공감 할 듯;;

그렇다면 버전관리는 단순히 기록하고 다시 불러오기 위한 것일까?

3. 버전관리의 기능
 - 개발협업 가능
 - 개별적으로 버전 및 이력을 관리
 - 오픈소스로 공유 등

혼자 개발하는 사람에게는 낯설겠지만 개발협업이 가능!
버전 및 이력, 즉 버전 별로 소스를 관리 할 수 있고 모든 이력을 쉽게 파악!
그리고  누구나 제한 없이 사용할 수 있도록 오픈소스로 공유!

가장 염려가 되는 건 개발협업... 다른 개발자들고 소스를 공유하며 개발한다는게 직접
경험하지 않고서는 모르기 때문에 걱정이 많이 되는 부분이다. 일단은, Git이라도 제대로 익혀두자.

이 정도면 개념은 어느정도 잡힌듯하다. 근데 전에 면접준비하는 과정에서 SVN을 들어본 적?이 있다.
SVN? 이번 기회에 찾아보니 이것도 버전관리 도구라는데... 그럼 Git 이외에도?

4. 다른 버전관리 도구

같은 버전관리 도구들인데 모두 알아야 하는건가? 다 사용할 줄 알아야 하는건가?
그건 아니라고 생각한다. 자기에게 맞는 도구, 즉 환경과 상황에 따라 선택하는것이 중요하다.

git 이외 버전관리 도구들을 알아보다 버전관리 도구에도 종류가 나뉜다. (정말 모르는게 많네..)
바로, 중앙집중식 버전 관리 시스템과 분산 버전 관리 시스템이다! 나도 이번에 알게됨!

5. 버전관리 도구 종류
 - 중앙집중식 (Centralized Version Control System; CVCS) : CVS, Subversion
 - 분산 (Distributed Version Control System; DVCS) : Git, Mecurial, Bazaar, Darcs 등

정말 많이 들어본 단어들이다. 이런 애들이였구나... 여기서 멈추지 말고!
종류를 알아봤으니 이제 각각의 특징을 알아보자!

6. 중앙집중식 버전 관리 (CVCS)
 버전 관리되는 모든 파일을 저장하는 하나의 중앙 서버와 다수의 클라이언트로 구성관리가 용이하나,
 중앙 서버가 잘못되면 복구될 때까지 협업이나 버전관리가 불가능

7. 분산 집중식 버전 관리 (DVCS)
 클라이언트가 저장소 통째로 복제하여 가져오므로 서버에 문제가 발생해도 어느 클라이언트든 복제된 
 저장소를 다시 서버로 복사하면 서버복구 됨.

간략히 각각의 특징을 정리해보았다. 하나하나 알아보니 이제 감이 좀 잡힌듯 하다.
이외에도 알아야 할 내용이 수없이 많지만 그부분에 대해서는 필요할 때 알아봐도 늦지 않을거라 ..
생각한다. 다만, 최소한 "왜" 이 도구를 사용하는지는 꼭 알고 시작하자.

이론으로 빠삭하게 알고 있어도 직접 해보지 않으면 Git을 안다고 할 수 없다.
이제 직접 해보자. 개인적으로 DVCS를 선호하므로 Git을 사용하여 버전 관리를 해볼 생각임..

많이 참조

2017년 3월 20일 월요일

CSS : header, nav, aside, section, article, footer 구조태그

구조태그

 - header
   헤더의 전체적인 구조를 나타내며 헤더는 header로 시작해 header로 끝남.

 - hgroup
   헤더에서 사이트의 제목이나 슬로건이 담겨지는 부분

 - nav
   사이트의 메뉴를 이루는 부분.  메뉴는 사이트의 전체메뉴이거나 특정한 상황에서만 보여지는
   메뉴일 수 있으며 필요하다면 header안에서 2개 이상의 nav요소가 사용될 수 있음.

 - section
   이 태그안에는 화면에 보여일 웹페이지의 주요 컨텐츠를 담아두며 일종의 본문에 해당

 - article
   section 안에서 주제별로 구분되는 본문을 배치

 - aside
   화면의 좌, 우측에 보여지는 컨텐츠를 포함하는 영역

 - footer
   사이트의 하단부분을 구성하는 영역




위에 태그는 사이트의 구조에서 각각의 부분이 어떤 역활을 하고 있는지 명확하게 구분하기 위한 목적이
강하며 소스상에서 구분(정확히는 검색엔진등에서)되는 용도이므로 태그가 실제 웹 브라우저에서 표시될
때 어떤 특별한 처리가 이루어 지지는 않음

그냥 각 태그에 의미를 부여 해놓은 형태인데 이것은 '시멘틱 웹'이라 표현. 실제로 header나 hgroup, nav
태그를 제거해도 브라우저에 표시되는 모양새는 태그를 사용한 경우와 별반 다르지 않음.

따라서 필요하다면 개발자나 디자이너가 직접 CSS를 정의하여 목적에 맞게 디자인을 입혀야 함.

출처: http://lab.cliel.com/entry/HTML5-헤더구조 [CLIEL LAB]


참조 :
http://aboooks.tistory.com/347

CSS : media queries

Media query는 CSS3에 포함되어 있으며, 콘텐트의 변경 없이도 특정한 범위에 속하는 출력기기들에 
맞춤형으로 콘텐트의 프리젠테이션을 변경해 줌.

문법 (css 파일)


논리 연산자, 쉼표, not키워드 등 미디어쿼리를 사용하는데 여러가지 방법으로 구성할 수 있음
자세한 내용은 공식문서 참조.

참조:
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

CSS : article, section 요소

<article>요소
내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담음. 주로 블로그 글, 포럼 글, 뉴스 기사 등

 - 브라우저 지원
   

<section>요소
서로 관계 있는 문서를 분리하는 역할, 주로 문서를 다른 주제에 구분짓기 위해 사용

 - 브라우저 지원
   

내용이 독립적이고 스스로 설 수 있는 내용은 <article>요소
내용이 서로 관계가 있다면 <section>요소
의미적으로 관계가 없다면 <div>요소 (div는 오직 내용을 묶는 역할)

여러개의 section을 article로 묶거나 여러개의 article을 section으로 묶을 수 있음

참조 :
http://aboooks.tistory.com/346
https://developer.mozilla.org/ko/docs/Web/HTML/Element/article

CSS : Flexbox

요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아보자.

flex box 레이아웃에서 가장 중요한 컴포넌트 두 개는 container 와 items !!

수평 레이아웃
container { display: flex; }

items 는 알아서 수평축으로 정렬

수직 레이아웃 
.container { display: flex; flex-direction: column; }

중심축은 수평축이고 교차축은 수직축, flex-direction: column 을 추가하면 이 두 개의 축을 전환

Justify content and Align items (items 들을 중심축의 중앙에 정렬)
.container { display: flex; flex-direction: row; justify-content: center; }

items 을 다시 수평으로 만들려면, flex-direction 을 column 에서 row 로 변경
justify-content 나 align-items 와 같은 속성들은, 중심축과 교차축에 기준하여 items 을 정렬

align-items 를 이용하여 교차축의 중앙에 정렬
.container { display: flex; flex-direction: row; justify-content: center; align-items: center; }

Items (align-self 속성을 이용하여 첫 번째 item 의 위치를 조정)
.item1 { align-self: flex-end; }

각각의 아이템에 CSS 효과 적용 


참고 :
https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html