[TIL] 내일배움캠프 React 과정 2023.02.05

Today I Learned

• Next.js 강의 수강
• Programmers 문제 풀기
• 최종프로젝트 팀 노션 준비하기

 

---

Next.js 강의 수강 내용

router.push(url, as, options)

router.push(
      {
        pathname: `/movies/${id}`,
        query: {
          title
        }
      },
      `/movies/${id}`
)

 

• 클라이언트 측 전환을 처리한다. 이 방법은 next/link가 충분하지 않은 경우에 유용하다.
• url: UrlObject | String: 탐색할 URL
• as: UrlObject | String: 브라우저 URL 표시줄에 표시될 경로에 대한 선택적 데코레이터이다.
  
  

getServerSideProps

export default function Detail({ params }: any) {
  const router = useRouter();
  const [title, id] = params || [];
  return (
    <div>
      <Seo title={title} />
      <h4>{title}</h4>
    </div>
  )
};

export function getServerSideProps({ params: { params }}: any) {
  return {
    props: {
      params,
    }
  }
};

• params || [] 로 작성하는 이유
• 기본적으로 미리 렌더링이 되기 때문에 먼저 html 파일이 내려오는데 이때는 아직 js들이 다운로드가 안 됐기 때문에 useRouter()로 정보를 제대로 가져오질 못하는 상태이다. 그렇기 때문에 초기에는 빈 배열을 추가해 줘서 오류가 발생하지 않도록 하고, js가 내려가서 다시 렌더링 하게 되면 그때는 빈 배열이 아닌 router.query.params에서 값을 가져와서 뿌려주는 것이다.

 

• getServerSideProps
  페이지에서 getServerSideProps(서버 측 렌더링)라는 함수를 export하는 경우 Next.js는 getServerSideProps에서 반환된 데이터를 사용하여 각 request에서 이 페이지를 pre-render한다.
  https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
  
  
• getServerSideProps (Context parameter)
  params: 이 페이지에서 dynamic route(동적 경로)를 사용하는 경우 params에 route parameter가 포함된다. 페이지 이름이 [id].js이면 params는 { id: ... }처럼 보일 것이다.
  query: 쿼리 문자열을 나타내는 객체다.
  https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props#context-parameter

 

---

Programmers 문제 풀기

x만큼 간격이 있는 n개의 숫자

나의 풀이

function solution(x, n) {
    let answer = [];
    for (i = x; Math.abs(i) <= Math.abs(x*n); i += x) answer.push(i)
    return answer;
}

이렇게 하니까 x가 0인 경우에 런타임 에러가 발생했다.

 

function solution(x, n) {
    let answer = [];
    if ( x === 0 ) {
        answer = Array(n).fill(0)
    } else {
        for (i = x; Math.abs(i) <= Math.abs(x*n); i += x) {
            answer.push(i)
        }
    }
    return answer
}

그래서 if문으로 x가 0인 경우에 Array.fill()로 배열을 생성하는 경우를 추가했다. 풀이가 썩 마음에 들지는 않는다.

 

Array(3).fill(4); // [4, 4, 4]

• Array.prototype.fill()
• fill() 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채웁니다.
• 출처 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

 

다른 사람의 풀이 01

function solution(x, n) {
    return Array(n).fill(x).map((v, i) => (i + 1) * v)
}

이런 풀이 볼 때마다 현타 온다 ㅎ 그래도 배울 건 배워가야지... 만약 x=4. n=3이라면 Array(3).fill(4)로 [4,4,4]라는 배열을 만든다. 그리고 이 배열을 map을 돌려서 각 요소마다 index에 1을 더한 값을 곱한다. 이렇게 풀면 굳이 x가 0인 경우를 예외 처리할 필요도 없어진다.

 

다른 사람의 풀이 02

function solution(x, n) {
    var answer = [];
    for (let i = 1; i <= n; i++) {
        answer.push(x*i)
    }
    return answer;
}

그냥 index를 이용해서 x*index로 배열에 추가를 해줘도 됐구나..!

 

---

회고

getServerSideProps가 어떻게 파라미터로 context를 받아오는 것인지 과정이 이해가 잘 안 된다. 내일은 이 과정을 집중적으로 탐구해야겠다. 그리고 오늘은 최종프로젝트 때 사용할 팀 노션을 미리 작성했다. 개인적으로 멤버 카드 재밌을 거 같아서 기대된다 ㅋㅋ

나름 환영의 이미지도 만듦 ㅎㅎ