ziglog

Search by

Home
4월 1주차 기록

4월 1주차 기록

April 8, 2023 • ☕️☕️ 11 min read

weekly

신기한 바닷속 세상 🪸

배워가기

hyphens 알고 사용하기

hyphens CSS 속성은 텍스트가 여러 줄로 나뉘었을 때 단어를 어떻게 하이픈으로 이을지 결정하는 속성이다.

hyphens: 'none'
- 단어 안의 문자가 hyphenation opportunities를 명시적으로 정의해도 하이픈으로 단어가 연결되지 않는다.
hyphens: 'manual'
- 단어 안에 hyphenation opportunities(line-break 등)를 명시적으로 정의한 문자가 있는 경우에만 하이픈으로 연결한다.
hyphens: 'auto'
- 브라우저가 언어에 따라 자동으로 하이픈을 선택할 수 있도록 한다.

Ref hyphens property w3c

 라는 HTML entity가 있다.

이 엔티티는 소프트 하이픈(soft hyphen)이라고도 불리는데, 웹 문서 내에서 단어를 줄바꿈 할 수 있는 위치를 제안하는데 사용된다.

줄바꿈을 적절한 위치에서 수행하여 가독성을 높이는데 사용할 수 있다.

usePrevious로 이전 state값을 저장하기

Copy

import { useEffect, useRef } from "react";

const usePrevious = <T,>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

export default usePrevious;

next/dynamic

리소스를 지연 로드할 때 사용한다.

로딩 상태, ssr 여부등을 설정할 수 있다.

Copy

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() =>
  import("../components/hello").then((mod) => mod.Hello)
);

개밥먹기(dogfooding)

자사 제품을 사내에서 직원들이 일상적으로 사용해보고 문제점을 확인해보는 방법. 사용자 관점에서 제품의 품질과 UX를 확인할 수 있다.

영어로는 dogfooding , Eating your own dog food 라고도 한다.

Cookie 사용 위해 `credential` 뚫어주기

일반적으로 Cookie는 같은 도메인만 신뢰할 수 있기 때문에, 서버에서 프론트로 Cookie를 보낼 때 CORS 에러가 날 수 있다. 이런 상황에서 Cookie를 사용하기 위해서는, 프론트에서 credentials 값을 include로 설정해준다.

👩‍🏫 axios 에서는 withCredentials를 true로 설정하면 된다.

백엔드에서는, allowCredentials 를 true 로 설정해서 헤더의 Access-Control-Allow-Origin 과 Access-Control-Allow-Credentials 값을 설정해준다.

로컬에서는 서버 설정 없이도 Cookie를 사용할 수도 있다. vite나 webpack에서 proxy 서버를 사용하면 서버를 한대 띄워주는데, 그 서버로 모든 요청이 오고가기 때문에 CORS 에러가 나지 않는다.

Ref https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

__dirname vs process.cwd()

__dirname
- 절대경로
- 현재 실행하는 파일이 어디에 있는지
process.cwd()
- 절대경로
- node 명령어를 어디서 실행했는지

Copy

Project
├── main.js
└──lib
   └── script.js

파일 구조가 위와 같을 때, 각 실행결과는 다음과 같다.

Copy

// ./main.js
require("./lib/script.js");

console.log(__dirname); // C:\Project
console.log(process.cwd()); // C:\Project

Copy

// ./lib/script.js

console.log(__dirname); // C:\Project\lib
console.log(process.cwd()); // C:\Project

`isNaN` 대신…

isNaN은 NaN 객체인지 여부만을 검사하므로 숫자인지 여부는 확실히 알 수 없다.

그래서 query param에 페이지 등 숫자 parameter의 유효성을 체크할 때 isNaN으로 검사하면 Infinity 등을 넣은 케이스를 방지할 수 없다.

제대로 숫자만 검증하려면 필요에 따라 isFinite, isInteger 등을 사용한다.

ReactElement.type

ReactElement 은 React에서 JSX 또는 React.createElement로 생성된 element의 타입이다. type과 props 속성을 가지고 있다.

Copy

type Key = string | number

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

React 팩토리(함수, class)의 property에 값을 할당하면 ReactElement.type으로 그 값에 접근할 수 있다.

SSR은 서버가 필요하고 SSG는 서버가 필요없다? 🤔

SSG 페이지들은 한번 생성(generate)되고 CDN에 배포되면 항상 온라인이다. 즉 백엔드 서버나 데이터 소스가 항상 동작할 필요는 없다. 심지어 잠시 오프라인이 되더라도, 여전히 웹사이트를 사용할 수 있다.
SSR 페이지는 유저의 요청이 있을 때마다 서버를 찌르기 때문에 항상 최신 데이터를 보여줄 수 있다.

Ref https://prismic.io/blog/nextjs-ssr-vs-ssg

Next.js codemod

Next.js는 feature가 deprecate되었을 때 Next.js 코드베이스를 업그레이드시켜줄 수 있도록 codemod 변환을 제공한다.

codemod는 프로그램 단의 코드베이스 변환기로, 모든 파일을 수동으로 바꾸는 대신 많은 양의 코드를 자동으로 바꿔준다.

Copy

npx @next/codemod@latest <transform> <path>

transform - 변환할 패키지의 이름
path - 변환할 파링 또는 디렉토리
--dry - 코드는 수정되지 않는다.
--print 비교하여 바뀐 결과를 출력한다.

Ref https://nextjs.org/docs/advanced-features/codemods

console.debug()

console.debug()로 개발자도구의 debug 패널의 각 탭에 콘솔을 찍어준다.

이때 노출시킬 log level을 조절할 수 있다.

Copy

console.debug("디버그 메세지");
console.info("정보 메세지");
console.warn("경고 메세지");
console.error("에러 입니다.");

Ref

gitlab api 구분

projects
- https://docs.gitlab.com/ee/api/projects.html
- gitlab의 모든 project 목록을 불러온다
search
- https://docs.gitlab.com/ee/api/search.html
- gitlab의 repository 정보를 불러온다

react-query로 SSR hydrate 시 API 응답의 cache는 json을 사용한다?

React Query는 서버 측 렌더링(SSR)을 지원한다. SSR에서 React Query를 사용할 때, React Query는 데이터를 미리 가져와서 서버에서 초기 상태를 렌더링한다. 이렇게하면 클라이언트에서 JavaScript가 로드되기 전에 초기 데이터가 화면에 표시될 수 있다.
JSON 파일은 React Query SSR을 통해 생성되는 초기 데이터다. 이 파일은 서버 측에서 React Query로 쿼리를 수행하고, 결과 데이터를 JSON 형식으로 직렬화한 것이다. 이 파일은 클라이언트에 전달되어 초기 상태로 사용된다. 클라이언트에서는 이 데이터를 사용하여 React Query 캐시를 초기화하고, 서버에서 렌더링된 상태를 다시 생성한다.
따라서, React Query SSR을 사용하면 JSON 파일이 생성되는 것은 정상적인 동작이다. 이 파일은 초기 데이터를 제공하므로, 클라이언트에서 JavaScript가 로드되기 전에 화면에 렌더링할 수 있도록 도와준다.

Ref ChatGPT (ㅋㅋ)

이것저것

밀크런(milk run) - 여러 공급자를 순회하여 운송하는 방식. 각각의 공급업체를 돌면서 제품을 수거하고 구입처로 운송하는 형태. 한마디로 여러 판매자의 상품을 직접 픽업하여 물류센터까지 운송 및 입고하는 물류 시스템
텍스트 중간에 ellipsis를 넣는 방법 (ex: 파일명 끝은 줄이지만 확장자는 항상 남기기) (Ref)
ioredis - Node.js용 redis 클라이언트 https://www.npmjs.com/package//ioredis
MR 템플릿에 %{all_commits}를 추가하면 커밋 메시지가 알아서 쏙쏙! (Ref)

기타공유

나만의 ChatGPT 플러그인 만들기

요즘 많은 회사들에서 빠르게 생겨나고 있는 것 같다.

진짜 20년 전에 상상만 하던 세계가 현실로..? 😲

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

structuredClone()

자바스크립트에도 드디어 deepClone을 할 수 있는 메서드가 생겼다. 이름은 structuredClone()

structuredClone() 메서드는 값을 깊은 복사할 수 있다. 또한 변환 가능한 객체의 기존 값을 새로운 객체에 복제하지 않고 ‘전달’할 수 있다. ‘전달된’ 객체는 기존 객체와 분리되며, 새로운 객체로 생성된다. 이때 기존 객체에는 더 이상 접근할 수 없다. 예제로 자세히 살펴보자.

Copy

// 값이 있는 객체를 생성하고 순환 참조를 시킨다.
const original = { name: "MDN" };
original.itself = original;

// 해당 객체를 structuredClone한다.
const clone = structuredClone(original);

console.assert(clone !== original); // 두 객체는 같지 않다. (참조가 다르다.)
console.assert(clone.name === "MDN"); // 두 객체는 같은 값(`name`)을 가지고 있다.
console.assert(clone.itself === clone); // 순환 참조는 유지된다.