주 1회 작성하는 개발 블로그

Next.js & React Study (4)

Sun, 18 Dec 2022 00:00:00 GMT

들어가기 앞서

검색엔진최적화(SEO)를 위해서 사이트의 head안에 meta 데이터 관리가 중요합니다. 따라서 이번에는 Next.js에서 Meta Data를 처리하는 방법에 대해서 정리 하였습니다.

1. `<Head>` Component

Next.js 에서 페이지에 head를 추가하는 방법은 간단합니다. next/head 의 <Head> 컴포넌트를 사용하면 됩니다.

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

2. _app.js

head를 각 페이지마다 추가하지 않고 App 전체의 기본 head를 관리하고 싶은경우 _app.js에 추가하면 됩니다.

_app.js 는 모든 페이지에서 렌더링되는 애플리케이션 컴포넌트입니다. 모든 컴포넌트에 head를 추가하고 싶다면 아래와 같이 추가하면 됩니다. 물론 각 페이지의 <Head> component가 존재하는 경우 가장 최신의 <head> 정보로 덮어쓰기가 됩니다.

import type { AppProps } from 'next/app'
import Head from 'next/head'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

3. _document.js

_app.js 다음에 실행되며 _document.js는 전체 HTML 문서를 커스터마이징할 수 있게 해줍니다

쉽게 정리하면, 공통적으로 적용할 HTML 마크업을 커스텀 하는 공간으로 볼 수 있습니다. _document.js는 정적인 것중에 공통 적용할 사항들을 처리합니다.

_document를 작성할 때는 Document 클래스를 상속받는 클래스 컴포넌트로 작성해야만 하며, 렌더 함수는 꼭<Html>, <Head>, <Main>, <NextScript> 요소를 리턴해줘야 합니다.

_document에서 사용하는 <Head> 태그는 next/head가 아닌 next/document 모듈에서 불러와야 하는데요, _document의 <Head>태그에는 모든 문서에 공통적으로 적용될 내용(Ex. charset, 뷰포트 메타태그 등)이 들어가야 합니다.

주의 :_document는 언제나 서버에서 실행되므로 브라우저 api 또는 이벤트 핸들러가 포함된 코드는 실행되지 않습니다. 또한 <Main /> 부분을 제외한 부분은 브라우저에서 실행되지 않으므로 이곳에 비즈니스 로직을 추가해서는 안되며, _app과 마찬가지로 getStaticProps와 getServerSideProps 를 통해 데이터를 불러올 수 없습니다.

// 기본적인 _document의 형태

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

4. _app.js vs _document.js

head를 _app.js에 추가하여 전역적으로 사용해도 된다고 정리 하였습니다. 또한 _document.js에 사용해도 된다고 정리했습니다. 과연 어디써야 맞는걸까요?

이 의문에 대한 해답은 공식문서를 참고하여 정리 하였습니다.

_app.js는 React Element에 대한 초기화 과정을 담당합니다.

_.document.js는 정적인 <html>, <body>에 대한 설정을 하는 것으로 표기 되어 있습니다.

_app.js는 전역적으로 컴포넌트 관리
_document.js는 전역적 정적 HTML 마크업을 담당

위 내용으로 판단했을때 _document.js 에서 <Head>를 통한 meta data 관리가 타당하다 할 수 있습니다.

Next.js & React Study (3)

Sat, 17 Dec 2022 00:00:00 GMT

들어가기 앞서

Next.js에서 제공하는 Rendering의 종류와 사용이유 데이터 패칭 방법에 대해서 정리 하였습니다.

1. 왜 Next.js에서 별도의 Rendering 방법을 제공 할까요?

별도의 Rendering을 제공하는 이유는
앞서 Next가 해결 할 수 있는 문제에 대한 정리에서 React의 CSR(client side rendering) Rendering 방식을 해결하기 위해서 입니다.
이를 사전 렌더링(Pre-Rendering)이라는 개념을 이용해서 문제를 해결을 합니다.

2. 사전 렌더링(Pre-Rendering)

어떤 페이지가 있다고 가정해 봅시다.

이 페이지를 사용자에게 보여주려고 한다면 표준 React라면 사용자가 접근 하는 순간 제일 먼저 HTMML 파일과 Javascript 코드가 표시될 겁니다. 그리고 Javascript 코드가 실행되면서 스크린에 Rendering된 내용을 출력하게 될겁니다. 물론 이 속도는 아주 빨라서 사용자에게는 문제로 보이지 않을 수 있습니다. 하지만 서버로 부터 데이터를 받아서 해당 데이터로 화면을 구성하는 경우는 데이터를 불러올떄 까지 화면을 볼 수 없게 됩니다. (로딩이 필요한 이유)

페이지를 클라이언트로 전송된 뒤에만 데이터를 로딩하는 대신 Next.js는 페이지와 필요할 법한 모든 데이터가 있는 HTML 콘텐츠를 사전에 렌더링 합니다

바로 이것이 표준 React와의 차이점 입니다.
사전에 HTML 페이지를 완성해 놓고 완전히 채워진 HTML 파일을 클라이언트에게 전송하는 겁니다.

’잠깐.. 이게 무슨 소리지? ’ 어렵게 느껴질 수 있습니다.

간단히 말해서 React는 사용자가 접근하면 이제 화면을 그리기 시작합니다 반면 Next.js는 미리 화면을 그려놓고 사용자가 접근하면 전달 합니다.
Next.js는 단순히 사전 렌더링된 페이지를 재전송하는 데 그치지 않고 번들링된 JavaScript 코드를 모두 재전송합니다 이런 재전송을 해당 페이지에 대해 수화(hydrate)한다고 합니다

재전송된 JavaScript 코드는 나중에 사전 렌더링된 페이지를 대체하고 이후 React가 알맞은 작업을 수행합니다.

’방금 사전에 렌더링해서 전달해준다고 했는데..? Javascript 코드를 재전송? 수화(hydrate)?? ’ 위기가 찾아 옵니다.

여기가 마지막! 이해의 마지막 고비 입니다.
사전 렌더링된 페이지는 사용자에게 보여줄 페이지 자체를 HTML 콘텐츠로 변환하여 보여주는 것이라 Javascript 요소들이 하나도 없는 상태입니다. 이는 단순 클릭과 같은 이벤트 리스너들이 각 웹 페이지의 DOM 요소에 하나도 적용되어 있지 않은 상태라는 것 입니다.
이를 해결 하기 위해서 재전송된 Javascript 코드들이 사전 렌더링 된 HTML DOM 위에서 한번 더 렌더링 하면서 이벤트 리스너등 비어있던 부분들을 채워나가게 됩니다.

이 과정을 수화(Hydrate)라고 부릅니다. 용어가 다소 낯설게 느껴집니다. 사전적으로는 수분을 공급한다는 의미입니다. 앞서 정리한 내용처럼 사전 렌더링된 페이지는 이벤트 리스너등이 비어있는 HTML DOM 입니다.
여기에 수분을 공급하는 것 처럼 필요한 부분을 채워 넣는 것이라 이해 하면됩니다.

페이지의 수화(Hydrate), 즉 첫 번째 렌더링이 끝나고 나면 다시 표준 싱글 페이지 애플리케이션으로 돌아갑니다 그때부터는 React가 프론트엔드에서 모든 처리를 수행합니다. 그 후에 페이지가 바뀔 때, 즉 같은 웹사이트의 다른 페이지로 넘어갈 때는 해당 페이지가 사전 렌더링되지 않고 React를 통해 CSR로 동작합니다.

사전 렌더링(Pre-Rendering)이 동작하는건 최초 접속하는 페이지 뿐입니다. 따라서 React가 준비를 마칠 때까지 빈 페이지를 보는 대신에 모든 초기 콘텐츠가 포함된 사전 렌더링된 페이지가 표시되는 겁니다.

참고로 이때 처음에 재전송한 사전 렌더링된 페이지에는 주요 콘텐츠가 모두 포함되어 있는 상태이기 때문에 검색 엔진 크롤러도 전체 페이지에 이미 포함된 모든 콘텐츠를 살펴보게 됩니다. 따라서 SEO의 관점에서 표준 React 방식보다 유리 합니다.

이러한 사전 렌더링을 수행하기 위해서 Next.js에는 두 가지 사전 렌더링 방법 있습니다

2.1 정적 생성(Static Generation)

정적 생성의 개념은 간단합니다 빌드하는 동안 페이지를 사전 생성합니다. 사전 생성이라 함은 콘텐츠를 구성하는 모든 HTML 코드와 모든 데이터를 사전에 준비시켜 놓는다는 뜻입니다 빌드 시간 중 페이지가 사전에 구축되었기 때문에 배포되고 나면 구축된 페이지는 서버나 앱을 실행시키는 CDN을 통해서 캐시로 저장됩니다

Next.js는 기본적으로 동적 데이터가 없는 모든 페이지를 사전 렌더링합니다.

function About() {
  return <div>About</div>
}

export default About

위 같은 페이지가 있다면 외부에서 데이터를 가져올 필요가 없기 때문에 빌드시점에 정적 생성(Static Generation)되고 사전 렌더링 됩니다.

getStaticProps

사전 생성할 페이지에 어떤 데이터가 포함되어야 하는 경우는 어떻게 해야 할까요? 이에 대한 해답은 페이지 컴포넌트에서 가져올 수 있는 특정 함수에서 찾을 수 있습니다 이는 반드시 사용하는 페이지 컴포넌트의 내부에 있어야 하며 다른 React 컴포넌트가 아닌 pages 폴더의 component 파일 내부가 그 위치여야 합니다

그 안에서 특수한 비동기 함수인 getStaticProps를 가져오는데 이때 그 이름이 정확히 getStaticProps여야 합니다

export default function Blog({ posts }) {
  // Render posts...
}

// 빌드 시점에 호출됩니다.
export async function getStaticProps() {
  // 외부 데이터 가져오기
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 빌드시 props로 posts를 전달 받습니다.
  return {
    props: {
      posts,
    },
  }
}

Next.js에서 이 이름 그대로 함수를 찾기 때문입니다. 그리고 이 함수에서 주목할 점은 보통 서버 사이드에서만 실행되는 모든 코드도 실행할 수가 있다는 겁니다. 이 함수에서는 클라이언트 사이드 코드로만 제한되는 게 아니라 특정 클라이언트 사이드 API에 액세스가 없거나 윈도우 객체에 대한 액세스가 없는 일반적으로는 서버 사이드에서만 가능한 모든 코드도 실행할 수 있습니다.

더 나아가서 getStaticProps 내에 작성한 코드는 클라이언트에게 재전송되는 코드로 포함되지 않는다는 겁니다.

즉 해당 함수 내에 포함하는 코드는 클라이언트는 볼 수 없다는 것 입니다. 가령 데이터베이스 크리덴셜(credential)을 포함하고 있는 경우에는 이를 클라이언트 사이드에 노출하고 싶지 않을 테니 getStaticProps 내에 해당 코드를 작성하여 클라이언트 사이드에서 볼 수 없게 할 수 있습니다

이렇게 서버 사이드에서getStaticProps에 외부 데이터를 전달하여 정적 생성을 수행합니다. 하지만 여기서 한가지 생각해봐야 할 점이 있습니다.

자주 변경되는 데이터 형태를 가진 경우 사전에 정적 생성하는게 적당하지 않을 수 있습니다. 이를 해결하기 위해서 Next.js에서는 증분 정적 생성(ISR)이라는 내장 기능이 존재 합니다. 한번 생성해놓고 끝이 아니라 일정시간마다 다시 페이지를 업데이트 해주는 기능입니다. 사용방법은 간단합니다. 아래 예시 처럼 revalidation 옵션을 사용합니다.

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    revalidation: 10, // 10초 마다 생성한 페이지를 업데이트 합니다.
  }
}

getStaticPaths

Next.js의 라우팅 시스템에서 /pages/post/[id].js 의 형태로 동적으로 페이지를 생성할 수 있습니다. 하지만 이렇게 생성된 페이지는 Next.js에서 정적 생성을 수행하지 않습니다. 동적 페이지는 사실 여러 페이지가 뭉쳐 있기 떄문입니다. 어떤 페이지가 생성되는지 알려줘야 합니다. Next.js에서는 이를 getStaticPaths 를 사용해서 해결합니다. 아래는 사용 예시입니다.

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }], //동적 경로
    fallback: false, // false == paths 전달한 페이지 이외는 생성하지 않음
  }
}

export async function getStaticProps(context) {
  return {
    props: { post: {} },
  }
}

export default function Post({ post }) {
  // Render post...
}

한가지 fallback 옵션에 대해서 추가적으로 알아야 합니다. fallback 옵션이 true라면 요청이 서버에 도달하는 순간 paths에 정의되어 있지 않더라도 사전 생성을 수행합니다. 매우 유용한 옵션이지만 여기서 한가지 주의해야 할 부분이 있습니다. 사용자가 동적 경로에 대해서 url 을 통해서 접근하는 경우 동적 생성이 끝나지 않는 상태로 처리됩니다. 이를 해결하기 위해서는 fallback : 'blocking' 으로 값을 변경 한다면 생성이 끝난 후 정상적으로 페이지 접근 할 수 있습니다.

2.2 서버 사이드 렌더링(Server-Side Rendering)

때때로 매번 요청에 대한 사전 렌더링에 대해서 요청 객체에 대해서 접근이 필요 할 수 있습니다.(Cookie 접근)
하지만 앞서 설명한 두 방법으로는 실제 요청에 대해서 접근 할 수 없습니다. 이에 대한 해결방법은 다음과 같습니다.

getServerSideProps

내용은 간단합니다 페이지 요청이 서버에 도달할 때마다 실행되는 함수입니다 빌드 시간이나 매초마다 사전 생성하지 않고 서버에서만 작동하는 코드로 애플리케이션을 배포한 후 유입되는 모든 요청에 대해서만 재실행됩니다

export default function page(props) {
  return <div>{props.title}</div>
}

//매 요청마다 수행합니다.
export async function getServerSideProps(context) {
  const { params } = context
  return {
    props: {
      title: params.title,
    },
  }
}

Next.js & React Study (2)

Tue, 13 Dec 2022 00:00:00 GMT

들어가기 앞서

Next.js에서 제공하는 내장 라우팅 시스템이 무엇이고 어떤방식으로 사용하는지를 중점으로 정리 하였습니다.

1. File-system based router

Next.js에서 기본 내장 되어 있는 라우팅 시스템은 File-system 기반으로 정적 파일을 생성하여 동작합니다.

Next.js에서는 pages 폴더 아래 파일들이 라우팅 경로로 사용 됩니다.

Index routes

pages폴더 안에 index.js는 → / 경로를 표현합니다. 그렇다면 /blog를 표현하고 싶다면 어떻게 해야 할까요?
다음과 같이 pages/blog/index.js 표현 하면 됩니다.

Nested routes

중첩된 라우팅을 표현하고 싶다면 파일 구조를 중첩하여 사용하면 됩니다.
- /blog/post.js → /blog/post
- /blog/content.js → /blog/content
- /blog/settings/username.js → /blog/settings/username

Dynamic route segments

블로그 포스트를 에로 포스트 번호가 1번 2번 3번이 있다고 가정한다면 각각 /blog/1post.js, /blog/2post.js, /blog/3_post.js 이런식으로 작성한다는 것은 매우 비효율적입니다. 따라서 동적으로 라우팅 페이지를 구성하고 싶은 경우 아래와 같은 양식으로 파일을 작성해야 합니다.
- pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
- pages/[username]/settings.js → /:username/settings (/foo/settings)
- pages/post/[…all].js → /post/* (/post/2020/id/title) # 여러개의 인자를 받고 싶은경우

2. Linking between pages

Next.js 에서 페이지 간에 이동을 위해서는 next/router , next/link 를 사용 할 수 있습니다.

2.1 next/link

Link를 사용하는 기본적인 예시 입니다.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}

export default Home

2.2 next/router

Router를 사용하는 기본적인 예시 입니다.

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  }

  const handleClick = e => {
    e.preventDefault()
    router.push(href) // 페이지 이동
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

2.3 어느 방식을 사용해야 하나요?

router.push를 사용해서 화면을 전환하는 경우는 javascript에서 window.location을 하는 경우와 비슷합니다.

Link를 사용해서 화면을 전환하는 경우는 <a> tag를 이용해서 화면을 전환 하는 경우와 비슷합니다. 다만 Next.js에서의 일반적인 <a> tag와는 다르게client-side 의 라우팅을 지원합니다.

여기서 확인되는 차이점은 <a> tag가 생성된다는 점 입니다.

즉 <a> tag 가 생성된다는 것은 SEO 최적화에 더 유리하다는 것을 의미합니다. (<a> tag에 링크를 크롤링 봇이 이동 할 수 있습니다.)

추가적으로 link는 data prefetch 기능을 제공하여 사용자의 화면에 link 태그가 보이게 되면 해당 링크에 연결된 페이지를 서버에 요청하여 prefetch 할 수 있습니다. 미리 가져온 페이지가 존재하기 때문에 이동시 더욱 빠르게 이동 할 수 있습니다.

Next.js & React Study (1)

Sat, 10 Dec 2022 00:00:00 GMT

들어가기 앞서

이번 정리의 초점은 Next.js란 무엇인지, 어떤 문제를 해결하기 위해서 사용되는지를 중점적으로 정리 해보겠습니다.

1. Next.js란?

공식 NextJS 웹사이트인 nextjs.org에서는 프로덕션용 React 프레임워크라고 정의합니다. React에 대한 프레임 워크라는 정의가 다소 어색해 보일 수 있습니다. 쉽게 이해하기 위해서 한 가지 예시를 들어 보겠습니다.

React Application 에서 각 페이지에 대한 Routing이 필요하다고 생각해 봅시다. 이를 해결 하기 위해서는 일반적으로 react-router-dom 라이브러리의 추가 및 사용이 요구 됩니다. 하지만 Next.js를 사용한다면 Next.js에 내장된 라우팅 시스템을 이용하여 추가 서드파티 없이 개발을 진행 할 수 있습니다.

위에 설명한 간단한 예시 이외에도 서버사이드 렌더링 등 다양한 기능을 Next.js는 React개발에 필요한 기능들을 미리 추가하여 React 개발을 돕는 프레임워크 입니다.

2. 무엇을 해결 할 수 있는가?

SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)

Next.js가 무엇을 해결 할 수 있는지 설명하기 앞서 몇가지 개념에 대한 이해가 필요합니다.

렌더링(Rendering)

서버로부터 HTML,CSS, JS등 필요한 리소스 응답받아 DOM 트리를 생성합니다.
DOM 트리를 생성하는 동안 CSSOM(CSS Object Model)이 생성 됩니다.
DOM 트리와 CSSOM을 결합하여 Rendering Tree를 생성합니다.
레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기 픽셀로 변환합니다.
마지막으로 렌더링 트리의 각 노드가 브라우저 화면에 출력됩니다.

SSR(Server Side Rendering)

SSR은 보편적인 렌더링 방식으로 사용자에 페이지에 접근하는 경우 서버에서 모든 렌더링이 완료되어 사용자에게 전달 됩니다.

장점

검색엔진 최적화(SEO)
초기로딩속도가 빠름

단점

서버 요청마다 새로고침 발생

CSR(Client Side Rendering) 사용자의 서버에서 Javascript를 전달받고 이를 사용자 브라우져에 실행 하여 Rendering을 수행합니다. 이후 필요 서버와는 Rendering에 필요한 데이터 주고 받으며 동작합니다.

장점

트래픽 감소와 빠른 인터랙션

단점

초기 구동 속도가 느리다.
검색엔진 최적화(SEO)가 어렵다.

React는 일반적으로 CSR(Client Side Rendering)형태로 동작합니다. 그렇다면 CSR동작의 단점을 가진다는 것을 의미합니다.

그렇다면 React를 SSR 방식으로 동작을 바꾸면 될까요?

예를 들어 React로 개발된 웹 쇼핑몰이 있다고 가정해 봅시다.

판매 상품 페이지가 웹에 잘 노출 되는 것은 매우 중요한 지표입니다. 하지만 구매 페이지는 결제에 대한 빠른 인터렉션이 중요할 것 입니다. 즉 각 페이지의 특성에 맞는 렌더링 방식이 제공되어야 한다는 것입니다.

물론 React에서도 SSR(Server Side Rendering)이 지원됩니다. 하지만 제대로 추가하는것이 상당이 어려울 수 있습니다.

이 문제를 Next.js에서는 쉽게 해결 할 수 있습니다.

외부 라이브러리 설치

앞선 설명에서 정리 하였지만 외부 라이브러리를 추가를 필요로 하는 Routing 기능을 Next.js에서는 내장 파일기반 라우팅으로 쉽게 해결 할 수 있습니다.

Full Stack

NextJS를 사용하면 개발자들이 React 프로젝트에 백엔드 코드를 추가하는 작업도 수월하게 해결 할 수 있습니다.

예를 들어 파일 시스템으로 작동을 하거나 데이터베이스로 전달이 되는 독립적인 백엔드 코드도 포함하는 풀스택 React 프로젝트가 있을 때 NextJS를 사용하면 NodeJS 코드를 통해 아주 쉽게 백엔드 API를 React 프로젝트로 추가할 수 있습니다

react 작업 일지 - Project Setting (1)

Sat, 29 Oct 2022 00:00:00 GMT

1. Project Setting

1.1 NextJs 프로젝트 설치

메뉴얼 설치(create-next-app 미사용) 설치방법

1.2 Config Setting

todo : prettier, eslint, tsconfig, debug

todo : redux setting

1.3 Route

1.4 _app component

App의 모든 Component를 담고 있기 때문에 공통적인 Layout이나 Provider에 대한 설정을 작성하도록 합니다. 모든 Component에 영향을 주기 때문에 꼭 필요한 공통적인 요소인지 판단이 필요합니다.

작성예시 (중요도)

AuthProvider : 인증과 권한
ReduxProvider : Redux
SettingProvier : App의 셋팅을 관리
MotionLazyContainer : Framer Motion animation
ThemeProvider : 전체 Theme 관리
ThemeSettings Theme config 관리

export default function MyApp(props: MyAppProps) {
  const { Component, pageProps, settings } = props;

  const getLayout = Component.getLayout ?? ((page) => page);

  return (
    <Head>
      <meta name="viewport" content="initial-scale=1, width=device-width" />
    </Head>

    <AuthProvider>
      <ReduxProvider store={store}>
        <SettingsProvider defaultSettings={settings}>
          <MotionLazyContainer>
            <ThemeProvider>
              <ThemeSettings>
                {getLayout(<Component {...pageProps} />)}
              </ThemeSettings>
            </ThemeProvider>
          </MotionLazyContainer>
        </SettingsProvider>
      </ReduxProvider>
    </AuthProvider>
  )
}

알고리즘 기초 Chapter04

Sun, 25 Sep 2022 00:00:00 GMT

1. 큐

1.1 정의

큐(Queue)은 입력시 데이터에 대해서 순차적으로 저장합니다. 출력시 가장 먼저 저장된 데이터를 기준으로 출력됩니다. 이를 FIFO(First In First Out)구조로 저장하는 형식이라고 말합니다.

쉽게 이해하기 위해서 보통 줄서기를 예로 설명할 수 있습니다.
차례대로 줄을 서고(입력) 입장(출력) 순서는 가장 먼저 줄을 선 사람

입력을 ‘인큐(enqueue)’ 출력을 ‘디큐(dequeue)‘라고 표현합니다.

`python 사용법`	`설명`
queueList = [ ]	queue 생성
queueList.append(e)	입력
`queueList.pop(0)`	출력(가장 처음요소)

주의사항 List를 사용해 Queue를 사용하는 경우 출력시 가장 첫번째 요소를 출력하기 때문에 나머지 저장된 요소들이 모두 앞으로 한번 이동해야 되기 때문에 List의 크기가 크다면 비효율적입니다.

It is also possible to use a list as a queue, where the first element added is the first element retrieved (“first-in, first-out”); however, lists are not efficient for this purpose. While appends and pops from the end of list are fast, doing inserts or pops from the beginning of a list is slow (because all of the other elements have to be shifted by one).
출처: Python 공식문서

따라서 자료집합의 형태가 크다면 collections의 사용을 고려해야 합니다.

from collections import deque
  queue = deque(["Eric", "John", "Michael"])
  queue.append("Terry")
  queue.append("Graham")
  print(queue.popleft())                 #'Eric'
  print(queue.popleft())                 #'John'
  print(queue)                           #deque(['Michael', 'Terry', 'Graham'])

1.2 코드구현

# 회문판단 Queue
"""
given :
  noPalindromeSentence = '기찻길'
  yesPalindromeSentence = '역삼역'

when :
  print(checkPalindromeWithQueue(noPalindromeSentence))
  print(checkPalindromeWithQueue(yesPalindromeSentence))

then :
  queue을 이용해 구현 되어야 하며
  반환값은 False, True가 되어야 한다

"""


def checkPalindromeWithQueue(sentence):

    queue = []
    reversedQueue = []
    for s in sentence:
        queue.append(s.lower())

    for s in reversed(sentence):
        reversedQueue.append(s.lower())

    while queue:
        if queue.pop(0) != reversedQueue.pop(0):
            return False

    return True


noPalindromeSentence = '기찻길'
yesPalindromeSentence = '역삼역'

print(checkPalindromeWithQueue(noPalindromeSentence))
print(checkPalindromeWithQueue(yesPalindromeSentence))

2. 스택

2.1 정의

스택(Stack)은 입력시 데이터에 대해서 순차적으로 저장합니다. 출력시 가장 나중에 저장된 데이터를 기준으로 출력됩니다. 이를 LIFO(Last In First Out)구조로 저장하는 형식이라 말합니다.

쉽게 이해하기 위해서 보통 접시 쌓기를 예로 설명할 수 있습니다.
차레대로 접시를 쌓고(입력) 꺼내기(출력) 순서는 가장 나중에 입력한 접시

입력을 ‘푸시(push)’ 출력을 ‘팝(pop)‘이라고 표현합니다.

`python 사용법`	`설명`
queueList = [ ]	stack 생성
queueList.push(e)	입력
`queueList.pop()`	출력(가장 마지막 요소)

2.1 코드구현

# 회문판단 Stack
"""
given :
  noPalindromeSentence = '기찻길'
  yesPalindromeSentence = '역삼역'

when :
  print(checkPalindromeWithStack(noPalindromeSentence))
  print(checkPalindromeWithStack(yesPalindromeSentence))

then :
  stack을 이용해 구현 되어야 하며
  반환값은 False, True가 되어야 한다

"""


def checkPalindromeWithStack(sentence):

    stack = []
    reversedStack = []
    for s in sentence:
        stack.append(s.lower())

    for s in reversed(sentence):
        reversedStack.append(s.lower())

    while stack:
        if stack.pop() != reversedStack.pop():
            return False

    return True


noPalindromeSentence = '기찻길'
yesPalindromeSentence = '역삼역'

print(checkPalindromeWithStack(noPalindromeSentence))
print(checkPalindromeWithStack(yesPalindromeSentence))

3. 딕셔너리

3.1 정의

딕셔너리(dictionary)은 키(key)와 값(value)으로 대응 관게를 저장하는 자료 구조입니다. Java의 HashMap과 유사합니다. HashTable을 기반으로 한 자료구조 입니다.

insertKey = Sandara Dee keys = 입력하고자 하는 전체 크기

위 그림처럼 입력하고자 하는 키에 대한 index는 index = hash_function(insertKey) % keys 통해서 index 값을 구해내고, buckets[keys]에 insertKey와 value를 저장합니다.

이러한 저장된 자료구조는 키에 대한 값을 찾을때 키를 기준으로 바로 index에 접근할 수 있기 때문에 O(1~n)의 시간복잡도를 가집니다. key를 기준으로 바로 접근하기 떄문에 시간복잡도는 O(1)이 됩니다. 하지만 hash_function을 통해 index를 구하는 과정에서 collistion(충돌)이 발생시 처리 과정에서 최악의경우 O(n)의 복잡도를 보이게 된다.

주의사항(collistion) python3.5 미만에서는 입력에 대한 key 삽입순서가 보장되지 않습니다. python dictionary의 collision(충돌) 처리 방식은 Open addressing방식 중 Linear Probing 방식을 사용하였기 때문에 key 입력에 대한 순서가 보장 되지 않습니다.

collistion : hash_function(insertKey) % keys의 값이 동일한 경우
Open addressing : 추가적인 메모리할당 없이 hash table array의 빈공간을 사용하는 방법입니다.
Linear Probing : Open addressing의 구현방식중 하나로 충돌이 발생했을 때, 충돌이 발생한 Index뒤에 버킷중 비어있는 곳에 할당하는 방식입니다.

d = {'a': 0, 'b': 1, 'c': 2}
l = d.keys()
print(l) #['a', 'c', 'b']

`python 사용법`	`설명`
dictionary = {}	dictionary 생성
dictionary[key] = value	해당 dictionary에 key가 있다면 value를 Update, 없다면 key,value를 Insert
del dictionary[key]	dictionary에서 해당 key삭제
dictionary.clear()	모든 key를 삭제합니다.

3.1 코드구현

"""
given :
  studentDict = {
      39: 'Justin',
      14: 'John',
      67: 'Mike',
      105: 'Summer',
  }

when :
  print(findNameById(39))

then :
  key가 존재하는경우 return true
  그렇지 않으면 false
"""
studentDict = {
    39: 'Justin',
    14: 'John',
    67: 'Mike',
    105: 'Summer',
}


def findNameById(key):
    if key in studentDict:
        return True

    return False


#print(findNameById(39)) # true
print(findNameById(20))  # false

4. 그래프

4.1 정의

노드(정점)과 에지(간선)를 이루어진 구조의 관계를 표현한 자료구조 입니다. 간단히 말하면 점 과 선 사이의 관계입니다.

그래프 용어정리

위 이미지를 참고 부탁드립니다.

`용어`	`설명`
정점(vertex)	노드(node),위치라 표현되며 실제 데이터가 저장되는 공간입니다. (A,B,C,D)
간선(edge)	노드 간의 관계. 즉, 노드(A,B,C,D)를 연결하는 선입니다.
인접 정점(adjacent vertex)	하나의 정점에서 간선에 의해 직접 연결되어 있는 정점을 말합니다. A의 인접 정점은 B, C, D 입니다.
차수(degree)	정점에 연결된 간선의 수를 뜻 합니다. 위 그래프에서 정점 A의 차수는 3입니다.
방향그래프	간선의 방향이 존재하는 그래프입니다. 해당 방향으로만 이동이 가능합니다.
진입차수(in-degree)	방향그래프에서 외부 노드에서 나가는 간선이 수를 뜻합니다.
진출 차수(out-degree)	방향그래프에서 외부 노드에서 들어오는 간선이 수를 뜻합니다.
인접 행렬 (Adjacency Materix)	그래프의 연결 관계를 이차원 배열로 나타내는 방식입니다.
인접 리스트 (Adjacency List)	그래프의 각 정점에 인접한 정점들을 연결리스트(Linked List)로 표현하는 방법이다.

4.2 코드구현

"""
# graph 인접행렬
given :
  정점  (A, B, C, D)
  무방향 간선 [(0,1),(0,2),(0,3),(2,3)
  주어졌을때

when :
  graph = adjacencyMatrix()
  graph.setVertex('A')
  graph.setVertex('B')
  graph.setVertex('C')
  graph.setVertex('D')

  graph.insertUndirectedEdge(0, 1)
  graph.insertUndirectedEdge(0, 2)
  graph.insertUndirectedEdge(0, 3)
  graph.insertUndirectedEdge(2, 3)

then :
  출력이 다음과 같아야 한다.
       A B C D

  A :  0 1 1 1

  B :  1 0 0 0

  C :  1 0 0 1

  D :  1 0 1 0

"""


class AdjacencyMatrix:

    def __init__(self):
        self.MAX_VTXS = 256
        self.size = 0
        self.vertices = []
        self.adjMatrix = []

    def getVertex(self, i):
        return self.vertices[i]

    def setVertex(self, node):
        if self.size > self.MAX_VTXS:
            return
        self.vertices.append(node)
        self.size = self.size + 1

    def getEdge(self, m, n):
        return self.adjMatrix[m][n]

    def setEdge(self, m, n, value):
        try:
            self.adjMatrix[m][n] = value
        except:
            self.adjMatrix.append([0 for i in range(len(self.vertices))])
            self.adjMatrix[m][n] = value

        try:
            self.adjMatrix[n][m] = value
        except:
            self.adjMatrix.append([0 for i in range(len(self.vertices))])
            self.adjMatrix[n][m] = value

    def insertUndirectedEdge(self, m, n):
        self.setEdge(m, n, 1)
        self.setEdge(n, m, 1)

    def drawGraph(self):
        print('    ', end=' ')
        for i in range(self.size):
            print(self.getVertex(i), end=' ')

        for i in range(self.size):
            print('\n')
            print(self.getVertex(i), ': ', end=' ')
            for j in range(self.size):
                print(self.getEdge(i, j), end=' ')
        print('\n')


#정점 삽입 (A, B, C, D)
graph = AdjacencyMatrix()
graph.setVertex('A')
graph.setVertex('B')
graph.setVertex('C')
graph.setVertex('D')

graph.insertUndirectedEdge(0, 1)
graph.insertUndirectedEdge(0, 2)
graph.insertUndirectedEdge(0, 3)
graph.insertUndirectedEdge(2, 3)

graph.drawGraph()

"""
# graph 인접리스트
given:
  3개 vertex(정점)과 (0,1) (0,2) 간선(edge)가 주어졌을때
when:
  V = 3
  graph = AdjacencyList(V)
  graph.addEdge(0, 1)
  graph.addEdge(0, 2)
  graph.drawGraph()
then:
  출력이 다음과 같아야 한다.

  vertext:0
  0 -> 2 -> 1

  vertext:1
  1 -> 0

  vertext:2
  2 -> 0
"""


class AdjacencyList:

    def __init__(self, vertices):
        self.V = vertices
        self.graph = [None] * self.V

    def getLinkNode(self, data, pointer):
        return {'data': data, 'pointer': pointer}

    def addEdge(self, source, target):

        self.graph[source] = self.getLinkNode(data=target,
                                              pointer=self.graph[source])
        #if it is an undirected graph.
        self.graph[target] = self.getLinkNode(data=source,
                                              pointer=self.graph[target])

    def drawGraph(self):

        for i in range(self.V):
            print('vertext:{0}\n{0}'.format(i), end="")
            temp = self.graph[i]

            while temp:
                print(" -> {}".format(temp['data']), end="")
                temp = temp['pointer']
            print(' \n')


V = 3
graph = AdjacencyList(V)
graph.addEdge(0, 1)
graph.addEdge(0, 2)
graph.drawGraph()

'''
DFS(Depth First Search)

given:
  6개 vertex(정점)과 (0,1), (0,2), (0, 3), (1, 2),(1, 3),(1, 4),(2, 0),(2, 4),(3, 0),
  (4, 1),(4, 5),(5, 2),(5, 4) 간선(edge)가 주어졌을때

when:
  V = 6
  dfsGraph = dfsWithAdjList(V)
  dfsGraph.addEdge(0, 2)
  dfsGraph.addEdge(0, 3)
  dfsGraph.addEdge(1, 2)
  dfsGraph.addEdge(1, 3)
  dfsGraph.addEdge(1, 4)
  dfsGraph.addEdge(2, 0)
  dfsGraph.addEdge(2, 4)
  dfsGraph.addEdge(3, 0)
  dfsGraph.addEdge(4, 1)
  dfsGraph.addEdge(4, 5)
  dfsGraph.addEdge(5, 2)
  dfsGraph.addEdge(5, 4)
  print(dfsGraph.display(1))


then:
 [1, 4, 5, 2, 0, 3]
'''

class dfsWithAdjList():

    def __init__(self, V):
        self.vertex = V
        self.graph = [[] for i in  range(self.vertex)]

    def addEdge(self, source, target):
        self.graph[source].append(target)

    def display(self, startNode):

        visited = []
        stack = [startNode]
        while stack:
            '''
              dfs에서 stack을 사용하는 이유는
              시작 vertex가 1인경우 아래와 같이 진행된다. 따라서 수직적으로 검색하기 위해서 queue를 사용해야한다.
              1st
              visited = [1]
              queue = [2,3,4]

              2st
              visited [1,4]
              queue = [3,4,5]

            '''
            n = stack.pop()

            if n not in visited:
                visited.append(n)

                stack += set(self.graph[n]) - set(visited)
        return visited


V = 6
dfsGraph = dfsWithAdjList(V)
dfsGraph.addEdge(0, 2)
dfsGraph.addEdge(0, 3)
dfsGraph.addEdge(1, 2)
dfsGraph.addEdge(1, 3)
dfsGraph.addEdge(1, 4)
dfsGraph.addEdge(2, 0)
dfsGraph.addEdge(2, 4)
dfsGraph.addEdge(3, 0)
dfsGraph.addEdge(4, 1)
dfsGraph.addEdge(4, 5)
dfsGraph.addEdge(5, 2)
dfsGraph.addEdge(5, 4)
print(dfsGraph.display(1))

'''
#bfs
given:
  6개 vertex(정점)과 (0,1), (0,2), (0, 3), (1, 2),(1, 3),(1, 4),(2, 0),(2, 4),(3, 0),(4, 1),(4, 5),(5, 2),(5, 4) 간선(edge)가 주어졌을때

when:
  V = 6
  bfsGraph = bfsWithAdjList(V)
  bfsGraph.addEdge(0, 2)
  bfsGraph.addEdge(0, 3)
  bfsGraph.addEdge(1, 2)
  bfsGraph.addEdge(1, 3)
  bfsGraph.addEdge(1, 4)
  bfsGraph.addEdge(2, 0)
  bfsGraph.addEdge(2, 4)
  bfsGraph.addEdge(3, 0)
  bfsGraph.addEdge(4, 1)
  bfsGraph.addEdge(4, 5)
  bfsGraph.addEdge(5, 2)
  bfsGraph.addEdge(5, 4)
  print(bfsGraph.display(1))


then:
 [1, 2, 3, 4, 0, 5]

'''
from collections import deque


class bfsWithAdjList():

    def __init__(self, V):
        self.vertex = V
        self.graph = [[] for i in range(self.vertex)]

    def addEdge(self, source, target):
        self.graph[source].append(target)

    def display(self, startNode):

        visited = []
        '''
          bfs에서 queue을 사용하는 이유는 bfs는 기준 노드 기준으로 인접 노드들을 탐색하나가게 됩니다.
          시작 vertex가 1인경우 아래와 같이 진행된다. 따라서 수평적으로 검색하기 위해서 queue를 사용해야한다.
          1st
           visited = [1]
           queue = [2,3,4]

          2st
           visited [1,2]
           queue = [3,4,0]

        '''
        queue = deque([startNode])

        while queue:
            n = queue.popleft()
            if n not in visited:
                visited.append(n)

                queue += set(self.graph[n]) - set(visited)
        return visited


V = 6
bfsGraph = bfsWithAdjList(V)
bfsGraph.addEdge(0, 2)
bfsGraph.addEdge(0, 3)
bfsGraph.addEdge(1, 2)
bfsGraph.addEdge(1, 3)
bfsGraph.addEdge(1, 4)
bfsGraph.addEdge(2, 0)
bfsGraph.addEdge(2, 4)
bfsGraph.addEdge(3, 0)
bfsGraph.addEdge(4, 1)
bfsGraph.addEdge(4, 5)
bfsGraph.addEdge(5, 2)
bfsGraph.addEdge(5, 4)
print(bfsGraph.display(1))

알고리즘 기초 Chapter03

Sun, 18 Sep 2022 00:00:00 GMT

1. 순차탐색

1.1 정의

찾고자 하는 결과에 대해서 순차적으로 하나씩 비교하며 탐색 하는 것을 말합니다.

이를 순차 탐색(sequential search)이라 정의합니다.

하나씩 비교하며 결과에 도달하는 방식이기 때문에 최악의 경우 전체 리스트의 모든 원소와 비교해야 하는 경우가 생기게 됩니다. 최악의 경우 n크기의 리스트에서 원소를 찾는경우 n 경우의 비교가 필요하며 이는 계산 복잡도 O(n)을 의미합니다.

1.2 코드구현

	# 순차탐색


	def sequentialSearch(numberList, targetValue):

		# 입력: numberList:숫자 리스트, targetValue: 찾는값

		# 출력: numberList에서  targetValue 의 index

		for index in range(0, len(numberList)):  #전체 리스트를 순차적으로 비교
			if targetValue == numberList[index]:

				return print(f'targetValue의 Index {index}')  # targetValue의 index

		return print('해당값은 존재하지 않습니다.')  #값이 없는 경우


	numList = [1, 2, 3, 4, 5]

	sequentialSearch(numList, 3)

	sequentialSearch(numList, 10)

	# numberList에서 중복된 값들에 대한 targetIndexList 만들기


	def getTargetList(numberList, targetValue):

		targetIndexList = []
		for index in range(0, len(numberList)):
			if targetValue == numberList[index]:
				targetIndexList.append(index)

		if targetIndexList:
			print(f'찾고자 하는 targetValueIndexList : {targetIndexList}')
		else:
			print("찾고자 하는 값이 존재하지 않습니다.")


	numberList = [1, 3, 3, 5]
	getTargetList(numberList, 3)
	getTargetList(numberList, 11)

2. 선택 정렬

2.1 정의

주어진 리스트를 순차적으로 선택 비교하여 원하는 크기의 순서로 정렬 하는 알고리즘을 말합니다.
가장 작은 값을 찾아서 가장 앞의 값과 교환하는 방식입니다.

주어진 리스트 중에 최소값을 찾는다.
그 값을 맨 앞에 위치한 값과 교체한다(패스(pass)).
맨 처음 위치를 뺀 나머지 리스트를 같은 방법으로 교체한다.
비교하는 것이 상수 시간에 이루어진다는 가정 아래, n개의 주어진 리스트를 이와 같은 방법으로 정렬하는 데에는 Θ(n2) 만큼의 시간이 걸린다.
선택 정렬은 알고리즘이 단순하며 사용할 수 있는 메모리가 제한적인 경우에 사용시 성능 상의 이점이 있다.
비교 횟수가 입력 크기의 제곱에 비례하는 시간 복잡도가 O(n2)인 알고리즘

2.1 코드구현

#선택정렬
"""
given :
  numList = [1, 5, 3, 9, 7]

when :
  selectionSort(numList) # numList를 선택정렬을 구현한 함수에 인자로 전달

then :
  numList === [1, 3, 5, 7, 9] 오름 차순위로 정렬되어야 한다

"""


def sortingIndex(x, i, j):

    x[i], x[j] = x[j], x[i]


def selectionSort(numList):
    n = len(numList)
    for currentIndex in range(0, n - 1):
        changeIndex = currentIndex

        #currentIndex를 기준으로 전체 list를 비교하여 가장 작은 값의 index를 구한다.
        for compareIndex in range(currentIndex + 1, n):
            if numList[compareIndex] < numList[changeIndex]:
                changeIndex = compareIndex

        sortingIndex(numList, currentIndex, changeIndex)
        #print(numList)

numList = [4, 9, 2, 1, 3]
selectionSort(numList)
print(numList)

3. 삽입 정렬

3.1 정의

삽입 정렬은 자료 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입함으로써 정렬을 완성하는 알고리즘을 말합니다.

k번째 반복 후의 결과 배열은, 앞쪽 k + 1 항목이 정렬된 상태이다.

주어진 리스트 중에 index = 1의 값 선택 (numList[i])
그 값을 맨 앞에 위치한 값과 교체
맨 처음 위치를 뺀 나머지 리스트를 같은 방법으로 교체
이미 정렬된 리스트의 경우가 아닌 경우 삽입 정렬의 계산 복잡도는 선택 정렬과 같은 O(n2)

3.1 코드구현

# 삽입 정렬

def insertSort(numList):
    n = len(numList)
    for i in range(1, n):
        insertValue = numList[i]

        compareIndex = i - 1 # insertValue의 바로 이전값

        while compareIndex >= 0 and numList[compareIndex] > insertValue:
            #compareIndex의 value가 더 큰 경우의 값을 바로 다음 값 위치로 변경
            numList[compareIndex + 1] = numList[compareIndex]
            #compareIndex의 앞 값들을 비교하기 위해서 index를 하나씩 감소
            compareIndex -= 1
        numList[compareIndex + 1] = insertValue  # 찾은 삽입 위치에 key를 저장


numList = [4, 2, 5, 1, 3, 9, 7]
insertSort(numList)
print(numList)

알고리즘 기초 Chapter02

Wed, 14 Sep 2022 00:00:00 GMT

1. 팩토리얼

1.1 정의

팩토리얼은 1부터 n까지 연속한 숫자를 차례로 곱한 값입니다.

아래는 팩토리얼을 이해하기 위한 예시 입니다.

	1! = 1
	2! = 1 × 2 = 2
	3! = 1 × 2 × 3 = 6
	n! = 1 × 2 × 3 × … × (n -1) × n
	단, 0!은 1이라고 약속합니다.

1.2 코드구현

	# 입력: n
	# 출력: 1부터 n까지 연속한 숫자를 곱한 값

	def factorial(n):
		num = 1                        # 곱을 계산할 변수
		for i in range(1, n + 1):      # 1부터 n까지 반복(n + 1은 제외)
			num = num * i              # 곱셈 연산으로 수정
		return num

	print(factorial(1))                 # 1! = 1
	print(factorial(5))                 # 5! = 120
	print(factorial(10))                # 10! = 3628800

2. 재귀호출

2.1 정의

재귀 호출(recursion)은 어떤 함수 안에서 자기 자신을 부르는 것을 말합니다.

2.2 코드구현

	# 1부터 n까지의 합을 재귀호출을 이용하여 표현

	def sumByRecursion(n):
		if n < 1:
			return n
		n = n + sumByRecursion(n - 1)
		return n

	if __name__ == '__main__':
			result = sumByRecursion(3)
			print(result)

	# 숫자 n개 중에서 최댓값을 찾는 재귀 호출

	numList = [1, 3, 5, 6]
	maxValue = numList[0]
	def getMaxValue(numLength,maxValue):
	numLength = numLength - 1
	if numLength < 1:
		return maxValue
	maxValue = maxValue if maxValue >= numList[numLength]  else numList[numLength]
	getMaxValue(numLength,maxValue)
	return maxValue

	print(getMaxValue(len(numList),maxValue))

#피보나치 수열을 재귀 방식으로 구현

def fibonacci(n):
    if n <= 1:
        return n

    n = fibonacci(n - 2) + fibonacci(n - 1)
    return n


print(fibonacci(6))

3. 하노이의 탑

3.1 정의

하노이의 탑(Tower of Hanoi)은 퍼즐의 일종이다.
세 개의 기둥과 이 기둥에 꽂을 수 있는 크기가 다양한 원판들이 있고, 퍼즐을 시작하기 전에는 한 기둥에 원판들이 작은 것이 위에 있도록 순서대로 쌓여 있습니다.

게임의 목적은 다음 두 가지 조건을 만족시키면서, 한 기둥에 꽂힌 원판들을 그 순서 그대로 다른 기둥으로 옮겨서 다시 쌓는 것입니다.

한 번에 한개의 원판만 옮길 수 있습니다.
가장 위에 있는 원판만 이동할 수 있습니다.
큰 원판이 작은 원판 위에 있어서는 안됩니다.

하노이의 탑 문제는 재귀 호출을 이용하여 풀 수 있는 가장 유명한 예제 중의 하나입니다.

3.2 코드구현

#하노이의 탑 구현

	def hanoi(frm, to, n, count):

		if n == 1:
			print(f'{frm} {to} : {count}')
			return 1
		else:
			empty = 6 - frm - to
			count += hanoi(frm, empty, n - 1, count)
			print(f'{frm} {to}: {count}')
			count += hanoi(empty, to, n - 1, count)

		return count


	print('원반의 개수: ')
	numberOfDisk = int(input())
	print('원반들의 시작 위치: ')
	startLocation = int(input())
	print('옮겨야 할 위치: ')
	desLocation = int(input())
	print('\n')
	totalCount = hanoi(startLocation, desLocation, numberOfDisk, 0)
	print(f'총 이동 횟수: {totalCount}')

Function Declarations VS. Function Expressionsin Javascript

Mon, 15 Aug 2022 00:00:00 GMT

글을 시작하기 전에

Javascript에서 함수 선언(function declaration), 함수 표현식(function expression), 에 대해서 사용법이 아니라 ‘언제 왜 함수 선언과 표현식 중 어떤 것을 사용해야 해야 할 것인가’ 라는 기준에 대해서 정리 하였습니다.

특징

함수 선언

function declaration(함수 선언)에 대해서 먼저 살펴 보도록 하겠습니다. 함수 선언이 함수 표현식과 다른 주요 특징은 호이스팅(Hoisting) 여부에 있습니다.

호이스팅 이란?
var 로 선언한 표현식(let과 const로는 불가)나 function declaration(함수 선언)을 실행 단계에서 해당 Scope의 맨 위로 옮기는 것을 말합니다.
함수는 해당 Scope 에서 참조, 호출이 가능하다.
var 는 해당 Scope 에서 참조, 할당이 가능하다.

//호이스팅 예시
hoisted() // logs "foo"

function hoisted() {
  console.log('foo')
}

notHoisted() // TypeError: notHoisted is not a function
//함수 표현식으로 생성
var notHoisted = function() {
  console.log('bar')
}

함수 표현식

함수 표현식이 함수 선언과 다른 주요 특징은 클로저(Closure)에 있습니다.

클로저(Closure)란?
“A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

[도서] 객체지향의 사실과 오해

Sun, 07 Aug 2022 00:00:00 GMT

글을 시작하기 전에

누군가 ”객체지향이 뭔가요?” 라는 질문을 받는다면 한번 쯤은 들어봤거나 듣게될 ~~붕어빵을 만들기 위해서 붕어빵틀을 Class로 생성하는.. 클래스 상속을 통해..~~
붕어빵 이야기를 하고 있었습니다.

문득 기능 구현에 급급했던 시절이 지나 부끄러움과 결핍이 찾아왔습니다. 내 스스로 더 이상 객체지향을 붕어빵 만으로는 설명이 되지 않았습니다. 언젠가 이 정리를 되돌아 보며 다시한번 결핍을 느끼길 바라며 정리 하였습니다.

객체지향의 정의

책을 읽고 난 후 내게 객체지향은 요구된 문제를 해결하기 위해 상태와 행동을 가지는 객체가 부여된 책임과 역할을 메시지를 통해 협력하는 것이다.
추후 되돌아 보기 위해서 지금의 이해에 바탕을 키워드 단위로 정리 해보겠습니다.

객체

저자가 말하는 객체지향을 이해하기 위해 가장 선결되어야 했던 것은 객체에 대한 제 인식의 변화 였습니다.

기존 ’객체란 실세계를 모방하기 위해서 상태와 행동을 포함하여 클래스를 만들어 생성한 것’ 인식에서
객체는 실세계에 대한 모방을 위한 것이 아니며 역할과 책임을 가지며 상태와 행동을 내포 함으로써
세계속에서 구분되는 특질 과 자율성을 가진 개체라는 점 이였습니다.

기존과 가장 큰 인식의 차이는 실세계에 대한 모방이 아니라는 점과 자율성을 가진다는 것 이였습니다.
실세계에 대한 모방이 아니라는 점이 처음에는 무슨말인가 싶었습니다.
이를 이해 하기 위해서 먼저 ‘내가 이해하고 있는 실세계가 무엇인가?’ 라는 고민이 생겼습니다.
고민 끝에 실세계와 객체지향속 객체의 차이를 다음과 같이 정리 하게 되었습니다.

‘내가 그의 이름을 불러주기 전에는 그는 다만 하나의 몸짓에 지나지 않았다.’ 라는 유명한 시 구절을 떠올려 봅시다.
실세계에서는 관측자인 나를 기준으로 존재의 유무가 달라지는 세상을 바라봅니다.
하지만 객체지향의 세계 속에서는 메시지를 기준으로 모두 자율성을 가진 존재로 바라본다는 것입니다.
책에서 예로 보여주었던 손님과 메뉴판의 관계를 통해서 쉽게 이해 할 수 있었습니다.

메뉴판 객체의 차이는 다음과 같다고 생각해 봅시다.
실세계에서는 메뉴판 객체는 관측자인 손님이 읽어줘야 하는 수동적 존재입니다.
반면 객체지향에서 메뉴판 객체는 ‘주문에 메뉴가 필요해’ 메시지의 요청에 메뉴를 응답해주는 마치 살아 있는 능동적 존재입니다.

따라서 객체지향의에서의 객체는 능동적이고 자율성을 가지는 개체 이기 때문에 실세계에 대한 모방이 아니다 라는 이해를 할 수 있었습니다.

상태와 행동

책임과 역할

객체의 책임과 역활은 객체

메시지와 협력

협력의 의미를 받아 들이므로써 비로서 객체지향에서 객체간의 협력의 의미와 목적을 알게 되었습니다. 여기서 협력이란 객체가 각자의
‘각 객체들이 서로 협력해서 문제를 해결한다는 의견은 객체지향속 세상이 아니라 실제 개발환경을 생각해 보면 필수불가결한 방식이 아닐까?’

클래스를 통해 객체를 생성하여 요구사항을 구현하여 문제해결은 가능하다.
단순한 요구사항을 넘어 복잡한 요구사항이 생긴다면 하나의 클래스로 생성한 객체를 통해
‘모든 문제 해결 해야 할까?’

협력할 필요없는 객체가 존재한다면 서로 책임과 역활을 가지는 동료들이 이 오만한 객체를 수정하기 위해서 서로가 서로의 불필요한 연결을 경험하며 개발하게 될 것이다. 라는 생각에 도달 하게 되었습니다.

객체지향은 실세계의 모방이 아니다.

협력하는 과정 속에서 특정한 역할을 부여받는다.

역할이란 단어는 의미적으로 책임을 내포하고 있다.

자율적이라는 단어의 뜻은 자기 스스로이ㅡ 원칙에 따라 어떤 일을 하거나 자기 스스로를 통제하여 절제하는 것을 의미한다.

객체를 상태와 행동을 한께 지닌 실체라고 정의한다.

객체는 다른객체가 무엇(what)을 하는지 알지만 어떻게(how)하는지는 알지못한다.

메시지를 통해 보내는쪽을 송신자 받는쪽을 수신자로 정의한다.

상태는 행동의 결과이다.

추상화의 수준 이익 가치는 목적에 의존적이다.

추상화 어떤 양상 세부사항, 구조를 좀 더 명확하게 이해하기 위해 특정 절처나 물체를 의도적으로 생략하거나 감춤으로써 복잡도를 극복하는 방법이다.

추성화는 복잡도를 극복하기 위해서 사물간은 공통점을 취하고 차이점으ㅡㄹ 버리고 세부사항을 제거한 상태를 말한다.

분류는 추상화를 진행하기 위한 필터다.

타입은 추상화다

문맥에 따라 협력이 달라진다.

책임은 객체의 공용 인터페이스로 구성한다.

클래스간의 관계가 중요한것이 아니라 객체가 협력안에서 어떤 책임과 역할을 수행할 것인지 결정하는 것이다.

클래스는 협력과 책임의 집합이 정해진후 이를 구현하기 위한 도구이다.

객체지향이 올바른 객체에 올바른 책임을 할당하는 것과 관련된 모든 것이라면 협력이라는 문맥 안에서 객체를 생각하는 것은 올바른 개체지향 애플리케이션을 구현하는 것과 관련된 모든 것이다.

객체지향 시스템에서 가장 중요한 것은 충분히 자율적인 동시에 충분히 협력적인 객체를 창조하는 것이다.

객체지향 시스템의 목적은 사용자의 요구를 만족시킬 수 있는 기능을 제공하는 동시에 이해하기 쉽고 단순하며 유연한 상호작용을 제공하는 객체들의 공동체를 구축하는 것이다.

객체지향에서 다형성을 만족시킨다는 것은 객체들이 동일한 책임을 공유한다는 것이다. 다형성에서 중요한것은 송신자의 입장이다.

객체지향의 기본개념은 책임을 수행하는 자율적인 객체들의 협력을 통해 구축된다.

훌륭한 객체지향적 설계는 어떤 객체가 어떤 메시지를 전송할 수 있는가? 어떤 메시지를 이해 할 수 있는가?

유즈케이스는 사용자와 시스템 간의 상호작용을 보여주는 텍스트다.

유즈케이스는 사용자가 바라보는 외부 관점에 대한 집합이다.

도메인 모델은 안정적인 구조를 설계하기 위해서 , 유케이스는 불안정한 기능을 서술하기 위해서

typescript 타입설계시 유의점

Sat, 09 Jul 2022 00:00:00 GMT

타입설계

Good Interface

유효한 상태와 무효한 상태를 둘 다 표현하는 타입은 혼란을 초래하기 쉽고 오류를 유발하게 됩니다.

유효한 상태만 표현하는 타입을 지향해야 합니다. 코드가 길어지거나 표현하기 어렵지만 결국은
시간을 절약하고 고통을 줄일 수 있습니다.

좋은 인터페이스를 설계하기 위해서는 먼저 나쁜 인터페이스에 대해서 생각해봐야 합니다.

아래 간단한 상태 인터페이스와 사용예시를 살펴 봅시다.

interface State {
  name: string;
  isLoading: boolean;
  error?: string
}
function LoginPage(state: State) =>{
  if(state.IsLoading){
   	return (<Loding />
  }else if(state.error){
 	return <Error />

 return <UserName name={state.name} />
}

React - Tutorial 문서정리

Thu, 14 Apr 2022 00:00:00 GMT

1. 작성 이유

문서에 기반한 정리하는 연습을 해보고 싶어서 작성해보려고 합니다.
공식문서를 따라 해보면서 튜토리얼을 목차를 따라 가보면서 제가 튜툐리얼을 따라가면서 중요하다 생각하는 개념 위주로 정리했습니다.
옆에 공식문서를 띄어놓고 같이 봐주시기 바랍니다.

2. 정리

Before We Start the Tutorial

the tic-tac-toe 게임을 만들어 나가면서 주요 개념에 대해서 설명한다고 합니다.

이 튜토리얼을 따라가기 위해서는 ES6 버전의 Javascript의 arrow functions, classes, let, 그리고 const 특징을 알아야 합니다.

리엑트에 집중할 수 있도록 선수지식에 대해서는 제외하고 정리를 하였습니다.

Setup for the Tutorial

이 튜토리얼을 실습하기 위해서는 브라우저를 통한 방법과 자신의 로컬 환경을 구축하고 실습하는 방법을 2가지를 지원합니다.

개념학습에 집중하기 위해서 브라우저를 통한 코드 작성 방법을 선택하겠습니다.

Overvieew

What Is React?

리엑트는 선언적이고 효율적이며 유연한 자바스크립트 라이브러리 입니다.

선언적, 효율적, 유연한 이라는 키워드는 튜토리얼을 진행해 나가면서 점차 경험할 수 있었습니다.

컴포넌트라는 작고 독립된 코드를 통해서 복잡한 UI를 구성합니다. 앞으로 이 컴포넌트라는 단위를 기준으로 리엑트에 대해서 이해 해보도록 합시다.

튜토리얼에서 가장 처음 접하게 되는 컴포넌트는 Class형태의 React.Component 입니다.
```
class ShoppingList extends React.Component {
 render() {
   return (
     // 화면에 출력하고 싶은 데이터
     <div className="shopping-list">
       <h1>Shopping List for {this.props.name}</h1>
       <ul>
         <li>Instagram</li>
         <li>WhatsApp</li>
         <li>Oculus</li>
       </ul>
     </div>
   )
 }
}

// Example usage: <ShoppingList name="Mark" />
```
전체적인 코드는 XML의 형태와 비슷합니다.

render()라는 함수의 return 메소드를 통해서 React element를 반환하게 됩니다. 이를 통해 화면에 React element가 랜더링 됩니다.

쉽게 말해서 화면에 뿌려줄 부분에 해당합니다.(Rendering) 시작부터 여러 개념들이 나오기 시작하면서 위기가 찾아 오기 시작합니다..

모든 개념들을 이해하면서 진행하면 좋지만 이번에는 리엑트를 이해하고 사용하는데 필요한 기본적인 개념부분을 먼저 정리 하였습니다.

여기서 눈여겨 봐야할 코드는 {this.props.name} 입니다. props 란 propertiess의 줄임말로 컴포넌트가 가지고 있는 속성으로 다음으로 나올 state와 함께 리엑트를 사용함에 있어서 제일 많이 접하는 키워드입니다.

React element는 아래와 같은 형태로 빌드되어 화면에 출력 되게 됩니다. 단 xxx.JSX 라는 확장자의 파일로 React 코드를 작성한다면 아래와 같은 작성하게 번거로운 방식으로 코드를 작성하지 않아도 됩니다.
```
return React.createElement(
 'div',
 { className: 'shopping-list' },
 React.createElement('h1' /* ... h1 children ... */),
 React.createElement('ul' /* ... ul children ... */)
)
```
<ShoppingList name="Mark" /> 이처럼 작성된 컴포넌트는 <div />태그를 사용하듯 동일한 방법으로 사용 할 수 있습니다.

Inspecting the Starter Code
Starter Code.를 통해 튜토리얼을 진행합니다.

3가지의 컴포넌트를 구성하게 됩니다.
- Square
- Board
- Game

Passing Data Through Props
이제 본격적으로 Props를 통해서 데이터를 넘기는 방법에 대해서 배우게 됩니다.
설명되는 코드를 따라가보며 이해하기 위해 노력합시다.
추가적으로 코드에 주석을 통해서 흐름을 따라가기 쉽게 하려고 합니다.
Board와 Square 를 아래와 같이 변경합니다.
```
class Board extends React.Component {
 renderSquare(i) {   return <Square value={i} /> // 이제 Square는 props.value 값을 가집니다. }
}
```
```
class Square extends React.Component {
 render() {
   return <button className="square">{this.props.value}</button> //<Square value={i} /> 에서 전달받은 value를 랜더링 합니다. }
}
```
정상적으로 변경 했다면 화면에 숫자가 랜더링 됩니다. 여기까지 동작하는 코드

Making an Interactive Component

다음은 Square 컴퍼넌트를 클릭 했을때 X 값으로 채우는 기능을 추가함으로서 컴포넌트에 단순 props를 통한 상태값만을
표시하는게 아니라 상호작용을 할 수 있는 컴포넌트로 변경할 수 있는 방법을 설명합니다.
이제 state onEvent가 등장하게 됩니다. 여기까지 동작하는 코드

class Square extends React.Component {
 /* 클래스형 컴포넌트가 state를 가지기 위해서는 아래 constructor를 작성해야 합니다.
 state를 가지기 위한 형식적인 코드라고 생각하면 됩니다.
 */
 constructor(props) {
   super(props)
   this.state = {     value: null,   } }

 render() {
   /* 
   onEvent중 하나인 onClick에 누를때 마다 this.setState 를 호출하는 함수를 추가 합니다.
   react 에서는 this.setState을 통해 state 의 값을 변경합니다.
   주의 할 점은 onClick(setState({value:'X'})) 처럼 즉시 실행하는 식으로 코드를 작성하면
   안됩니다. 항상 실행 할 수 있는 함수를 넘긴다는 생각으로 작성해야 합니다.
   */

   return (
     <button
       className="square"
       onClick={() => this.setState({ value: 'X' })}
     >
       {this.state.value}
     </button>
   )
 }
}

Developer Tools 개발에 도움을 주는 툴에 대한 설명으로 크롬과 파이어 폭스의 확장 프로그램을 통해 추가하여 사용하는 방법에 대해서 설명합니다. 디버깅은 중요하지만 현재 튜토리얼에는 비중이 낮아 넘어가도록 합니다.

Completing the Game

Lifting State Up
기존 컴포넌트는 Square마다 onClick Event와 State를 가지고 있습니다. 이게 무슨 문제가 될까요?
구현된 코드가 동작하는데는 아무 문제가 없습니다.

여기서 잠깐 리엑트는 무엇인가로 잠시 돌아가 보겠습니다. 선언적이고 효율적이며 유연하다 라는 특징을 유지하기 위해서는 state관리가 핵심입니다. 이 튜토리얼에서는 간단한 3개의 컴포넌트지만

향후 복잡한 컴포넌트를 다루면 과연 모든 컴포넌트의 state에 대해서 확인하는 것은 쉽지 않습니다.

따라서 부모 컴포넌트로 state에 대한 처리를 올려 컴포넌트에 props의 변경만으로

재사용을 통해 효율적이고 유연적인 코드를 작성할 수 있게 됩니다.

다음은 기존 작성된 state를 부모 컴퍼넌트로 올리는 방법에 대해서 설명합니다.

Board와 Square컴포넌트를 아래와 같이 변경 합니다. 여기까지 동작하는 코드

    class Board extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          squares: Array(9).fill(null), // sqaures 초기값
        }
      }

        handleClick(i) {
          const squares = this.state.squares.slice();
          squares[i] = 'X';
          this.setState({squares: squares});
        }

        renderSquare(i) {
          //Board -> square로 value와 onClick을 내려줍니다.

          return return
          ( <Square value={this.state.squares[i]}
            onClick={() => this.handleClick(i)}/>;
            )
        }
        render() {
        const status = 'Next player: X';

        return (
          <div>
            <div className="status">{status}</div>
        }
        ...

class Square extends React.Component {
  /*이제 상태가 존재하지 않기 떄문에 constructor를 제거 합니다.*/
  //   constructor(props) {
  //   super(props)
  //   this.state = {
  //     value: null,
  //   }
  // }

  render() {
    return (
      //전달 받은 props를 통해서 구현합니다.
      <button className="square" onClick={() => this.props.onClick()}>
        {this.props.value}
      </button>
    )
  }
}

Why Immutability Is Important

왜 불변성(Immutability)이 중요한지 다음 아래 예제 데이터 코드를 통해 설명합니다.
```
//불변성이 지켜지지 않는 경우
var player = { score: 1, name: 'Jeff' }
player.score = 2
// Now player is {score: 2, name: 'Jeff'}

var player = { score: 1, name: 'Jeff' }

//불변성이 지켜지는 경우
var newPlayer = Object.assign({}, player, { score: 2 })
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}

// Or if you are using object spread syntax proposal, you can write:
// var newPlayer = {...player, score: 2};
```
코드를 보면 뭐.. 그렇구나 하게 됩니다. 튜토리얼에서는 몇가지 예시를 들어주며 왜 불변성이 유지 되어야 하는지 설명해 줍니다.
- 복잡한 기능을 간단하게 만든다.
  이 튜토리얼 후반부에 소개할 “time travel” 기능에서 유용성을 설명 해준다고 합니다.
- 변경감지
  변경 가능한 객체는(mutable object) 변경 여부를 찾기 위해서는 전체 객체 트리에서 찾아야 하기 때문에 불변 객체가 변경 감지에 더 쉽습니다.
- 리엑트의 리랜더링 여부 결정
  리엑트로 작성된 코드에서 항상 큰 고민을 주는 부분중 하나는 불필요한 리랜더링을 줄이는 것입니다. 여기서 불변성이 지켜진다는 것은 리엑트에서 리랜더링 여부를 결정하는 중요한 요소가 됩니다. 이 리랜더링 결정여부는 변경감지를 통해서 복잡한 기능을 더 간단하게 만들어주기 때문에 불변성이 지켜져야 하는 가장큰 이유라 생각됩니다.

Function Components

튜토리얼 상의 함수형 컴포넌트는 state를 가지고 있지 않는 컴포넌트를 표현할때 함수형으로 사용해야 한다 라고 설명해주고 있습니다. 요즘 함수형 컴포넌트를 사용하는 방향이랑은 차이가 있으나 본질적으로 함수형 컴포넌트가 존재하게 된 이유라 생각합니다.

아래 코드는 Square 클래스를 함수형태로 변경한 코드입니다.여기까지 동작하는 코드
```
function Square(props) {
 return (
   <button className="square" onClick={props.onClick}>
     {props.value}
   </button>
 )
}
```
Taking Turns & Declaring a Winner
O , X 로 서로 순서를 가지도록 코드를 추가합니다. 추가적인 개념이 나오는게 아니기 때문에 설명은 생략하겠습니다.여기까지 동작하는 코드

Adding Time Travel

Storing a History of Moves & Lifting State Up, Again & Showing the Past Moves

불변성이 지켜진 Squares array를 통해서 state의 history를 만들게 됩니다.
history state를 관리하기 위해서 top-level의 Game 컴포넌트 까지
다시 한번 상태를 끌어 올립니다. 특별히 중요한 개념적인 내용이 없어 생략하였습니다.

여기까지 동작하는 코드

Picking a Key

마지막으로 중요한 내용입니다. 여기서는 리스트 형태의 컴포넌트를 호출할때 key가 추가 되어야 하는 이유와 어떻게 추가해주는지 설명합니다.

 //key가 없기 떄문에 React에서 변경탐지가 어려워요..
 <li>Ben: 9 tasks left</li>
 <li>Claudia: 8 tasks left</li>
 <li>Alexa: 5 tasks left</li>

 //key를 추가해야 합니다!
 //key는 유일값이여야 하지만 이것은 동적요소의 형제들과 구분되는 값을 의미 합니다.
 //모든 컴포넌트에서 유일값에 해당하지 않다는 것 입니다.
 <li key={user.id}>tasks left</li>

Implementing Time Travel
key까지 추가된 상태에서의 최종코드 입니다.

Docker - 설치부터(1)

Tue, 08 Feb 2022 00:00:00 GMT

1. Docker?

Docker는 애플리케이션에 대한 구축,테스트를 표준화하여 컨테이너기반의 배포를 할 수 있는 플랫폼 입니다.

2. 공부한 이유

On-premise 환경에서 애플리케이션을 배포시 같은 사양의 서버라도 예상치 못한 문제에 직면한 경우가 생겼습니다. 이를 해결하기 위해서 Docker를 통해서 어디서든 동일한 실행환경을 구축하고 싶었습니다.

3. Mac에서 Docker 설치

도커 설치

설치링크

chip 타입을 확인하고 다운로드하여 설치합니다

설치가 완료되고 도커에서 제공해주는 docker/getting-started Image를 이용해서 컨테이너를 올려줍니다.

터미널상에서 커멘드 실행

명령어 입력후 http://localhost/tutorial/ 접속하여 컨테이너 동작확인

다음 설명부터는 도커의 기술적인 개념에 대해서 설명해보겠습니다.

Docker - 설치부터(2)

Tue, 08 Feb 2022 00:00:00 GMT

1. Docker 기술 개념

도커의 Container, Image에 대해서 알아 보겠습니다.

컨테이너(Container)

정의: 컨테이너(Container)는 운영체제 수준에서 다른 실행환경과의 간섭없이 격리하는 기술을 말합니다.

궁금증: 컨테이너를 공부하다 보면 쉽게 찾아 볼 수 있는 다른 가상환경 기술인 가상머신(Virtual Machine)과의 차이 는 무엇있가?

제가 공부하면서 가장 큰 차이점으로 생각된 부분은 ‘어디까지를 가상화 하는가?’

컨테이너의 경우 운영체제의 커널을 공유하여 그 위에 격리환경을 구성합니다.
가상머신의 경우 하드웨어조차도 가상화시켜 격리환경을 구성합니다.

두 차이점 때문에 일반적으로 컨테이너가 낮은 오버헤드 환경을 제공합니다.
다만 그렇다면 ‘가상머신은 사용할 필요가 없는가?’ 라는 생각을 하게 되었습니다.

가상머신의 활용분야: 가상화를 하드웨어까지 하기 때문에 개발상 하드웨어 요구 사항이 있거나 Windows, MacOS등 서로 호환성이부족한 플랫폼 개발

이미지(Image)

공부하면서 이해한 도커의 이미지의 개념은 일종의 객체지향의 클래스라고 생각되었습니다.
이미지라는 클래스를 통해서 컨테이러나는 객체를 만드는 것이라 가정하면 이미지는 컨테이너 생성을 위한 파일, 설정등을 포함하고 상태값을 가지지않는 Imutable상태로 저장되기 때문입니다.

또한 같은 이미지는 여러개의 컨테이너를 생성할 수 있고 컨테이너의 상태의 변경은
컨테이너에만 적용되고 이미지에는 적용되지 않습니다.

이미지의 구성은 N층의 레이어를 통해 구성됩니다.
예를 들어서 base가 되는 Ubuntu 레이어 위에 Nginx layer를 올리는 방식으로
N층의 레이어 구성을 통해서 하나의 이미지가 구성됩니다.

docker file 에 추가적인 layer가 올라가게 될 경우 delta (difference between the old and new image) update가 수행됩니다.

실제 이미지를 만드는 방법은 다음과 같습니다.

Dockerfile이란 파일을 작성하여 Build하는 과정이 필요합니다.
참고 : 자세한 작성가이드 입니다.

FROM ubuntu:18.04
COPY . /app
RUN make /app
CMD python /app/app.py

각 명령어들은 하나의 layer가 됩니다.

FROM : ubuntu:18.04라는 DockerImage를 이용해서 레이어를 생성
COPY : . /app . <- host /app <- container
RUN : 명령을 실행할 때 마다 layer가 생성되고 캐시된다.
CMD : 컨테이너가 실행되는 시점에 사용되는 명령어

계속

Python - Singleton class

Mon, 07 Feb 2022 00:00:00 GMT

1. Singleton

현재 실행중인 프로세스에서 하나의 인스터스를 메모리에 할당하여 유일한 단일객체로서 사용하는 디자인패턴을 말한다.

2. 공부한 이유

현재 개발중인 게이트웨이로서의 Proxy서버에 대해서 다수의 node서버 접속시 사용할 전역 Proxy서버 객체 및 공유된 리소스에 대한 말단 노드간의 동시성 제어가 필요했습니다.

3. Python에서 Singleton 구현 방식 및 예시

생각보다 python에서 싱글턴을 구현하는 방식들이 다양합니다. 제가 이번에 구현한 방식은 type 통한 metaclass 생성을 통해서 싱글톤을 구현 해보겠습니다.

class Singleton(type):
    # 인스턴스가 저장될 속성
    __instances = {}
    # __call__ 클래스에서 생성된 인스턴스를 호출할때 동작
    def __call__(cls, *args, **kwargs):
        # 인스턴스 생성 여부 확인
        if cls not in cls.__instances:
            # 인스턴스 미생성 경우 인스턴스 생성하여 저장
            cls.__instances[cls] = super().__call__(*args, **kwargs)
        #인스턴스가 존재하는경우 기존 생성 인스턴스 전달
        return cls.__instances[cls]

# 메타클래스로 Singleton으로 생성
class Singleton(type):
    # 인스턴스가 저장될 속성
    __instances = {}
    # __call__ 클래스에서 생성된 인스턴스를 호출할때 동작
    def __call__(cls, *args, **kwargs):
        # 인스턴스 생성 여부 확인
        if cls not in cls.__instances:
            # 인스턴스 미생성 경우 인스턴스 생성하여 저장
            cls.__instances[cls] = super().__call__(*args, **kwargs)
        #인스턴스가 존재하는경우 기존 생성 인스턴스 전달
        return cls.__instances[cls]
    def clear(cls):
        try:
            cls.__instances = {}
        except KeyError:
            print("Error:", KeyError)

# 메타클래스로 Singleton으로 생성
class Proxy(metaclass=Singleton):
    def __init__(self, server):
        self.server = server

    def close(self):

        self.__class__.clear()
        del self
    def get_server(self):

        return self.server
    #...

sshNode = Proxy('ssh')
telnetNode = Proxy('telnet')

#초기화 값 확인
print(sshNode.get_server(), telnetNode.get_server())

#동일 인스턴스 확인
print('Is it the same instance?', sshNode is telnetNode)

#인스턴스 초기화'
sshNode.close()
sshNode = Proxy('new ssh')
print(sshNode.get_server())

Python - socket

Sun, 06 Feb 2022 00:00:00 GMT

1. Socket 정의

ss 소캣이란 네트워크를 경유하는 프로세스 간 통신의 종착점이다 주로 소켓통신이 필요할때는 http 프로토콜 처럼 단방향통신이 아니라 프로세스간 양방향 통신이 필요할때 사용하면 된다. 소켓에서 같은 ip와 port 번호를 가진 서버와 클라이언트는 소켓을 통한 양방향 통신이 가능하기 때문이다.

1 소제

2. Python에서 Socket구현

서버와 클라이언트 사이에 통신을 구현해 봅니다. 서버와 클라이언트간의 메시지를 전달할 수 있도록 작성해봅니다.

serverSocket.py 를 먼저 구현해봅니다.

import socket
from _thread import *

# 서버에 접속한 클라이언트 목록
client_sockets = []
# 서버 IP 및 열어줄 포트
HOST = '127.0.0.1'
PORT = 9998

# 쓰레드에서 실행되는 코드입니다.
# 접속한 클라이언트마다 새로운 쓰레드가 생성되어 통신을 하게 됩니다.
def threaded(client_socket, addr):
    print('>> Connected by :', addr[0], ':', addr[1])

    # 클라이언트가 접속을 끊을 때 까지 반복합니다.
    while True:
        try:
            # 데이터가 수신되면 클라이언트에 다시 전송합니다.(에코)
            data = client_socket.recv(1024)
            if not data:
                print('>> Disconnected by ' + addr[0], ':', addr[1])
                break

            print('>> Received from ' + addr[0], ':', addr[1], data.decode())

            # 서버에 접속한 클라이언트들에게 채팅 보내기
            # 메세지를 보낸 본인을 제외한 서버에 접속한 클라이언트에게 메세지 보내기
            for client in client_sockets :
                if client != client_socket :
                    client.send(data)

        except ConnectionResetError as e:
            print('>> Disconnected by ' + addr[0], ':', addr[1])
            break

    if client_socket in client_sockets :
        client_sockets.remove(client_socket)
        print('remove client list : ',len(client_sockets))

    client_socket.close()

#socket server start
with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as server_socket:

    server_socket.bind((HOST, PORT))
    server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
    server_socket.listen()

    try:
        while True:
            print('connet wait')
            #서버에서 클라이언트의 연결을 받아들입니다.
            client_socket, addr = server_socket.accept()
            #추가된 클라언트 목록을 추가합니다.
            client_sockets.append(client_socket)
            #새로운 스레드로 할당합니다.
            start_new_thread(threaded, (client_socket, addr))
            #현재 연결되 clinet의 수
            print("client count: ", len(client_sockets))

    except Exception as e :
        print ('error: ',e)
    finally:
        server_socket.close()

다음으로 클라언트를 clientSocket.py를 작성해봅니다.

from _thread import *
import socket

HOST = '127.0.0.1'
PORT = 9998

def recv_data(client_socket) :
    while True :
        data = client_socket.recv(1024)
        print("recive : ",repr(data.decode()))

with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as client_socket:

    client_socket.connect((HOST, PORT))

    try:
        print('access server!')
        start_new_thread(recv_data, (client_socket,))
        while True:
            message = input('')
            if message == 'quit':
                close_data = message
                break
            client_socket.send(message.encode())

    except Exception as e :
        print ('error: ',e)
    finally:
        client_socket.close()

참고 https://stickode.tistory.com/225

gatsby research

Sat, 05 Feb 2022 00:00:00 GMT

content Folder

현재 사용하고 있는 Lumen 테마에 대한 커스텀을 하기 위해서 공부를 시작하였습니다.
먼저 content 폴더를 살펴 보았습니다.

contnet
└─pages
└─posts

pages 폴더와 posts 폴더로 구성되어 있습니다. page와 posts의 차이는 구성 컴포넌트의 차이만 존재합니다. page와 post를 생성하는 방식을 정리해보기로 하였다.

대부분 코드는 개인적으로 중요하다 생각하는 일부만 기록하였습니다.

제일 먼저 찾은것은 gatbsy 폴더에서 create-pages.js 에서 pages와 posts를 구분하는
코드를 살펴 보겠습니다.

  const { edges } = result.data.allMarkdownRemark;  
  _.each(edges, (edge) => {
    if (_.get(edge, 'node.frontmatter.template') === 'page') {
       createPage({
        path: edge.node.fields.slug,
        component: path.resolve('./src/templates/page-template.js'),
        context: { slug: edge.node.fields.slug }
      });
    } else if (_.get(edge, 'node.frontmatter.template') === 'post') {
      ...
    }
  });

md 파일의 frontmatter 속성중 template 기준으로 page 와 post를 구분해주고 있었다. ’./src/templates/page-template.js‘를 이동

  return (
    <Layout title={`${pageTitle} - ${siteTitle}`} description={metaDescription} socialImage={socialImageUrl} >
      <Sidebar />
      <Page title={pageTitle}>
        <div dangerouslySetInnerHTML={{ __html: pageBody }} />
      </Page>
    </Layout>
  );

page component를 Layout으로 감싸고 있는 형태였습니다.

참고 : <div dangerouslySetInnerHTML={{ __html: pageBody }} /> dangerouslySetInnerHTML React에서 InnerHTML을 사용하기 위한 방식

다음으로 <Page> Component를 살펴 봅니다.

  return (
    <div ref={pageRef} className={styles['page']}>
      <div className={styles['page__inner']}>
        { title && <h1 className={styles['page__title']}>{title}</h1>}
        <div className={styles['page__body']}>
          {children}
        </div>
      </div>
    </div>
  );

특별하다고 할만한거는 보이지 않았다 Post도 동일한 방식이기 떄문에 Post component를 살펴보았다

<div className={styles['post']}>
      <Link className={styles['post__home-button']} to="/">전체</Link>

      <div className={styles['post__content']}>
        <Content body={html} title={title} />
      </div>

      <div className={styles['post__footer']}>
        <Meta date={date} />
        {tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
        <Author />
      </div>

      <div className={styles['post__comments']}>
        <Comments postSlug={slug} postTitle={post.frontmatter.title} />
      </div>
    </div>

page 와 post를 수정할때는 두 Component를 수정하면 됩니다.

영어공부 - 종속접속사

Sat, 05 Feb 2022 00:00:00 GMT

종속접속사

원문 종속접속사란 어떤 주절에 대해서 다른 절을 종속시키는 것을 말한다.
주절 <-(종속접속사) 종속절

종류에는 명사, 형용사, 부사 종속 접속사가 있다.
여기서 종속시키려는 절 앞에 붙기 때문에 이끈다는 표현으로 설명해보자

1. 명사절 종속접속사

주어/보어/목적어 역활을 하는 절을 명사 절이라 하는데
명사절을 이끄는 종속접속사에는 what, that, if(wheter)등이 있다한다.

1. 주어

주어
What she said is a lie <—> 그녀가 말한것은 거짓이다.

2. 목적어

I think (that) he is young <—> 나는 그가 어리다고 생각한다.
I wonder if(whether) he likes me <—> 나는 그가 나를 좋아하는지 아닌지 궁금하다
종속 접속사 if는 목적어 역활로만 사용할 수 있습니다.

3. 보어

The problem is (that) she was absent from work. <—> 문제는 그녀가 결근을 했다는 것이다.

종속접속사 that을 사용하여 the problem을 보충 설명하며 목적어, 보어 역활을 하는 that은 생략할 수 있다.

2. 형용사 절을 이끄는 종속접속사

흔히 관계대명사, 관계부사로 일컬어지는 문법이 종속접속사의 형용사절이다. 종속접속사 who, which, that, when, where, why, how는 형용사처럼 쓰여 명사를 수식
who : 사람
which : 사물
where : 장소
when : 시점
why : 이유

I know a man who is wearing a blue shirt
명사를 수식한다

3. 부사 절을 이끄는 종속접속사

부사절은 주절에서 전달하려는 내용에 대해 시간, 조건, 이유, 양보 등의 부연설명을 해주는 역활을 한다. 시간 : when, before, after, since, while, until
조건 : if, unless, as long as 이유 : because, as, since
양보 : even though, although, though

When I was young I wanted to be an actor <—> 내가 어렸을때 나는 배우가 되길 원했다

부사절은 단독으로 쓰일 수 없다.
주절인 I wanted to be a actor(나는 배우가 되는 것을 원했다)는 단독으로 쓰여도 어색하지 않지만 부사절인 when I was young(내가 어렸을때)는 단독으로 쓰기에는 완전하지 않다는데 ???
(뒤에 말이 나올꺼 같다는 의미로 완전하지 않다는건가?)

다른 예문은 아래와 같다.

She read a book while(~동안에) she waited for him
그녀는 그를 기다리는 동안에 책을 읽는다.

Though(비록 ~일지라도) it was cold I went out
비록 추웠지만 나는 밖으로 나갔다.

As(~ 할떄) he entered the room she was sleeping on her stomach
그가 방으로 들어갔을 때, 그녀는 엎드려 자고 있었다.

He was late because(때문에) he missed the bus.
그는 버스를 놓쳤기 때문에 늦었다.

It’s 10 years since(~한 이래로) I’ve seen him
내가 그를 본지 10년이 되었다.

react 개발일지-(3)

Fri, 17 Dec 2021 00:00:00 GMT

설치

npm install @reduxjs/toolkit react-redux
npm install @types/react-redux

구성

Nextjs, Typescript, ReduxToolkit를 조합하여 Redux를 구성하기 이번에는 ReduxToolkit을 기준으로 하여 구성해보기로 한다.

rootReducer 작성

reducer를 통합할 rootReducer 작성

// /src/store/modules/index.ts
import { combineReducers, ThunkAction, Action } from '@reduxjs/toolkit';
import counterSlice from "./counter/counterSlice";

//configureStore 넘겨줄 rootReucer 작성
const rootReducer = combineReducers({
    counterSlice
})

//사용할 타입 정의
export type RootState = ReturnType<typeof rootReducer>;
export type AppThunk<ReturnType = void> = ThunkAction<
    ReturnType,
    RootState,
    unknown,
    Action<string>
>;
export default rootReducer;

Hooks 작성

useAppDispatch , useAppSelector Hook 작성
작성하는 이유는 useSelector의 타입을 예를 들어서 useSelector(state:RootState)를 반복적으로 작성하는 것을 피하기 위해서 useAppDispatch를 작성하는 이유도 마찬가지다

// /src/hooks/index.ts
import {
    TypedUseSelectorHook,
    useDispatch,
    useSelector,
} from 'react-redux';
import { RootState } from 'src/store/modules';
import type {
    AppDispatch,
} from 'src/store';


export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

configureStore 작성

redux의 설정을 관리할 configureStore를 작성한다

// src/store/index.ts
import {
    configureStore,
} from '@reduxjs/toolkit';

import rootReducer from './modules';
import logger from 'redux-logger';
import { Context, createWrapper } from "next-redux-wrapper";

//redux store config
const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

//dispatch type
export type AppDispatch = typeof store.dispatch;

//next-js redux wrapper 작성
const wrapper = createWrapper((context: Context) => store, { debug: process.env.NODE_ENV !== 'production', });

export default wrapper;

리듀서 작성하기 (counterSlice.ts)

리듀서의 작동을 확인 하기 위한 간단한 카운터를 작성해본다.

import {
    createSlice,
    PayloadAction,
} from '@reduxjs/toolkit';
import { RootState } from '..';

//counterState 타입 정의
export type CounterState = {
    value: number;
};

const initialState: CounterState = {
    value: 0,
};

export const counterSlice = createSlice({
    //생성된 액션타입의 네임스페이스로 사용된다.
    name: 'counter',
    //초기 State값으로 전달된 initalState에서 CounterState타입을 유추한다.
    initialState,
    reducers: {
        //리덕스의 actionCreator
        increment: (state: CounterState) => {
            state.value++;
        },
        decrement: (state: CounterState) => {
            state.value--;
        },
        //payload 추가하는 경우 타입지정 예시
        incrementByAmount: (state: CounterState, action: PayloadAction<number>) => {
            state.value += action.payload;
        },
    },
});
// 작성한 타입을 export
export const {
    increment,
    decrement,
    incrementByAmount,
} = counterSlice.actions;

// selector 작성 
export const selectCount = (state: RootState) => state.counterSlice.value;

const counterReducer = counterSlice.reducer;
export default counterReducer;

_app.ts에 redux store 적용

// /src/pages/_app.ts

import { AppProps } from 'next/app'
import { ThemeProvider } from 'styled-components';
import { theme } from 'src/styles/theme';
import GlobalStyle from 'src/styles/global-styles';
import wrapper from '../store';

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (

    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Component {...pageProps} />
    </ThemeProvider>

  )
}
//리덕스로 감싸기
export default wrapper.withRedux(MyApp)

동작확인 component 작성

// /src/pages/index.ts
import { useState } from 'react';
import {
    useAppDispatch,
    useAppSelector,
} from 'src/hooks';
import {
    decrement,
    increment,
    incrementByAmount,
    selectCount,
} from 'src/store/modules/counter/counterSlice';


const IndexPage: React.FC = () => {
    const dispatch = useAppDispatch();
    const count = useAppSelector(selectCount);
    const [incrementAmount, setIncrementAmount] = useState<number>(0);

    return (
        <>
            <h1>Redux Counter</h1>
            <h2>
                숫자 : {count}
            </h2>
            <div>
                <input
                    value={incrementAmount}
                    onChange={(e) => setIncrementAmount(Number(e.target.value))}
                    type="number"
                />
                <button
                    onClick={() => dispatch(incrementByAmount(Number(incrementAmount)))}
                >
                    입력값으로 +
                </button>
            </div>
            <div>
                <button onClick={() => dispatch(decrement())}>-1</button>
                <button onClick={() => dispatch(increment())}>+1</button>
            </div>
        </>
    );
};

export default IndexPage;

react 개발일지-(2)

Thu, 16 Dec 2021 00:00:00 GMT

style 방식 결정

리엑트에서 명확히 정해진 스타일링이 없다. 이번에 사용할 스타일링 방식을 결정해 보기로 하였다.

inline styles

먼저 결론적으로 사용안하는게 좋다라고 판단 하였다. 기본적으로 후보군을 찾으면서 제일 먼저 접하게 되는 스타일링 방식이다. 기본적인 설명과 사용하지 말라는 내용이 다수
가장 큰 이유로 확장성이 떨어진다는 내용들이 많았다. (기타: 전역관리, 유지보수)
실제 작성해보고 별로인지 확인하고 싶어 작성 하는 시간을 가졌다. (추후 정리부분)

styled-components

이번에는 이 방식으로 진행하기로 결정
CSS-in-JS방식의 CSS의 컴포넌트화 방식으로 작성 React-native 개발당시 차용하여
사용한 경험이 결정에 큰 부분을 차지하여 아쉽다..

CSS Modules

CSS-in-CSS 방식으로 inline styles의 한계를 보완할 수 있는 방법이라 생각된다. 또한 CSS-in-JS 방식보다는 번들크기에서 작아 로딩시 이점이 있다 다음에는 이 방식으로 구성을 해보고싶다.
(초기 응답이 중요하다면 이런 방식은 어떨지)

styled-components 설치

1.설치

npm i styled-components && npm i -D @types/styled-components
//브라우별 style 공통으로 초기화
npm i --save styled-normalize

styled-components 적용

1.global style 작성

1.전역 스타일 type 선언

// /src/styels/global-styled.d.ts
import 'styled-components'
declare module 'styled-components' {
  export interface DefaultTheme {
    device: {
      mobile: string,
      tablet: string,
      laptop: string,
    };
    dark: {
      mainBackground: string;
      // neutral color
      title: string;
      primaryText: string;
      secondaryText: string;
      disable: string;
      border: string;
      divider: string;
      background: string;
      tableHeader: string;
    };
    light: {
      mainBackground: string;
      // neutral color
      title: string;
      primaryText: string;
      secondaryText: string;
      disable: string;
      border: string;
      divider: string;
      background: string;
      tableHeader: string;
      // point-color
      // point-color
    };
    response: {};
  }
}

2.전역으로 사용될 createGlobalStyle 정의

// /src/styels/global-styles.ts
import { createGlobalStyle } from "styled-components";
import { normalize } from "styled-normalize";

const GlobalStyle = createGlobalStyle`
  ${normalize}

  html,
  body {
    overflow: hidden;
  }

  html, body {width:100%; min-height:100%;}
  
  * {
    box-sizing: border-box;
  }
`;

export default GlobalStyle;

3.사용할 테마 및 미디어 쿼리 정의

// /src/styels/theme.tsx

import styled, { css, DefaultTheme } from 'styled-components';

export const theme: DefaultTheme = {
    device: {
        mobile: `screen and (max-width: ${"375px"})`,
        tablet: `screen and (max-width: ${"768px"})`,
        laptop: `screen and (max-width: ${"1024px"})`,
    },
    dark: {
        mainBackground: `#333`,
        // neutral color
        title: `rgba(255,255,255,0.85)`,
        primaryText: `rgba(255,255,255,0.65)`,
        secondaryText: `rgba(255,255,255,0.45)`,
        disable: `rgba(255,255,255,0.25)`,
        border: `rgba(255,255,255,0.15)`,
        divider: `rgba(255,255,255,0.06)`,
        background: `rgba(255,255,255,0.04)`,
        tableHeader: `rgba(255,255,255,0.02)`,
        // point-color
    },
    light: {
        mainBackground: `#fff`,
        // neutral color
        title: `rgba(0, 0, 0, 0.85)`,
        primaryText: `rgba(0, 0, 0, 0.75)`,
        secondaryText: `rgba(0, 0, 0, 0.45)`,
        disable: `rgba(0, 0, 0, 0.25)`,
        border: `rgba(0, 0, 0, 0.15)`,
        divider: `rgba(0, 0, 0, 0.06)`,
        background: `rgba(0, 0, 0, 0.04)`,
        tableHeader: `rgba(0, 0, 0, 0.02)`,
        // point-color
    },
    response: {},
};

2.APP에 적용하기

1.ThemeProvider로 App을 감싸줍니다.

//
import { AppProps } from 'next/app'
import { ThemeProvider } from 'styled-components';
import { theme } from 'src/styles/theme';
import GlobalStyle from 'src/styles/global-styles';

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

react 개발일지-(1)

Wed, 15 Dec 2021 00:00:00 GMT

1. NextJs 와 Typescript 설치

메뉴얼 설치(create-next-app 미사용) 설치방법

2. Folder 구조

public
└─images
favicon.ico
src
└─common
  └─assets
    └─scss
  └─components
    └─elements
      └─[Name]
         [Name].tsx
    └─hooks
    └─types
    └─utils
  └─modules
    └─auth
      └─api
          AuthAPI.ts
      └─components
          AuthForm.tsx
      auth.js
  pages
  └─auth
    └─authAPI
        authAPI.ts
    └─[Name]API
        [Name]API.ts
  store
  └─modules
    └─base
    index.ts
    store.ts
    configureSotre.ts
  _app.tsx
  _document.tsx
  index.tsx
.babelrc
.eslintrc.json
package.json
tsconfig.json
next.config.js

React Lifecycle - class

Wed, 15 Dec 2021 00:00:00 GMT

1. 작성 이유

React에서 컴포넌트를 다룰때 주요 관심사는 Mounting, Updating, 그리고 Unmounting 될 때가 아닐까요?
그렇다면 Class 형태의 컴포넌트의 Lifecycle은 어떻게 동작하는지 이해와 언제 적용해야 하는지 알아보도록 하겠습니다.

2. 이해

전체적인 Lifecycle의 형태는 다음과 같습니다.

[출처](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram)

크게 생성될때, 업데이트 할때 그리고 제거 될때를 기준으로 나눠 봅시다.

Mounting

생성될 때(Mounting)라는 것은 컴포넌트에 존재하는 Element를 DOM에 밀어 넣는다는 것을 의미합니다.
4가지의 메소드를 통해서 Mounting 과정을 살펴보도록 하겠습니다.

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

constructor

이해:

constructor() 메소드는 컴포넌트 생성시 가장 먼저 호출 됩니다.

사용목적: 주된 사용목적은 다음과 같습니다.

this.state에 객체를 할당하여 지역 state를 초기화
인스턴스에 이벤트 처리 메서드를 바인딩

참고:

메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 됩니다.

class Page extends React.Component {
  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this) // 인스턴스에 이벤트 처리 메서드를 바인딩

    //주의사항
    //props를 받아서 바로 사용하는 경우 color props 변해도 state.color는 변경 불가
    this.state = { color: props.color }
    //여기서 this.setState()를 호출하면 하지 안도록 주의
    this.setState(state => state.count + 1)
    //아래 방식으로 초기화 해야 합니다.
    this.state = { count: 2 } // this.state에 객체를 할당하여 지역 state를 초기화
  }

  render() {
    return <h1>{this.state.count}</h1>
  }
}

getDerivedStateFromProps

이해:

getDerivedStateFromProps() 메소드는 element를 DOM에 밀어넣기 직전 호출 됩니다.
생성될때 갱신 시점 모두에서 constructor() 다음으로 호출 됩니다.
인자로 props, state를 가지고 있으며 return 값을 통해 state를 업데이트 할 수 있습니다.

사용목적:

주된 사용목적은 state 값이 props에 의해 결정되는 경우에 사용합니다.

props 로 받아온 것을 state 에 넣어주고 싶을 때 사용합니다. 컴퍼넌트를 처음 생성할때 전달받은 props에 의해서 랜더링되기 이전에 state가 변경되는 경우

참고:

공식문서상에는 코드가 장황해지고 이에따라 컴포넌트를 이해하기 어려워지기 떄문에 사용을 권장하지 않습니다.
사용하기 전 아래 내용에 해당한다면 사용을 대체합니다.

이 메서드는 컴포넌트 인스턴스(this)에 접근할 수 없습니다.
props 변화에 대응한 부수 효과를 발생시켜야 한다면 (예를 들어, 데이터 가져오기 또는 애니메이션), componentDidUpdate
생명주기를 대신해서 사용하세요.
props가 변화했을 때에만 일부 데이터를 다시 계산 하고 싶다면, Memoization Helper를 대신해서 사용하세요.
props가 변화할 때에 일부 state를 재설정 하고 싶다면, 완전 제어 컴포넌트 또는 key를 사용하는 완전 비제어 컴포넌트로 만들어서 사용하세요.

class Header extends React.Component {
  state = {
    isScrollingDown: false,
    lastRow: null,
  }

  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      //전달받은 props로 내부 state의 값을 변경합니다.
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      }
    }

    // null 리턴할 경우 상태 변경이 없습니다.
    return null
  }
}

render

이해:

render() 순수함수이며 유일해야 하며, 컴포넌트 생성 시 꼭 필요로 하는 메서드입니다.

사용목적:

주된 사용목적은 컴포넌트를 렌더링하는 메서드입니다.

props 로 받아온 것을 state 에 넣어주고 싶을 때 사용합니다. 컴퍼넌트를 처음 생성할때 전달받은 props에 의해서 랜더링되기 이전에 state가 변경되는 경우

참고:

반환값으로는 아래 것들 중 하나를 반환해야 합니다.

React 엘리먼트. 보통 JSX를 사용하여 생성됩니다. 예를 들어, <div />와 <MyComponent />는 React가 DOM 노드 또는 사용자가 정의한 컴포넌트를 만들도록 지시하는 React 엘리먼트입니다.
배열과 Fragment. render()를 통하여 여러 개의 엘리먼트를 반환합니다. 자세한 정보는 Fragments 문서를 통하여 확인할 수 있습니다.
Portal. 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링합니다. 자세한 정보는 Portals에서 확인할 수 있습니다. 문자열과 숫자. 이 값들은 DOM 상에 텍스트 노드로서 렌더링됩니다.
Boolean 또는 null. 아무것도 렌더링하지 않습니다. (대부분의 경우 return test && 패턴을 지원하는 데에 사용되며, 여기서 test는 boolean 값입니다.)

class Page extends React.Component {
  render() {
    //render 함수
    return <h1>Render</h1>
  }
}

componentDidMount

이해:

componentDidMount() 컴포넌트가 마운트 되고 나서 실행되는 메소드 입니다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 됩니다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치입니다.

사용목적:

axios, fetch 등을 통하여 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행합니다.

참고:

componentDidMount()에서 즉시 setState()를 호출하는 경우도 있습니다. 이로 인하여 추가적인 렌더링이 발생하지만, 브라우저가 화면을 갱신하기 전에 이루어질 것입니다. 이 경우 render()가 두 번 호출되지만 DOM이 존재해야만 가능한 작업
DOM의 크기나 위치가 필요한 Modal 등

class Page extends React.Component {


  componentDidMount() {
      await this.getSources() //DOM이 마운트 되고 외부 데이터를 가져오는 경우 사용
  }

}

Updating

업데이트 할 때 라는 것은 컴포넌트에 props 또는 state가 변경될때를 말합니다.

5가지의 메소드를 통해서 Updating 과정을 살펴보도록 하겠습니다.

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

getDerivedStateFromProps

생성시점에서 살펴본 getDerivedStateFromProps 과 동일하기 때문에 생략합니다.

shouldComponentUpdate

이해:

props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출됩니다. 기본 return 값은 true입니다. 이 메서드는 초기 렌더링 또는 forceUpdate()가 사용될 때에는 호출되지 않습니다. return 값이 false인 경우 업데이트를 수행하지 않습니다.

사용목적:

이 메서드는 오직 성능 최적화만을 위한 것입니다. shouldComponentUpdate는 현재 props, state 와 변경된 props, state를 비교할 수 있기 때문에 이를 통해 업데이트 여부를 결정 할 수 있습니다.

참고:

shouldComponentUpdate() 내에서 deep compare 나 JSON.stringify()를 사용하는 것을 권하지 않습니다. 아주 비효율적이며 성능을 떨어트릴 수 있습니다.

public shouldComponentUpdate(nextProps) {
  const {location} = nextProps

  if (
    !this.state.isFetching &&
    this.props.location.pathname === location.pathname
  ) {
    return false // false 반환시 업데이트가 수행되지 않습니다.
  }

  return true // 기본값
}

render

생성시점에서 살펴본 render 과 동일하기 때문에 생략합니다.

getSnapshotBeforeUpdate()

이해:

가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출됩니다. 이 메서드를 사용하면 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 이후 변경되기 전에 얻을 수 있습니다. 이 생명주기 메서드가 반환하는 값은 componentDidUpdate()에 인자로 전달됩니다.

사용목적:

이 메서드에 대한 사용례는 흔하지 않지만, 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등을 생각해볼 수 있습니다. componentDidUpdate 이전에 작업을 처리하고 넘겨줄 필요가 있는 경우 고려해볼만 합니다.

class Demo extends React.Component {

   getSnapshotBeforeUpdate(prevProps, prevState){
      console.log(5,prevState.x,this.state.x);
      return 999;
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
      console.log(6,snapshot);
   }

}

componentDidUpdate()

이해:

componentDidUpdate 는 초기에는 호출되지 않고 업데이트가 수행되고 최종적으로 수행되는 메소드 입니다.

사용목적:

컴포넌트가 갱신되었을 때 DOM을 조작하기 위하여 이 메서드를 활용하면 좋습니다. 또한, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업도 이 메서드에서 이루어지면 됩니다 (가령, props가 변하지 않았다면 네트워크 요청을 보낼 필요가 없습니다)

참고:

상위에서 내려온 prop을 그대로 state에 저장하는 것은 좋지 않으며, 그 대신 prop을 직접 사용하는 것이 좋습니다.

  public async componentDidMount() {
    if (this.state.isRouting) {
      return
    }
    if (this.isComponentMounted && this.isMeasurementInNamespace)
      this.updateTableData(SearchStatus.Loading)
    }
    // 특정 조건없이 setState를 실행할 경우 계속 업데이트가 실행되기 떄문에 아래와 같이 작성하는 경우 주의
    this.setState({
      max: this.props.numbers
    });

UnMounting

제거 할 때 라는 것은 컴포넌트에 props 또는 state가 변경될때를 말합니다.

componentWillUnmount

componentWillUnmount

이해:

componentWillUnmount(()는 컴포넌트가 제거 직전에 호출됩니다.

사용목적:

이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행하세요.

참고:

이제 컴포넌트는 다시 렌더링되지 않으므로, componentWillUnmount() 내에서 setState()를 호출하면 안 됩니다. 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않습니다.

  public componentWillMount() {
    this.debouncedHandleSearch = _.debounce(this.handleSearch, 50)
  }

nextJs 설치

Wed, 22 Sep 2021 00:00:00 GMT

1. 시스템 요구사항

Node.js 12.0 이상 MacOS, Linux Windows (including WSL)

2. create-next-app 통한 설치

npx create-next-app [project_name]

[project_name] 생성할 프로젝트 폴더명

npx create-next-app hello_next

3. create-next-app 통한 설치(TypeScript)

npx create-next-app --typescript

4. 메뉴얼 설치(create-next-app 미사용)

npm install next react react-dom
npm install --save-dev typescript @types/react

설치 후 package.json에 아래 내용 추가

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

프로젝트 폴더를 기준으로 아래와 같은 폴더 구조로 index.jxs도 추가하여야 한다.

pages
└─ index.tsx
package.json
tsconfig.json

tsconfig.json 설정 정보

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "checkJs": true,
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.css",
    "src/**/*.ts",
    "src/**/*.css",
  ],
  "exclude": [
    "node_modules"
  ],
}

index.tsx에 간단한 내용을 추가해보자

function HelloNext() {
  return <div>Hello Next.js!</div>
}

export default HelloNext

페이지 실행을 확인해보자

npm run dev

Nodejs 설치

Tue, 21 Sep 2021 00:00:00 GMT

1. Nodejs 설치

1. Window 설치

설치링크에서 원하는 버전을 설치하면 됩니다. LTS 버전과 Current 버전이 있는데, 어떤 버떤 버전을 설치해야 할까요?

LTS와 Current 버전의 차이

LTS : 안정화버전 입니다. 3년간 지원되는 버전입니다. 최신기능을 사용할 수 없습니다.
(짝수버전)
Current : 최신 기능을 담고 있는 버전입니다. 예상치 못한 오류가 발생할 수 있습니다.
(홀수버전)

2. Mac 설치

Mac도 Winodw와 같이 설치링크에서 원하는 버전을 설치하면 됩니다. 다만 Homebrew가 설치되어 있는경우 터미널을 이용해서 간단하게 설치할 수 있습니다.

brew install node

Gatsby 설치

Sat, 18 Sep 2021 00:00:00 GMT

1. NPM, Nodejs 설치

NPM, Nodejs는 설치되어 있는 환경 필요

2. gatsby-cli를 설치

npm install -g gatsby-cli

3. 설치 디렉토리 생성 ‘hello-world’

mkdir hello-world
cd hello-world

4. lumen 테마로 Gatsby 설치

gatsby new hello-world https://github.com/GatsbyCentral/gatsby-v2-starter-lumen

[Name] 생성할 블로그 명
[Thema-path] 사용할 테마 주소
```
gatsby new [Name] [Thema-path]
```

5. 실행

cd hello-world 
npm run develop

6. 배포

cd hello-world 
npm run deploy

about

Sun, 27 Jan 2019 16:21:13 GMT

Jinhyeong Kim

배운걸 기록합니다.

Perfecting the Art of Perfection11

Thu, 01 Sep 2016 23:46:37 GMT

Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

주 1회 작성하는 개발 블로그

Next.js & React Study (4)

들어가기 앞서

1. <Head> Component

2. _app.js

3. _document.js

4. _app.js vs _document.js

Next.js & React Study (3)

들어가기 앞서

1. 왜 Next.js에서 별도의 Rendering 방법을 제공 할까요?

2. 사전 렌더링(Pre-Rendering)

2.1 정적 생성(Static Generation)

2.2 서버 사이드 렌더링(Server-Side Rendering)

Next.js & React Study (2)

들어가기 앞서

1. File-system based router

2. Linking between pages

2.1 next/link

2.2 next/router

2.3 어느 방식을 사용해야 하나요?

Next.js & React Study (1)

들어가기 앞서

1. Next.js란?

2. 무엇을 해결 할 수 있는가?

SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)

외부 라이브러리 설치

Full Stack

react 작업 일지 - Project Setting (1)

1. Project Setting

1.1 NextJs 프로젝트 설치

1.2 Config Setting

1.3 Route

1.4 _app component

알고리즘 기초 Chapter04

1. 큐

1.1 정의

1.2 코드구현

2. 스택

2.1 정의

2.1 코드구현

3. 딕셔너리

3.1 정의

3.1 코드구현

4. 그래프

4.1 정의

4.2 코드구현

알고리즘 기초 Chapter03

1. 순차탐색

1.1 정의

1.2 코드구현

2. 선택 정렬

2.1 정의

2.1 코드구현

3. 삽입 정렬

3.1 정의

3.1 코드구현

알고리즘 기초 Chapter02

1. 팩토리얼

1.1 정의

1.2 코드구현

2. 재귀호출

2.1 정의

2.2 코드구현

3. 하노이의 탑

3.1 정의

3.2 코드구현

Function Declarations VS. Function Expressionsin Javascript

글을 시작하기 전에

특징

함수 선언

함수 표현식

[도서] 객체지향의 사실과 오해

글을 시작하기 전에

객체지향의 정의

객체

상태와 행동

책임과 역할

메시지와 협력

typescript 타입설계시 유의점

타입설계

1. `<Head>` Component