분류 전체보기
-
Calendar 코드리뷰 - CSS 적용하기프로젝트 리뷰/기초 JS로 Calendar 구현하기 2020. 5. 3. 15:54
※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 1. reset.css와 common.css 로 파일 분리하기 위의 사진처럼 reset.css 에는 기본적으로 태그들에 적용되어 있는 불필요한 css를 reset 시켜주기위해 따로 파일을 분리해주었습니다. 이렇게 분리하게 되면 img 태그나 리스트 태그들 a태그 등등에 불필요한 css를 하나하나 매번 적어주지 않아도 되어 편리합니다. 프로젝트를 진행하면서 프로젝트가 끝날 때까지 불필요한 css 속성이 있다면 이 파일에 한번에 적용시켜 놓으면 됩니다. common.css 에는 각 태그별로 적..
-
Calendar 코드리뷰 - HTML마크업프로젝트 리뷰/기초 JS로 Calendar 구현하기 2020. 5. 3. 15:51
※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 먼저 HTML 에서의 전체적인 큰 구조로는 header 부분과 section 부분으로 왼쪽 파트와 오른쪽 파트로 구분되어 있습니다. 그리고 할일을 작성하는 input 태그와 제출 버튼인 INPUT을 그룹핑하고 있는 form태그가 있고 이 태그의 형제 요소로 지금 화면에는 안보이지만 ul태그가 자리잡고 있습니다. 할일을 적고 제출하고 나면 자바스크립트를 통해 동적으로 li태그들이 이 ul태그 안에 생성될 것입니다. INPUT section의 right 파트에서는 상단에 요일을 나타내는 부분과..
-
Calendar 구현 목표프로젝트 리뷰/기초 JS로 Calendar 구현하기 2020. 5. 3. 02:45
※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 구현된 최종 캘린더 이미지 구현한 계기 평소에 자주 사용하던 구글캘린더를 보고 편리함을 느꼈고, 구글캘린더와 비슷한 캘린더를 만들어보고 싶다는 생각을 하게되었습니다. 또한 지금까지 학습해온 html/css/JavaScript를 복습겸 잘 학습해왔는지 점검하기 위해서 프로젝트를 시작하게 되었습니다. html/css/JavaScript 를 사용하면서 각 파트에서 얻어갈 지식들 1. html 시멘틱 마크업을 이해하고 사용할 수 있으며, 각 태그들을 의미에 맞게 사용할 수있고 각 태그들에 clas..
-
화살표 함수( Arrow Function )에서의 this 바인딩개발 2020. 4. 29. 23:14
일반 함수는 앞서 블로깅 된 4가지의 규칙을 준수합니다. 즉, 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정되는 것이었습니다. 하지만 ES6부터는 이 규칙들을 따르지 않는 특별한 함수인 화살표 함수가 추가 되었습니다. 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정됩니다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리키는 것입니다. 이를 Lexical this라 합니다. 다음 예제는 화살표 함수의 렉시컬 스코프를 나타낸 예제입니다. function foo(){ // 화살표 함수 return re..
-
ES6 문법 - Arrow Function개발 2020. 4. 28. 23:42
ES6부터 추가된 화살표 함수( Arrow Function ) 표현식은 함수 리터럴의 단축 표현이고 익명 함수입니다. ( 그렇다고 함수 리터럴과 완전히 같은 건 아니므로 주의해야 합니다. ) 화살표 함수는 다음과 같이 화살표 함수 표현식으로 사용할 수 있습니다. // 기존의 함수 리터럴로 함수를 정의한 코드 let func = function (x){ return x + x; }; // 화살표 함수 표현식으로 작성한 코드 let func = (x) => { return x + x; }; // 하지만 인수가 없으면 인수를 묶는 괄호를 생략할 수 없습니다. let func = () => { return x + x; }; // 인수가 하나만 있다면 인수를 묶는 괄호를 생략할 수 있습니다. let func = ..
-
Node.js 시작하기개발 2020. 4. 27. 23:58
Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 입니다. Node.js는 이벤트 기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다. 자바스크립트 런타임 노드는 자바스크립트 런타임이라고 했습니다. 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻합니다. 즉, 노드는 자바스크립트로 작성한 프로그램을 컴퓨터에서 실행할 수 있게 해줍니다. 기존에 자바스크립트로 작성한 프로그램은 웹 브라우저에서만 실행할 수 있었습니다. ( 브라우저도 자바스크립트 런타임입니다. ) 하지만 브라우저 외의 환경에서 자바스크립트를 실행하게 되면 자바스크립트의 실행 속도 문제 때문에 큰 호응을 얻지 못했습니다. 2008년 구글이 V8 엔진을 사용하게 되어 크롬을 출시하였고, 당시 V8 엔..
-
call과 apply, bind 메서드를 이용한 명시적인 this 바인딩개발 2020. 4. 20. 22:47
이 전에 작성한 컨텐츠인 객체의 메서드를 호출할 때, 함수를 호출할 때, 생성자 함수를 호출할 때의 this 바인딩으로 각각의 상황에 따라 this가 정해진 객체에 자동으로 바인딩 된다는 것을 알아보았는데 자바스크립트는 이러한 내부적인 this 바인딩 이외에도 this를 특정 객체에 명시적으로 바인딩 시키는 방법도 제공합니다. 이를 가능하게 하는 것으로는 apply()와 call(), bind() 메서드 입니다. 이 메서드들은 모두 함수의 부모 객체인 Function.prototype 객체의 메서드이므로 다음과 같은 형식으로 호출하는 것이 가능합니다. func.apply( thisArg, argArr ) 여기서 기억해야 할 것은 apply() 메서드를 호출하는 주체가 함수고, apply() 메서드도 th..
-
생성자 함수를 호출할 때 this 바인딩개발 2020. 4. 20. 22:46
자바스크립트에서 객체를 생성하는 방법에는 생성자 함수를 이용하는 방법이 있습니다. 생성자 함수는 말 그대로 자바스크립트의 객체를 생성하는 역할을 하는데 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작합니다. 먼저 생성자 함수가 동작하는 방식에 대해서 알아보겠습니다. 1. 빈 객체 생성 및 this 바인딩 생성자 함수 코드가 실행되기 전 빈 객체가 생성됩니다. 바로 이 객체가 생성자 함수가 새로 생성하는 객체이고 이 객체는 this로 바인딩 됩니다. 즉, 이후 생성자 함수의 코드 내부에서 사용된 this는 이 빈 객체를 가리킵니다. 하지만 엄밀히 말하면 여기서 생성된 객체가 빈 객체는 아닙니다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체와 연결되어 있으며, 이를 ..