# nextjs
Next.js에서 Embla Carousel 라이브러리를 사용하여 Carousel Slider 만들기
Embla Carousel 라이브러리를 사용하여 다음과 같은 슬라이더를 만드는법을 공유해보려고한다.
라이브러리와 프레임워크의 차이
이 글은 노마드 코더님의 강의를 바탕으로 기록과 공유를 위한 의미를 가지고 있습니다.라이브러리는 우리가 '호출'하는 개념이다.가지고 와서 우리에 코드에 사용하는 느낌프레임워크는 우리가 프레임워크 안에 들어가서 사용하는 개념.예를들어 제일 유명한 라이브러리인 jQuery
[NextJS] window is not defined
1. Introduction 아마 NextJs 를 처음 접하고 프로젝트를 만들다보면 'window is not defined' 문구와 함께 window 객체를 쓰지 못하는 경우를 마주치게 될 것입니다. 기존에 Vue 나 React 만 사용하셨던 분들은 "window
[Next.js] Next js 시작하기
※ 실행 후 파일을 열었을 때 해당 에러가 발생한다면Parsing error: Cannot find module 'next/babel'1) 프로젝트 루트경로에 .babelrc 파일을 만들어준 뒤 해당 내용을 입력한다.2) 프로젝트 루트경로에 있는 .eslintrc.js
🎁 Gift MBTI - 2. Result 페이지 시작(Emotion theme 적용, SEO 최적화 )
이번 프로젝트에선 emotion으로 스타일링을 하기로 했는데 특별한 이유가 있던 것은 아니고 그냥 다들 많이 쓰길래 사용해봤다.한 번도 사용해본적 없는 라이브러리라 걱정했는데 웬걸 그냥 문법이 styled-components랑 똑같았다!찾아보니 둘 다 CSS-in-JS
Next.js 시작하기 - 소개 및 환경설정
Next.js 소개 https://nextjs.org/에 가보면 대표문구로 "The React Framework for Production"라고 쓰여 있다. react는 어떨까? https://reactjs.org/ 여기에는 "A JavaScript library f
Next 초기 설정
Next.js: The React Framework Next.js는 리엑트 어플리케이션에서 SSR을 쉽게 구현해주는 프레임워크이다. 기능 직관적인 페이지 기반의 라우팅 시스템(다이나믹 라우팅도 지원) , 과 둘 다 페이지 기반 단위에서 지원해준다. 자동 으로 빠른
💻 비드마켓 리팩토링 next/link 적용기
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 비드마켓 프로젝트의 모든 페이지에서 아래 사진처럼 next/Router의 useRouter 훅을 사용해서 router 객체에 접근하여 사용하였다.
Next.JS config 다뤄보기
NextJS에서 커스텀 설정을 하기 위해선 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있다.이는 JSON 파일이 아닌 Node.js 모듈이다.NextJS 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함
💻 비드마켓 리팩토링 - 페이지 로딩 적용
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 상품 카드를 눌렀을 때 getServerSideProps로 서버에서 데이터를 먼저 가져오기 전까지 로딩 처리가 없어서 화면이 멈춰있는 것 처럼 보이는 문제가 발생하였다.이런
next.js, typescript, eslint, airbnb, prettier 로 프로젝트 설정하기
typescript를 사용하는 next.js 프로젝트 설치eslint 설정을 위한 eslintrc 파일 자동으로 만들기typescript 파서 설정nextjs 규칙 추가기타 next와 충돌하는 룰 삭제airbnb 규칙 설치airbnb 규칙 추가prettier 설치esl