[JS] this 바인딩

this 바인딩? this의 바인딩은 어떻게 호출하느냐에 따라 달라진다. 일반함수는 전역객체에 바인딩된다.내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었건 this는 전역 객체에 바인딩된다.객체 프로퍼티 함수, 즉 메소드는 해당 메소드를 소유한 객체에 this가 바인딩된다.new 연산자와 함께 생성자 함수를 호출하면, 생성자 함수를 통해 새로 생성되어 반환되는 객체에 바인딩된다. 자바스크립트가 제공하는 암묵적 바인딩 외에, 임의로 바인딩하려면 apply, call, bind를 쓰면 된다. 화살표 함수의 this 바인딩? 화살표 함수는 호출시가 아니라 선언시에 결정된다.Lexical this인 것이다.언제나 상위 스코프의 this를 가리킨다. 때문에 메소드나 프로토타입에서 사용하는 것은 바람직하..
WEB/JS 2019. 1. 9. 21:53

[JS] 스코프, 렉시컬 스코프

스코프? 기본적으로 자바스크립트는 블럭 스코프가 아닌 함수 스코프이다.또한 메인의 기준이 따로 없기 때문에 함수 안에 안들어가면 모두 전역 스코프 처리된다. var로 선언시 스코프는 당연히 함수이지만,ES6부터 생겨난 let과 const는 블럭 스코프이다. 전역 변수와 지역 변수가 충돌할 경우 지역 변수를 우선한다. 렉시컬 스코프?렉시컬 스코프? 2 자바스크립트는 동적 스코프가 아닌 정적 스코프, 즉 렉시컬 스코프이다.어디서 호출하였는지가 아니라, 어디서 선언하였는지에 따라 결정되는 것이다. 자바스크립트에서 스코프는 선언할 때 생긴다는 점을 인지해야 한다. (선언, 초기화, 할당 중 선언)한번 선언할 때 생긴 스코프는 변하지 않는다.
WEB/JS 2019. 1. 9. 20:33

[JS] 프로토타입(Prototype)

프로토타입이란? 상속 개념과 비슷하게, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용하는 것이다. 원시타입은 객체가 아니므로 프로토타입을 가질 수 없지만,원시타입으로 프로퍼티나 메소드를 호출할 때 타입과 관련된 객체로 일시적으로 변환돼 프로토타입 객체를 공유한다.다만 객체와 달리 프로퍼티나 메소드를 직접 추가할 수는 없다.하지만 String.prototype.method 와 같이 String 객체에 추가하면 원시타입에서도 사용 가능하다. 프로토타입 체인은 해당 객체에 프로퍼티가 없을 경우 발생한다.부모를 따라 올라가면서 해당 프로퍼티가 있는지 확인하는 것.
WEB/JS 2019. 1. 9. 17:51

[JS] 호이스팅(Hoisting)

변수 호이스팅이란? var이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성이다. 변수의 생성은 아래와 같은 단계를 거쳐 이루어 진다.선언(변수 객체에 등록) - 초기화(변수를 메모리에 할당, undefined로 초기화) - 할당(실제 값을 할당) var로 선언했을 경우,변수는 선언과 초기화가 먼저 한번에 일어나고, 할당은 선언문에 도달했을 때 일어난다.때문에 할당 이전에 호출할 경우 undefined이다.선언과 초기화는 미리 일어나기 때문에, 참조 에러는 발생하지 않는다. 12console.log(a); // undefinedvar a = "hello";cs let이나 const로 선언했을 경우,var와 달리 선언과 초기화 단계가 분리돼 진행된다.선언은 미리 이루어지지만 ..
WEB/JS 2019. 1. 9. 01:14

[Rails] MODEL

CRUD의 C를 진행하기 앞서, 게시물을 생성할 때 담을 DB가 필요하다. post라는 모델을 한 번 만들어보자. post 모델에는 column으로 게시물을 제목을 담을 title, 게시물의 내용을 담을 content가 필요하다. title의 자료형은 string으로, content의 자료형은 text로 하도록 하겠다. 기본적으로 레일즈에서는 rails g model "모델명" 이라는 명령어를 지원한다. 해당 명령어를 입력하면 migration 파일이 생성되는데, 생성된 파일 안에서 필요한 column을 적은 뒤, rake db:migrate 명령어로 테이블을 생성하게 된다. 모델과 함께 한번에 column까지 생성하는 방법도 있는데, rails g model "모델명" 뒤에 column의 이름을 따라 ..
WEB/ROR 2018. 5. 24. 22:28

[Rails] REST API

REST API에 관해서는 다른 블로그의 게시물들이 더 잘 설명해주고 있다. 이제부터 본격적으로 살펴볼 CRUD에서는 글을 작성할 때는 POST, 수정할 때는 PATCH, 삭제할 때는 DELETE, 나머지 페이지를 받아올 때는 GET 메서드를 사용할 예정이다. 모든 액션을 GET으로 처리하면 문제가 없겠지만, 지금처럼 REST하게 하기 위해서는 토큰을 전송하는 과정이 필요하다. 이 토큰을 생성하는 과정을 한 번 알아보고자 한다. 토큰을 사용하는 이유는 CSRF를 방지하기 위함인데, 게시물을 생성할 때 게시물의 제목과 내용만 전송하는 것이 아니라 토큰을 함께 전송해 보안을 강화하는 방법이다. 말은 거창하게 보일 수 있는데 실제 코드는 별 게 없다. 이렇게 컨트롤러에서 토큰을 생성하고, 폼 안에 게시물 제목..
WEB/ROR 2018. 5. 24. 22:17

[Rails] CRUD

지금부터 다뤄볼 Ruby On Rails의 CRUD는 Rails Helper의 도움을 받지 않은 순수 HTML Form Tag만을 이용한 CRUD이며, REST API의 규칙을 따른다. Helper를 이용한 Rails스러운 CRUD는 추후에 다뤄볼 예정이다. 우선 우리가 다뤄볼 CRUD에 필요한 액션은 총 7가지가 있다. CRUD로 총 네가지가 아니냐고 할 수 있겠지만 뷰페이지와 그에 상응하는 액션을 따져보면 총 7가지가 맞다. index (글의 목록을 보여주는 뷰페이지)read (글 내용을 보여주는 뷰페이지)new (글 작성 뷰페이지)create (글 작성 액션)edit (글 수정 뷰페이지)update (글 수정 액션)destroy (글 삭제 액션) 구성은 다음과 같다.1. index 페이지에는 글 목..
WEB/ROR 2018. 5. 24. 15:12

[CSS] 드래그 영역 색상 변경

네이버 edwith 사이트에서 사용된 코드이다.::selection 가상요소를 이용하면 드래그 영역의 색상을 변경할 수 있다. :hover, :visited와 같이 콜론이 한 번만 붙는 것은 가상클래스,::selection, ::placeholder와 같이 콜론이 두 번 붙는 것은 가상요소라 한다. 가상클래스는 선택자에 특별한 상태를 부여하는 것이고,가상요소는 단독으로 문서의 특정한 부분의 스타일을 지정하는데 쓰인다.
WEB/CSS 2018. 5. 20. 17:48