강의에서 <android:exported="false"> 부분 이후 안드로이드 실행시 Execution failed for task ':app:checkDebugDuplicateClasses'. 오류가 나면  gradle.properties 파일에 아래 부분을 추가해보세요android.useAndroidX=trueandroid.enableJetifier=true  

 선생님 이다음 remote push 부분 강의가 없습니다. 누락된걸까요?

form으로 put, patch, delete 요청이 안되는걸로 알고있는데그럼 msw로 목업 요청을 작성할때랑 실제 서버를 작성할때랑 컴포넌트를 두개만들어서 해야하나요?

Next.js로 사전 렌더링을 하여 서버에서 html을 채워서 클라이언트에 응답해줄때 초기로딩 속도가 빨라진다는 개념은 이해가 됩니다. 다만, 제가 확인하고 싶은 부분은 다음과 같습니다. Next.js로 SSR을 구현할때 API 요청과 같이 서버에서 동적인 데이터를 통해 html을 채워서 응답하는 경우에는 요청마다 서버에서 JS를 실행해야 할 것입니다. 이 경우에 CSR보다 초기 로딩 속도가 빠르다고 장담할 수 있나요? (FCP, TTI 모두 어떤 상황에서든 우세할까요?)

auth.ts에서 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET) console.log(token) //쿠키 저장 res.set("Set-Cookie", cookie.serialize('token', token)); return res.json({user, token});token은 잘 찍히고 요청 헤더에 포함되어 있는데TypeError serialize 부분에서 에러가 뜨고실제 응답 에러가 납니다.... 쿠키 저장이 안되는 것 같습니다.serialize가 undefine 되었다는데 위에 const token으로 제대로 선언되고 출력까지 잘 되는데 이유를 모르겠습니다...   

아래 질문 관련입니다.server.ts origin 부분을 강사님처럼 다음과 같이 작성하면 header 오류가 납니다.const origin = process.env.ORIGIN; app.use(cors({ origin, credentials: true }))근데 아래처럼 const origin을 다음과 같이 환경변수를 거치지 않고 명시하면 헤더 오류 대신 500 오류가 나면서 토큰이 생성되지 않습니다. (로그인 페이지에서 로그인 시)const origin = 'http://localhost:3000'; app.use(cors({ origin, credentials: true })) 서버에서 process.env.ORIGIN, process.env.JWT_SECRET을 찍어봤을땐 잘 나오는데...이 이유로 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET)이 명령줄이 제대로 실행되지 않는 걸까 싶어 process.env.JWT_SECRET를 'super_secret'으로 바꿔봐도 똑같은 증상입니다. 확실하진 않지만 이 때문에 토큰 생성에 오류가 생겨서 500 에러가 뜨는 것인가 싶은데 어떻게 해결하면 좋을까요? 

우선 강의 잘 봤습니다.nextjs와 관련된 질문들이 있습니다. SSR,CRS,SSG,PPR,ISR 등은 만약 실무에서 투입한다면개발자들이 렌더링이 어떻게 되어야한다는 도메인 지식이 있는하에 결정하는건가요?그리고 블로그성 개발 관련 질문입니다.이 블로그라는게 어떻게 개발하고 만드냐는 여러가지 방법이 있겠지만 현 강의 처럼 mdx 파일에 직접 포스트를 기재를 하고 빌드해서 배포하고 올린다? 가 있고, CRUD를 구현해 블로그성 홈페이지를 만드는 방법이 있겠는데 보통 개발자분들은 어떤 방법으로 블로그를 만드는지 궁금합니다. (개인적인 의견으로 답변주심 감사하겠습니다(_ _).그리고 만약 mdx파일로 한다고 하면, md파일을 직접 작성해서 올리는것 말고 티스토리와 일반 블로그같은 UI를 생성해서 mdx파일로 올릴수있는지?도 궁금합니다.

안녕하세요 리액트를 공부하기 위해 어제 처음 등록을 했서 잘 듣고 있습니다. 강의에 대한 질문은 아니지만 수업준비관련해서 비주얼스튜디오 부분에 대해 질문이 있는데 제가 현재 맥북으로 사용하고 외장하드를 연결해서 이 외장하드에 폴더를 만들어 사용하고 있는데 어느순간 파일을 만들거나 리액트를 설치할때 파일명앞에 이미지처럼 ._ 이런식으로 붙더라구요. 삭제하면 또 생겨서 구글링을 통해 찾아봤지만 해결이 되지 않았습니다. 혹시 방법이 없을까요? 

강의를 들어보니 React Query와 꽤 비슷한 부분이 많다고 생각되서 혹시 대체할 수 있을까 생각이 들었는데요. 정환님은 어떤 생각을 가지고 계신지 궁금하여 질문 드립니다. 만약 App Router로 새로운 프로젝트를 구축해야 한다고 하면 React Query를 사용하실건가요?

postgres 주소는 오프라인 강의 시에만 제공하고 온라인은 제공을 하지 않는다고 이해했는데요.해당 부분으로 대체 가능한 방법과 postgres 없이 graphql만 실행하여 강의를 따라가도 지장이 없는지 궁금합니다.이후 강의에는 데이터 처리하는 부분이 포함되어있는 것 같은데요. 해당부분 확인 바랍니다!

3.3)Node.js 사용하기강의 3분10초입니다.npm init 을 터미널에 입력하면 사진과 같은 오류가 납니다.

로그인 페이지에서 로그인을 하면 500, 커뮤니티 생성 페이지에서 생성을 하면 401 AxiosError가 뜹니다.    <login.tsx>import axios from 'axios'; import InputGroup from '../components/InputGroup' import Link from 'next/link' import { useRouter } from 'next/router'; import React,{ FormEvent, useState } from 'react' import { useAuthDispatch } from '../context/auth'; axios.defaults.withCredentials = true; const Login = () => { let router = useRouter(); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [errors, setErrors] = useState<any>({}); const dispatch = useAuthDispatch(); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); try{ const res = await axios.post("/auth/login", {password, username}, {headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'}}) dispatch("LOGIN", res.data?.user); } catch(error: any){ //console.log(error); setErrors(error.response?.data || {}) } } return ( <div className='bg-white'> <div className='flex flex-col items-center justify-center h-screen p-6'> <div className='w-10/12 mx-auto md:w-96'> <h1 className='mb-2 text-lg font-medium'>로그인</h1> <form onSubmit={handleSubmit}> <InputGroup placeholder='Username' value={username} setValue={setUsername} error={errors.username} /> <InputGroup placeholder='Password' value={password} setValue={setPassword} error={errors.password} /> <button className='w-full py-2 mb-1 text-xs font-bold text-white uppercase bg-gray-400 border border-gray-400 rounded'> 로그인 </button> </form> <small> 아직 아이디가 없으신가요? <Link href="/register" legacyBehavior> <a className='ml-1 text-blue-500 uppercase'>회원가입</a> </Link> </small> </div> </div> </div> ) } export default Login<create.tsx>import axios from "axios"; import { GetServerSideProps } from "next"; import InputGroup from "../../components/InputGroup" import {useState, FormEvent} from "react"; import {useRouter} from "next/router" axios.defaults.withCredentials = true; const SubCreate = () => { const [name, setName] = useState(""); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [errors, setErrors] = useState<any>({}); let router = useRouter(); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); try { const res = await axios.post("/subs", {name, title, description}, {headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'}}) router.push(`/r/${res.data.name}`); } catch (error: any) { // console.log(error); setErrors(error.response?.data || {}); } } return ( <div className="flex flex-col justify-center pt-16"> <div className="w-10/12 mx-auto md:w-96"> <h1 className="mb-2 text-lg font-medium"> 그룹 만들기 </h1> <hr /> <form onSubmit={handleSubmit}> <div className="my-6"> <p className="font-medium">Name</p> <p className="mb-2 text-xs text-gray-400"> 그룹 이름은 변경할 수 없습니다. </p> <InputGroup placeholder="이름" value={name} setValue={setName} error={errors.name} /> </div> <div className="my-6"> <p className="font-medium">Title</p> <p className="mb-2 text-xs text-gray-400"> 주제를 입력해 주세요. </p> <InputGroup placeholder="주제" value={title} setValue={setTitle} error={errors.title} /> </div> <div className="my-6"> <p className="font-medium">Description</p> <p className="mb-2 text-xs text-gray-400"> 그룹에 대한 설명을 입력해주세요. </p> <InputGroup placeholder="설명" value={description} setValue={setDescription} error={errors.description} /> </div> <div className="flex jstify-end"> <button className="px-4 py-1 text-sm font-semibold rounded text-white bg-gray-400 border" > 그룹 만들기 </button> </div> </form> </div> </div> ) } export default SubCreate<subs.ts>import {Router, Request, Response} from "express"; import jwt from "jsonwebtoken" import { User } from "../entities/User"; import userMiddleware from "../middlewares/user" import authMiddleware from "../middlewares/auth" import { AppDataSource } from "../data-source"; import Sub from "../entities/Sub"; import { isEmpty } from "class-validator"; const createSub = async (req: Request, res: Response, next) => { const {name, title, description} = req.body; try { let errors: any = {}; if (isEmpty(name)) errors.name = "이름은 비워둘 수 없습니다."; if (isEmpty(title)) errors.title = "제목은 비워둘 수 없습니다."; const sub = await AppDataSource.getRepository(Sub) .createQueryBuilder("sub") .where("lower(sub.name) = :name", { name: name.toLowerCase() }) .getOne(); if (sub) errors.name = "서브가 이미 존재합니다."; if (Object.keys(errors).length > 0) { throw errors; } } catch (error) { console.log(error); return res.status(500).json({ error: "문제가 발생했습니다." }); } try { const user: User = res.locals.user; const sub = new Sub(); sub.name = name; sub.description = description; sub.title = title; sub.user = user; await sub.save(); return res.json(sub); } catch (error) { console.log(error); return res.status(500).json({ error: "문제가 발생했습니다." }); } }; const router = Router(); router.post("/", userMiddleware,authMiddleware, createSub); export default router; <server.ts>import express, { response } from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source"; import authRoutes from './routes/auth' import subRoutes from './routes/subs' import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); const origin = process.env.ORIGIN; const corsOption = { origin: "http://localhost:3000", credentials: true } app.use(cors(corsOption)) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()); dotenv.config(); app.get("/", (_, res) => {res.send("running")}); app.use("/api/auth", authRoutes) app.use("/api/subs", subRoutes) console.log(process.env.ORIGIN) let port = 4000; app.listen(port, async () => { console.log('server running at http://localhost:${port}'); AppDataSource.initialize().then(async () =>{ console.log("database initialized") }).catch(error => console.log(error)) })  

<Image src="/logo.png" alt="로고" width={100} height={100} /> import Logo from "@/public/logo.png"; <Image src={Logo} alt="로고" width={100} height={100} />이 두가지 접근 방식의 차이가 있을까요?

CoursItem.jsxApp.jsx제 개발화면확인 부탁드립니다:)

안녕하세요서버는 종료한 상태에서 강의대로 (with-searchbar)/error.tsx 파일을 만들고 새로고침을 하면 error.tsx에서 작성한 페이지가 나오지 않습니다.error.tsx 인덱스 페이지 아래 사진처럼 error.tsx페이지가 아닌핸들링되지 않은 런타임 에러가 발생해버립니다..혹시 searchParams를 Promise객체로 타입정의 한것처럼 뭔가 사용방법이 바뀐걸까요..? 

안녕하세요 현재 6.4)스켈레톤 UI 적용하기 강의를 듣고나서 궁금한점이 있어 질문 남깁니다. 서버쪽 데이터요청이 오래 걸리는 경우 Suspense를 통해 Skeleton UI를 보여주고 이후 데이터가 적용 된 컴포넌트를 보여주는거로 알고 있습니다.그래서 사용자경험이 조금 오를 것 같긴한데, 만약 데이터 요청이 빠른 경우(0.5초만에 데이터처리가 이뤄진 경우)에는 오히려 UX 관점에서 불편하지 않을까 싶어서 이럴땐 어떻게 처리하는게 좋을 지 질문 남깁니다!예시) 책 검색 -> 책 리스트의 skeleton UI 가 잠깐 보였다가(0.5초 등장) -> 책 리스트 나타남 (이와 같은 과정이 이뤄지면 오히려 사용자 경험이 떨어지지 않을까 싶어 궁금합니다)

안녕하세요 강사님, 강의를 듣는 중 문제가 발생해 글 남깁니다.book/id 상세페이지에서 SSG getStaticPaths를 적용중인데, id를 인식을 못해 에러가 발생합니다.Error: A required parameter (id) was not provided as an array received string in getStaticPaths for /book/[[...id]]강의에 의하면, books/1 은 보여야 하는데 페이지가 보이지 않네요오타인 것 같아 강사님 깃헙 코드도 복사해서 붙여봤는데 에러가 납니다 혹시 다른 문제가 있을까요?  에러 메세지에는 id가 제공이 안된다고 하는데, 제가 보기에는 staticProps에 맞게 변경한거 같은데, 왜 에러가 날까요??  

유튜브에 올라온 js강의가 너무 만족스러워서 강의를 신청하였고,현재 강의 잘듣고 있습니다. 저는 노드 공부를 하였고, 프론트 부분을 리액트로 하고 싶어서 강의를 듣고 있는데혹시 노드(express)와 연동 해서 프로젝트를 하고 싶은데 괜찮은 자료나강의가 있을까요?

npm run dev로 서버는 성공적으로 올라갔는데 localhost:3000 접속 시 연결이 거부되었다고 뜹니다.이것저것 많이 찾아보긴 했는데 해결이 안되네요 ㅠㅠwindows, 크롬에서 실행했습니다. 해결 방법을 알 수 있을까요?// index.js const express = require("express"); const path = require("path"); const bodyParser = require("body-parser"); const app = express(); const config = require("./server/config/keys"); // const mongoose = require("mongoose"); // mongoose.connect(config.mongoURI, { useNewUrlParser: true, useUnifiedTopology: true }) // .then(() => console.log('MongoDB Connected...')) // .catch(err => console.log(err)); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use('/api/dialogflow', require('./server/routes/dialogflow')); // Serve static assets if in production if (process.env.NODE_ENV === "production") { // Set static folder app.use(express.static("client/build")); // index.html for all page routes app.get("*", (req, res) => { res.sendFile(path.resolve(__dirname, "client", "build", "index.html")); }); } const port = process.env.PORT || 5000; app.listen(port, () => { console.log(`Server Running at ${port}`) });  //package.json { "name": "chatbot-app", "version": "1.0.0", "description": "chatbot-app", "main": "index.js", "engines": { "node": "18.20.5", "npm": "10.9.0" }, "scripts": { "start": "node index.js", "backend": "nodemon index.js", "frontend": "npm run front --prefix client", "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" }, "author": "Jaewon Ahn", "license": "ISC", "dependencies": { "actions-on-google": "^3.0.0", "body-parser": "^1.20.3", "dialogflow": "^1.2.0", "dialogflow-fulfillment": "^0.6.1", "dotenv": "^16.4.5", "express": "^4.21.1", "mongoose": "^8.8.1", "node": "^18.20.5", "punycode": "^2.3.1" }, "devDependencies": { "@ant-design/icons": "^5.5.1", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "concurrently": "^9.1.0", "nodemon": "^3.1.7" } }  client쪽//package.json { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "antd": "^4.24.16", "axios": "^1.7.7", "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.1.2", "react-router-dom": "^6.28.0", "react-scripts": "5.0.1", "redux": "^5.0.1", "redux-promise": "^0.6.0", "redux-thunk": "^3.1.0", "uuid": "^11.0.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "http-proxy-middleware": "^3.0.3" } }

import "./App.css"; import { Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; // 1. "/" : 모든 일기를 조회하는 Home 페이지 // 2. "/new" : 새로운 일기를 작성하는 New 페이지 // 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary" element={<Diary />} /> </Routes> ); } export default App; const Home = () => { return <div>Home</div>; }; export default Home;이렇게 작성했고, 오타도 없는 것 같은데 화면에 home이라는 글자가 안 뜹니다. router도 6.28. 으로 설치됐습니다.