Next.js 란 무엇인가?

• next.js는 Node.js와 Babel을 기반으로하여 Vercel이 만든 오픈소스입니다.
• 클라이언트 사이드 렌더링 기반인 리액트를 서버사이드렌더링을 가능하게 하며, HTTP 캐싱, 검색엔진, 동적인 import 또는 웹팩의 번들과정을 통해 자동화 코드스플리팅을 도와주는 아주 훌륭한 프레임워크입니다.
• 즉, 리액트의 단점인 SEO와 초기 렌더링 과정에서 깜빡이는 플리킹 현상 등 많은 부분을 극복할 수 있게 도와줍니다.

서버사이드 렌더링이란?

• 클라이언트 대신 서버에서 페이지를 미리 렌더링하는 원리이다.
• 기존 리액트는 자바스크립트 파일을 받아와 해당 스크립트에서 HTMl로 붙이는(즉, 모든 렌더링을 클라이언트에서 처리하는 클라이언트 사이드 렌더링 방식이다)
• 서버사이드 렌더링은 미리 서버에서 필요한 데이터와 HTML요소를 렌더링 하는 방식이다.
• 때문에 초반 플리킹이 일어나지 않고, SEO에 강한 장점을 보인다.
• 클라이언트 사이드 렌더링이 SEO(검색엔진)에 적합하지 않는 이유는 검색엔진 크롤러가 서버에서 데이터를 수집하는데, 클라이언트 렌더링은 서버에 검색엔진 크롤러가 수집할 데이터가 없기때문에 SEO에 굉장히 안좋은 단점을 보여준다.
• 때문에 NEXT.js로 SPA 기반의 리액트 단점을 극복하여 강한 퍼포먼스를 보여주면서 검색엔진 최적화 기능까지 제공할 수 있게 된다.

자동 코드분할(Automatic code splitting)

• Next.js는 주어진 페이지에만 필요한 자바스크립트와 CSS를 로드하는데 매우 강력하다
• 때문에 훨씬 빠른 로딩 시간을 제공하게 되는데 유저가 즉시 볼 필요가 없는 부분에 대한 자바스크립트와 css를 다운로드 하지 않기 때문이다.
• 이것은 퍼포먼스 측면에서 매우 유리하며, 유저가 화면을 보는데 매우 빠른 경험을 제공해준다.

이번시간에 자바스크립트 개발에서 대표적 페러다임인 객제지향과 함수형 프로그래밍에 대해 알아보도록 하겠습니다

먼저 객제치향 즉, OOP에 대해 알아보도록 하겠습니다.

OOP란?

• class object를 기반으로 한 프로그래밍 기법입니다. (과거에는 class가 아니라 function 생성자에 프로토타입을 추가하여 사용하였습니다. ES6 이후로 class가 나와 OOP에 새로운 페러다임을 불어넣어줬습니다.)
• 관련이 있는 코드를 그룹화를 시켜 객체를 만들어내는 것입니다.
• 대표적인 특징으로는 상속성, 다형성, 추상화, 캡슐화가 있습니다.

FP란?

• 코드의 사이드이펙트를 피하고 순수함수로 작성하는 기법을 의미합니다.
• 외부의 데이터를 참조하여 수정하면 안됩니다.(불변성을 유지해야합니다)
• 순수함수, 고차함수, 참조투명성에 기반을 둔 개념입니다.

두개의 패러다임은 개발하면서 겪는 공통적인 문제를 해결하기 위한 디자인 패턴인 패러다임입니다. 코드는 늘 관리하기 쉬워야하고, 확장성이 용이해야하며, 메모리 효율성이 좋아야합니다.

객체지향 vs 함수형 프로그래밍의 차이점

• 함수형 프로그래밍은 고정된 데이터를 다루기에 용이합니다. 반면에 객체지향 프로그래밍은 공통적인 데이터를 다루기에 좋습니다.
• 함수형 프로그래밍은 stateless 한 특징을 보입니다. 상태값을 수정하면 안되며 기존 상태의 불변성을 유지하면서 새로운 데이터값을 리턴해야합니다. 반면에 객체지향은 statefull 한 특징을보이며, class의 메서드들이 그 class 프로퍼티의 상태를 변경할 수 있습니다.
• 함수형 프로그래밍은 선언형 프로그래밍이며, 객치제향 프로그래밍은 명령형 프로그래밍이다.

테스트 코드를 먼저 작성하고 그 테스트를 통과하기 위한 코드를 짜는 일종의 개발 방법론이다.

기본적으로 create-react-app을 하여 react 프로젝트를 만들게되면 tdd를 위한 기본 설정이 다 되어있다.

테스트를 위해 react-testing-library와 jest가 필요하다.

1. react-testing-library는 테스트를 위한 가상돔을 제공해주는 역할이다.
2. jest는 테스트를 진행해주는 역할을 하여 해당 테스트가 pass인지 fail인지 판별해준다.

간략하게 코드 살펴보기

기본적으로 cra하게되면 App.test.js 파일이 있을것이다. test를 진행하기 위해선 컴포넌트명.test.js 형태로 파일이 만들어져야한다.

App.test.js 파일 내부를 살펴보면 아래와 같다.

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();

});

위 코드에서 render 메서드는 가상돔을 생성해주는 역할을 한다. 즉 App컴포넌트를 가져와주는 역할을 한다. 그리고 screen 글로벌 객체가 가상돔에 접근할수 있게 해준다.

때문에 screen. 을 통해 해당 App컴포넌트에 접근을 하여 getByText()를 이용해 App 컴포넌트 안에 있는 element을 불러오는 것이다.

즉, screen.getByText(/learn react/i) 의 뜻은 App 컴포넌트 안에있고, 그 안에서 learn react 라는 텍스트를 가진 element를 linkElement라는 변수에 할당하는 것이다.

/learn react/i 은 정규표현식으로 대소문자 구분하지 않는 것입니다.

마지막으로 expect(linkElement).toBeInTheDocument(); 은 해당 element가 우리의 document에 들어있는지 확인하는 것입니다.

.toBeInTheDocument() 와 같은 것을 jest or jest-dom _matcher_라고 부릅니다.

종합적으로 요약하자면 App컴포넌트안에 Learn React라는 텍스트를 가진 요소를 가져와 그 요소가 html document에 있는지 테스트 하는 것입니다.

해당 document에 그 요소가 있다면 pass를 하고 없다면 fail을 하는 것입니다.

이처럼 TDD는 원하는 컴포넌트에 대한 입출력과 예상 결과값을 미리 작성한다음 그 컴포넌트의 기능 구현을 하는 것입니다. 그러면 저장을 누를때마다 해당 테스트가 pass인지 fail인지 바로 알수있게되며 버그를 줄이면서 안전한 개발을 할 수 있게 됩니다. -> jest가 파일의 변화를 계속 watch 하고 있습니다! 변화가 없으면 test를 진행하지 않습니다.

추가적으로, jest-dom 이란 것이 있는데, DOM 요소에 대한 테스트를 더 쉽게 하기 위해 사용자 정의 matcher를 사용하여 jest를 확장하는 라이브러리입니다

• create-react-app 할때 같이 세팅되어있습니다.
• test가 실행되기전 src/setupTest.js에 import를 하며, 이용가능한 matcher를 만들어줍니다.

테스트 방법에는 unit test, integration test, functional test가 있다.

Unit Test란?

• 함수 하나 하나 개별로 테스트 하는 것이다. (함수와 같이 세밀한 단위로 테스트)
• fail로 발생하는 버그를 잡아내기가 매우 용이하다.

Integration Test란?

• 각각의 시스템들이 정상적으로 상호작옹 하는지 테스트 하는것
• 유닛테스트는 컴포넌트별로 독립적으로 테스트하는 반면 통합테스트는 외부리소스와 직접적으로 통신하면서 테스트
• 보통 유닛테스트만으로 충분하지 못하다고 느끼지 못할때 사용

Functional Test란?

• 어플리케이션이 정상 작동하는지 완전한 기능 테스트할때 사용
• 유저가 소프트웨어와 어떤식으로 interact 하는지 파악하는데 좋다.

아래의 링크는 testing-library에서 우선순위로 외우면 좋은것들을 나열한 list이다. https://testing-library.com/docs/queries/about/#priority

• 위 링크에 접속하면 getByRole이 가장 처음에 나오는 것을 볼 수 있다.
• 기본 CRA test코드는 getByText를 이용하여 dom에 접근하지만, 상호작용하는 요소를 가져올때는 getByRole를 사용하는것이 권장된다!
• getByRole은 WA-ARIA role(접근성을 위해 나눠노은 role)를 따르는 요소를 가져온다.

클로저란?

• 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수
• 자바스크립트에선 모든 함수가 클로저임

코드 살펴보기

function makeCounter() {
  let count = 0;
  return function() {
    return count++
  }
}

let counter = makeCounter();

//0
console.log(counter())
//1
console.log(counter())
//2
console.log(counter())

1. 다음과 같이 makeCounter라는 함수를 만들고,
2. 그 안에 count라는 변수를 0으로 선언 초기화를 했다.
3. 그리고 중첩함수를 사용하여 그 안에 count를 1씩 증가시키는 함수를 return 하는 함수를 만들었다.
4. 그리고 makeCount()이라는 함수를 실행시키고 counter라는 변수에 선언 초기화 할당을 하였다.
5. 그 이후 해당 변수를 연속으로 실행시켜보면 안에있는 count가 1씩 늘어나느 것을 확인 할 수 있다.

우리가 여기서 봐야할 개념은 어떻게 함수를 실행시켰는데 그 안에 있는 렉시컬 환경이 그대로 남아서 그거를 계속 참조하고 있느냐는 것이다.

우리가 중요하게 알아야 할 개념은 모든 함수는 함수가 생성된 곳의 렉시컬 환경을 기억한다는 점입니다. 함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖는데, 여기에 함수가 만들어진 곳의 렉시컬 환경에 대한 참조가 저장됩니다.

따라서 counter.[[Environment]]엔 count = 0인 렉시컬 환경에 대한 참조가 저장됩니다. 함수가 자신이 태어난 곳을 기억할 수 있는 건 바로 이 [[Environment]] 프로퍼티 덕분이며, 딱 한 번 값이 세팅되고 영원히 변하지 않습니다.

counter()를 호출하면 각 호출마다 새로운 렉시컬 환경이 생성됩니다. 그리고 이 렉시컬 환경은 counter.[[Environment]]에 저장된 렉시컬 환경을 외부 렉시컬 환경으로서 참조합니다.

때문에 makeCounter가 실행되고 종료가 되었음에도 계속해서 그 환경을 참조하여 count 값을 유지시키는 것입니다.

가비지 컬렉션 이란?

• 기본적으로, 함수 호출이 끝나면 함수에 대응하는 렉시컬 환경이 메모리에서 제거됨.
• 때문에 함수 호출이 끝나면 관련 변수를 참조할 수 가 없음.
• 하지만 호출이 끝난 후에도 여전히 도달 가능한 중첩 함수가 있음
• 이 경우에는 중첩함수의 [[Environment]] 프로퍼티에 외부 함수 렉시컬 환경에 대한 정보가 저장된것임
• 함수 호출은 끝났지만 렉시컬 환경이 메모리에 유지되어 클로저가 발생하는 경우가 이때문임
• 즉, 가비지 컬렉션은 함수 호출이 끝나서 렉시컬 환경이 메모리에서 사라졌고, 그 메모리에 더 이상 아무것도 참조되어있지 않은것을 컴퓨터가 알아서 메모리에서 삭제시켜주는 것임. 가비지 컬렉션이 없다면 시스템 메모리 할당량이 계속 커져 부하가 일어남

DOMContentLoaded 이벤트란?

• 돔트리 분석이 끝나면 발생
• 즉, 돔트리가 다 만들어진 후에 돔에 접근이 가능하기때문에, 돔이 생성되기전 돔을 조작하는 자바스크립트 코드가 실행되어 원하지 않는 결과를 내는것을 막을 수 있다.

  document.addEventListener("DOMContentLoaded", ()=> {
    console.log("원하는 코드 적기")
  });

load 이벤트와의 차이점은?

• load는 돔트리 이후 모든 리소스까지 완벽히 끝난 후 발생하는 이벤트
• DOMContentLoaded는 돔트리까지만 형성되면 발생하는 이벤트
• 즉 DOMContentLoaded 이벤트가 load이벤트보다 앞서 발생
• 로딩 측면에서 DOMContentLoaded가 우위에 있음

• GraphQL 이전부터 사용
• 소프트웨어간 정보를 주고 받는 방식
• 4가지의 메서드를 사용(GET, POST, PUT, DELETE)
• Overfetching과 Underfetching 이 발생하는 단점이 있음
• 데이터를 얻기 위해 다양한 endpoint가 필요함

overfetching이란?

• 데이터를 요청하게되면 해당 구조의 모든 데이터를 리턴 받게됨
• 즉, 굳이 내가 필요없는 데이터까지 불러와지게되는것

underfetching이란?

• 내가 원하는 정보들이 여러 계층에 걸쳐서 얽혀있는 경우, 그 데이터를 얻기 위해 여러번의 요청을 하는 것

GraphQL이란?

• 위 두 문제를 해결하기 위하여 facebook에서 만든 쿼리 언어
• 단 하나의 endpoint가 존재
• 불러오는 데이터 종류를 쿼리 조합을 통해 결정
• 필요한 데이터만 가져올 수 있음
• 여러곳에 얽혀있는 데이터를 여러번 요청 없이 단 한번의 요청으로만 데이터를 가져올 수 있음

query {
    team(id:2){
     id
     manager
    }
}

위와 같은 형식으로 요청을 하면 "id가 2번인 팀에서 다른건 다 필요없고 id와 manager 데이터만 줘"

이런 의미로 데이터 요청이 가능하다

사실 이것은 React를 사용할때 많이 사용하던 문법이었는데, 그 문법이름이 computed property name이라는 것을 오늘 알았네요!!

리액트할때 onChange 이벤트시 state값에 키밸류값을 덮어씌울때 자주 사용하였는데요 코드로 살펴보겠습니다

const test1 = "aa";
const test2 = "bb";
//{aa:"bb",bb:"aa"}
console.log({[test1]:test2,[test2]:test1})

위와 같이 대괄호[]를 사용하여 키값을 정할 수 있다는 것입니다. []안에 넣은 것에 대한 value값이 키 값으로 정해지게 되는 것이죠. 그래서 위 값은 test1의 값인 aa 가 키값이고 test2의 밸류 값인 bb인 형태로 키 밸류 값이 만들어 진것이죠.

또 제가 리액트에서 자주 사용하던 방식으로 덮어씌우기도 가능합니다.

const test = {
  abc:"",
  def:""
}
const a = "abc"
//{abc:"computed property",def:""}
console.log({...test,[a]:'computed property'})

위 형태로 출력이 됩니다. [a]는 a의 값이 abc이므로 abc를 키값을 지니는데, abc라는 키값이 이미 존재하니 그걸 그것의 value값으로 덮어씌어버리는것이죠.

iterable의 영단어 뜻은 반복가능한이라는 의미이며 iterator는 반복자라는 의미입니다.

이 영단어 뜻대로 iterable한 요소는 배열같이 반복이 가능한 것들을 나타냅니다.

때문에 for of 같은 배열을 순회하는것은 iterable한것만 순회할 수 있고 iterable하지 않는 것을 순회하면 에러가 발생합니다.

let test = {a:"1",b:"2"};

for(let i of test) {
  //error: Uncaught TypeError: test is not iterable
  console.log(i)
}

좀 더 깊게 들어가면 itrable은 iterator를 리턴하며 Symbol.iterator를 가진값이며 iterator는 value와 done을 리턴하는 next 메서드를 가진 값입니다.

value는 순회할때 발생하는 값이고, done는 순회가 다 끝났는지 아닌지 여부를 나타내는 boolean입니다. 순회가 다 안끝난 상태면 false, 끝났으면 true를 나타냅니다.

더 나아가 generator라는 것이 있습니다. genreator는 iterator를 발생시키는 함수입니다.

구현은 function뒤에 별표 를 붙여 함수를 선언합니다.

function* gen() { 
  yield 1; yield 2; yield 3; return -1; 
  };

const iter = gen(); 
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

gen()이라는 제너레이터를 만들고 그 제너레이터를 이용해서 iter라는 iterator를 만들었습니다.

iterator는 next메서드를 가졌으며 그것으로 순회할 수 있는 것입니다.

{
value:1,
done:false
}
{
value:2,
done:false
}
{
value:3,
done:false
}
{
value:-1,
done:true
}

{
value:undefined,
done:true
}

위 콘솔로 next() 계속 찍으면 위 처럼 값이 나오는데 return 직전에 yield 로 나타낸 value값 까지 done이 false로 나오면서 순회하고 그 이후에는 done이 true로 나오면서 순회가 끝났음을 의미합니다.

generator - iterator를 만들어줌 iterator - next() 메서드를 지니며 메서드를 실행할때마다 순회를함. 순회가 끝나면 done이 true로 바뀜 iterable - 배열과 같이 순회가 가능하다는 의미이며, Symbol.iterator 프로토타입을 가지고 있음

//iterable한 배열
let array = [1,2,3,4,5]
//프로토타입을 실행시켜 iterator로 반환
let it = array[Symbol.iterator](); 
//iterator의 메서드를 실행시켜 value 1 2 3 순차적으로 출력
console.log(it.next())
console.log(it.next())
console.log(it.next())

debounce와 throttle

• 짧은 시간에 이벤트가 반복적으로 발생할때, 불필요한 실행을 최소화 시켜줌
• 비동기 통신을 하게 될때 과도한 서버 요청을 막을 수 있음

사용하기 위해선 lodash 패키지를 install 하고 import를 해야합니다.

debounce란?

• 이벤트가 끝난 뒤 설정한 시간이 지나면 콜백함수가 실행됨

사용 예시

const debounceScroll = () => {
  debounce(() => {
    count = { ...count, debounce: count.debounce + 1 };
  }, 500);
};

throttle란?

• 콜백 함수를 지정한 시간내 한번만 호출됨 (scroll과 같이 굉장히 짧은 시간에 많은 이벤트가 발생할 경우 사용)

사용 예시

const throttleScroll = () => {
  throttle(() => {
    count = { ...count, throttle: count.throttle + 1 };
  }, 500);
};

• 브라우저의 종류 및 버전에 따른 기능차이에 대해 호환이 가능하도록 제시된 표준
• 웹 표준화 단체인 W3C가 권고한 표준안에 따라 용도에 맞게 웹을 구현하는 것
• 언어의 버전별로 해당하는 규칙이 존재하는데, 해당 언어들의 버전별 규칙을 준수해서 개발을 진행해야함
• HTML, CSS, Javascript 등 구조와 표현, 동작 분리를 권고함
• 목적 - 웹의 사용성 및 접근성을 보장시키기 위함

웹 호환성(Cross Browsing)이란?

• 웹 표준 준수를 통한 브라우저 호환성 확보
• 표준 웹 기술을 사용하고 운영체제나 브라우저 등 어느 한쪽으로만 최적화되지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법
• 어느 웹 브라우저를 사용하던지 동일한 결과가 나오도록 하는것
• 목적 - 웹 브라우저 버전, 종류에 관계없는 웹사이트 접근

웹접근성(Web Accessibility)이란?

• 장애인, 고령자 등 모든 사용자가 전문적인 능력이 없어도 웹사이트에서 제공하는 모든 정보를 접근하고 이해할 수 있게 만드는 권리
• 목적 - 인적, 환경적 요인에 제약없는 웹 정보 접근

위 함수들로 서버사이드렌더링이 가능합니다. 미리 서버에서 데이터패칭을 하여 검색엔진의 장점을 리액트에 살릴 수 있습니다.

getStaticProps은 무엇인가?

• 빌드시 딱 한번만 호출 되고 바로 static 데이터로 빌드가 됩니다. 이후 수정이 불가능합니다. 즉, 빌드시 고정되는 값으로, 빌드이후에는 변경이 불가합니다.
• SSG ( Static Site Generation ) 입니다.
• 말그래도 정적인 개념이며, 빌드후 값이 변하지 않고 고정된 내용을 패칭할때 사용합니다

  export const getStaticProps = async () => {
  const res = await fetch(`https://restcountries.eu/rest/v2/all`);
  const countries = await res.json();
  return {
    props: {
      countries,
    },
  };
  };
  

> 데이터가 유동적으로 패칭될 필요없이 고정된 값을 불러올때 사용합니다

## getServerSideProps은 무엇인가?
- 매 요청시마다 새로 데이터를 패칭합니다.
- SSR (Server Side Rendering) 입니다.
- 동적 데이터를 패칭시에 사용합니다.
```js
export const getServerSideProps = async ({ params }) => {
  const res = await fetch(
    `https://restcountries.eu/rest/v2/alpha/${params.id}`
  );
  const country = await res.json();
  return {
    props: { country, id: params.id },
  };
};

위와 같이 params.id마다 다른 데이터들이 유동적으로 패칭되어야 할때 사용합니다. ex) 데이터들의 상세페이지

이번 시간에는 SPA의 단점인 SEO를 극복하기 위하여 사용되는 Next.js의 기초를 공부하고자 Next.js의 공식사이트 가이드를 차근차근 따라해보는 시간을 가져보겠습니다.

1. next.js 프로젝트 생성하기

• 터미널에서 해당 명령어 실행 후 프로젝트 실행하기

  npx create-next-app nextjs-test
  cd nextjs-blog
  npm run dev
  

localhost:3000 들어가기

![](https://images.velog.io/images/hoon_dev/post/095a70ee-a63f-4ea2-b206-95ec458efcc7/image.png)

**해당 뷰가 나오면 성공
**

- pages/index.js 에 들어가 Welcome to를 Learn으로 바꾸기

![](https://images.velog.io/images/hoon_dev/post/877d0206-f5cb-4373-8cad-edce2ac1049a/image.png)

-  페이지 새로 만들기
- pages 폴더 내 posts 폴더를 만들고 first-post.js 파일 만들기

![](https://images.velog.io/images/hoon_dev/post/f2ed90ba-d770-4682-b188-ddbe737f1cd5/image.png)
![](https://images.velog.io/images/hoon_dev/post/6e93d799-2fb2-42b1-872f-f492ccd6525f/image.png)
> 
여기서 알 수 있는 next.js의 장점
- 폴더 경로와 파일명으로 라우팅이 자동으로 되어 편리함

# 2. Link를 사용하여 url이동 해보기
- 다음과 같이 최상단에 Link import 하기

import Link from "next/link";

- import 한 Link 컴포넌트의 href 속성에 원하는 페이지 url를 적고 특정 요소를 감싸기
```js
 <Link href="/posts/first-post">
   <a>first-post 페이지로 이동해보자!!</a>
 </Link>

3. 정적파일, metadata, css 설정

이미지 파일 넣기

• 하나의 이미지 파일 구하기
• public 폴더안에 images라는 폴더명으로 폴더 생성하기
• 해당 폴더안에 이미지 파일 넣기

일반적인 html 식 img 태그로 이미지를 넣으려면

 <img src="/images/nextjs.png" alt="" />

다음과 같이 작성해야한다. 하지만 이 경우 스크린 크기가 달라지는 반응형웹에서는 비율에 대한 보장을 받기 힘들다.

위의 문제를 해결 하기 위하여

• Image컴포넌트를 import 한다

  import Image from "next/image";
  

- Image 컴포넌트에 이미지 경로와 height width 속성으로 반응형에 대한 비율을 보장 받을 수 있다
```js
      <Image
        src="/images/nextjs.png"
        height={400} // 해당 크기만큼의 비율을 반응형으로 보장 받을 수 있게됨!!
        width={400}
        alt="img"
      />

페이지에 대한 정보 넣기

• html 태그 안 head 내에 넣을 수 있는 link, meta등 필요한 정보들을 컴포넌트별로 넣어 줄 수 있음

• Head 컴포넌트 임포트

  import Head from 'next/head'
  

- Head 컴포넌트로 감싸서 그 안에 head 요소 안에 들어 갈 title, link, meta 등 정보를 나타내는 요소들을 넣어서 페이지별로 설정 가능

```js
<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

4. CSS 다루기

모든페이지에서 사용 가능한 Layout 컴포넌트 만들기

• root directory에 components 폴더 만들기
• components 폴더 안에 layout.js라는 파일 만들기
• Layout 컴포넌트에 하위 컴포넌트를 받아오는 children props로 넣기

  const Layout = ({ children }) => {
  return <div>{children}</div>;
  };
  

export default Layout;

- 레이아웃 컴포넌트로 감싸고 싶은 컴포넌트 파일에 Layout import 하고
- Layout 컴포넌트로 html 요소 감싸기
```js
    <Layout>
      <h1>첫번째 포스트!</h1>
      <Image
        src="/images/nextjs.png"
        height={400} // 해당 크기만큼의 비율을 반응형으로 보장 받을 수 있게됨!!
        width={400}
        alt="img"
      />
    </Layout>

• components 폴더 안에 css를 넣기 위한 layout.module.css 파일 생성 후 css 입히기

  .container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
  }

• css 파일 import 후 className 속성으로 적용시키기

import styles from './layout.module.css'

const Layout = ({ children }) => {
  return <div className={styles.container}>{children}</div>;
};

양이 많아질 것 같아 글을 나눠서 올리겠습니다. 2편에서 뵙겠습니다.

• 액션을 디스패치했을 때 리듀서에서 이를 처리하기 전에 어떠한 작업을 실행할 수 있게 해줌
• 액션과 리듀서 사이의 중간자 역할
• dispatch 메서드로 store로 가고있는 액션을 가로챔

대표적인 라이브러리 Redux-thunk

• 리덕스 미들웨어에서 가장 대표적인 라이브러리

const getReviewDB = (id) => {
  return function (dispatch, getState, { history }) {
    instance.get(`/hospitals/${id}/reviews`).then((result) => {
      dispatch(getReview(result.data));
    });
  };
};

• thunk는 매개변수를 받고 다른 함수를 return하는 함수
• 내부 함수에서 dispatch와 getState를 사용 가능(Redux-Thunk 미들웨어에서 제공받는 함수)
• getState로 store에 저장된 상태값을 불러올 수 있음

어떠한 상황에 사용해할까?

• 정적 타입 언어의 경우, 함수 또는 클래스를 정의할때 변수나 반환값에 대한 타입을 미리 선언해야함
• 하지만 정의하는 시점에 변수나 반환값의 타입을 선언하기 어려운 경우가 있음(예를들어 어떠한 배열 같은 경우 들어오게 될 타입이 여러 경우가 있으며, 이에 대해 미리 타입을 선언하기 어려움 )
• 이 상황때 제너릭으로 문제를 해결 해 나갈 수 있음

제너릭이란?

• 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 방법임
• 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있음
• 제너릭을 사용할때엔 관용적으로 T라는 식별자로 타입을 선언함
• 상황에 맞고 유연하게 타입을 보장 받을 수 있음

예시

function checkTypeFromGeneric<T>(arg:T):T {
  if(arg === null) {
      throw new Error('이것은 null입니다')
    }
    return arg
}

const number = checkTypeFromGeneric(123);
const string = checkTypeFromGeneric('string');

• 위처럼 매개변수에 어떤 타입을 넣어야할지 모르는 상황에서 타입별로 변수를 집어 넣으면, 그 시점에 타입이 결정되어 그 타입으로 리턴이됨
• 첫번째에서 number라는 변수의 타입은 number로, 두번째인 string이라는 변수의 타입은 string으로 유동적으로 타입이 보장되어 반환됨
• 제너릭말고 any를 사용하게 되면 타입이 정해지지 않아 타입이 보장되지 않음 any라는 타입으로 반환됨

Recoil 특징

• redux 의 store로 중앙집중으로 상태값을 관리하는 것이 아니라 atom이란 메서드로 원자식으로 상태를 관리 할 수 있다.
• 순수함수인 selectors를 거쳐 컴포넌트에 전해주는 data-flow이다.
• atoms는 컴포넌트가 구독할 수 있는 상태의 단위이다.
• selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환시킨다.

const testReocoilState = atom({
  key: 'testReocoilState',
  default: [],
});

• 이와 같이 atom에 고유한 키값과 기본 밸류 값을 작성하여 고유의 저장소를 만든다.

  const [recoilState, setRecoilState] = useRecoilState(testReocoilState);

• useRecoilState 훅을 사용하여 atom을 이용하여 만든 상태값을 recoilState에 넣을 수 있다.
• setRecoilState 을 이용하여 testReocoilState 키 값을 가진 상태값을 변경할 수 있다.
• 변경이 일어나면 해당 atom을 구독하고 있는 컴포넌트들에 리렌더링이 발생하여 업데이트가 일어난다

const selecotrTestReocoilState = selector({
  key: 'selecotrTestReocoilState',
  get: ({get}) => {
    const recoilState = get(recoilState);

    return recoilState.length;
  },
});

• selector 순수함수를 이용하여 입력값을 계산하여 출력값을 보여줄 수 도 있습니다.
• get 속성은 계산될 함수입니다.
• 전달되는 get 인자를 통해 atoms와 다른 selectors에 접근할 수 있습니다.
• 다른 atoms나 selectors에 접근하면 참조했던 다른 atoms나 selectors가 업데이트되면서 이 함수도 다시 실행됩니다.

  const selecotrTestReocoilState = useRecoilValue(selecotrTestReocoilState);

• selector는 useRecoilValue()를 사용해 읽을 수 있습니다.

• Key, Value를 이용하여 만들어진 자료 구조
• 검색하고자 하는 key값을 입력받고 해쉬 함수를 돌려서 받은 해쉬 코드를 인덱스로 환산을하여 데이터에 접근하는 방식인 자료구조

배열 vs 해시테이블

배열

people = [
  {name:"john", age=24},
  {name:"hoon", age=21},
  {name:"hyeon", age=34},
  {name:"superman", age=44},
]

• 만약 hyeon의 나이를 알고 알고 싶으면 선형검색(순차적으로 검색하는 것)을 통하여 처음부터 순차적으로 배열을 탐색하게 된다. 이것은 배열 내 원소가 많아지면 많아질수록 시간이 오래 걸리게 될 것이다.

해시테이블

    people = {
      john : 24,
      hoon : 21,
      hyeon : 34,
      superman : 44
    }

• 위 배열의 선형검색의 시간복잡도의 단점을 해결하려면 위와 같은 구조로 프로그래밍 하면 된다. 왼쪽에 있는 john, hoon, hyeon, superman이 key값이며, 이 키를 통하여 원하는 value값을 바로 찾아낼 수 있다.
• 해쉬코드로 바로 데이터에 다이렉트로 접근하기때문에 배열보다 훨씬 빨리 접근이 가능

• 사용자가 원하는 일을 처리할 수 있도록 프로그래밍 언어를 사용하여 올바른 수행절차를 표현해 놓은 명령어들의 집합

프로세스

• 운영체제가 메모리 등의 필요한 자원을 할당해준 실행 중인 프로그램
• 프로그램을 실행하면 운영체제로부터 실행에 필요한 자원을 할당받아 프로세스가 됨
• 각각의 프로세스는 서로 메모리 공간을 독자적으로 갖기 때문에 서로 메모리 공간을 공유하지 못함

쓰레드

• 프로세스 내에서 실행되는 각각의 일들을 의미
• 프로세스 내에서 실행되는 세부 작업 단위로 여러 개의 스레드가 하나의 프로세스를 이루게 됨
• 프로세스 내에서 프로세스의 자원을 이용해서 실제로 작업을 수행하는 일꾼 같은 개념
• 각 스레드는 독자적인 스택 메모리를 갖음
• 자바스크립트는 싱글 스레드 언어

자바스크립트를 로드하는 기본적인 방법은 다음과 같다.

<script src="script.js">

기존 자바스립트는