본문 바로가기

전체 글

Javascript vs ECMAScript Javascript 프로그래밍을 하다보면 es5 , es6 같은 말을 많이 듣는다. 여기서 말하는 es* 가 ECMA Script를 말한다. "그럼 우리는 ES5 ES6 버전으로 자바스크립트 코딩을 한다는데 이건 도대체 어떤 의미일까?" 궁금증이 생겨 왜 그런 표현이 생기게 되었는지 파헤쳐 본다. 이 두 개의 언어가 왜 생겨났는지 부터 알아보자. Javascript 처음에는 HTML 문서에 효과를 주기 위해 넷스케이프 커뮤니케이션즈의 브랜던 아이크(Brendan Eich)가 설계한 것을 시작으로 모카(Mocha) 라는 이름으로 탄생 됐다. 같은 해 9월 Live script로 개명했다. 그리고 다시 3달 후 Javascript 로 개명 되어 지금까지 이어지고 있다. ECMA Script 그럼 ECMA S.. 더보기
Angular summary 📇 IndexIntroArchitectureAngular vs AngularJSComponentDirectiveServicePipeData shareData bindingGuard@NgModulesRouting🎬 IntroAngular는 2014년에 ng 컨퍼런스에서 처음 소개 되었으며 2016년 2.0버전이 정식 릴리즈 되었으며 지금 현재는 7.x.x버전 까지 릴리즈 되었습니다.Angular는 SPA(Single Page Application) 개발을 위한 Javascript based Open Source Front End Web Application입니다. Angular 는 수 많은 라이리브러리로 이루어져 있는데 코어 모듈과 옵션 모듈이 있습니다.코어 모듈은 Angular application의 주.. 더보기
[CSS] position 안녕하세요. 오늘은 CSS의 position에 대해서 알아보도록 하겠습니다. position은 엘리먼트 요소들의 위치를 어떻게 지정할 것인가를 결정하는 중요한 property인데요. property의 값에 따라 엘리먼트 요소들의 위치가 지정될 방법이 바뀌게 되고 top, left, right, bottom property로 위치를 확정 짓게 됩니다. Position의 Values static 엘리먼트 요소들의 기본값 입니다. 아무것도 지정 해주지 않으면 기본적으로 static이 적용 된다고 보시면 됩니다.static으로 값이 설정 되어 있으면 top, left, right, bottom, z-index 의 값들은 적용 되지 않습니다. 일반적으로 각 엘리먼트에 성질에 따른 (block 요소 inline요소.. 더보기
[CSS] margin collapsing (마진 상쇄) 안녕하세요.이번 포스팅은 margin collapsing (마진 상쇄) 현상에 대해서 알아 보도록 하겠습니다. 또는 마진 겹침 현상이라고도 합니다. 박스 모델을 구현할 때 마진겹침현상 때문에 애먹으신적이 종종 있으실 겁니다.그런데 이 현상이 어떤 경우에 일어나는지 아시면 적어도 답답함은 조금 줄어들지 않을까 생각 됩니다.그래서 어떤 경우에 마진겹침현상이 일어나는지 알아 보도록 하겠습니다. 인접한 두 박스의 마진 방향이 겹칠 경우 .box1 { border: orangered solid 1px; } .box2 { border: purple solid 1px; } div { margin: 20px; } 안녕하세요 margin collapsing test 위 이미지를 보면 뭔가이상한 점이 느껴지시지 않습니까?.. 더보기
[CSS] box model과 box-sizing 안녕하세요. 이번 포스팅은 css의 Box model 개념에 대해서 알아 보도록 하겠습니다. HTML의 모든 요소(element)들은 사각형의 박스 형태로 표시되는데 이 박스는 margin, padding, border, content로 구성 되며 이것들이 합쳐져 너비(width), 높이(height)를 결정한다. 즉, 박스의 크기를 결정하고 박스 모델을 만들게 됩니다. 위에 보이는 것과 같이 구성 됩니다. 그럼 박스를 구성하는 구성요소에 대해서 하나씩 알아보죠. contentcontent는 말 그대로 실제 내용을 포함하는 영역입니다. 그리고 content는 width, height, min-width, max-width, min-height, max-height 를 가지고 크기를 지정하고 제어 할 수 .. 더보기
[CSS] display - block과 inline 그리고 inline-block 안녕하세요. 오늘은 display porperty에 대해서 알아 보겠습니다. 그 중에서 inline과 block 그리고 inline-block에 대해서 알아보겠습니다. 먼저 display property에서 간단히 설명하면 display는 화면이 렌더링 되었을때 어떠한 특정 영역이 표시 되는데 성질을 부여하는 property입니다. 그 중 가장 많이 사용 되는 inline과 block 성질(display property의 값)입니다. 우선, html의 태그들은 크게 block 요소와 inline 요소로 나눌 수 있다. block 요소, , , , , , , , , , ,, , , , , , , , , , , block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다... 더보기
React의 Life Cycle 오늘은 React의 Life Cycle(생명주기)에 대해서 알아 보도록 하겠습니다. React에는 Component가 생성 되고 소멸 될 동안 단계별로 Component를 컨트롤 할 수 있도록 여러 메소드들이 있는데 우리는 그 메소드들을 오버라이드 해서 사용 할 수 있습니다. The Component Lifecycle Component 의 Lifecycle 은 크게 이렇게 나누어 살펴 볼 수 있습니다. Mounting Component의 인스턴스가 생성되고 DOM의 삽입 될때 과정입니다. 이 순서대로 진행 됩니다.constructor() static getDerivedStateFromProps()render()componentDidMount() * 참고 원래는 static getDerivedStateFr.. 더보기
Props 와 State 이번 포스팅은 React의 State 와 Props 에 대해서 정리 해보려고 합니다. State 와 Props는 React Component 에서 빠질 수 없는 기본적이면서 중요한 개념입니다. 이 두 가지 개념을 이용하여 부모 컴포넌트와 자식 컴포넌트 간 데이터를 전달 하고 컴포넌트의 데이터를 변화 시킵니다. 그렇기 때문에 다들 아시겠지만 이 두 개념은 처음 리액트를 접하거나 배우게 되면 항상 묶여져 있습니다. Props Props 는 properties 의 줄임말 입니다. Props는 Component 로 데이터를 전달 합니다. render ( Hello movies! {this.props.title} ) class MoviePoster extends Component { render() { retur.. 더보기

티스토리툴바