Let과 Const의 등장과 Var Let과 Const는 ES6(ES2015)에 추가된 기능으로 변수 선언에 사용된다. 당연하게도 ES6 이전에는 Var이 사용되었는데, Var의 존재에도 불구하고 Let과 Const가 등장한 이유에는 Var가 가지고 있는 몇가지 문제점 때문이었다. Var의 특징과 문제점은 무엇일까? Var의 범위는 전역 혹은 함수 범위로 지정된다. 즉, 함수 외부에서 선언되면 전역 범위에서 사용할 수 있으며, 함수 내부에서 선언되면 함수 내부에서만 사용할 수 있다. 예제 코드를 통해 좀더 쉽게 확인할 수 있다. var hello = "hello"; function world() { var world = "world"; } console.log(hello); // hello가 출력된다. ..
리액트(React) 란 무엇일까?! 리액트는 실리콘벨리 굴지의 기업 "페이스북 (Facebook)"이 주도로 개발한 Javascript 기반 라이브러리이다. 리액트는 웹 애플리케이션의 UI를 효과적으로 구축하기 위해 개발되었으며, React.js, React를 혼용하여 여러 라이브러리를 활용할 수 있는 강력한 기능을 가지고 있다. 왜 리액트를 사용할까? 그렇다면 왜 리액트를 사용할까? 리액트의 특징을 한번 알아보도록하자. 선언적 (Declaractive) 특징 / JSX 문법 리액트는 JSX문법을 활용합니다. JSX 문법의 방식을 선언형 프로그래밍 방식이라고 하며 '무엇 (what)'을 해야하는 지정하는 방식의 문법입니다. 따라서, JSX문법에서는 컴포넌트의 구조와 동작을 선언적으로 작성할 수 있도록 도..
제품을 만들기에 앞서서 시제품(prototype)을 만들게 된다. 웹사이트를 제작 할 때에도 HTML과 CSS 및 Js를 적용하기에 앞서서 일종의 시안이나 도안이 필요하다. 우리는 그것을 와이어프레임을 통해 만들 수 있다. 와이어 프레임 와이어프레임은 '선'이라는 의미를 가진 와이어와 '틀'이라는 의미를 가진 프레임이 합쳐진 언어로 '선으로 이루어진 틀'을 표현한다. 즉, 와이어프레임은 내가 만들 사이트가 어떻게 구성될지 간단히 설계하기 위해 만들어졌으며, 제품의 제작에 앞서 제품의 레이아웃과 구조를 간략하게 보여주기 위한 용도로써 사용된다. 목업 목업은 '실물크기의 모형'을 뜻한다. 즉, 목업 사이트를 구현한다는 것은 실제로 원본의 사이트와 매우 유사하지만 그 기능이나 이용에 제한이 있는 사이트를 뜻한..
flexbox의 핵심 개념 부모자식관계를 지칭하는 트리구조를 가지고 있다. 즉, 부모에 요소를 적용하여 자식의 레이아웃을 유연하게 구성하는 방법이다. flexbox를 활용한다면 요소를 정렬하고 영역을 지정하는 것을 보다 쉽게 할 수 있다. Flexbox의 활용 Flexbox는 속성을 사용할 때 '부모 요소'와 '자식 요소'에 사용하는 속성들이 있다. 부모에게 적용하는 속성 flex-direction 속성은 부모 요소에 설정하는 속성이며, 정렬축을 결정하는 역할을 한다. flex-direction 주요 속성값은 row(가로,좌우), column(세로, 위아래), row-reverse(가로,우좌), column-reverse(세로, 아래위)가 있다. jutify-content 속성은 자식 요소들을 축의 수평..
