9월 4주차 기록

급 추워진 날씨

배워가기

클라이언트와 서버를 개발할 때 고려사항

• 클라이언트

  • 환경이 매우 다양할 수 있다. React를 쓴다면 next, CRA, remix 또는 그 외의 환경.. 그 라이브러리(or 프레임워크)가 사용하는 내부 디펜던시도 각자 다르다
  • 따라서 그 다양한 환경을 고려해서 개발 환경을 세팅해야 한다.

• 서버

  • API의 경우에도 내부에서만 접근이 가능한 internal과 외부의 접근을 열어두는 external을 인지하고 개발해야한다. (인스턴스를 분리해야한다)
  • 이에따라 보안상의 절차를 거쳐야하는지 판단한다.

• cf) 서버의 확장 방식

  • scalable server: 확장 가능한 서버
  • server scale up: 서버 인스턴스의 ‘크기‘를 늘린다
  • server scale out: 서버 인스턴스의 ‘수’를 늘린다

텍스트 정규화 방식

자바스크립트에서 String.prototype.normalize()로 텍스트를 정규화할 수 있으며, 그 방식에는 NFC, NFD, NFKD,NFKC 등이 있다.

• NFC

  • (Normalization Form Composition, 정규형 정준 결합)

  • Windows의 기본

  • ex) 가나다라

  • NFD 방식보다 텍스트의 사이즈는 작아지게 된다.

  • 현대 한글과 옛 한글이 다른 방식으로 저장되므로 텍스트를 처리할 때 유의해야 한다.

  • NFC로 정규화를 거친 값은 같은 자음이라도 유니코드 번호가 다르다

  • ex) 스크린샷의 스에서 분리가 된 ㅅ과 그냥 ㅅ은 번호가 다름

    Copy

    const filename = “스ㅅ“;
    { char: “ᄉ”, code: 4361 },
    { char: “ᅳ”, code: 4467 },
    { char: “ㅅ”, code: 12613 },

• NFD

  • (Normalization Form DeComposition, 정규형 정준 분해)
  • MacOS의 기본
  • ex) ㄱㅏㄴㅏㄷㅏㄹㅏ
    • 현대 한글과 옛 한글을 동일한 방식으로 저장한다.
    • NFC 방식과 비교하여 텍스트의 크기가 커진다.

데이터의 온/오프라인 체크

데이터 온/오프라인 체크는 axios가 아닌 브라우저의 API로 할 수 있고, 그렇게 해야한다.

export const getOnLineStatus = () =>
  typeof navigator !== "undefined" && typeof navigator.onLine === "boolean"
    ? navigator.onLine
    : true;

위 로직을 이용하면 네트워크 요청을 보내기전에 분기 처리가 가능하다.

if (!getOnLineStatus()) {
  // 토스트 출력
} else {
  // 네트워크 요청
}

패키지 버전관리 방법

• semver
  • major.minor.patch 형식
  • 버그 수정은 patch, 기능 추가는 minor, 제거는 major을 올리는 방법이 있다.
  • 각 버전을 개발자가 수동으로 올린다.
  • 각 버전을 올리는 규칙을 공유해도 각 개발자가 판단하는 버전업의 기준이 다를 수 있다는 단점이 있다.
• headver
  • major.yyww.buildno 형식
  • semver의 문제점을 해결한다.
  • 개별 스프린트 단위를 표현할 수도 있다.
• calver
  • yyyy.mm.patch
  • 지원 정책과 버전을 이해하기 쉽게 일치시켜 고객이 지원 서비스를 받는 기간을 이해하기 쉽다.

Ref 패키지 버전은 어떻게 작성해야할까

inline 요소의 invisible margin

<img>와 같은 inline 태그들은 invisible margin이 있을 수도 있다. inline 요소는 text와 baseline을 맞추기 때문에, css상 잡히는 margin은 없지만 실제 요소의 크기보다 조금 큰 영역을 차지하는 것이다.

이를 간단히 없애려면 display: block을 주면 된다.

This is actually not that uncommon. It’s because the image is an inline elements so there is some space between the bottom of the image, which is placed on the base line of the text, and the bottom of the text line.

Ref https://stackoverflow.com/questions/1383048/html-css-weird-invisible-margin-below-pictures

User-Agent

갤럭시 폴드의 기본 크롬 브라우저 환경이 모바일로 잡히지 않아서 시작된 문제…

웹 서비스는 User-Agent HTTP 헤더 값을 통해 브라우저, OS, 사용자의 기기 정보 등을 얻을 수 있었다. 그러나 이 User-Agent string에는 많은 정보가 담겨 있어 개인정보 침해 문제가 있을 수 있어, 크롬에서는 Client Hints라는 것의 도입을 시도했다.

크롬의 User-Agent Client Hints의 가장 큰 이슈는 User-Agent string 프리징이다. UA 프리징 결과 기기명, OS의 정보, 브라우저의 버전이 불분명해졌다.

이에 대한 대응 방안으로, User-Agent string을 세분화해 Object 형식으로 나타낸 User-Agent Data를 사용할 수 있다.

navigator.userAgentData에 접근하면 brands(84 이전 버전에서는 uaList)과 mobile 속성이 있으며 getHighEntropyValues 메서드를 사용할 수 있다. navigator.userAgentData.getHighEntropyValues를 통해 비동기 방식으로 정보를 가져오면 기존 User-Agent string으로 얻은 정보와 동일한 정보를 얻을 수 있다.

Ref

• https://naver.github.io/egjs-agent/
• https://d2.naver.com/helloworld/6532276

replace()의 인자 사용하기

자바스크립트의 String.prototype.replace() 메서드의 매개변수가 string으로 지정되었을 때, 다음과 같은 특수 교체 패턴을 포함할 수 있다.

예를 들어보자.

const str = "+케이크+";
const regText = str.replace(/[.+{}()|[\]\\]/g, "\\$&");

new RegExp(str); // SyntaxError: Invalid regular expression: /+케이크+/: Nothing to repeat
new RegExp(regText); // /+케이크+/

+케이크+라는 문자열에서, replace()의 첫 번째 인자로 들어온 정규표현식 중 +라는 문자열이 매칭이 되었다. 이때 replace()의 두 번재 인자로 \\$&을 사용하여, 매치된 모든 + 문자열 앞에 \을 붙여 \+로 치환할 수 있다.

Ref https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/GlobalObjects/String/replace#매개변수가_string으로지정되었을_때

이것저것

• reflecting이란 코드가 구동 시(런타임) 자기 자신을 검사, 수정할 수 있는 능력을 말한다.
• XSS 공격이 서버로 가기전에 아래의 정규식으로 방어가 가능하다.
  • new RegExp(/<script>|<\/script>|<\\script>|alert\((.*?)\)/i).test(검증할문자열)
• 안드로이드 키보드 레이아웃이 웹뷰 화면의 레이아웃에 영향 안주도록 하고싶으면 안드로이드에서 해당 자바스크립트 인터페이스를 지원하도록 작업하면 가능하다.
  • window.JavaScriptInterface?.setSoftInputMode('pan')

기타

효율적인 테스트 코드 작성법

테스트는 중요하지만, TDD는 은탄환이 아닐 수 있다.

이미 잘 정의된 수학적 연산 등은 미리 테스트를 작성하고 기능을 만드는 것이 가능하지만, 대부분의 경우 우리는 발생할 수 있는 버그들을 미리 생각해내기 어렵다.

실제로 서비스를 라이브하거나, 원래 있던 가정이 깨져서 사용자의 예상치 못한 인풋이나 함수의 잘못된 사용이 발견되었을 때 테스트를 작성하여 문제를 해결한다.

테스트를 통해서 프로그래머의 의도를 파악할 수 있으며, 실제 해당 기능이 동작하는 방식과 미래에 동작할 방식을 이해하는 것이 좋다.

Ref https://www.youtube.com/watch?v=gs1qM1TF5zA

Preact Signal

얼마 전 트위터에서 Json Miller가 Preact에서 상태를 관리해주는 도구인 Preact Signal을 발표하면서 뜨거운 감자가 되었다.

그 소개를 보면 역시나 ‘빠르고’, ‘가상 DOM에 최적화’되었다는데…

Preact가 React의 그늘에서 벗어나 reactive한 방식으로 상태를 관리할 수 있게 되었다는데,

• React에서 벗어나 Vue를 따라했다?!
• 이러한 방식은 이미 jQuery 때부터 있었다?!

등으로 이야기가 되고 있는 듯하다.

아무튼, Preact Signal은 요렇게 사용한다고 하는데…

import { signal, computed } from "@preact/signals";

const count = signal(0);
const double = computed(() => count.value * 2);

function Counter() {
  return (
    <button onClick={() => count.value++}>
      {count} x 2 = {double}
    </button>
  );
}

computed가 붙은 걸 봐서, 기존의 상태로 변형된 값들을 reactive하게 가져올 수 있다는 점이 특징적인 것 같다. observable같기도 하고, rxjs같기도 하고 🙄 (모름)

기존 React에서 사용하는 useState같은 hook과는 달리 컴포넌트의 안팎에서 모두 사용할 수 있다고 한다. 이를 Preact 프레임워크에 포함된 상태관리라고 봐야할지, 완전히 별도의, PnP 스타일의 상태관리 도구로 봐야할지 모르겠다. (오, Signal을 그냥 React에서 사용할 수도 있는 것 같다!

부모 컴포넌트의 상태가 자식 컴포넌트들로 계속 전달되면서 발생하는 불필요한 리렌더링의 문제를 해결하고자 했다는데, Preact도 좋은지 한번 써봐야겠당.

rust의 대도약?

트위터의 또다른 뜨거운 감자… 메모리를 다루는 새로운 프로젝트는 c++/c 대신 러스트를 사용하는 것이 바람직하며, 보안성과 신뢰성을 위해 c++/c는 업계에서 deprecated 된 것으로 선언해야 한다!?

웹 프론트엔드 개발자도 rust를 배워야 하는 시대가 오는 건가?

• 여러 메이저 회사가 이미 러스트를 기반으로 코어를 만들고/오픈을 했고
• Deno 생태계의 성장률
• javascript로 동작하는 라이브러리의 성능적 한계 (V8이 아무리 외계인 집어넣는다고 해도, 이는 어려워 보입니다.)
• 웹 뿐만 아니라 다른 코어 영역으로의 접근도 러스트를 익히고 있으면 큰 도움이 되기 때문

이라고 한다!

트위터를 깔긴 깔았는데, 이런 것들을 볼 수 있는 거구나 😬
쓰잘데기 없는 계정들만 팔로우해놔서 별 소용이 없는 거였다.

Ref https://twitter.com/markrussinovich/status/1571995117233504257?s=20&t=FlDaK08x39IH8DL4UsE0FA

Vercel의 Preview 댓글 기능

을 발표했다고 한다~! 자동으로 지원해주는 Preview 배포 기능이 있는 줄도 몰랐다. 정말 fancy하군…

Ref https://vercel.com/blog/introducing-commenting-on-preview-deployments

마무리

날씨가 정말 많이 선선해졌다~ 짱조아

이번주는 별로 적을 내용이 없당. 그냥 적당히 평화로웠던 한 주~

팀원들이랑 좋은 곳에서 회식도 하고, 많은 이야기들을 나눌 수 있었던 시간들이었다.