starkoora

원티드 프리온보딩 챌린지 - CSR / SSR with Next.js

Assignment) 개인 블로그에 아래 질문에 대한 포스팅을 하고 링크를 제출해주세요.

• 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
• 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
• 3. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
  • https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
  • https://github.com/vercel/next.js/ (Next.js Github 레포지토리)
  • _document.js, _app.js, getServerSideProps 같은 요소들에 대해 설명을 요구하는 과제가 아닙니다. 오히려 Next.js 코드 베이스 내부를 살펴보라는 의미입니다.
  • 사전과제 여부나 제출된 과제 퀄리티가 수강 가능 여부 및 이후의 과정에 영향을 미치지는 않을 것이나, 3번 과제를 해보는 것이 큰 학습이 될 것이라고 확신합니다. 반드시 한번 살펴보시길 권장드립니다.
• 제출 전 과제가 유효한 Public 한 링크인지 다시 한번 확인 부탁드립니다.

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 4탄 - useCallback/useRef

useCallback

React에서 컴포넌트가 다시 렌더링 될 때에는 컴포넌트 안에 선언된 함수들을 새로 생성합니다. 결국 계속해서 렌더링 되면 함수도 계속해서 새로 생성된다는 얘기입니다. 딱 들어봐도 비효율의 냄새가 나지 않습니까? 이런 비효율적인 작태를 React팀이 그냥 보고 넘어갔을 리 없겠죠. 그래서 나온것이 useCallback입니다. 저번 글의 useMemo와 비슷하게 퍼포먼스와 효율성을 위한 개념으로 만들어 졌습니다. 해당 기능을 사용하기 전의 코드를 먼저 보겠습니다.

const UseCallbackExample = () => {
  const [string, setString] = useState('');

jjangga0214

yarn

yarn 은 javascirpt 의 package manager 이다. npm 의 drop-in substitute 로 사용할 수 있는 점이 초기 도입에도 큰 장점이다.
패키지 설치 속도가 더 빠르고, 패키지 설치과정에서 패키지가 code를 running 하지 않도록 하여 더 보안상 안전하다.
또한, 같은 package.json 에 의존하는 두개의 서로 다른 환경이 서로 다른 버전의 패키지 의존성을 가지는 것을 방지하기 위해, 버전의 range 가 아닌, 정확한 버전을 명시한 yarn.lock 파일을 사용한다.

주요

# npm install
yarn install 또는 yarn

ihoneymon

[공통] 마크다운 markdown 작성법

영어지만, 조금 더 상세하게 마크다운 사용법을 안내하고 있는
"Markdown Guide (https://www.markdownguide.org/)" 를 보시는 것을 추천합니다. ^^

아, 그리고 마크다운만으로 표현이 부족하다고 느끼신다면, HTML 태그를 활용하시는 것도 좋습니다.

1. 마크다운에 관하여