스파르타코딩클럽 내일배움캠프 86일차

오늘 일과 간단 요약

1. 오전 스크럼
2. 이력서 특강
3. 검색페이지 검색Box UI 수정
4. 오후 스크럼 (Sentry 알게 됨)

 

 

 

 

 

 

 

 

이력서 특강

 오전에 잠깐 이력서 특강을 들었는데, 이제서야 뭔가 내배캠 수료가 실감이 난다. 슬슬 이력서와 포토폴리오를 정리할 때가 되는 것 같아서 최종 프로젝트 하면서 짬짬히 이력서를 작성해봐야 할 것 같다.

 

 특강 내용을 다시 복기하고 싶은데 아직 올라오지 않아서 주말에 올라오면 다시 볼 예정이다. 못해도 수료 전에 큰 틀은 만들어두고 싶어. 어제 쉬는 날이라서 프로젝트 조금 하다가 포토폴리오 뼈대만 만들어봤는데, 포토폴리오를 만들어보기 위해 이전 프로젝트를 복습해보니 그래도 내배캠에서 많이 배웠다는 생각이 든다.

 

 오늘 너무 정신없어서 지금은 이력서 특강과 관련해 생각나는게 없는데....ㅋㅋㅋㅋ 복습해봐야겠다.

 

 

 

 

 

 

 

searchBox UI 수정

 검색페이지의 검색창 UI 수정하는 시간을 가졌다. 중간에 학교를 다녀와야 해서 오늘 사실 별로 한게 없긴 한데, UI를 수정하고 select style을 수정했다. 희현님이 이미 구현해주신 코드가 있어서 그걸 복사 붙여넣기 하다가 보니 중복된 코드여서 아예 shaerd 폴더에 따로 빼서 리팩토링 했다. 알고보니까 그 코드가 검색 페이지와 edit 페이지를 제외하고도 쓰이는 곳들이 있어서 따로 파일을 만드는 게 오히려 더 좋았다.

 

 select 라이브러리는 내가 이용해본 게 아니라서 희현님 코드를 보면서 공부를 많이 했다. custom hook은 아니고 select바 스타일을 수정하는 코드였는데 공식 문서에 나온 걸 보고 희현님 코드 보면서 하니까 이해가 되는 것 같기도...? 확실히 이전에는 내가 맡은 부분 외에는 잘 몰랐는데, 이번에 2주 동안 리팩토링, 최적화, UI 등을 하게 되면서 다른 분들의 코드를 보고 배우는 것 같다.

 

 

 지금은 이런 식으로 margin을 주고 select에 스타일 설정하고, 검색어 버튼 UI를 수정했는데 디자이너님이 만들어주신 디자인이랑 조금 달라서 내일 대대적으로 다시 수정해야 할 듯 싶다. 우리 조는 내일까지 UI 먼저 구현한 뒤에 구글 폼을 만들고 유저 피드백을 받기로 해서 속도를 내야지. 오늘 너무 정신없어서 이것밖에 못해서 너무 아쉽다.

 

 이렇게 디자인 해주셨는데 빨리 이렇게 수정해야지. 디자인이 바뀐 줄 모르고 다 했다고 생각했는데 전혀 아니었음...ㅋㅋㅋㅋㅋ 곧바로 수정해야지...

 

 

 

 

 

 

 

 

 

Sentry 추가

https://sentry.io/welcome/

Application Performance Monitoring & Error Tracking Software

 

 저녁에 튜터님이 오셔서 Sentry라는 것에 대해 알려주셨는데 생각보다 빠르고 쉽게 적용할 수 있게 되었다.

 

 Sentry란, amplitude와 비슷한데 서비스에서 에러가 나면 에러를 보여주는 에러 모니터링 tool이다. 에러가 나면 실시간으로 보여주고 어느 코드인지도 보인다.

 

 우선 회원가입하고 project를 생성한 뒤에 우리 프로젝트에서 설치하면 된다.

# Using npm
$ npm install --save @sentry/react @sentry/tracing

# Using yarn
$ yarn add @sentry/react @sentry/tracing

 

 설치한 뒤에 가장 상위 컴포넌트인 index.tsx 파일에 아래 코드를 추가하면 된다.

import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new BrowserTracing()],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

 

 이렇게 한 뒤에 실제로 오류가 나오는지 버튼을 만들고 onClick 이벤트로 에러를 만들어보니 바로 실시간으로 적용이 되었다. 만약 에러를 해결하면 해결했다고 resolved를 누르면 바로 그 에러가 해결된다.

 

 튜터님과 같이 화면 공유하면서 직접 에러를 만들어보고 삭제하면서 해결했다고 하니까 간단하면서 좋은 기능이었다. 오래 걸릴 줄 알았는데 생각보다 빠르게 도입하게 되었다. 그래서 amplitude와 sentry 두 가지 다 사용해 보는 걸로. 나중에 오류가 생기면 바로 여기서 확인하면 되니까 되게 좋은 tool 같다.

 

 

 

 

 

 

 

 

 

짧은 일기

 오늘은 중간에 학교를 다녀오느라 뭔가 제대로 구현한 게 없다. 그리고 디자이너님과 디자인 관련해서 최종적으로 의견을 주고받고 전달 받아서 우리 조원들끼리 결정해야 되는 문제도 있었고...그리고 저녁에는 튜터님이 오셔서 새로운 걸 알려주셨고 등등 너무 정신 없는 하루여서 제대로 구현한 게 별로 없다...내일 더 열심히 해야지.

 

 이력서 특강도 들었는데 휘발되어버린 기억...내일은 UI 구현 다하고 구글폼까지 만들어서 여기저기에 뿌리고(?) 다녀야지. 많이 피드백 줬으면 좋겠다...그전에 내가 할 게 있지만 ㅋㅋㅋㅋㅋ 그래도 빨리빨리 해서 다음주까지 잘 마무리해야겠지..오늘은 한게 없지만 내일은 그만큼 더 열심히 해야겠다는 다짐을 하며...ㅋㅋㅋㅋ