겨리의 개발일기

오늘은 커피챗 때 피드백 받았던 CLS 개선에 대한 내용을 정리하고자 한다. CLS가 뭔지 알아보기 전 비교부터 해보자! 첫 번째 이미지를 보면 새로고침 클릭 시 이미지 로딩 전후로 레이아웃이 변경되는 것을 확인할 수 있다. 반면 두번째 이미지는 새로고침을 클릭해도 레이아웃의 변경이 일어나지 않는다. CLS(Cumulative Layout Shift)란? 레이아웃 변경 횟수로, 화면에서 이동하는 컨텐츠의 양과 정도를 계산한 값이다. 이 지표는 사용자 중심의 성능 지표로서 컨텐츠가 화면에서 이리저리 움직이는 것이 불편을 초래할 수 있기 때문에 제공한다. ✔️ TIP 우수한 사용자 환경을 제공하기 위해선 사이트에서 페이지 방문의 75% 이상에서 CLS가 0.1 이하여야 한다. 솔직히 CLS에 대한 설명을 처..

Programming/기타 2024. 1. 29. 18:25

작년 하반기에 개인프로젝트로 진행했던 테스트 사이트의 개선 과정을 기록하고자 한다. 사실 처음에는 리액트를 공부할 겸 만들어본 간단한 프로젝트라 지인들에게만 살짝 보여주고 덮어뒀었다. 하지만 최근 진행한 커피챗에서 이왕 배포까지 한 거 사용자한테 피드백을 받아서 개선해 보라는 조언을 들었고 곰곰이 생각해 보니 어차피 내가 만든 건데 부끄러워할 필요가 뭐가 있으며, 부족한 만큼 피드백을 받아 개선해 나가면 오히려 좋은 거 아닌가?라는 생각이 들었다. 또 평소 서비스 운영 경험에 대한 열망(?)이 있는데 내가 만든 프로젝트를 배포해서 사람들이 사용하고, 그들로부터 피드백을 받아 개선해 나가는 것도 어떻게 보면 비슷한 경험이 아닐까 하는 생각이 들었다. (실제로 비즈니스적인 가치를 창출하는 서비스들과 비교할 ..

Programming/기타 2024. 1. 25. 00:37

프로젝트를 리팩토링 하던 중 메타태그를 수정할 일이 있었다. 잘 수정되었는지 확인 하기위해 매번 배포를 진행하는 건 리스크가 있다고 생각하여 로컬에서 테스트 할 수 있는 방법을 찾아보았다. 찾아보니 ngrok이라는 서비스를 사용하면 로컬 환경에서도 테스트할 수 있다고 한다! 이번 기회에 ngrok이 뭔지 어떻게 사용하면 되는지 정리해보고자 한다. 😎 ngrok이란? Webhook을 이용하여 로컬에 떠있는 서버를 방화벽을 넘어 ngrok.com 쪽에 바인딩해주는 서비스 일반적으로 로컬 환경에서 작업을 할 때 웹서버를 로컬호스트에서 실행 후 개발을 진행하는데, 이렇게되면 외부에서 접근이 불가능하다. 이 때 ngrok을 사용하면 로컬개발환경에서 실행중인 웹서버를 외부에 공개적으로 접근이 가능한 URL로 노출시..

Programming/기타 2024. 1. 24. 16:33

개인프로젝트를 리팩토링 하던 중 링크 공유시 미리보기에 정보가 너무 없다는 생각이 들어 Open Graph를 적용해봤다. 적용하는 과정을 정리해보고자 한다. 😎 처음엔 이렇게 아무것도 없어서 이게 무슨 링크인지 확인이 불가능했다. (뭔가 수상함...🤔) 특히 나는 개발자 오픈카톡에 내 프로젝트 링크를 자주 공유하는 편이라 어떤 사이트인지 정보가 잘 나타나있어야 사람들이 조금이나마 더 관심을 가질 것이라고 생각했다. Open Graph를 적용하기 전에 무엇인지부터 알아보자! Open Graph(OG) Open Graph 사이트에 나온 설명은 아래와 같다 오픈그래프 프로토콜은 페이스북에서 처음 만들어졌으며, Dublin Core, link-rel canonical, Microformats, 그리고 RDFa로..

Programming/기타 2024. 1. 24. 03:01

vite를 사용해서 React + TS 프로젝트 환경을 세팅하던 중 ESLint 오류가 발생했다. 🧨 에러 .eslintrc.cjs와 vite.config.ts 파일에서 ESLint 오류가 발생하고 있다. 😬😬 에러 내용 // eslintrc.cjs Parsing error: ESLint was configured to run on /.eslintrc.cjs using parserOptions.project: /tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to i..

Programming/기타 2024. 1. 12. 18:36

며칠 전 개인 프로젝트 배포를 위해 Netlify를 사용했는데 이와 관련된 내용을 정리해보고자 한다! ✔ Netlify 선택 이유 내가 진행한 프로젝트는 정적인 웹 사이트이기 때문에 Netlify를 사용하여 배포를 하는 게 적당하다고 판단했다. ✔ 시작하기 로그인 후 Sites 쪽을 보면 이런 화면이 보일 것이다. ✅ 여기서 Import an existing project를 클릭 ✅ Github에 올린 프로젝트를 배포할 것이니 Deploy with Github 클릭 ✅ 프로젝트 목록 중 배포할 프로젝트를 클릭한다. ✅ 빌드 관련 세팅하기 그럼 설정 페이지가 나오는데 여기서는 빌드를 위한 기본적인 설정을 해주면된다. 1) Branch to deploy 배포할 브랜치를 선택할 수 있다. 2) Build co..

Programming/기타 2023. 10. 10. 00:59

React와 TypeScript 기반의 프로젝트에 Tailwind CSS 를 설치하는 과정에서 에러를 발견했다. 나중에 비슷한 일이 생기면 참고하기위해 기록해둔다. 일단 Tailwind CSS 설치하는 방법부터 시작! Tailwind CSS 설치하기 ✅ 터미널을 열어 설치 명령어를 입력해준다. npm install -D tailwindcss ✅ 설치가 완료되면 init 명령어를 입력한다. → tailwind.config.js 파일을 생성하기 위함 npx tailwindcss init tailwind.config.js 파일이 생겨서 확인해보니... 에러가 났다! 'module' is not defined' 검색을 해보니 ESlint 설정시 env 쪽에 node를 설정해주지 않아서 나타나는 현상이라고 한다...

Programming/기타 2023. 7. 14. 15:43

브라우저의 렌더링 과정 브라우저는 크게 네가지 단계를 거쳐 렌더링을 수행한다. 1. 요청 ✅ 브라우저가 서버에게 필요한 리소스를 요청하는 단계 2. 렌더트리 생성 ✅ HTML을 파싱하여 DOM Tree를, CSS를 파싱하여 CSSOM(CSS Object Model) Tree를 만든 후 두 트리를 조합하여 렌더트리를 구성한다. ✅ 렌더 트리는 화면에 나타나는 요소들을 결정하는 트리이다. → 어떤 요소들이 보여야하는지, 어떤 스타일이 적용되어야 하는지, 어떤 순서로 나타낼 것인지를 명세하는 트리이다. 3. 레이아웃(리플로우) ✅ 렌더 트리 구성이 끝나면 레이아웃 단계가 이어지는데, 이 단계에서는 렌더 트리에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 좌표에 나타낸다. ✅..

Programming/기타 2023. 7. 5. 21:11