참고 영상 * 간단한 프로토타이핑 (prototyping) * 가이드라인 1. 웹사이트의 정체성을 드러내는 문구와 설명을 헤딩태그(h1~h6)로 지정한다. 2. 사진을 검색할 수 있도록 input 태그를 사용한다. 3. 사진 리스트를 ul, li 태그 또는 div 태그로 나열한다. (굳이 ul, li 태그 사용하지 않아도 된다.) 4. 사진 리스트는 스크롤 내릴 수 있도록 6~9개 정도 만든다. 5. 블로그 하단의 반응형 웹 적용한 캡쳐화면을 참고해서 GalaxyS5, 아이폰 5/SE, 아이폰 6/7/8, 아이폰 6/7/8 plus 에서 반응형 웹을 적용해본다. 6. 네비게이션 바를 만들어본다. 7. 네비게이션 바 안에 프로필 사진을 넣을수 있도록 한다. (flexbox 사용하기, 네비게이션 오른쪽에 정..

* 프로그램 에러 (error) 프로그램 에러란 말 그대로 프로그램을 실행하는 도중에 발생되는 오류를 의미한다. 에러가 발생하는 이유는 수십만가지다. 크게 문법에러와 논리에러가 있다. 문법에러는 코드를 작성하면서 자바스크립트 문법에 맞게 작성하지 않았거나, 오타가 난 경우이다. 논리에러는 문법에는 전혀 이상이 없고, 콘솔창에도 에러가 뜨지 않지만 논리적인 절차의 오류로 인하여 프로그램이 정상적으로 동작하지 않는 경우이다. * 에러를 처리하는 이유 (디버깅 목적, 신뢰성 있는 코드, 유지보수 & 디버깅) 에러가 발생하면 스크립트는 동작을 멈추고 (프로그램이 중단되고), 콘솔창에 에러가 출력된다. 프로그램이 실행되다가 도중에 멈추면 위험한 경우가 있다. 예를 들어 자율주행 차량이 스스로 운전하다가 프로그램 ..

* 비동기 (asynchronous)의 개념 프로그램이 순차적으로 실행되다가 비동기 코드를 만나면 해당 코드는 나중에 실행하라고 등록만 해놓고 다음 부분을 먼저 실행하는 것을 비동기라고 한다. 회사에서 업무를 처리하다가 시간이 오래 걸리는 작업은 후임에게 맞겨놓고 자기는 그 다음 일을 처리한 다음 후임이 해당 작업을 끝내면 보고 받는 식이다. * 비동기 (asynchronous)를 사용하는 이유와 활용 비동기의 대표적인 예는 아래와 같이 서버에서 데이터를 가져오는 등의 시간이 오래 걸리는 작업이다. const API_URL = 'http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline' fetch(API_URL) .then(functio..

참고자료 DOM | PoiemaWeb 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저 poiemaweb.com * DOM 의 개념 브라우저의 DOM 은 Document Object Model 의 약자이다. 번역하면 문서 객체 모델이다. 브라우저는 렌더링 엔진을 사용하여 HTML 문서를 읽어들이고(로드하고) 해석(파싱)한다. 그런 다음 HTML 문서를 객체화(DOM)하고, DOM 트리로 만든 다음 웹화면에 렌더링한다. (웹화면에 그린다.) * DOM 출력해보기 브라우저에 의하여 생성된 DOM 은 자바스크립트가 자신을 제어할 ..

* 배열의 개념 배열은 서로 관련된 데이터끼리 그룹으로 묶어 놓은 변수이다. 예를 들어 소나타, 카니발, 람보르기니 등과 같은 여러 종류의 자동차를 하나로 묶어서 자동차라는 배열로 관리할 수 있다. 배열은 데이터베이스에서는 컬렉션(collection)이라고 부르기도 한다. * 배열을 사용하는 이유 (데이터 그룹핑) const fruit1 = "apple" const fruit2 = "banana" const fruit3 = "orange" const fruit4 = "watermelon" const fruit5 = "strawberry" 배열을 사용하지 않으면 변수를 여러개 사용해야 한다. const fruits = ["apple", "banana", "orange", "watermelon", "stra..

객체 참고문서 JavaScript 객체 기본 - Web 개발 학습하기 | MDN 이 글에서는 JavaScript 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 JavaScript 의 특징들과 우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는 developer.mozilla.org * 객체를 사용하는 이유 객체를 사용함으로써 데이터가 어떤 역할을 하는지 알 수 있으며, 다양한 타입의 데이터를 함께 그룹으로 묶을수 있다. * 객체의 구조 const obj = { key1: value1, key2: value2, key3: value3, } 객체는 콜론(:)을 기준으로 왼쪽에는 키(또는 프로퍼티) 오른쪽에는 값으로 구성되어 있다. 각각의 키-값 쌍은 콤마(,)로 ..

함수 참고문서 1 함수 - JavaScript | MDN 보통 함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 '호출'할 수 있는 하위 프로그램입니다. 프로그램과 마찬가지로, 함수 역시 명령문의 시퀀스로 구성된 함수 본문을 가집니다. 함수에 developer.mozilla.org * 함수의 개념 함수는 특정 기능을 수행하는 코드 블럭이다. 함수는 입력값을 가지거나, 출력값을 가질수 있다. 자바스크립트에서의 함수는 속성과 메서드를 가질수 있는 객체이다. function add(a, b){ return a + b } console.dir(add) 함수도 객체이므로 console 객체의 dir 메서드로 함수를 출력해보면 위와 같은 속성(프로퍼티)을 가진다. arguments, caller, length,..

* 용어정리 - 단항, 이항, 피연산자, 연산자 피연산자(operand)는 연산을 수행하는 대상이다. 연산자(operator)는 피연산자에 대한 연산을 수행하는 기호이다. let x = 1; x = -x; alert( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집습니다. 위 코드에서 피연산자는 x이고, 연산자는 마이너스(-)이다. 해당 연산자는 피연산자를 하나만 가지는 단항 연산자이다. let x = 1, y = 3; alert( y - x ); // 2, 이항 마이너스 연산자는 뺄셈을 해줍니다. 위 코드에서 피연산자는 x y이고, 연산자는 마이너스(-)이다. 해당 연산자는 피연산자를 두개 가지는 이항 연산자이다. * 산술연산자 자바스크립트에서 지원하는 산술연산자 종류는 아래와 같다. 덧셈 연..

* 조건문의 기본작성법 if (조건){ // 코드블록 } 조건문은 if 라는 키워드를 사용하고 조건을 검사한 다음 조건이 참(true)이면 코드블록을 실행한다. let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', ''); if (year == 2015) alert( '정답입니다!' ); 해당 조건문은 사용자로부터 입력을 받아 year 변수에 저장한다. 조건문의 조건을 검사하여 year 변수값이 2015이면 경고창을 띄워준다. 해당 조건문은 코드블록이 한줄이므로 중괄호({})를 생략할 수 있다. if (year == 2015) { alert( "정답입니다!" ); alert( "아주 똑똑하시네요!" ); } 해당 조건문은 복수의 코드문이 들어가 있으며 경고창..

변수 (Variable) 프로그램 전체에 걸쳐서 변경하고 싶은 값 또는 변경 가능한 값이다. 프로그램에서 공통적으로 사용된 값 중에 변경될 가능성이 다분한 값을 변수로 선언하면 된다. 변수를 사용하는 이유 console.log('syleemomo has authorization to this site !') console.log('syleemomo has authorization to this site !') console.log('syleemomo has authorization to this site !') console.log('syleemomo has authorization to this site !') console.log('syleemomo has authorization to this si..