교내 개발 동아리 신입생 교육 자료 신입생 기존 수준 html, js, css, jquery, php, mysql 환경에서 2년 정도 개발을 하였음 워드프레스를 활용한 사이트 제작 경험이 다수 있음 교육 목표 Typescript, React, Next.js, Fastify, Electron, Flutter 기반으로 풀스택 개발을 할 수 있는 것을 목표로 함. 단계별 목표 JS 딥다이브와 함께 병행 교육하고 있음 1단계 목표 - Next.js 기반에서 퍼블리싱을 할 수 있는 것을 목표로 함 2단계 목표 - Next.js 기반에서 API 서버에서 데이터를 불러와 보여주는 것을 목표로 함 3단계 목표 - Next.js 기반에서 API 서버와 CRUD 동작과 파일 업로드 동작까지 작동하는 것을 목표로 함 4단계..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Absolute Imports and Module Path Aliases 절대경로 import // tsconfig.json { "compilerOptions": { "baseUrl": "." } } import Button from 'components/button'; export default function HomePage() { return ( Hello World ); } 별칭 import // tsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/components/*": ["components/*"] } } } import Button from &..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Environment Variables env 로드 // .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword요렇게 선언하고 process.env.DB_HOST요렇게 쓰셈 다른 변수 참조 // .env HOSTNAME=localhost PORT=8080 HOST=http://$HOSTNAME:$PORT브라우저에 환경 변수 노출 앞에 NEXT_PUBLIC_ 을 붙여서 선언할 것. 그렇지 않으면 읽지 못할 것 NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk 기본 환경 변수 .env, .env.local .env.development 및 .env.production은 ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 ESLint // package.json에 추가 "scripts": { "lint": "next lint" } 실행 npm run lint3가지 옵션 Strict: 더 엄격하게{ "extends": "next/core-web-vitals" } Base : 기본구성{ "extends": "next" } Cancel: 구성하지 않기 ESLint 구성 기본설정 그대로 쓰셈 ESLint 플러그인 기본설정 그대로 쓰셈 맞춤설정 모노레포와 같은 경우는 아래처럼 위치 찾을 수 있게 // .eslintrc { "extends": "next", "settings": { "next": { "rootDir": "packages/my-app/" } } } 맞춤..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 TypeScript 새 프로젝트 기본이 타입스크립트와 함께 제공됨 기존 프로젝트 js, jsx를 ts, tsx로 변경하고 next dev 랑 next build 실행하면 자동으로 tsconfig.json 생김 타입스크립트 플러그인 자동으로 활성화. 안뜨면 다음과 같이 명령 팔레트 열기( Ctrl/⌘+ Shift+ P) "TypeScript: TypeScript 버전 선택" 검색 "Workspace 버전 사용" 선택 플러그인 기능 세그먼트 구성 옵션 에 잘못된 값이 전달되면 경고가 표시됩니다. 사용 가능한 옵션 및 상황에 맞는 문서를 표시합니다. use client지시문이 올바르게 사용되었는지 확인합니다 . 클라이언트 후크(예: useSta..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Instrumentation 검색해서 나온 내용 로그, 사용데이터 수집분석, 성능 모니터링, 오류추적 등을 함 Sentry, Google Analytics등을 많이 사용함. 문서 설명 실험적 기능 /instrumentation.ts 파일에서 register라는 이름의 함수를 내보내면 새 Next.js 서버 인스턴스가 부트스트랩될 때마다 해당 함수가 호출됩니다. register 함수가 배포되면 각 콜드 부팅 시 호출됩니다(단, 각 환경에서 정확히 한 번만). 때로는 부작용이 발생할 수 있으므로 코드에서 파일을 임포트하는 것이 유용할 수 있습니다. 예를 들어 전역 변수 집합을 정의하는 파일을 가져오되 코드에서 가져온 파일을 명시적으로 사용하지..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 OpenTelemetry 분산 시스템 모니터링 도구 OpenTelemetry는 분산 애플리케이션의 모니터링을 위한 오픈 소스 프로젝트입니다. OpenTelemetry는 클라우드 환경에서 실행되는 여러 서비스와 컴포넌트를 추적하고 측정하기 위한 표준화된 방법을 제공합니다. 이는 개발자들이 애플리케이션의 성능, 트랜잭션 추적, 로깅 등을 추적하고 이해하는 데 도움을 줍니다. OpenTelemetry는 분산 시스템의 복잡성을 관리하기 위해 다양한 언어 및 런타임을 지원하는 범용적인 API와 SDK를 제공합니다. 이를 통해 개발자들은 애플리케이션에서 발생하는 이벤트 및 상황을 추적하고 관찰할 수 있습니다. OpenTelemetry는 애플리케이션의..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Analytics 대충 vercel 속도분석기 쓰라는 내용. https://vercel.com/analytics

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Lazy Loading 초기 로딩 개선 목적. 필요할때 로딩하게 구현 next/dynamic 클라이언트 컴포넌트 가져오기 'use client'; import { useState } from 'react'; import dynamic from 'next/dynamic'; // Client Components: const ComponentA = dynamic(() => import('../components/A')); const ComponentB = dynamic(() => import('../components/B')); const ComponentC = dynamic(() => import('../components/C'), { ssr..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Static Assets public 디렉토리에 정적 파일을 넣고 제공할 수 있음 import Image from 'next/image'; function Avatar() { return ; } export default Avatar; 위 예제에서 me.png는 /public/me.png 에 위치 정적자산은 s3나 cdn등을 사용하여 별도 분리해주는 것이 좋음. 업로드 파일도 마찬가지