September 24, 2022 • ☕️☕️ 9 min read
급 추워진 날씨
클라이언트
서버
cf) 서버의 확장 방식
자바스크립트에서 String.prototype.normalize()
로 텍스트를 정규화할 수 있으며, 그 방식에는 NFC, NFD, NFKD,NFKC 등이 있다.
NFC
(Normalization Form Composition, 정규형 정준 결합)
Windows의 기본
ex) 가나다라
NFD 방식보다 텍스트의 사이즈는 작아지게 된다.
현대 한글과 옛 한글이 다른 방식으로 저장되므로 텍스트를 처리할 때 유의해야 한다.
NFC로 정규화를 거친 값은 같은 자음이라도 유니코드 번호가 다르다
ex) 스크린샷의 스
에서 분리가 된 ㅅ
과 그냥 ㅅ
은 번호가 다름
const filename = “스ㅅ“;
{ char: “ᄉ”, code: 4361 },
{ char: “ᅳ”, code: 4467 },
{ char: “ㅅ”, code: 12613 },
NFD
데이터 온/오프라인 체크는 axios가 아닌 브라우저의 API로 할 수 있고, 그렇게 해야한다.
export const getOnLineStatus = () =>
typeof navigator !== "undefined" && typeof navigator.onLine === "boolean"
? navigator.onLine
: true;
위 로직을 이용하면 네트워크 요청을 보내기전에 분기 처리가 가능하다.
if (!getOnLineStatus()) {
// 토스트 출력
} else {
// 네트워크 요청
}
<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
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
replace()
의 인자 사용하기자바스크립트의 String.prototype.replace()
메서드의 매개변수가 string
으로 지정되었을 때, 다음과 같은 특수 교체 패턴을 포함할 수 있다.
패턴 | 설명 |
---|---|
$$ |
”$” 기호를 삽입한다. |
$& |
매치된 문자열을 삽입한다. |
`$“ | 매치된 문자열 앞쪽까지의 문자열을 삽입한다. |
$' |
매치된 문자열의 문자열을 삽입한다. |
$n |
n이 1이상 99이하의 정수라면, 첫번째 매개변수로 넘겨진 RegExp객체에서 소괄호로 묶인 n번째의 부분 표현식으로 매치된 문자열을 삽입한다. |
예를 들어보자.
const str = "+케이크+";
const regText = str.replace(/[.+{}()|[\]\\]/g, "\\$&");
new RegExp(str); // SyntaxError: Invalid regular expression: /+케이크+/: Nothing to repeat
new RegExp(regText); // /+케이크+/
+케이크+
라는 문자열에서, replace()
의 첫 번째 인자로 들어온 정규표현식 중 +
라는 문자열이 매칭이 되었다. 이때 replace()
의 두 번재 인자로 \\$&
을 사용하여, 매치된 모든 +
문자열 앞에 \
을 붙여 \+
로 치환할 수 있다.
new RegExp(/<script>|<\/script>|<\\script>|alert\((.*?)\)/i).test(검증할문자열)
window.JavaScriptInterface?.setSoftInputMode('pan')
테스트는 중요하지만, TDD는 은탄환이 아닐 수 있다.
이미 잘 정의된 수학적 연산 등은 미리 테스트를 작성하고 기능을 만드는 것이 가능하지만, 대부분의 경우 우리는 발생할 수 있는 버그들을 미리 생각해내기 어렵다.
실제로 서비스를 라이브하거나, 원래 있던 가정이 깨져서 사용자의 예상치 못한 인풋이나 함수의 잘못된 사용이 발견되었을 때 테스트를 작성하여 문제를 해결한다.
테스트를 통해서 프로그래머의 의도를 파악할 수 있으며, 실제 해당 기능이 동작하는 방식과 미래에 동작할 방식을 이해하는 것이 좋다.
Ref https://www.youtube.com/watch?v=gs1qM1TF5zA
얼마 전 트위터에서 Json Miller가 Preact에서 상태를 관리해주는 도구인 Preact Signal을 발표하면서 뜨거운 감자가 되었다.
그 소개를 보면 역시나 ‘빠르고’, ‘가상 DOM에 최적화’되었다는데…
Preact가 React의 그늘에서 벗어나 reactive한 방식으로 상태를 관리할 수 있게 되었다는데,
등으로 이야기가 되고 있는 듯하다.
아무튼, 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도 좋은지 한번 써봐야겠당.
트위터의 또다른 뜨거운 감자… 메모리를 다루는 새로운 프로젝트는 c++/c 대신 러스트를 사용하는 것이 바람직하며, 보안성과 신뢰성을 위해 c++/c는 업계에서 deprecated 된 것으로 선언해야 한다!?
웹 프론트엔드 개발자도 rust를 배워야 하는 시대가 오는 건가?
이라고 한다!
트위터를 깔긴 깔았는데, 이런 것들을 볼 수 있는 거구나 😬
쓰잘데기 없는 계정들만 팔로우해놔서 별 소용이 없는 거였다.
Ref https://twitter.com/markrussinovich/status/1571995117233504257?s=20&t=FlDaK08x39IH8DL4UsE0FA
을 발표했다고 한다~! 자동으로 지원해주는 Preview 배포 기능이 있는 줄도 몰랐다. 정말 fancy하군…
Ref https://vercel.com/blog/introducing-commenting-on-preview-deployments
날씨가 정말 많이 선선해졌다~ 짱조아
이번주는 별로 적을 내용이 없당. 그냥 적당히 평화로웠던 한 주~
팀원들이랑 좋은 곳에서 회식도 하고, 많은 이야기들을 나눌 수 있었던 시간들이었다.