자바스크립트의 this 자바스크립트에서 함수가 호출되면, 매개변수로 전달되는 인자값 외에도 arguments 객체와 this 를 전달받는다. 여기서 자바스크립트에서의 this 는 다른 언어의 this 와는 약간 다르게 동작하기 때문에 주의해야한다. 또한 Strict Mode와 Sloppy Mode에서도 약간이 차이가 있다. 예를 들어, Java에서의 this 는 인스턴스 자신(self)를 가리키는 참조 변수로 사용된다. this 가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버 변수명이 같을 경우 이를 구분하기 위해서 사용된다. 하지만 자바스크립트의 경우 Java와는 다르게 this 에 바인딩되는 객체는 한 가지가 아니다. 해당 함수의 호출 방식에 따라..
1. 불변함수 상태 업데이트를 지속적으로 하는 React 에서 불변성을 유지하는 것이 굉장히 중요하다. 리액트에서 개발의 편의성을 위해 컴포넌트 단위로 쪼개서 함수를 만든다. 큰 도화지에 스티커를 붙이듯 부모에 해당하는 함수의 return값에 컴포넌트들을 넣어 화면을 구현한다. 대체로 부모가 변경될 때 자식은 그에 의존적이기 때문에 부모에 입력된 컴포넌트들을 변경하는 연산을 수행할 경우가 생긴다. 그런데 만약 부모에 의해서 컴포넌트의 원본이 마구잡이로 바뀌게 된다면 프로그램의 안정성이 떨어지게 될 것이다. 리액트 프로그램의 안정성을 위해 불변성이 필요하다. 불변성을 유지함으로써 연산을 최적화시킬 수 있다! 불변성의 정의는 상태를 변경하지 않는 것을 뜻하며 컴퓨터 공학적으로 풀어 말한다면 메모리 영역의 값..
0. React 시작 리액트 시작하기 링크: Tutorial: Intro to React Node JS 설치: https://nodejs.org/ko/ 리액트 설치: https://reactjs-kr.firebaseapp.com/docs/installation.html 1. return할 때 하나의 DOM만 리턴할 수 있다. 아래 코드를 보자. return 안에 div 태그로 묶여있는 것을 확인할 수 있다. return되는 DOM이 1개이다. html 파일에 전달하면 div태그의 내용이 정상적으로 출력될 것이다. import logo from './logo.svg'; import './App.css'; function App() { return ( this is react program Title ); ..
1. AJAX란? AJAX는 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이며, 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 도구이다. AJAX는 마이크로소프트사가 만든 개념으로, 1999년에 처음으로 인터넷 익스플로러에 탑재되었지만, 5년 동안이나 아예 쓰이지 않았다. 2004년에 구글이 지메일 서비스를 시작하면서 AJAX를 사용했는데 지메일은 이를 통해 페이지 리로드 없이 받은 정보를 사람들에게 보여줄 수 있었다. 메일을 전송하거나 확인할 때 화면이 깜빡거리는 일이 사라진 것이다!! 그때서야 A..
1. DOM이란? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 API이다. HTML내에 들어 있는 요소를 구조적으로 표현하는 양식이자, 그 구조를 통해 각각의 요소에 손 쉽게 접근한다. 웹 브라우저는 HTML를 읽을 때, 위의 그림처럼 Document 객체를 뿌리로 하는 tree 자료구조를 구성한다. 근 노드(root node)인 html을 시작으로 단말 노드(leaf node)까지 뻗어나간다. 위쪽을 부모 노드(parent node) 아래쪽을 자식 노드(chile node)라고 부르며, 어떤 노드든지 부모가 되거나 자식이 될 수 있다. 자식이 없는 node를 단말 노드(leaf node)라고 부른다. 대체로 DOM이라고 하면 HTML DO..
