코드로 대화하기

Typescript typeof Array[number] 패턴 정리

아지송아지 — Sun, 5 Jun 2022 10:58:47 +0900

안녕하세요!

오늘은 typeof Array[number]에 대하여 알아보겠습니다.

최근에 이직을 하고 정신이 없어서 블로그 글도 못 올리고 1일 1 깃도 못했네요.

typeof Array[number]?

const names = ["Song", "James", "Mike"] as const;
type Name = typeof names[number];

// type Name: "Song", "James", "Mike"

패턴은 위와 같이 생겼는데요.

Name 타입을 정의할 때 유니온 타입을 사용하여 Song, James, Mike를 중복해서 적지 않은 것을 확인할 수 있습니다.

문제점과 패턴에 대해 자세히 살펴보겠습니다.

문제점

만약 이 방식을 사용하지 않으면 어떻게 될까요?

1. 타입을 정의하지 않는다.

const names = ["Song", "James", "Mike"];

// logName의 매개변수는 "Song", "James", "Mike" 셋 중 하나임을 가정
function logName(name: string){
    console.log(name);
}

logName('Song'); // o
logName('Tom'); // x

애초에 타입을 적지 않으면 인자가 예상했던 값과 다른 값이 올 수도 있습니다.

2. 타입을 선언한다.

const names = ["Song", "James", "Mike"];
type Name = 'Song' | 'James' | 'Mike';

function getName(name: Name){
    return names.find(n => n===name)
}

logName('Song'); // o
logName('Tom'); // x

타입을 정의한다면 다른 값이 오는 것을 사전에 방지할 수 있습니다.

1번의 문제점은 해결하였지만 이름들이 중복해서 사용됐습니다. 옳지 않습니다.

지금은 세 개밖에 없어서 괜찮지만, 값이 늘어나면 불필요한 코드의 양도 늘어납니다.

패턴 분석

const names = ["Song", "James", "Mike"] as const

이 코드부터 알아보겠습니다.

const names = ["Song", "James", "Mike"];
// const names: string[]

먼저 as const를 사용하지 않은 names의 타입 string[]입니다.

저희는 초기에 선언된 값 이외에는 더 추가되지 않을 것이기 때문에 이것을 불변한 값으로 바꿔줘야 합니다.

string[] -> readonly ["Song", "James", "Mike"] 이렇게 말이죠

Const assertions

typescript 3.4 버전에서 추가된 기능인 Const assertions를 사용합니다.

선언한 변수들을 마치 const처럼 만들어 줍니다.

두 가지 예시를 들어보겠습니다.

const name = "Song";
// const name: "Song"

let name2 = "Song"
// let name2: string

let name3 = "Song" as const
// let name3: "Song"

const로 변수를 선언하면 타입은 "song"이지만 let으로 선언하면 string이 됩니다.

as const를 사용하면 let으로 선언하였어도 타입은 "song"이 됩니다.

const abcd = ["a", "b", "c", "d"];
// const abcd: string[]
abcd.push("e"); // o

const ABCD = ["A", "B", "C", "D"] as const;
// const ABCD: readonly ["A", "B", "C", "D"]
ABCD.push("E"); // Property 'push' does not exist on type 'readonly ["A", "B", "C", "D"]'

const로 선언한 객체는 객체 내부의 타입들이 넓은 범위의 타입으로 추론됩니다.

const assertion을 사용하면 그 범위를 좁혀줍니다.

type Name = typeof names[number];
// type Name: "Song" | "James" | "Mike"

다음 코드를 살펴보겠습니다.

typeof names[number]를 사용하여 배열 안에 있는 숫자로 이루어진 모든 index 값을 가져와 유니온 타입으로 만들어줍니다. (index signature 문법) 이로 인하여 똑같은 값을 한번 더 사용하지 않고도 유니온 타입을 만들었습니다.

const people = [
  { age: 20, name: 'Song' },
  { age: 21, name: 'James' },
  { age: 22, name: 'Mike' }
] as const

type Name = typeof animals[number]['name']

배열 안에 오브젝트가 있을 경우 다음과 같이 사용하시면 됩니다.

참고 : https://steveholgado.com/typescript-types-from-arrays/

1년차 프론트엔드의 우당탕탕 이직기

아지송아지 — Sat, 21 May 2022 00:09:02 +0900

안녕하세요!

오랜만에 제 이야기를 해보려고 합니다.

3월 11일 퇴사 후 5월 16일 새로운 회사에 입사하였습니다.

다른 이직 회고 글들을 찾아보았는데요.

저는 회사를 하나씩 리뷰하기보다는 전체적인 이직 과정을 말씀드리려하려 합니다.

입사 지원

포트폴리오 사이트는 따로 만들지 않았고 노션으로 이력서를 만들어 지원하였습니다.

이전 글에서 처음 취업을 할 때는 100곳 이상 무지성으로 입사 지원을 했다고 말했었는데요.

이번 이직은 아래 기준을 정하여 꼭 가고 싶은 회사만 지원하였습니다.

1. 서비스 회사에 가서 하나의 서비스를 깊게 파고들고 싶다.

- si 회사에서 정말 많은 것을 배웠고 소중한 경험들을 하였지만, si 특성상 심도 깊은 개발은 불가능하다고 판단하였습니다.

- 제작한 프로젝트가 사람들에게 어떤 기여를 하고있고 서비스가 운영되는 과정을 지켜보고 싶었습니다.

2. 도전과제가 많은 회사에 가고 싶다.

- 회사에 들어가 똑같은 작업만 반복하고 유지 보수만 하는 것이 아닌 도전과제를 깨며 성장하고 싶습니다. 그 속에서 많은 것을 깨닫고 성취감을 얻는게 목표입니다.

추가로 저는 코딩 테스트보다는 과제 테스트에 더 자신이 있어 과제 트스트를 보는 회사에 주로 지원하였습니다.

입사 지원은 원티드, 회사 사이트, 프로그래머스 프론트엔드 데브 매칭을 이용하였습니다.

프로그래머스 데브 매칭 10곳을 포함하여 총 20곳 지원하였습니다.

많이 지원한 것 같기도 하네요...

프로그래머스 데브 매칭

지인이 추천해줘서 데브 매칭에 지원하였습니다.

대기업과 유명 스타트업을 한 번에 지원해 볼 수 있는 좋은 기회였습니다.

그런데 하필 프로그래머스 과제 테스트를 보는 날 제가 코로나에 걸려 열이 38.9도까지 올라가서 컨디션이 매우 안 좋았습니다.

머리가 너무 아파 테스트를 보지 말까 고민하였지만 떨어질때 떨어지더라고 한번 도전해보자 라는 생각에 참여하였습니다.

코로나...

그런데 과제에 통과하여 지원한 몇몇의 회사들에게 연락이 왔습니다.

(코로나를 핑계로 테스트를 안 봤으면 정말 후회를 많이 했을 것 같습니다.)

서류 합격 및 과제 테스트

데브 매칭 회사들 포함 12개의 회사에서 서류에 합격하였습니다.

과제 테스트를 진행하며 제 코드를 돌아보게 되었고 2개의 회사에서 코드 피드백을 받았습니다.

나름 제 코드에 자신이 있었지만, 테스트를 보며 많이 반성하였습니다.

지금까지 제 코드의 퀄리티는 좋지 못하였습니다.

전달받은 피드백과 과제 테스트를 위해 받았던 여러 회사들의 코드를 보며 부족함을 느꼈습니다.

합격 여부와 상관없이 피드백과 해당 코드들을 분석하며 제 코드의 문제점을 파악하였습니다. 몇 개의 프로젝트는 직접 리팩토링도 하였습니다.

기술 면접

그렇게 9개의 회사와 기술 면접을 진행하였습니다.

기술 면접을 보며 제가 CS 지식이 부족하다는 것을 많이 느꼈습니다.

이때는 개인 프로젝트를 진행하기보다는 CS를 공부하며 부족했던 이론을 다졌습니다.

구글에 "프론트엔드 면접 질문"을 검색하여 나온 내용들을 공부하였습니다.

면접을 위해 공부했던 것도 있지만 공부를 하면 할수록 지금까지 경험했던 내용들이 더 단단해지는 느낌을 받았습니다.

기술 면접을 준비하면서

최종 면접

7개의 회사가 좋게 봐주셔서 최종 면접을 진행하였습니다.

저의 목표와 경험, 회사의 목표들 생각하며 최종 면접을 준비하였습니다.

식상한 말일 수도 있지만 면접은 꾸며내기보다는 제 자신을 솔직하게 보여주었습니다.

6개의 회사에 합격하였고 1개의 회사에서 불합격 통보를 받았습니다.

6개의 회사 중 정말 고민을 많이 했었습니다.

* 도전 과제가 넘치는 회사

* 개발에 몰입할 수 있는 회사

* 끊임없이 성장이 가능한 회사

위 요소들 말고도 여러 가지를 생각하며 결국 하나의 회사를 선택하였습니다.

이직을 마치며

2개월간 이직을 위해 시간을 투자하였습니다.

이직을 준비하며 많은 경험하였는데요.

과제와 기술면접을 준비할 때는 놓치고 있었던 기술적 디테일을 배웠습니다.

기술/최종 면접을 진행할 때는 여러 회사들의 개발자, HR담당자, 대표님들을 만나며 진솔한 얘기를 하였습니다.

그분들이 어떠한 생각을 가지고 있는지 같이 공감하였고, 기술 외적으로도 면접을 통해 배우며 성장한 것 같습니다.

저는 사람들과 소통하는 것을 좋아하여 개인적으로 면접을 볼 때가 이직하면서 가장 재밌었습니다.

이렇게 글로 정리하고 나니 생각보다 2개월 동안 의미 있는 삶을 산 것 같습니다.

꼭 한번 넣어보고 싶었던 짤

새로운 직장을 준비하시는 모든 분들 화이팅입니다!!!

모두 좋은 곳 가실 겁니다 :)

이제 겨우 1년 차 주니어 개발자가 이런 말을 하니 부끄럽네요.

이직 후 일주일

이직을 하고 일주일이라는 시간이 흘렀습니다.

원하는 회사인 만큼 꿈같은 시간이었습니다. 하지만 기술적으로 무지함을 뼈저리게 느꼈습니다.

이번에도 포기하지 않고 끝까지 달려보려고 합니다. 지켜봐 주시면 감사하겠습니다.

Next.js getServerSideProps, getStaticProps, getStaticPaths

아지송아지 — Sun, 15 May 2022 18:06:27 +0900

안녕하세요!

오늘은 pre-rendering과 data fetching에 관련된 지식들을 알아보겠습니다.

Pre-rendering?

nextjs에서 가장 중요한 개념 중 하나인 Pre-rendering을 먼저 얘기해보겠습니다.

nextjs는 클라이언트 측에서 자바스크립트로 모든 작업을 실행하는 대신 각 페이지에 대한 HTML을 미리 생성하는데 이것이 pre-redering(사전 렌더링)입니다. 사전 렌더링을 하면 렌더링 성능과 SEO가 향상됩니다.

* 기본적으로 next.js는 모든 페이지를 사전 렌더링 합니다.

그림을 통해 더 자세히 알아보겠습니다.

Pre-rendering을 하지 않으면, 초기에는 렌더링이 되지 않았다가 자바스크립트가 로드되면 페이지 요소들이 채워집니다.

반면 Pre-rendering이 있다면 사전에 만들어진 HTML 파일을 보여주고 이후 자바스크립트가 로드되면 Hydration이 실행됩니다.

이 시점에서 <Link />와 같은 기능들이 시작합니다.

* Hydration이란, 브라우저가 모두 로드되었을 때 사용자와 상호작용할 수 있는 상태를 의미합니다.

Pre-rendering의 종류

Pre-rendering은 Static Generation과 Server-side Rendering 두 가지 종류가 있습니다.

이 둘의 차이점은 언제 HTML 파일이만들어지는가 입니다. 중요한 포인트는 "언제" 입니다.

Static Generation은 빌드 시점에서 HTML이 만들어집니다.

Server-side Rendering은 매 요청마다 HTML이 새롭게 만들어집니다.

좌측 : Static Generation 우측 : Server-side Rendering

Static Generation

사용자의 요청과는 별개로 미리 만들어두어도 괜찮다면 이 방법이 좋습니다.

한번 만들어지면 CDN을 통해 재사용하기 때문에 서버에서 매번 요청하는 것보다 빠릅니다.

공식 문서에 나와있는 Static Generation 페이지 예시입니다.
* Marketing pages - 마케팅 페이지
* Blog posts - 블로그 포스트
* E-commerce product listings - 제품 목록
* Help and documentation - 도움말, 문서

Server-side Rendering

속도는 느릴 수 있지만, 매번 서버에 요청을 하여 렌더링 하기 때문에 해당 페이지는 항상 최신 상태를 유지합니다.

next.js는 data fetching에 있어 (데이터를 가져오는 데 있어) 예전에는 getInitialProps를 사용하였지만,

9.3 버전부터는getStaticProps, getStaticPaths, getServerSideProp 세 가지로 나뉘었습니다.

1. getStaticProps

빌드 시에만 서버에서 데이터를 가져와 html과 json 파일을 미리 만듭니다.

이후에 서버에서 데이터가 바뀌어도 다시 통신을 하지 않기 때문에 주의하셔야 합니다.

html, json 파일 모두 퍼포먼스 향상을 위해 CDN에 캐싱합니다.

사용법

const Detail = ({ data }) => {
  return <></>;
};

export async function getStaticProps(context) {
  const data = await fetch("--");
  return {
    props: { data }, // 페이지 컴포넌트에 props로 넘길 것
  };
}

export default Detail;

2. getStaticPaths

getStaticProps와 동일하게 빌드시에 서버에서 데이터를 받아옵니다.

차이점이 있다면 getStaticPaths는 Dynamic Routes 에서 사용됩니다.

사용법

// [id].js
const Detail = ({ data }) => {
  return <></>;
};

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: "100" } },
      { params: { id: "200" } },
      { params: { id: "300" } }
    ],
    fallback: true // false or 'blocking'
  };
}

export async function getStaticProps(context) {
  const data = await fetch("--");
  return {
    props: { data }, // 페이지 컴포넌트에 props로 넘길 것
  };
}

export default Detail;

getStaticProps와 반드시 같이 사용하며 getServerSideProps와는 같이 사용할 수 없습니다.

path로 설정된 경로들은 빌드시 미리 만들어집니다.

위 예시는 id값이 100, 200, 300인 페이지를 미리 생성합니다.

fallback이 false일 경우 path에서 설정하지 않은 경로들은 대응하지 않습니다. 즉 404페이지가 뜹니다.

fallback이 true일 경우에는 백그라운드에서 정적 파일로 htm과 json을 생성하여 pre-render목록에 추가합니다.

따라서 처음 페이지가 로드될 때는 느리며 이후부터는 빠르게 로드됩니다.

3. getServerSideProps

서버 측에서 프리렌더를 하여 반환 데이터를 getServerSideProps로 페이지에 전달합니다.

빌드와 상관없이 매 요청마다 서버에서 데이터를 가져옵니다.

서버에서 계속 데이터를 가져오기 때문에 정보들은 항상 최신 상태로 유지됩니다.

따라서 제품 상세 페이지, 관리자 페이지와 같은 곳들에서 사용됩니다.

사용법

const Detail = ({ data }) => {
  return <></>;
};

export async function getServerSideProps(context) {
  const data = await fetch("--");
  return {
    props: { data }, // 페이지 컴포넌트에 props로 넘길 것
  };
}

export default Detail;

return

위 코드에는 props만 반환하고 있지만 getServerSideProps는 세 가지의 반환 값을 가집니다.

props : 컴포넌트로 리턴할 값
redirect : 페이지 접속 시 지정한 경로로 리디렉션 시키기 위해 사용되는 값
- { destination : string, permanent : boolean} 형태입니다.
- status 코드가 필요하거나 변경해야 할 때는 permanent 대신 statusCode를 사용합니다.
notFound : boolean 값입니다. true일 경우 404 status와 에러 페이지를 보여줍니다.
- 데이터 통신에 실패하였을 때 사용합니다.

context

context 객체를 인자로 받으며 아래 정보들을 담고 있습니다.

params: 다이나믹 라우트 페이지면 해당 데이터를 가져온다.
req: Request 정보
res: Response 정보
query: 쿼리 스트링
preview: preview mode 사용 유무
previewData: preview mode 사용 시 전달된 데이터
resolvedUrl: 짧은 URL
- ex) http://localhost:3000/detail/100 -> /detail/740
locale: 현재 locale 정보
locales: 지원되는 모든 locale 정보
defaultLocale: 기본 locale 정보

preview mode에 대한 지식은 아직 부족하여 공부를 더 하고 글을 올리겠습니다.

감사합니다.

참고 :

https://nextjs.org/learn/basics/data-fetching/pre-rendering

https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

Next.js 페이지 이동 Link, Router

아지송아지 — Tue, 10 May 2022 14:59:06 +0900

안녕하세요!

이전 글에서 다이나믹 라우팅에 대해 살펴보았는데요.

오늘은 넥스트에서 페이지 전환할 때 사용하는 방법인 Link, Router에 대하여 알아보겠습니다.

페이지를 이동할 때 a태그를 사용한다면 전체 새로고침이 되며 다시 정보들을 새롭게 가져오게 됩니다.

이는 흰 화면이 보일 수도 있고 매번 통신을 새롭게 하다 보니 사용자 경험 측면에서도 떨어집니다.

1. Link

import Link from "next/link";
...
// path
<Link href={`/detail/${id}`}>
  <a>item name</a>
</Link>

// object
<Link href={{ pathname: "/about", query: { name: "song" } }}>
    <a>item name</a>
</Link>

* Link 태그에 href 속성을 추가하여 가고자 하는 주소를 넣습니다. (a 태그의 href와 동일합니다.)

* 안쪽에는 a 태그로 감싸줍니다.

* className과 같은 속성들을 a 태그에 추가합니다.

* 페이지 새로고침 없이 페이지가 전환됩니다.

Link는 Client-side navigation으로 자바스크립트로 페이지 전환이 이루어집니다.

기본 navigation보다 빠르며 SPA의 특성을 유지합니다.

프러덕션 빌드에서 Link 요소가 뷰포트에 나타나면 넥스트는 백그라운드에서 해당 페이지의 코드를 자동으로 설정합니다.

Link와 연결된 페이지를 미리 로드하여 링크 클릭 시 빠르게 전환이 가능합니다.

이것이 pre-fetching 입니다.

a 태그가 커스텀 컴포넌트일 경우?

Next.js 공식 문서 - next/link 부분

If the child of `Link` is a custom component that wraps an `<a>` tag, you must add `passHref` to `Link`. This is necessary if you’re using libraries like styled-components. Without this, the `<a>` tag will not have the `href` attribute, which hurts your site's accessibility and might affect SEO

만약 styled-components와 같이 a 태그가 커스텀 컴포넌트일 경우 Link 태그에 passHref 속성을 주어야 합니다.

이 속성이 없을 경우 a 태그에는 href 속성이 없어 접근성과 SEO에 영향을 줍니다.

2. Router

import Link from "next/link";
import Router, { useRouter } from "next/router";
...
const router = useRouter();
...
// Router
<div onClick={() => Router.push("/about")}>Router</div>

// router
<div onClick={() => router.push("/about")}>router</div>

// object
<div
    onClick={() =>
      router.push({ pathname: "/about", query: { name: "song" } })
    }
>
	router
</div>

라우터를 이용하여 페이지를 전환합니다.

react-router-dom의 history.push()와 유사합니다.

* 크롤러가 링크를 감지하지 못하여 SEO가 좋지 않을 수도 있습니다.

* <Link>는 클릭 시 바로 페이지가 전환되지만 라우터는 로직을 처리 후 원하는 시점에서 전환이 가능합니다.

* 외부 URL을 사용할 경우 window.location 혹은 a 태그를 사용해야 합니다.

router에는 push 말고도 많은 기능들이 있습니다.

그중 몇 가지 소개해드리겠습니다.

1. router.push

페이지가 이동되며 히스토리 스택이 쌓입니다.

Main -> Login -> List에서 마이페이지로 push 하면 Main -> Login -> List -> Mypage

2. router.replace

페이지가 이동되며 히스토리 스택이 교체됩니다.

Main -> Login -> List 에서 마이페이지로 replace 하면 Main -> Login -> Mypage

3. router.back

뒤로 가는 기능이며 "window.history.back()"과 동일합니다.

4. router.reload

새로고침 기능이며 "window.location.reload()"와 동일합니다.

감사합니다.

참고 :
https://nextjs.org/docs/api-reference/next/link

https://nextjs.org/docs/api-reference/next/router#userouter

Next.js Dynamic Routes를 알아보자

아지송아지 — Mon, 9 May 2022 18:47:31 +0900

안녕하세요!

오늘은 Next.js의 Dynamic Routes, Error Page에 대하여 알아보겠습니다.

리액트에서는 react-router-dom을 설치하고 여러 세팅들을 하였습니다.

반면 넥스트는 폴더와 파일 단위로 라우팅을 합니다.

pages 안에 있는 폴더와 파일들을 읽어 라우팅을 하고 url 주소가 생성됩니다.

1. pages, dynamic routes

pages
└── about.tsx   -> localhost:3000/about

pages 폴더안에 about.tsx가 있다면 따로 더 설정할 필요 없이 url 주소는 "localhost:3000/about" 이 됩니다.

pages
├── detail
│   └─ [id].tsx   -> localhost:3000/detail/1, localhost:3000/detail/2 ...
└── about.tsx   -> localhost:3000/about

다이나믹 라우트는 폴더를 만든 후 그 안에 위와 같이 만들면 됩니다.

"next/router"를 활용하면 Path Variable과 Query Parameter들을 가져올 수 있습니다.

import { useRouter } from 'next/router';
...
const router = useRouter();
console.log(router.query);

ex)

localhost:3000/detail/1 -> {id:'1'}

localhost:3000/detail/100 -> {id:'100'}

localhost:3000/detail/100?name=song -> { name:'song', id:'100'}

여기서 쫌 더 깊은 depth를 사용해 볼 수는 없을까 궁금했습니다.

localhost:3000/detail/100/200/300 이렇게 말이죠

일반적으로 [id].tsx 처럼 하면 에러 페이지가 뜹니다.

파일명을 [...id].tsx로 바꾸면 해결됩니다.

라우터의 쿼리는 값들을 배열로 반환합니다.

// localhost:3000/detail/100/200

console.log(router.query); // {id: ['100', '200']}

다음 시간에는 페이지 간 이동을 해보겠습니다.

감사합니다.

참고 :

https://nextjs.org/docs/routing/dynamic-routes

Next.js _app과 _document에 대하여

아지송아지 — Mon, 9 May 2022 16:27:53 +0900

안녕하세요!

오늘은 Next.js의 _app과 _document에 대하여 알아보겠습니다.

next.js를 처음 설치하면 pages 폴더 안에 _app파일이 보이실 겁니다.

_document가 없을 경우 따로 만드시면 됩니다.

저는 타입스크립트여서 .tsx 입니다.

1. _app

가장 먼저 실행되는 컴포넌트로, 모든 페이지는 _app을 통해 실행됩니다.

다음과 같은 특성들이 있습니다.

1. 페이지가 변경되어도 레이아웃과 상태 값을 유지합니다.

2. "componentDidCatch"를 통해 에러 핸들링이 가능합니다.

3. 페이지에 추가적인 데이터를 삽입할 수 있습니다.

4. Global CSS는 이곳에 추가합니다.

5. 헤더와 푸터같이 공통적으로 사용하는 레이아웃은 이곳에 추가합니다.

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

기본적인 _app.tsx의 구조입니다.

props로 Component와 pageProps를 받아오는데요.

Component

Component는 현재 페이지를 의미합니다.

페이지가 변경되면 Component가 변경됩니다.

"http://localhost:3000/"은 index.tsx를 가리키며, "http://localhost:3000/about"은 about 컴포넌트를 가리킵니다.

pageProps

getInitialProps, getStaticProps, getServerSideProps 를 통해 가져온 초기 속성값을 의미합니다.

위의 값들이 없다면 빈 객체를 반환합니다.

// about.tsx
...
export async function getStaticProps() {
  const test = "Hello";
  return {
    props: {
      test,
    },
  };
}

_app.tsx
...
function MyApp({ Component, pageProps }: AppProps) {
  console.log(pageProps); // {test: 'Hello'}
  return <Component {...pageProps} />;
}

만약 위와 같이 about.tsx에서 getStaticProps를 사용한다고 했을 때,

_app.tsx에서 pageProps를 콘솔로 찍으면 {test: 'Hello'}가 출력됩니다.

_app - getStaticProps, getServerSideProps

* _app은 getStaticProps와 getServerSideProps를 지원하지 않습니다.

_app - getInitialProps

* _app에서 getInitialProps를 사용한다면 Automatic Static Optimization이 비활성화되어 모든 페이지가 서버 사이드 렌더링 됩니다.

import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

MyApp.getInitialProps = async (appContext) => {
   const appProps = await App.getInitialProps(appContext);
   return { ...appProps }
 }

export default MyApp

Custom App
When you add getInitialProps in your custom app, you must import App from "next/app", call App.getInitialProps(appContext) inside getInitialProps and merge the returned object into the return value.

_app에서 getInitialProps에서 사용할 때는 getInitialProps 안에 App을 통해 불러온 App.getInitialProps를 통해 반환해야 합니다.

2. _document

모든 페이지에서 공통적으로 사용하는 html, head(meta) 혹은 body 태그 안에 들어가는 커스텀할 때 사용합니다.

1. 서버에서만 렌더링 됩니다.

2. onClick 같은 이벤트나 CSS는 사용하지 않습니다.

즉 어플리케이션 로직은 넣으면 안 됩니다. 필요하다면 _app에서 넣어야 합니다.

3. 반드시 HTML, Head, Main, NextScript를 포함해야 합니다.

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

기본적인 _document 구조입니다.

모든 페이지에서 공통적으로 적용되어야 하는 <head>만 _document에 넣으며,

title 같이 페이지마다 바뀌는 것들은 각 페이지 별로 넣어야 합니다.

_document 에서는 "next/document"의 Head를 사용하며 그 외 컴포넌트에서는 "next/head"의 Head를 사용합니다.

_document - getStaticProps, getServerSideProps

* _documnet 또한 getStaticProps와 getServerSideProps를 지원하지 않습니다.

정리

모든 페이지는 _app과 _document 를 거쳐갑니다.

_app 이후에 _document가 실행됩니다.

_app은 어플리케이션 로직, 글로벌 스타일 등을 다룹니다.

_document는 HTML 마크업 자체에 집중합니다.

참고 :

https://nextjs.org/docs/advanced-features/custom-app

https://nextjs.org/docs/advanced-features/custom-document

Next.js 시작하기 (typescript)

아지송아지 — Mon, 9 May 2022 12:02:26 +0900

안녕하세요.

오늘은 nextjs를 시작해보겠습니다.

타입스크립트로 프로젝트를 진행하겠습니다.

1. 초기 세팅

설치

npx create-next-app --ts
# or
yarn create next-app --typescript

명령어를 입력하면 "What is your project named?"와 함께 프로젝트 이름을 입력하라고 나옵니다.

실행

# 개발자 모드
npm run dev

# 릴리즈 모드
npm run build
npm run start

http://localhost:3000/

ESLint, Prettier세팅

ESLint와 Prettier 세팅을 해줍니다.

저번 글에 자세한 설명이 있으니 참고해주시면 감사하겠습니다.

.eslintrc

module.exports = {
  root: true,

  env: {
    browser: true,
    node: true,
    es2021: true,
  },

  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 'es5',
    ecmaFeatures: { jsx: true },
  },

  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
  plugins: ['import', 'react', '@typescript-eslint', 'react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'error',
    '@typescript-eslint/no-unused-vars': 'error',
    'react/react-in-jsx-scope': 'off',
  },
};

.prettierrc

{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "arrowParens": "avoid"
}

해당 세팅들은 프로젝트를 진행하며 더 추가할 예정입니다.

2. 폴더 구조

설치하셨다면 기본적인 폴더들이 있을 겁니다.

public - 프로젝트에 사용되는 정적 파일들
pages - 이 폴더 안에 각 페이지를 만들면 자동으로 라우팅 처리가 됩니다.
styles - 스타일 관련 파일들

본인의 방식에 따라 추가하시면 됩니다.

저는 src, components 등 폴더들을 추가하였습니다.

3. 스타일링

평소 styled-components를 사용했었는데요.

이번 프로젝트에서는 emotion을 사용할 예정입니다.

* emotion 사용 이유

1. npm 다운로드 횟수가 더 많다.

2. CSS Prop과 styled-components 방식 모두 사용 가능

3. SSR 별도의 설정이 필요 없다.

Next.js 특징 살펴보기

아지송아지 — Thu, 5 May 2022 12:26:38 +0900

안녕하세요.

오늘은 Next.js에 대해 알아보겠습니다.

Next.js?

Next.js란 Verceld에서 만든 React 프레임워크입니다.

SSR, SEO 등 많은 특징들을 가지고 있습니다.

쫌 더 자세히 알아보겠습니다.

1. Server Side Rendering (SSR)

넥스트의 가장 대표적인 특징은 SSR입니다.

리액트는 CSR로 SSR에 비해 초기 페이지 로딩이 오래 걸리고 SEO가 어렵다는 단점이 있습니다.

반면 SSR은 서버에서 완성된 HTML을 보내주기 때문에 렌더링 속도가 빨라 로드 시간이 짧고 SEO가 좋습니다.

CSR보다 서버에 부하가 많고 페이지 이동 시 깜빡임 현상이 있을 수 있다는 단점이 있습니다.

2. Search Engine Optimization (SEO)

1번 특징에서 말씀드렸던 SEO입니다.

기존의 리액트는 html구성이 안되어있는 상태이기 때문에 검색엔진이 쉽게 찾을 수 없습니다.

반면 넥스트는 서버에서 이미 html을 구성하였기 때문에 SEO가 좋습니다.

구글의 크롤러 봇은 자바스크립트를 실행할 수 있어 CSR의 크롤링도 가능합니다.

하지만 아직 완벽한 상태는 아니며, 구글 측에서도 자바스크립트를 실행 전 더욱 빠른 크롤링과

다른 크롤러 봇들을 위해 SSR을 고려해보라는 말을 합니다.

SEO가 좋으면 사용자가 검색했을 때 제작한 페이지가 상단에 노출되어야 유입이 증가합니다.

3. Pre-rendering

넥스트는 모든 페이지를 사전 렌더링 합니다.

두 가지 종류가 있습니다.

3-1. Static Site Generation (SSG)

정적 생성의 경우 프로젝트가 빌드되는 시점에서 html 파일이 생성됩니다.

3-2. Server Side Rendering (SSR)

SSR은 매 요청마다 html 파일이 생성됩니다.

해당 부분은 추후 더 자세히 설명드리겠습니다.

4. Dynamic Routes

리액트와 다르게 별도의 세팅 없이 폴더 및 파일 기반으로 라우팅을 지원합니다.

5. 개발 중 저장하면 자동으로 리 렌더링이 일어납니다.

6. 강력한 페이지 이동

넥스트는 <Link />로 페이지간 이동이 빠르고 매끄럽습니다.

a태그와 다르게 페이지가 리 로딩되지 않으며 <Link />가 뷰포트에 보이면 해당 페이지를 백그라운드에서 미리 가져옵니다.

7. Code Splitting

첫 페이지가 로드될 때 모든 코드를 호출하는 것이 아닌, 번들을 여러 조각내어 처음에 필요한 부분만 전송해 주는 방식으로 로드 시간을 단축시킵니다. 코드 분할은 webpack, parcel 등 모듈 번들러도 지원하는 기능이지만 넥스트는 별도의 설정 없이 사용 가능합니다.

이외에도 여러 가지 특징이 있습니다.

코드를 직접 작성하며 더 자세히 알아보겠습니다.

ESLint, Prettier

아지송아지 — Tue, 26 Apr 2022 15:06:02 +0900

npm install --save-dev --save-exact prettier

안녕하세요!

오늘은 ESLint, Prettier에 대해 알아보겠습니다.

"어떻게"보다 "왜"에 집중해보겠습니다.

왜 ESLint, Prettier를 써야 하는 걸까요?

프로젝트를 하다 보면 팀 단위로 진행을 할 때가 많습니다.

그럴 때 깔끔하고 통일된 코드를 위해 규칙을 정합니다. 코드 컨벤션을 만드는 것이죠.

ESLint는 코드 퀄리티를 보장하며, Prettier는 코드 스타일을 보장합니다.

ESLint?

문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 품질로 작성하도록 도와줍니다. 외부에 공개되어 많은 개발자가 사용 중인 Airbnb Style Guide, Google Style Guide 가 그 대표적인 예입니다.

Prettier?

줄 바꿈, 공백, 들여 쓰기 등 일관된 스타일로 작성하도록 도와줍니다.

먼저 eslint부터 알아보겠습니다.

ESLint!

1. eslint 설치

npm install eslint

eslint를 사용하기 위해서는 두 가지 세팅이 필요합니다.

npm 혹은 yarn을 통해 설치하고, VSCode Extensions에서 eslint를 검색하여 설치합니다.

* 추가 지식 (VSCode Extension 설명)

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version.

ESLint는 워크스페이스에서 먼저 설치된 것을 찾으며, 없으면 전역에서 찾습니다.

2. eslint 설정

1번 단계를 모두 했으면 사용할 준비는 끝났습니다.

이제 세팅한 환경에서 무슨 규칙으로 어떻게 사용할 건지 정해봅시다.

eslint --init

명령어를 실행하면 몇 가지 질문들을 하는데 저는 아래와 같이 답변했습니다.

끝나면 .eslintrc(.js / .json) 파일이 자동으로 생성됩니다.

특정 프로젝트를 자동으로 세팅해주는 라이브러리의 경우 이미 설치되어 있을 수 있습니다.

eslintrc 파일에는 여러 가지 속성이 있습니다.

env

정의된 함수나 전역 변수 사용을 정의합니다.

browser:true, node:true 로 설정하면 console.log(), require 등을 에러 없이 사용할 수 있습니다.

  env: {
    node: true,
    browser: true,
  },

parser

기본적으로 Espree 파서를 사용합니다. 필요에 따라 다른 파서들도 사용합니다.

Babel : babel-eslint
- ESLint는 기본적으로 ES6 / JSX / spread까지 문법만 지원하여 그 이상의 문법이 필요할 경우 반드시 사용해야 합니다.
Typescript : @typescript-eslint/parser

{
    parser: "babel-eslint",
    // parser: "@typescript-eslint/parser"
}

parserOptions

ESLint를 사용하기 위해 지원하려는 Javascript 옵션을 지정할 수 있습니다.

sourceType : parser의 export 형태를 설정
ecmaVersion : ECMAScript 버전 설정
ecmaFeatures : ECMAScript의 언어 확장 기능 설정
- impliedStric: strict mode 사용 여부
- jsx: ECMScript 규격의 JSX 사용 여부 (ESLint가 react를 잘 분석하기 위해서는 eslint-plugin-react를 설치)

{
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 6,
        ecmaFeatures: { jsx: true },
    }
}

plugins

플러그인 패키지를 설치하고, 사용할 플러그인을 가져옵니다.

가져오는 것만으로는 아무 일도 일어나지 않습니다.

사용하기 위해서는 extends나 rules에 추가해야 합니다.

eslint-plugin- 접두사는 생략 가능합니다.

{
    plugins: [
        // 'eslint-plugin-react', eslint-plugin- 생략 가능
        'react', 
    ],
}

몇 가지 플러그인을 소개해드리겠습니다.

eslint-config-next : next 규칙을 추가
eslint-plugin-import : ES6의 import/export 체크, 파일 경로, import 이름 등 체크
eslint-plugin-react : 리액트 규칙을 추가
eslint-plugin-react-hooks : React함수 내에서 / 최상위에서 Hook을 호출해야 하는 규칙을 강제
eslint-config-prettier : ESLint와 Prettier가 충돌하면 ESLint에서 해당 부분을 비활성화
eslint-plugin-prettier : Prettier를 ESLint 플러그인으로 추가, Prettier 포맷 오류를 ESLint 오류로 출력

extends

플러그인에서 사용해야 하는 규칙을 설정합니다.

가져온 플러그인을 rules에 일일이 넣는 것이 아닌 한 번에 적용합니다.

rules

플러그인에서 가져와 사용할 규칙들을 넣어주면 됩니다.

가져온 플러그인 중 특정 에러를 끄고 싶다면 여기서 설정합니다.

eslint-plugin- 접두사는 반드시 생략해야 합니다. (ESLint는 접두사 없이 이름을 사용하여 규칙을 찾습니다.)

이곳에서 여러 규칙들을 볼 수 있습니다.

세 가지 속성이 있습니다.

off : 규칙을 사용하지 않음
warn : 규칙을 경고로 사용
error : 규칙을 에러로 사용

ESLint 검사 자체를 무시하고 싶다면, 파일 최상단에 아래 코드를 추가하시면 됩니다.

/* eslint-disable */

Prettier!

이제 prettier를 알아봅시다!

prettier를 사용하는 방법은 총 두 가지입니다.

1. VSCode Extension 직접 세팅

2. prettier 플러그인 세팅

1. VSCode Extension 직접 세팅

Extension에서 prettier를 설치합니다.

Settings에 들어가서 원하시는 대로 설정합니다.

* Settings 들어가는 방법

On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings

2. prettier 플러그인 세팅

npm install --save-dev --save-exact prettier

위 명령어로 설치를 합니다.

.prettierrc 파일을 만들어 세팅합니다.

{
  "singleQuote": true, // ''를 사용하는지 여부, 기본값은 ""
  "tabWidth": 2, // 탭 너비 
  "printWidth": 80, //  줄 바꿈 할 길이 (80자 이상이면 줄 바꿈)
  "trailingComma": "all", // 객체, 배열, 함수 등의 후행에 쉼표를 찍을지 제어
  "semi": true, // 세미콜론 사용 여부
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 설정
}

이외에도 많은 속성들이 있습니다.

* 우선순위

두 방법 모두 세팅되어 있다면 .prettierrc이 우선적으로 적용됩니다.

사용하기

저장을 하면 자동으로 바꿔주는 기능을 사용해 보겠습니다.

1. 세팅에 들어가 format on save를 검색합니다.

아래와 같이 체크를 활성화시켜줍니다.

2. command+shift+p 를 누르고 검색창에 ">Open Settings (JSON)"을 검색하여 들어갑니다.

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
}

위 코드를 추가/수정합니다.

감사합니다.

참고 :

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/

https://velog.io/@kyusung/eslint-config-2#%ED%99%98%EA%B2%BDenv

https://develoger.kr/frontend/eslint-기본적인-사용법/

https://velog.io/@rimo09/ESLint-%EC%84%A4%EC%A0%95

https://velog.io/@mayinjanuary/Next.js-세팅하기-ESLint-Prettier-설정

https://velog.io/@velopert/eslint-and-prettier-in-react

https://helloinyong.tistory.com/325

https://code.visualstudio.com/docs/getstarted/settings

https://pstudio411.tistory.com/entry/아-보기-좋은-코드다-Prettier-알아보기

React Three.js 애니메이션 적용, obj 파일 추가

아지송아지 — Thu, 21 Apr 2022 11:34:24 +0900

안녕하세요

오늘은 @react-three/fiber의 useFrame을 사용하여 geometry에 애니메이션을 추가해 보겠습니다.

애니메이션

Vanila JS에서는 requestAnimationFrame을 사용했지만 react에서는 useFrame을 사용합니다.

y 축으로 계속 회전하는 애니메이션입니다.

import { useFrame } from '@react-three/fiber';
import React, { useRef } from 'react';

const ReactModel = (props) => {
    
    const modelRef = useRef();

    useFrame(() => {
        modelRef.current.rotation.y += 0.01;
    })

    return(
        <mesh position={[0, 0, 0]} ref={modelRef} castShadow>
            <torusKnotBufferGeometry
                attach='geometry'
                args={[10, 1, 300, 20, 6, 10]}
            />
            <meshPhysicalMaterial
                attach='material'
                color={"#61DBFB"}
            />
        </mesh>
    )
};

export default ReactModel;

useRef로 mesh에 접근 후 roatation 값을 조절합니다.

위치를 이동하고 싶으시면 position 값을 사용하시면 됩니다.

OBJ 파일 추가

import React from 'react';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import userObj from '../obj/user.obj';
import { useLoader } from '@react-three/fiber';

const UserModel = (props) => {
    
    const obj = useLoader(OBJLoader, userObj);

    return (
        <mesh position={[0, -20, 15]}>
            <primitive object={obj} scale={4.0}/>
        </mesh>
    );
};

export default UserModel;

* obj 파일이 있어야 합니다.

위 코드와 같이 작성 후 Canvas 안에다 import 해주시면 됩니다.

주의하셔야 할 점은 useLoader안에 경로를 직접 넣으시면 안됩니다.

const obj = useLoader(OBJLoader, '../obj/user.obj');

조그만 obj 가 생겼네요 :)

공부해야 할게 많이 생겨서 이제 three.js 관련 글은 앞으로 안 올라올 것 같습니다.

감사합니다!