Frameworks/Next.js

api 란? [프로그래밍] API란? API란? 서로 다른 프로그램끼리 연결해주는 도구 Application Programming Interface 앱 프로그래밍시 활용할 수 있는 데이터 모음 API 예시 REST API : 서버와 클라이언트를 연결 GraphQL API : 서버와 클라이언.. defineall.tistory.com Next.js 에서 api 만들기 1. api에 활용할 샘플 데이터 만들기 // utils/smaple-data.js export const sampleUserData = [ { id: 101, name: '엘리스' }, { id: 102, name: '밥' }, { id: 103, name: '캐롤라인' }, { id: 104, name: '데이브' }, ]; // 유저 데..

npx create-next-app@latest --ts // yarn create next-app --typescript

Next.js로 CSS 스타일링 하기 1. styled-jsx 사용하기 ( Next.js 기본 내장 ) // style jsx는 컴포넌트 단위로 적용됩니다. ( 다른 컴포넌트로 넘어가면 적용안됨 ) // 기본 사용 방식 // 자식 컴포넌트까지 모두 적용하기 {` ...스타일 추가 `} 2. styled-components 사용하기 [React] styled-components란? / 사용법 (js/ts) styled-components란? React.js 안에서 스타일(CSS)을 바꿀 수 있게 해주는 Node.js 패키지 React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹/앱의 사용자 조작환경(UI)를 만들.. defineal..

Next.js에서 외부(Third-party) javascript 불러오기 1. 메타데이터에 추가하기 이 접근 방식은 효과가 있지만 이러한 방식으로 스크립트를 포함하면 동일한 페이지에서 가져온 다른 JavaScript 코드를 불러오는 시기가 불명확합니다. 특정 스크립트가 렌더링을 차단중이고 페이지 콘텐츠 로드를 지연시킬 수 있는 경우, 성능이 저하될 수 있습니다. 2. 태그 사용하기 // Script 태그 사용하기 위해 불러오기 import Script from "next/script" export default function FirstPost() { return ( console.log(`script loaded correctly, window.FB has been populated`) } /> Fi..

메타데이터 수정하기 기존의 html에서는 First Post ); }

[Next.js] Next.js란? ( feat. ) Next.js란? React에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크 React.js로 완전한 웹 애플리케이션을 처음부터 빌드하려면 필요한 것 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Ba defineall.tistory.com ⇧ Next.js 간단하게 알아보기 ⇧ Next에서 정적 파일 불러오기 Next.js는 'public' 디렉토리에서 여러가지 정적 파일을 보관하고, 태그를 사용하여 꺼내올 수 있습니다! import Image from "next/image"; export default function FirstPost() { return ( First Post ); } 정적 파일 사용시 주의점 1. public 폴더..

Next.js란? React에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크 작동방식 Next.sj는, 기본적으로 서버측에서 React코드를 실행한다. React.js를 서버측에서 pre-rendering하여 html을 생성하고, 브라우저에게 보내준다. 그 후, 브라우저에서 React를 사용해 웹페이지를 완성한다. 장점 javascript로 모든 페이지를 구성하는 React와는 다르게, 서버사이드 렌더링을 하게되면 검색엔진들이 html을 직접검색할 수 있으므로, 검색어 노출에 좋다. (SEO) React.js로 웹 애플리케이션 만들기 위한 조건 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 컴파일러를 사용하여 변환되어야 한다. 코드 분할과 같은 프로덕션 최적화를 수행해야 ..