📃 프론트엔드 인터뷰 문제 답해보기 #1 성능 개선

Jake Seo·2020년 6월 1일

인터뷰-문제-답해보기

목록 보기

1/10

📃 프론트엔드 인터뷰 문제 답해보기 #1 성능 개선

Prologue

깃허브를 돌아다니다가 예전에 프론트엔드 개발자 인터뷰 질문이라는 레포지토리를 본적이 있다. 사실 그 당시에는 그냥 스타만 눌러놓고 큰 관심이 없었지만 지금부터 하나씩 풀어보려 한다.

물론 많은 답들이 이미 이 레포지토리에 작성되어 있긴 한데, 작성되지 않은 것들도 있고 내 답이랑 모범답안을 비교하는 것도 좋을 것 같아서 한번 풀어보려 한다.

문제 선정

기존 레포지토리에는 문제의 분류가 아래와 같이 되어있다.

General Questions
HTML Questions
CSS Questions
JS Questions
Accessibility Questions (external link)
Testing Questions
Performance Questions
Network Questions
Coding Questions
Fun Questions

매일 1가지씩 돌아가며 풀 건데, General Questions 항목에서 너무 일반적인 문제는 풀지 않을 것이다. 너무 일반적인 문제의 정의는 사람마다 답이 다를 수 있는 문제이다.

이를테면...

~~What did you learn yesterday/this week? (어제/이번주에 무엇을 배웠나요)~~
~~What excites or interests you about coding? (무엇이 당신을 코딩하고 싶게 만드나요?)~~
~~What is a recent technical challenge you experienced and how did you solve it?(최근에 겪은 기술적인 어려움과 그것을 어떻게 해결했는지 알려주세요)~~

이러한 것들은 답변하지 않는다. 이런 문제는 그때그때 답이 달라질 수 있다.

참고

나의 답변은 높은 확률로 틀릴 수도 있으며, 아니면 맞게 가다가 중간에 이상한 길로 빠질 수도 있다. 댓글에 자신만의 답을 올려주면 매우 고마울 것 같다.

Q: 새로운 웹사이트를 빌드하거나 유지보수할 때, 퍼포먼스를 향상시키기 위해 사용된 기술에 대해 설명할 수 있는가?

원문 : When building a new web site or maintaining one, can you explain some techniques you have used to increase performance?

'퍼포먼스' 의 의미를 '성능' 과 '최적화' 의 관점에서 볼 때,

HTML, CSS, JS (Client side)

1. CDN의 사용

CDN은 Contents Delivery Network로 사용자와 가까운 곳에 위치한 Cache Server에 Content를 저장(캐싱)해두었다가 요청 시에 Cache Server가 응답을 주는 방식을 말한다. 이 방식을 사용하면 물리적인 거리의 제약없이 나와 가장 가까운 Cache Server에서 리소스를 받을 수 있기 때문에 빠른 리소스 다운로드가 가능하다.

2. 리소스의 최소화(Minified)

리소스의 최소화는 로드되는 이미지들의 사이즈, 화질에 대한 조정과 자바스크립트 파일 등 소스코드의 최소화가 있을 수 있겠다.

3. Javascript의 지연(Defer)로딩과 비동기(Asyncronous) 로딩

자바스크립트 라이브러리를 로드할 때, 만약 의존성이 요구되는 라이브러리들을 함께 로드한다면 나중에 로드되어야 할 것들은 'defer' 키워드를 이용하여 지연로딩을 하면 될테고, 그렇지 않은 라이브러리는 'async' 키워드를 통해 비동기적 로딩을 구현할 수 있다.

비동기적 로드는 성능상 이점을 준다.

4. Lazy Loading

Lazy Loading을 이용하여 한번에 모든 컨텐츠를 로드하지 않고, 사용자의 화면에 즉각적으로 보이는 리소스들을 로딩하고, 나머지는 필요한 때에 로드할 수 있다.

Database, Infrastructure, Network (Server side)

1. Database

거의 대부분의 동적 웹사이트의 경우 데이터베이스를 쓰게 된다. 여기서 관계형 DB/비관계형 DB를 선택해야 한다.

최대한 간략하게 말하자면 성능을 위해서는 웬만하면 관계형 DB를 선택하는 것이 옳다고 본다. 여기서 관계형 DB를 선택한 경우, DB설계가 매우 중요할 수 있다고 생각한다.

하지만 사용될 데이터에 변경사항이 자주 등장하며 저장될 데이터가 그렇게 복잡하지 않다면 비관계형 DB를 선택하는 것도 좋다고 생각한다. (Schemaless의 이점 이용) 빅데이터를 처리하는 경우에도 비관계형 DB가 좋을 수 있다. 다중 서버를 구성해놓고 클러스터링이 가능하기 때문이다.