생활코딩

Coding Everybody

Next.js 13

커버 생활코딩 > WEB > WEB2 - JavaScript > React > Next.js 13

수업 개요

Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다임을 이끄는 Next.js의 세계로 빠져들어봅시다!

권장 참가자

이 수업은 프론트엔드 개발에 기본적인 경험이 있는 개발자들을 대상으로 합니다. JavaScript 및 React에 대한 기본적인 이해가 필요하며, 웹 애플리케이션 구조와 웹 개발의 기본 원리에 대한 이해가 도움이 될 것입니다.

수업에서 다루는 내용

  • Next.js의 설치, 실행, 배포, 그리고 Vercel 플랫폼을 이용한 배포 방법
  • CRUD(Create, Read, Update, Delete) 웹 앱의 구축
  • Next.js의 라우팅 시스템에 대한 이해
  • SPA(Single Page Application) 
  • SSR(Server Side Rendering) 개념
  • Next.js를 API 서버로 사용하는 방법
  • Server Component와 Client Component의 차이와 사용법
  • Next.js에서의 환경 변수 사용 방법

수업에서 다루지 않는 내용

  • 사용자 인증
  • 데이터베이스 및 연동

실시간 강의 녹화본

23년 8월 28일 진행된 실시간 강의 녹화본입니다. 본 수업과 같은 내용을 다루고 있습니다. 

밤공부 nextjs 녹화본

 

댓글

댓글 본문
  1. 순코딩
    완강하고 왔습니다.
    이렇게 또 구원 받습니다.
    학습할 때마다 한 강의를 만들기 위해 얼마나 다듬었을까에 대해 생각하며 감탄합니다.

    항상 좋은 강의 무료로 배포해주셔서 정말 감사합니다.
    잘 배우고 갑니다 선생님.
  2. mediumryan
    잘 보겠습니다 _3_
  3. happydeveloper
    너무 기대되는 인트로이네요. ㅎㅎ
  4. Hoon Ko
    20231018
  5. Hoon Ko
    20230905
  6. 23.08.15 좋은 강의 늘 감사합니다 !
  7. Sansol Park
    ChatGPT 4의 답변입니다.

    문제는 npm이 파일을 찾을 수 없기 때문에 발생한 것 같습니다. 이를 해결하기 위해 아래 단계를 따라 해결해 보세요.

    1. 먼저 컴퓨터에 Node.js가 올바르게 설치되어 있는지 확인하세요. 설치되어 있지 않다면, [Node.js 공식 웹사이트](https://nodejs.org/)에서 다운로드하여 설치하세요.

    2. Node.js와 npm이 제대로 설치된 후, 명령 프롬프트에서 다음과 같이 입력하여 버전을 확인하세요.


    node -v
    npm -v


    3. `C:\Users\mingu\AppData\Roaming\npm` 디렉토리가 존재하는지 확인하세요. 없다면 새로 생성하세요.

    4. 시스템 환경 변수 설정에서 PATH 변수에 `C:\Users\mingu\AppData\Roaming\npm` 경로가 포함되어 있는지 확인하세요. 없다면 추가하세요.

    이 단계를 수행한 후에도 문제가 계속된다면, 다음 단계를 수행하세요.

    5. 명령 프롬프트를 관리자 권한으로 실행하여 다음 명령어를 실행하세요.


    npm cache clean --force


    6. 다시 비주얼 스튜디오에서 Node.js 프로젝트를 실행해 보세요.

    위 단계를 모두 수행한 후에도 문제가 해결되지 않는다면, Node.js를 다시 설치하거나 커뮤니티 지원 포럼에 문의하세요.
  8. Sansol Park
    ChatGPT 3.5 의 답변입니다.

    이 문제는 npm(노드 패키지 매니저)이 노드 모듈을 설치하거나 관리할 때 발생하는 문제로 보입니다. 주어진 오류 메시지를 보면 npm이 C:\Users\mingu\AppData\Roaming\npm 경로에서 파일을 찾지 못하고 있는 것으로 나와있습니다. 이 문제를 해결하기 위해 몇 가지 단계를 시도해 볼 수 있습니다.

    npm 캐시 삭제: 가장 간단한 해결 방법 중 하나는 npm 캐시를 삭제하는 것입니다. 명령 프롬프트나 터미널에서 다음 명령을 실행해 보세요.

    Copy code
    npm cache clean -f

    그리고나서 다시 노드js 프로젝트의 디렉토리에서 필요한 패키지를 설치해보세요.

    npm과 Node.js 최신 버전 설치: 가끔씩 오래된 버전의 npm과 Node.js를 사용할 때 문제가 발생할 수 있습니다. 최신 버전으로 업그레이드해 보세요.

    환경 변수 설정: 환경 변수가 올바르게 설정되어 있는지 확인해야 합니다. 특히 NODE_PATH나 npm_config_prefix 같은 환경 변수가 올바른 경로를 가리키는지 확인하세요.

    npm 폴더 재설치: npm 관련 문제를 해결하기 위해 npm을 재설치해보세요. 다음 명령을 사용하여 npm을 삭제하고 다시 설치할 수 있습니다.

    Copy code
    npm uninstall -g npm
    npm install -g npm

    이러한 단계를 시도한 후에도 문제가 해결되지 않는다면, 문제의 근본 원인을 찾기 위해 추가적인 정보가 필요할 수 있습니다. 에러 로그 파일인 2023-08-08T13_12_22_076Z-debug-0.log를 확인하여 더 자세한 정보를 얻을 수 있을 것입니다. 이 정보를 기반으로 더 구체적인 해결책을 찾을 수 있을 것입니다.
    대화보기
    • 카르민코프1
      수업을 듣고싶은데 아무리해봐도 nodejs가 비주얼 스튜디오에서 안켜지네요 ㅠㅠ
      npm ERR! code ENOENT
      npm ERR! syscall lstat
      npm ERR! path C:\Users\mingu\AppData\Roaming\npm
      npm ERR! errno -4058
      npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\mingu\AppData\Roaming\npm'
      npm ERR! enoent This is related to npm not being able to find a file.
      npm ERR! enoent

      npm ERR! A complete log of this run can be found in: C:\Users\mingu\AppData\Local\npm-cache\_logs\2023-08-08T13_12_22_076Z-debug-0.log
      자꾸 이렇게 뜨는데 뭐가 문제일까요? 스택블리츠에서 하기에는 헷갈려서 못하겠어요
    • 보람
      2023.08.02 기대됩니당 항상 좋은 강의 감사드려요!!