크리스마스에 영화 뭐 보지? 1차 회고

➡️ Github로 이동
➡️ 서비스로 이동

순수 자바스크립트로 되어 있던 프로젝트를 리액트로 혼자 마이그레이션하고 있다. 이전에 작업할 때 모듈화했다면 조금만 고쳐도 됐을 텐데, 6개월 전의 나는 코드를 줄줄이 늘어놓고 돌아간다는 것에 의미를 두며 작업했기 때문에 큰 문제가 되지 않는다고 생각했다. 지금 코드의 상태가 아주 기가 막히다. js 파일 하나에 400줄이 넘는 것도 있다. 엄청 무거운 서비스였다면 그럴 수 있지만, 내가 만든 건 단순히 MBTI 테스트하는 화면 하나였을 뿐이다.

댓글을 관리하는 파일이다. 452번째 줄이 마지막이다.

for문 넣어서 마구잡이로 돌린 것도 많다. 효율성은 없는 코드다.

순수 자바스크립트로 했을 때 느꼈던 것

1. font-face 최적화
   • 첫 화면이 뜰 때까지 하얀 화면이 보이는 시간이 체감상 1초가 될 정도로 상당히 길었다. font를 외부에서 import해서 사용할 때 딜레이가 있었다. 최적화를 위해 font-face unicode-range를 설정하여 현대에는 잘 사용하지 않는 "핧, 헗 빯" 같이 생긴 (키보드로 입력할 수도 없음) 것들은 제외하였다. 현재는 0.2초 정도로 짧다.
2. 파일 분리
   • 분리해야 하는 기준을 잘 몰라서 화면마다 나누었다. 모듈화를 했다면 더 세세하게 할 수 있었을 것이다.
   • 코드가 너무 길어져서 어떤 일을 하는지 빠르게 파악하기 어려웠다.
3. e.target.value는 string입니다.
   • 값은 숫자인데 가져올 때는 문자로 되었다. 이것을 깨닫기까지 5시간이 걸렸다.
     오랜 시간이 걸린 이유
     • 코드가 길어서 값이 나오기까지 과정을 이해하기 어려웠다.
     • 타입이 적혀있지 않아서 어떤 값을 갖고 있는지 내가 추론해야 했다. (난 컴퓨터가 아니다👾)
   • 이것을 계기로 타입스크립트를 시작하게 되었다. 배우는 것이 간절했다. 지금은 타입스크립트 없이 코드를 작성하는 것은 스스로 에러를 만드는 일이라고 생각한다.

@font-face {
  font-family: "SBAggroM";
  src: local("SB 어그로 M"), local("SB 어그로OTF M"), url("https://cdn .../SBAggroM.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
  unicode-range: U+0020-007E, U+0030-0039, U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

unicode-range 찾는 것도 나름 어려웠다. 여기에는 영어+한글+숫자가 포함되어 있다.

실명 가리기

    // 생성된 인덱스 버튼들이 몇 페이지인지 인식한 뒤 currentPage 변수에 저장
    indexBtns.forEach((idxbtn) => {
        idxbtn.addEventListener("click", (e) => {
            currentPage = Number(e.target.value); 
        });
    });

Number로 바꾼 뒤에는 잘 동작하였다.

리액트에서 적용하면?

1. font-face 최적화
   • 내가 따로 할 게 없다. 지금 3개 가져와서 쓰고 있는데 딜레이가 없다. 리액트 아주 좋다.
2. 파일 분리
   • 컴포넌트를 만들어 분리하고 있다.
   • 컴포넌트를 만드는 기준
     • 사이트 내에서 UI가 유사한 것이 2번 이상 사용될 때
     • 코드가 길 때 (예: 카카오 공유 버튼)
     • 한 번 사용된다고 해도 나중에 다시 사용될 여지가 있을 때 (예: 모달)
3. 타입스크립트 사용
   • types.ts를 만들었다. 하나의 타입이 2번 이상 사용되거나, 함수의 property가 4개 이상일 때는 object로 만들어 import하여 사용하고 있다.

프로젝트가 끝나면 효율성 테스트를 해볼 예정이다.

혼자만의 회고

2022.06.03 ~ 진행중

처음에는 하루에 한 페이지를 만들었는데, 지금은 마지막 페이지에 많은 시간을 쏟고 있다. 한 5일이면 다 할 줄 알았더니 벌써 일주일이 되었다.

Licked

• 추억 회상
  • 힘들어했던 부분이 다시 떠오른다. 그때보단 개발 실력이 조금 낫다는 생각이 든다.
  • 웃긴 건 그때 했던 디자인적인 실수를 똑같이 하고, 나중에 생각난다는 것이다. "제가 말씀드렸던 거는 ~"하고 알려주셨던 디자이너의 목소리가 들린다.
• 리팩토링할 기회
  • 취업을 했다면 내가 이걸 다시 건들 생각을 했을까? 아마 그냥 뒀을 것이다. 내가 나의 것을 손볼 수 있는 시간이 있다니 아주 좋다. (사실 그냥 취업돼서 안 건들면 좋겠다 😊)
• 다시 배포해도 괜찮겠다는 마음
  • 디자인이 정말 예뻐서 그냥 두기엔 아깝다. 나중에 다시 사람들에게 보여줘야겠다.
    • 헤로쿠로 배포되어 있어서 1분 안에 10번 이상 호출하면 갑자기 400 에러가 뜬다. 사용자가 많아지면 서버 위치를 옮겨야 한다. (작년 겨울에 배포했을 때는 AWS로 했다. 돈이 계속 나가서 사용 중지.)
  • 식지 않은 MBTI의 열기
    • 어제도 MBTI 테스트 사이트를 2개나 공유받았다.
    • MBTI 테스트를 만드는 회사도 있더라. 유저가 370만 명이라던데.
    • 질문지와 답변만 조금 바꿔서 하면 더 인기가 많아지지 않을까?
    • (TMI) 나는 이 주제를 좋아해서 한 게 아니라 사람들에게 관심받으려고 한 것이다. 개발하면 좀 더 관심이 생길 줄 알았는데 여전히 관심이 없다.
• 개인 프로젝트의 장점
  • (TMI) 원래 다른 한 명도 있었는데 이젠 프론트 개발자가 아니라 혼자 하게 되었다.
  • 모든 에러를 내가 다 만날 수 있다.
    • 몰랐던 부분을 잘 알 수 있다. 다른 사람이 해줬더라면 에러 천국을 만나지 못했을 것이다.

Learned

• 리액트
  • 라이브러리로 개발하면 컴포넌트화를 쉽게 할 수 있다.
    • 리액트를 배울 때부터 느꼈지만, 지금은 두 개의 프로젝트를 비교하면서 개발하고 있기에 뼈저리게 느끼고 있다.
  • 최적화를 정말 잘해준다.
    • font를 사용할 때 깨달았다. 내가 알지 못하는 순간에 나를 도와주고 있었다.
• 개발 지식
  • textarea, input 초기화하는 방법
    • 이건 따로 포스팅할 예정이다. 이거 때문에 어제 2시간은 쓴 거 같다.
  • forwardRef 사용하는 법
    • props로 받은 ref를 input에 적용하기 위해서는 forwardRef를 사용해야 한다. 이것도 포스팅할 예정이다.
• 크리스마스가 얼마 남지 않았다.
  • 어제 기준 200일 남았다. 이제 23년인가?

Lacked

• 개인 프로젝트
  • 속도 부진
    • 계속해서 팀플로 진행하다 혼자 하니까 너무 느리다. 빨리 만들고 배포하고 싶다.

Longed for

• 내일 안에 작은 에러는 모두 해결하고 다른 사람들에게 코드 리뷰 받기.
  • 이몬, 저의 순수 자바스크립트 레포를 봐줘서 정말 고마워요! "주석이 있어서 읽기 쉽다"는 말을 듣고 tsconfig.ts에 "removeComments": true,를 추가하고 주석을 적고 있어요.
• type과 interface 구분
  • 생각한 대로 나눠서 쓰려고 했으나 다른 사람이 "이렇게 쓰는 거 확실해?"라고 물으면 대답할 자신이 없어서 일단 type으로 통일시켜두었다. typescript 스터디 이후에 기준이 명확해지면 나눌 것이다.
• 블로그 포스팅
  • 코드 작성하느라 글을 쓸 시간이 너무 부족했다. 배웠던 것을 까먹지 않기 위해 꼭 포스팅할 것이다.

크리스마스까지 199일 남았다. 파이팅 🎅🎄