제가 강의를 보면서 블로그를 만들고 잇는데 회원가입시에는 이미지를 않넣고 회원수정할때 이미지를 추가하는 형식으로 작업을 하려고 하는데 이때 models에서 const User = sequelize.define("User", { email:{ type: DataTypes.STRING(30), // 필수값 allowNull:false, // 중복되면 안되는 값 unique:true, }, name: { type: DataTypes.STRING(20), allowNull: false, }, nickName: { type: DataTypes.STRING(20), allowNull: false, unique: true, }, password: { type: DataTypes.STRING(60), allowNull: false, }, profileImage: { type: DataTypes.STRING(200), allowNull: true, }, profileImage를 저렇게 추가하는게 맞는건지 아니면 associate에서 관계짜서 테이블을 짜는건지 궁금합니다. 

안녕하세요 선생님!라우터를 통해 얻은 정보를 숫자 타입으로 바꾸어 쿼리를 전달하는 과정에서, 코드젠을 통한 타입을 강의와 같이 작성했는데, 아래와 같이 오류가 뜹니다. number 형식도 맞고 철자 오류도 없는데, 뭐가 문제인지 잘 모르겠습니다. 

안녕하세요! 제로초님!! [리뉴얼] React로 NodeBird SNS 만들기섹션 6. AWS에 배포하기: 도메인 연결하기 강의까지 수강한 수강생 입니다!가비아 도메인 연결 후 프론트 주소 페이지가 응답이 되지 않아 질문 글을 올립니다!※ 질문 글이 굉장히 깁니다! 항상 강의 잘 보고 있습니다!!  ※ 아래 사항을 먼저 확인한 후에 질문을 올렸습니다!1. 저의 경우 도메인을 'nodebird.xyz'로 설정하였습니다.(프론트 : http://nodebird.xyz, 백엔드 : http://api.nodebird.xyz)2. 가비아 네임서버 자리에 Route 53의 nodebird.xyz 네임서버를 순서대로 입력하였습니다!3. 윈도우 서비스의 MySQL 서비스를 실행한 상태입니다.4. 백엔드 주소는 접속이 되어 'hello express'가 화면에 표시됨을 확인하였습니다!5. npm은 6.14.18 버전, node는 v14.21.3 입니다.6. about.js 파일은 잠시 다른 곳으로 옮겨두었습니다.7. 프론트와 백엔드의 인스턴스와 탄력적 IP가 각각 한 쌍으로 연결되어 있으며,바뀐 인스턴스로 우분투 프론트 서버와 백엔드 서버에서 작업하였습니다!(프론트 탄력적 IP : 52.78.52.73 백엔드 탄력적 IP : 43.201.232.110)8. 에러 발생을 막기 위해 sudo npx pm2 kill 명령어로 pm2을 지우고s앞에 sudo를 붙여 git pull, start, reload, list, monit 순으로 작업하였습니다.(메모리 부족으로 빌드만 로컬 프론트에서 진행하였습니다.)9. 프론트, 백엔드 모두 sudo npx pm2 list 명령어를 터미널에 입력했을 때status가 online인 걸 확인하였습니다. 아래는 이전 강의인 프론트 서버 배포하기 강의까지 진행했을 때 프론트 페이지 모습입니다!콘솔 쪽에 아래와 같은 에러도 나고, CSS도 깨지지만 페이지 자체는 접속이 가능했습니다!다음 강의를 진행하며 해결할 수도 있었기에 넘어갔습니다.Failed to load resource: the server responded with a status of 404 (Not Found)(리소스를 로드하지 못했습니다. 서버가 404(찾을 수 없음)의 상태로 응답했습니다,This page failed to load a stylesheet from a URL.이 페이지는 URL에서 스타일시트를 로드하지 못했습니다.that cookie was blocked because it's domain attribute was invalid.해당 쿠키의 도메인 특성이 잘못되었기 때문에 차단되었습니다.)도메인을 연결하기 위해 로컬 프론트, 로컬 백엔드 주소 부분을 nodebird.xyz 도메인으로 수정하였습니다.하지만 도메인 수정 후 아래처럼 프론트 페이지가 응답하지 않습니다!문제를 해결하기 위해 첫 번째로 콘솔 로그부터 확인하였습니다.아래는 리덕스와 네트워크 탭 사진입니다.Failed to load resource: the server responded with a status of 404 (Not Found)(리소스를 로드하지 못했습니다. 서버가 404(찾을 수 없음)의 상태로 응답했습니다,F12를 눌러 개발자 도구를 키면 화면이 매우 빠른 속도로 계속 깜빡이며개발자 도구 화면이 계속 닫혀 정상적인 확인이 어려웠습니다.리덕스 탭은 위의 창을 닫아도 계속 뜹니다. 계속 페이지가 새로 고침 되는 것으로 추정합니다.  문제를 해결하기 위해 우분투 프론트 터미널을 확인하였습니다.TypeError: Cannot read property 'find' of undefined 에러와MyDocument.getInitialProps() undefined 에러 두 개를 확인하였습니다. 더 정확한 에러 확인을 위해 우분투 프론트 터미널에'sudo npx pm2 logs --err --lines 50' 명령어를 입력하였습니다.Error: "MyDocument.getInitialProps()" should resolve to an object.But found "undefined" instead. 오류: "MyDocument.getInitialProps()"가 개체로 확인되어야 합니다.대신 "undefined"가 발견되었습니다.(화면 좌측을 보시면 .next 일부 모듈이 git add가 가능한 상태임을 확인할 수 있습니다..gitignore 파일에 .next를 쓰고, 캐시를 지워도 해결이 되지 않아 일단은 그대로 두었습니다!) MyDocument.getInitialProps 문제를 해결하기 위해커뮤니티와 구글링을 통해 아래 사이트를 참고하였습니다.노드버드 커뮤니티https://www.inflearn.com/questions/154677/error-quot-mydocument-getinitialprops-quot-gt-undefined스택 오버플로우 사이트https://stackoverflow.com/questions/61967960/getinitialprops-should-resolve-to-an-object-but-found-undefined-instead노드버드 커뮤니티에 같은 에러가 발생한 수강생 분 글을 토대로제로초님의 노드버드 깃허브 (Ch6, Ch7, http 등)를 확인하였습니다. 아래는 가장 의심되는 코드입니다!front/config/config.js// 실제 백엔드 주소 내보내기 export const backUrl = 'http://api.nodebird.xyz'; back/config/config.js// 모건(morgan) : 요청과 응답에 대한 정보를 콘솔에 기록하는 모듈 /* ---------- 배포 모드일 환경일 때 설정 ---------- */ if (process.env.NODE_ENV === 'production') { // combined : 로그가 자세해져서 실제 해당 접속자의 IP를 알 수 있다. app.use(morgan('combined')); // hpp : Express의 중복 이름 파라미터 공격을 방어한다. app.use(hpp()); // helmet : HTTP 헤더를 자동 설정을 통해 외부 공격으로부터 보호한다. app.use(helmet()); // 미들웨어 연결 app.use(cors({ /* 배포용에서는 실제 프론트 주소에서 요청했을 때만 CORS 허용하기 */ origin: 'http://nodebird.xyz', /* 사용자 인증이 필요한 쿠키 전달 허용하기 */ credentials: true, })); /* ---------- 개발 모드 환경일 때 설정 ---------- */ } else { // dev : 백엔드 디버깅 app.use(morgan('dev')); // 미들웨어 연결 app.use(cors({ /* 개발용에서는 요청을 보낸 주소의 요청만 CORS 허용하기 */ origin: true, /* 사용자 인증이 필요한 쿠키 전달 허용하기 */ credentials: true, })); }; . . . // 쿠키와 세션 미들웨어 연결 app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, /* ---------- 쿠키 옵션(Cookie Option) ---------- */ cookie: { httpOnly: true, // true로 설정 시 JS로 쿠키에 접근하지 못하도록 막는다. secure: false, // https 적용 시 true로 설정할 예정 /* 쿠키의 도메인이 배포 환경이면 도메인 앞에 '.'을 붙이기 */ // 점을 붙이면 api.nodebird.xyz와 nodebird.xyz 사이에서 쿠키 공유가 된다. domain: process.env.NODE_ENV === 'production' && '.nodebird.xyz' }, })); front/pages/_document.js// 서버사이드 렌더링(SSR) : getInitialProps 사용 export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; /* ---------- React 렌더링 로직을 동기적으로 실행 ---------- */ try { ctx.renderPage = () => originalRenderPage({ /* enhanceApp으로 원래 app기능에 document 기능에다가 stylesheet가 styled-component들을 서버사이드 렌더링할 수 있게 해준다. */ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />) }); // 부모 'getInitialProps'를 실행(이제 사용자 정의 'renderPage'가 포함된다.) const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); /* ---------- try 블록이 종료되면 무조건 실행 ---------- */ } finally { sheet.seal(); } }  제가 입력한 코드에 문제가 있지 않을까 추측하여노드버드 깃허브와 제 코드를 비교하였으나 해결책을 찾지 못하였습니다...어떻게 하면 도메인 연결 후 프론트 페이지를 응답하게 만들 수 있을까요?혹시 관련 키워드가 있다면 알려주실 수 있을까요?질문 글이 많이 김에도 끝까지 읽어주셔서 감사합니다 제로초님!++++혹시 모르니 네임 서버 상태도 같이 올립니다!아래는 저의 Route 53, Gabia 네임서버 현재 상태입니다!

/compose/tweet 이나 /i/flow/login 에서 패러렐 라우트와 인터셉팅 라우트를 사용했을 때는 @modal 안에서 (.)compose 혹은 (.)i 로 작성했는데 이번 PhotoModal 페이지는 @modal 안에서 (.)[username]이 아닌 그냥 [username]으로 폴더 구조를 짜셨더라구요. 이러면 인터셉팅이 이루어지지 않는 것 아닌가요? 추가로 children으로 들어가는 /[username]/status/[id]/photo/[photoId]에 있는 page.tsx에서 강의자료에는 return ( <Home /> ); 이렇게 하고 있는데새로고침을 해도 제대로 나오려면 이렇게 하는 것이 맞는지 궁금합니다.return ( <> <Home /> <PhotoModalPage /> </> );

질문1) 선생님 forestadmin 에서 host를 localhost로치니까 Database must be publicly accessible. 이렇게뜨면서 다음으로 안넘어가는데요, 그럼 백엔드랑, mysql host를 바꾼다음에 foreast에서 바꾼 것과 맞춰줘야 하나요?, 아니면 그냥 localhost1 이렇게 기존 host와 다른이름을 써도 되나요?, 질문2forest에 나온 명령어를 ch7에 입력하셨는데 그러면 저는 react-nodebird안에 prepare가 아닌 다른 폴더를 새로 추가해서 명령어 입력 하면 될까요?

인터셉터 전/modal : /@modal/default.tsxchildren : /page.tsx/i/flow/login (링크 클릭)modal : /@modal/i/flow/login/page.tsxchildren : /i/flow/login/page.tsx/i/flow/login (직접 접속)modal : /@modal/i/flow/login/page.tsxchildren : /i/flow/login/page.tsx   인터셉터 후/modal : /@modal/default.tsxchildren : /page.tsx/i/flow/login (링크 클릭)modal : /@modal/(.)i/flow/login/page.tsxchildren : /page.tsx/i/flow/login (직접 접속)modal : /@modal/default.tsxchildren : /i/flow/login/page.tsx   인터셉터와 패러렐 각각은 이해를 했습니다. 패러렐은 위에 적어놓았고,인터셉터만 적용했다면 /i/flow/login (링크 클릭) 했을 때 {children}에 /(.)i/flow/login/page.tsx가 들어갔을테고,/i/flow/login (직접 접속) 했을 때 /i/flow/login/page.tsx가 들어갔겠죠.  /i/flow/login (링크 클릭) 했을 때 인터셉팅 동시에 패러렐이기 때문에 {modal}에 /@modal/(.)i/flow/login/page.tsx이 들어갑니다.그런데.. {children}에는 왜 /page.tsx가 들어가는지 모르겠습니다. 반대로, "그렇다면 왜 /page.tsx가 들어가면 안 되는데?" 이 질문에도 대답을 못하겠습니다 ㅠㅠ;그리고 /i/flow/login (직접 접속) 했을 때도 {modal}이 왜 /@modal/default.tsx인지 모르겠습니다.  

선생님 안녕하세요foreast에서 프로젝트 세팅할 때 수업영상에 안나온 부분을 체크해야 다음 화면으로 넘어갈 수 있어서요!검색해봤는데 이렇게나와있는데 TLS mode에서 requireTLS선택하고 connect via SSH 활성화 안하는거 맞는지 궁금합니다 Prefer TLS (TLS 선호): 이 옵션은 서버가 TLS를 지원하면 TLS를 사용하고, TLS를 지원하지 않으면 암호화되지 않은 연결로 대체합니다. 보안이 중요한 운영 환경에서는 일반적으로 권장되지 않습니다. 이는 필요한 보안 수준을 제공하지 못할 수 있기 때문입니다.Disable TLS (TLS 비활성화): 이 옵션은 TLS를 사용하지 않고 암호화되지 않은 연결만을 사용합니다. 개발이나 테스트 환경에서는 문제가 되지 않을 수 있으나, 민감한 정보를 다루거나 외부에 노출되는 운영 환경에서는 매우 위험할 수 있습니다.Require TLS (TLS 필수): 이 옵션은 TLS 연결만을 요구하며, TLS를 지원하지 않는 서버와는 연결을 시도하지 않습니다. 보안이 중요한 데이터를 다루거나, 개인 정보 보호 규정을 준수해야 하는 운영 환경에서 권장됩니다.

인터셉팅 라우터가 열린채로 router.push()를 했을때 모달이 열린채로 뒤에만 이동되는데 router.back() 말고 닫을 수 있는 방법이 있을까요?

CSR에서 비어있는 HTML을 파싱할 때 id="root" 엘리먼트를 만나면 리액트 앱을 마운트(JS 실행)하는 것과SSR에서 서버에서 pre-render되어 생성된 HTML에 JS에 연결하는 과정인 하이드레이션은 어떤 차이가 있는건가요? CSR에서 비어있는 HTML에 JS를 연결해서 실행시키는 것도 하이드레이션 아닌가? 하는 생각이 들었는데비어있는 HTML과 서버에서 렌더링된 HTML의 데이터 존재 여부에 따라 다른건지,아니면 CSR도 하이드레이션 과정을 수행하는지 궁금합니다.

const shallow = {...value}; // 참조 끊어내기 value.pages = [...value.pages] value.pages[pageIndex] = [...value.pages[pageIndex]];참조를 끊어내어 react query의 state를 update 해주는건 이해 했습니다. 하지만 강의에서는 value.pages = {...value.pages} 를 이용하는데, pages를 객체로 덮어씌워 원래 배열을 바꾸는 이유가 따로 있을까요?

조금 혼란스러운 부분이 있습니다. auth.ts를 보면 export const {}=NextAuth를 통해 signIn함수를 외부로 보낼 수 있게 만드셨는데요. 다른 페이지에서 signIn을 사용하실때 LoginModal에서는 next-auth/react에서 호출한 signIn을, _lib의 signup에서는 @/auth의 signIn을 사용하셨는데, 어떤걸 사용해야 하는거고 무슨 차이인지 모르겠습니다.

클라이언트컴포넌트에서는 const {data:session, update} = useSession(); 로 세션값을 가져올때 update 함수도 함께 가져와서 update()하고 next-auth의 callback함수에서 세션값을 업데이트해주면 세션값을 변경할 수 있을것입니다. 문제는 서버용으로 const session = await auth(); 로 값을 가져오면 세션에 값을 변경을 할 수 있을까요?

올해는 강의 업데이트 계획이 없나요?

Error occurred prerendering page "/newpost". Read more: https://nextjs.org/docs/messages/prerender-errorReferenceError: document is not definedat 46593 (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/app/newpost/page.js:2:59980)at __webpack_require__ (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/webpack-runtime.js:1:146)at F (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:6049)at /Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8464at W._fromJSON (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8902)at JSON.parse (<anonymous>)at L (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:5770)at t (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:12155)✓ Generating static pages (5/5)> Export encountered errors on following paths:/newpost/page: /newpost  npm run build시에 발생하는 에러입니다. 각종 사이트에서는 14버전에서 에러가 발생하고 있다고 하는 글 들만 있고 해결방법을 찾지 못했습니다..gpt에서는 클라이언트 사이드에서 실행되어야 하는 코드가 서버 사이드에서 실행되서 그렇다고 하는데잘해결이 안되고 있습니다. npm run dev시에는 에러없이 잘 실행됩니다."use client"; import React, { ChangeEventHandler, useState } from "react"; import LexicalEditor from "@/app/newpost/LexicalEditor"; function Page({ props }: any) { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const onChangeTitle: ChangeEventHandler<HTMLInputElement> = (e) => { setTitle(e.target.value); }; const onSubmit = (e: any) => { e.preventDefault(); console.log("제목 : ", title); console.log("내용 : ", content); }; return ( <form className="postForm" onSubmit={onSubmit}> <div className="postForm__titleInputSection"> <input className="postForm__titleInput" type="text" name="title" value={title} onChange={onChangeTitle} placeholder={"제목을 입력하세요."} /> </div> <div className="postForm__editorWrapper"> <LexicalEditor /> </div> <button>작성하기</button> </form> ); } export default Page;  깃허브 링크 입니다. https://github.com/littleduck1219/codeblog/blob/main/src/app/newpost/page.tsx  

안녕하세요 선생님 front, back nginx 한 뒤로둘다 https라고 바뀌고 인증서도 있긴한데,Front(502 Bad Gateway)라고 나오고back(welcome to nginx) 라고만 나오는 상태입니다.(설치는 Nginx Ubuntu20보고 했습니다https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard)문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다.0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process.질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소(MemoryStore)를 사용할 때 MemoryStore가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started질문2)찾아보니 Nginx 설정 파일 내에서 api.luckyhaejin.com이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용)front=> /etc/nginx/nginx.conf => server관련(글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,)front/pacakage.json에서 start부분에 3060 잘 되어있음front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음back => /etc/nginx/nginx.confback => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧)const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: true, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf사용중인 Os) macOS

 리액트 설치 후 강의 수강 중인데 저렇게 자꾸 "antd"를 찾을 수 없다고 오류가 생겨서, 문제점과 해결법을 알고 싶습니다ㅜ

이 강의를 들을때 미리 만들어보고 정답지 비교해보라는 느낌으로 강의룰 수강하라고 하셨잖아요, 근데 수강전이나 챕터별 코드를 실행해보기 전까지는 뭐를 만들어야할지 감이 안잡혀서요. 1) 한 챕터까지 코드 실행해본다.2) 코드 구성을 봐본다.3) 따라 만들어 본다.4) 해당 챕터까지 강의를 들으며 비교해본다. 요렇게 해보면 될까요?좋은 방향 있으시면 제시해주시면 감사하겠습니다. 

현재 서버 세팅을 마친 후, 백엔드 서버는 잘 돌아가는데 npm start 로 프론트 코드 실행 시 에러가 발생하고 있습니다.이전 강의를 볼 때 까지만 해도, 프론트 코드 실행이 잘 되었는데 갑자기 에러가 발생하여 의문이 듭니다ㅠㅠ현재 노드 버전은 v18.17.0이며 해본 시도로는 다음과 같습니다.백엔드 서버 중지 및 memurai 실행 중지.next 파일 삭제 및 .node_modules 파일 삭제 후 재설치npm run build 실행 후 npm starthttps://github.com/vercel/next.js/discussions/57066#discussioncomment-7609639

안녕하세요 선생님~!일단 먼저 ㅠㅠ... 질문이 너무 많아서 죄송합니다 ㅠㅠㅠ...! 제가 아직 주니어여서 메인 프엔 개발자 선배님을 보조하여,만들어진 다양한 모듈이나 비즈니스 로직 등을 이용하여 데이터 패칭/포스트/뮤테이션 정도만 하면서 자잘한 기능 구현 정도만 하고 있고 백엔드 지식이 전혀 없어서 그런지 next를 공부하면서 아직도 가장 아리송한 것이프론트엔드 개발자가 API를 만드는 것이 어떤 의미(?)인지 잘 모르겠습니다...! Next를 이용하여 프론트엔드 개발자가 serverless로 API를 개발하는 것이 어떤 경우에서 쓰이는 것인지, 이것이 얼마나 중요하고 대단한 기술인지 잘 와 닿지 않습니다. 저는 백엔드 개발자가 API를 개발 완료하면 프론트엔드 개발자는 swagger와 같은 API 문서를 참고하여 프론트 개발을 진행하는 것이 각자의 역할로 이해하고 있었는데 Next로 넘어오면서 프론트엔드 개발자가 API를 개발한다는 것에서 백엔드 개발자의 역할이 축소가 된 것인지 의문점이 들고 주니어로서는 러닝커브가 확 올라간 느낌이 듭니다 ㅠㅠ! 선생님께서는 현업에서 직업 모든 API를 개발하여 사용하시는 걸까요? 아님 이번 revalidate와 같은 몇가지 경우에서만 API를 개발하여 사용하시고 나머지 롤은 백엔드가 담당하는 것인가요?    바쁘실텐데 질문이 많아서 정말 죄송합니다 ㅠㅠ질 좋은 강의와 정성스러운 답변 덕분에 많은 배움을 얻어감에 정말 감사한 마음뿐입니다!건강하세요!

export const TabContext = createContext({ tab: "recommend", setTab: (value: "recommend" | "following") => {}, }); {tab: "recommend", setTab:(value: "recommend" | "following") => {}} 부분을 제거하고 빈 createContext()만 생성해도 잘 동작하는거 같은데, 매개변수값은 무엇을하는건지 궁금합니다. 그냥 타입정의 한거라고 봐도될까요?