2024.04.29 TIL - 최종프로젝트 35일차 (gabia 도메인 구매 및 vercel 연결 / 성능최적화 - 이미지 용량 줄이기, 스크롤 throttling 적용, 웹폰트를 import로 변경)

gabia 도메인 구매 및 vercel 연결

vercel로 배포한 최종프로젝트를 커스텀 도메인으로 설정하고 싶었다.
여러 사이트를 알아봤는데 gabia가 대중적이고 저렴한 편이라고 해서 gabia에서 구매 결정!
1년 유효한 .com 도메인이 부가세포함 17,600원이었다.
(백엔드 서버가 따로 없는 프론트엔드 최종프로젝트)

• gabia 사이트 : https://www.gabia.com/
• 👍🏻 참고 : 캡쳐화면까지 엄청 잘 나와있는 티스토리 찾음
  (https://shxrecord.tistory.com/339)

gabia 도메인 구매하기

• 도메인 구매 시 선택하기 어려웠던 것들
  • 가비아 네임서버 사용 체크 - 다른 블로그들을 보니 아마 백엔드 서버가 따로 있는 경우에 '타사 네임서버 사용'을 선택하는 것 같다.
  • 안전 잠금 서비스 - 신청함
    (뭔지 정확히 모르는데 참고한 블로그들에서 체크하는걸 봤고, 또 추후에 수정도 가능하길래 일단 선택)
  • 동시신청서비스 - 신청 안함
    (웹호스팅 등 호스팅을 할지말지 물어보는데, 체크해보니까 금액이 22만원 막 이러길래 오 이건 내가 원한게 아니구나 했음..ㅋㅋ)

vercel 연결하기

vercel 프로젝트 > Settings > Domains

• 구매한 도메인을 Add하면 됨

• add를 누르면 이렇게 선택의 순간이 오는데, 잘 모르면 Recommended가 최고다.
  ('앞에 www. 붙는 것도 같이 쓸래? 그리고 www. 붙여서 들어오는 유저는 soom-greenlife.com으로 리다이렉트 시켜줄게' 이런뜻임)

• 그냥 add만 하고나면 에러가 뜸...

• 위 사진의 Type, Name, Value를 gabia 사이트에 들어가서 DNS 설정에 추가해줘야 함
  (친절하게도 가비아에 붙여넣을 내용을 구체적으로 제시해준다. 가서 복붙만 하면 됨)

1. gabia > My 가비아 > DNS 관리툴 클릭

2. DNS 관리 > 해당 도메인 맨 우측의 '설정' 클릭

3. 레코드 수정 클릭

4. 레코드 추가 클릭 -> 아까 vercel 에러에서 보여줬던 Type, Name, Value를 그대로 복붙하면 끝!
   (www. 주소랑 www.없는 주소 2개에서 모두 에러가 나서 두가지 모두 복붙했기 때문에 레코드가 2개인걸 볼 수 있다.)

---

성능최적화 - 새롭게 알게된 사실

• 글씨크기 적용시 px, rem, em정도는 괜찮지만 pt단위는 권장하지 않는다.
  light house 점수에 영향을 줄 수 있음

• 웹폰트를 가져다 쓰는 방식 또한 light house 점수를 낮추는 요인이 될 수 있다.
  웹폰트를 가져다 쓴다는 것은 결국 웹상에 떠있는 폰트를 다운받아 사용한다는 것
  -> 웹폰트를 다운받고나서 그때 적용되는 방식
  -> 다운될때까지 기다려야된다는 소리임

• 이미지 용량 자체가 큰 것도 문제.
  next의 Image태그라고 만능이 아니다. 아무리 이미지를 최적화해준다지만, 30Mb짜리는 Image태그도 감당 못하나보다...ㅠ 3Mb정도로 줄여서 바꿔보았더니 바로 light house 점수가 3배 4배는 뛰었다.

웹폰트 -> import로 변경하기

• 글씨체 import해서 쓰려면
  • yarn add로 글씨체를 다운받기
  • global css에서 글씨체를 import하기
  • 기본 글씨체는 body { } 안에 넣어주기
  • 컴포넌트에서는 font-['Italiana'] 이런식으로 쓰면 됨

// global.css

@import "@fontsource/inter";
@import "fontsource-italiana";
@import "pretendard/dist/web/static/pretendard.css";

body {
  width: 100%;
  min-height: 1000px;
  width: 100%;
  font-family: "Pretendard";
  font-weight: 400;
  /* 기본 폰트 */
}

// MainTextSection.tsx

<p className="w-full font-['Italiana']">
First step for green life,
  // ...

---

브로셔 사이즈 맞춤 이미지들 업로드 모음집

---

📝 최종발표 D-2 소감

• 살면서 처음 리더를 맡아봤고, 이런 장기 프로젝트도 처음 해봤다. 모든게 처음인 상황에서, 코딩도, 리더 역할도 정말 내가 할 수 있는 최선을 다했던 것 같다. 두번 하라 그러면 못할 것 같은 느낌인걸 보면ㅠ.ㅠ

• 주말에도 (물론 풀로 코딩을 하진 못했더라도) 맘편히 쉰적은 한번도 없었던 것 같고, 맡은걸 다 수행해내고 싶어서 평일에는 기본 2~3시까지 했다. 정말 누가 나에게 물어도 난 열심히 했고 내가 할 수 있는건 다 한 것 같다고 말할 수 있을 것 같다.

• 리더로서는 전체적인 상황과 일정을 보면서 주간 할 일, 오늘 할 일, 이번주 목표, 다음주 목표 등을 계속 신경썼다. 그리고 팀원들은 현재 어디까지 왔는지, 어떤 부분들이 남았고 어떤게 잘 안되고 있는지, 목표에 맞추려면 어떻게 조율해야할지, 이런걸 계속 생각하고 기록하면서 5주를 보냈다.

• 팀원들에게도 내 나름대로는 많이 신경쓰려고 노력했는데... 어떻게 와닿았을진 모르겠다.
  맡은게 힘들것 같으면 역할을 분배하려고도 노력하고, 인간적으로도 가까워지고 싶어서 슬쩍 일대일로 이야기할 기회를 만들어보기도 하고...

• 근데 역할을 분배하는게 가장 어려웠다. 맡은걸 빠르게 끝낸 사람에게 다른 사람의 남은 일을 나누기도 하고 그랬는데, 내 입장에선 나는 전체적인 일정과 목표를 보고 있으니까 목표에 도달하려면 빨리 끝난 사람이 다른 일을 해주면 되겠다고 처음엔 그렇게 생각했다.
  그런데 또 생각이 드는게... 이런식이면 일 잘하는 사람이 일을 더 하게 되는 구조 아닌가? 직장 다니면 직장인들이 제일 싫어하는게 이런거 아닌가? 싶은 생각도 들었다.
  만약 내가 기업을 운영하는 입장이라면 일을 잘하는 사람에게 일을 더 주는 대신, 급여나 직위 등으로 보상할 수 있겠지만, 이런 프로젝트는 공부하고자하는 개개인이 본인의 의지로 모여 참여한 협업이라... 리더라곤 하지만 나도 사실 일개 수강생인데 내가 어떻게 보상같은걸 할 수 있을까? 독려와 칭찬을 많이 하려고 노력은 했는데, 이게 팀원 입장에서는 어떻게 느껴졌을지 잘 모르겠다... 왜 자꾸 일을 시키려고 하나 느꼈을 수도 있을 것 같고... 참 어려운 것 같다.

• 그리고 영 아쉬운건 아무래도 프로젝트 막바지의 진행이었다. 5주 동안 에너지를 너무 쏟기도 했고, 이제 새로운 기능을 더 넣거나 하는게 아니다보니까 성능 최적화와 리팩토링을 해야하는데, 어디서부터 어떻게 손봐야될지도 모르겠고, 있는 버그는 해결도 안되고...ㅠㅠ ㅋㅋㅋ
  그러다보니까 막바지에는 뭔가 지지부진 흐지부지 그렇게 시간을 좀 보내게 됐던 것 같다. 마지막까지 스퍼트를 내야한다는건 욕심이었을까? 일단 체력이 너무...ㅠㅋㅋㅋ 에효
  그리고 괜히 리팩토링한답시고 잘못 건드렸다가 다른 부분들까지 에러나면서 와르르맨션 되는것도 넘 무서웠다. 이제는 많은 부분들이 얽혀있어서 내부분이 잘못되면 그걸로 끝나는게 아니다보니... 회사가면 더 심하겠지?
  괜히 에러나서 최종발표날 사이트 접근 안되는 불상사가 생길까봐 섣불리 건드리지 못하겠어서 깔짝대게 되는것 같았다. 아마 다들 같은 마음이었겠지...?

• 이번에 리더하면서 내 중심 가치관은 '함께 일하고 싶은 사람이 되자'였다. 같이 일할 때 좋았다고 기억에 남고 싶었다. 너무 맹목적으로 결과만 좇다가 같이 일하는 팀원들이 너무 힘들고 버거워서 나가떨어지는 그런 일은 없었으면 좋겠다고 생각했다.
  그런데 막상 끝날 때가 되고 보니, 하는 과정은 너무 힘들었어도 결과물이 만족스러우면 그건 또 다른 의미로 좋은 기억이 될 수도 있지 않을까 하는 생각도 들었다.
  과정 중에 큰 스트레스 없고 같이 하는게 좋았다고 하더라도, 결과물이 썩 만족스럽지 못하다면? 그건 그거대로 무능한 리더일지도 모른다는 생각이 든다.
  결과물에 욕심을 낼 것이냐, 사람들과 으쌰으쌰하며 적당선에서 타협할 것이냐, 어려운 문제인 것 같다.

• 결과물에 욕심내는 리더를 둔 다른 팀이 있는데, 나도 그 리더와 같이 팀프로젝트를 한 적이 있었다. 나는 그때가 제일 힘들었던 프로젝트로 기억에 남아서...
  안그래도 기술적인 거나 지식적인게 내가 많이 부족하다고 느껴지는데 원하는건 많고, 빨리 해내야된다는 압박과 함께 내가 할 수 있는 범위를 넘어선다는 느낌이 계속 들어서 스트레스가 엄청났었다. 지금 생각해보니 그때가 내가 부트캠프를 포기해야되나 진지하게 고민했던 순간 중 하나였다.
  결과물은 만족스럽게 나왔었는데, 별로 그때로 돌아가서 다시 팀프로젝트를 하고 싶진 않았다. 그래서 더 나는 그런 리더가 되고싶지 않다고 생각했다.
  근데 또 막상 그 팀을 보면 누가봐도 결과물이 엄청나니까 부럽기도 하고ㅠㅠ 그렇다고 그렇게까지 과하게 빡세게 하고싶진 않고...
  어쩌면 그냥 사람 성향, 리더 성향 차이일지도...? 흠 어려운 것 같다.

• 어쨌든, 시작이 있으면 끝이 있어서 다행이다ㅠ ㅋㅋ 지난 5주의 엄청엄청나게 빡센 배움의 시간도 이제 드디어 끝이 보인다. 초사이언처럼 보냈던 지난 5주... 나자신 기특하다 대단했다... 근데 회복.. 휴식.. 절실.. ㅋㅋㅋ 끝나고나면 이제 제대로 취업준비도 하고, 지금까지 했던거 정리도 하고, 최종 프로젝트 발전도 시키고, 지식적인 부분들 정리하면서 공부도 하고, 이력서랑 포폴도 정리하고... 할거 왜케 많은거야ㅠ
  할..할수있다...! 🤯😱🙌

• 사실 이제 내 프로젝트 제대로 해보고 싶기도 하다. ㅋㅋ 지난 5주는 잊었니...?ㅎㅎ...