프린세스 다이어리

1. 브라우저의 구성 요소 브라우저도 OS상에서 실행되는 하나의 애플리케이션이다. 이 애플리케이션을 활용해 사용자는 원하는 사이트에 들어가 정보를 찾고 소통을 하는 등의 행동을 한다. 브라우저가 이렇게 데이터를 주고받고 화면에 띄워주는 역할을 수행할 수 있는 이유는 브라우저를 구성하는 요소들이 다음과 같이 구성되어 있기 때문이다. 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워크, 자바스크립트 인터프리터, UI백엔드, 스토리지로 이루어져 있다. (1) 사용자 인터페이스 브라우저를 켰을 때 바로 확인할 수 있는 주소표시줄, 뒤로 가기 버튼, 플러그인 버튼, 새로고침 버튼 등, 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤할 수 있는 부분이다. (2) 브라우저 엔진 사용자가 주소창에 입력한 UR..

렌더링 엔진은 브라우저 엔진으로부터 사용자가 입력한 URI를 받아서, 해당하는 데이터를 렌더링 하는 역할을 한다. 브라우저마다 렌더링 엔진의 상세한 동작 과정이나 용어는 조금씩 차이가 있지만, 전반적인 원리는 기본적으로 동일하다. 크롬과 iOS의 경우, webkit이라는 렌더링 엔진을 사용한다. 렌더링 하는 과정은 다음과 같다. 객체 모델 생성 -> 렌더링 트리 구축 -> 렌더링 트리는 배치 -> 렌더링 트리 페인팅 1. 객체 모델(Object Model) 생성 브라우저가 페이지를 렌더링하려면, 먼저 HTML 문서를 파싱 하여 DOM트리를 생성하고, CSS 문서를 파싱 하여 CSSOM 트리를 생성해야 한다. DOM과 CSSOM은 서로 독립적인 데이터 객체이며, 나중에 이 두 가지가 병합하여 렌더링 된다...

1. Vue로 개발 시 프록시를 설정해주는 이유 일반적으로 프록시 또는 프록시 서버는 클라이언트와 서버 간의 중간다리 역할을 한다. 프록시에 대한 글에 프록시의 개념과 종류에 대해 정리해 두었다. Vue 개발 시에는 개발 환경에서 프록시를 설정하여 사용한다. Vue CLI 서비스(웹팩 개발 서버)를 사용하여 개발 모드에서 앱을 실행하는데 개발 환경에서 /api/reservations/:id로 요청을 하면 자동으로 http://localhost:8080/api/reservations/:id로 호출이 된다. 이렇게 되면 localhost:8080는 백엔드 서버에서 허락한 도메인이 아니기 때문에 브라우저에서 CORS 오류가 난다. 배포를 하고 나면 미리 설정한 도메인으로 바뀌니 상관이 없지만 로컬에서 개발 도..

크롬에서 가끔 아주 정말 가끔 이런 문제가 생긴다. 특정 리소스를 받아오지 못하는 게 아니라 애초에 브라우저가 요청조차 하지 못하는 상황이다. 무슨 영문인지 모를 때는 환장하겠는데 원인을 알면 전혀 문제되지 않는다. 원인은 인터넷 연결 불량 또는 이로 인한 크롬의 일시적 작동 불량이고 해결책은 간단하다. 1. 인터넷 연결이 잘 되었는지 확인한다. 2. 크롬을 껐다 켠다. 3. 크롬 네트워크 창의 throttle 설정이 오프라인으로 되어 있는지 확인한다. 3번 진짜 혹시나 나같은 멍청이가 있을까 싶어서 적는다. 우리 프로젝트가 네트워크 상황이 좋지 않을 때 어떤 모습으로 렌더링되는지 알아보기 위해, 네트워크 창에서 인터넷 설정을 오프라인으로 해 두고 잊고 술을 먹으러 가 버려서 이런 문제가 생겼다. 나는 ..

입사 초기에 잘 몰라서 해결하는 데 오래 걸렸던 이슈였다. 사실 지금 생각하면 해결점이 꽤나 뚜렷한 초보적인 고민이었는데 당시에는 대체 누가 이걸 해결해야 하나 구글만 뒤지고 있었다. preflight이 뭔지도 모르고, 도대체 OPTIONS는 쓰지도 않았는데 왜 계속 등장하는지 서로 익숙지 않아 애를 썼던 기억이 난다. 브라우저의 보안에 대해 잘 알고 있었다면 문제없이 해결할 수 있었을 거다. 1. CORS란 먼저 CORS 가 가능하기 전 브라우저가 공격으로부터 보호하기 위해 동일 출처 정책(SOP)을 가지고 엄격하게 제약을 걸었다는 것을 짚고 넘어가야 한다. 브라우저에 대한 공격은 크게 능동적 공격과 수동적 공격으로 분류된다. 능동적 공격은 해커가 웹서버에 직접 공격하는 것을 뜻하고, 수동적 공격은 웹..

1. 동일 출처 정책(Same-Origin Policy) 동일 출처 정책이란, 자바스크립트 같은 클라이언트 스크립트에서 사이트의 특정 자원에 대한 접근을 금지하는 보안상의 제한이자, 브라우저의 샌드박스에 포함된 제한 중 하나다. 한 origin으로부터 로드된 document 또는 스크립트가, 다른 origin으로부터 받은 리소스와 상호작용을 하는 것을 제한하여 공격에 대비하는 중요한 보안 메커니즘이다. 브라우저가 같은 오리진임을 판단할 때, 딱 세 가지의 조건으로 판단을 한다. - 스킴(프로토콜) 일치 - URL의 호스트(Fully Qualified Domain Name)가 일치 - 포트 번호 일치 위의 URL과 동일한 origin인 url은 다음 중에서 어떤 것일까? 1. https://eunjinii..

1. 메모리 누수란? 메모리가 할당(allocated)된 상태에서, 프로그램의 어디에서도 참조(used)되지 않는데도 방출(release)되지 않은 상태로 계속 누적이 되면, 메모리 내에 프로세스 무게가 계속 더해져서 프로그램이 갑자기 종료되거나 멈춰버리는 주요한 원인이 된다. 자바스크립트에서는 기본적으로 가비지 콜렉터 기능을 가지고 있어, 프로그래머가 모든 변수를 필요 없어질 때마다 메모리 해제해 줘야 하는 부담은 덜었다. 하지만 애플리케이션이 복잡해지고 특정 라이브러리 또는 로직을 사용하여 코드를 짰을 때 의도대로 메모리가 정리되지 않고 지속적으로 쌓여 프로그램 성능이 저하될 가능성이 생긴다. 자바스크립트에서 대표적으로 메모리 누수를 막기 위해 어떤 방법을 사용할 수 있는지 정리해보았다. 2. 메모리..

도대체 무슨 말인가 했는데 알고 보니 fetch한 데이터 타입, 컴포넌트에서 불러와서 저장하는 데이터 타입을 맞춰주면 됨. 1. 문제 // api/service.ts export async function fetchData(): Promise { const response = await axios({ url: '/detailMock.json', method: 'GET', }); return Promise.resolve(response.data.result); } // pages/bookingDetail/DetailPage.vue setup() { return { bookingItem: {} as Ref, } }, async mounted() { try { const result = await fetchD..