본문 바로가기

전체 글166

[2026.11.05] sentry web vitals 수집 시, span 사용량 과다 문제 🐞 문제 상황sentry 사용량이 과다 발생함팀 내 의견 : 센트리로 보내는 요청 body에 쓸데 없는 값들을 줄여보자 🥲 원인확인해보니, span 사용량이 문제였음네트워크 전송량은 영향 없음트랜잭션 안의 span 수팀원이 이전에 작업한, Web Vitals 측정을 위해 수집 항목들을 추가한 곳에서 문제 발생browserTracingIntegration() 을 기본 옵션 그대로 켜서, Web Vitals 에 필요 없는 resource, http.client, long task span 까지 함께 수집됨 ✅ 조치필요하지 않은 항목들은 수집하지 않도록 옵션 조정Sentry.browserTracingIntegration({ traceFetch: false, traceXHR: .. 2026. 11. 5.

[2026.11.02] GTM 미리보기 내 새 페이지 묶음 기준 🐞 문제 상황유저가 메뉴 버튼을 통해서 다른 페이지로 이동한 상황이다.이를 GTM 미리보기를 통해서 확인할 때, 좌측 패널에 표시되는 페이지 묶음의 단위가 변경되지 않는 문제가 있었다. 🥲 원했던 것페이지가 이동되면, 새로운 페이지 묶음 단위가 생기길 원했다. ✅ 확인 결과버그가 아님"기록" 이라는 이름을 가진 GTM 의 History Change 이벤트에서 페이지 이동을 확인할 수 있다. (page_path 같은 값 참고) 💡 알게된 것Next.js App Router는 로 화면을 이동시키는데, 이는 문서를 새로 읽지 않고 주소만 바꾸는 형식이다. (history.pushState)GTM Tag Assistant는 HTML을 새로 불러올 때 새로운 페이지 묶음을 왼쪽 패널에 생성한다. 이동 방.. 2026. 11. 2.

코드잇 스프린트 4기 프론트엔드 수료 후기 코드잇 스프린트 4기 프론트엔드 수료 후기6개월 간의 부트캠프 후기... 시간 참 빠르다velog.io블로그 이사함! 2024. 6. 27.

한글 입력 시 Enter 이벤트 중복 호출 문제 해결 문제 상황 태그를 입력하는 Input 컴포넌트를 만들던 중, 영어를 입력할 때는 정상적으로 작동하지만 한글을 입력하면 태그가 2개로 나뉘어 생성되는 문제가 발생했다. 태그를 생성하는 방식은 아래처럼 구현했다. 사용자가 태그 이름을 입력한다. 사용자가 태그 이름 입력을 마치면 엔터 키를 누른다. 엔터키를 누르는 이벤트가 발생하면, 입력 값을 태그로 생성한다. 디버깅 태그를 생성하는 함수 내에서 콘솔을 출력해보니, 한글의 경우에는 한 번만 엔터 키를 클릭해도 이벤트가 중복 호출되었다. 문제 원인 한글은 자음과 모음이 합쳐져 만들어지는 조합 문자이기 때문에, 글자가 조합 중인지 조합이 완료된 상태인지 파악하기 어려워 이벤트가 중복 호출된다. 현재 코드에서 사용중인 onKeyDown 메서드의 경우, 문자의 입력.. 2024. 4. 21.

코드잇 스프린트 기초 프로젝트 협업 후기 현재 수강 중인 부트 캠프에서 기초 프로젝트를 진행했다. 너글닿기 누구나 손쉽게, 온라인 롤링 페이지를 만들 수 있어요 itsbasic-c93d6.web.app GitHub - innerstella/itsBasic: 코드잇 스프린트 4기 PART2 기초 프로젝트 코드잇 스프린트 4기 PART2 기초 프로젝트. Contribute to innerstella/itsBasic development by creating an account on GitHub. github.com 🗓️ 프로젝트 일정 🚀 사전 회의 - 기술 스택 정하기 - 컨벤션 정하기 (코드, 폴더 구조) - 문서화 방법 - 일정 및 마일스톤 관리 방법 - 의사소통 방법 - R&R 분배 - 깃 협업 - 회고 팀 내에 개발 협업을 처음해보는 팀원들.. 2024. 3. 20.

React 컴포넌트를 어떻게 만들어야 할까? React는 컴포넌트 기반 라이브러리입니다. 웹을 개발할 때 헤더, 메인 콘텐츠가 들어가는 부분, 버튼 등을 만든다면 하나의 컴포넌트로 묶어서 관리할 수 있습니다. 그렇기 때문에 개발하다가 특정 부분에서 오류가 생겼다고 한다면, 그 컴포넌트만 수정하면되기 때문에 코드를 간결하게 만들 수 있습니다. 지금까지 React로 여러 가지 프로젝트를 해보면서 많은 컴포넌트들을 만들어보았고, 그 과정에서 비슷한 기능인데도 모두 따로 만든다던가 하는 방식으로 비효율적인 방법으로 만들었다가 또 다시 그 코드를 고쳐서 하나의 컴포넌트를 깔끔하게 만들었을 때 재미를 느꼈습니다. 그래서 컴포넌트를 어떻게 해야 잘 만들 수 있을 지에 대한 점이 궁금해 몇 가지 글과 웨비나를 참고해서 정리해봤습니다. 1. React 컴포넌트와 .. 2024. 1. 20.

산책 개발일지 1 : NoSQL 데이터베이스 설계 (Cloud Firestore) 개발 계획을 세운 후, 팀원과 함께 기획서를 보며 필요한 데이터에 대한 논의를 진행했습니다. 우선 저희 팀에는 백엔드 개발자가 없었기 때문에 (이번에도) Cloud Firestore를 사용하게 되었습니다 지금까지 진행했던 대부분의 프로젝트에서 Cloud Firestore를 사용했지만, 제대로 알고 써본 적은 없었던 것 같아서 이번 기회를 통해 NoSQL 데이터베이스 설계에 대해서 알아보고 연습해보는 시간을 가졌습니다. ☁️ Cloud Firestore Google Cloud 인프라를 기반으로 하는 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스를 사용해 클라이언트 측 개발 및 서버 측 개발에 사용되는 데이터를 저장하고 동기화하세요. 구글에서 지원하는 NoSQL 데이터베이스 장기 데이터 저장 및 검색.. 2024. 1. 11.

시맨틱 태그를 쓰면 좋은 점 sematic은 의미의, 의미론적인 이라는 의미를 가지고 있는 단어입니다. 시맨틱 태그(semantic tag)란 단어에서 그 의미를 유추할 수 있듯이, 의미가 담겨있는 태그입니다. 기능은 태그와 동일하며, 정확한 사용법이 있다기보다는, 작성하는 사람의 의도가 중요합니다. 그렇다면 이런 시맨틱 태그를 왜 써야 할까요? 시맨틱 태그의 종류 : 하나의 완성된, 독립적인 내용을 나타내는 영역 : 문서의 주요 내용과 간접적으로만 연관된 부분 (사이드바, 콜아웃 박스) : 토글과 같은 기능으로 정보를 제공하는 disclosure 위젯을 만들 때 사용 : 이미지에 대한 캡션 : 이미지 및 이미지 설명을 담고 있는 영역 : 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 : 영역 위쪽에서 로고나 제목, 메.. 2024. 1. 5.

position의 속성 및 특징 (실제 사이트 예시) CSS 코드를 작성할 때 자주 사용하는 속성들 중 `position`이라는 속성이 있습니다. position은 문서 상에 요소를 배치하는 방법을 설정할 때 사용하며, 매우 다양한 속성값을 가지고 있습니다. static static은 position 속성의 기본 값으로, 요소를 일반적인 문서의 흐름에 따라 배치합니다. 이 때 일반적인 문서의 흐름이란, 우리가 문서를 읽고 작성할 때의 순서인 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이는 것을 의미합니다. position이 static인 상태에서는 아무리 offset 값을 줘도 변화가 일어나지 않고, z-index 값 또한 적용되지 않습니다. relative position이 relative인 상태에서는 static과 자기 자신을 기준으로 top, right, .. 2024. 1. 5.

이전 1 2 3 4 ··· 19 다음

티스토리툴바