전체 글50 폰트 최적화를 통한 페이지 성능 개선 기록 *전 회사에서 진행했던 성능 최적화 업무들을 복기하며 정리하는 글입니다.Lighthouse 성능 점수가... 10점대..? 2024년 5월, 당시 다니던 회사에서 자사몰 성능 최적화 업무를 맡아 Lighthouse로 성능을 측정해봤다.결과는... 모바일 기준 성능 점수 10점대라는 처참한 성적이었다. (으악😱) 스타트업이다 보니 그동안은 성능보다는 기능 구현과 성과가 우선이었고, 최적화에 신경 쓸 여유가 없었던 터라 이런 결과가 나온 것 같았다.그래서 지금이라도 최대한 성능을 개선해보기 위해 프론트엔드에서 할 수 있는 성능 최적화 방법들을 찾아 적용해보기로 했다. Lighthouse 성능 지표 이해하기Lighthouse 성능 점수를 올리려면 먼저 그 점수를 구성하는 지표를 이해해야 했다.Lighthou.. 2025. 8. 5. Next.js + TypeScript, STOMP + Sock.js로 실시간 채팅 구현하기 (2) 실시간 채팅을 구현하면서 맞닥뜨린 이슈채팅방에 들어가면 실시간 소통도 하지만 이전에 오갔던 채팅 메세지 조회도 하게 된다.이전 채팅 메세지 조회는 사용자가 위로 스크롤해서 스크롤이 채팅방 맨 위에 위치하게 되면, 메세지를 20개씩 로드해 보여주는 무한스크롤 형태로 개발했다.여기까지는 순조롭게 진행됐는데, 문제는 이전 채팅 메세지를 조회했을 때 스크롤의 위치였다. 스크롤 위치가 제맘대로..!스크롤을 위로 올려 과거 채팅 메세지를 불러오는 순간, 화면이 아래로 내려가버리거나 이상한 위치로 튀면서 UX가 매우 나빠졌다...처음엔 어떻게 스크롤 위치를 조정해야 할지 감도 안잡혔다.내가 채팅 메세지를 보냈을 때는 단순히 스크롤을 맨 아래로 보내기만 하면 됐지만,이건 이전 메세지도 불러오면서 현재 사용자가 있는 스.. 2025. 8. 3. Next.js + TypeScript, STOMP + Sock.js로 실시간 채팅 구현하기 (1) 암것도 모르는 상태에서 채팅 기능을 구현해보자부트캠프에서 팀 프로젝트를 진행하면서 실시간 채팅 기능을 구현을 맡게 되었다.채팅 기능은 커녕 웹소켓도 써본 경험이 없어 많이 걱정되었지만.. 그래도 기회가 있을 때 해보자라는 생각으로 무작정 부딪혀보았다. 프론트는 Next.js와 TypeScript, Tanstack Query(React Query)를 사용하고,백엔드는 spring을 사용하고 있는 프로젝트였다. 보통은 채팅 구현할 때 웹소켓을 많이 쓴다고 알고 있는데,백엔드 개발자분이 spring을 사용하신다고 STOMP와 Sock.js 기반으로 채팅을 구현하자고 했다. STOMP가 뭐지?STOMP는 웹소켓 기반으로 동작하는, 텍스트 기반의 메세징 프로토콜(Simple Text Oriented Messagi.. 2025. 8. 2. [Git] git rebase시 conflict가 발생했을 때 해결 방법 🚨 문제 상황develop 브랜치 브랜치설명develop 브랜치base 브랜치들이 rebase merge되는 브랜치.base 브랜치작업 브랜치의 내용(커밋)들이 squash merge되는 브랜치.작업 브랜치실제 작업이 일어나는 개인 브랜치. 작업이 완료되면 PR을 올려 base 브랜치에 squash merge함.작업 브랜치에서 작업 완료하고 PR 승인 받은 뒤 base 브랜치에 squash mergedevelop 브랜치에 다른 팀원이 작업한 내용(커밋)이 올라가 있어 rebase 필요(base 브랜치가 원격 develop 브랜치와 동기화 되어 있지 않은 상태였음)develop 브랜치에 base 브랜치를 rebase merge 하려고 하는데 conflict 발생(develop 브랜치의 file.ts 파일.. 2025. 7. 31. [JS] Babel과 Webpack 📌 ES6 모듈보다 별도의 모듈 로더를 사용하는 이유IE를 포함한 구형 브라우저는 ESM(ES6 모듈)을 지원하지 않음ESM을 사용하더라도 트랜스파일링이나 번들링이 필요함ESM이 아직 지원하지 않는 기능(bar import)이 있으며, 몇 가지 이슈가 존재함 📌 BabelBabel: ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환해 주는 트랜스파일러 📌 WebpackWebpack: 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없음여러 개의 자바스크립트 파일을 하나로 번들.. 2024. 10. 17. [JS] 모듈 📌 모듈의 일반적 의미모듈(module): 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재함 모듈은 export 키워드를 통해 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개할 수 있음모듈 사용자: 공개된 모듈의 자산을 사용하는 모듈모듈 사용자는 import 키워드를 통해 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있음모듈은 기능별로 분리되어 개별적인 파일로 작성되기 때문에 코드의 단위를 명확히 분리하여 애플리케이션.. 2024. 10. 16. [JS] 에러 처리 📌 에러 처리의 필요성에러나 예외적인 상황에 대응하지 않으면 프로그램은 강제 종료될 수 있음작성한 코드에서 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 필요함 📌 try ... catch ... finally 문try ... catch ... finally 문으로 에러 핸들링을 할 수 있음try ... catch ... finally 문을 실행하면 먼저 try 코드 블록이 실행되고, try 코드 블록에 포함된 문 중에서 에러 발생 시 발생한 에러는 catch 문의 err 변수에 전달되고 catch 코드 블록이 실행됨finally 코드 블록은 에러 발생과 상관없이 반드시 한 번 실행됨try { // 실행할 코드} catch (err) { /.. 2024. 10. 13. [JS] 제너레이터와 async / await 📌 제너레이터란?제너레이터(generator): 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수제너레이터와 일반 함수의 차이:제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있음제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있음제너레이터 함수를 호출하면 제너레이터 객체를 반환함 📌 제너레이터 함수의 정의제너레이터 함수는 function* 키워드로 선언하며, 하나 이상의 yield 표현식을 포함함애스터리스크(*)의 위치는 fuction 키워드와 함수 이름 사이라면 어디든 상관 없지만 일반적으로 function 키워드 바로 뒤에 붙여서 사용함제너레이터 함수는 화살표 함수로 정의할 수 없음제너레이터 함수는 new 연산자와 함께 생성자 함수로 호출.. 2024. 10. 13. [JS] 프로미스 📌 프로미스 (Promise)프로미스(Promise): 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타내는 객체프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있음 📌 비동기 처리를 위한 콜백 패턴의 단점콜백 헬비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료되어 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당할 시 기대한 대로 동작되지 않음-> 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없음비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 하기 때문에 비.. 2024. 9. 30. 이전 1 2 3 4 ··· 6 다음
