회사에서 모노레포를 사용하면서 pnpm이라는 패키지 관리자를 사용하고 있어 공부 겸 좋은점들이 많아 개인프로젝트에도 적용해본 경험을 씁니다.

1. pnpm이란 무엇인가?

pnpm을 쉽게 설명 하자면 npm의 단점을 보완한 패키지 매니저다. npm을 사용하여 개발하다 보면 여러 프로젝트에서 중복되는 의존성이 node_modules마다 중복으로 설치됩니다. 해결방안으로 프로젝트에 설치하는것이 아니라 별도의 모듈 디렉토리에 1개에만 설치하고 사용할 때는 모듈 디렉에 링크하여 사용합니다. - pnpm 공식사이트

2. pnpm 설치

 npm install -g pnpm

 *의존성 문제가 걸릴경우
 sudo npm install -g pnpm

이렇게 전역에 설치를 하고 pnpm -v 를 하였을때 버전이 뜨게 된다면 제대로 설치가 된겁니다.

3. 기존 node_modules 삭제하기

npx npkill

ok to proceed? 라는 문구가 나오면 y를 눌러서 제거는 하시면 됩니다. 스페이스바를 누르면 삭제가 진행이되고 complete가 되면 q를 누르셔서 현재 상태에서 나오시면 됩니다.

이제껏 쌓여 있던 노드 모듈을 제거하는 과정입니다. 그리고 node_moducles를 삭제합니다.

4. package.json 수정

"scripts": {
  "preinstall": "npx only-allow pnpm", 
  ...
}

프로젝트에서 pnpm을 사용하는 경우, 다른 패키지 매니저를 사용하는 것을 막기 위해선 다음 preinstall 스크립트를 package.json에 추가합니다.

5. (모노레포일 경우)pnpm-workspace.yaml 만들기

packages:
  # include packages in subfolders (e.g. apps/ and packages/)
  - "apps/**"
  - 'packages/**'
  # if required, exclude some directories
  - '!**/test/**'

모노레포라면 workspace 파일을 작성한다. 추가적인 설명은 pnpm workspace 문서를 참고하시면 됩니다.

6. pnpm import (lock파일 import)

pnpm import

위 명령어로 yarn.lock 또는 package-lock.json으로 pnpm-lock.yaml 파일을 생성한다.

7. 프로젝트에 node_modules 삭제하기

rm ./package-lock.json

현재 프로젝트에 있던 node_moducles를 삭제합니다. 혹시 yarn을 사용하셨다면 yarn-lock.json등 다른 lock파일이 있으면 삭제해줍니다. 위의 npx npkill을 하여 node_moduels가 없다면 생략하셔도 됩니다.

8. 의존성 설치

pnpm install

마지막으로 의존성을 설치해주면 됩니다. 이렇게 하시면 node_modules가 생성됩니다.

이렇게 npm -> pnpm 마이그레이션 작업이 끝났습니다!

추가적으로 pnpm CLI 명령어는 pnpm 홈페이지에 잘 나와 있습니다. 많이 쓰는 명령어는 아래에 기재합니다.

pnpm add : 패키지를 설치한다. pnpm add -D : devDependencies에 추가한다. pnpm install: 프로젝트의 모든 디펜던시를 설치한다. pnpm remove : 패키지를 제거한다. pnpm prune: 사용되지 않는 패키지를 의존성에서 제거한다.

참고

https://pnpm.io/installation https://dev.to/andreychernykh/yarn-npm-to-pnpm-migration-guide-2n04 https://blog.joe-brothers.com/pnpm-migration-guide/

회사 프로젝트를 진행중에 서버 트래픽이 너무 뛰게되어 이유를 찾게되었고 그중 가장 큰 이유가 이미지를 로딩할때 가장 크게 뛴다는걸 알게되었다. 이미지 최적화를 하다가 next/image에 sharp 라이브러리를 알게된 일을 적으려 합니다.

우선 next/image를 사용하는 이유를 간략하게 설명하겠습니다. img 태그와 next/image의 성능차이등 상세한 내용은 이번 주제와 맞지 않기 때문에 넘어가겠습니다!

1. Next/Image 태그에서 제공하는 기능

• 장치의 크기에 맞춘 적절한 이미지 사이즈와 최신 이미지 포맷 지원
• Web Vitals의 CLS 발생을 방지
• 레이지 로드를 기본적으로 사용하고 있기 때문에, 뷰포트에 노출됐을 때 이미지 로드. 선택적으로 블러링 처리한 이미지를 먼저 노출하는 기능
• 이미지 리사이징. 외부 이미지도 리사이징 가능

조금 더 깊이 알고싶으신분은 아래 공식문서에 들어가보세요! Next/Image 공식 문서

2. Sharp vs Squoosh

Sharp와 Squoosh는 이미지 최적화 라이브러리이며 next/image에서 둘다 사용 가능하다. Sharp의 경우 따로 설치해서 사용가능하고, Squoosh는 설치하지 않아도 바로 사용 가능하다.

위의 사진과 같이 next/image에서는 sharp 사용을 추천하고 있다.

그럼에도 sharp를 바로 사용하지 못하는 이유는 저작권 문제 때문이라고 알고있다. (아니라면 피드백 주세요!)

동일한 이미지 기준으로 압축된 용량도 비슷하지만 Sharp를 사용했을때 응답 속도가 6배 정도가 빠르다.

각각 장단점

• Sharp 장점: Squoosh보다 6배 빠름 단점: 설치할떄 호환성 이슈가 있을수 있음

• Squoosh 장점: 설치 하지 않아도 바로 사용가능(호환성 이슈 x) 단점: Sharp보다 6배 느림

3. 왜 Sharp가 빠른것인가?

• 성능 최적화: sharp는 이미지 처리에 특화된 라이브러리로, 이미지를 효율적으로 처리하고 압축할 수 있습니다. squoosh보다 더 최적화된 이미지 처리를 제공할 수 있어서 응답 속도가 빨라집니다.

• 이미지 압축: sharp는 이미지 압축을 효율적으로 수행할 수 있는 기능을 제공합니다. 이미지 압축은 이미지 파일의 크기를 줄이고 전송 대역폭을 절약하는 데 도움을 줍니다. 더 작은 이미지 파일은 더 빠른 다운로드 시간을 제공하므로 응답 속도가 향상됩니다.

• 이미지 형식 변환: sharp는 이미지를 다양한 형식으로 변환할 수 있습니다. 웹 페이지에서 사용되는 이미지 형식에 맞게 이미지를 변환하면 불필요한 데이터를 제거하고 응답 속도를 향상시킬 수 있습니다.

  • 캐싱 및 프리렌더링: next/image와 함께 sharp를 사용하면 이미지 캐싱 및 프리렌더링과 같은 기능을 효과적으로 활용할 수 있습니다. 이로 인해 웹 페이지의 성능이 향상되고 응답 속도가 빨라집니다.

위의 글은 chat GPT한테 물은 결과입니다... 다른곳에서도 찾기가 힘들어 chat GPT의 도움을 받았습니다...ㅎ

느낀점

내장된 라이브러리 하나를 사용하는되도 이렇게 공부가 많이 필요한걸 느끼고 백엔드(서버)쪽을 생각하면서 코드를 짜야겠다는 생각이 더 들었다.

참고

https://oliveyoung.tech/blog/2023-06-09/nextjs-image-optimization/ https://nextjs.org/docs/app/building-your-application/deploying#nodejs-server https://bsnn.tistory.com/148

Server Error Error: Error serializing .products.headers returned from getServerSideProps in "/products". Reason: object ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types.

라는 오류가 떳다.... 이러한 에러의 이유를 찾을려고 구글링을 하던중 github에서 열띈 토론이 일어나는곳을 찾았다. https://github.com/TanStack/query/issues/1458

위의 글과 여러 블로그들을 참고 하여 원인은 2가지를 밝혀냈다.

1. 원인

1. getServerSideProps를 사용해 서버에서 클라이언트로 데이터를 props로 넘겨줄 때, props로 전달되는 값에 JSON으로 변환이 불가능한 것이 포함되어 있을 경우 해당 에러가 발생한다.

2. props로 넘겨주는 것은 AxiosResponse 타입 or Promise 객체가 아니라 해당 객체에서 data를 추출한 형태여야 한다.

2. 해결 방법

개인적으로는 2가지 방법이 떠올랐다.

1. Api 통신후 data를 추출한 형태를 return 해주자.
2. JSON 형태로 강제 형변환을 해주자

위의 2가지 방법을 가지고 코드를 짜보자

1. Api 통신후 data를 추출한 형태를 return 해주자.

// 상품 조회하기 예시 코드
// pages/api.ts
export const getProducts = async () => {
  const res = await axios.get("http://api.test.com/products");

  return res.data; // data객체를 리턴
};

개인적으로는 이 방식이 제일 깔끔해서 대부분 에러를 해당 방식으로 해결했던거 같다.

2. JSON형태로 강제 형변환을 해주자

// 상품 조회하기 예시 코드
// pages/api.ts
export const getProducts = async () => {
  const res = await axios.get("http://api.test.com/products");

  return res;
};

// pages/products
export async function getServerSideProps() {
  const products = await getProducts();
  return { 
    props: {
        products: products,
        dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
      }, 
  };
}

위에 queryClient를 선언한 부분은 생략했습니다. 이렇게 queryClient자체를 형변환해서 보내주는 방식이 있는거 같다. 개인적으로 위의 방식이 안통했을때 아래의 방식을 이용하는게 좋을꺼 같다. 항상 내가 원하는 방식으로 데이터를 받을수 없으니 알아두는게 좋을꺼 같다.

이렇게 NextJs에서 SSR + react-query 조합에서의 serializing 에러를 해결하는 방법에 대해 알아봤습니다.

감사합니다.

Reference

https://careerly.co.kr/qnas/1911 https://github.com/TanStack/query/issues/1458

개인적으로 장점은 크게 2가지라 생각하는데 1. 데이터 캐싱을 손쉽게 할수있다. (캐싱 방법이나 등은 설명하지 않겠습니다.) 2. 페이징처리, 지연 로딩 데이터와 같은 성능 최적화해주며 로딩 상태 등과 같은 기능을 제공을 해준다.

위와 같은 이유로 NextJs + react-query를 많이 사용하는거 같다.

NextJs를 사용하는 가장 큰 이유 중 하나는 SSR이라고 생각하는데 react-query는 아쉽게도 CSR로 데이터를 가져온다.

그래서 react-query의 데이터를 SSR에서 사용할수 있는 대표적인 *2가지 *방법을 알아볼려고한다.

1. Initial Data

개인적으로 가장 직관적인 방법이라고 생각한다. 프로젝트에 SSR이 적은경우 자주 사용하는거 같다.

// apis.ts
export const getProducts = () => axios.get('https://api.test.com/products');

// pages/product.tsx

const Product = (props) => {
  const { data } = useQuery('feeds', getProducts, { initialData: props.products });
  ...
}

export async function getServerSideProps() {
  const products = await getProducts();
  return { props: { products } };
}

위와 같은 방식으로 많이 쓰는거 같다. 간략하게 설명 하자면 getServerSideProps에서 getProducts를 통해 product 데이터를 받아오고 받아온 데이터를 useQuery가 선언되어있는곳에 props로 넘겨 initialData: product 이런식으로 적용을 하면 된다.

이해가 안된다면 아래 링크로 들어가서 추가적으로 보세요! https://tanstack.com/query/v4/docs/react/guides/initial-query-data

2. Hydration

프로젝트에 SSR이 많이 사용이 되면 적용하는거 같다. 개인적으로는 3개 이상의 SSR대응이 필요하면 적용하는거 같다. 한번 초기설정 적용후에는 편하게 사용이 가능하다.

// pages/_app.tsx
function MyApp({ Component, pageProps }) {
  const [client] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={client}>
       <Hydrate state={pageProps.dehydratedState}>
         <Component {...pageProps} />
       </Hydrate>
     </QueryClientProvider>
  );
};

// apis.ts
export const getProducts = () => axios.get('https://api.test.com/products');

// pages/product.tsx
const Product = (props) => {
  const { data } = useQuery('feeds', getProducts);
  ...
}

export async function getServerSideProps() {
  const queryClient = new QueryClient();
  const products = await queryClient.fetchQuery('feeds', getProducts);

  return {
     props: {
       dehydratedState: dehydrate(queryClient),
     },
   }
 }

_app.tsx에 SSR 설정을 한 번 해두면 다른 모든 페이지에서 위와 같은 방법으로 사용할 수 있다.

이해가 안된다면 아래 링크로 들어가서 추가적으로 보세요! https://tanstack.com/query/v4/docs/react/reference/hydration

이렇게 NextJs + react-query SSR에서 데이터 쓰기에 대해 알아봤다. 뭔가 SSR대응을 할려고 추가설정이 점점 늘어나는거 같은 기분이다.

다음 포스트는 hydration을 하면서 겪었던 serializing error에 대해 포스팅 예정입니다.

읽어주셔서 감사합니다.

Reference

https://tanstack.com/query/v4/docs/react/overview

Vue에서 React(NextJs)로 마이그레이션하는 과정에서 코드를 좀더 직관적이게 관리하면서 캐싱도 용이 하게 하고 싶다는 생각이 들었습니다. 그러한 이유로 react-query를 도입하게 되었습니다.

마이그레이션 한다고 너무 바빳네요...

🤚 들어가기에 앞서! 해당 코드는 가상의 코드입니다.

1. 이전 코드

import { useEffect, useState } from "react";
import { getItems } from "../../../api/ItemApi";
import Item from "../../../common/Item/Item";
import ItemListStyle from "./ItemListStyle";
import ItemType from "../../constants/Item"

const ItemList = () => {
  const [items, setItems] = useState<ItemType>([]);
  useEffect(() => {
    const fetchData = async () => {
      const res = await getItems("/items");
      setItems(res.data);
    };
    fetchData();
  }, []);
  return (
    <ItemListStyle>
      {items.map((item, i) => {
        return (
            <Item
              key={item.id}
              item={item}
              tabIndex={i}
            />
        );
      })}
    </ItemListStyle>
  );
};

export default ItemList;

useState, useEffect를 사용해서 구현하였습니다. 처음 한번만 데이터를 가져옵니다. 해당 코드에 적용한 것을 보겠습니다.

2. 변경 코드

import { useQuery } from "react-query";
import { getItems } from "../../../api/ItemApi";
import Item from "../../../common/Item/Item";
import ItemListStyle from "./ItemListStyle";

const ItemList = () => {
  const fetchData = async () => {
      const res = await getItems("/items");
      return(res.data);
  };

  const { data, isLoading, isError } = useQuery("item", fetchData);

  if (isLoading) {
    return <div>isLoding...</div>;
  }
  if (isError) {
    return <div>error</div>;
  }

  return (
    <ItemListStyle>
      {data.map((item, i) => {
        return (
            <Item
              key={item.id}
              item={item}
              tabIndex={i}
            />
        );
      })}
    </ItemListStyle>
  );
};

export default ItemList;

코드 자체가 깔끔하게 변경된것을 볼수 있습니다. 또한 useEffect,useState 등을 쓰지 않고도 상태 관리 및 fetch를 컨트롤 할수 있어서 좋았던거 같습니다.

해당 코드를 작성하면서 useEffect에 useQuery도 넣는 실수도 하고 refetch도 쓰고 많은 실수를 해보면서 많은 것을 배운거 같습니다...

참조

https://choar816.tistory.com/167 https://tanstack.com/query/latest/docs/react/overview

웹 개발을 하다가 문득 URL.URI의 차이점을 잘 모르는거 같아 정리한 글입니다.

1. URL,URI,URN의 차이점

우리가 웹 개발을 하다보면 URL이라는 단어를 정말 많이 듣는다. 하지만 URI,URN은 조금 생소할수 있다. 아래의 사진이 차이점을 잘 보여주는 사진이다.

위의 사진을 정리하자면

1. 자원의 식별자(URI)

2. 위치(URL)

3. 이름(URN)

2. URL,URI,URN의 정의

• URI: 통합 자원 식별자(Uniform Resource Identifier)는 인터넷에 있는 자원을 어디에 있는지 자원 자체를 식별하는 방법이다. 즉 URL,URN은 URI의 하위 개념이다.
• URL: 파일식별자(Uniform Resource Locator)는 네트워크 상에서 리소스에 대한 구체적인 위치를 서술한다.
• URN: 통합 자원 이름(Uniform Resource Name)은 urn:scheme 을 사용하는 URI를 위한 역사적인 이름이다.URN은 리소스를 여기저기로 옮기더라도 문제없이 동작한다.

3. URL,URI,URN 구분하기

하지만 설명만으로는 이해하기 힘들어 예시를 든 사진으로 다시 설명을 하자면

예를들어 다음과 같은 홈페이지 링크가 있다고 하자.

https://www.google.com/search?q=question

https://www.google.com/ 서버에 위치한 search 페이지는 query string인 page의 값에 따라 여러가지 화면 결과를 나타나게 된다.

이때 여기서 URL은 search의 위치를 표기한 https://www.google.com/search 까지이다.

하지만 사용자가 원하는 정보에 도달 하기위해서는 ?q=question라는 식별자(Identifier)가 필요한 것이다.

따라서 엄격히 구분하자면 위의 https://www.google.com/search?q=question 주소는 URI이고, 식별자가 빠진 https://www.google.com/search를 URL이라고 하는 것이다.

URL,URL을 조금 더 쉽게 표현하자면 아래의 두 주소는 같은 URL이고 다른 URI라고 할 수 있다.

https://www.google.com/search?q=question

https://www.google.com/search?q=question2

4. 느낀점

다른 사람들이 url,uri 주세요 했을때 아무렇지 않게 말했던 단어들도 한번 더 짚어 보고 사용하자..

참조

https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-URL-URI-%EC%B0%A8%EC%9D%B4

https://programming119.tistory.com/194

https://kotlinworld.com/96

성능 최적화를 하다가 preload, prefetch 등을 잘모르고 쓰는거 같아 이것을 알아보기로 했다.

1. Preload

현재 페이지에서 사용할 리소스(resource)를 우선순위를 높게하여 빠르게 가져오게 한다. 주로 웹 폰트, 비지니스적으로 필요한 이미지 같이 빠르게 로드(load)되어야하는 곳에서 사용한다.

<link rel="preload" href={'/static/images/myImage.png'} as="image" />

_* 주의사항 Preload는 전체적인 웹 성능을 빠르게 하기 위해 사용되는 속성이 아니다. 초기 로드 시 사용되지 않는 리소스에 PreLoad를 설정하지 않게 주의해야 한다. _

2. Prefetch

낮은 순위의 리소스에 주로 사용하고 유휴상태일 때 background에서 리소스를 fetch해온다. 그리고 브라우저에 캐시로 잡아두는 방식이다. 캐싱을 해두기 때문에 렌더링 과정에서 큰 리소스도 빠르게 렌더링 할 수 있다.

<link rel="prefetch" href="page-2.html">

_* 주의사항 Preload는 재귀적으로 동작하지 않습니다. 위의 코드와 같이 prefetch를 사용한다면, page-2.html이라는 HTML 리소스를 가져올 수 있지만 page-2.html에서 사용되는 CSS 등의 리소스들은 가져오지 않습니다. _

3. Preconnect

현재 페이지에서 외부 도메인의 리소스를 참고하는 것을 브라우저에게 알려 미리 외부 도메인과 연결을 설정할 수 있게 합니다

<link rel="preconnect" href="https://example.com">

_* 주의사항 preconnect는 외부 도메인과 연결을 구축하기 때문에 많은 CPU 시간을 차지할 수 있습니다. 10초 이내로 브라우저가 닫힌다면, 이전의 모든 연결 작업은 낭비되는 것이기 때문에 브라우저가 빨리 닫힐 수 있는 페이지에서는 preconnect를 사용하지 않는 것이 좋습니다. _

느낀점

생각보다 상황에 따른 사용방법이 많았다 최적화를 더욱 관심 가질수록 cs, js 의 기초의 중요성이 많이 필요한거같다.

참고자료

참고자료1

참고자료2

최근 바쁜 일상 때문에 블로그를 뒤로 했었는데 다시 힘을 내 작성을 시작하도록 하자!

node.js 버전을 관리 해야하는 일이 생겼다. 기존 프로젝트라 vue2로 이루어져 있어서 node 버전을 낮은것을 사용해야 했는데 마이그레이션을 진행함으로써 node 버전을 변경하며 적용을 시켜야 했었다.

전에는 nvm이라는 것을 사용했지만 최근 n이라는 툴을 사용하면 더 쉽게 관리 할수 있다고 하여 사용해 보았습니다.

저자는 맥을 사용하고 있습니다.

해당 툴을 사용할땐 sudo를 이용하여 관리자 권한모드로 사용하도록 합니다.

• n 설치 방법

  npm

  sudo npm install -g n

  yarn

  sudo yarn install -g n

  
  

• n의 이용법

  n -h

  
  

• 현재 설치된 node 버전 확인

  n 
   o node/14.16.1
     node/18.12.1

  여기서 방향키로 선택하게되면 해당 Node 버전으로 변경된다.

• 특정 버전 node 설치하기

  n latest
  n stable
  n lts

  latest는 가장 최신버전, stable은 가장 안정적인 방법, lst는 LTS 버전을 설치합니다.

  • 특정 버전 node 삭제하기

    n rm [버전]

후기

최근 회사들의 공고를 보면 node.js을 요구하는데 이유를 조금씩 느끼는 중이다. 공부할게 더 늘었다... ㅜㅜ

최근 리팩토링 도중 useEffect가 남발하는 코드를 보여 이걸 해결해 나가아가는 과정을 글로 적어 보려고 합니다.

1. 먼저 예제를 보자

아래 예제에서 item, filter 둘 중 하나의 데이터만 변경되더라도 ui가 업데이트 되어야 하기 때문에 visibleItems가 변경되어야 한다. 그래서 useEffect를 통해 ui 관련 state를 업데이트 시켰었다.

function ItemList({ item, filter }) {
  const [newItem, setNewItem] = useState('');
  const [visibleItems, setVisibleItems] = useState([]);

  useEffect(() => {
    setVisibleItems(getFilteredItems(item, filter));
  }, [item, filter]);

}

하지만 이렇게 되면 불필요한 리렌더링을 발생시킨다. 굳이 setVisibleItems을 useEffect에 호출 할 필요가 없습니다.

2. 리팩토링을 해보자

function ItemList({ item, filter }) {
  const [newItem, setNewItem] = useState('');

  const visibleItems = getFilteredItems(item, filter));
}

이렇게 리팩토링이 가능하다. 최신 데이터가 반영이 안되는게 아니라는 의문을 가질수도 있지만, 컴포넌트가 리렌더링 될 때마다 ui가 의존하고 있는 visibleItems가 업데이트 되기 때문에 ui는 최신 데이터 반영을 보장할 수 있습니다.

3. 렌더링 성능을 높여보자

만약 getFilteredItems가 비싼 연산이면 어떨까요?

import { useMemo,useState } from "react"

function ItemList({ item, filter }) {
  const [newItem, setNewItem] = useState('');

  const visibleItems = useMemo(()=> getFilteredItems(item, filter),[item,filter]);
}

이럴때는 useMemo를 사용해 연산한 값을 재사용하여 성능 최적화를 할수 있습니다.

후기

최근 성능 최적화에 대한 중요성을 느끼게 되었고 작은것 하나하나부터 습관을 들여야겠다.

Reference

https://ko.reactjs.org/docs/hooks-reference.html#usememo https://gusrb3164.github.io/web/2021/12/29/less-use-useeffect/

Typescript 로 클립보드 관련 오픈소스를 만들어 중 다른 프로젝트에 적용하다 마주한 에러였다... 정말 처음보는 에러들은 항상 주구장창 나오는거같다 ㅎㅎ

1. 원인 찾기

처음 의심을 해본곳은 적용시킨 프로젝트의 셋팅이었다.

그렇게 구글링을 해서 찾아본 결과 vsc 세팅 문제라고 하여 시도해 보았다...

1. vsc 맨밑에 버전을 찾아보고

2. 명령 팔레트를 열어서 ctrl + shift+ p (MAC = command + shift + p) 타입스크립트 버전 선택을 할수 있는곳으로가서

3. "작업 공간 버전 사용" 을 선택해보았다

과연... 첫번째 시도만에 해결될 일이 없었습니다... 그렇게 찾은 2번째 원인은 바로 babel설정 문제였습니다. Typescript로 만든 오픈 소스 였기에 js로 빌드 후 배포를 했어야 했는데... 이런 초보적인 실수를 했더군요..

2. 원인 해결

오픈소스의 package.json을 보기로 하였다.

"main": "src/index.ts"

이런식으로 오픈소스의 메인이 index.ts 로 잡혀있었다. 이렇게되면 오픈소스를 사용하는 사용자는 ts파일을 받게되어 ts 파싱? 에러를 마주하게 된다.

그러하여 나는 뭘해야하나 찾아보니 npm run build 에 이러한 코드를 추가하여 원인이 해결되었다.

"scripts": {
    "build": "rm -rf dist && tsc",
  }

위의 코드를 해석해 보면

기존 dist폴더를 삭제 (없으면 생성) 하고 tsc로 코드 컴파일 및 빌드를 한다 빌드한 파일들은 dist 폴더에 저장

그렇게 되면 이렇게 index.ts 가아닌 index.js 파일이 생성이 되어있다. 안에 내용을 보면 Typescript언어가 js로 컴파일 되어있는것을 볼수 있다.

이 작업을 진행한후

"main": "src/index.ts" -> "main": "dist/index.js" 

이런식으로 오픈소스의 메인을 바꾸면 다른 사용자들이 사용을 할때 에러가 뜨지 않는다.

3. 후기..

정말 언어만 안다고 해결되지 않는것들이 너무 많은거 같다.. 컴파일, 빌드 환경 이런쪽을 더 공부해 봐야 겠다.

Reference

https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided

https://www.faqcode4u.com/faq/244570/build-cannot-use-jsx-unless-the-jsx-flag-is-provided

https://docs.microsoft.com/ko-kr/visualstudio/javascript/compile-typescript-code-npm?view=vs-2022

설명에 들어가기전 중요 개념 2가지를 알아야 한다.

• Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
• Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정

1. useEffect 란?

useEffect 는 컴포넌트들이 render 와 paint 된 후 실행된다. 비동기적으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom 에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다.

• useEffect의 수명 주기

2. useLayoutEffect 란?

useLayoutEffect 는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다. 이 작업은 동기적으로 실행됩니다. paint 가 되기전에 실행되기 때문에 dom 을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.

• useLayoutEffect의 생명주기

3. 결론

useLayoutEffect 는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거칩니다. 따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다는 단점과 성능 저하가 우려되어, 기본적으로는 항상 useEffect 만을 사용하는 것을 권장드립니다.

구체적인 예시로는

• Data fetch
• Event Handler
• State reset

등의 작업은 useEffect를 사용하여야 하고

const Layout = () => {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    if (value === 0) {
      setValue(10 + Math.random() * 200);
    }
  }, [count]);

  return (
    <button onClick={() => setCount(0)}>
      count: {count}
    </button>
  );
};

위의 코드와 같이 초기 값과 paint된후의 값이 다를때 깜빡임이 일어날수 있어 이럴경우 useLayoutEffect를 사용하는게 바람직하다.

출처

• https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19

1. Debounce 란?

• 디바운싱(Debouncing)은 시간이 많이 걸리는 작업이 자주 실행되지 않도록 사용되는 프로그래밍 방법입니다.

• 디바운싱은 함수가 실행되기 전에 일정 시간을 대기하도록 합니다. 즉, 함수가 호출되는 속도를 제한합니다.
• 함수가 여러 번 호출되면, 일정 시간이 지난 후 마지막에 호출된 함수만 실행되고 이전의 호출된 함수는 무시됩니다.

2. 일반 Input Change

키업을 기준으로 코드를 짯습니다.

const Debounce = () => {

  //일반 input state
  const [normalValue, setNormalValue] = useState<string>('');

  //일반 input change
  const normalChange = (e: React.FormEvent<HTMLInputElement>) => {
    setNormalValue(e.currentTarget.value);
  };

  return (
    <>
      <Styled.Wrap>
        <Styled.InputWrap>
          <Styled.SearchInput
            placeholder="Nomal 입력"
            type="text"
            value={normalValue}
            onChange={normalChange}
          />
          <p> Normal: {normalValue}</p>
        </Styled.InputWrap>
      </Styled.Wrap>
    </>
  );
};

이런식으로 하게 되면 input 박스에 글자를 입력 할때마다 state에 값을 실시간으로 업데이트 하게 됩니다. 만약 api호출을 하게된다면 글자 하나하나 당 api를 호출하기 때문에 성능 저하의 원인이 될수 있습니다.

그래서 debounce 를 이용하여 일정 시간이 지난 후 마지막에 호출된 함수만 실행시키게 만들어 보았습니다.

3. debounce Input change

const Debounce = () => {

  //input state
  const [debounceValue, setDebounceValue] = useState<string>('');
  //debounce input state
  const [debounceResultValue, setDebounceResulValue] = useState<string>('');

  //input에 들어오는 글자
  const debounceChange = (e: React.FormEvent<HTMLInputElement>) => {
    setDebounceValue(e.currentTarget.value);
  };
  //debounce 처리된 input 값
  const debounceValueChange = (searchValue: string) => {
    setDebounceResulValue(searchValue);
  };

  //디바운스 시간 처리 및 함수 호출
  const debouncedSearchTerm = useDebounce(debounceValue, 500);

  //debounce 일정 시간 호출 되는지 확인
  function useDebounce(value: string, delay: number) {
    const [debouncedValue, setDebouncedValue] = useState(value);
    useEffect(() => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      return () => {
        clearTimeout(handler);
      };
    }, [value, delay]);

    return debouncedValue;
  }

  //debounce 실시간 처리
  useEffect(() => {
    if (debouncedSearchTerm) {
      debounceValueChange(debouncedSearchTerm);
    } else {
      setDebounceResulValue('');
    }
  }, [debouncedSearchTerm]);

  return (
    <>
      <Styled.Wrap>
        <Styled.InputWrap>
          <Styled.SearchInput
            placeholder="Debounce 입력"
            type="text"
            value={debounceValue}
            onChange={debounceChange}
          />
          <p>Debounce: {debounceResultValue}</p>
        </Styled.InputWrap>
      </Styled.Wrap>
    </>
  );
};

위에서 부터 코드를 설명 하겟습니다.

• debounceChange를 통해 input에 입력되는 값을 받게 됩니다.
• debounceValue의 값이 바뀌며 의존성이 걸린 debouncedSearchTerm가 실행이됩니다.
• debouncedSearchTerm이 실행되면 useDebounce 함수가 실행이되는데 여기서 input 값이랑 delay(시간)을 기준으로 일정 시간 동안 input값이 추가 적으로 입력되는지 보게됩니다.
• 만약 delay시간동안 추가적인 입력이 없게되면 useEffect를 통해 debounceResultValue 의 값이 바뀌면서 결과값이 노출되게 됩니다.

4. 차이점

사진으로 키업과 debounce의 차이점을 보여드리겠습니다

5. 느낀점

키업으로 항상 검색 같은 기능을 구현 하였는데 이렇게 debounce 같이 웹성능 최적화 작업을 알게되어 기뻣다. 오늘도 성장하는 개발자가 되어가도록 하자!!

출처

• https://developer-talk.tistory.com/263
• https://developer-talk.tistory.com/248
• https://flamingotiger.github.io/javascript/throttle-debounce/

1. 설치

 yarn add react-intersection-observer

또는

 npm i react-intersection-observer

2. 설명

Intersection Observer 예제

 let observer = new IntersectionObserver(callback, options);

Intersection Observer를 생성할 때는 3가지 옵션 설정이 가능하다. 옵션에는 root, rootMargin, threshold 이 있다.

• root : 이 요소를 기준으로 관찰하고자하는 요소의 가시성을 결정한다. (default: 브라우저 viewport)
• rootMargin: 단어의 뜻 그대로 root가 갖는 margin 값이다. threshold를 계산할 때 rootMargin 만큼 더 계산합니다. (default: 0)
• threshold : root를 기준으로 대상요소가 얼마만큼 보일때 콜백함수를 실행할지 0~1 사이의 값으로 나타낸다. 만약 요소가 25%씩 보일때마다 실행하고 싶다면 [0, 0.25, 0.5, 0.75, 1] 와 같이 배열로 작성하면 된다. (default: 1)

3. 구현

우선 Style 부분의 설명은 제외하고 설명을 하겠습니다.

전체코드

const InfiniteScroll = () => {
  const [itemList, setItemList] = useState<number[]>([
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
  ]);
  const [target, setTarget] = useState<HTMLElement | null | undefined>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const onIntersect: IntersectionObserverCallback = async (
    [entry],
    observer,
  ) => {
    if (entry.isIntersecting && !isLoading) {
      //관찰대상 끊기
      observer.unobserve(entry.target);
      //로딩컴포넌트 on
      setIsLoading(true);
      // 데이터를 가져오는 부분
      await new Promise((resolve) => setTimeout(resolve, 1000));
      let Items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      setItemList((itemLists) => itemLists.concat(Items));
      setIsLoading(false);
      //새로운 관찰대상 target
      observer.observe(entry.target);
    }
  };
 return (
    <>
      <ItemWrap>
        {itemList.map((item: number, index: number) => {
          return <Styled.Item>{index + 1}</Styled.Item>;
        })}
      </ItemWrap>
      {isLoading ? (
        <LoaderWrap>
          <ReactLoading type="spin" color="#A593E0" />
        </LoaderWrap>
      ) : (
        ''
      )}
      <div ref={setTarget} />
    </>
  );
};

  useEffect(() => {
    if (!target) return;

    let observer: IntersectionObserver;

    if (target) {
      observer = new IntersectionObserver(onIntersect, {
        threshold: 0.4,//margin이라고 생각하면 편합니다.
      });
      observer.observe(target);
    }

    return () => observer && observer.disconnect();
  }, [target]);

  return (
    <>
      <ItemWrap>
        //이미지 렌더링
        {itemList.map((item: number, index: number) => {
          return <Item>{index + 1}</Item>;
        })}
      </ItemWrap>
      //로딩시 보이는 컴포넌트
      {isLoading ? (
        <LoaderWrap>
          <ReactLoading type="spin" color="#A593E0" />
        </LoaderWrap>
      ) : (
        ''
      )}
      //감시하는곳
      <div ref={setTarget} />
    </>
  );
};

설명

• ref를 통해 대상요소를 observe 한다.
• useEffect를 통해 마지막 대상을 관찰하다 마지막 부분에 닿으면 통신을 통해 새로운 데이터 붙이기 + 기존 관찰 대상 -> 마지막 데이터로 관찰대상 변경

4. 느낀점

생각보다 개념이 어렵게 느껴져서 애먹은거 같은데 막상 구현하고 보니 이해가 되었던거 같다. 이런식으로 웹 성능과 관련된 것들을 더 공부해 나아 가야 겠다.

참조

• https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API
• https://velog.io/@jce1407/React-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-with-Intersection-Observer
• https://velog.io/@euneun/%EC%A1%B8%EC%97%85%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-k162xd7y

최근 로그인 관련 기능을 구현 하다가 Cookie와 Session에 차이점을 잘 모른다고 생각하여 공부하게 되었습니다.

쿠키, 세션, 웹 스토리지를 설명하기에 앞서 사용 이유를 쉽게 이해하기 위해 HTTP 프로토콜의 특징을 알아보자!

1. HTTP 프로토콜란?

-비연결지향(Connectionless)

HTTP는 클라이언트가 요청(Request)을 서버에 보내고, 서버는 클라이언트에게 적절한 응답(Response)을 주고 연결(Connection)을 끊는 특성이 있다.

-상태없음(Stateless)

커넥션을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.

HTTP는 이 두가지 특성을 보완하기 위해서 쿠키, 세션, 웹 스토리지를 사용하게 되었다.

2. 쿠키(Cookie)

쿠키는 클라이언트 로컬에 저장되는 키와 값 형태의 작은 파일로 이름,값,만료시간,경로정보등이 들어있습니다.

쿠키는 주로 세가지 목적을 위해 사용됩니다.

• 세션관리 : 서버에 저장해야할 로그인, 장바구니 등의 정보 관리
• 사용자 맞춤: 사용자가 선호하는 옵션이나 테마 등의 세팅
• 사용자 추적: 사용자의 행동을 기록하고 분석하는 용도

쿠키는 2가지로 나뉘는데 바로 세션 쿠키와 지속 쿠키로 나뉜다. 만료 날짜/시간을 지정하지 않으면, '메모리에 있는 동안' 계속 유효하다고 판단하도록 세션 쿠키에 저장되고, 만료 날짜/시간을 지정하면 프로세스가 종료되더라도(메모리에서 사라지더라도) 특정 만료날짜/시간까지 유효하므로 지속 쿠키에 저장된다. 쉽게말해

세션 쿠키는 브라우저 메모리에 저장되므로 브라우저가 종료되면 쿠키는 사라지게 된다. 지속 쿠키는 파일로 저장되므로 브라우저가 종료되어도 쿠키는 남아있게 된다.

쿠키 프로세스

• 브라우저에서 웹페이지 접속
• 클라이언트가 요청한 웹페이지를 받으면서 쿠키를 클라이언트의 로컬(하드)에 저장
• 클라이언트가 재요청시 웹페이지 요청과 함꼐 쿠키값도 전송
• 지속적으로 로그인 정보를 가지고 있는것처럼 사용

쿠키의 한계

• 300개까지 만 저장가능, 하나의 도메인에 20개의 값만 보유가능, 하나의 쿠키값은 4KB까지만 저장
• 사용자의 요청없이도 브라우저가 request시에 request header을 넣어 자동으로 서버에 전달

3. 세션(Session)

세션은 쿠키를 기반으로 하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리합니다. 일정 시간동안 같은 브라우저로 부터 들어오는 요구를 하나의 상태로 보고 그 상태를 유지하는 것

다시말해 웹 브라우저를 통해 웹서버에 접속한 이후부터 그 브라우저를 종료 할떄까지 상태 유지

클라이언트가 request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 세션ID를 부여합니다

세션은 주로 이렇게 사용됩니다.

• 세션사용 : 로그인 정보유지

세션 프로세스

• 클라이언트는 서버접속시 세션 ID를 발급
• 클라이언트는 세션ID에 대해 쿠키를 사용해서 저장
• 서버요청시에 이 쿠키의 세션ID를 서버에 전달하여 사용
• 서버는 받은 세션ID로 세션의 클라이언트정보를 가져오고 서버요청을 처리하여 클라이언트에게 응답

4. 쿠키과 세션의 차이

저장위치

• 쿠키 : 클라이언트에 파일로 저장
• 세션 : 서버에 저장

보안

• 쿠키 : 클라이언트 로컬에 저장되기 떄문에 변질되거나 request에서 스나이핑당할 우려가 있 어서 보안 취약
• 세션 : 쿠키를 이용해서 세션id만 저장하고 그것으로 구분해서 서버에서 처리하기 떄문에 비 교적 안전 (보안 면에서 쿠키보다 우수)

라이프 사이클

• 쿠키 : 지속쿠키에 경우 브라우저를 종료하더라도 저장 될수 있음
• 세션 : 만료기간을 정할수 있지만 브라우저 종료시 세션아이디 삭제될수 있음

속도

• 쿠키 : 쿠키에 정보가 있기 떄문에 서버에 요청시 속도가 빠름
• 세션 : 정보가 서버에 있기 떄문에 처리가 요구되어 비교적으로 느림

5. 그럼 굳이 쿠키를 사용하는 이유

세션은 서버에 데이터를 저장 즉, 서버의 자원을 사용하기 때문에 서버 자원에 한계가 있고 메모리를 사용하다보면 속도 저하도 올 수 있기 때문이다.

Reference

-쿠키-세션-그리고-웹-스토리지 -Web - 쿠키와 세션의 차이, 용도, 사용법(cookie,session) -기술-쿠키와-세션의-차이

느낀점

이제까지 쿠키와 세션에 대해 잘 모른체 마구잡이로 사용하였는데 보안과 속도 적인 측면을 생각하면 코딩하는 사람이 되도록 하여야 겠다!!

자동화에 관심이 많은 요즘 오픈소스 Test도 자동화하면 좋겠다는 생각에 만들게 되었습니다.

1. Github에 최신상태 유지하기!!

Github에 소스코드를 push하여 최신 상태로 유지한다.

2. 테스트 자동화 설정!!

Github repository에서 Action 메뉴를 클릭하고 New workflow 버튼을 클릭한다. 다음 set up a workflow yourself를 클릭한다.

3. Test.yml 만들기!!

파일에 대한 내용은 Node 10, 12, 14, 15와 ubuntu, macOS, windows에서 테스트를 한다는 내용이다.

name: Test

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.x, 15.x]
        os: [ubuntu-latest, macOS-latest, windows-latest]
    runs-on: $

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js $
        uses: actions/setup-node@v1
        with:
          node-version: $
      # 테스트를 수행하기 위한 명령어를 작성한다.
      - run: npm install
      - run: npm test

파일 이름을 test로 변경하고 커밋을 한다.

이렇게 되면 main 브랜치에 push 및 pull_request를 할 때 마다 테스트를 수행한다.

수행 결과 및 내역은 Actions 메뉴를 통해 확인할 수 있습니다.

(하필 다 빨강이네요...)

😀 느낀점

최근 자동화에 대한 중요성을 느끼게 된다. 자동화를 함으로써 시간을 절약하게되고 그게 코드의 퀄리티와 직결 된다는걸 새삼느끼는중이다. 자동화에 조금 더 빠져든거 같다 ㅎㅎ

1. 배포 방법

package.json 파일 안의 “script” 속성에 “deploy”하는 명령어를 추가한다.

//package.json

 "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
  },

위의 명령어들을 정리해 보면

rm -rf node_modules/.cache  : node_modules 캐시제거

next build : next 프로젝트 빌드

next export : next 프로젝트를 static html앱으로 컴파일한 out/ 폴더를 생성해 줌

touch out/.nojekyll : Github page의 jekyll 처리과정에서 _next 이러한 파일을 특수 리소스로 간주하고 최종 사이트에 복사하지 않는데 .nojekyll 파일을 만들면 이를 막을 수 있다.

git add out/ : 상의 변경 내용을 스테이징 영역에 추가

git commit -m "Deploy Next.js to gh-pages" : 커밋메시지 작성 및 로컬 레파지에 추가

git subtree push --prefix out origin gh-pages : github 저장소 gh-pages브랜치에 push

이 명령어 들을 가지고 있는 deploy를 실행시키면 배포가 자동으로 됩니다

npm run deploy

2. next.config.js

next.config.js 파일이 루트 폴더에 없다면 파일을 생성하고 다음과 같은 코드를 넣어준다. name은 자신의 깃허브 저장소 이름을 넣어준다.

//next.config.js

module.exports = {
  assetPrefix:
    process.env.NODE_ENV === 'production'
      ? 'https://yunminseok.github.io/Mlog'
      : '',
};

개발모드에서는 requestURL=localhost:3000/ 에 리소스를 요청하지만,

배포모드에는 requestURL = yunminseok.github.io/ 에 요청한다.

assetPrefix 속성을 통해 리소스 요청 주소를 따로 넣어주어야 한다.

2. env-config.js, babelrc.js

env-config.js 파일을 루트 폴더에 만들어주고 다음과 같은 코드를 친다.

// env-config.js

module.exports = {
  'process.env.BACKEND_URL':
    process.env.NODE_ENV === 'production'
      ? 'https://yoonminseok.github.io/Mlog'
      : '',
};

이제부터 process.env.BACKEND_URL 라는 환경변수를 사용할 수 있다. 이 환경변수는 이미지, 동영상 등의 리소스에 접근하거나 사용자에게 보여지는 URL을 설정할 때 쓰인다.

.babelrc.js 파일 안의 플러그인에 등록해준다.

// .babelrc.js

const env = require('./env-config');

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      'styled-components',
      {
        ssr: true,
        displayName: true,
        preprocess: false,
      },
    ],
    ['transform-define', env],
  ],
};

3. 이미지 리소스 접근

위에서 만든 환경변수를 사용해서 process.env.BACKEND_URL 리소스에 접근해야 되지만 next/image를 사용해서인지 오류가 떠서 다른 방식으로 접근을 하였다.

//next.config.js

module.exports = {
  assetPrefix:
    process.env.NODE_ENV === 'production'
      ? 'https://yoonminseok.github.io/Mlog'
      : '',
  images: {
    loader: 'imgix',
    path: 'https://yoonminseok.github.io/Mlog',
  },
};

이런식 으로 loader와 path값을 지정을 해주면 밑의 코드와 같이 사용가능하다

<Image
  src={'/Introduce.png'}
  alt="Introduce_Logo"
  width={400}
  height={400}
/>

4. 느낀점

이렇게 Nextjs + Typescript + Gihub-action을 통해 Github pages로 배포하는 법을 알아봤다. 막상 시작할때는 설정부분이 너무 어려웠는데 구현 하고나니깐 npm run deploy명령 하나로 배포가 되는걸 보니 왜 개발자들이 자동화를 좋아하는지 알수 있는 작업이었다.

이제부터 자동화를 좋아하는 개발자가 되도록 노력해야겠다는 생각이 들었다

Reference

nextJS 뭘로 배포할까? (Netlify, Vercel, Github page)

최근에 NextJs + Typescript 를 gh-pages를 통해 배포 진행 중에 생긴 이미지 로더 에러를 파헤쳐 보았습니다.

우선 에러 메시지를 살펴보자

Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start to run a server, which includes the Image Optimization API.
Use any provider which supports Image Optimization (like Vercel).
Configure a third-party loader in next.config.js.
Use the loader prop for next/image.

해당 에러가 무슨 이유로 뜨는지 알아 보자

next/Image에서 임포트하는 <Image /> 컴포넌트의 default loader가 
next export에서는 지원되지 않기 때문에 발생하는 에러다. 

공식문서에 따르면 next.config.js 파일에 다음과 같은 설정을 추가하면 된다.

 module.exports = {
  images: {
    loader: 'imgix',
    path: [도메인 주소],
  },
};

이런식으로 설정을 해주면 이미지의 기본 주소값이 설정이 되어 이미지가 잘 로딩이 된다.

Reference

공식문서 - Vercel Github - Issue

느낀점

배포 환경을 구현중인데 생각했던것보다 설정 해줘야 할것들이 많고 신경 써줘야 할 부분들이 많은거 같아 힘들다 😂

문득 코드를 보는데 default export와 named export가 엄청 혼용되어서 사용되고 있었다. 뭔가 코드가 지저분한 생각이 들어서 하나의 방식으로 통일하려고 했는데, 혹시나 성능차가 있을까 싶어서 둘의 특징과 차이점을 찾아봤다.

1. Default Export

참고자료 MDN default 로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export 할 수 있습니다.

const Test = () => {
     ...
}
export default default Test

! import 할 때는 아무 이름으로나 import 가능합니다.

example

import Test from '../Test'

or

import TestPage from '../Test'

이런식으로 이름을 자유롭게 붙일수 있습니다.

BUT!!

단, var, let, const 를 바로 export default 할 수 없습니다.

export default const MY_Test = "This is Test"

2. Named Export

한 파일 내에서 여러 변수/클래스 등등을 export 하는 것이 가능합니다.

참고자료 MDN

export class FirstTestClass { /* blabla */ }
export class SecondTestClass { /* blabla */ }

! 다만, import 시 {} 안에다가 export 된 이름과 동일하게 설정해야 한다.

Example

import { FirstTestClass, SecondTestClass } from './TestClass'

다른 이름으로 import 할 수 있으나 아래처럼 as를 사용해야 한다.

Example2

• as 를 사용하면 한 파일에 있는 클래스/변수들을 한 번에 import 할 수 있다.

import * as Hi from './TestClass'

성능

성능에는 차이가 없는 것으로 보입니다.

🤔 그래서 어떤걸 써야할까?

제 생각으로는 default export를 우선적으로 사용하고, 한 파일에서 여러개를 export 해야하는 경우는 named export를 사용하고 있다. 보통 한개의 파일이 하나의 함수형 컴포넌트나 클래스를 담고있기 때문에 default export를 디폴트로 사용해도 문제가 생기지 않았기 때문이다. named export는 상수들을 담은 constants 등의 파일에 사용하는 경우가 많다.

References

StackOverflow

느낀점

개발은 이런식으로 하나씩 궁금점을 해결해 나가는 재미가 있는거 같다. 오늘보다 내일 더 나은 개발자가 되기 위해 달리자!

잠깐 코드 스플리팅이 뭘까?

다른 곳에 여러 설명이 있지만 내가 이해한 대로 설명을 하자면 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할때 불러와서 사용 할 수 있습니다. 이를 통하여, 페이지의 로딩 속도를 개선 할 수 있죠.

React.lazy와 Suspense는 아직 서버 사이드 렌더링을 할 수 없다고 한다. 서버에서 렌더링 된 앱에서 코드 분할을 하기 원한다면 Loadable Components를 사용하면 된다고 한다!! 자세한 설명은 공식문서를 참고하시면 됩니다!!

☝ 코드 스플리팅 하기 전

src/split.js

function split() {
  <div>버튼을 눌러야 나타난다!!</div>;
}

export default split;

src/App.js

import React from 'react';
import split from './split';

function App() {
    const [visible, setVisible] = useState(false);
    return (
      <div>
        <button
          onClick={() => {
            setVisible(true);
          }}
        >
          버튼
        </button>
        {visible ? <split /> : null}
      </div>
    );
}

export default App;

코드를 잘 보면 버튼을 누르게 되기 전까지 split 컴포넌트는 필요가 없습니다. 필요없는 코드들을 한번에 작성하게되면 초기화 로딩에 필요한 비용이 많이 들기 때문에 코드 스플리팅을 하는것입니다.

✌ 코드 스플리팅 후

import React, { Suspense, useState } from "react";

const split = React.lazy(() => import("./split"));

function App() {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setVisible(true);
        }}
      >
        버튼
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        {visible ? <split /> : null}
      </Suspense>
    </div>
  );
}

export default App;

React.lazy를 통해 다이나믹 import로 사용할 컴포넌트를 가져옵니다.

그 후, Suspense 내부에서 해당 컴포넌트를 호출하면 됩니다.

Suspense의 fallback 속성은 해당 컴포넌트를 가져오는 데 걸리는 시간 동안 렌더할 일종의 로더를 지정할 수 있습니다.

😎 후기

Lazy를 적용해볼 일이 많이 없어 혼자서 예제를 만들어보니 정말 쓸만한 친구 인거 같다. 이렇게 최신 기술들이 나오면 시도 해보는 개발자가 되리라 다시 한번 다짐하는 하루였다...

최근 개발을 하면서 사진에 태그를 거는 기능을 구현 할 일이 있었다. 서버는 AWS S3를 쓰고 프론트 단은 localhost:3000 포트로 개발을 하고있었습니다. 태그를 걸기위해 사진의 위치값을 찾을려고 getImageData()를 사용했으나 이러한 오류가 떳다.

초보 개발자들을 지독하게 괴롭히는 CORS에러를 마주하게 되었다. 위의 에러는 CORS의 정책을 위반해서 나오는 에러라고 한다. 그렇다면 CORS 정책은 무엇일까?

🤔 CORS 관련 이슈는 왜 발생하는 걸까?

관련 자료

교차 출처 리소스 공유(CORS)

MDN의 내용을 요약하자면

• CORS는 서로 다른 출처(Origin)간에 리소스를 전달하는 방식을 제어하는 체제이다.
• CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다.

CORS 정책을 위반하여 서로 다른 출처를 가진 상태에서 무언가를 요청하게 되면 브라우저가 보안상의 이유로 차단 을 해버린다! 예를들어, 클라이언트 포트가 3000번이고 서버의 포트가 8080 일 때, 클라이언트에서 서버로 리소스를 요청했을 때 CORS 에러 메시지가 클라이언트 콘솔에 빨갛게 뜨고 데이터를 주지 않게 된다.

CORS문제를 해결하려면 동일한 출처에서 리소스를 요청하면 된다!! 참 쉽죠?

나는 여기에 한스푼 더 얹어서 Canvas에서 CORS에러가 왜 뜨는지 조금 더 보게 되었다.

참고자료 Allowing cross-origin use of images and canvas

Canvas를 사용할 때 CORS 승인 없이 이미지를 사용할 수는 있지만, 
이미지를 변형한 상태에서 데이터를 캔버스에서 꺼내려 한다면 
“canvas tainted” 관련 오류가 발생할 것이다.

결국 같은 맥락의 글이었다.

따라서 CORS의 해결법은 찾았는데 2가지 정도를 대체적으로 많이 쓰는것 같아서 이를 정리 해보았다.

1. 이미지에 Cross Origin 속성 설정

JavaScript 에서 이미지 자체에 Cross Origin 속성을 설정해야한다.

var img = new Image();
img.src = "http://other-domain.com/image.jpg";
img.crossOrigin = "Anonymous";

딱히 좋은 방법은 아닌거 같았다.

2. 서버 헤더에 Cross Origin 속성 설정

가장 기본적인 방법으로는 서버에서 헤더를 설정해주는 것이다.

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인
  res.header("Access-Control-Allow-Origin", "https://example.com"); // 특정 도메인
});

3. 프록시 설정해주기

리액트 공식 문서 에 프록시 설정방법이 나와있다.

package.json에 proxy 한 줄을 추가하면 된다!

//package.json
{
  ...,
  "proxy": "http://apiserver.com:5000",
  ...,
}

그러면 다음과 같이 request가 처리된다.

1. browser에서 React dev server(http://localhost:3000)으로 요청을 보낸다.
2. React dev server가 해당 요청을 api server(http://apiserver.com:5000)에 보낸다.
3. api server가 response를 react dev server에게 전달한다.
4. React dev server는 이 response를 그대로 browser에게 전달해준다. 이때, browser 입장에서는 api server가 아닌, React dev server가 응답한 것 처럼 보이게 된다.

이렇게 해결 4가지 정도를 찾아 보았다. 해결법은 내가 찾은것 보다 많지만 대체적으로 많이 쓰는것으로 작성을 하였다.

느낀점

CORS에러가 뜨지 않았으면 놓치고 갔을 웹에서 가장 중요한 문제를 알게 되어서 기뻣다. 그리고 언어에 대한 기본 문법을 제외하고 웹에서는 공부해야 할게 너무 많다는것도 느끼게 되었다...😂

감사합니다🙏