[현대 소프티어] FE 뉴스스탠드 #5

FE 뉴스스탠드 3주차 #

참고
fe-newsstand #3

Done #

오늘은 3주차 마지막이지만 기획 리뷰와 세미나 시간으로 대부분 보내서 개발을 많이 하지 못했다. 주말동안 힘내서 기능 구현을 많이 해놔야겠다. 그런 의미로 오늘은 세미나와 코드리뷰에서 알게된 것들을 정리하겠다.

세미나 #1 바닐라 JS를 이용한 컴포넌트 방식 개발 #

컴포넌트란 #

재사용이 가능한 각각의 독립된 모듈로, 컴포넌트들을 조합하여 화면을 구성할 수 있다. 현 시점에서의 웹 어플리케이션은 컴포넌트 단위로 설계한다.

컴포넌트 방식 개발 #

1. 한번 만들면 필요시 조금씩 바꿔서 재사용이 가능하다.
2. 컴포넌트 기준으로 전체적인 구조 파악이 용이하다.
3. 코드 중복 및 다른 모듈과의 의존성을 낮춰준다.
4. 코드 수정시 해당 컴포넌트만 수정하기 때문에 유지 보수하기에 좋다.

바닐라 js 특징 #

• 컴포넌트별 state
• setState 호출 => 현재 state가 업데이트되고 render된다. 단, 렌더링 범위를 지정해야한다는 단점이 있다.
• state, props를 통해 객체 이용을 관리한다. => 순서 상관없이 원하는 key에 접근 가능하다.
• 컴포넌트 내부 함수는 화살표 함수로 구현한다.

화살표 함수 vs 일반 함수 #

• 화살표 함수와 일반 함수는 this 바인딩에 차이가 있다.

  화살표 함수: 상위 객체
  일반 함수: window 객체 (브라우저), global 객체(node.js)
  

• 최초 렌더링 시에만 실행

세미나 #2 웹페이지 이미지 최적화 #

이미지 최적화 기법 #

웹페이지 로딩 시간에는 js 파일과 이미지가 많은 영향을 끼친다. 따라서 티가 안나는 선에서 최대한 용량을 줄이면 속도 향상에 도움이 된다. 아래는 이미지 최적화 기법들이다.

Image compression #

압축률을 높여 이미지용량 줄이기

Resizing #

사용자화면 사이즈에 맞게 이미지 사이즈 변경

Image format #

용량이 작은 이미지 포맷으로 변경하기 webp 인터넷에서 이미지 로딩 시간 단축을 위해 google이 만든파일 포맷

Responsive image 반응형 이미지 #

pc는 4k를 쓸 일이 있지만 모바일은 없다. 따라서 이런 경우, media-query를 사용하여 반응형 이미지 사용하기!

Lazy Loading #

최대한 이미지 파일 늦게 불러오기 뷰포트 이내에 있거나 가까울때 이미지 불러오기 => 처음에 웹페이지 불러올 때 빠르게 띄울 수 있음

html => img 태그에 loading = "lazy"
js => intersectionObserver

Place holder #

레이아웃 시프트 이미지 로딩에 시간이 걸리면서 레이아웃이 이동되는 현상이다. 레이아웃 시프트는 placeholder 처리를 통해 해결할 수 있다.

Image sprite #

이미지 에셋들을 모아서 한번에 불러오기

해결 방법 #

1. next.js 사용: next.js는 위의 이미지 최적화 관련된 기능들을 다 제공.

2. nuxtImage

3. cloudinary (프론트보다는 백엔드에서 처리하는 기법)

마치며 #

코드 리뷰 회고 #

• 이벤트 핸들러는 무조건 분리하기
• classList.remove, classList.add 안하고 =으로 변경할 수도 있다. 단, 싹 다 바뀌기 때문에 주의.
• await은 blocking 되기 때문에 관련 없는 것들은 동작되게 위로 옮기기

store

상태 정의, 상태를 변경시켜주는 메소드가 있어야 한다.

• subscribe 메소드: store 객체를 구독한다. 메소드가 없으면 상위 객체로 찾는다. => prototype을 가지고 동작하도록…