NOW OR NEVER

리액트 입문 리액트가 만들어진 이유 Javascript를 사용한 DOM 변형 DOM : 각 html element 정보를 지니고 있는 JS 객체 Ember, Backbone, AngularJS 등의 프레임워크는 작동방식이 다르지만 자바스크립트 특정 값이 바뀌면 특정 DOM 속성도 바뀌어서 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결해줌 리액트는 어떠한 상태가 바뀌었을 때 DOM을 어떻게 바꿀지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 걸 새로 만들어 보여주면 어떨까라는 아이디어에서 시작된 라이브러리이다. 그러면 업데이트를 어떻게 해야할 지를 전혀 고민할 필요가 없어지기 때문에 개발이 정말 쉬워질 것이다. 리액트는 Virtual DOM을 사용해 성능은 유지하되 업데..

Javascript 비동기(Asynchronous) 처리 비동기 처리의 이해 동기적(Synchronous) 처리 : 작업이 끝나야 비로소 다음작업을 실행, 작업이 끝날 때까지 기다리는 동안 중지 상태가 돼서 다른 작업을 할 수 없다. ex) 1번 작업이 끝날 때까지 2번 작업 수행 못하고 2번 작업이 끝날 때까지 3번 작업을 수행하지 못함 작업을 비동기적 처리 할 때는 코드 실행 시 흐름이 멈추지 않는다. 그래서 동시에 여러가지 작업 처리 가능, 기다리는 과정에서 다른 함수를 호출도 가능 비동기 처리 예시 Ajax Web API 요청: 서버 쪽에서 데이터를 받아와야 할 경우에는 요청을 하고 서버에서 응답을 할 때까지 대기를 해야 하기 때문에 주로 비동기 처리를 함 파일 읽기 : 주로 서버쪽에서 파일을 읽..

Javascript 유용한 문법 단축 평가 논리 계산법(Short-circuit evaluation) 논리 연산자를 사용해서 코드를 더 짧게 쓰는 것을 의미 논리 연산자 사용 시 무조건 true 혹은 false 값을 사용하지 않아도 됨 리액트 사용하는 경우 이 문법을 사용해서 조건부 랜더링을 할 수 있다. falsy한 값들 : null, undefined, ‘ ‘, 0, NaN &&(AND 연산자) 주로 특정 값이 유효할 때만 어떤 값을 조회해야 되는 상황에 사용(ex)값이 객체일 수도 있지만 객체가 아닐 수도 있는 상황) &&의 왼쪽에 위치한 값이 true나 truthy한 값이면 오른 쪽에 위치하는 값이 연산 결과가 된다. && 왼쪽에 위치한 값이 false혹은 falsy한 값일시 연산 결과 값은 &&..

Javascript Promise 프로미스 자바스크립트에서 비동기를 처리하기 위해서 가장 기본이 되는 개념 async와 await를 배우기 위해 알아야하는 개념 프로그램에서 간단한 코드가 순차적으로 한 줄 한 줄 실행된다면 어렵지 않다. 하지만 자바스크립트에서 함수를 호출했는데 그함수가 시작되고 끝나는 동안에도 프로그램은 계속 진행되어야 할 때가 많다. 이럴 때 Promise를 사용하면 비동기적 상황에서 코드를 좀 더 명확하게 표현하고 실행하도록 만들 수 있다. Promise 개체 혹은 Promise 객체로 불림 ES6부터 자바스크립트의 표준 내장 객체로 추가됨 ES6를 지원하는 브라우저나 Node.js에서 전역에 있는 Promise 확인 가능 프로미스 객체 생성 방법 - 1. 생성자(new Promis..

Javascript 객체/개체 object 함수 혹은 클래스로 틀을 만드는 것으로 틀에서 객체를 하나씩 찍어내게 된다. 개발자가 자유롭게 틀을 만들고 그 틀로부터 객체(instance)를 만들어내서 사용하게 된다.객체 만드는 방법 생성자 함수 생성자 함수: 객체를 만들어 내는 틀의 역할을 하는 함수(함수를 만들어서 틀을 만들고 그 틀로부터 new 키워드 이용해서 객체 instance 생성) 생성자 함수를 통해서 객체를 생성하면서 객체 내부로 데이터 넣을 수 있도록 밖에서 생성자 함수를 생성시 인자를 넣어줘야 한다. Object로 객체 만들기 new Object() object 는 javascript 내에서 가장 기초 객체로 내장되어 있는 것이다. 별로 권장되는 방법은 아님 객체에 속성 추가하기 prope..

JavaScript 자료형(Data type) 동적 타이핑 Dynamic typing 변수에 어떠한 데이터를 할당하느냐에 따라 그 변수의 type이 결정된다. 값에 따라서 변수의 type이 달라지는 것이 동적 타이핑이라고 한다. 자바스크립트는 변수가 가지는 고정 타입이 없다. 하지만 타입 자체가 없는 것은 아니다 console.log(변수, typeof 변수) : 변수에 할당된 값과 변수의 데이터 타입 확인 ES6 기준 제공하는 데이터 타입 기본 타입(Primitive values) 기본 자료형을 가지고 객체를 만들어 내는 것이 중요하다. Boolean - 표준 내장 객체로도 사용 가능 new Boolean(true 혹은 false); 생성자 함수를 통해 초기값으로 true 혹은 false를 지정한 객체..

JavaScript 자바스크립트는 무엇인가 자바스크립트는 프로그래밍 언어 스크립트 언어(어떤 어플리케이션에서 그 코드를 해석하고 실행할 수 있는 엔진이 존재해서 그 애플리케이션을 제어하는 용도로 사용되는 언어) 자바와는 관련이 없다 인터프리터 언어(엔진이 소스코드를 한 줄씩 읽으면서 바로 바로 해석하고 실행) 자바스크립트를 해석하고 실행하는 스크립트 엔진을 가지고 있는 대표적인 애플리케이션은 웹브라우저이다. 자바스크립트가 널리 사용되는 이유도 웹브라우저에서 사용되기 때문이다. 웹브라우저가 웹페이지를 html, css, js를 통해 실행하는데 html은 웹페이지의 구조와 컨텐츠를 표현하고 css는 그모습을 예쁘게 만들어준다. js는 동적으로 콘텐츠를 바꾸고 ui를 이동시키는 여러가지 일을 해낼 수 있다. ..

인라인 텍스트 태그 1. span 태그 - 대표적인 인라인 요소 - 본질적으로 아무런 의미를 갖고있지 않음 - 막 사용될 수 있음 - 텍스트의 일부분들을 이 태그로 묶어서 css나 js 입력시 굉장히 많이 활용됨 -div 태그와 굉장히 유사하게 사용 가능 *div 태그는 본질적으로 아무런 의미를 갖지 않고 대표적인 블록요소이다. - div 태그와의 비교 : div 태그는 기본적으로 블록요소기 때문에 한 줄에 하나밖에 표시할 수 있어서 다른 텍스트와 줄이 바껴서 표시됨, 하지만 span 태그는 인라인 요소기 때문에 텍스트 중간에 있는 부분을 딱 명확하게 찝어낼 수 있다. 의미가 없이 스타일을 적용하거나 혹은 js에 적용하는 데만 활용하는 것이면 div보다는 span 태그가 적합하다. 2. br 태그 - 빈..

하루 하루 공부하는 것을 기록하는 것이 더 내가 하루 공부량을 더 파악할 수 있고, 다시 복습할 때도 체계화되어 있을 것 같아 주별로 한번에 몰아 정리하지 않고 하루치 공부한 강의 요약을 블로그에 올리기로 했다. 콘텐츠 구분 태그 정리 1. aside 태그: 문서의 별도 콘텐츠(배너 광고, 기타링크 등 오른쪽이나 바닥에 들어가는 것) 설정 - display:block 요소 - 광고형태로 많이 들어감 2. HTML 화면을 각각의 태그가 가지는 의미로서 구성을 하면 브라우저 측면에서 의미를 부여해서 볼 수 있으므로 그래서 각각의 태그를 적재적소로 적당한 의미로써 사용해야 한다. 3. nav 태그 : 다른 페이지 링크를 제공 영역(header 부분에 들어가는 메뉴들, contact: 연락할 수 있는 정보 등)..