이전 기획자로 일할때 실시간으로 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. 로딩화면맨 처음 나오는 로딩화면은 훨씬 길다(캡쳐 시 크롭).  2. 로딩 후 화면 이동로딩 후 화면 이동 시 데이터가 제대로 들어가지 않고 순차적으로 들어오는 것을 볼 수 있다.나는 분명 `Promise.all`을 이용해서 모든 데이터들을 묶어줬는데 왜 그런걸까.. 3. 화면 재로딩 크롬에서 탭을 통해 다른 곳으로 이동했다 오면 다시 로딩이 된다. 그럼 위의 로직을 다시 타게 된다.   💻 기존 코드const ResultPageMain = () => ..

작업 내용  대부분의 페이지에서 아래와 같이 타이틀과 서브 타이틀이 사용되고 있다.  그래서 HeaderTitle.tsx 라는 컴포넌트를 만들어 리팩토링 하기로 결정!!// HeaderTitle.tsxinterface HeaderTitleProps { title: string; subTitle?: string; description: string; titleSize?: string; // 기본값을 설정할 수 있도록 optional로 설정 descriptionSize?: string;}const HeaderTitle: React.FC = ({ title, description,}) => { return ( {title} {des..

이번 팀 프로젝트를 진행하면서 가장 아쉬웠던 부분 중 하나는 컴포넌트를 제대로 나누지 못한 부분이다.그래서 한 페이지의 코드가 300줄이나 되는 대참사가 생겨버렸다.. 가독성이 조금 아쉽다는 생각??(애초에 코드 한 줄의 길이를 80으로 제한하고 작업을 하긴 했지만..ㅎㅎ ) 그래서 전체적으로 일단 내가 담당한 탄소 계산기 부분을 컴포넌트화 시키는 작업을 진행 중이고이번에 적은 내용은 props와 관련된 내용이다.  처음 코드//calculator > result > [year] > [month] > Page.tsx > ResultPage ...  ResultPage에서 CarbonEmissionCard 라는 컴포넌트를 하나하나 작성을 했었다.총 5개의 카드가 있었는데 props로 넘겨주는 ..

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