'nextjs' 태그의 글 목록

# 관계형 db 항목이 정해져 있음 데이터를 엑셀처럼 표에 저장 데이터 입출력시 SQL이라는 언어를 사용하고 미리 스키마 정의(표만들기)도 해야하고 데이터 중복저장을 피하기 위해 정규화해야함 안정적인 데이터저장과 운영이 필요한 곳에서 사용 # 비관계형 db 오브젝트 형태로 저장함(array처럼) 분산처리를 잘해줌(대용량 트래픽 분산처리 : SNS 서비스처럼 많은 데이터 입출력이 필요할때 강점) 몽고디비에서 무료 호스팅 사용하기 SQL 언어, 스키마 정의(표 만들기), 정규화 이런게 대부분 필요없음 MongoDB (비관계형 db) 데이터를 자바스크립트 object자료형과 똑같은 모양으로 저장 # 몽고디비 free 500mb 정도 용량의 무료 호스팅 , free로 선택후 aws로 선택, 국가는 서울로 선택한..

React

next13 (feat. 애플코딩)

2023.09.15

# nextjs 13버전 - 폴더기반 자동라우팅 - 새로디자인한 서버API 기능 - 쉬운 DB연결 - 직관적인 rendering 전략 선택기능 - hydration없는 server-side rendering - 파워풀한 캐싱 - 이미지와 폰트 최적화 # 개발 환경 셋팅 - nodejs 설치(lts버전 - node 18버전이상) - vscode 에디터 설치 - nextjs 설치 (npx create-next-app@latest) # 폴더 설명 - app 폴더 : 코드짤 폴더 - page.js : 메인페이지 (typescript를 쓰고 싶다면 tsx로 확장자를 바꾸면 된다.) - layout.js : 메인페이지 감싸는 용도의 페이지 - public 폴더 : 이미지나 static 파일 보관용 - api 폴더 ..

React

react를 공부하고 있는 중급자(?)를 위한 tip

2023.08.24

# snippets 1. 컴포넌트 단축키 = rcc 2. 함수형 컴포넌트 - rfc : 컴포넌트 작성과 동시에 export - rfce : export 코드 분리 - rsf : props를 가진 컴포넌트 생성 3. 화살표 함수형 - rsc : 빈 div를 가진 화살표 함수 컴포넌트 생성 - rafc : 화살표 함수 컴포넌트를 생성과 함께 export하고, 컴포넌트가 있는 js파일명이 div안에 작성됨 - rafce : export코드가 분리된 화살표 함수 컴포넌트를 생성하고, 컴포넌트가 있는 js파일명이 div안에 작성됨 🙄초보때는 자동완성보다는 익히기 위해서 일일히 따라치는 것을 선호합니다. (모든 언어 공통) # 코드 깔끔하게 짜기 -함수형 컴포넌트 사용하기 (arrow-function 같은) -인라..

React

Vercel로 배포하기

2023.01.12

기존 gh-pages로 배포하다가 react는 참 쉽게 되던대 nextjs가 잘 되지 않아서 이리 저리 검색하다가 nextjs를 만든 Vercel로 배포 해 보기로 함 # Vercel 은 Next.js에서 공식적으로 제공하는 호스팅 사이트 - 오픈 소스 react SSR 프레임워크. 1) package.json "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "vercel-deploy": "next build && next export" } vercel-deploy 를 추가 - 여기서 나는 npm run vercel-deploy 를 해야하는지 알았는대 그럴필요 없음 그냥 추가만..

React

Next.js styled-component

2023.01.10

Next.js에서 styled-component 사용시 초기로딩시 스타일링 되지 않은 html 문서가 보임 이를 해결하기 1._document.tsx 커스텀 https://nextjs.org/docs/advanced-features/custom-document import Document, {DocumentContext} from 'next/document' import {ServerStyleSheet} from 'styled-components' class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet() const originalRende..

React

Next.js

2023.01.10

리액트의 ssr을 쉽게 구현 할 수 있게 도와주는 간단한 프레임워크 (리액트는 라이브러리) next.js의 pre-rendering을 통해서 페이지를 미리 랜더링 하며 완성된 html을 가져오기 때문에 사용자와 검색엔진 크롤러에게 랜더링된 페이지를 전달할 수 있다. #SSR(server side rendering) -클라이언트 대신 서버에서 페이지를 준비하는 원리 -리액트에서는 클라이언트 사이드 렌더링(CSR) 하기 때문에 서버에 영향을 미치치않고, 서버에서 클라이언트로 응답해서 보낸 html 도 거의 비어있음 -next.js 에서는 서버사이드 랜더링을 이용하므로 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있어 검색엔진 최적화에 좋은 영향을 줌 *CSR방식의 문제점 -서버에서 데이..

nextjs

next13 (feat. 애플코딩,MongoDB)

next13 (feat. 애플코딩)

react를 공부하고 있는 중급자(?)를 위한 tip

Vercel로 배포하기

Next.js styled-component

Next.js

티스토리툴바