jo_love.log

TIL102. Next js의 pre-rendering과 hydrarion

Mon, 01 May 2023 09:54:21 GMT

next.js pre-rendering 방식의 종류와 hydration개념 및 관련 오류에 대해 정리해보자.

렌더링 방식(CSR, SSR)

CSR(Client Side Rendering): client에서 렌더링

유저가 웹사이트 방문 → 브라우저에서 서버로 소스(컨텐츠) 요청 → 서버에서 브라우저로 빈 html로 연결된 js 링크를 보내줌 → 브라우저에서 js 파일 다운로드 후 동적 dom 생성

CSR의 특징

빈 HTML을 내려주기 때문에 서버 부하가 적다.
js까지 모두 다운로드 받은 후 동적 DOM을 생성하는 시간을 기다려야하기 때문에 초기 로딩속도가 느리다.
처음에 모두 받아왔기 때문에 서버에 해당 페이지의 데이터만 받아오면 되서 페이지 전환이 빠르다.
웹 크롤러봇는 html기반으로 요소를 찾는데 html이 비어있어서 정보를 얻을 수가 없기 때문에 SEO(검색엔진이 정보를 얻는 과정)에 불리하다. (*구글 크롤러 봇은 js로도 크롤링할 수 있지만, 국내 검색봇들은 html기반으로 요소를 찾음)

SSR(Server Side Rendering)

유저가 웹사이트 방문 → 브라우저에서 서버로 소스(컨텐츠) 요청 → 서버에서 브라우저로 렌더링 준비를 마친 html과 js code를 보내줌 → 브라우저는 전달받은 html 렌더하고, js code를 다운로드 후, html에 js로직을 연결

SSR의 특징

js 다운로드를 받기 전에 html을 먼저 렌더링하기 때문에 초기 로딩속도가 빠르다. (*하지만, 이 시점에 사용자가 버튼을 클릭하면, 인터렉션이 일어나지 않을 수 있다.)
SEO에 유리
Next.js의 렌더링 과정(hydrate)

CSR + SSR
: 첫페이지는 서버에서 받아 렌더링하고, 뒤에 발생하는 라우팅은 next/link, next/router 를 활용해서 내부적으로 CSR 방식을 사용함(url창에 직접 주소를 치고 들어갔을 시에는 SSR or SSG인데 link, router를 이용하면 CSR)

hydration

: Next.js는 클라이언트에게 웹페이지를 보내기 전에 server side 단에서 Pre-Rendering 된 HTML 파일을 클라이언트에게 전송한다. 이후에 리액트가 번들링된 자바스크립트 코드들을 클라이언트에게 전송한다. 자바스크립트 코드 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서 각자 요소들을 찾아가며 매칭힌다.이 과정을 통해 웹 페이지가 정상적으로 동작을 하게 되고, 이 과정을 바로 ‘Hydration’ 이라고 한다.

→ 맨 처음 응답받는 요소 document Type의 HTML 파일-> css 파일 → react 코드들이 렌더링된 js파일

서버 단에서 한 번 클라이언트 단에서 한 번 더 렌더링하면 비효율적이라고 생각할 수 있지만, pre-rendering한 document는 모든 js 요소들이 빠진 굉장히 가벼운 상태이므로 클라이언트에게 빠른 로딩이 가능하다.

*각 DOM 요소에 자바스크립트 속성을 매칭 시키기 위한 목적이므로 실제 웹 페이지를 다시 그리는 paint 함수는 호출하지 않는다.

pre-rendering 종류

SSG(Static-Site-Generation)

: HTML을 빌드 타임에 생성한다. 그 이후에는 CDN으로 캐시되어지고, pre-render된 HTML은 매 요청마다 재사용 된다. 인터넷 연결이 느리거나 불안정한 경우에도 사용자에게 신속하게 제공될 수 있다. ex)블로그 게시물, 제품 목록: 이커머스 사이트에서 상품 세부 정보, 포트폴리오

SSG 방식으로 데이터를 가져올 때 getStaticProps, getStaticPaths 사용한다.(*next.js 12 버전 기준)

function Blog({ posts }) {
  return (
    
      {posts.map((post) => (
        {post.title}
      ))}
    
  )
}

export async function getStaticProps() {
// 빌드 시, api 호출해서 html을 만들어준다.
  const res = await fetch('https://.../posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  }
} 

export default Blog

SSR

: 매 요청이 일어날 때 마다 HTML을 생성하는 방식이다. 데이터가 자주 업데이트되는 페이지에 사용된다. CDN에 캐쉬를 저장하지 않아 SSG와 비교해서 속도는 느리지만 항상 최신상태를 유지할 수 있다.

function DynamicPage({ data }) {
 ...jsx
}

export async function getServerSideProps() {

  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
} 

export default DynamicPage

ISR(Incremental Static Regeneration)

: SSG의 장점을 살리면서 비교적 최신 데이터를 반영할 수 있다. SSG와 동일하게 빌드 시점에 페이지를 생성하지만, 일정 시간이 지난 후 페이지를 새로 생성한다. 빌드를 배포한 이후에도 설정한 주기마다 데이터의 갱신여부를 검사하고 업데이트된 데이터로 페이지를 다시 정적으로 생성한다. 빌드된 후 이 페이지에 재방문이 없으면, revalidate 시간이 경과했더라도 백그라운드에서 재 빌드되지 않는다.

export async function getStaticProps() {

  const res = await fetch('https://.../posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
     revalidate: 15,
  }
}

hydration 관련 오류

서버에서 받아온 UI(pre-render)와 브라우저에서 자체적으로 렌더링한 UI tree 간의 차이때문에 hydration 오류가 발생한다. 구체적인 원인은 밑에 서술

원인

환경에 따라 다른 ui 나타내는 코드

node 서버에서 실행 시에는 최상위 객체가 window가 없고, 브라우저에서 실행 시에는 최상위 객체 window가 존재하기 때문에 서로 환경이 다르다.

function MyComponent() {
  // This condition depends on `window`. During the first render of the browser the `color` variable will be different
  const color = typeof window !== 'undefined' ? 'red' : 'blue'
  // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
  return Hello World!
}

element 순서 안지킬 경우
```
This is test
```
실제 겪었던 hydration 오류
실제 개발환경에서는 반응형을 위해 사용했던 ‘useMediaQuery’ hook 때문에 hydration 문제가 발생했다.useMediaQuery는 window.innerWidth 등과 같은 window 객체를 참조하는 코드를 가지고 있는데 서버에서 렌더링한 html에는 window 객체가 초기화되지 않았기에 오류가 났었다.

→ 컴포넌트가 마운트되고, 그 이후에 useEffect hook 내부에서 isMobile 변수를 업데이트시켜 컴포넌트를 재랜더링 시키는 방법으로 해결했다.

function App() {
    const [isMobile, setIsMobile] = useState(false);
    const mobile = useMediaQuery({ query: "(max-width: 600px)"});

    useEffect(() => {
        if(mobile) setIsMobile(mobile);
    }, [mobile])

    return 
}

TIL101. Web3 NFT dApp 만들기

Thu, 15 Dec 2022 08:46:42 GMT

nft minting, staking 페이지를 만들며 NFT dApp 만드는 일련의 과정들을 정리해보자.

minting page

nft에서 말하는 민팅은 두가지 뜻이 있다. 하나는 판매자 입장에서 가상화폐로 NFT를 만들어 낸다는 뜻이고, 다른 하나는 구매자 입장에서 NFT를 구매한다는 뜻도 된다. 지금 다루고 있는 dapp상 민팅 페이지는 NFT를 구매할 수 있는 페이지를 말한다.

minting 과정

1. web3 지갑 연결

web3 지갑은 dpp과 상호작용하고 이더리움 블록체인에서 거래를 수행하는데 사용된다. 지갑 자체가 암호자체를 보관하는 것은 아니고, 디지털 자산에 액세스할 수 있는 정보를 저장한다.

web에서는 직접적으로 스마트 컨트랙트와 상호작용할 수는 없다. 그래서 JSON-RPC 프로토콜을 통해 이더리움 노드와 통신하는 기능을 포함한 JavaScript 라이브러리 web3 혹은 ethers 사용한다. 라이브러리는 다양한 기능을 포함하고 이더리움 지갑에 연결할 수 있게 해준다.

Smart Contract 스마트 컨트랙트란 블록체인에 등록되어 작동하는 프로그램으로, 서면으로 이루어지던 금융거래, 부동산 계약, 공증 등 다양한 형태의 계약을 코드로 구현하고 특정 조건이 충족되었을 때 해당 계약이 이행되게 하는 script를 통해 계약을 체결하고 이행하는 것을 말한다.
JSON-RPC 대부분이 이더리움 환경 상에서 스마트 컨트랙트를 만드는데 이때 이더리움 노드들은 JSON-RPC라고 불리는 언어로만 소통할 수 있다.

ethers.js

(ethers를 사용하여 프로젝트를 구성하였기 때문에 ethers에 대한 기본적인 개념이나 사용법에 대해 작성해보았다.) web3.js 이후에 나온 라이브러리로 provider와 signer를 주입하는 형태로 간편하고 유연한 코드 작성이 가능하다.

Provider 이더리움 네트워크 연결을 위한 추상화(abstraction)를 제공하는 클래스로 블록 ,트랜잭션 등의 읽기 전용 액세스를 제공한다. (개인이 노드가 될수없기 때문에 네트워크의 정보를 대신 제공해주는 역할을 한다.)
Signer : 직간접적으로 private key에 대한 접근권을 가지고 있는 클래스로 계정의 ether를 사용하여 트랜잭션을 수행할 수 있도록 한다. signer는 이더리움 계정을 통해서 트랜잭션에 사인을 해서 이더리움 네트워크 상의 정보를 변경하는 트랜잭션을 실행할 수 있게 해준다.
Contract : 이더리움 네트워크 상의 특정한 컨트랙트와 연결하여 일반적인 js의 오브젝트처럼 사용할 수 있도록 한다.
```
const contract = new ethers.Contract(contractAddress, ABI, provider or signer);
```
signer대신 provider를 넘기면 읽기 전용

2.구매 수단 선택

native token(Matic coin), ERC20 token 어떤 구매 수단을 선택하느냐에 따라 프로세스가 달라진다. native token선택 시 별도의 과정없이 바로 mint contract를 부를 수 있다.

3. approve 트랜잭션

유저의 지갑 내 토큰을 다른 주소가 가져갈 수 있는 권한을 승인하는 트랜젝션이다.
현재 토큰의 개수보다 더 많이 승인하는 것도 가능하다. 'ethers.constants.MaxUint256' 를 사용하면 무한대로 approve가 가능하다.
```
function approve(address _spender, uint256 _value) public returns (bool success)
```
유저지갑에서(from) spender주소(to)에 value만큼의 토큰을 이동할 수 있는 권한을 승인

allowance spender(대리자)가 owner(실제 토큰 보유자) 대신 거래할 수 있는 금액

function allowance(address _owner, address _spender) public view returns (uint256) {
      return _allowances[owner][spender];
  }

//return example { 'A' : { 'B': 3000, 'C': 5000 } } // -> A가 가진 토큰 중 3000을 B에게 5000을 C에게 맡김

구매 시마다 approve과정을 거친다면 사용자 편의상 좋지 않을 수 있다. 그래서 approve 금액을 max로 설정해놓고, allowance 함수를 통해 금액을 확인하고, 구매하려는 금액보다 allowance금액이 크다면 approve는 다시 진행하지 않는 방법이 있다.
(다만, 신뢰할 수 없는 스마트 컨트랙트에 max권한을 맡긴다는 것은 위험성이 있을 수 있다.)
```js
 useEffect(() => {
    (async () => {
      // 구매수단이 token일 경우
      if (selectedOpt === CRYPTOCURRENCY.TOKEN) {
     // 'allowance'로 금액 확인
        const allowanceAmount = await erc20Contract.allowance(account, MINTER_CONTRACT_ADDRESS);
    // 총 가격 = 개당 가격 * 선택한 수량
        const currentPrice = ethers.utils.parseEther(String(getSelectedInfo().price * count));
    // allowance 금액이 'currentPrice'보다 크면 true
        const pass = ethers.BigNumber.from(allowanceAmount).sub(currentPrice) >= ethers.BigNumber.from(0);
      }
    })();
  }, [selectedOpt, count]);

4. mint NFT

transfer token + mint NFT 두 기능 합쳐져서 진행

setMint 메소드 (갯수, 0 or 1-> 코인=0 토큰=1, signer )
임의의 smart contract를 이용한 메소드

트랜젝션의 실패,성공 여부를 확인하기 위해서 폴링을 돌려주는 waitForTransaction 메소드를 사용한다. transaction.status가 '0'이면 실패, '1'이면 성공

const mintNft = async () => {
  const minterContract = new ethers.Contract(MINTER_CONTRACT_ADDRESS, MINTER_CONTRACT_ABI, library?.getSigner());
  const response = await minterContract.setMint(count, 1, {
    gasLimit: 500000,
  });
  await checkTransactionStatus(response.hash);
};

const checkTransactionStatus = async (hash: string) => {
  const provider = new ethers.providers.JsonRpcProvider(process.env.REACT_APP_RPC_URL);
  setLoading(true);
  await provider.waitForTransaction(hash).then(function (transaction) {
    setLoading(false);
    if (transaction.status === 1) {
      setPhase(PHASE.FREE_OF_APPROVAL);
      setCount(1);
      alert("민팅에 성공하였습니다.");
    } else {
      alert("민팅에 실패하였습니다.");
    }
  });
};

임의의 smart contract를 이용한 샘플 코드 예시

staking page

보유한 NFT를 블록체인 네트워크에 고정시키는 것을 말한다. 일종의 은행예치시스템과 비슷하다고 생각하면 이해하기 쉽다. 반대로 unstaking을 하면 스테이킹한 자산을 해제하여 보유한 암호화폐를 출금 또는 거래 가능한 상태로 만들 수 있다.

nft 목록 불러오기

(*지갑 연결과 approve 프로세스 이전과 동일하거나 비슷하기 때문에 생략)

이전에 민팅해서 구매한 nft들은 각각의 tokenId를 가지고 있다. 보유자의 주소를 넣으면 tokenId를 담은 목록을 보여준다.

 nftContract.tokensURI(account);

stake

stake할 아이템의 tokenId를 넘겨준다.

const stakeToken = async () => {
  const stakingContract = new ethers.Contract(
    NFT_STAKING_CONTRACT_ADDRESS,
    NFT_STAKING_CONTRACT_ABI,
    library?.getSigner(),
  );
    const staking = await stakingContract.nftStaking(toNumber(toStakeItems), { gasLimit: 40000000 });
    setIsLoading(true);
    await provider.waitForTransaction(staking.hash).then((transaction) => {
      if (transaction.status === 1) {
        setAfterStaking((prev) => !prev);
      } else {
        alert('스테이킹 실패. Staking failed.');
      }
      setIsLoading(false);
    });
  };

*임의의 smart contract를 이용한 샘플 코드 예시

TIL100. Next.JS 13 새로운 특징들

Mon, 12 Dec 2022 16:22:17 GMT

v13 변경사항에 대해 알아보자.

app/ Directory

*app/ 디렉토리 구조는 beta버전이기 때문에 실제 프로덕션 레벨에서는 권장되지 않는다. 기존에는 pages 디렉토리 안에 파일을 생성하여 Automating Routing을 실행했지만, 13버전부터는 app/이라는 새로운 디렉토리가 등장하였다. 파일 시스템 기반에서 디렉터리 기반 라우팅 시스템으로 전환하였다. 현재는 pages와 app 디렉토리가 공존하는 베타 버전으로 제공된다. app 디렉토리 안에는 layout.js, page.js, head.js파일이 존재한다. *dev server를 돌리면 자동적으로 head.js와 layout.js를 생성해준다.

-page.js : 고유한 ui를 정의하는데 사용(index.js같은 느낌) -layout.js : 여러 경로에서 공유되는 ui를 정의하는데 사용(nav, footer 컴포넌트)

// page.js
const Home = () => {
  return Homepage;
};
export default Home;

// layout.js
import "styles/globals.css";
import Header from "./Header";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Data Fetching

react에서 데이터를 불러올 때 최초 렌더링 시 빈 배열의 형태를 가지며 그 이후 useEffect를 통해 값이 채워지게 된다. 그 다음 렌더링을 통해 그 렌더링된 값이 보여지는데 이 과정에서 화면에 깜빡임이 생길 수 있다. 이를 방지하기 위해 next-js에서는 사전 렌더링(pre-rendering)을 위한 data fetching을 할 수 있는 기능으로 getStaticProps와 getServerSideProps가 있다.

getStaticProps

빌드 시에 한 번만 호출되고, 바로 static file로 빌드된다. SSG (Static Site Generation) 수정될 일이 없는 경우에 사용하기 좋다.

getServerSideProps

getServerSideProps는 getStaticProps와 다르게 page가 요청이 들어올 때마다 호출되며, 그 때마다 사전 렌더링을 진행한다. 요청 시마다 다시 호출되므로 자주 바뀌게 될 동적 데이터가 들어갈 때 더 사용하기 좋다.

use

13부터는 getServerSideProps, getStaticProps 대신에 use를 사용해야 한다.

fetch 구문의 URL 뒤에 { cache: '' } 를 넣어줄 수 있는데, 안에 무엇이 들어가냐에 따라 기존의 getServerSideProps, getStaticProps와 유사한 기능을 쓸 수 있다.

import { use } from 'react'

const getData = async () => {
  const res = await fetch("www.example.com/movies/1");
  const data = await res.json();
  return data;
};

const page = () => {
 const movie = use(getData());

  return {movie.title};
};

// getStaticProps
const getStaticProps = async () => {
  const res = await fetch("www.example.com/movies/1", {
    cache: "force-cache",
  });
  const data = await res.json();
  return data;
};

// getServerSideProps
const getServerSideProps = async () => {
  const res = await fetch("www.example.com/movies/1", {
    cache: "no-store",
  });
  const data = await res.json();
  return data;
};

기타 업그레이드된 기능들(Image/Link/Font)

next/Image

Image컴포넌트를 통해서 이미지 파일을 넣을 수 있는데 자동으로 최적화된다.
이미지가 로딩중일 때, 자동적으로 width와 height를 설정해서 *layout shift를 방지해준다.
페이지 내에서 실제로 필요할 때까지 리소스의 로딩을 미루는 'lazy loading'기법으로 로딩 시간을 단축하여 웹 성능을 향상시킨다.(with optional blur-up)

*layout Shift: 이미지 사이즈가 정해져있지 않은 경우, 이미지를 기다리는 동안 기존의 레이아웃이 밀려나는 현상

import Image from 'next/image';

export default function Page() {
  return (
    // 1) Local Images
    
    // 2) Remote Images
    
  );
}

-> Remote image를 사용하기 위해서는 width와 height 값을 지정해줘야 한다.

next/font

font 역시 자동으로 layout Shift가 방지된다.
⭐️구글 폰트가 내장되어 브라우저에서 구글 폰트 요청을 별도로 하지 않아도 사용할 수 있다.
google font
```
// app/layout.tsx
```

import { Inter } from '@next/font/google';

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }: { children: React.ReactNode; }) { return ( {children} ); }

다양한 weight와 styles 사용 시 배열을 사용
```js
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
});

local font

local font 역시 같은 방법으로 사용가능

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return (
    
      {children}
    
  );
}

next/link

Link Component 안에 더이상 태그를 사용하지 않아도 된다.

Link 태그에도 props나 함수를 사용할 수 있다.
```
// before

console.log('clicked')}>About
```

// after console.log('clicked')}> About ```

TIL99. Next.JS 13 환경설정

Fri, 09 Dec 2022 02:32:42 GMT

업데이트된 next.js 13를 사용해보자. (환경설정편)

Next.js란

next.js는 react에서 SSR을 쉽게 구현할 수 있도록 Vercel에서 만든 프레임워크이다.

Next.js를 사용하는 이유

초기 웹사이트는 사용자가 다른 페이지로 이동할 때마다 서버에 요청을 해서 새로운 html을 불러와 매번 새로고침되는 방식이었다. 이를 보완하고자 나온 것이 단일 페이지로 최초 한 번 페이지 전체를 로드하는 SPA의 CSR방식이고, 대표적인 SPA 라이브러리가 react 이다. 하지만, 검색엔진 최적화(seo)문제나 초기 페이지 로딩이 오래 걸린다는 문제점이 존재한다. 검색엔진봇은 js를 해석하기 힘들기 때문에 html에서 크롤링을 하는데, CSR방식은 client에서 페이지를 구성하기 전에 빈 html을 보여주기 때문에 검색엔진이 어떠한 정보도 얻기 힘들다. *구글은 브라우저 내에 Js엔진이 있기 때문에 CSR방식을 사용해도 SEO문제는 없다고 한다. 이때 next.js를 사용하면 앞에 말한 두가지 문제점을 해결할 수 있다.

Next.js의 작동방식

사용자가 초기 페이지 접속 요청 시, SSR방식으로 렌더링 될 html을 보낸다.
브라우저에서 js를 다운받고, react를 실행한다.
사용자가 페이지 이동할 경우, CSR방식으로 브라우저에서 처리한다.

Next.js 시작하기

초기설정

experimental

// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
experimental: {
  appDir:true,
}
}

: /app 경로는 아직 시험용이기 때문에 next.config.js파일에 experimental 설정이 필요

Next.js & CSS-in-JS

css-in-js형식으로 스타일링을 하면 js코드가 적용되기 전의 페이지가 렌더링되어서 스타일이 적용되는 않은 html 코드가 먼저 렌더링되기 때문에 초기설정이 필요하다.

기존설정

// _document.tsx
export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: [initialProps.styles, sheet.getStyleElement()],
      }
    } finally {
      sheet.seal()
    }
  }
}

-> 13버전부터는 app디렉토리에 _app.tsx , _documents.tsx 는 사용하지 않기 때문에 다른 방식을 사용해야 한다.

styled-components API를 사용하여 렌더링 중에 생성된 모든 CSS 스타일 규칙과 해당 규칙을 반환하는 함수를 수집하는 전역 레지스트리 구성 요소를 만든다.
```
// lib/styled-components.tsx
import React from 'react';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
```

export function useStyledComponentsRegistry() { const [styledComponentsStyleSheet] = React.useState( () => new ServerStyleSheet(), );

const styledComponentsFlushEffect = () => { const styles = styledComponentsStyleSheet.getStyleElement(); styledComponentsStyleSheet.instance.clearTag(); return <>{styles}; };

const StyledComponentsRegistry = ({ children, }: { children: React.ReactNode; }) => ( {children as React.ReactElement} );

return [StyledComponentsRegistry, styledComponentsFlushEffect] as const; }

2. 레지스트리에 수집된 스타일을 루트 레이아웃의 < head >태그에 삽입하는   `useServerInsertedHTML` hook을 사용하여 클라이언트 컴포넌트를 생성한다.
```js
'use client';

import { useStyledComponentsRegistry } from '../lib/styled-components';
import { useServerInsertedHTML } from 'next/navigation';

export default function RootStyleRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  const [StyledComponentsRegistry, styledComponentsFlushEffect] =
    useStyledComponentsRegistry();

  useServerInsertedHTML(() => {
    return <>{styledComponentsFlushEffect()};
  });

  return {children};
}

3.root layout의 자식들을 style registry component로 감싼다.

import RootStyleRegistry from './RootStyleRegistry';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        {children}
      
    
  );
}

styled-components를 사용하는 자식 컴포넌트 use client: 타사 npm 패키지의 구성요소에는 자체적으로 "클라이언트 사용"지침이 있기 때문에 서버 구성요소 내에서는 올바르게 작동하지 않는다.그렇기 때문에 css-in-js나 외부라이브러리 등을 사용 시에는 client components사용해 알려줘야한다.
```
// app/page.tsx
```

"use client";

import styled from "styled-components";

function Home() { return I'm homepage; } export default Home; const Container = styled.divbackground: red;;

*실습에서는 Tailwind CSS와 같은 CSS 파일을 출력하는 다른 방식을 사용하고 있다.

TIL98. Firebase V9로 CRUD 구현

Sun, 15 May 2022 07:17:09 GMT

firebase 사용해서 게시판 CRUD기능을 만들어보자.

Firebase v9

firebase는 벡엔드 기능을 클라우드 서비스 형태로 제공하기 때문에 백엔드없이 어플리케이션을 만들 때 사용하면 유용하다. firebase가 버전 업데이트를 하면서 문법 등에 많은 변화가 생겼다.

firebase SDK 설정 및 구성

firebase 프로젝트 생성 후 Firebase를 초기화하여 사용하려는 제품의 SDK를 사용하기

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
    appId: process.env.REACT_APP_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

.env

REACT_APP_API_KEY = abcdedf...
REACT_APP_AUTH_DOMAIN = abcdedf...
REACT_APP_PROJECT_ID = abcdedf...
REACT_APP_STORAGE_BUCKET = abcdedf...
REACT_APP_MESSAGIN_ID = abcdedf...
REACT_APP_APP_ID = abcdedf...

환경변수는 노출되면 보안상 위험하기때문에 env파일을 활용해야 한다.

변수명의 생성은 무조건 REACT_APP으로 시작
프로젝트 최상단에 위치할 것
개발 환경에서 개발서버가 실행중인 경우 환경변수 변경은 서버를 재시작해야 적용됨
create
addDoc 메소드를 사용하여 구현한다. addDoc(' 키를 통해 가져온 DB ' , ' payload ')
```
import { db } from '../../lib/fbase';
import { addDoc, collection } from 'firebase/firestore';
```

## read
read는 query, getDocs 메소드가 있다. query에는 여러 조건을 넣을 수 있는데 공식문서에서 참조가능하다.
```js
import { getDocs, collection } from 'firebase/firestore';
import { db } from '../../lib/fbase';

//전체 데이터 배열 가져오기
<리스트 페이지>
useEffect(() => {
        const fetchData = async () => {
            const snapshot = await getDocs(collection(db, 'board'));
            const listArr = snapshot.docs.map(doc => ({
                id: doc.id,
                ...doc.data(),
            }));
            setViewContents(listArr);
        };
        fetchData().catch(e => console.log(e));
    }, []);

//특정 데이터만 가져오기 - firebase에서 생성된 id로 url id 만들어주고, params로 id get 
<상세 페이지>
import { doc, getDoc } from 'firebase/firestore';
import { db } from '../../lib/fbase';
...
const { id } = useParams();

useEffect(() => {
        (async function fetchData() {
            const detailRef = doc(db, 'board', id);
            const res = await getDoc(detailRef);
            setData(res.data());
        })();
    }, []);

*html 태그 제거 후 나타내는 방법

그대로 db에서 받아온 데이터를 바인딩하면 html태그가 그대로 적용되어 출력되는 현상이 발생한다. html이 적용된 데이터를 html로 변환해서 사용해야하는데 이때 dangerouslySetInnerHTML 를 사용한다. 리액트에서는 보안적인 문제로 html형태로 글을 출력하는 기능을 제공하지 않기 때문에 dangerouslySetInnerHTML를 사용해서 대신 요청하여 태그를 적용시킨다.

//사용법

update

updateDoc 메소드 사용하여 구현한다.

import { addDoc, collection, doc, updateDoc } from 'firebase/firestore';

const handleSubmit = useCallback(
        async e => {
            e.preventDefault();
            // 최초 등록 일 경우
            if (!editingMode) {
                try {
                    await addDoc(collection(db, 'board'), boardContent);
                    navigate('/');
                } catch (e) {
                    console.log(e);
                }
            } else {
                // 수정 일 경우
                try {
                    const detailRef = doc(db, 'board', id);
                    await updateDoc(detailRef, { title: boardContent.title, content: boardContent.content });
                    navigate('/');
                } catch (e) {
                    console.log(e);
                }
            }
        },
        [boardContent],
    );

delete

deleteDoc 메소드 사용

import { doc, deleteDoc } from "firebase/firestore";

const deletePost = async () => {
        const detailRef = doc(db, 'board', id);
        await deleteDoc(detailRef);
    };

TIL97.Zustand

Mon, 02 May 2022 02:06:11 GMT

차세대 상태관리 라이브러리 'zustand'에 대해 알아보자.

왜 Zustand인가?

프론트 분야는 변화가 빠르게 성장한다. 그 중에서도 특히 상태관리는 다양한 툴들이 등장하고 발전해 나가고 있다. 가장 오래되고 유명한 상태관리를 떠올리면 단연 '리덕스'일 것이다. 하지만 요즘에는 여러가지 이유로 '리덕스'보다는 다른 도구를 선택하는 추세다.

리덕스의 단점

개념이나 사용법 등 러닝 커브가 높은 편이기 때문에 빠른 시일내에 도입해야 하는 프로젝트의 경우 좋은 선택이 아니다.
보일러 플레이트 코드(액션 타입, 액션 생성함수, 리듀서)가 많다.
작은 기능이라도 리덕스를 구현하는 순간 몇 개의 파일들을 준비해야 한다.
npm trend
주목받고 있는 라이브러리로 'jotai','zustand','recoil'이 있다. 그 중 zustand가 가장 사용량이 높다. recoil은 페이스북 개발진이 만들었다는 신뢰성이 있지만 zustand에 비해 버전 업데이트가 매우 느리다.

-> recoil: v0.7.2 zustand: v4.0.0 zotai: v1.6.5

recoil, jotai, zustand 비교하기

recoil

javascript로 작성
bottom-up 방식 : atom 단위로 상태관리
최소 단위 Atom을 만들기 위해 key가 필요함
provider 필요
jotai
typescript로 작성
recoil에 영향을 받아 만들어짐
bottom-up 방식 : atom 단위로 상태관리
Atom key가 필요없음(코드가 미세하게 줄어듬)
리액트 state 함수인 useState 와 유사한 인터페이스
provider 일반적으로 필요
zustand
- typescript로 작성
- 리덕스를 축소화시킨 느낌으로 리덕스와 유사함
스토어 형태
provider 필요없음 -> 앱을 래핑하지 않아도 되기 때문에 불필요한 리렌더링 최소화
Zustand 사용법

설치
```
npm install zustand
```
store 생성
```
// store.js
import create from "zustand";
```

const useStore = create((set) => ({ count: 0, increase: () => set((state) => ({count: state.count + 1 })) }));

export default useStore;

zustand에서 create함수를 꺼내온다.
`useStore` 저장소는 상태에 관한 변수들을 저장할 수 있는 곳이다.
### store 값 사용하기 
```js
import useStore from "store";

function App() {
  const { count } = useStore();

  return(
        
          {count}
        
    )
}

셀렉터 함수를 전달하지 않으면 스토어 전체가 반환된다.

state 변경하기

// store.js
  const useStore = create((set) => ({
    count: 0,
    increase: () => set((state) => ({count: state.count + 1 }))
}));

function App() {
  const { count, increase } = useStore();

  return(
        
          {count}
              
        
    )
}

set함수는 상태를 변경하는 함수로 create 함수에 Set을 변수로 넣어 원하는 함수를 정의할 수 있다. 상태변수가 너무 많아서 관리하기 힘들 때에는 useStore를 나눠서 각 각 관리할 수도 있다.

const useStore1 = create((set) => ({
    ...
}));
const useStore2 = create((set) => ({
   ...
}));

이외에도 ajax요청, 디버깅, 미들웨어도 가능하다.

TIL96. 메타마스크 지갑 연동(feat.web3-react)

Wed, 27 Apr 2022 09:19:29 GMT

메타마스크 테스트 네트워크의 지갑주소, 잔고를 화면에 뿌려보자.

Web3-react란?

리액트에서 web3의 Dapp과 관련된 특정 데이터를 최신상태로 유지해주는 state machine으로 기본 블록체인 API가 ethers.js인 react 라이브러리이다.

*web3js

web3.js는 내부적으로 HTTP나 IPC(프로세스 사이에서 통신을 가능하게 하는 기술)를 통해 JSON-RPC API를 호출하도록 되어있다. 이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본을 가지고 있다. 이더리움 노드들은 JSON-RPC로만 소통할 수 있기 때문에 web3.js로 개발자들이 쉽게 개발할 수 있도록 자바스크립트 인터페이스로 상호작용할 수 있도록 도와주는 역할을 한다.

설치 및 기본설정

npm i @web3-react/core @ethersproject/providers

// index.js
import ReactDOM from "react-dom";
import { Web3ReactProvider } from "@web3-react/core";
import { Web3Provider } from "@ethersproject/providers";
import App from "./App";

const getLibrary = (provider: any) => new Web3Provider(provider);

const rootElement = document.getElementById("root");
ReactDOM.render(
  
    
      
    
  ,
  rootElement
);

web3를 사용하려면 리액트 앱 루트에 Web3ReactProvider컴포넌트로 감싸줘야한다. 이 컴포넌트에 getLibrary함수를 props로 전달하는데 web3-react가 사용할 web3 provider를 제공하는 역할을 한다.

useWeb3React()

context 값에 접근할 수 있도록 해주는 hook

const {connector, library, chainId, account, active, error, activate, deactivate} = useWeb3React();

connector: 현재 dapp에 연결된 지갑의 connector 값
*library: web3 provider 제공
chainId: dapp에 연결된 account의 chainId
account: dapp에 연결된 지갑 주소
active: dapp 유저가 로그인 상태
activate: dapp 월렛 연결 기능 함수

deactivate: dapp 월렛 연결 해제 함수

function Wallet() {
    const {account, library, active, activate, deactivate} = useWeb3React();

const connectWallet = async () => {
      try {
          await activate(injected);
      } catch (err) {
          console.log(err);
      }
  };
}

지갑 연동

지갑을 dapp에 연결하기 위해서는 해당 지갑과 맞는 connector를 activate 함수에 인자로 전달해야 한다.(metamask-injectedConnector)

//설치
npm i @web3-react/injected-connector
// connectors.js
import {InjectedConnector} from '@web3-react/injected-connector';

export const injected = new InjectedConnector();

### 구현코드
```js
function Wallet() {
  const connectWallet = async () => {
        try {
            await activate(injected, (error) => {
                // 크롬 익스텐션 없을 경우 오류 핸들링
                if ('/No Ethereum provider was found on window.ethereum/')
                    throw new Error('Metamask 익스텐션을 설치해주세요');
            });
        } catch (err) {
            alert(err);
            window.open('https://metamask.io/download.html');
        }
    };
  return (
        
            {active ? (
                <>
                    
                        My Wallets
                        
                            {account?.substr(0, 8)}...{account?.substr(0, 8)}
                        
                    
                
            ) : (
                
            )}
        
    );
}

연결 버튼을 누르면 메타마스크 지갑과 연동되고, 관련된 데이터들이 렌더링된다. 기존에 메타마스크 익스텐션이 설치되어 있지 않은 경우, 에러 처리도 추가해 주었다.

⭐️library

위에서 언급한 context 값 'library'에서 getbalance에 접근할 수 있다. getbalance 속성 { _hex:string; _isBigNumber:boolean; } _hex 16진수이기 때문에 formatEther 라이브러리를 사용해서 10진수로 변환

    function Wallet () {
        const {account, library, active} = useWeb3React();
          const [balance, setBalance] = useState('');

      useEffect(() => {
        if (account) {
            library
                ?.getBalance(account)
                .then((result: IResult) => setBalance(result._hex));
        }
    }, [account, library]);

      return(
      
         {balance && Number(formatEther(balance)).toFixed(4)}
                            ETH
     
      )
    }

TIL95.블록체인 이해하기

Wed, 13 Apr 2022 08:42:37 GMT

블록체인의 개념과 관련 용어들에 대해 공부하고 정리해보자.

Web 3.0

web의 역사

-web 1.0시대 : 90년대 초~2000년대 중반, read only -> 유저와의 상호작용이 없고, 정보전달의 목적이 강함. -web 2.0 : 2000년대 중반 ~ 현재, read&write -> 유저들이 컨텐츠를 자유롭게 올리고 수정 가능, 기업들이 데이터를 독점하고 활용함.
- web 3.0
  2세대의 문제점으로 지적되고 있는 중앙화, 보안문제를 해결하고자 탄생(특정 플랫폼 기업이 데이터를 가지고 있기때문에 해당 기업의 보안이 뚫리면 개인정보 유출 문제가 발생할 수 있음) read & write & own
- 블록체인기술*로 데이터를 분산 저장 -> 데이터를 중앙 서버가 아닌 네트워크에 참여한 모두에게 나눠주는 기술이다. 이 기술을 위변조하려면 과반수의 장부를 해킹해야 하기때문에 기록을 안전하게 보관할 수 있다.
  블록체인의 동작원리
  각 블록은 데이터, 해당 데이터의 해시값, 해당 블록의 바로 이전 블록의 해시값을 가지고 있다.
  해시
  어떤 블록을 고유 식별하는 값으로 해당 블록과 그 안에 있는 내용의 고유값이다. 매 생생된 블록마다 그 블록의 해시값이 계산된다. 만약 블록 안에 있는 데이터를 변경하면 해시값도 완전히 다른 값으로 변경된다.
  이전 블록의 해시값
  이전의 모든 블록들을 하나의 사슬로 묶어준다. 어떤 블록의 데이터를 조작하면, 이 블록의 해시값이 변경된다. 다음 블록에 기록되어있는 직전 블록의 해시값이 다르기 때문에 무효가 된다. -> 블록체인이 조작, 해킹이 어려운 이유

*블록체인 안전성을 높이는 다른 방법 : 컴퓨터의 해시값 계산이 빠르기때문에 블록을 조작한 후 다른 블록의 모든 해시를 재빨리 재계산할 가능성도 있다. 이를 방지하기 위해서 새로운 블록을 만드는데 걸리는 시간을 10분이 소요되어 시간을 지연시킨다.

블록체인 기본용어

메인넷
기존 플랫폼(이더리움, 솔라나...)에 속하지 않고 프로젝트를 수행할 수 있는 '독립적인 플랫폼'으로서 블록체인 프로젝트가 출시되면 해당 프로젝트를 구현하게 해주는 네트워크
블록체인 종류
퍼블릭: 누구든지 블록체인 네트워크에 참여가 가능하다. 많은 사람들이 함께 참여하기 때문에 투명성이 강하고, 보안에 특화되어 있다. 하지만, 많은 사람들에 의해 합의가 진행되고 전체 네트워크에 전파하여 동기화해야하기 때문에 속도가 느리다. ex) 비트코인, 이더리움, 모네로 등 프라이빗: 허가받은 특정대상에게만 공개된다. 신뢰할 수 있는 사람들만 참여하여 트랜잭션 속도가 빠르다. 소수에 의해서 합의가 진행되기 때문에 일부 중앙화가 되어 보안성이 낮을 수 있다. ex) Hyper ledger fabric, R3 CORDA 등 하이브리드: 퍼블릭 + 프라이빗 유연하게 혼합한 블록체인 모든 거래는 비공개로 진행할 수 있으며, 필요할 때에는 검증 가능성을 위해 거래 내역을 개방할 수 있다. ex) 클레이튼
DApp(Decentralized Application)
블록체인 메인넷을 기반으로 동작하는 서비스
암호화폐(토큰/코인)
블록체인 네트워크에서 거래가 기록된 장부를 검증하고 연결하는 대가로 검증자(노드)에게 주어지는 보상 토큰: 독자적인 메인넷 x (다른 블록체인 네트워크 기반을 사용) 코인: 독자적인 메인넷 o
block confirmation
코인을 전송하게되면 일종의 확인절차를 거치게 되는데 이것을 'confirm'이라고 한다. 각 코인마다 정해진 컨펌의 횟수가 채워지면 전송이 완료된다. 하나의 블록이 생생되어 기존의 블록에 연결될 때 이때 해당 거래에서 첫번째 컨펌이 발생한다. (비트코인 6컨펌-컨펌당 10분, 이더리움 12컨펌)
DLT(분산원장기술)
거래정보를 기록한 원장을 중앙회된 서버가 아닌 분산화된 네트워크에 참여자 모두에게 저장 및 관리하는 기술로 블록체인은 분산원장기술이지만 모든 분산원장은 블록체인은 아니다.
ERC-20
Ethereum Request For Comment 20의 약자로써 이더리움 블록체인 네트워크에서 발행되는 토큰의 표준을 말한다. 제안서를 제출 후 사람들의 합의에 의해 통과되어 인터넷 표준이 되는 것을 RFC라고 하는데 ERC는 이더리움 RFC로 이더리움의 표준이 될 만한 내용들이다.

Wallet

블록체인과 훨씬 쉽게 상호작용할 수 있게 해주는 소프트웨어로 코인을 보관하는 1차적인 보안이 적용된다. 메타마스크나 카이카스 등의 지갑을 만들면, 지갑의 주소(public key)와 키(private key)가 발급되고, 키 오너는 해당 지갑에 대한 접근 권한을 얻는다. 주소는 공개키에 해당하며, 은행의 계좌번호와 같은 역할을 한다. 키는 개인키에 해당하며 계좌의 비밀번호와 같다. 공개키와 개인키는 한 쌍을 이루며, 지갑에는 여러 쌍이 존재할 수 있다. ㅣㅡ public key: 누구에게나 공유가능하며, 코인을 전송받을 때 사용된다. 또한 거래 내역의 유효성을 판단할 수 있다. ㅣ ㅣㅡ private key: 비밀유지되야 하는 키로 256비트의 난수(random number)로 구성된 값이다. 개인키를 통해 공개키를 생성한다.(반대의 경우는 불가능) 개인키를 한번 분실하게 되면 다시는 찾을 수 없고 개인키로 묶인 코인 역시 찾을 수 없기 때문에 주의가 필요하다.

주소

공개키로부터 생성되며, 숫자와 문자로 구성되어 있으며 '1'로 시작한다. 비트코인 주소는 외부에 공개되는 주소이며, 코인을 주고받기 위해 사용된다. 주소에서 공개키를 알아내는 것은 불가능하다.

*메타마스크: 이더리움 기반 암호화폐 및 토큰을 주고받을 수 있는 지갑

콜드월렛

암호화폐를 보관하기 위한 오프라인 데이터 저장 장치. 암호화폐 시스템 자체를 해킹하는 것은 불가능하지만 가상자산을 담아두는 거래소의 사용자 계정 및 지갑은 소유자 개인이 관리하는 방식이기 때문에 해킹의 대상이 될 수 있다. 콜드월렛은 인터넷에 연결되어 있지않는 오프라인 데이터 저장 장치이기때문에 바이러스나 백도어 프로그램 등 해킹 요소에 영향을 받지 않는다.

DID

블록체인 기술을 기반으로 한 분산 신원증명 기술을 말한다. 기존에 기술적으로 스마트폰에 담을 수 없었던 운전면허, 자격증 등은 필요할 때마다 증서를 발급받아 번거롭게 제출했었다. DID는 탈중앙화된 ID를 부여하여 스마트폰에 저장해서 위조가 불가능한 증명을 가능하게 해준다. 실제로 백신접종증명서에 DID를 활용했었음.

DID Syntax

하나의 DID는 문자열로 표현가능하며 3개의 부분으로 이루어져 있다.

did:sov:2k9dwkjrwioweio7a
scheme: method: DID Method-Specific Identifier

세미콜론으로 구분가능하며, 맨 처음 부분이 Scheme- 문자열이 DID임을 나타내는 prefix, 항상 did DID Method- DID document가 어떻게 생성되고 업데이트되는지를 정의한 것 DID Method-Specific Identifier - 메소드 내에서 사용되는 식별자

백준2667.단지번호붙이기(js)

Sun, 20 Feb 2022 13:27:14 GMT

DFS개념을 사용해서 알고리즘 문제 풀어보자.

문제

<그림 1>과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다. 대각선상에 집이 있는 경우는 연결된 것이 아니다. <그림 2>는 <그림 1>을 단지별로 번호를 붙인 것이다. 지도를 입력하여 단지수를 출력하고, 각 단지에 속하는 집의 수를 오름차순으로 정렬하여 출력하는 프로그램을 작성하시오.

풀이

주어지는 입력값을 이중배열로 담고, 행과 열을 이중for문을 이용해서 요소 요소를 방문한다. 집이 있고( =1 ), 방문한 적이 없는 곳에 dfs를 실행한다. dfs가 한번 수행되면 하나의 단지 전체가 방문처리 완료된 것이다.

현재 탐색타겟의 인접타겟으로 가기 위해 현탐색타켓을 중심축으로 동서남북 움직일 수 있는 범위를 나타낸 배열을 만들어준다.(위의 그림참고) 이때 x,y과 0보다 작거나 지도의 크기 N을 넘으면 안되기때문에 범위에 맞는 코드를 추가해준다.

코드

const solution = (n, material) => {
  const visited = [];
  const complex = [];
  let number = 0;
  //x,y축으로 움직일 수 있는 범위
const dx = [0, 0, 1, -1]; // 동, 서, 남, 북
const dy = [1, -1, 0, 0]; // 동, 서, 남, 북

for (let i = 0; i < n; i++) {
   visited.push(new Array(n).fill(false));
}

// 범위 체크
const rangeCheck = (i, j) => {
  if (i >= 0 && i < n && j >= 0 && j < n) {
    return true;
  }
  return false;
};

const DFS = (i, j) => {
  if (rangeCheck(i, j) && material[i][j] === 1 &&
    !visited[i][j]) {
    // 범위안에 들어가고 && 방문한적이 없으면 DFS 탐색
    visited[i][j] = true; // 방문 처리
    number++;
    for (let n = 0; n < dx.length; n++) {
      DFS(i+ dx[n], j + dy[n]);
    }
  }
};

  //이중그래프 전체 탐색
for (let i = 0; i < n; i++) {
  for (let j = 0; j < n; j++) {
    //집이 있고(1), 방문한 적이 없다면, 
    if (material[i][j] === 1 && !visited[i][j]) {
      DFS(i, j);
      complex.push(number);
      //초기화
      number = 0;
    }
  }
}
  complex.sort((a, b) => a - b); // 오름차순으로 정렬!
 const answer = [complex.length, ...complex];
return answer;
}


const material = [
[0,1,1,0,1,0,0],
[0,1,1,0,1,0,1],
[1,1,1,0,1,0,1],
[0,0,0,0,1,1,1],
[0,1,0,0,0,0,0],
[0,1,1,1,1,1,0],
[0,1,1,1,0,0,0]
]
solution(7, material);
//[ 3, 7, 8, 9 ]

94.BFS,DFS

Mon, 14 Feb 2022 10:30:41 GMT

완전탐색 종류 중 BFS, DFS에 대해서 알아보자.

DFS(깊이우선탐색)

아래쪽 level로 내려갔다가 더이상 아래 level이 없으면 가장 가까운 부모 노드로 거슬러 올라간 뒤 탐색하지 않은 다른 자식 노드를 탐색하는 방식이다.

탐색 시작 노드를 스택에 삽입하고 방문 처리를 한다. -> 스택의 최상단 노드에 방문하지 않은 인접한 노드가 있으면 그 노드를 스택에 넣고 방문처리를 한다. 방문하지 않은 인접 노드가 없으면 스택에서 최상단 노드를 꺼낸다. 2번의 과정을 수행할 수 없을 때까지 반복한다.

특징

BFS에 비해 메모리를 덜 잡아먹고, 특정 경로가 존재하는지를 판단할 때 유용하다.(ex)미로 게임)

실전문제(프로그래머스 '네트워크')

컴퓨터의 개수 n, 연결에 대한 정보가 담긴 2차원 배열 computers가 매개변수로 주어질 때, 네트워크의 개수를 return 하도록 solution 함수를 작성하시오.

i번 컴퓨터와 j번 컴퓨터가 연결되어 있으면 computers[i][j]를 1로 표현합니다.

computer[i][i]는 항상 1입니다.

function solution (n, computers)  {
let answer = 0;
// 방문 여부 체크
let visited = [];

function dfs (i) {
  visited[i] = true;
  for(let j = 0; j < n; j++) {
    if(!visited[j] && computers[i][j]) {
      dfs(j);
    }
  }
}
for(let i = 0; i < n; i++) {
  // 특정 인덱스에 방문하지 않았다면 해당 인덱스를 넘겨주면서 dfs호출 
  if(!visited[i]) {
    dfs(i);
    answer++;
  }
}
return answer;
}

const computers = [[1,1,0],[1,1,0],[0,0,1]]; solution(3,computers);

반복문을 돌려서 방문유무를 확인한다. 방문하지 않았다면, dfs함수를 탄다.

## BFS(너비우선탐색)
시작점을 방문하고 인접한 정점을 차례대로 방문하는 검색방법으로 트리의 각 depth에 있는 노드의 인접노드를 탐색하는 방식이다.

탐색 시작 노드를 방문 처리를 하고, 큐(QUEUE) 자료구조에 노드를 삽입한다. ->큐에서 최상단 노드를 꺼내고, 인접노드를 탐색 후, 방문처리하고, 큐에 넣는다. -> 선입선출 구조에 따라 먼저 들어온 노드를 꺼낸 후, 꺼낸 노드의 인접 노드를 살핀다. -> 방문처리하지않은 노드를 방문하고, 큐에 넣는다. -> 큐가 빌 때까지 계속 반복한다.
#### 특징
찾고자 하는 target node가 시작점으로부터 가까이 있다고 예상될 경우 사용한다. (ex)지도 목적지 최단거리, 페이스북에서 친구 추천)
 ### 실전문제(프로그래머스 '네트워크')
 ```js
function solution(n, computers) {
  let answer = 0;
  let visited = [];
  let queue = [];

  for(let i = 0; i < n; i++) {
   if(!visited[i]) {
     bfs(i);
     answer++;
   }
  }

  function bfs(i) {
    visited[i] = true;
    queue.push(i);

    while(queue.length) {
      //제거한 node 
      const currentNode = queue.shift();

      for(let j = 0; j < computers[currentNode].length; j++) {
        //i가 아니라  currrentNode를 사용해야 함, i를 사용하면 그냥 지나가는 숫자가 생김
        if(computers[currentNode][j] && !visited[j]) {
          visited[j] = true;
          queue.push(j);
        }
      }
    }
  }
  return answer;
}

개인 프로젝트⏰

Wed, 09 Feb 2022 02:48:59 GMT

"Time Log" https://time-log.netlify.app/

프로젝트 소개

시간을 효율적으로 집중하면서 쓰지 못한다는 생각에 유튜브에서 '집중하는 법'을 찾아봤다. 그 중에 눈에 들어왔던 방법이 꼼꼼하게 '시간을 기록하기' 였다. 몇가지 어플이 존재했지만, 마음에 드는 게 없어서 직접 만들어봐야지 생각했다. 나중는 기회가 되면 앱으로도 만들어보고싶다.

소셜 로그인

구글로그인을 통한 소셜로그인을 만들었다. 직접 로그인 기능을 만드는 것보다 간단하고 편했다.

Oauth

소셜 로그인의 핵심개념으로, 사용자의 패스워드없이도 권한을 위임받을 수 있는 기술을 말한다. 사용자 정보를 가지고 있는 웹 서비스에서 사용자의 인증을 대신 처리해주고, 접근 권한에 대한 토큰을 발급하면, 이를 이용해서 해당 웹서비스 API를 사용해 사용자 정보를 받아오거나 이를 이용해 session을 부여해 로그인 상태를 유지시킬 수 있다. 0. 그림에는 생략되어있지만 provider 내부에서 resourece server에서 authorization server로 인가책임을 위임하는 과정이 있다.

serverless로 구현

이번 프로젝트는 혼자 진행했기 때문에 serverless 서비스가 필요했다. firebase을 사용하여 CRUD 중 Create, Read를 구현해보았다.

cloud Firestore에 데이터 추가하기(add)

버튼을 눌렀을 때 'handleRecord'함수를 작동시켜 파이어베이스로 데이터를 보내 저장

const handleRecord = () => {
    handleRemove(selectedIdx);

    const now = new Date();
    const endAt = now.getHours() + ':' + now.getMinutes();
    const result = {
      name: list.name,
      img: list.img,
      timer: timer,
      date: date,
      startAt: startAt,
      endAt: endAt,
      identifier: userEmail,
    };
    db.collection('logInfo').add(result);
  };

데이터 가져오기

const getMyHistory = useCallback(async () => {
    const firestoreData = await db
      .collection('logInfo')
      .where('identifier', '==', userEmail)
      .get();
    const originData = firestoreData.docs.map(
      (doc) => doc.data() as IResultData,
    );
    setProcessingData(processData(originData));
  }, [userEmail]);
  useEffect(() => {
    getMyHistory();
  }, [getMyHistory]);

어려웠던 부분

firebase를 사용하다보니 데이터 형태 때문에 어려움을 겪었다. 내가 원하는 모양으로 db내에서 디테일하게 수정할 수가 없어서 데이터를 받아온 후, 클라이언트 내에서 데이터를 가공해주는 함수를 따로 만들어서 해결하였다.

들어오는 데이터
{
    "name": "공부",
    "startAt": "22:44",
    "identifier": "jolove.dev@gmail.com",
    "img": "/static/media/study.bf2b89b3c7dfeb32a0a2.png",
    "endAt": "21:44",
    "timer": 3600
}

원하는 데이터 형태
{
    "date": "2022.1.16",
    "infoByDate": [
        {
            "identifier": "jolove.dev@gmail.com",
            "img": "/static/media/study.bf2b89b3c7dfeb32a0a2.png",
            "endAt": "21:44",
            "timer": 3600,
            "name": "공부",
            "startAt": "22:44"
        },
        {
            "endAt": "22:48",
            "img": "/static/media/reading.1f9650abd36f9d59751b.png",
            "startAt": "22:48",
            "timer": 11,
            "identifier": "jolove.dev@gmail.com",
            "name": "독서"
        },
    ]
}```
```js
export const processData = (rawData: IResultData[]) => {
  let processingData: IProcessingData[] = [];
  const uniqueDate: string[] = [];

  // 날짜 가져오기
  const getDate = rawData.map((el) => el.date);
  // 유니크 날짜와 infodata 객체 만들어 주기
  const combination = Array.from(new Set(getDate)).map((date) => {
    uniqueDate.push(date || '');
    return { date: date, infoByDate: [] };
  });
  // 객체 틀 배열에 넣어주기
  processingData = [...combination] as IProcessingData[];

  rawData.map((item) => {
    const targetIdx = uniqueDate.indexOf(item.date || '');
    delete item['date'];
    return processingData[targetIdx].infoByDate.push(item);
  });
  return processingData;
};

새롭게 적용한 부분

img src 깔끔하게 정리하기
기존에 img태그 src에 변수를 할당하는 방법을 적용시켰다. 수정도 쉽고, 관리하기 더 편한 것 같다.
```
// 적용 이전
```
```
//적용 후
```

//index.js -> 모듈에 모아두기 export { default as a } from './a.png'; export { default as b } from './a.png'; export { default as c } from './a.png';

// content.js

- ### code-splitting
맨처음 페이지에 진입하면 웹팩에서 압축한 번들파일을 다운받는다.spa의 특징으로 눈에 보이지 않는 페이지의 전체 리소스까지 전부 다운받게 되는데 이때문에 초기 페이지가 보이기까지 시간이 지체된다. code-splitting을 사용하면 덩치가 큰 번들파일을 분할하여, 작은 사이즈의 파일로 분할하여 로딩시간을 줄일 수 있다.
```js
import { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; 
import PrivateRoute from 'routes/PrivateRoute';
import { loading } from 'assets/index';

const Login = lazy(() => import('pages/Login'));
const Record = lazy(() => import('pages/Record'));
const History = lazy(() => import('pages/History'));
const NotFound = lazy(() => import('pages/NotFound'));

function App() {
  return (
    
      
            
          
        }
      >
        
          } />
          
                
              
            }
          />
          
                
              
            }
          />
          } />
        
      
    
  );
}

lazy

동적으로 import가 이루어진다. ex) /record 페이지에 진입하면 Record 리소스만 다운받도록 lazy-loading시킨다.

suspense

컴포넌트가 동적으로 로드될 때 아무것도 로드되지 않는 순간, 에러를 발생시키지않고 suspense에 적용한 컴포넌트를 렌더링해준다.

TIL93. Recoil

Wed, 29 Dec 2021 05:21:06 GMT

또 다른 상태관리 라이브러리 'Recoil'에 대해서 알아보자.

Recoil?

페이스북에서 만든 상태 관리 라이브러리이다. 대표적인 상태관리 라이브러리 'redux'는 react만을 위한 상태관리 도구가 아니기에 react에 최적화되지도 않았고, 러닝커브도 높았다. 이에 비해 recoil은 hook을 써봤다면 쉽게 사용할 수 있는 수준이다.

Recoil 사용하기

...
import { RecoilRoot } from 'recoil';

ReactDOM.render(
  
    
        
    
  ,
  document.getElementById('root'),
);

전역에서 사용할 수 있도록 root에 recoilRoot 감싸주기

atom

// atom.ts
import { atom } from "recoil";

export const isDarkAtom = atom({
  key: 'isDark', // 식별자 역할
  default: false, // 초기값
});

기존의 상태관리 라이브러리에서 쓰이는 store와 유사한 개념으로, 상태의 단위를 말한다. atom의 상태가 업데이트되면, atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더링된다.

useRecoilValue

mport { useRecoilValue } from 'recoil';
import { isDarkAtom } from './atoms';

function App() {
  const isDark = useRecoilValue(isDarkAtom); //atom 값 받아오기
  return (
    <>
      
        
        
      
    
  );
}

컴포넌트와 atom을 연결하기 위한 도구

useSetRecoilState

// child.js
import { useSetRecoilState } from 'recoil';

const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleMode = () => {
    setDarkAtom((val) => !val);
  };

vaule를 수정할 수 있는 함수로, setState와 같은 방식으로 작동한다.

useRecoilState

import { useRecoilState } from 'recoil';

  const [isDark, setIsDark] = useRecoilState(isDarkAtom);

상태를 가져오거나 변경하는 행동, 둘 다 하고 싶을 때 사용한다. 즉, useRecoilValue + useSetRecoilState

selector값도 사용가능하다.
selector
recoil에서 파생된 상태로 selector는 순수함수여야한다.

get `RecoilValueReadOnly`

// A input에 'minute'을 입력하면 B input창에 'hour'로 바꿔주는 경우
export const minuteState = atom({
key: 'minutes',
default: 0,
});

export const hourSelector = selector({ key: 'hours', get: ({ get }) => { const minutes = get(minuteState); return minutes / 60; }, });

`get프로퍼티`를 통해 원래의 state를 가공하여 반환한다. **read-only **한 selector는 의존성을 기준으로 의존성 중 어떠한 것이 업데이트 되면 selector는 다시 평가된다. 
- #### set `writeable`

```js
// 반대로 B input창에 'hour'을 입력하면 A input창에서 'minute'으로 바꿔주는 경우 
export const minuteState = atom({
  key: 'minutes',
  default: 0,
});

export const hourSelector = selector({
  key: 'hours',
  get: ({ get }) => {
    const minutes = get(minuteState);
    return minutes / 60;
  },
  set: ({ set }, newValue) => {
    const minutes = Number(newValue) * 60;
    // set함수의 2가지 인자: 수정하고 싶은 recoil atom, 새로운 값
    set(minuteState, minutes);
  },
});

// useRecoilState - selector
const [minutes, setMinutes] = useRecoilState(minuteState);
//  array의 첫번째 요소는 위 selector의 get함수의 값, 두번째 요소는 set property를 실행시키는 함수
const [hours, setHours] = useRecoilState(hourSelector);

hourSelector 에서 minuteState를 변경하도록 만들었기에 두 곳에서 모두 값을 설정할 수 있게 되었다. 두 개의 atom을 각각 만드는 대신, 2개의 속성을 가지는 selector를 사용해서 atom의 값을 set하도록 만들 수 있다.

92.React Query

Tue, 21 Dec 2021 16:54:24 GMT

리액트 쿼리를 사용해서 server와의 비동기 로직코드를 줄여보자.

React Query?

state를 관리하는 라이브러리로 server와 client 사이의 비동기 로직들을 쉽게 만들어주는 도구이다.

그래서 React Query를 사용하면 뭐가 좋은데?

첫번째, 일련의 코드를 확 줄여준다. 데이터를 가져오기 위한 일련의 필수적인 코드들이 있다. 예를들어, 서버와 통신하기 위해서 fetch함수를 만들고, 받아온 데이터를 담을 state를 만들어주고, 받아오는 상태에 따라 loading 화면을 보여주기 위해 state를 만들고 세팅해주는 등의 세트 코드들이 있다. 하지만, react query와 함께라면 코드를 획기적으로 줄일 수 있다. 두번째, 데이터를 캐시에 저장해둔다. 전형적인 기존 코드를 사용했다면 뒤로가기를 눌렀을 때 loading화면이 보이지만, react-query 사용 시 로딩이 보이지 않는다. api를 다시 불러오는 행동을 하지 않고, api로부터 받아온 response를 캐싱해두기 때문이다.

사용방법

//index.tsx
import { QueryClient } from 'react-query';

// client 생성 
const queryClient = new QueryClient();

ReactDOM.render(
  
  //Provider 생성, props로 client 필요
    
      
        
      
    
  ,
  document.getElementById('root'),
);

QueryClientProvider 안에 있는 모든 것은 쿼리 클라이언트에 접근할 수 있다.

react query 사용 전 코드
// app.tsx
  const [info, setInfo] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    (async () => {
      const response = await fetch('https://api.com/information');
      const json = await response.json();
      setInfo(json.slice(0, 100));
      setLoading(false);
    })();
  }, []);
...
{loading ? (
        Loading...
      ) : (
        
          {info.map((item) => (
                     
          ))}
        
      )}
 ...

react query 사용 후 코드
// api.ts
export const fetchData = () => {
  return fetch('https://api.com/information').then((res) => res.json());
};

// app.tsx
  const {isLoading, data} = useQuery('allInfo', fetchData);

...
{isLoading ? (
        Loading...
      ) : (
        
          {data?.map((item) => (
                     
          ))}
        
      )}
 ...

useQuery는 두 가지의 인자를 받는데, 첫번째는 queryKey(고유식별자), fetcher함수이다.

위에서 말했듯이, react query를 사용 후 코드가 줄어들었다. 필요한 요소들은 useQuery가 return하는 것에서 받아올 수 있다. useQuery는 fetch함수(fetchData)를 불러오고 함수가 isLoading이면, true 함수가 끝나면, false를 알려준다. 또한, fetcher함수가 끝나면, 데이터를 data에 넣어준다.

*queryKey 같은 값을 갖는 경우

queryKey는 앞서말했듯이 고유한 이름을 가져야 한다. 퀴리키가 겹치는 경우에는 고유한 이름을 갖도록 바꿔줘야 한다. useQuery는 쿼리키를 배열로 취급하기 때문에 아래 예시와 같이 배열 안에 고유한 이름을 추가해준다.

*2개 이상의 useQuery hook사용할 경우

useQuery를 2개 이상 사용할 경우 isLoading,data 등의 리턴값들이 2개 이상이 된다. 이름이 중복되면 안되기 때문에 아래와 같이 이름을 따로 설정해야 한다.

//api.ts

export const fetchInfoData = (Id: string) => {
  return fetch(`https://api.com/'${Id}`).then((res) => res.json());
};

//app.tsx
const { Id } = useParams<{ Id: string }>();
const { isLoading: infoLoading, data: infoData } = useQuery(
    ['info', Id],
    () => fetchCoinInfo(Id),
  );
  const { isLoading: productLoading, data: productData } = useQuery(
    ['product', Id],
    () => fetchCoinTickers(Id),
  );
const loading = infoLoading || productLoading;
...
{loading ? (
        Loading...
      ) : (
        <>
            {infoData.name}
            {productData.price}
        
      )};
...

TIL91.완전탐색

Tue, 14 Dec 2021 03:43:46 GMT

완전탐색 알고리즘에 대해 공부해보자.

완전탐색

모든 경우의 수를 탐색하여 결과를 찾아내는 방법이다. 모두 탐색하기 때문에 정답을 100% 찾아낼 수 있지만, 경우의 수에 따라 실행시간이 비례된다. 즉, 탐색 범위가 넓다면 그만큼 찾아내는 일을 해야하기 때문에 효율적이지 못할 수 있다.

완전탐색 알고리즘 종류

Brute-force
비트 마스크
순열
백트래킹
DFS, BFS
Brute force
단순히 for문과 if문을 사용하여 모든 case들을 만들어 답을 구하는 방법이다.
```
function sequentialSearch (arr,x) {
for (let i = 0; i < arr.length; i++) { 
  if(arr[i] === x) {
    return i;
  }
}
return -1;
}  
sequentialSearch([1,2,4,8,18,27,37],2);
```
*조합
순열과 함께 자주 나오는 개념으로, 서로 다른 n개 중 순서를 생각하지 않고 r개를 택할 때, 이것은 n개에서 r개를 택하는 조합이라 한다. 선택 순서는 상관없다(ex)[1,2] =[2,1])

❓ n(4)개 중에 2개 뽑는 경우를 구해보자.

-접근법 '1' 고정하고 -> 나머지 [2, 3, 4] 중에서 2개 조합 [1, 2, 3] [1, 2, 4] [1, 3, 4] '2' 고정하고 -> 나머지 [3, 4] 중에서 2개 조합 [2, 3, 4] '3' 고정하고 -> 나머지 [4] 중에서 2개 조합 [] '4' 고정하고 -> 나머지 [] 중에서 2개 조합 []

'인셉션' 같다...

-코드

const getCombinations = (arr, selectNum) => {
  const result = [];
  if(selectNum === 1) {
    return arr.map((el) => [el])
  };
  arr.forEach((fixed, idx, origin) => {
    const rest = origin.slice(idx + 1);
    // arr 배열에서 해당 fixed를 제외한 나머지 값  

   const combinations = getCombinations(rest, selectNum - 1);
  // 현재 fixed를 제외한 나머지 숫자들을 재귀함수로 돌려 조합을 구한다.

    const attached = combinations.map((combination) => [fixed,...combination]);
      //  돌아온 조합에 떼어 놓은(fixed) 값 합치기

    result.push(...attached);
  })
  return result;
}

getCombinations([1,2,3,4],3);

// output
[
  [ 1, 2, 3 ],
  [ 1, 2, 4 ],
  [ 1, 3, 4 ],
  [ 2, 3, 4 ]
]

순열

순열은 서로 다른 n개에서 r개를 선택해서 정렬하는 가짓수이고, 순열의 수를 기호로 nPr로 나타낸다.선택 순서가 결과에 영향을 미친다.(ex)[1,2] ≠ [2,1])

1.fixed을 이용한 순열

❓ n개 중에 2개 뽑는 경우 구하기 -코드

const getPermutations = (arr, selectNum) => {
const result = [];
if(selectNum === 1) {
 return arr.map((el)=> [el]);
}

arr.forEach((fixed, idx, origin) => {
  const rest = [...origin.slice(0,idx), ...origin.slice(idx + 1)];
  const permutations = getPermutations(rest,selectNum - 1 );
  const attached = permutations.map((el) => [fixed,...el])
  result.push(...attached);
})  
return result;
}

getPermutations([1,2,3,4], 3); // output [ [ 1, 2, 3 ], [ 1, 2, 4 ], [ 1, 3, 2 ], [ 1, 3, 4 ], [ 1, 4, 2 ], [ 1, 4, 3 ], [ 2, 1, 3 ], [ 2, 1, 4 ], [ 2, 3, 1 ], [ 2, 3, 4 ], [ 2, 4, 1 ], [ 2, 4, 3 ], [ 3, 1, 2 ], [ 3, 1, 4 ], [ 3, 2, 1 ], [ 3, 2, 4 ], [ 3, 4, 1 ], [ 3, 4, 2 ], [ 4, 1, 2 ], [ 4, 1, 3 ], [ 4, 2, 1 ], [ 4, 2, 3 ], [ 4, 3, 1 ], [ 4, 3, 2 ] ]

#### 차이점 
조합코드와 거의 똑같고, rest부분만 다르다.

 |--- 현재 index보다 작으면 잘라낸다면, 조합

rest | fixed:1 => [2,3,4] => fixed:2 => [3,4] => ... | fixed:2 => [3,4] => fixed:1 => [4] => ... |--- 현재 index보다 작아도 존재해야한다면, 순열 fixed:1 => [2,3,4] => fixed:2 => [3,4] => ... fixed:2 => [1,3,4] => fixed:1 => [3,4] => ...

#### 2.swap을 이용한 순열
 ❓ 나올 수 있는 전체 경우 구하기
```js
const getPermutations = (arr) => {
  const result = []; //(4) result = [[1,2]]
  //(6) [1,2] => [2,1]
  const swap = (arrToSwap, idxA, idxB) => {
    const temp = arrToSwap[idxA];
    arrToSwap[idxA] = arrToSwap[idxB];
    arrToSwap[idxB] = temp;
  };

  const generate = (n , array) => {
    //(3) n = 1이 되었기때문에, result에 담아줌 
    //(8) result에 [2,1] push
    if(n === 1){
       result.push([…array]);
      return;
    }
    generate( n-1, array); //(2)  n = 2, -> generate(1,[1,2])

    //(5) 다시 g(2, [1,2])케이스로 돌아와서 for문을 탄다. n이 짝수이기 때문에 swap([1,2],0,1)
    for(let i = 0; i < n - 1; i++) {
      if(n % 2 === 0) {
        swap(array, i, n - 1);
      }else {
        swap(array, 0, n - 1 );
      }
      generate( n - 1, array); //(7) generate(1, [2,1])
    }
  }
  generate(arr.length, arr.slice()); //(1) generate 함수 호출 (2,[1,2])
  return result;
}

getPermutations([1,2,3]);

이 방법은 순열의 경우의 수가 사전적으로 정렬되어 나오지 않는다.

TIL90. Adapter Pattern

Tue, 26 Oct 2021 09:17:49 GMT

B를 A처럼 변경해서 A로 사용하자.

여행갈 때 전압이 다른 곳에서 기계를 충전하려면 전압을 바꿔주는 어댑터가 필요하다. 프로그래밍에서도 다른 클래스의 인터페이스를 클라이언트에서 사용하고자 하는 경우, 즉, 다른 인터페이스로의 변환이 필요할 때 어댑터가 필요하다.이때 사용할 수 있는 것이 어댑터 패턴이다.

예시

text를 입력하면 text를 그대로 프린트를 하는 코드

class Printer {
  constructor() {
    this.textArr = [];
  }

  pushText(text) {
    this.textArr.push(text);
  }

  print() {
    return this.textArr.join('');
  }
}

const instance = new Printer();
instance.pushText('Hello');
instance.pushText('World');

instance.print(); // 'HelloWorld'

만약 이 코드에서 텍스트마다 '#'를 붙여주는 수정사항이 있을 경우에는 어떡할까?

class HashTagPrinter {
  constructor() {
    this.textArr = [];
  }

  pushText(text) {
    this.textArr.push(text);
  }

  printWithHash() {
    return this.textArr.map(text => `#${text}`).join('');
  }
}

const instance = new HashTagPrinter();
instance.pushText('Hello');
instance.printWithHashTag(); // #Hello

만약 위의 예제와 달리 좀 더 복잡하고 긴 코드에서라면 비효율적인 방법일 것이다.

-> adapter pattern를 사용해서 관리해보자.

adapter pattern

class Adapter {

  constructor(printer) {
    this.printer = printer;
  }

  pushText(text) {
    this.printer.pushText(text);
  }

  print() {
    return this.printer.printWithHash();
  }
}

const instance = new Adapter(new HashTagPrinter());
instance.pushText(Hello);
instance.pushText(World);
// #Hello#World

실제로 사용하기

서버에서 프로토콜 버퍼로 받아온 타입을 클라이언트 타입으로 바꿔줘야 하는 경우가 생겼다. 처음에는 컨버팅하지 않고 클라이언트 타입으로 바로 바꿔줬다. 하지만 나중에 다른 컴포넌트에서도 사용할 경우가 많아진다면 일일히 코드를 작성해줘야하기 때문에 좋은 코드가 아니라는 소리를 들었다. 그래서 이때 adapter pattern을 사용하면 사용하고 있는 모든 컴포넌트를 고치지 않고 adapter pattern만 수정하면 되기 때문에 유용하다.

타입 코드

// 서버 타입
type ServerType = {
      typeCode: string;
      identifier: string;
      state: string;
};

//클라이언트 타입
type ClientType = {
    type: string;
      id: string;
      status: string;
};

전체 코드

// 변경 전
...생략
axios.get("url").then(({data}) => {
  setDataContainer(data.items.map((item: ServerType) => ({
    type: item.typeCode,
    id: item.identifier,
    status: item.state
  })),
 );
});

//변경 후
...생략
axios.get("url").then(({data}) => {
  setDataContainer(data.items.map(convert)
 );
});

const convert = (item: ServerType): ClientType => {
  return {
    type: item.type,
    id: item.identifier,
    status: item.state
  }
};

TIL89. ES모듈

Tue, 28 Sep 2021 05:08:47 GMT

"import { Module } from" 과 "import Module from" 의 차이점에 대해 알아보자.

ES module(import & export)

import, export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보내거나 불러올 때 사용한다.

Named Exports

여러 값들을 export/import하고 싶을 때, 사용한다. export 이름과 import 이름이 꼭 일치해야한다.

// module.js
export const plus = (a,b) => a + b;
export const minus = (a,b) => a - b; 

// main.js
import {plus, minus} from './module';

plus(1,2);

Default Export

모듈 당 한 개의 default export를 사용할 수 있다. 각 함수를 하나 하나 import하는 방식이 아니라 이 함수 전체를 포함하고 있는 한객의 객체를 디폴트로 export하는 방식이다. export 이름과 달리 원하는 이름으로 import할 수 있다.

// module.js
const plus = (a,b) => a + b;
const minus = (a,b) => a - b; 
export default {plus, minus};

//main.js
import mymodule from "./module"

module.plus(1,2);

star import

default export가 없는 파일을 한개의 파일로 모두 import 할 수 있다.

export const plus = (a,b) => a + b;
export const minus = (a,b) => a - b; 

//main.js
import * as myMath from "./module"

dynamic import

정적 import는 파일의 위에서부터 모든걸 import한다. 즉, 사용자가 보는 해당 페이지에 필요하지 않은 코드까지 다운받아야한다는 것이다. 필요한 최소한의 코드를 다운받아야 로딩 속도를 올릴 수 있다. 이때 Dynamic Import 를 사용하면, 런타임시에 필요한 module만 import 할 수 있다.

function doMatch() {
  import("./module.js") //모듈 import(2)
  .then(module => module.plus(1, 2)); // 모듈 함수 사용(3)
}
btn.addEventListener("click", doMath); //유저 버튼 클릭(1)

유저가 버튼을 클릭하면, 모듈을 import하고 사용

TIL88. zip array

Fri, 10 Sep 2021 06:17:59 GMT

다른 두 배열을 한 배열처럼 만들어보자.

해결상황

하드코딩된 부분을 맵을 돌려서 예쁘게 만들어보자. 목표: 서로 다른 두 배열을 가지고 하나의 맵을 돌려 화면에 나타내야 한다. -> zip array 활용하기

하드코딩, 수정해야 하는 부분


          위 : {summaryOfEvaluation?.count[0].value}
          아래 : {summaryOfEvaluation?.count[1].value} 
          왼쪽 : {summaryOfEvaluation?.count[2].value} 
          오른쪽 : {summaryOfEvaluation?.count[3].value}

zip 기본 예제

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];

const arr3 = arr1.map((el, i) => {
  return [el, arr2[i]];
});

console.log(arr3);
// [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

요소의 갯수가 정해져 있는 배열, 튜플형태

zip 적용하기

  //데이터 형태
 "summary": {
        "count": [
          {
            "type": "TOP",
            "value": 3
          },
          {
            "type": "BOTTOM"
            "value": 1
          },
            "type": "LEFT"
          "value": 0
          },
          {
            "type": "RIGHT"
            "value": 1
          }
        ],
          ...생략
      },

const organizeData = () => {
    const direction = ["위", "아래", "왼쪽", "오른쪽"];
    const value = summary?.count?.map((item) => {
      return item.value;
    });
    const zip = direction.map((key, i) => {
      return [key, value?.[i]];
    });
    return zip;
  };

//jsx 부분
 
          {organizeData().map(([key, value]) => {
            return (
              
                {key} : {value}
              
            );
          })}

우선 데이터에서 필요한 부분을 뽑아 배열형태로 만들어준다. 첫번째 배열에 map을 돌려서 배열의 첫번째 요소로 넣어주고, 두번째 요소로 인덱스값을 통해 두번째 배열의 값을 뽑아주는 튜플형태로 리턴해준다.

리팩토링

한번 더 간결하게!

const organizeData = () => {
  return direction.map(( key, i ) => [key, summary?.count?.[i]?.value])  
};

완성된 화면

위 : 3

아래 : 1

왼쪽 : 0

오른쪽 : 1

TIL87.forwardRef

Mon, 09 Aug 2021 04:45:38 GMT

ref를 prop으로 전달하는 방법에 대해 알아보자.

ref

forwardRef 알아보기 이전에 ref개념에 대해 간단하게 짚고 넘어가자. react를 사용할 때 DOM에 접근해야 하는 상황이 종종 발생한다. js에서 특정 DOM에 접근하기 위해서 getElementById와 같은 DOM Selector를 사용하는 것처럼 react에서는 ref를 사용한다.

//부모 컴포넌트
import React, { useRef } from "react";
import Input from "./components/Input";

const App = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  }

  return (
    <>
      
      
    
  );
}

//자식 컴포넌트
const Input = ({ ref }) => {
  return ;
}

위의 예시와 같이 부모컴포넌트에서 inputRef객체를 자식인 Input컴포넌트에 ref prop으로 넘긴다. 자식 Input컴포넌트는 ref로 넘어온 inputRef 객체를 다시 내부에 있는 < input >엘레먼트의 ref prop으로 넘겨주게 된다.
하지만 실행시켜보면 ref는 prop이 아니다 라는 오류가 뜬다. 리액트에서는 key,ref처럼 특수목적으로 사용되어 일반적인 용도로 사용할 수 없는 prop이 있기 때문이다. 이때 React컴포넌트에서 ref를 prop으로 사용하려면 react에서 저공하는 forwardRef()라는 함수를 사용하면 된다.

forwardRef

forwardRef를 사용하면 부모 컴포넌트로부터 하위 컴포넌트로 ref를 전달할 수 있게 된다. 이렇게 전달받은 ref를 HTML요소의 속성으로 넘겨줌으로써 함수 컴포넌트 역시 ref를 통한 제어가 가능해진다.

//부모 컴포넌트 코드 동일

//자식 컴포넌트
import React, { forwardRef } from "react";

 //인자로 props이외에 별도로 ref를 두번째 매개변수로 받는다.
const Input = forwardRef((props, ref) => {
  return ;
});

*주의점

forwardRef는 최하단 컴포넌트에 사용하는 것이 일반적이다. 상위 컴포넌트에 사용했을 경우, 상위 컴포넌트에 딸린 하위 컴포넌트가 많기때문에 그만큼 영향을 많이 끼칠 수 있기 때문이다. 컴포넌트 간의 결합도를 증가시켜 어플리케이션의 유지보수를 어렵게 만듦...

TIL86.useSelector, useDispatch, useCreate

Mon, 02 Aug 2021 01:19:16 GMT

useSelector, useDispatch, useCreate를 사용해서 리덕스 상태를 조회하고 사용해보자.

useSelector

useSelector Hook을 사용하면 connect함수를 사용하지 않고도 리덕스의 상태를 조회할 수 있다. 개념적으로 mapStateToProps와 비슷하다.

connect함수와 useSelector 차이점

connect 함수는 해당 컨테이너 컴포넌트의 부모 컴포넌트가 리렌더링될 때 해당 컨테이너 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 자동으로 방지되어 성능이 최적화된다. 이에비해, useSelector를 사용하여 리덕스 상태를 조회했을 때는 성능 최적화가 이루어지지 않기때문에 React.memo를 컨테이너 컴포넌트에 사용해줘야한다. export default React.memo(Container);

import { useSelector } from 'react-redux';

const ExampleContainer = () => {
    const target = useSelector(state => state.target);
    return ;
};

useDispatch

useDispatch Hook은 컴포넌트 내부에서 스토어의 내장함수 dispatch를 사용할 수 있게 도와준다.

import { useDispatch } from 'react-redux';
import { increase } from '../modules/counter';

const ExampleContainer = () => {
    const dispatch = useDispatch();
      return  dispatch(increase()) } />
}

* useCallback과 함께 사용하기

state가 바뀌어 컴포넌트가 리렌더링될 때마다 정의해놓은 함수들이 새롭게 만들어진다. 성능을 최적화시키기 위해서 useCallback과 함께 사용하는 것이 좋다.

const increase = useCallback( () => dispatch(increase()), [dispatch];

useSelector 최적화

리덕스 상태들을 조회할 때 비구조화 할당을 사용하여 객체를 다시 생성하는 방식을 취했기 때문에, react에서는 각각의 상태가 바뀌는 것의 여부를 파악하지 못하고 무조건 다시 렌더링을 하게된다. = 즉, 최적화에 불리하다는 말이다.

const { count, prevCount } =useSelector((state: RootState) => ({
  count: state.countReducer.count,
  prevCount: state.countReducer.prevCount,
}));

1) 독립 선언

공식문서의 해결방법 중 하나는 비구조화 할당을 사용하지 않고, 아래와 같이 각각의 값을 독립적으로 선언하는 방법이다.

const count = useSelector((state: RootState) => state.countReducer.count);
const prevCount = useSelector((state: RootState) => state.countReducer.prevCount);

각각의 상태변경여부를 파악할 수 있어 상태 최적화가 가능해진다. 위의 예제처럼 상태가 많지 않으면 사용할 법하지만, 속성이 많은 경우에 일일히 나열하게되면 코드가 길어져 가독성이 별로 좋지 않을 것이다.

2) shallowEqual

shallowEqual함수는 selector로 선언한 값의 최상위 값들의 비교여부를 대신 작업해준다.

 const { count, prevCount } = useSelector((state: RootState) => ({
    count : state.countReducer.count,
    prevCount: state.countReducer.prevCount,
  }),shallowEqual);

*주의사항 : 최상위 값만 비교한다는 점에 주목해야한다. 구조가 아래 예시와 같다면 prevCount.a,prevCount.b,prevCount.c는 비교대상이지만, prevCount.c.d는 비교대상이 아니다.

prevCount = {
   a : 0,
   b : 1,
   c : {d :2}
}

3)createSelector

reselect는 넘어오는 인자 중 하나라도 변경이 되어야만 재계산을 실행한다. createSelector에 정의된 selector들의 반환값을 마지막 인자인 함수 형태의 인자들로 순서대로 넘겨받게 된다. 객체 형태로 반환하는 코드를 유지하면서 최적화를 가능하게 해준다. 또한, selector를 분리함으로써 재사용할 수 있고, 다른 셀렉터를 조합하여 사용할 수 있다.

import { createSelector } from 'reselect';

const getCount = state => state.count;
const getPrevCount = state => state.prevCount;

const { count, prevCount } = createSelector(
    getCount,
      getPrevCount,
      (count, prevCount) => {
        return {
           count,
           prevCount                            
         }                               
    }
)

TIL85.Redux Toolkit

Tue, 13 Jul 2021 14:53:05 GMT

리덕스를 편리하게 사용할 수 있게 도와주는 🎁종합선물세트 '리덕스 툴킷'에 대해 알아보자.

Redux Toolkit이란?

리덕스를 사용하다보면 액션타입,액션생성함수, 리듀서 등 반복되는 코드,즉 보일러플레이트 코드때문에 피로감을 느낄 수 있다. 이때 리덕스 툴킷을 사용하면 코드를 좀 더 간결하게 만들어 줄 수 있다. 리덕스 툴킷은 리덕스의 종합선물세트로 redux thunk, immer, createaction 등이 내장되어 있다.

configureStore

toolkit을 사용하기 전에는 createStore()를 호출하고 root reducer함수를 전달하여 redux store를 사용했다. Toolkit의 configureStore는 createStore를 활용한API로 createStore를 래핑하여 만들어진 함수이기때문에 기본적으로 createStore와 동일한 기능을 제공한다.(store 생성) (no toolkit)

import { createStore } from 'redux';
import rootReducer from './module/rootReducer';

const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const store = createStore(rootReducer, devTools);

(with toolkit) createStore -> configureStore. configureStore함수는 여러 개의 인자 대신 지정된 하나의 object를 인자로 받으므로, reducer함수를 reducer라는 이름으로 전달해야 한다. 리듀서만 전달하면, 기본적으로 redux devtool와 middleware가 포함되어 있다.

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({ reducer: rootReducer });

middleware의 값을 배열로 전달하기

사용하고싶은 미들웨어를 지정하려면 middleware의 값을 아래와 같은 배열로 전달하면 된다.기본으로 제공하는 미들웨어에 logger를 추가하려면 getDefaultMiddleware를 사용하면 된다.

const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk, logger],
});

//getDefaultMiddleware 사용하는 경우
onst store = configureStore({
  reducer: rootReducer,
  middleware: [...getDefaultMiddleware(), logger],
});

createAction

createAction은 action을 간결하게 만들어 준다. (no toolkit)

const INCREMENT = "counter/increment"; // 액션
const DECREMENT = "DECREMENT";

// 액션 크리에이터 함수
const increment = () => {
  return {
    type: INCREMENT,
  };
}

const decrement = () => {
  return {
    type: DECREMENT,
  };
}
// or 인자가 있는 경우
function increment = (amount) => {
  return {
    type: INCREMENT,
    payload: amount,
  };
}

const action = increment(2);
// { type: 'INCREMENT', payload: 2 }

(with toolkit) createAction으로 액션을 전달하기만 하면 액션과 액션 크리에이터 함수가 만들어진다. 만약 이 생성함수를 호출할 때 prameter를 추가로 넣어준다면 알아서 payload에 값이 들어가게 된다.

import { createAction } from "@reduxjs/toolkit";

const INCREMENT = "INCREAMENT"; // 액션
const DECREMENT = "DECREMENT";

export const increment = createAction(INCREMENT);
export const decrement = createAction(DECREMENT);

// 파라미터가 있는 경우, 확실히 명시해주기위해 코드상으로 명시해줄 수도 있다.
export const increment = createAction(INCREMENT, (amount) => amount);

increment(); { type: 'INCREMENT' }
increment(2); { type: 'INCREMENT', payload:2 }

createReducer

기존에 reducer를 사용하기 위해서 switch 조건문으로 액션타입을 구분해 수행해야 했지만, toolkit을 사용하면 switch와 default를 사용하지 않고, 가독성을 향상시킬 수 있다. (no toolkit)

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;

    default:
      return state;
  }
};

(with toolkit)

// 액션타입 집어넣는 경우 ok
const counterReducer = createReducer(0, {
  [INCREMENT]: state => state + 1,
  [DECREMENT]: state => state - 1
})

//or 액션생성함수 집어넣는 경우 ok
const counterReducer = createReducer(0, {
  [increment]: state => state + 1,
  [decrement]: state => state - 1
})

=> 액션생성함수를 바로 집어넣을 수 있는 이유는 createAction함수가 toString메소드를 오버라이드했기 때문( ex)incerement 함수 => return INCREMENT)

createSlice

리듀서, 액션타입, 액션 생섬함수, 초기상태를 하나의 함수로 편하게 선언할 수 있게 해준다. 쉽게말해 action과 reducer를 다 가지고 있는 함수.

const counterSlice = createSlice({
  name: 'counter', //액션 경로를 잡아줄 해당 이름
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
})

const store = configureStore({
  reducer: counterSlice.reducer
})

기존에는 액션생섬함수와 액션타입을 선언해 사용했지만, createSlice에서는 Action을 선언하고, 해당 action이 dispatch되면 state를 가지고 action을 처리한다.reducers 안에 모든 기능이 합쳐져 있는 것이다.

immer

기존에 불변성을 유지하기 위해 전개연산자나 concat의 메소드를 사용했어야 했는데 Toolkit에서는 자동으로 불변성을 관리해주는 유틸을 가지고 있다. immer 라이브러리를 내장하고 있기때문에 더이상 리듀서에서 새로운 state객체를 만들어 리턴하지않고, state를 직접 변경해도 된다.