이전 기획자로 일할때 실시간으로 CX 대응에 투입된 적이 있었다.새로 나온 OS와 관련해서 에러사항이나 개선사항에 대해 빠르게 체크 및 반영을 해야했었는데어떻게 보면 에러 모니터링과 로그 데이터 수집과 비슷한 점이 많아보였다. 둘 다 공통적으로 사용자가 제품이나 서비스(어플리케이션)을 사용하면서 겪는 모든 경험(에러) 등을 긍정적으로 개선하는데 목적을 두고 있었고, 데이터 수집을 통해 문제나 패턴을 파악하고 서비스 개선을 위한 인사이트를 도출하려는 목적이 비슷한 것 같다. 그럼 간단하게 프론트엔드 에러 모니터링과 로그 데이터 수집에 대해서 알아보자.  프론트엔드 에러 모니터링이란?웹 어플리케이션 또는 웹사이트의 클라이언트 측에서 발생하는 에러를 실시간으로 감지하고 모니터링하는 과정의 의미한다.브라우저에서..

유닛 테스트란? 유닛 테스트 정의유닛 테스트는 소프트웨어 개발에서 가장 작은 단위인 함수나 메서드와 같은 단위의 코드가 예상대로 동작하는지 검증하는 테스트이다.한마디로 구성 요소들이 개별적으로 올바르게 작동하는지 확인하는 것이라 생각하면 쉽다. 개발자가 작성한 코드가 특정 입력에 대해 기대한 출력이 나오는지 확인이 가능하다.자동화된 테스트로 수행되며, 코드가 변경될 때마다 반복적으로 실행하여 버그를 조기에 발견할 수 있다.  유닛 테스트는 어떤 단위로 테스트를 하는가?1. 함수 테스트 : 함수가 의도한 대로 입력을 처리하고 결과를 반환하는지 검증2. 메서드 테스트 : 메서드의 올바른 동작을 테스트3. 로직 검증 : 계산, 변환, 데이터 처리 등을 담당하는 로직이 정확히 작동하는지 테스트4. 예외 처리 :..

서버에서 클라이언트 인증을 확인하는 방식으로는 Cookie/ Session / Token  이렇게 3가지 방식이 있다.JWT에 대해서 알기 전 해당 내용을 간단하게 정리부터 해보려고 한다. Cookie / Session / Token 인증 Cookie 인증쿠키는 key-value 형식의 문자열의 모음집이다.클라이언트가 방문하는 사이트가 사용하고 있는 서버를 통해 클라이언트 브라우저에 저장이 된다. Cookie의 단점1. 보안에 취약 : 요청 시 쿠키의 값을 그대로 보여줌2. 용량 제한 : 많은 정보를 담기 어려움3. 브라우저마다 지원하는 쿠키의 형태가 다름 : 공유가 불가능 Session 인증클라이언트의 민감한 인증 정보를 브라우저가 아닌 서버에 저장하고 관리서버는 세션 ID를 클라이언트에게 전달 (세션..

🚨 문제 발생어젯밤 성능 최적화에 성공을 한 후 리팩터링 한 레파지토리를 vercel에 배포하기 위해 배포를 시도했더니 오류가 뜨더라..  ReferenceError: document is not defined 해당 오류는 서버 측에서 document 객체를 참조하려 할 때 발생하는 오류이다.document는 브라우저 환경에서만 존재하기 때문에, 서버 사이드에서 실행되는 코드에서는 사용할 수 없다.     💻 문제 해결 시도 첫번째 방법useState, useEffect, document, window를 사용한 모든 페이지에 "use client"를 추가하기 결론은 실패를 하였다.아무리 use client가 붙어 있는 곳이라도 hydration 과정 중 실행환경이 window 객체가 없는 서버환경에서..

한 달간의 최종 프로젝트가 끝이 났다.어떤 서비스를 만들지 고민하던 시점이 엊그제 같은데, 벌써 마무리라니 시간이 참 빠르게 지나갔다. 프로젝트 초반에는 블로그에 트러블슈팅과 배운 점을 꼼꼼히 정리하겠다는 다짐을 했지만, 바쁜 일정 속에서 실행하지 못했던 점이 아쉽다.그러나 리팩토링 단계에서 이를 보완해 프로젝트를 완성도 높게 마무리하는 것을 목표로 잡았으니 그나마 다행이랄까? 이를 바탕으로 느낀 점을 조금은 적어볼까 한다.   팀장으로서의 역할이번 프로젝트에서 팀장을 맡아 팀을 이끌었다. 내가 팀장으로 팀을 이끌며 중요시 생각했던 내용을 적어보았다. 1. 일정 조율한 달간의 프로젝트는 짧지 않은 기간처럼 보이지만, 실제로는 빡빡하게 느껴졌다. 특히 내배캠 측에서 큰 틀을 이미 정해 놓고 있어서 이 일..

최근 프로젝트에서 Supabase를 사용하여 로그인 인증 및 인가를 구현한 경험이 있다.오랜만에 Supabase를 다루다 보니, 헷갈리는 부분도 있었고 생각이 많아졌던 기억이 있다. 이번 프로젝트에서는 인증(Auth) 기능 대신 Supabase 테이블을 사용한 CRUD 작업을 진행했다.탄소 계산기를 통해 계산된 데이터를 carbon_records 테이블에 저장해야 했는데, 테이블에는 여러 칼럼이 있어 세밀한 작업이 필요했다. 제출하기 버튼을 누르면 실행되는 코드 중 supabase와 관련이 되어있는 부분은 이러하다. try { const { error } = await browserClient.from("carbon_records").insert({ user_id: user, ..

어느정도 1차적으로 기획단계가 마무리되어 가고 디자이너분들께서 와이어프레임 작업에 들어가셨다.우리 조원들끼리도 이 시간을 활용하기 위해 먼저 유동적으로 프로그램 세팅을 시작하기로 했다.  먼저 개발 작업을 시작하기에 앞서 오늘 작업할 부분은 ERD 다이어그램 정리와 Supabase 기본 세팅!  ERD란?ERD는 Entity Relationship Diagram(엔티티 관계 다이어그램)의 약자이다.데이터베이스 설계 과정에서 사용되는 모델링 기법 중 하나 > 데이터 관계를 시각적으로 표현- 데이터베이스 구조를 시각화할 수 있어 개발자와 설계자 간의 의사소통이 원활- 데이터베이스 구조의 논리적 모순을 조기에 발견 가능  나중에 supabase에 추가할 DB 설계를 한눈에 보기 위해  ERD Cloud라는 웹..

최종 프로젝트 1. 주제선정지금까지 팀별 아이디어가 필요했던 프로젝트는 총 3번이 있었다. 그리고 돌이켜보니 신기하게도 그 3번의 프로젝트 모두 내가 낸 아이디어로 진행을 했었다. 하지만 역시 많은 아이디어를 쏟았던 만큼 더욱 더 신중하다 보니 최종 만큼은 아이디어가 생각이 나지 않았다.주제를 생각하는데 점점 고갈된 듯한 느낌이 들다보니, 저번 프로젝트때 만들었던 "몽글로드" 프로젝트 아이디어를 최종까지 활용하지 못한 점에 대해 아쉬움이 남았다. 참 좋은 아이디어였는데.. 너무 빨리 사용한.. 이번 프로젝트에서는 아이디어를 생각하는 데 많은 시간을 할애했는데, 이는 우리 조에서 자체적으로 설정된 제약 조건 때문이었다. 프로젝트 제안 과정에서 몇 가지 규칙을 정했기 때문에 아이디어가 쉽게 떠오르지 않았던 ..