본문 바로가기

Dev.

 (341)
TodoList 만들기 Project_Basic Intro (HTML / CSS / JavaScript) 자바스크립트 연습 프로젝트 자바스크립트를 공부하면서 뭔가를 만들어보면서 하고 싶어졌는데,가장 유명한 것이 To do list를 만드는 것이다.검색해보니 난이도가 너무 높고, 이해도 안되고, (외국 사이트의 경우)심지어 코드를 그대로 입력했는데 동작하지 않았다.그러면서 여기 저기서 입수한 정보를 토대로 나만의 독자적인 To do list를 만들어가게 되었다. 이 포스팅은 그 프로젝트를 정리한 내용이다.정말 기초적인 내용을 연습하는 프로젝트이다. 프로젝트 대상은 누구인가?HTML과 CSS에 대한 기본적인 Markup Language에 대한 이해를 갖추주고 있고,JavaScript 이론 공부에 대해서 한 번 정도 진행된 사람 준비해야할 사항| Chrome Browser 프로젝트가 크롬을 기준으로 진행되기 때문..
8. 자바스크립트의 프로토타입(Prototype) Chapter 8. 자바스크립트의 프로토타입 자바스크립트에는 클래스라는 개념이 없다. (ECMA 2016부터 정식적으로 등장하긴 했다.)그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어인 것이다. 그만큼 프로토타입의 이해에 대해서는 필수적이다. 프로토타입이란 무엇인가 어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라고 한다. Java에서의 class가 바로 자바스크립트에서의 프로토타입이다. 프로토타입은 두가지로 해석될 수 있다. 하나는 프로토타입 객체를 참조하는 prototype 속성이고 다른 하나는 객체 멤버인 _proto_ 속성이 참조하는 숨은 링크를 말한다. JavaScript에서 함수를 정의하고 파싱단계에 들어가면 내부적으로 수행되는 작업이 있다..
7. 자바스크립트의 객체와 객체 멤버 Chapter 7. 자바스크립트의 객체와 객체 멤버자바스크립트에서는 기본적으로 모든 메소드, 속성은 공개(public)으로 정의된다.비공개(private)특징을 구현할 수는 있다. 자바스크립트에서는 객체를 만들어내는 방법이 3가지 존재한다.1. new와 Object 생성자 이용 - new Object( ) 2. 객체 리터럴 이용 - { } 이 방법은 1과 비교했을 때, 내부적인 절차는 동일하다. 즉, Object 생성자를 이용해 객체가 생성되고 { }에서 정의한 멤버를 동적으로 추가하는 것이다. 12var obj = { };var obj = new Object;cs위 두 코드는 동일하다. 이렇게 정의된 멤버는 모두 외부에서 접근할 수 있는 공개 멤버이다. 3. new와 사용자 정의 생성자 이용 - new..
6. 자바스크립트의 클로저(Closure)에 대해서 Chapter 6. 자바스크립트의 클로저(Closure)자바스크립트에는 없는 class역할을 대신해 비공개 속성/메소드, 공개 속성/메소드를 구현할 수 있는 방안을 마련한다.따라서 캡슐화와 정보 은닉을 이해하기 위해 클로저를 알아야 한다.아직 클로저가 무엇인지도 모르는데, 그렇다고 한다. 클로저클로저는 두 개의 것(함수, 그 함수가 만들어진 환경)으로 이루어진 특별한 객체의 한 종류이다.환경이라 함은 클로저가 생성될 때 그 범위 안에 있던 여러 지역 변수들로 이루어진다.이 말 역시 무슨말인지 잘 모르겠다. 그렇다고 한다. 다음은 클로저가 생성되는 조건이다. 1) 내부 함수가 익명 함수로 되어 outer 함수의 반환값으로 사용된다. 2) inner 함수는 outer 함수의 실행 환경(execution en..
대한민국에서 창업이 힘든 이유 - 플리토 사건을 바라보며. 나는 일부러 여러 IT 관련 그룹, 페이지를 팔로우 하고 있다.그리고는 IT 관련 소식이 뉴스피드에 올라오면 공유를 해두는 습관이 있다.그리고는 시간이 날 때마다 본다.IT 생태계가 어떻게 흘러가고 있는지,요즘 유행하는 기술은 무엇인지 (React에 대한 글이 정말이지 많이 올라온다.)대충 파악할 수 있다.관심이 가는 분야는 InfoWorld 나 다른 외국 사이트에서 찾아본다. 그러던 중, 내 뉴스피드에 정말 모순적인 두 포스팅이 나란히 공유되어 있었다. 위 사진은 플리토 대표님께서 페이스북에 올리신 글이다.무슨 일인지 궁금해서 공유해놓았던 것이다.그리고 아래는 네이버 서비스가 카카오 서비스와 비교해서 어떻게 굴러가고 있는지 궁금해서 공유해놓았던 포스팅이다. 그리고 해프닝이 일어났다.그래도 정말 다행이라..
5. 자바스크립트 호이스팅(Hoisting) Chapter 5. 자바스크립트의 호이스팅(Hoisting)Hoist란?hoist 라는 단어의 사전적 정의는 끌어올리기 라는 뜻이다. 자바스크립트에서 끌어올려지는 것은 변수이다. 모든 변수 선언은 호이스트된다. 호이스트란 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 즉, 변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 변경이 된다. 선언(Declaration)과 할당(Assignment)을 이해해야 한다. 끌어올려지는 것은 선언이다. 코드를 통해 살펴보자123456function getX(){ console.log(x); // undefined var x = 100; console.log(x); // 100..
4. 자바스크립트의 변수 스코프(Variable scope)에 대하여 Chapter 4. 자바스크립트의 변수 스코프 자바스크립트는 다른 언어와는 달리,변수가 살아있게 되는(?) 범위가 조금 특별하다.변수 스코프에 대한 개념이 없으면 변수가 이리저리 섞여버릴 것이다.변수 스코프에 대해 알기 위해 자바스크립트 프로그램이 구동되는 원리부터 살펴보자. 자바스크립트의 특징1. 자바스크립트는 변수를 함수 단위로 관리한다. => 다른 프로그래밍 언어들은 중괄호를 사용하여 변수의 영역을 결정하는게 일반적이다. 하지만 JS는 함수를 단위로 해당 함수가 사용하는 변수를 관리한다. 2. 실행시 변수 검색은 렉시컬 영역 기준으로 한다. 렉시컬 영역(scope)이란 어휘적 영역이란 뜻으로 함수가 선언된 위치에 따라 정의되는 영역(scope)을 말한다. 3. 실행 시의 변수 검색은 변수 스코프 체..
5. Model 1 에서 Model 2 까지 변화과정 3편 5. Model 1 에서 Model 2 까지 변화과정 3편controller역할 뿐만 아니라 view 역할과 model 역할까지 모두 하는 서블릿부터 만든 다음에,그 서블릿으로부터 기능들이 하나씩 분리되는 과정을 보이려고 한다. 5. ServletContextListener 리스너란 사건이 발생했을 때, 알림을 받는 객체를 말한다. 서블릿을 보면, 매 요청마다 MemberDao memberDao = new MemberDao( ); 를 통해 DAO 인스턴스를 생성한다.요청할 때마다 객체를 만들게 되면 많은 가비지가 생성되고, 실행 시간이 길어진다. 그래서 DAO를 ServletContext에 저장한다. AppInitServlet에 DAO 객체를 준비해도 되지만, 웹 애플리케이션 이벤트를 이용하는 것이 더 ..

티스토리툴바