프리온보딩 4회차 1월

오늘은 포트폴리오 관리 주의사항과 여러 최적화 기법 및 스타트업 선택 기준에 대해서 수업을 들었습니다.

 

포트폴리오 관리 시 주의사항

포트폴리오에는 보통 깃허브에 있는 프로젝트 주소를 적어둡니다. 이때 흥미로운 프로젝트의 경우 회사에서 직접 빌드해 볼 수 있습니다. 그런데 환경이 달라지는 경우 빌드가 안 되거나 어떤 오류로 인해 빌드할 때 오류가 생기는 경우가 많습니다. 그렇기 때문에 포트폴리오를 작성하면서 프로젝트에 있는 default branch에서 빌드가 잘 되고 동작까지 하는지 한 번쯤은 확인이 필요합니다. 또한 패키지 매니저를 npm도 사용해 보고 yarn도 사용해보고 하는 경우가 있는데, 이때 lock 파일이 여러 개가 생성되는 경우가 있습니다. 하지만 lock 파일은 필요한 디펜던시들의 버전에 대한 정보가 적혀있기 때문에 하나만 있어야 합니다.

정리하면 포트폴리오에 프로젝트를 공유하는 경우 빌드가 성공적으로 동작하는지 확인이 필요하고, lock 파일이 하나만 존재하는지 확인이 필요합니다.

 

각종 최적화 기법

최적화 주의사항

최적화는 하면 좋지만 필요없는 부분에 하게 되면 시간이 낭비될 수 있습니다. 다른 말로 오버엔지니어링이라고 합니다. 그렇기 때문에 최적화를 하는 경우 필요한지 항상 확인이 필요합니다. 특히 최적화의 경우 개발자 입장에서 생각하기보다 실제 사용자들이 이용할 때 로딩이 느리다던지, 화면이 깜빡인다던지 등 불편함을 느끼는 곳인지 확인이 필요합니다.

또한 저번 시간에 배운 Lighthouse로 측정한 점수는 올라갔는데 화면이 느린 경우가 있습니다. 그렇기에 점수를 너무 맹신하지 말고 항상 실제로 테스트를 해보는 작업도 필요합니다.

 

이미지 최적화

강사님의 개인적인 경험이 담긴 말이므로 100%는 아니지만 상당히 신뢰할만한 정보입니다.

 

이미지를 사용하는 경우 사이즈는 2배 권장합니다. 왜냐하면 1배에서는 이미지를 확대하거나 기본 이미지가 깨질 수 있지만, 2배를 사용하는 경우 그럴 확률이 현저히 줄어든다고 합니다. 물론 React Native 같은 특이한 케이스의 경우 1배, 2배, 3배 이미지를 등록해 두면 알아서 화면 크기에 맞는 이미지를 사용하는 경우도 있습니다.

사진의 자체적인 크기(데이터의 크기)를 줄이는 방법은 여러 가지가 있습니다.

1. 화면에 보여지는 px 사이즈에 맞게 이미지의 사이즈를 조절해 사용하는 방법이 있습니다. 해당 방법은 디자이너에게 부탁해 새로운 이미지를 받거나 서버 스토리지에 다양한 사이즈의 이미지를 저장해 필요한 이미지를 불러오는 방법이 있습니다.
2. 포맷을 다르게 가져가는 방법도 있습니다. 아이콘이나 사이즈가 작은 경우 svg를 사용하고, 그 이상의 이미지는 png나 구글에서 제공하는 webp를 사용하는 방법이 있습니다. 상황에 따라 다르겠지만 webp를 사용한다면 png를 사용할 때 보다 2배 이상으로 크기가 작아지는 것을 알 수 있습니다.

+a) png를 사용하고 jpeg를 사용하지 않는 이유. png가 jpeg보다 크기가 큽니다. 하지만 jpeg의 경우 이미지의 화질이 저하되는 경우가 존재하기 때문에 jpeg보다는 png를 추천합니다.

 

폰트 최적화

woff, woff2 파일을 사용합니다.(잘 모르지만 폰트 파일을 직접 다운로드하여 사용하는 듯 합니다.)

웹폰트를 url을 통해 사용합니다.

@fontsource 라이브러리를 활용합니다.(★강사님 추천) 라이브러리의 경우 사용하지 않는 폰트는 사용하지 않아 모듈의 크기를 줄일 수 있습니다. 예를 들어, font-weight가 400,500만 사용하는 경우 나머지는 사용하지 않고 필요한 것만 import해 사용할 수 있습니다.

 

그 외 최적화

복잡한 내용의 단순화 즉, 추상화를 통해 최적화를 할 수 있습니다.

 

아하 모먼트 - 회사(스타트업 시리즈 투자 전 시드 기업) 선택 기준

회사 규모

작은 규모(~시리즈 A) 일 경우 대표님의 어떻게 생각을 하는지가 중요하고, 투자를 받기 위해서는 대표님의 학벌이 어느 정도 중요하다.

큰 규모(시리즈 B~) 일 경우 개발팀이 존재할 수 있기 때문에 개발 팀장의 마인드를 파악하는 게 중요하다.

한국에서는 공동 대표일 경우 되도록 피하는 것이 좋다.

 

개발팀

코드 리뷰를 하는지 한다면 어떻게 하는지를 파악하는 것이 중요하다.

팀 규모

리더(팀장, CTO)의 생각을 파악할 필요가 있다. 리더의 생각에 따라 팀의 운영 방식이 달라지기 때문에 본인의 상황에 따라 맞는 리더를 선택하는 것이 중요하다.

 

회사 전망

팀원의 상태는 발전을 하려는 마음이 있는지 아니면 그냥 돈만 받으면 끝이다라는 마음인지 확인할 필요가 있다.

회사가 어떤 방향으로 사업을 진행하려고 하는지도 중요한데, 신입이나 성장을 중요하게 여기는 경우 개발을 사업의 메인으로 진행하는 곳이 좋다.

성장 가능성의 경우는 회사가 성장을 하지 못한다면, 월급의 인상이 없어지고 그로 인해 일의 즐거움이 줄어들 수 있기 때문이다.

 

회사를 지원해야 되는 입장에서 여러 채용 공고를 봤지만, 내가 원하는 직무를 뽑는지만 봤었습니다. 하지만 강사님이 여러 참여자들이 물어보는 회사를 판단하는 것을 봤는데 회사의 규모와 위치, 실적 등을 찾아보는 것을 보고 내가 너무 쉽게 생각하고 지원하려고 했구나 하는 반성을 했습니다.

 

Q. 강사님의 컴포넌트를 분리할 때 기본 규칙이 있나요?

A. 이름을 나눴을 때 논리적으로 얼추 맞으면 분리한다.

 

기타

monorepo의 경우 npm은 비추, 미디어쿼리, css rendering block, js arrow function과 function의 작동 방식 차이, toLocaleString 지역 구분, js flatmap, 타입이 없는 경우 index.d.ts

아이콘 사이트 추천 1

https://f-lab.kr/blog/criteria-choosing-company-for-developers

https://1ilsang.dev/about (이력서)

f-lab 블로그 글 보기

학습 : 2024.01.11

느낀점 : 회사를 고르는 과정부터 생각도 못해본 고민까지 여러 고민을 들게 하는 강의였고, 2주 짧은 기간이지만 공부할 거리는 많이 생겼다.