겨리의 개발일기

최근 면접스터디를 준비하면서 리액트의 Portal에 대해 공부한 적이 있었다. 백문이불여일타라고...🧐 설명을 여러번 보는 것보단 직접 구현해 보는 것이 도움이 될 것 같아 직접 시도해 봤다! 이에 대한 과정을 정리해보고자 한다. 보통 모달을 생각하면 화면 중앙에 예쁘게 뜨는 창 하나를 떠올릴 수 있을 것이다. 먼저 그런 일반적인 모달을 구현해봤다. 모달 컴포넌트 구현하기 // Modal.tsx ... const ModalContainer = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; `; const Style..

Programming/React 2024. 2. 2. 19:19

오늘은 커피챗 때 피드백 받았던 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

최근 개인 프로젝트에 구글 애널리틱스를 적용한 내용을 정리해보려고 한다. 😎 😎 구글 애널리틱스(google analytics) 구글 마켓팅 플랫폼 브랜드 내의 플랫폼으로 웹사이트 트래픽을 추적하고 보고하는 웹 애널리틱스 서비스 웹 애널리틱스(web analytics) 웹 사용률을 이용하고 최적화하기 위해 웹 데이터를 측정, 수집하고 분석하여 보고 하는 것 웹 트래픽을 측정하는 과정일뿐 아니라 비즈니스와 시장 연구의 도구로서 사용이 가능하다. 웹사이트 효율성을 측정하고 개선 할 수 있다. 나는 개인 프로젝트로 진행했던 나와 맞는 고양이 찾기(심리테스트) 사이트의 사용률을 측정해보고 싶어서 시도해보았다. 💫 프로젝트 바로가기 : https://find-my-cat.netlify.app/ ✔️ 참고 2023..

Programming/React 2024. 1. 17. 18:38

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

Controller 컴포넌트를 사용해서 처리를 하고 나니 중복된 코드가 많아 개선 할 수 있을 것 같다는 생각이 들었다. 찾아보니 useController 를 사용해서 재사용이 가능한 컴포넌트를 만들 수 있다고 해서 바로 시도! 😎 코드를 보기 전에 useController의 Props 부분부터 확인해보자! useController Props // controller.d.ts export type UseControllerProps = { name: TName; rules?: Omit; shouldUnregister?: boolean; defaultValue?: FieldPathValue; control?: Control; disabled?: boolean; }; 추가 설명 🗸 name - input 의 ..

Programming/React 2023. 12. 15. 01:54