I'm a Fig, Not a Pig

npm run dev, npm run start를 작성했더니 'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 와 같은 오류 메세지가 떴다.  npm install 또는 npm i를 작성한 뒤 실행하면 잘 동작한다. npm install을 해야하는 이유는 다음과 같다. 1. 의존성 설치프로젝트를 처음 clone 받았을 때, node_modules 폴더는 존재하지 않는다. 이 폴더는 프로젝트가 의존하는 모든 npm 패키지를 포함하며, package.json 파일에 정의된 의존성 목록에 따라 생성된다. npm install 명령어를 실행하면 package.json 파일에 정의된 모든 의존성을 다운로드하고 설치하여 node_modules 폴더를 생성한다.2. pa..

1. 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.리액트의 한계기본적으로 순수 리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 한다. 웹 사이트를 요청할 때 현재 사용하지 않지만 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩한다. 이로 인해 앱의 첫 로딩 시간이 오래 걸려 유저 경험을 헤치고, SEO(Search Engine Optimization)에 취약 하다는 단점이 있다.  Next.js가 제공하는 이점1. 프리렌더링 기본적으로 프리렌더링을 지원한다. 데이터의 성격에 따라 getStaticProps를 활용해 빌드 단계에서 데이터를 받아 정적 생성 또는 SSR(..

1. Next.js란?Next.js는 React 기반의 프레임워크로, 리액트에는 없는 서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 기능을 제공한다. 그렇다면 Next.js가 등장하게 된 배경은 무엇일까?   Next.js 등장 배경1. Static Site에서 SPA로과거의 대부분의 웹사이트들은 SSR과 MPA (Multi Page Application) 방식으로 동작했다. 하지만 페이지 전환시 깜박거리는 이슈로인해 사용자 경험이 좋지 못했고 동시에 스마트폰의 시대가 도래하면서 웹사이트를 사용할 때도 모바일 앱처럼 부드럽고 빠..

스터디 공부한거 정리하려고 커밋했는데 There was an error committing your changes: File could not be edited.이 뜨면서 커밋이 안된다. 몇 시간 전부터 안됐는데 아직도 그러네잉.. ㄱ-

in 문법: 객체에 특정 속성이 존재하는지 확인할 때 사용된다.typeof 문법: 변수의 타입을 확인할 때 사용된다 예제를 통해 알아보자.   1. in 문법interface Person { name: string; age?: number;}const person: Person = { name: "Alice", age: 30,};console.log("age" in person); // trueconsole.log("address" in person); // false    2. typeof 문법let x = "hello";let y = 42;let z = true;console.log(typeof x); // "string"console.log(typeof y); // "number"consol..