운동과 개발

0. 서론 프론트엔드 개발자에게 브라우저란 일을 제공해주는 플랫폼이고, 개발을 함에 있어서 기본이 되는, 꼭 알아야만 하는 것이라고 생각한다. 프론트엔드 면접 관련 질문을 찾아봐도 어딜가나 쉽게 찾아볼 수 있는것을 보면 아마 그러한 질문을 하는 면접관(시니어 개발자)들도 이 중요성을 알기때문에 질문하는 것이겠지? 라는 생각이 든다. 그렇다고, 모든 프론트엔드 개발자가 브라우저의 모든 원리에 대해 잘 알고 있는 것은 아니라고한다. 브라우저는 아주 많은 기능을 수행할 수 있는 복잡하고 고도화된 어플리케이션 이기 때문이다. 하지만, 더 나은 프론트엔드 개발자가 되기 위해서 결국에는 전 과정을 설명할 수 있는 단계까지 가야만 한다고 생각한다. 그래서 이번 기회에 되도록 최대한 많은자료들을 보고 정리를 해보려고 ..

0. 들어가며... 브라우저에는 웹사이트에서 관리할 수 있는 저장소들이 존재한다. 이 저장소는 html5부터 제공하는 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능이다. 즉, 사용자의 컴퓨터에 있으며, JavaScript를 통한 접근이 가능하다. 브라우저가 가지고 있는 저장소는 다음과 같다. 1. LocalStorage & Session Storage 2. Cookie 3. IndexedDB 4. Memory & Cahce 이중에서 LocalStorage & Session Storage에 대해 알아보겠다. 1. LocalStorage & Session Storage의 기본 1. localStorage와 SessionStorage는 같은 인터페이스를 공유한다. 인터페..

1. 들어가기에 앞서... FOIT 와 FOUT 라는 용어에 대해 알아보자. FOIT (Flash of Invisible Text) 란? 브라우저가 웹페이지가 로드될 때, 웹 폰트가 아직 다운로드되지 않았기 때문에, 일시적으로 텍스트가 화면에 표시되지 않는 현상을 말한다. 특히 대체 폰트가 지정되지 않은 경우 브라우저가 폰트를 렌더링하기 위해 다운로드를 기다리는 동안 발생할 수 있다. FOUT(Flash of Unstyled Text)란? 웹 페이지에서 원하는 글꼴이 로드되기 전에 브라우저에서 기본 글꼴로 표시되는 현상을 의미한다. 이와 같은 폰트 이슈가 생기는 이유는 브라우저 동작에 있어서 폰트 리소스 요청의 경우에는 다른 리소스 요청보다 늦게 처리되기 때문이다. 따라서 웹 사이트를 구성하는 사이에 폰..

1. 크로스 브라우징이란 무엇인가? 2. 크로스 브라우징이란 개념이 생기게 된 이유는 무엇인가? 3. 크로스 브라우징은 어떻게 하는건데? 4.서비스 중에 발생할 수 있는 다양한 호환성에 대한 문제와 해결방법 5. Metatag의 다른 설정 방법 1. 크로스 브라우징이란 무엇인가? 웹 페이지가 웹 브라우저의 종류에 구애받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업이다. 쉽게 말해, 기기가 달라지더라도, 웹페이지가 일관된 서비스를 제공할 수 있도록 해 주는 작업이다. 2. 크로스 브라우징이란 개념이 생기게 된 이유는 무엇인가? 이유를 말하려면 웹브라우저에 대해 이야기할 필요가 있다. 웹 브라우저는 사용자들이 웹 콘텐츠를 이용할 수 있도록 편리한 인터페이스를 제공해주는 소프트웨어이다. ..

1. Web Standards (웹 표준) 은 어떤 필요성에 의해 등장 했을까? 1. 1990년대 초반, 인터넷이 상용화되기 시작하면서 웹 페이지가 등장 2. 당시에는 웹 페이지가 다양한 브라우저에서 동일하게 보이지 않았다. 몇 년전까지만해도 각각의 브라우저가 가지고 있는 장점 혹은 유리한 기능을 부각시키기 위해 경쟁을 목적으로 다른 브라우저와는 호환이 되지 않는 요소들을 사용하기도 했다. 이로인해 생겨난 문제점이 다른 브라우저까지 보여지는 화면이 다르다는 것 그 중에서도 각각의 의미에 맞는 요소의 무분별 이러한 문제는 웹 디자이너들과 개발자들이 웹 페이지를 만들 때 매우 어려움을 겪게 만들었다. 이런 문제점들 떄문에 1994년에 W3C(World Wide Web Consortium)이라는 공식 웹 표준..