기술면접 (16) 썸네일형 리스트형 SPA의 장점이 무엇인가요? SPA란? SPA는 Single Page Application의 약자로서 하나의 페이지로 구성된 애플리케이션을 말합니다. 페이지 요청 시 완전히 새로운 페이지를 불러오는 것이 아닌, 동적으로 페이지를 다시 작성해 '사용자와 소통' 하는 웹 애플리케이션 or 웹 사이트를 뜻하며, 처음 로드 하고 난 뒤 새로고침이 없는 것이 특징입니다. SPA는 사용자가 요청한 각각의 페이지를 서버가 생성해서 전달해주는 것이 아니라, 클라이언트가 동적으로 페이지를 다시 작성하는 방식이며, 첫 페이지 요청 시 단 한번만 리소스를 로딩하고 그 이후로는 페이지 로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신합니다. SPA의 장단점 SPA의 가장 큰 장점은, 자바스크립트를 사용해서 웹 어플리케이션 형태로 사용할 수 있다는 .. 웹페이지가 사용자에게 보여지는 과정에 대해서 설명하세요. 웹 브라우저의 동작 원리 웹페이지 로드 과정 브라우저에서 특정 페이지로 이동할 때 어떤 과정을 거치는지 알아봅시다. 현재 페이지에서 특정한 다음 페이지로 이동한다고 가정하면, 웹 페이지를 로드하는 과정은 W3C Spec을 따릅니다. Prompt for unload 현재 페이지에서 다른 페이지로 이동할 때 발생하는 이벤트로 뒤로가기 버튼이나 링크를 눌러 다른 도메인의 페이지로 이동할 경우 발생합니다. 웹 브라우저 내 현재 문서에서 다른 문서로 벗어나는(이동하는) 단계로 unload(window: beforeunload 이벤트)를 적용할 수 있습니다. beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누를 경우.. 브라우저 렌더링 (작동) 원리 사이트에 접속하면 브라우저는 서버로부터 HTML 문서를 모두 전달 받아 읽어들입니다. 그로 인한 Loading이 진행되는데, 이는 HTTP 모듈 또는 파일 시스템으로 전달 받은 리소스 스트림을 읽는 과정입니다. 렌더링 엔진은 전달받은 HTML 문서를 파싱하면서 DOM 객체 모델을 만듭니다. 이는 무엇을 그릴지 결정하며, CSSSOM Tree 또한 빌드하여 HTML 문서로 만든 것을 어떻게 그릴지 결정합니다. 이렇게 생성한 DOM과 CSSOM을 결합하여 렌더링 트리를 형성하는데, 이는 화면에 어떻게 그려질 것인지를 결정합니다. 이 이후에 Layout을 과정을 진행하는데, 이는 렌더 트리의 각 노드에 대해서 화면 상에서 어디에 배치할 지 계산하여 box-model을 생성하는 과정으로 reflow라고도 칭합니.. lazy loading lazy loading이란 레이지 로딩은 on-demand loading 이라고도 불리는 온라인 콘텐츠 최적화 기법으로 웹 페이지 전체를 불러와서 한 번에 사용자에게 렌더링하는 방식 대신, 필요한 부분만 불러오고 나머지 부분은 사용자가 필요할 때까지 미루는 것으로 사용자의 데이터 낭비를 막아줍니다. 예를 들어, 사용자가 검색 엔진에서 한 이미지를 검색 했을 때, 요청한 내용으로 채워진 전체 웹 페이지가 로드됩니다. 사용자는 첫 번째 이미지가 해당 찾던 이미지라면 웹 페이지를 닫을 것이고, 이렇게 되면 로드된 나머지 이미지는 보이지 못하여 리소스가 낭비됩니다. lazy loading을 사용하면 페이지가 placeholder 콘텐츠로 작성되며, 사용자가 필요할 때만 실제 콘텐츠로 대체 됩니다. lazy lo.. Client Side Rendering 과 Server Side Rendering 의 차이 CSR (Client Side Rendering) 웹 페이지의 렌더링이 클라이언트 (브라우저)측에서 일어납니다. 서버에서 인덱스라는 HTML 파일을 클라이언트에 보내주는데 이 인덱스 파일은 대부분 비어있어 사용자에게 아무것도 보여지지 않습니다. 장점: 서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빠릅니다. 단점: 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다는 점과 SEO(Search Engine Optimization)가 좋지 않다는 점입니다. SSR (Server Side Rendering) 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보내고 클라이언트 상에서는 잘 만들어진 HTM.. script, script async 와 defer html에서 자바스크립트를 포함할 때 어떻게 포함하는게 효율적인지 알아봅시다. 태그를 태그가 끝나기 직전에 위치 시키는 이유 브라우저는 HTML을 다운로드 받으면, 한줄 한줄씩 파싱하면서 DOM을 만들고, CSS를 다운로드 받으면 CSSOM을 만들어 병합하게 됩니다. 브라우저는 태그를 만나면 HTML 파싱을 잠시 멈추고, 를 다운로드한 후 실행합니다. 태그 안에 태그를 위치시키게된다면, 만약 자바스크립트 파일의 크기가 크고 인터넷이 느리다면 사용자가 웹사이트를 보는데 많은 시간이 소요됩니다. 태그 끝부분에 태그를 넣는다면 html을 다운받아서 파싱한 뒤에 를 fetch하고 실행하게 되면 페이지가 사용자들에게 자바스크립트 파일을 다운 받기 전에도 이미 준비가 되어서 사용자가 기본적인 html 컨텐츠를 빨리.. REST한 API에 대해서 자세히 설명해주세요. REST API는 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다. REST API를 작성할때 몇가지 지켜야할 규칙들이 있는데, 첫번째로, HTTP 프로토콜을 사용해야 하며 두번째로, 모든 자원은 개별 리소스에 맞는 엔드포인트를 사용해야하고, 요청하고 받은 자원에 대한 정보를 응답으로 전달해야 합니다. 세번째로, self-descriptive message 즉 CRUD에 맞게 조회에는 get, 생성에는 post 등 적절한 HTTP 메소드를 사용하는 것에 중점을 둡니다. 또한 post 요청에 대해 응답은 새롭게 생성된 리소스를 보내주기 대문에 응답코드도 201로 명확하게 작성해야하며 관련 리소스를 클라이언트가 Location 헤더.. CORS란 무엇이고 목적은 어떻게 되는지 설명해주세요. 그리고 NodeJS 기반의 웹 서버에서 CORS를 어떻게 설정하는지 설명해주세요. Cross-Origin Resource Sharing, CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. Cors : Cross-Origin Resource Sharing은 교차출처공유라는 것인데 이를 허용 해줌으로써 다른 출처간의 리소스를 공유할 수 있습니다. Cors에 대해 덧붙여서 설명드리려면 일단 SOP : same-origin-policy 에 대해 말씀을 드려야 할거같은데요. 동일출처정책이라는 의미로 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는것을 제한하는 보안방식입니다. 이와같은 제한은 악의를 가진 사용자가 정보를 탈취하는것 막기 .. 이전 1 2 다음
