jeong_ga

CSR, SSR차이 - next.js 설치 및 공사콕 웹앱 폴더 설정 1, next.js 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로 리액트에선 없는 기능을 제공 서버 사이드 렌더링 server-side rendering(SSR) 정적 사이트 생성 static site generation(SSG) 증분 정적 재생성 incremental static regeneration(ISR) SSR 로딩시간 단축 : 서버사이드 렌더링은 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 됨 SEO : 검색엔진이 자바스크립트를 읽는 게 아닌 서버측에서 자바스크립트, html, css를 만들어 컨텐츠에 직접 업로드 & meta 태그를 자유롭게 추가함으로 SEO를 용이..

next.js 배포 1, aws 설정 aws 설정은 기존 react와 다르지 않다. 아래 페이지 참고 https://jeong-ga.tistory.com/105 2, next.js 13버전 이전엔 npm build 시 export관련 명령어를 입력했으나, 현재 버전에선 next.config 파일에서 관련 설정을 진행한다. // package.json "scripts": { "build": "next build", }, 1, next.config.mjs /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // 이 코드가 있어야 함 images: { unoptimized: true }, }; export default..

react 개발환경 구축 create-react-app을 사용하여 react 개발환경 구축 react는 개발 프레임워크가 아닌 라이브러리이기 때문에 필요한 기술이나 기능을 설치하여 사용해야 한다. (webpack, babel 등) 하지만 create-react-app을 사용하여 환경을 구축하면 따로 설치할 필요없이 필요한 기능들을 바로 사용할 수 있다. node.js 설치 create-react-app을 사용하기에 앞서 node.js(node, npm, npx)가 설치되어 있어야 한다. node.js 설치하기 LTS는 안정적인 지원을, Current는 신기술 지원을 약속함. node.js를 설치하면 npm(node pakage manager)가 자동으로 설치되므로 따로 설치할 필요가 없다. npx는 no..

next.js 1, next.js 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로 리액트에선 없는 기능을 제공 서버 사이드 렌더링 server-side rendering(SSR) 정적 사이트 생성 static site generation(SSG) 증분 정적 재생성 incremental static regeneration(ISR) SSR 로딩시간 단축 : 서버사이드 렌더링은 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 됨 SEO : 검색엔진이 자바스크립트를 읽는 게 아닌 서버측에서 자바스크립트, html, css를 만들어 컨텐츠에 직접 업로드 & meta 태그를 자유롭게 추가함으로 SEO를 용이하게 할 수 있음 1, SSR와 CSR의 차이 📖 SSR..

S3, cludeFront CI/CD 정리 & 웹 배포 1, aws 세팅 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 💡 `S3 (Simple Storage Service)` 일반적인 파일서버는 트래픽이 증가함에 따라서 장비를 증설하는 작업을 해야 하는데 S3는 이와 같은 것을 대행 정보의 중요도에 따라서 보호 수준을 차등 할 수 있고 이에 따라서 비용을 절감 할 수 있다. (RSS) 데이터를 여러 시설에서 중복으로 저장 & 자동으로 복원 & 버전관리 기능 1, s3. 버킷생성 버킷만들기 버킷이름, 리전 지정 버킷의 퍼블릭 엑세스 차단 설정 해지 외 다른 수정없이 버킷 생성을 진행한다. { "Version": "2012-10-17", ..

prisma 파일 수정 prisma/schema.prisma // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "mysql" url = "mysql://root:13243546@localhost:3306/local_mysql" } model User { id Int @id @default(autoincrement()) email String @unique name String? password String posts Post[] ma..

카카오 카카오 디벨로퍼 링크 Kakao Developers 카카오 방법 카카오 디벨로퍼 어플리케이션 등록 사이트 도메인 등록 Redirect URI 등록 (/api/auth/callback/kakao) 동의항목 정리 import KakaoProvider from "next-auth/providers/kakao"; ... providers: [ KakaoProvider({ clientId: process.env.KAKAO_CLIENT_ID, clientSecret: process.env.KAKAO_CLIENT_SECRET }) ] ... // .env.local KAKAO_CLIENT_ID={KAKAO-JAVASCRIPT-KEY} KAKAO_CLIENT_SECRET=임의로 작성한 비밀번호 [...nexta..

nextAuth에서 제공해주는 pages라는 개념(커스텀 로그인 페이지를 만들 수 있는 API 제공)이 있다. nextauth파일에 pages설정 // app/api/auth/[...nextauth]/route.ts import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; const handler = NextAuth({ providers: [ CredentialsProvider({ name: "Credentials", credentials: { username: { label: "이메일", type: "text", placeholder: "이메일 주소 입력 요망", }, passwo..

get 기본 함수 // app/api/user/[id]/route.ts // [id] : Next.js 버전 13에서의 다이내믹 API Route -> 'id'라는 다이내믹한 변수 export async function GET( request: Request, { params }: { params: { id: string } } ) { console.log(params); const id = Number(params.id); return new Response(JSON.stringify({ posts: id })); } prisma를 이용하여 get 기본 함수 생성 //app/api/user/[id]/route.ts import prisma from "@/app/lib/prisma"; import { v..

1. next 설치 & nextauth 정리 next.js 설치 & nextAuth를 이용하여 로그인 기능 추가 (~/api/auth/callback/credentials 로 이동될 때 & 개발서 next 템플릿 준비 npx create-next-app@latest next-auth-test npm run dev // 개발환경으로 확인 가능 App Router next.js router (layout.js / Link, useRouter 차이/ 폴더관리 / 동적경로 / 로딩 / 병렬라우팅 / 모달 / 경로가 route jeong-ga.tistory.com 2. prisma세티 & mysql연결 mysql & prisma 개발환경 구축 mysql & prisma 개발환경 구축 Prisma는 데이터베이스 O..

next 템플릿 준비 npx create-next-app@latest next-auth-test npm run dev // 개발환경으로 확인 가능 App Router next.js router (layout.js / Link, useRouter 차이/ 폴더관리 / 동적경로 / 로딩 / 병렬라우팅 / 모달 / 경로가 router 기본 설정 방법 app폴더 내에 새로운 폴더를 생성하여 url을 설정한다. 폴더의 이름은 url 경로가 된다. 폴더 내에 page.js, page.tsx 라는 이름으로 파일을 생성하면 route가 지정된다. url 을 아무것 jeong-ga.tistory.com nextAuth.js 설치 npm i next-auth NextAuth의 가장 기본이 되는 파일을 작성 // app/ap..

router 기본 설정 방법 app폴더 내에 새로운 폴더를 생성하여 url을 설정한다. 폴더의 이름은 url 경로가 된다. 폴더 내에 page.js, page.tsx 라는 이름으로 파일을 생성하면 route가 지정된다. url 을 아무것도 입력하지 않은 상태 localhost3000:/ : app 바로 오래 있는 page.tsx localhost3000/dashboard 파일 위치 app/dashboard/page.tsx 표시 layout 같은 폴더 내에 있는 layout 혹은 상위 폴더의 layout은 다른 page.tsx에서 함께 사용할 수 있다. 공용으로 사용해야 하는 컴포넌트 혹은 meta tag 같은 경우 상위 layout 코드에 작성한다. 최상위 routeLayout에는 html, body 태..

MySQL 설치 MySQL 설치 brew install mysql mysql -V // 버전 확인 초기설정 mysql.server start // 서버 구동, 초기설정 // 1, 비밀번호 설정 // 2, 유저설정 - 기본적으로 익명 유저를 만듦, 익명유저를 사용하지 않을 시 -> Yes // 3, localhost 에서만 root 로 접속할 수 있는지, // 아니면 외부에서도 root 로 접속 할 수 있게 할지 선택이 가능하다. // 원격에서 root 계정으로 접속이 불가능하게 하려면 YES 를 입력한다. // 4, 테스트 데이터베이스 삭제 -> Yes // 📍 초키설정 완료 재설정 위 작성한 초기설정을 다시 진행할 수 있음 mysql_secure_installation 접속 mysql -u root -..

mysql & prisma 개발환경 구축 Prisma는 데이터베이스 ORM Prisma로 DB 관련 코드를 작성하면 여러 DB에 거의 똑같은 코드로 연결 가능 prisma 세팅 설치 npm install prisma --save-dev npx prisma init npx prisma init를 진행하면 prisma/schema.prisma 파일 생성됨 prisma/schema.prisma : 이 파일은 가장 기본이 되는 DB의 뼈대를 만드는 파일 Prisma에서 사용하는 Model(모델)이 qlite, PostgreSql, MySql 등에서는 테이블로 전환 db provider를 mysql로 변경 datasource db { provider = "mysql" url = env("DATABASE_URL")..

useState로 작성하다 중간에 react-hook-form을 추가했던 거라 input type text, number 등은 react-hook-form으로 작성했지만 radio와 checkbox는 useState로 작성되어 있었다. API가 추가될 동안 해당 기능을 리팩토링하고자 하는 중, 과하게 복잡하게 작성했던 onChange이벤트를 발견했다. [Feat] input type checkbox 추가하여 복수선택 가능하도록 설정 & 복수 선택하여 submit 이벤트 진행 필요한 기능 목록에서 복수선택하여 해당 회원 정보를 변경할 수 있도록 설정 복수선택해야 하는 항목이 여러개일 경우 하나의 항목만 선택하도록 조건 추가 회원정보 상세보기 화면에서 input t jeong-ga.tistory.com 입력..