출처)https://school.programmers.co.kr/learn/courses/30/lessons/132267
정답은 아무에게도 말하지 마세요.
콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가?
단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다.
문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다. 상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 받고, 또 2병을 모두 마신 뒤 가져가서 1병을 받습니다. 받은 1병과 5병을 받았을 때 남은 1병을 모두 마신 뒤 가져가면 1병을 또 받을 수 있습니다. 이 경우 상빈이는 총 10 + 5 + 2 + 1 + 1 = 19병의 콜라를 받을 수 있습니다.
function solution(a, b, n) {
let i=n
let answer=0
while(i>=a){
answer+=Math.floor(i/a)*b
i=(Math.floor(i/a)*b+i%a)
}
return answer
}
1.i를 소유한 빈 병 수로 설정, 빈 병 수가 a 보다 크거나 같을때 반복실행되는 while 문을 작성.
2. answer에 i를 a로 나눈 몫에 b를 곱한 수를 누적해서 더해나간다.
3. 위에서 더한 값에 i를 a로 나눈 나머지에 해당하는 값이 그 다음 빈병의 수인 i.
4. 마지막으로 그렇게 누적해서 더해나간 answer를 리턴
어제 SSG의 한계로 데이터의 최신성을 완벽하게 보장할 수 없다는 것을 언급하면서 그 대안으로 SSR을 쓸 수 있다고 설명했다. 이번엔 SSR에 대해서 간단하게 알아보자.
export async function getServerSideProps(context) {
const req = context.req;
const res = context.res;
//fetch data from API
return {
props: { meetups: DUMMY_MEETUPS },
};
}
req는 request 객체 를 의미, res는 response 객체 를 의미. 필요한 경우 저렇게 쓸수도 있다고 한다.
getStaticProps랑 하는일은 같다. props를 컴포넌트 함수에 제공하는 것. 단지 차이는 getServerSideProps는 페이지 요청이 있을때마다 실행되기 때문에 항상 최신 데이터를 제공하게 되고 따라서 revalidate 같은것도 별도로 설정할 필요가 없다는 것.
얼핏 보기엔 getServerSideProps가 더 좋아보이지만 모든 요청마다 다 서버에서 이 코드가 실행되는 것을 기다려야 한다는 의미이기 때문에 매순간 바뀌는 데이터가 없다면 getStaticProps가 더 나은 선택이다.
요약하자면 request/response 객체에 대한 접근이 필요하거나 매순간 변화하는 데이터를 다루는 경우라면 getServerSideProps를 쓰고 위 경우에 해당되지 않는다면 getStaticProps를 사용하면 된다. 이 두가지는 next.js 의 핵심적인 기능중에 하나고 next.js 프로젝트에서는 거의 반드시 사용하게 될 것이므로 반드시 알아둬야 한다.