22. 6월 스크랩

1. 대학생 때 알았더라면 좋았을 것들 (링크)

고려대학교 컴퓨터학과에서 진행한 특강 "대학생 때 알았더라면 좋았을 것들"의 발표 자료입니다. 저의 관점에서 '지금 대학생으로 돌아간다면 이런 걸 했었을텐데...'의 생각들을 모아 정리했습니다. 한참 고민이 많을 시기인 대학생 여러분들에게 도움이 되었으면 합니다.

1-2. 전산학 교육에서 가르쳐 주지 않는 것 (링크)

CS교육에서는 보통 빼고 넘어가는 가장 기본적인 도구 사용(쉘,에디터,VCS 등)을 가르쳐 주는 MIT CS&AI Lab의 수업자료 모음 [자료&수업 동영상]

• 쉘 도구와 스크립팅
• 에디터(Vim)
• 데이터 랭글링 - regex,sed,awk
• CLI환경 - 터미널,tmux,alias,Dotfiles,SSH
• Git
• 디버깅과 프로파일링
• 메타프로그래밍
• 보안과 암호화
• 그 외 : 키보드 리매핑,대몬,FUSE,백업,API,윈도우 관리자,VPN,마크다운,해머스푼,Booting+Live USB,Docker/Vagrant/VMs,Notebook,GitHub

2. Airbnb가 Javascript 빌드를 빠르게 만든 방법 (링크)

• Webpack 에서 Metro로 번들러를 변경
  • 간단한 UI변경은 80% 빨라졌고 (~1분에서 11초로)
  • 가장 느린 프로덕션 빌드도 55% 빨라짐 (30.5분에서 13.8분으로)
  • 추가로 웹페이지 성능도 1% 정도 빨라짐
• Metro는 React Native용 오픈소스 JavaScript 번들러
  • Airbnb는 이제 더이상 RN을 쓰지 않지만, 웹에도 잘 맞는다고 믿음
  • 번들링을 3단계로 구성 : Resolution, Transformation, Serialization
• Metro 와 Webpack 의 주요 차이점
  • 개발시에 요청할 때만 JS 번들 처리
  • 멀티 레이어 캐쉬
  • Serialization
  • RN용이므로 약간의 작업은 필요
    • Bundle Splitting
    • Tree-shaking

3. 렌더링 성능을 7배 빠르게 하는 2줄의 CSS (링크)

{

  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

- 원문의 댓글들의 내용이 알참

4. History API는 죽었습니다. Navigation API여 영원하라 (링크)

• https://developer.chrome.com/docs/web-platform/navigation-api/
• SPA에서 많이 사용하는 History API는 SPA가 많이 사용되기 전에 개발되어서 잘 어울리지 않음
• 이를 개선한 Navigation API는 현재 Draft 상태이지만, 크롬 102 버전부터 미리 적용
• 글로벌 navigation 객체에 navigate 리스너를 붙여서 동작
• transitionWhile() 또는 preventDefault()로 인터셉트 가능

5. 더 나은 언어 선택창 만들기 (링크)

• 사용자를 Nudge 하되, 자동 리디렉션은 피하기
• 위치/언어/통화 설정을 디커플링 하기
• 사용자 설정 가능하게 하기 (통화, 타임존, 측정단위)
• 논모달 창 사용 고려하기
• 국가/언어를 섹션/탭/아코디언 등으로 조직화
• 자동완성 추천으로 입력창 제공
• 국가에는 국기를 사용하고, 언어에는 사용하지 말 것
• 국기 아이콘 대신 지구본 및 번역 아이콘 사용 고려
• 언어 이름을 로컬화
• 언어 단축명이나 이니셜 피하기
• 접근성을 위해서 선택창을 헤더와 푸터에 다 넣고 키보드로 변경 가능하게 하기

6. UI 컴포넌트 Encyclopedia (링크)

• Storybook이 Airbnb, Microsoft, GitHub 등이 사용하는 UI 컴포넌트 5132개를 정리
  → 공개 Storybook들을 한데 모은 것
• 실시간 데모 와 함께 컴포넌트를 브라우징 & 검색 가능
• 소스 보기 및 쉬운 재사용 지원

7. 리액트 오픈소스 어워드 2022 (링크)

올해의 혁신

• jotai (atom 기반 상태관리 라이브러리)
• remix (next.js와 비슷한 풀스택 프레임워크)
• refine (빠른 프로토타이핑 가능한 기본 세팅 프레임워크)
• wagmi (이더리움 연동 hooks)
• preview.js (파일단위 컴퍼넌트 visual studio extension 통해 렌더링)

가장 흥미로운 기술 사용

• Remotion (비디오 제작 및 렌더링)
• React Flow (노드 연결 에디터)
• react-native-tvos (애플, 안드로이드 티비 지원하는 리액트 네이티브)
• React Unity WebGL (유니티 임베딩/인터랙션 지원)
• Jest Preview (브라우저에서 테스트 결과 바로 확인)
• Web3 React (웹3 지원)

올해의 재미있는 사이드 프로젝트

• Cuberun (react-three-fiber로 만든 3d 장애물 회피 게임)
• Tetromino (React, Redux and Tailwind로 만든 테트리스)
• Corona Game (react-three-fiber로 만든 코로나 때려잡는 3D 게임)
• Heart Switch (❤️ 하트 모양 토글 컴퍼넌트)
• LBA2 Remake (Typescript, Three.js and React로 게임 A little big adventure 리메이크)

커뮤니티에 대한 가장 영향력 있는 기여

• ReactJSGirls (여성 중심 리액트 개발자 밋업 트위터)
• React Newsletter (리액트 뉴스레터)
• React Native Radio (팟캐스트)
• Poimandres (React Spring, React Three Fiber 생태계 유지보수 개발자 집단)
• Reactiflux (디스코드)

생산성 부스터

• Mantine (라이브러리 모음 레포)
• React Use (훅 모음 레포) - https://github.com/streamich/react-use
• Superplate (각 프레임워크 선택해 초기 세팅 하는 보일러플레이트)
• React Uploady (파일 업로드 라이브러리)
• React Virtual (엄청 많은 리스트 스크롤 최적화 라이브러리) - https://tanstack.com/virtual/v3

8. 세상에서 가장 만족스러운 체크박스 (링크)

• 애플 디자인 어워드를 수상한 "(Not Boring) Habits"가 자신의 체크박스를 디자인한 과정을 설명
• 이 앱의 목표는 습관을 만들기 위해 뭔가를 하고 '체크박스를 누르는 행위'후에 보상 받는 것을 강조하는 것이기에 체크박스 디자인이 정말 중요
• 게임 느낌을 주기 위해 인터랙션 적용, 3D모델, 애니메이션, 소리, 햅틱등을 정교하게 디자인

9. 개발자의 학습과 성장 (링크)

• 우리가 자주하는 고민에 대한 답들
  • 잘하는 개발자란게 뭘까?
  • 어떤걸 공부해야 할까?
  • 내가 공부한 것을 어떻게 활용하지?
  • 내가 성장하긴 한걸까?
  • 일정 계산을 어떻게 하지?
• 전략적 학습
• 패턴 학습
• 산출물에 대해