전체 글

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

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는 비용이 더 들기 때문에 레이아웃 계산이 다시 일어나지 않도록 관리..

프론트엔드 면접(클로저, 클로저의 단점)

1. 클로저에 대해 설명해주세요.클로저는 선언됐을때 그때의 렉시컬 스코프를 기억하는 함수입니다. 자바스크립트에서 모든 함수들을 Environment라는 프로퍼티를 가지는데 여기에 외부 함수의 변수의 참조값이 저장되어 외부 함수의 변수에 접근이 가능합니다.https://enjoydev.life/blog/javascript/6-closure JavaScript의 클로저(Closure)란? (feat. React의 useState)JavaScript의 클로저의 원리를 쉽게 배워보고 어떤 상황에 사용되는지 알아보도록 하겠습니다.enjoydev.life2. 클로저의 단점과 해결방법에 대해 설명해주세요.클로저는 외부환경의 변수를 계속 기억하고 있기 때문에 가비지컬랙터의 대상이 되지 않아 메모리 누수가 일어날 수 있..

프론트엔드 면접(Sync, Async, 자바스크립트의 동작 원리, Call Stack, TaskQueue, Event Loop)

1. Sync, Async의 차이점(동기, 비동기의 차이점)에 대해서 설명해주세요.Sync는 작업 요청이 이뤄지고, 요청 응답을 기다리는 것을 의미합니다. Async는 특정한 요청의 응답을 기다리지 않고 다음 작업을 수행하는 것을 의미합니다. 자바스크립트는 기본적으로 싱글스레드이기 때문에 요청된 작업을 하나씩 수행하지만 setTimeout이나 fetch과 같은 Web API를 사용하여 비동기로 처리할 수 있게 됩니다. 2. 자바스크립트의 동작 원리에 대해 설명해주세요.자바스크립트는 자바스크립트 엔진 위에서 동작하는데요, 대표적으로 구글의 V8엔진이 있습니다. 자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있습니다. 메모리 힙은 변수, 함수 등 메모리 할당이 이루어지는 공간입니다. 콜스택에는 자바스크립..

제54회 SQLD 합격 후기(전공자, 다른 일 하면서 7일 공부)

SQLD 시험본 지 벌써 3달이나 지났네요.. 그땐 엄청 더웠는데 지금은 온도가 0도까지 내렸갔습니다. 다들 감기 조심하셔요!! 더 추워지기전에 후기를 남겨놓지 않으면 평생 못남길 것 같아 늦었지만 남겨봅니다!!저와 비슷한 스팩으로 시작하신 분들은 이 글이 도움이 되실 것 같습니다!!1. 컴퓨터공학 전공 2. Database 수업을 잘 따라갔던 수준 3. 기본 명령어(DML, DDL, TCL 등) 사용 경험이 있음📝 SQLD 시험 정보, 합격 기준SQLD는 두과목으로 나눠지고 총 60점 이상 받아야 합격입니다. 하지만 과목별로 40% 미만 취득하면 과락으로 떨어집니다. 데이터 모델링의 이해 과목은 문항수가 적지만 공부안하면 과락될 수 있으니 꼭 공부하고 가시길 바랍니다 :)✏️ 7일 공부어제 뭐 먹었는지..

AWS cloudfront 배포 화면이 S3 결과와 다른 이유(feat. 무효화)

S3의 업데이트된 정적 리소스는 최신 상태인데, cloudfront의 배포 결과는 이전 배포 결과인 문제를 겪어보신 적 있으신가요? 저는 최근에 해당 원인을 몰라 새벽 내내 해맸던 경험이 있어 제가 겪었던 어려움을 똑같이 겪고 계신 분들을 위해 해결하는 방법을 기록하려고 합니다! 문제S3와 cloudfront를 성공적으로 연동하고 도메인을 이용하고 있다가, 프로젝트의 업데이트가 필요해서 새로 배포를 진행했습니다. 그런데 S3 정적 리소스는 업데이트된 버전이 잘 나오지만, 실제 도메인이 보여주는 리소스는 업데이트하기 전의 리소스였는데요, 이는 cloudfront로 배포된 S3 정적 리소스들이 AWS 엣지 로케이션에 전송되어 아직 새로 업데이트가 되지 않았기 때문입니다. 이 엣지 로케이션의 캐시는 24시간으..

VSCode Vitest "이 작업 영역에서 아직 발견된 테스트가 없습니다." 오류 해결

vitest 라이브러리 설치와 extension 설치, 테스트 코드 작성까지 모두 다 한 이후, vitest extention을 이용하여 테스트를 실행하려고 할때 아래 이미지와 같이 테스트 항목이 뜨지 않는 오류가 있었다.해당 이슈를 겪고 있는 사람들이 꽤나 많이 있다.https://github.com/vitest-dev/vscode/issues/196 Vitest extension completely non functional on mac · Issue #196 · vitest-dev/vscodeDescribe the bug Vitest completely fails to work on any of my vitest repos To Reproduce Steps to reproduce the behavi..

[Docker] docker: Error response from daemon: Ports are not available | address already in use 포트충돌 해결

컨테이너를 실행하려는 도중 3000번 포트가 로컬에서 이미 사용중이어서 포트충돌(이미 사용중) 오류가 났다. 열려있는 port 닫고 새로 실행하는 방법1) 열린 포트 확인하기sudo lsof -PiTCP -sTCP:LISTEN2) 특정 포트 확인하기sudo lsof -i :[port]sudo lsof -i :3000 // example3) 포트 닫기특정 포트를 확인한 결과에서 PID를 이용하여 특정 포트를 닫아줄 수 있다.sudo kill -9 [PID] 이후 컨테이너를 실행하면 특정 포트에 대한 연결이 잘 이루어질 것이다. 더보기참고https://jongsky.tistory.com/41 (Mac) port 확인 방법 및 5000 port 삭제 방법1. 글을 작성하게 된 계기 docker-compose를..