웹 (14) 썸네일형 리스트형 기술면접 준비 예상질문 1. 클로저에 대해서 설명하세요 클로저란 내부함수가 외부함수의 지역변수를 사용 할 수 있고 외부함수는 내부함수가 외부함수의 지역변수를 사용하는 내부함수가 소멸될 떄까지 소멸되지 않는 특성을 의미합니다 2. 호이스팅과 Temporal Dead Zone이 어떻게 연관되어있는지 설명하세요. 호이스팅은 var, let, const, function, class 키워드 등을 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)가 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징입니다. 키워드마다 호이스팅 방식의 차이가 다릅니다 var의 경우 선언 단계와 함께 undefined로 초기화되므로 초기화 코드를 만나기 전부터 참조가 가능합니다. 반면에, let, const로 선언된 변수는 .. CORS 에러를 해결하는 방법 웹 개발을 하다보면 CORS 정책 위반으로 인해 에러가 발생하는 상황은 굉장히 흔하다 CORS는 Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다. CORS에러가 발생하는 원인은 CORS가 동일 출처 정책을 따르고 있기 때문이다 동일 출처 정책 규칙 http://www.example.com/dir/page2.html 성공 프로토콜, 호스트, 포트가 동일 http://www.example.com/dir2/other.html 성공 프로토콜, 호스트, 포트가 동일 http://username:password@www.example.com/dir2/other.html 성공 프로토콜, 호스트, 포트가 동일 http://www.example.. Lighthouse를 이용한 웹 페이지의 품질을 개선 Lighthouse(라이트하우스)란? Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구입니다. 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있습니다 Lighthouse 사용하기 크롬 개발자 도구를 이용하여 Lighthouse를 사용 할 수 있습니다 개발자 도구를 켜고 Lighthouse을 클릭 후 원하는 설정을 하고 Analyze page load를 하면 됩니다 그러면 아래 사진과 같이 성능측정을 할 수 있습니다 Lighthouse로 확인할 수 있는 지표 구글 공식문서 링크는 꼭 확인해보는게 좋습니다 각 항목들의 설명과 성능개선을 하려면 어떠한 방법을 해야되는지 개선방안의 예시도 설명해줍니다 https://developer.c.. 웹 표준과 접근성 웹 표준은 W3C https://www.w3.org/ 에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙입니다 W3C는 운영체제나 브라우저의 종류에 상관없이 웹페이지가 정상적으로 작동할 수 있도록 웹 표준과 가이드라인 개발을 하고 있습니다 웹 표준의 장점 유지 보수의 용이성 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았습니다. 그러다보니 어느 한 부분을 수정하려면 전부 뜯어고쳐야 할 때도 있었습니다. 하지만 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼습니다. 웹 호환성 확보 웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에서는 정상적으로 사용이 불.. UI/UX 분석하기 Figma로 유튜브 클론하기에 이어서 https://www.figma.com/file/eImS76rU97fhNtky2sOG5A/S3U2-%EA%B3%BC%EC%A0%9C-Figma-%ED%81%B4%EB%A1%A0 유튜브의 UI/UX를 분석을 했습니다 기준 UI 분석 사용중인 UI 디자인 패턴 컬럼 그리드 시스템 사용 여부 UX 분석 피터 모빌의 UX 7요소 충족 여부 User flow 그려보기 사용성 평가 제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부 먼저 유튜브 UI를 분석했을떄 사용중인 UI 디자인 패턴 모달 (Modal) 탭 (Tab) 태그 (Tag) 자동완성 (Autocomplete) 드롭다운 (Dropdown) 아코디언 (Accordion) 캐러셀 (Carousel) 페이지네이션 (Pag.. UI와 UX UI UI(User Interface, 사용자 인터페이스)는 사용자가 사물 또는 시스템,기계 , 컴퓨터 프로그램등등 과 상호작용 하기 위한 것 이라고 할 수 있습니다 대표적인 예로 핸드폰의 터치를 통한 상호작용과 컴퓨터의 마우스를 통한 상호작용이 있습니다 UX UX(User Experience, 사용자 경험)은 제품, 애플리케이션, 시스템 또는 서비스를 사용할 때 사용자가 경험하는 느낌을 말합니다. 사용자가 제품을 얼마나 잘 탐색할 수 있는지, 사용하기 쉬운지, 표시된 콘텐츠가 얼마나 관련성이 있는지 등 모든 것을 포괄할 수 있는 광범위한 용어입니다. UI와 UX의 차이점 UI와 UX는 혼용되어 사용되는 경우가 많지만 실제로 두문자어를 쓰면 User Interface와 User Experience가 상당.. Same-Origin Policy와 CORS 동일 출처 정책(Same Origin Policy)는 같은 출처의 리소스만 공유가 가능하다’라는 정책이고 이것을 해결하기 위해 나온것이 CORS입니다 CORS의 동작 방식에는 크게 세 가지가 있습니다. 1. 프리플라이트 요청 (Preflight Request) 실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것을 프리플라이트 요청 2. 단순 요청 (Simple Request) 단순 요청은 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것을 말합니다. 3.인증정보를 포함한 요청 (Credentialed Request) 요청 헤더에 인증 정보를 담아 보내는 요청입니다. 출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키.. HTTP 메세지 구조란? HTTP Messages는 클라이언트와 서버 사이에서 데이터를 주고받는 방식입니다 HTTP Messages에는 요청과 응답이 있습니다 둘다 유사한 구조를 가지는데 먼저 첫번째 줄에는 start line이 있고 이곳에는 요청과 응답의 상태를 나타냅니다 요청할때는 GET, POST, PUT, DELETE 등으로 서버가 수행해야 할 동작이 추가됩니다 그 다음에는 HTTP headers가 있습니다 이곳은 메세지의 본문을 설명하는 헤더의 집합이 담겨져 있습니다 //인코딩 방식이라던가 언어라던가 그 다음에는 empty line이 있고 이곳은 헤더와 본문을 구분하는 빈 줄 입니다 마지막에는 body가 있습니다 body는 요청이나 응답과 관련된 데이터나 문서가 담겨져 있습니다 요청과 응답의 유형에 따라 선택적으로 사용.. GET 메서드와 POST 차이점 GET 메서드와 POST의 차이점은 get은 요청할때 필요한 데이터를 쿼리스트링을 통해 전송하고 post는 body에 데이터를 담아서 전송합니다 get요청의 특징으로는 캐시가 가능합니다 get 요청의 캐시는 동일 또는 중복요청이 발생할때 서버로 요청을 보내지 않고 캐시된 데이터를 사용합니다 또한 get요청은 브라우저 히스토리에 남습니다 그리고 get요청은 길이제한이 있습니다 이러한 이유로 중요한 정보는 get으로 다루면 안됩니다 post는 리소스를 생성하거나 변경하기 위해 설계되었기 때문에 get보다 더 큰 데이터를 전송하기 위해 body에 데이터를 담아 전송 할 수 있습니다 http에서는 body의 길이제한 없이 데이터를 전송 할 수 있습니다 그러기 때문에 post는 대용량 데이터를 전송하는데 적합합니.. CSR과 SSR의 차이점 CSR(Client Side Rendering)은 서버에서 필요한 부분만 받아 클라이언트에서 렌더링을 하는것 이고 SSR(Server Side Rendering)은 서버쪽에서 렌더링준비를 끝마친 후 클라이언트에 보내는 것 입니다 두가지의 가장 큰 차이점은 서버에서 렌더링하느냐 클라이언트에서 렌더링 하느냐의 차이입니다 CSR는 SEO가 우선순위가 아닌경우와 사이트에 상호작용이 많은 경우 빠른 라우팅을 통해 이점을 가집니다 SSR는 SEO가 중요한 경우 웹페이지의 첫 화면을 빠르게 렌더링 하고싶은 경우 단일 파일 용량이 작은 경우와 사이트에 상호작용이 적은 경우 유리합니다 이전 1 2 다음
