본문 바로가기

분류 전체보기154

SVG란? 기존에 알고 있던 SVG에 대한 상식 백터기반이기 때문에 사이즈가 변경되어도 안 깨지고 XHTML 문법으로 이루어져서 CSS 및 Event Handle이 가능하다. 정확한 개념 정리 SVG의 약자는 Scalable Vector Graphic 의 약자입니다. 2차원의 백터 그래픽을 표현하기 위해서 탄생하였고 XML 기반의 표현입니다. 1998년 W3C에서 개발을 하였고 그전에는 Microsoft의 "VML"와 Apple의 "PGML" 이라는 2차원의 백터 그래픽을 XML로 표현하는 언어가 있었습니다. 하지만 두개다 W3C에서 채택하지 않았고 W3C는 SVG를 개발하여서 표준으로 채택하였습니다. SVG의 장단점 장점으로는 백터기반이기 때문에 기존의 비트맵 기반의 포멧과 달리 사이즈가 늘어나도 사진이 깨지지 .. 2018. 8. 9.
쿠키란? Cookie 개념 쿠키란? 브라우저의 저장소 역활을 하기 위해 사용합니다. 쿠키는 만료 기간이 있는 키 - 값 저장소입니다. document.cookie를 통해 현재 쿠키의 정보를 알아낼 수 있습니다. 쿠키의 특징 4KB의 용량 제한이 있습니다. (1KB는 1024 바이트 => 한글자당 보통 2Byte니까 512글자정도 쓸수 있는 용량) 계산해보면 2000자 남짓의 텍스트를 저장할 수 있다고 가정하겠습니다. 매 서버 요청시마다 서버로 쿠키가 전송되는데요, 왜 쿠키가 전송될까요? 그것을 알기위해서는 HTTP요청에 대해서 간단히 알아야합니다. HTTP 요청은 상태를 가지고 있지 않습니다. (Stateless) 무슨 말인지 예를 들면 브라우저에서 서버로 나에 대한 정보를 가져오라는 Get /Me라는 요청을 보낼 때, 서버는 요.. 2018. 8. 6.
CSS - 뷰포트란 무엇일까? 모바일 친화적이란? 사이트가 모파일 친화적이라는 것은 간단하게 사용자가 모바일로 웹 페이지를 이동할 때 편하게 이용할수 있음을 뜻합니다. 사이트의 데스크톱 버전을 휴대기기에서 보거나 사용한다면 콘텐츠를 읽기위해 두 손가락으로 화면을 모으거나 확대할 수 있고 이는 사용환경을 번거롭게 느끼게 하므로 사용자가 사이트를 떠날 확률이 높기 때문에 모바일 친화적으로 만드는 것이 중요합니다. ViewPort?? 정의 모바일 브라우저들은 viewport로 알려진 가상의 window상에 페이지를 렌더링 합니다. 즉 화면 Display상의 표시 영역을 뜻합니다. 모바일 Safari는 viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대.. 2018. 8. 3.
웹에서 forward와 redirect의 차이 페이지 전환 방식 웹에서는 페이지 전환 방식이 2가지가 있습니다. forward 방식과 redirect 방식이 있습니다. forward 방식 Web Container 차원에서의 페이지 이동만 있습니다. 실제로 웹 브라우저는 다른 페이지로 이동했음을 알 수 없습니다. 그렇기 때문에 웹 브라우저에는 최초에 호출한 URL이 표시되고 이동한 페이지의 URL 정보는 볼 수 없습니다. 동일한 web container 차원에서의 페이지 이동만 가능합니다. 현재 실행중인 페이지와 forward에 의해 호출될 페이지는 request, response 객체를 공유합니다. Redirect 방식 web container 는 redirect 명령이 들어오면 웹 브라우저에게 다른 페이지로 이동하라는 명령을 내립니다. 웹 브라우저.. 2018. 8. 2.
Functional Reactive Programming - 개념 정리 Observable이란? Observable 이란 데이터의 흐름을 관리하기 위한 패턴입니다. Observable은 데이터의 흐름에 맞게 알림을 보내 구독자가 데이터 처리를 할 수 있도록 만드는 역활을 합니다. 보통 Observable은 3가지의 상태를 알려줍니다. 데이터의 발행 (onNext)모든 데이터의 발행의 완료 (onComplete)에러 발생 (onError) Subscriber란? 데이터의 흐름을 구독한다는 의미입니다. 위의 onNext, onError, onComplete에 대한 리스너를 설정하고 3개의 이벤트에 대한 로직을 만들고 수행합니다. 예제) 아이템을 소비하는 코드 *ex ) Hello World Observable로 구현하기 Observable myObservable=Observab.. 2018. 8. 1.
자바스크립트 - IIFE 란? (Immediately Invoked Function Expressions) IIFE란 IIFE는 Immediately Invoked Function Expressions의 약자이고 “Iffy”라고 발음합니다. 즉 즉시 호출 함수 표현식의 줄임말입니다. 즉시 실행 함수의 기본적인 형태는 다음과 같습니다. 함수의 선언과 표현 IIFE를 이해하기 위해서는 앞전에 설명했던 함수의 선언(Function Declaration)과 함수의 표현(Function Expression)의 차이점에 대해 이해해야 합니다. 많은 사람들은 단순히 표현식에서는 함수명이 생량될 수 있다고 알고 있지만 사실 이보다 좀 더 뚜렷한 차이점을 가지고 있습니다. 함수 선언(declartion)은 미리 자바 스크립트의 실행 컨텍스트(execution context)에 로딩되어 있으므로 언제든지 호출 할 수 있지만, .. 2018. 7. 26.
그래픽스 - 동차 좌표계와 투영행렬 동차 좌표계란? (x, y) 를 (x, y, 1)로 표현하는 것을 말합니다. 일반적으로 말해 임의의 0이 아닌 상수 w에 대해 (x,y)를 (wx, wy, w)로 표현하는 것입니다. 동차 좌표계를 사용하면 affine변환이나 perspective변환을 하나의 단일 행렬로 표현 할 수 있습니다. projective geometry에서 사용하는 좌표계가 동차 좌표이며 다른말로 projective좌표 라고 합니다. 투영행렬과 동차좌표의 관계 투영행렬에서, 카메라 공간상에 존재하는 점과 카메라 위치 사이의 깊이값(z)를 최종 결과점의 x,y,z에 각각 곱해지고, w에 저장됩니다. 바로 이 과정이 동차좌표계를 위한 과정입니다. 좌표공간에서의 3d좌표를 얻어내려면 w로 나눠내면 됩니다. 여기서 월드공간 카메라 공간.. 2018. 7. 16.
그래픽스 - Projection Matrix란? 투영행렬과 뷰행렬의 관계 뷰 행렬(View Matrix)란 랜더링 파이프라인 단계의 3번째 단계인 뷰 스페이스를 구성하는데 사용되는 설정을 위한 행렬이라고 한다면 투영 행렬은 파이프라인 단계의 투영 과정시에 이루어지는 작업을 위한 정보를 준비하는 것입니다. 투영 과정은 사실상 뷰 스페이스와는 별개의 과정이지만, 눈에 보이는 화면의 시점을 결정하는 성질을 가지므로, 카메라 객체과 뷰행렬과 함께 투영행렬을 함께 관리하도록 구성하기도 합니다. X,Y,Z로 3개의 정보로 이루어진 3차원 공간을 X,Y 좌표만으로 표현한다고 생각하면 조금 쉽게 이해할 수 있습니다. 이것은 2차원 면 위에 입체 도형을 표현하는 과정입니다. 투영이란 무엇일까? 투영(Projection) 이라는 것은 n차원의 공간을 n-1차원으로 표현.. 2018. 7. 15.
안드로이드 - 면접대비 질문 모음 안드로이드의 4대 컴포넌트에 대해서 설명해보세요. 안드로이드의 4대 컴포넌트로는 액티비티, 서비스, 브로드캐스트리시버, 콘텐트 프로바이더가 있습니다.(액서브콘) 액티비티는 안드로이드에서 화면을 관리하고 사용자의 다양한 이벤트를 처리하는데 사용됩니다. 서비스는 화면에서 보이지 않지만 특정한 기능을 백그라운드에서 처리하는데 사용됩니다. 브로드캐스트 리시버는 안드로이드에서 발생하는 특정 브로트캐스트 메세지를 처리하기 위한 컴포넌트입니다. 콘텐트 프로바이더는 앱 사이의 데이터의 공유를 위한 인터페이스를 제공하는 컴포넌트입니다. 안드로이드의 액티비티와 액티비티의 수명주기에 대해서 설명해보세요. 안도르이드에서 화면을 관리하며 사용자가 발생시키는 다양한 이벤트를 처리하는 컴포넌트입니다부모 액티비티에서 새로운 자식 액.. 2018. 7. 11.
자바스크립트 - map 함수 JavaScript Map함수 foreach와는 다르게 map은 각 루트에서 return을 할 수 있습니다. map은 각 루프에서 return을 할 수 있다는 특징이 있습니다. map을 이용하면 return값으로 같은 길이의 배열이 나오게 됩니다. 배열의 값을 일괄적으로 바꿀때 유용하게 쓰일 수 있습니다. 2018. 7. 7.