2021년 5월에 내가 배운 것들

Ream은 서버렌더링 혹은 정적 웹사이트 앱을 Vue3로 만들 수 있도록 도움을 주는 프레임웤이다. 번들링은 웹펙이 아니라 Vite 기반이다. 이런 조합의 프레임웤은 물론 Nuxt가 준비하고 있는것으로 알고 있는데 그것이 나오기 전에는 거의 유일한 것일테다. 아직 불안정하고 기능도 많지 않지만 지켜볼만 하지 않나 싶다. 개발자가 매우 젊고 전업으로 오픈소스 일을 하는 분인데 이런 분들 후원을 해주고 싶다.(하지는 않았지만)

요약하면,

  • replaceAll 메소드 추가 : replace 메소드가 있었지만 매칭되는 문자 모두 교체하려면 정규식을 써야했다. ES12에서는 replaceAll 메소드로 가능해졌다.
  • 매우 유용한 할당연산자가 추가되었다. ??= &&= ||= 와우! ??=||= 의 차이를 잘 알고 사용해야 할듯하다.
  • 숫자가 매우 길 경우 _ 를 사용하여 가독성 높게 코드를 작성할 수 있다. let howMuch = 120_000_000;
  • Promise.any() 추가 : Promise.any([p1, p2, p3]); 이런식으로 전달받은 promise 목록중 어느 하나라도 리졸브가 이뤄지면 해당 리졸브가 리턴된다. 다수가 리졸브 될 경우 가장 처음 것을 리턴한다. 모두 리젝될 경우 AggregateError 에러를 던진다.

개발환경을 만드는 StackBlitz에서 Next.js와 Google과 협업해서 WebContainers를 공개했다. WebContainers는 WebAssembly를 일종의 OS를 브라우저 내에서 구현해서 Node.js를 바로 브라우저 안에서 실행할 수 있게 해준다. — via 아웃사이더의 기술뉴스

구글 검색엔진을 기준으로 개발를을 위한 SEO 가이드이다. 프론트엔드 개발자라면 더욱이 필독 해야하지 않을까 싶다. 간과하기 쉬운 몇 가지만 꼽아보면,

  • <title>, description <meta>, open graph <meta> 태그들은 모든 페이지들이 유니크하게 할것. 숫자를 활용하면 좋다. 예컨대 리스트 페이지 같은 경우 다이나믹하게 생성할 수 있다.
  • 이미지의 alt 속성에 SEO키워드를 활용하면 좋다..
  • <img>, <a>, <iframe> 의 파일 이름에도 SEO키워드를 활용하면 좋다.
  • 가능한 한 페이지 속도를 높여라.
  • 접근성을 좋게하라: 구글 검색엔진은 접근성도 고려 한다고 한다.
  • 낚시용 제목을 피하라. rebound rate 에 나쁜 영향을 줄것이고, 구글 검색엔진은 이 점을 고려한다.
  • 가독성을 높여라: 데이터는 테이블로 표현 한다던가 단락을 간결하게 한다던가.

정도로 정리를 해보았는데, 정독을 권한다.

이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기 해주세요. 그리고 저희 회사에서 프론트엔드를 포함한 개발자분들 채용중입니다.

Vue.js 관련 이야기들 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 https://bit.ly/3ax32Fn

Vue.js 관련 이야기들 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 https://bit.ly/3ax32Fn