22. 3월 스크랩

1. 22년 주목해야 할 CSS 기능들 (링크)

• Container Query
• :has()
• @when/@else
• accent-color
• CSS Color 함수들
• Cascade Layers
• Subgrid
• Scroll Timeline
• Nesting

2. 페어 프로그래밍 안티 패턴들 (링크)

네비게이터
오류들을 너무 빨리 체크하는 것
드라이버가 문법에러와 오타를 수정 할 시간을 주기
너무 작은 에러를 계속 지적하는건 흐름을 끊고, 페어가 타인의 시선을 의식하게 됨
당신의 임무는 틀린 단어를 바로 지적하는게 아니라 큰 그림을 고려하는 것
로우레벨한 지시 하기
운전자에게 제안할 사항이 있으면, 운전자가 이해할 수 있는 가장 높은 수준의 추상화로 전달할 것
코드를 불러주는 것 같다면(심하면 각 키입력까지), 잠깐 멈추고 더 상위 레벨에서 얘기할 수 있는지 볼 것
그게 실패하면 아이디어 스케치를 위해 잠시 drive 해달라고 요청할 것
자신의 키보드를 사용하지 않는 것
모든 페어링 세션에 자신의 키보드 가져와서 시작 전에 꼽기
이러면 서로 역할 변경이 쉽고, 말 대신 보여주는게 가능
자기 마우스가 있는 것도 좋지만, 필수는 아님

드라이버
너무 빨리 드라이빙 하는 것
에디터에 아주 능숙한 경우, 숙련된 네비게이터 조차 따라가기 힘들만큼 빨라지기 쉬움
페어가 따라오고 있다는 확신이 없다면, 당신의 최고 속도로 코드를 조작하지 말 것
하는 일을 입으로 얘기하면서 하면 좋음
체크아웃된 네비게이터를 허용하는 것
너무 빨리 하거나, 이해하지 못하는 일을 하면 내비게이터의 주의를 잃기 쉬움
페어의 주의가 흐트러지고 있다면 멈추고 동기화 할 것
나쁜 질문 : "이거 이해하는거 맞죠?"
좋은 질문 : "어떤 부분이 팔로잉하기 어렵나요?"
페어링은 지속적인 쌍방 커뮤니케이션이 이뤄져야 함. 당신이나 당신의 네비게이터가 조용하다면, 멈추고 체크인하게 만들기
동등하지 않은 스크린 접근
모니터가 두 사람 사이에 있게 하고, 둘 다 똑같이 보이는지 확인할 것(폰트를 키우는 것도 고려)
한 사람이 옆으로 치우치면, 잠재의식 속 불평등 계층이 만들어짐
페어는 하나의 단위임. 둘 중 누구도 더 중요하지 않음
휴식하지 않는 것
페어링은 소모하는 것. 일반적인 프로그래밍 보다 훨씬 더
적절한 휴식을 취하는 좋은 방법은 뽀모도로 테크닉을 사용하는 것
시작하기 전에 선호하는 작업/휴식의 길이에 대해 동의해둘 것
경청하지 않고 듣기
듣는 것과 타이핑을 동시에 하는 것은 어려움
네비게이터가 제안을 할 때는, 키보드에서 손을 뗄 것. 더 좋은 건 몸을 돌려서 아이 컨택 을 할 것

둘 다 에게
비생산적인 산만함을 허용하는 것
페어링 시작하기 전에 모든 알림을 끌 것(컴퓨터와 폰 모두)
세션 동안에는 어떤 알림/문자 메시지도 받으면 안됨. 혹시 놓쳐서 받게 되면, 사과하고 그 다음에는 안 울리게 할 것
다른 모니터에 이메일 열어두기 않기
(페어링 안할 때도 이렇게 해야함. 생산성을 증대시키는 가장 빠른 방법은 인터럽트를 줄이는 것)
역할을 바꾸지 않는 것
드라이빙과 네비게이션은은 서로 다른 이유로 소모됨
역할을 바꾸면 뇌의 피곤한 부분을 쉬게 하고, 쉬던 부분을 활성화 할 수 있음
드라이버를 교체하는 것은 페어링 세션에 활력을 불어넣을 수 있는 좋은 방법. 전환해야할 때 마다 알려주도록 타이머 설정해 두기
기술이라는 것을 잊어버리는 것
페어프로그래밍은 배워야 하는 "기술" 임
처음엔 잘 하기 힘들지만, 꾸준히 연습하면 향상 될 것
어려운 첫 경험후에 포기하지 말기. 숙련된 개발자라고 좋은 파트너일거라고 단정하지 말기. 연습없이 잘 되기를 기대하지 말기
각 세션후에 페어와 함께 피드백하고 반영하기. 어떻게 하면 더 잘할 수 있었을까 ?

3. React 사이트를 SEO 친화적으로 만들기 (링크)

구글의 페이지 처리 프로세스 소개 및 React의 SEO 이슈들과 대처 방안
SSR / SSG 적용은 필수 : 최초 렌더링 빠르게 & 검색 크롤러의 렌더링에 의존하지 않기
HTTP 상태코드 제대로 사용할 것
Hashed URL은 피하기
링크는 꼭 < a href >로 (div 나 button 말고)
주요 HTML의 Lazy Loading 피하기
기본 요소들은 다 챙길 것
Canonicalization
Structured data
XML sitemaps
Mobile-first
Website structure
HTTPS
Title tags
Semantic HTML

4. 로컬 개발환경에서 HTTPS 이용하기 (링크)

• 왜 로컬에서 HTTPS를 써야 할까
  • 프로덕션 환경과 최대한 비슷하게
  • 강력한 보안 정책 적용 - Content Security Policy(CSP)
  • 서비스 워커, Secure/Prefixed 쿠키 등 특정 브라우저 기능 이용
  • localhost 대신 특정 호스트명 이용
• 로컬에서 HTTPS 사용하기
  • Self-Signed Certificate 생성하기
    → 가장 좋은 도구는 OpenSSL 이지만, 간단한 mkcert 만으로도 충분
    → mkcert -install 로 로컬 CA 설치하고 mkcert localhost 로 키 생성
  • Node.js 로 localhost 키 이용해서 HTTPS 서버 만들기

5. 코드리뷰 관련해서 많이 받는 질문에 대한 답변 (링크)

"코드 리뷰 좋은지 알겠는데, 시간이 없다. 리뷰 말고도 할 일이 많다."

코드리뷰 강의를 하는 필자가 가장 많이 받는 위 질문에 대한 답변 정리
코드 리뷰에 최소의 시간이 소요되도록 저자(PR 작성자)가 노력하자
매일 아침 10분 정도 스탠드업 미팅을 하듯 오전 30분, 점심 식사후 30분 정도 정해진 리뷰 시간을 갖자
품질과 생산성 :
초반에 투자하면 후반에 발생하는 비용을 현저히 낮출수 있고, 향후 변경비용을 낮춰서 생산성 향상으로 이어짐
기타 :
시간이 부족하면 버그/장애등 치명적인 부분만이라도 시작해서 점차 확대해 나가자.
리뷰에 들이는 노력을 조직에서 성과로 인정하자
"지금 당장 우리가 행할 수 있는 성장을 위한 공유 활동, 품질 향상을 통해 생산성 향상을 위한 수단으로 코드리뷰를 수행했으면 한다."

6. Solito: React Native + Next.js Unified (링크)

• React Native 와 Next.js 를 같이 사용하여 크로스 플랫폼앱을 개발할 수 있도록 도와주는 라이브러리
• 여러 플랫폼간에 "네비게이션 코드"를 공유 가능하게 만들어 주는 작은 Wrapper 를 제공
• 패턴과 예제들 포함

7. shot-scraper-template : 웹 페이지 스크린샷을 저장하는 Github Repo 만들기 (링크)

특정 웹페이지의 스크린샷을 자동으로 찍어서 저장하는 GitHub Repo Template
문서화를 위해서 웹사이트의 변경된 내용을 저장하는 용도로 사용
Run workflow 버튼 누르면 스크린샷을 저장
한번에 여러 사이트 캡쳐하기, 레티나 해상도 모드, 캡쳐전 딜레이 지정, PDF로 저장하기 등 옵션

8. Safari 15.4에 추가된 새 Webkit 기능들 (링크)

HTML

• img Lazy로딩
• dialog, ::backdrop 지원

CSS

• :has()
• Cascade Layers
• contain
• 뷰포트 : svw,lvh,dvmin 같은 *vw, *vh, *vi, *vb, *vmin, *vmax 지원
• :focus-visible
• accent-color
• calc() : sin, cos, tan, e, pi, exp, log, atan, acos, asin, atan2

Typography

• font-palette, @font-palette-values
• text-decoration-skip-ink
• ic 유닛 추가 (CJK에 유용)

Web APIs

• BroadcastChannel
• Web Locks API
• windows.scroll()/scrollTo()/scrollBy() 에서 CSS scroll-behavior 속성 지원

JavaScript

• findLast(), findLastIndex()
• at()
• Obejct.hasOwn()

Internationalization

• Intl Enumeration API
• Intl.Locale V2
• Intl.DisplayNames V2
• Intl.NumberFormat V3

Web Apps

• Web App Manifest 홈스크킨에 추가할때 만이 아니라 항상 가져오게 개선
  • 아이콘 지원
• ServiceWorker 에서 Navigation Preload 활성화 가능

Media

• WebRTC perfect negotiation 지원을 WebRTC 1.0 표준에 맞게
• video 태그에 requestVideoFrameCallback() 지원

Security

• Content Security Policy Level 3 지원 향상

WKWebView

• WKPreferences 로 사용자 속성 제어
• Fullscreen API 허용/불허 제어

Safari Web Extensions

• manifest_version 3 지원 및 관련 API 변경 적용

Web Inspector

• Styles 판넬에 Cascade Layer / @layer 지원
• align-content, align-items, align-self, justify-content, justify-items, justify-self 의 값 설정을 쉽게
• 새 속성 추가시 자동 완성 지원

9. 웹 개발자의 비밀무기들 (링크)

• Loom
• Markup.io
• Hoverify
• 크롬 확장들 : CSSPeeper, SVG Grabber, WAVE, CSS Magic, WhatFont,Full Page Screenshot Capture
• Waapalyzer
• PixelParallel
• 구글 Lighthouse

10. React v18 정식 릴리즈 (링크)

- Automatic Batching 도입
   : 기존에 setTimeout 등에서 state update가 batch로 되지 않던 것이 개선
- Transition 기능 추가
   : startTransition 등을 활용해 특정 부분이 우선적으로 반응하거나 처리되게끔 만들 수 있음
- Server-side Rendering에서 Suspense, React.lazy() 지원
- useId(), useDeferredValue() 등 Concurrent Mode를 위한 새로운 Hook 추가
- ReactDOM.render()가 deprecated 됨
   : ReactDOM.createRoot() 라는 새로운 API로 교체
- Strict Mode, Strict Effect
   : Offscreen API, Fast Refresh 관련해서 문제가 있는 코드를 알아보기 위해, develop 모드에서 Effect를 포함하여 두 번 렌더링 됨

11. Fluent Icons - 4000개의 오픈소스 아이콘 (링크)

- Microsoft가 만들어서 공개한 Fluent Icons를 보기 쉽게 만든 사이트
   → 원본은 Figma 를 열어서 확인했어야 함
- 검색 및 미리보기, 색상 변경 가능
- SVG/HTML Image 및 React/Vue Component로 복사 지원
- SVG/PNG/WebP 다운로드

12. 예제로 배우는 Deno (링크)

13. AWS Educate (링크)

14. Fluent Icons - 4000개의 오픈소스 아이콘 (링크)

• Microsoft가 만들어서 공개한 Fluent Icons를 보기 쉽게 만든 사이트
  → 원본은 Figma 를 열어서 확인했어야 함
• 검색 및 미리보기, 색상 변경 가능
• SVG/HTML Image 및 React/Vue Component로 복사 지원
• SVG/PNG/WebP 다운로드

15. React v18 정식 릴리즈 (링크)

React v18.0 정식 릴리즈

• Automatic Batching 도입
  : 기존에 setTimeout 등에서 state update가 batch로 되지 않던 것이 개선
• Transition 기능 추가
  : startTransition 등을 활용해 특정 부분이 우선적으로 반응하거나 처리되게끔 만들 수 있음
• SSR에서 Suspense, React.lazy() 지원
• useId(), useDeferredValue() 등 Concurrent Mode를 위한 새로운 Hook 추가
• ReactDom.render()가 deprecated 됨
  : ReactDOM.createRoot() 라는 새로운 API로 교체
• Strict Mode, Strict Effect
  : Offscreen API, Fast Refresh 관련해서 문제가 있는 코드를 알아보기 위해, develop 모드에서 Effect를 포함하여 두 번 렌더링 됨.

16. 로켓펀치(알리콘), '자율 근무 습득 지침서 - 자습지' 공개 (링크)

로켓펀치가 매년 공개하는 가이드북의 올해 주제는 ‘자율 근무 조직에 잘 적응하기 위한 온보딩 가이드북’입니다. 신규 입사자가 새로운 업무 환경에서 무리 없이 일할 수 있도록 365일간의 적응 과정을 상세하게 정리했습니다. 비상업적 목적으로 자유롭게 활용해 주시기 바라며, 가이드북에 대한 개선 의견은 댓글로 편하게 남겨 주세요.

• 입사 D-7, 입사 전 미리 준비해야 할 일을 정리했어요.
• 입사 D-DAY, 출근 시 자율 근무 환경에 당황하지 않도록 도와드려요.
• 입사 D+90, 수습 기간 동안 알아가게 될 기업 문화와 업무 절차예요.
• 입사 D+365, 일 년간의 업무를 회고해 봅니다.