🥞 오늘 한 일

• 타입스크립트 개인과제
  • 프로젝트 셋업
  • API 호출 설정
  • CountryList 컴포넌트 작성
• 타입스크립트 강의
  • 3,4주차 완강
• TS + React Cookbook 완강
• 알고리즘 코드카타
  • formatTimestamp 함수 제작
• 특강 : TypeScript 바로 따라하기(11:00)
• 취업 특강 : 특징있는 개발자 되기 세션(19:00)

🍽️ 트러블 슈팅

알고리즘 코드카타

formatTimestamp 함수 제작

문제

함수 정의:
formatTimestamp 함수는 주어진 ISO 형식의 타임스탬프를 현재 시각과 비교하여, 상대적인 시간 경과를 한국어로 포맷팅하여 반환하는 유틸리티 함수입니다.

입력:
ISO 형식의 타임스탬프 문자열 (예: "2024-06-23T12:00:00Z")

출력:
상대적인 시간 경과를 한국어로 포맷팅한 문자열

1분 미만: "30초 전"
60분 미만: "5분 전"
24시간 미만: "2시간 전"
7일 미만: "3일 전"
일주일 이상 지난 경우: "2024-06-16 09:00"

동작 방식:
현재 시간과 입력된 타임스탬프를 비교합니다.
초, 분, 시간, 일 단위로 경과 시간을 계산합니다.
경과 시간에 따라 적절한 포맷으로 문자열을 반환합니다.

풀이

export const formatTimestamp = (timestamp) => {
  // 비교할 현재 시간을 가진 상수를 만든다.
  const dateNow = new Date();

  // 가져온 timestamp를 new Date에 넣으면 영국 시간으로 바뀌기 때문에, 9시간을 뺀 값을 새로 new Date를 통해 가져온다.
  const offset = 1000 * 60 * 60 * 9;
  const dateComment = new Date(new Date(timestamp).getTime() - offset);

  // 두 시간의 차이를 초, 분, 시, 일까지 계산한다.
  const mscDiff = dateNow.getTime() - dateComment.getTime();
  const secDiff = mscDiff / 1000;
  const minDiff = secDiff / 60;
  const hrsDiff = minDiff / 60;
  const dayDiff = hrsDiff / 24;

  if (secDiff < 60) {
    // 60초보다 작을 경우 1분 미만이기에 소수점 이하를 버린 해당 초를 반환한다.
    return `${Math.floor(secDiff)}초 전`;
  } else if (minDiff < 60) {
    // 60분보다 작을 경우 해당 분을 반환한다.
    return `${Math.floor(minDiff)}분 전`;
  } else if (hrsDiff < 24) {
    // 24시간보다 작을 경우 해당 시간을 반환한다.
    return `${Math.floor(hrsDiff)}시간 전`;
  } else if (dayDiff < 7) {
    // 7일보다 작을 경우 해당 일을 반환한다.
    return `${Math.floor(dayDiff)}일 전`;
  } else {
    // 위 조건이 모두 아닐 경우 일주일 이상 지났기에, 해당 날짜를 반환한다. 이 때 조건에 따라 적절히 문자열을 변경한다.
    return timestamp.replace("T", " ").slice(0, 16);
  }
};

시간대를 비교하는 문제라 조금 어려움을 겪었다. 풀고 나면 로직 자체는 정말 간단하지만, 두 시간을 비교하는 로직을 제작하는 것 자체가 좀 어려웠던 것 같다. new Date를 적극 활용해야겠다.

🍪 배운 것

타입스크립트 강의

• any, unknown, union
• enum, object literal
• 유틸리티 타입

특징있는 개발자 되기 세션

마인드셋

• 성장에 대한 갈망
• 실행력
  • 입개발자가 많다. 예를 들어 상태 관리가 중요하다고 하는 사람에게 어떻게 하냐고 물어보면 깊게 구현해본적도 공부해본적도 없는 사람들이 꽤 있다. 그런 사람들은 현업에서 빠르게 들통난다. 빈 수레가 요란한 것을 피해야한다. 실행을 계속 해봐야한다.
• 문제해결에 대한 집념
  • 개발자들이 가장 높은 가치로 여기는 부분. 맞닥뜨리고 포기를 하느냐, 쉬운 방향으로 돌아가느냐, 남 탓을 하느냐, 이런 게 쉽게 푸는 방법이고, 이것들을 어떻게든 해결해야지 하는 집념을 가지고 있어야 빨리 는다.
• 개발을 진정으로 좋아하는
  • 열정. 취업 수단이나 유행 때문에 하는 경우가 있는데, 나쁘진 않지만 개발의 매력을 꼭 찾아야한다. 그래야 그 매력을 갈고 닦는 부분에서 회복 탄력성을 얻을 수 있다.
• 추구하는 개발자상이 있는
  • 어떤 사람은 프론트에서 끝을 보고 싶다고 말을 하고, 어떤 사람은 기능 개발 시 유저에게 영향을 끼치는 게 매력적이라 이 일을 한다고 말을 한다. 이런 식으로 추구하는 게 있는 게 좋다.
• 프론트엔드 개발에 대한 확신이 있는
  • 어떤 분야가 됐든 이쪽에 대해 확신이 있고 푹 빠져있는게 중요하다.
• 말랑한사람 / 변화가 가능한 사람 / 태도가 열린 사람
  • IT 업계의 특성이기도 한데, 빠르게 변하기 때문에 변화를 즐기고 열린 태도로 즐겁게 접근을 하는 게 일하기 좋은 사람들이다.

커뮤니케이션

가장 자기 객관화가 안되는 부분.

• 협업 태도가 좋은
  • 회사 가면 무조건 협업. 이걸 위해선 아래의 요소들이 중요하다
• 배려 / 참을성 / 적극성 / 희생 / 설득력 / 노력
• 공통된 목표를 보는 시야
  • 예) 서비스에 개선 사항이 많아 기능을 넣어야할 때, 한 개의 기능에만 집중하면 좁게만 보게 되지만 개선을 한다는 것에 집중하면 좋게 여길 수 있음. (럭키비키 마인드)
• 비즈니스 임팩트를 중요시하는
• 두괄식으로 말하는, 논리적인
  • 횡설수설을 하게 된다. 나의 의도가 정리되지 않은 채로 말을 시작하는 경우가 있는데 그렇게 되면 일정이 늘어나거나 잘못될 수도 있다. 조금은 말하고자 하는 것들을 정리하고 이야기하는 연습을 하는 게 중요하다.
• 일정관리, 책임감있는
  • 별표 백만개, 말이 필요 없는 것. 이걸 하기 위해선 위에서 말한 것들이 다 들어간다.

이해도

(신입에겐 좀 어려울 수 있음, 조직 내 짬이 차야함)

• 기술에 매몰되지 않는
  • 디자인이나 기획으로 해결이 되는 경우도 있다. 기술로만 문제를 해결하려다보니 다른 방식의 해결법을 생각하지 못하는 경우가 있다.
• 사업적/조직적 니즈를 이해하는
• 기획자의 역량을 존중하는
  • 개발자는 방어적이게 된다. 싫어도 안 되겠다는 말을 하게 된다. 단칼에 안된다고 하는 사람과, 이런 방법은 안 되지만 다른 방법은 된다고 하는 사람이 있다. 압도적으로 후자가 잘 하는 사람이고 원하는 사람이기 때문에 그런 부분을 신경쓰면 좋다.
• 자기 객관화가 되는
  • 아는 척하는 게 위험하다. 확실히 알려면 어느 정도는 계속 확장을 해봐야한다. 면접에서 더 딥한 건 모르겠다고 하는 것과, 다 배웠다고 하는 것은 다 들통이 난다. 당연히 사람은 약한 부분이 있는데, 자기 객관화가 되는 사람들은 그런 부분에서 점수가 확 깎이지는 않는다. (물론 기본적인거 다 모르면 안된다)

아주 쉬운 것

• 배운 것들 Deep dive (tanstack, state, network, javascript, react, node 등등)
  • 예를 들어 공식 문서에 있는 useMutation 에서 몇 개만 써봤을 텐데, 다 써보면 금상첨화
• 잘 하는 곳들 관찰 (실제 서비스들, 네이버, 유튜브, 애플, 토스 등)
• 미디어 / 글 (테크 블로그, 유튜브, 컨퍼런스 등)
• 많은 생각 하기

앞으로 이런 능력들을 갖는데 노력을 하면 굉장히 좋을 것이다.

🍴 돌아보기

타입스크립트에 대한 이해도가 부족했지만 오늘 11시의 특강 및 쿡북을 통해 리액트에서 타입스크립트를 사용하는 방법에 대해서 감을 약간이라도 잡은 날이었다. 덕분에 과제를 어느 정도까지는 진행시킬 수 있었고, 타입스크립트에 대한 완벽한 이해를 하기보다는(어차피 이 짧은 시간 내에 못 한다) 과제를 진행하면서 점차 공부해나가는 방식으로 해야할 것 같다!

🍳 내일 목표

• 타입스크립트 개인과제 진행