본문 바로가기

전체 글42

자바스크립트 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.
서버사이드렌더링(Server-Side-Rendering) 서버사이드렌더링(Server-Side-Rendering)이란? - Rendering : 어떠한 웹 페이지 접속시, 그 페이지를 화면에 그려주는 것(요청받은 내용을 브라우저 화면에 표시하는것) - 로더가(Loader)가 서버로부터 정보들을 불러옴 - 파싱(Phasing)을 통해 문서를 DOM 트리 만듦 - DOM트리가 구축되는 동안 브라우저는 렌더 트리를 구축 - css 설정/레이아웃 위치 지정 - 렌더링 트리가 그려짐 - 전통적인 웹 어플리케이션은 서버사이드렌더링 방식을 사용(전통 웹 방식 != SSR)(즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식이었다. 이런 방식을 사용하다가 일부 HTML과 Script만 브라우저로 전달하고, 브라우저에서 Sc.. 2019. 5. 1.
동형 자바스크립트(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.
Daily Planner 2017. 12. 26.
[Java8] Default Method와 Static method Default Method Java8 이전까지 Interface의 추상 메소드는 반드시 클래스에서 구현해야 하고, Interface에 새로운 메소드가 추가되면, 구현 클래스를 반드시 수정해야하는 바이너리 호환성에 이슈가 생길 수 있었다. 하지만 Java8 이후에는 Interface에 default method를 생성하게 되면 Interface 내에서 구현이 가능하고 구현 클래스에서 반드시 수정할 필요가 없다. 즉, default 메소드는 구현하는 모든 클래스들이 동일한 기능을 사용할 수 있도록 하면서 Interface에 변경이 생기더라도 바이너리 호환성을 유지할 수 있게 되었다. Static Method Interface에서 static method 사용이 가능해졌다. Factory method를 Int.. 2017. 6. 20.
[Java8] 함수형 프로그래밍 함수형 프로그래밍(Functional Programming)이란? 계산을 수학적 함수의 평가로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임이다.*Side Effect(부수효과)를 제거할 경우에 프로그램의 동작을 이해하고 예측하는 것이 훨씬 쉬워지기 때문에 Side Effect가 없는 Pure Function(순수 함수)들로만 작성 되어진다. *Side Effect(부수효과)란?- 변수를 수정하거나, 객체의 필드를 설정하는 것- 예외(Exception)를 던지거나 오류를 내면서 실행을 중단하는 것- 콘솔에 출력하거나 사용자의 입력을 읽어 들이는 것- 파일에 기록하거나 파일에서 읽어 들이는 것 함수형 프로그래밍(Functional Programming)의 기본 원리들 1. 변경 불가능한 값을 .. 2017. 6. 20.
메모리 단편화(Memory Fragmentation) 메모리 단편화(Memory Fragmentation)란? 주 기억장치에서 메모리의 공간이 작은 조각으로 나뉘어져서, 사용하기에 충분한 양의 메모리가 존재는 하지만 사실상 사용이 불가능한 경우 메모리 단편화가 발생했다고 한다. 메모리 단편화는 내부 단편화와 외부 단편화로 구분할 수 있다. 내부 단편화(Internal Fragmentation)필요한 양보다 더 큰 메모리가 할당이 되어서 할당 된 메모리 내부에 사용하는 메모리 공간 이외에 사용하지 않는 메모리 공간이 발생했을 때를 말한다. 외부 단편화(External Fragmentation)메모리가 할당이 되고 해제가 되는 작업이 반복될 때 작은 단위의 메모리가 띄엄띄엄 존재하게 되는데 빈 메모리의 전체 공간은 충분한 양이지만 실제로 사용할 수 없는 경우를.. 2017. 6. 19.