Javascript
-
Node.js 란?Javascript/Node.js 2020. 1. 21. 17:32
서버 클라이언트에게 서비스를 제공하는 컴퓨터 또는 프로그램이다. 노드는 서버로도 사용할 수 있는 것이다. 명심하자. 자바스크립트 런타임 런타임이란 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻한다. 이 말은 즉, 자바스크립트 프로그램을 실행할 수 있게 해준다는 것이다. 구글에서 만든 V8 엔진은 다른 엔진에 비해 속도가 매우 빨라서 노트 프로젝트가 진행된 것이다. 노드는 V8과 libuv 라는 라이브러리를 사용한다. 둘 다 C, C++로 구현했으나 자동으로 V8, libuv에 자동으로 연결해주므로 C, C++을 따로 공부할 필요는 없다. 이벤트 기반 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미한다. (네트워크 요청, 클릭 등) 이것을 event listener에 callbac..
-
DOMJavascript 2020. 1. 21. 16:37
getElementsByTagName 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList 라는 유사 배열에 담아서 반환한다. getElementsByClassName class 속성의 값을 기준으로 객체를 조회할 수 있다. getElementById id 값을 기준으로 객체를 조회한다. 성능면에서 가장 우수하다. querySelector 조건 중에서 하나만 지정한다. 모든 객체를 조회한다면 querySelectorAll 을 사용한다. querySelector('li') : 태그가 li 인 것들을 고른다. querySelector('.active') : "." 이 앞에 붙어있다면 class 의 속성값이라는 것을 의미한다. class 속성이 'active' 인 것을 고른다. jQue..
-
BOMJavascript 2020. 1. 20. 22:44
window 객체 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미한다. window 하위 프로퍼티나 메소드를 접근할 때, window를 생략해도 된다. alert 경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅 등의 용도로 많이 사용한다. alert을 끄지 않으면 다음 코드로 넘어가지 않는다.(동기적으로 동작) confirm 확인창이라고 부른다. 확인을 누르면 true를 return 한다. prompt 사용자가 입력한 값을 받을 수 있는 창이다. 사용자가 작성한 내용을 return 한다. location 문서의 주소와 관련된 객체로 window 객체의 프로퍼티이다. 현재 브라우저 창에 있는 문서의 위치와 관련한 다양한 정보를 얻을 수 있다. location.href : loc..
-
object modelJavascript 2020. 1. 20. 22:00
object model 웹브라우저의 구성요소들은 하나하나가 객체화 되어있다. 자바스크립트로 이 객체를 제어할 수 있다. BOM, DOM은 객체들의 계층적인 구조를 구성하는 가장 큰 틀의 분류이다. window 객체는 크게 DOM, BOM, Javascript 로 구성된다. Javascript는 생략하고 BOM, DOM에 대해서 알아보도록 하겠다. BOM 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. 예를 들어, alert와 같은 것이다. 웹 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. 전역 객체인 window의 프로퍼티와 메소드를 통해서 제어할 수 있다. DOM 웹페이지의 내용을 제어한다. 문서 내의 주요 엘리먼트에 접근할 수 있는 객..
-
PassportJavascript/Node.js 2020. 1. 15. 10:34
passport란? 페이스북, 구글과 같은 기존의 SNS 서비스 계정을 이용해 로그인을 하도록하는 연동 기능을 수행하는 모듈 로컬, 페이스북, 구글 등 다양한 서비스를 이용할 수 있으나, 각각 필요한 서비스 별로 설치 해야한다. 예를 들어, 로컬과 카카오톡을 사용할 경우 아래와 같이 설치한다. app.js module/passport/index.js module/passport/kakaoStrategy.js module/passport/Log.js routes/Auth/index.js 문제 app.js에서 passport initialize(), session() 메소드를 호출했음에도 불구하고, 초기화 관련 오류가 발생했다. 해결 app.js에서 설정 관련 코드 라우트 호출 함수 위에서 배치하는 것이 좋..
-
react 7Javascript/React.js 2020. 1. 9. 10:32
life cycle method component를 생성하고 없애는 방법 Mounting component가 새롭게 생성되는 시점이다. component 함수가 실행되고 결과물로 나온 Element 들이 Virtual DOM에 삽입되고 실제 DOM을 업데이트하기까지의 과정이다. constructor : class를 생성할 때 사용하는 JS 문법이다. component가 mount될 때, constructor를 호출한다. 그리고 나서 render function을 호출한다. componentDidMount : 결과물이 DOM에 mount된 직후 실행되는 메소드이다. Update state나 props가 변경이 되면 update가 진행되며 다시 rendering 된다. component가 update 될 때..
-
react 6Javascript/React.js 2020. 1. 8. 23:41
state 존재하지 않으면서 변화하는 dynamic data을 사용하기 위한 객체이다. class component 지금까지 배운 것은 function component이다. 그러나 이제는 메소드와 객체들을 사용하기 위해서, 그 중에서도 state를 사용하기 위해서 React.Component로부터 확장된 class component를 사용할 것이다. 예를 들어, 핸드폰이 React.Component 라면 우리가 만들 class App은 삼성이라고 볼 수 있다. render() 뷰를 렌더링 해주는 함수이다. Virtual DOM을 사용하기 때문에 refresh한 경우, 변화가 있는 부분만 업데이트된다. setState() state를 변경하기 위해서는 setState function을 이용해야 한다. 그..