본문 바로가기

FrontEnd 기초4

자바스크립트 this JavaScript의 this 자바스크립트의 this는 Java같이 우리에게 익숙한 언어와 개념이 달라 개발자에게 혼란을 준다. 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, this를 암묵적으로 전달 받는다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수인 반면 자바스크립트의 this는 호출방식에 따라 this가 동적으로 바인딩 된다. 함수호출 this는 기본적으로 전역 객체인 window객체를 가리킨다. 외부함수든 내부함수든 this는 window객체를 가리킨다는 점을 잊지 말자. 메소드 호출 this는 객체를 통한 메소드 호출 시에는 해당 메소드를 호출한 객체를 가리킨다. 2019. 5. 12.
쿠키, 세션 스토리지(sessionStorage), 로컬 스토리지(locationStorage) 쿠키, 세션 스토리지(sessionStorage), 로컬 스토리지(locationStorage) Web Storage란?HTML5에서 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage가 추가되었다.Web Storage는 키/값의 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회할 수 있다.Web Storage에는 세션 스토리지(sessionStorage), 로컬 스토리지(locationStorage) 두 가지가 있는데 쿠키와의 다른 점은서버로 전송하지 않는 다는 점과, 용량의 차이가 있다. 한 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이며 최대 쿠키 크기는 4KB이다. 하지만 Web Storage에는 브라우저마다 차이가 있지만 약 5Mb정도까지 가능하다... 2019. 5. 12.
동형 자바스크립트(Isomorphic JavaScript) Isomorphic이란?- Isomorphic은 그리스어 '동등(equals)’을 의미하는 'isos’와 '형태(shape)’를 의미하는 'morphic’이 합쳐진 합성어다. Isomorphism은 서로 다른 컨텍스트를 가진 동일한 개체를 설명한다. 개발쪽에서 이야기하는 문맥에서는 서버(server)와 클라이언트(client)를 말한다. isomorphic javascript란- 개발쪽에서 말하는 아이소몰픽(Isomorphic, [àisəmɔ́ːrfik]) 은 동일한 소스코드를 가지고 서버쪽과 클라이언트쪽에서 작성하는 형태를 지칭한다고 볼 수 있다. 이 용어는 주로 수학에서 사용되었지만 최근들어 웹 프로그래밍 패턴에서 프론트엔드와 백엔드의 코드를 공유하는 곳에서 사용되고 있다. Why?- 동형 자바스크립.. 2019. 5. 1.
[Web App]싱글 페이지 어플리케이션 (SPA-Single Page Application) SPA란? 단일 페이지 애플리케이션. 정적파일을 한번에(나눠서도 가능) 모두 다운로드받고, 이후 사용자와의 상호작용 가운데 필요한 데이터만 서버에서 (비동기)동적으로 받게 해 트래픽의 총량을 줄이는 애플리케이션 형태. 웹의 사용성(UX), 속도 향상의 이점을 가지므로 모바일 퍼스트(Mobile First)전략에 부합한다. 웹 페이지인데 데스크탑 애플리케이션처럼 동작하는 웹 페에지. SPA의 장점 - 사용자 친화적(빠른 반응성, 화면 전환 애니메이션) client rendering, router - 서버 요청이 적음. - 개발이 간단하고 능률적. 페이지를 렌더링하기 위해 서버에 코딩할 필요가 없다. 서버 이용 없이 파일로부터 개발을 시작할 수 있기 때문에 시작하기 훨씬 쉽다. - 네트워크 작업을 모니터링하.. 2019. 3. 24.