HTML

doctype을 선언하는 이유에 대해서 아시나요?

• doctype이란 웹문서가 어떤 버전의 html 언어로 작성되었는지 결정하는 기능
• 브라우저는 선언된 문서 버전에 맞는 html 기술로 페이지를 로드하는데, 선언된 html 문서 버전에 따라 브라우저가 버전에 맞는 문법들을 적용하여 문서를 로드할 수 있게 하기 위함이다.
• 아직 구버전을 폐지하지 않는 이유는 과거 버전의 글도 현재 브라우저에서 호환을 얻어서 자료를 보존하기 위해서
• XHTML: HTML과 비슷하지만 좀 더 엄격한 규칙을 적용하는 언어로 알고있다.
• XML: 데이터를 저장하고 전달하는 용도로 사용되는 마크업 언어

점진적 렌더링(Progressive Rendering) 에 대해서 설명해주세요.

• 점진적 서버측 렌더링이라고 할 수 있는데, 중요도가 높은 컨텐츠를 먼저 렌더링하고 중요도가 낮은 컨텐츠는 렌더링을 기다리지 않고 클라이언트로 스트리밍하는 기술
• 사용자 경험에 더 좋다고 볼 수 있다.

SEO에 대하여 설명해 주세요.

• 검색 엔진 최적화
• 검색 엔진이 이해하기 쉽도록 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업
• 검색봇이 잘 인식하게 만들기 위한 방법이라고 볼 수 있음

적용 사례가 있으면 구체적인 적용 방법도 같이 설명해주세요

직접 적용해본 적은 없지만 SEO에 대해 조사해 보면서 알게된 검색 엔진 최적화를 하는 방법들에 대해 얘기해보겠음.
1. 문법에 맞는 HTML 작성
2. 구체적인 페이지 제목 만들기
3. 메타 태그 활용하기
4. 이미지에 alt 속성 기재
5. 이미지 맵에 중요한 링크 사용 피하기
6. 플래시 전용 페이지 피하기
7. anchor 태그를 활용한 적절한 키워드 배치
8. 여러 개의 페이지로 나누어진 콘텐츠 검색 최적화
9. 모든 페이지가 유입 페이지가 되도록 사이트 구성
10. https 사용 권장
참고

CSR

• html, js까지 로드해야 하므로 SEO에 불리

SSR

• html이 로드되므로 SEO에 유리

CSS

css에서 %와 vw,vh 쓸때 어떻게 다른지에 대해서 설명해주세요.

• vw, vh는 화면 크기의 높이와 너비에 비례
• 1vh, 1wh는 실제 높이, 너비의 1/100을 나타냄
• 예) width: 1000px => 1vw === 10px
• 예) height: 1000px => 1vh === 10px
• %는 상위 요소 크기에 비례

<style>
.parent {
  border: 1px solid black;
}
.children1 {
  width: 40%;
  background: blue;
}
.children2 {
  width: 200px;
  background: orange;
}
</style>

<div class="parent">
    <div class="children1">40%</div>
    <div class="children2">200px</div>
</div>

z-index에 관해 설명해주세요.

• 렌더링 될 때 창의 쌓임 순서를 결정하는 정수
• z-index가 클수록 사용자에게 가깝다.
• position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.
  • 조상 element의 position까지 영향을 받는다?
• z-index를 지정하지 않으면 기본 렌더링 레이어 0임.

Contents를 화면에서 숨기는(그리고 screen reader에서만 사용할 수 있게 만드는)다양한 방법은 무엇인가요?

• 화면에선 보이지 않게 하고 스크린 리더에선 읽게 하는 이윺
  • 원하는 문구를 넣지만 화면엔 보이지 않게 하고, 검색 엔진에서는 클래스명이 적용된 텍스트를 그대로 읽어옴 => 검색 엔진에 노출되므로 웹 접근성 향상
• 방법
  • fontawesome에서 제공하고 있는 "sr-only"
  • transform: scale(0);
  • 두 가지 방법에 차이는 첫 번째 방법은 빈 공간이 사라짐, 두 번째 방법은 빈 공간은 그대로 남아있음.

CSS framework를 사용해본 적이 있으신가요? 실무에서 사용해보았다면 어떤 이점이 있었나요?

• style-component를 사용 중
• 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다

const LoginButton = styled.button`
	background: blue;
	color: white;
`

• props를 넘길 수 있다.

const Category = styled.div`
	color: ${props => (props.primary ? "red" : "green")};
`
<Category primary>Test</Category>

• 상속 기능 사용 가능

JavaScript

자바스크립트에서 비동기 처리

AJAX에 대해서 설명해주세요

• Asynchronous JavaScript And Xml, 비동기적 자바스크립트와 XML을 얘기함
• fetch, XMLHttpRequest를 이용해 서버에서 자원을 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 나타내는 용어
• XHR도 서버의 자원을 가져올 수 있지만 fetch는 코드의 가독성이 좋고 편리하기 때문에 씀
• DOM을 이용해서 페이지의 일부만 로드하는 기술

Promise, Async, Await란 무엇이며 코드가 어떤식으로 구성되나요?

• promise는 js 비동기 처리에 사용되는 객체

let promise = new Promise((resolve, reject) => 
	setTimeout(() => resolve('ok!'), 1000)       
)

promise
  .then(result => console.log(result))
  .catch(error => console.log(error));        

• promise는 약속, 현재 요청한 일이 끝나면 결과를 알려준다는 약속

• promise가 갖고 있는 상태

  • pending: 결과가 나오기 전 상태
  • fulfilled: resolve가 호출된 상태, 즉 약속이 지켜진 상태
  • rejected: reject가 호출된 상태, 즉 약속을 지키지 못한 상태
  • settled: 일단 결론이 난 상태

• 위 코드로 보자면 new Promise안에 resolve, reject가 호출되기 전까지의 순간을 pending 상태

• 비동기 작업 이후 요청이 성공한다면 resolve를 호출, 실패한다면 reject를 호출하는 원리

• 리턴된 promise 객체는 요청결과에 따라 다르게 결과물을 받아 볼 수 있음

  • state가 fulfilled: then api를 이용
  • state가 rejected: catch api를 이용

• async, await은 비동기 처리 패턴 중 가장 최근에 나온 방법
  • 함수 앞에 예약어 async를 붙이고 함수안에 로직 중 비동기 처리 코드 앞에 await을 붙임

function asyncTestFunction() {
	return new Promise((resolve, reject) => 	{
    	let result = [1, 2, 3];
      	resolve(result);
    })
}

async function test() {
	let result = await asyncTestFunction();// 비동기 처리 코드 
   console.log(result); // [1, 2, 3]
}

• 위 코드에서 asyncTestFunction은 프로미스 객체를 반환하는 함수
• await을 사용했기 때문에 비동기 처리가 완료된 뒤에 콘솔에 result에 대한 값이 찍힌다.

비동기 처리의 특성 및 에러 처리 방법에 대해서 설명해주세요.

• 비동기 처리의 특성
  • JS엔진은 싱글 스레드이므로 동시에 하나의 작업만 수행 가능
  • 자바스크립트에서는 비동기를 처리하기 위해 Event Loop와 Queue를 이용함
    • 콜 스택에 작업이 들어감
    • 해당 작업이 비동기 작업이라면 브라우저에 존재하는 Web API로 보냄
    • 직접적인 처리를 Web API에서 수행함
    • 작업이 끝나면 Queue로 보냄
    • 콜 스택에 진행되는 작업이 없는 경우 Queue에서 콜 스택으로 작업이 이동함(이 떄 처리)
• 에러 처리 방법
  • promise의 경우 catch api를 이용해 에러를 처리함
  • async await의 경우 try~catch를 이용해 에러를 처리함

함수형 프로그래밍

(꼬리 질문) 자바스크립트 클로저에 대해서 설명해주세요.

• 클로저란 내부함수가 외부 함수의 지역변수에 접근할 수 있고, 외부 함수는 외부 함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다
• 외부 함수가 실행 컨텍스트가 소멸되도 외부 함수에 렉시컬 스코프는 내부 함수 컨텍스트에 링크를 걸어둠으로써 남아있는다.

function outer() {
  let title = 'every';
  return function () {
    console.log(title);
  };
}

let inner = outer();
console.log(inner());

• 또한 비공개 변수를 만들기 위해서 사용되기도 한다.

const outer = () => {
  let count = 0; // 외부에서 count에 접근할 수 없다
  const changeCount = (number) => (count += number);

  return {
    increase: () => changeCount(1),
    decrease: () => changeCount(-1),
    show: () => console.log(count),
  };
};

(꼬리 질문) 자바스크립트 프로토타입에 대해서 설명해주세요.

• 자바스크립트는 프로토타입 기반 언어로써 객체가 만들어지기 위해선 객체 자신의 프로토타입 객체를 참조하여 만들어지는데, 이 때 참조하는 객체 즉 객체 자신의 원형(틀)을 의미한다.
• 함수가 만들어지고 함수의 prototype속성은 프로토타입 객체를 참조하는데 이 때 참조하는 프로토타입 객체는 new 연산자와 Person 함수를 통해 생성된 모든 객체의 원형이 되는 객체

CORS란? CORS를 해결하기 위한 방법을 아는 대로 모두 설명해 주시고 보통 어떤 방식으로 해결하는지 자주 사용하는 방법 1가지와 함께 실제 해결하신 경험을 공유해 주세요.

• cors란 교차 출처 리소스 공유(Cross-Origin Resource Sharing)로 도메인, 프로토콜, 포트가 다른 서버의 자원을 요청하는 매커니즘을 말한다.

• 해결 방법

  • 백엔드에서 응답 헤더에 Access-Control-Allow-Origin을 추가
  • 미들웨어 cors 추가

• 해결 방식

  • cors 에러가 발생하면 에러 원인을 분석하고 도메인, 프로토콜, 포트중 다른게 무엇인지 확인하고, 해당 출처에 cors를 허용했는지 확인하면서 해결해나감

• 해결 경험

  • 프로젝트를 통해 cors를 처음 배우면서 프론트와 백을 다 구현하고 있었는데 서로 포트 번호가 달라서 고생했던적이 있음. 서버에서 응답을 보낼 시 access-control-allow-origin을 헤더에 추가하고 요청해온 출처를 허용하여 해결함

• CSRF, CSX 방지