전체 글

프론트엔드 면접(HTTP 통신)

1. HTTP 통신에 대해서 설명해주세요.HTTP는 HyperText transfer protocol로 웹에서 정보를 주고받을 수 있는 프로토콜입니다. 그래서 클라이언트와 서버간에 통신을 가능하게 합니다. 클라이언트가 서버로 웹페이지나 데이터를 요청하면 서버는 클라이언트에게 요청받은 웹페이지나 데이터를 전송하게 됩니다.2. HTTP의 stateless에 대해서 설명해주세요.HTTP 통신은 stateless의 특징을 가지고 있습니다. stateless는 이전 요청의 결과, 즉 상태를 저장하고 있지 않음을 의미합니다. 따라서 모든 요청은 독립적인 특징을 가지고 있습니다.3. HTTP 프로토콜의 request와 response 구조에 대해 설명해보세요.HTTP request를 보낼때는 구조에 맞게 보내야 하는..

온라인 디그리 졸업전시회 프로젝트 회고(24.08-24.11)

매년 10월에 한동대 디자인학부의 큰 행사인 디그리 행사가 진행한다. 콘디 학생들의 1년동안의 노력이 담긴 작품들을 전시하고 많은 관계자들이 참여하는 큰 행사이다. 콘디 학생이 아니기 때문에 도록을 만드는 이유는 모르겠지만, 우리학교는 종이도록을 통해 전시회 이후에도 작품 감상이 가능했다. 하지만 이러한 아날로그 방식은 도록을 가지고 있는 사람에게만 작품이 노출된다는 점에서 불편함이 있다. 따라서 디자인학부측은 종이도록을 없애고 온라인 졸업전시회를 기획하게 되었다. 파드에서 운영진으로 활동하던 나는 외주 요청으로 들어온 온라인 졸업전시회를 1인 개발자로 맡게 되었다. 개발팀을 꾸려 협업할 수도 있었지만, 졸업 이후 원격으로 소통해야했기 때문에 소통리소스가 개발보다 많이 들 것 같았고, 0to1 서비스 개..

프론트엔드 면접(props, state)

1. 리액트의 props와 state에 대해 설명해주세요.props는 부모컴포넌트에서 자식 컴포넌트로 전달하는 데이터로 전달된 데이터는 자식컴포넌트에서 수정이 불가능합니다. 이를 통해 컴포넌트 간에 데이터 흐름의 예측이 가능하고 데이터를 바꿀 수 없기때문에 컴포넌트를 재사용할 수 있습니다. state는 컴포넌트 내에서 관리되는 데이터로 setState로 값을 변경할 수 있으며 값이 바뀔때마다 리랜더링이 이루어 집니다. 따라서 state가 변경되면 리랜더링을 통해 UI가 업데이트 됩니다.

[트러블슈팅] Layout Shift 해결하기

온라인 전시회를 무탈하게 운영하고 (운영하는 동안 큰 이슈가 없었고 사용자 피드백을 받으며 계속 개선해나아갔다!) 링크드인에도 글을 올리며 운영 경험을 포함해 웹사이트를 홍보했습니다. 프로그래머스 데브코스를 하면서 만난 훌륭한 멘토님이 계시는데, 여쭤볼 것이 있어서 이것저것 여쭤보다가 멘토님도 링크드인 게시글을 확인했다며 개선 사항들을 추천해주셨습니다. 그 중 하나가 Layout Shift!!Layout Shift로 인한 문제점링크드인으로부터 처음으로 웹사이트를 접속하는 사용자(특히 데스크탑 사용자)들은 웹성능이 캐시된 데이터를 사용자는 사용자보다 좋지 않았습니다. 따라서 데스크탑 첫 화면에 로딩되는 비디오가 느리게 로딩되었고, 이로 인해 로고 이미지가 위로 올라오는 Layout Shift 문제가 발생하..

Frontend 이미지 최적화하기

이미지 최적화를 하게된 계기한동대학교 온라인 졸업전시 프로젝트(One In Christ)에 1인 개발자로 참여했습니다. 참여하겠다고 생각한 순간부터 가장 먼저 떠오른 생각은 이미지 최적화였습니다. 왜냐하면 디자인학부 졸업 전시회의 특성상 이미지를 가장 많이 사용하고, 디자인 작품이다보니 이미지 용량이 20MB 이상 차지하는 것이 대부분이라 웹 성능에 영향을 미칠 것이라고 생각했기 때문입니다. 특히 작품들이 나열되어 있는 works 페이지의 경우 여러 작품들이 한 번에 로딩되어야 하기 때문에 웹서버로부터 이미지를 요청하고 응답받는 데 시간이 오래걸릴 것이라 예상했습니다. 이는 웹사이트의 성능을 낮추기 때문에 좋지 않은 사용자 경험을 야기할 것이라고 판단했습니다.이미지 최적화 방법1️⃣ 이미지 포맷 변경(..

프론트엔드 면접(이벤트 루프)

1. 이벤트루프에 대해 설명해주세요.이벤트 루프는 자바스크립트 엔진이 비동기 작업을 처리하는 방식입니다. 자바스크립트는 싱글스레드 기반으로 동작하기 때문에 모든 작업들은 하나씩 처리되고, 콜스택에 작업이 쌓이게 됩니다. API를 통해 데이터를 받거나 오래걸리는 작업 등의 처리를 위해 비동기 처리가 필수적으러 이루어져야 하는데요, 이때 Web API를 통해 비동기 작업이 이루어질 수 있습니다. 콜스택에 비동기 작업이 실행되면 비동기함수는 Web API를 호출하고 Web API는 Task queue라고도 하는 Callback Queue에 콜백 함수를 넣습니다. 이벤트 루프는 콜스택과 콜백큐를 계속 확인하여 콜스택에 있는 작업을 우선적으로 처리하고 콜스택이 비면 콜백큐에 있는 작업을 콜스택에 넣어 처리하는 방..

프론트엔드 면접(이미지 최적화)

1. 이미지 최적화 경험이 있던데 어떤 방식으로 진행되었는지 설명해주세요.온라인 졸업전시 사이트를 운영하며 이미지 최적화를 진행했습니다. 20MB이상의 용량이 큰 이미지를 주로 사용하고 있던 졸업작품 사이트의 특성을 고려하여 사용자가 긴 로딩없이 빠르게 작품을 감상할 수 있도록 이미지 최적화를 진행했습니다. 먼저 파일 포맷을 변경하는 작업을 진행했습니다. webp 포맷을 사용하여 용량을 개선했는데요, webp 포맷은 구글에서 발표한 포맷으로 압축 효과가 좋아 많은 용량을 줄일 수 있기 때문에 png 포맷에서 webp로 변경하게 되었습니다. 그 결과 png 포맷일때보다 31%의 용량 개선이 있었습니다.  두번째로 이미지 사이즈가 실제 웹사이트에서 사용하는 것보다 1.5배정도 큰 사이즈로 사용되고 있어서 웹..

프론트엔드 면접(실행컨텍스트, 스코프 체인)

1. 실행컨텍스트에 대해 설명해주세요.실행컨텍스트는 자바스크립트에서 코드가 실행되는 환경을 의미합니다. 함수와 같이 자바스크립트 엔진이 코드를 실행할 때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 실행컨텍스트가 존재합니다.실행컨텍스트는 자바스크립트가 처음 실행될 때 전역으로 먼저 생성되고, 함수가 호출될 때 역시 생성됩니다. 이러한 실행 컨텍스트는 생성될 때 콜스택에 쌓이게되며 함수가 종료되거나 프로그램이 종료될 때 사라지게 됩니다.2. 실행컨텍스트는 어떤 구성 요소로 이루어져 있나요?실행컨텍스트는 변수 객체와 스코프체인, this 로 구성되어 있습니다.먼저 변수 객체는 실행 컨텍스트 내에서 사용되는 변수와 함수의 선언을 저장하는 공간입니다.스코프 체인은 현재 실행 중인 컨텍스트와 외부 렉시..

프론트엔드 면접(reflow, repaint)

1. reflow와 repaint의 차이점에 대해 설명해주세요.reflow와 repaint는 모두 렌더링과 관련이 있습니다. 화면이 리랜더링 됐을 때, 각 상황에 따라 reflow와 repaint가 일어나게 됩니다. reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 의미하고 repaint는 계산 결과를 바탕으로 화면에 다시 그리는 과정입니다. reflow는 DOM의 구조가 변경되거나 요소의 크기나 위치가 변경될 때 일어납니다. repaint는 레이아웃은 그대로이고 색상이나 배경 등의 스타일만 변경되었을 때 일어납니다. 레이아웃을 다시 계산하는 reflow가 일어나면 repaint가 필연적으로 일어나기도 하고, reflow는 비용이 더 들기 때문에 레이아웃 계산이 다시 일어나지 않도록 관리..