inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

함수 선언시 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이 질문은 학습용임으로 사용목적에 대해서 답변을 구하는것은 아닙니다. function onChangePasword(e){} 위와 같이 사용도 가능하지만 const onChangeEmail = function (event) {} 와 같이 익명함수로도 선언이 가능하자나요? 질문코자 하는 내용은 아래와 같이 default 로 생성시 error 가 발생합니다. onChangeEmail = function (event) {} 또한 화살표 함수를 사용시에도 동일한 문제가 발생합니다.const onChangeEmail = (event) => {} 정상 onChangeEmail = (event) => {} error 이유가 뭔가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
gkdlsb1234 댓글 1 좋아요 0 조회수 210

next/image 질문!

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요! 궁금한게 있어서 질문드려요 ㅎㅎ 현업에서 next version 12.3.4 를 쓰고 있고 next/image를 사용해서 이미지를 화면에 보여주려고 하고 있는데 일반 img 태그를 쓸 때보다 화질이 안좋습니다.. 어떤 부분을 개선해야 할까요? 또한 next/image를 쓰면 이미지 최적화 및 lazy loading을 자동으로 지원한다고 했는데, priority를 설정 해주지 않으면 이미지가 늦게 로드 되고 lazy loading은 layout 옵션을 설정해주지 않으면 안되더라구요! 구 버전은 자동으로 지원해주지 않는걸까요? 아래 처럼 쓰고 있습니다. "next/future/image" "next/image" 두개 다 쓰고 있습니다! import Image from 'next/future/image'; <Image src="" alt="" width={320} height={395} quality={100} />

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
bj2525 댓글 1 좋아요 1 조회수 1347

수업 순서에 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

섹션1,2,3을 마친 학생입니다. 섹션4인 react를 시작하다보니 버전도 안맞고 혼자 헤매다 보니까 섹션23부터 다시 react파트부터 리뉴얼 되었더라구요 섹션1,2,3을 마쳤다면 섹션3~섹션22까지 뛰어넘고 23부터 들으면 되는건가요? 그렇게 하는게 맞다면 진도에 의한 수료증은 어떻게 받을수 있나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 1 좋아요 0 조회수 390

react-hook-form으로 기본값 설정하기

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 지금 section31과제를 진행하고 있습니다. 제가 지금 useForm으로 포트폴리오 과제를 진행하고 있는데 초기값 설정하는 데 어려움이 있습니다 현재 useForm 이 가지고 있는 defalutValues속성 으로 기본값 을 설정하는데 console 에서는 data값 이 찍히는데 defaltValues 에서는 undefined값 으로 나옵니다. 변수가 먼저 선언되고 값이 할당이 안되는 걸까요? useForm 에서는 기본값 을 어떻게 설정해야 하는걸까요? useForm 을 사용하기 시작했는데, 점점 벅찬거같아요... 이제라도 input 으로 변경해야할까요.. export default function BoardWriteUI({isEdit, data, onSubmitCreate, onSubmitUpdate, onClickMoveToBack}) { console.log(data) const {register,watch, formState : {errors, isValid}, handleSubmit} = useForm({ mode : 'onSubmit', defaultValues : { writer : data?.fetchBoard.writer, password : "", title : data?.fetchBoard?.title, contents : data?.fetchBoard?.contents, } });

  • react
  • node.js
  • seo
  • graphql
  • next.js
반가워요 댓글 1 좋아요 0 조회수 1417

시퀄라이즈 메소드 findOrCreate 옵션 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

현재 에러 Error: Missing where attribute in the options parameter passed to findOrCreate. Please note that the API has changed, and is now options only (an object with where, defaults keys, transaction etc.) at Function.findOrCreate (/Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/node_modules/sequelize/lib/model.js:1388:13) at /Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/routes/post.js:50:19 at Array.map (<anonymous>) at /Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/routes/post.js:49:18 at processTicksAndRejections (node:internal/process/task_queues:96:5) Error: Missing where attribute in the options parameter passed to findOrCreate. Please note that the API has changed, and is now options only (an object with where, defaults keys, transaction etc.) at Function.findOrCreate (/Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/node_modules/sequelize/lib/model.js:1388:13) at /Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/routes/post.js:50:19 at Array.map (<anonymous>) at /Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/routes/post.js:49:18 at processTicksAndRejections (node:internal/process/task_queues:96:5) POST /post 500 17.278 ms - 820 번역 해본 결과 : 현재 코드 : 현재 해시태그와 관련된 라우터코드만 올려보아요. const express = require("express"); const multer = require("multer"); const path = require("path"); const fs = require("fs"); const { Post, Image, Comment, User, Hashtag } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); // 이미지 업로드 파일 생성 try { fs.accessSync("uploads"); } catch (error) { console.log("uploads 폴더가 없어서 맹들었슴돠 !"); fs.mkdirSync("uploads"); } // multer 미들웨어 : 게시물 이미지 업로드 설정 const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, "uploads"); }, filename(req, file, done) { const ext = path.extname(file.originalname); // 확장자추출(.png) const basename = path.basename(file.originalname, ext); // 파일명 done(null, basename + "_" + new Date().getTime() + ext); // 파일명 + _ + 시간초 + 확장자 }, }), limits: { fileSize: 20 * 1024 * 1024 }, }); // 게시글 업로드 router.post("/", isLoggedIn, upload.none(), async (req, res, next) => { // POST /post try { // 해시태그 추출 const hashtags = req.body.content.match(/#[^\s]+/g); const post = await Post.create({ content: req.body.content, UserId: req.user.id, // 게시글을 작성한 사용자 id }); // 해시태그 등록 if (hashtags) { const result = await Promise.all( hashtags.map((tag) => Hashtag.findOrCreate({ wehre: { name: tag.slice(1).toLowerCase() }, }) ) ); console.log("HASHTAG", result); await post.addHashtags(result.map((v) => v[0])); } // 받은 이미지 시퀄라이즈, DB저장 if (req.body.image) { if (Array.isArray(req.body.image)) { // 이미지를 여러개 올리면 image: [파일명.png, 파일명.png] const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { // 이미지를 하나만 올리면 image: 파일명.png const image = await Image.create({ src: req.body.image }); await post.addImages(image); } } const fullPost = await Post.findOne({ where: { id: post.id }, include: [ { model: Image, }, { model: Comment, include: [ { model: User, // 댓글 단 작성자 attributes: ["id", "nickname"], }, ], }, { model: User, // 게시글 작성자 attributes: ["id", "nickname"], }, { model: User, // 좋아요 누른 사람 as: "Likers", attributes: ["id"], }, ], }); res.status(201).json(fullPost); } catch (err) { console.error(err); next(err); } }); 혹시나 하고 시퀄라이즈에서 모델에서 코드를 잘 못 쳐서 DB가 잘못 설계 된것인가? 도 생각이 들어 코드확인과 워크밴치에서 테이블 확인했는데 문제점은 없다고 생각을 했어요. /* models.index.js */ const Sequelize = require("sequelize"); const env = process.env.NODE_ENV || "development"; const config = require("../config/config")[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config ); // 시퀄라이즈에서 모델을 등록 (시퀄라이즈로 db에 require들을 넣어서 forEach문으로) db.Comment = require("./comment")(sequelize, Sequelize); db.Hashtag = require("./hashtag")(sequelize, Sequelize); db.Image = require("./image")(sequelize, Sequelize); db.User = require("./user")(sequelize, Sequelize); db.Post = require("./post")(sequelize, Sequelize); Object.keys(db).forEach((modelName) => { if (db[modelName].associate) { db[modelName].associate(db); } }); db.sequelize = sequelize; db.Sequelize = Sequelize; module.exports = db; /* medels/post.js */ module.exports = (sequelize, DataTypes) => { const Post = sequelize.define( "Post", { // id: {}, MySQL에서 id가 자동으로 생성된다. content: { type: DataTypes.TEXT, // 글자를 무제한으로 늘려주기위해 TEXT를 사용해보았다. STRING으로 한다. allowNull: false, }, }, { // Post Module에 대한 셋팅 charset: "utf8mb4", // 한글 + 이모티콘 collate: "utf8mb4_general_ci", // 한글 + 이모티콘 저장 } ); // belongsTo 단수, hasMany 복수 (뒤에 s) Post.associate = (db) => { db.Post.belongsTo(db.User); db.Post.belongsToMany(db.Hashtag, { through: "PostHashtag" }); db.Post.hasMany(db.Comment); db.Post.hasMany(db.Image); db.Post.belongsToMany(db.User, { through: "Like", as: "Likers" }); db.Post.belongsTo(db.Post, { as: "Retweet" }); }; return Post; }; /* models/hashtag.js */ module.exports = (sequelize, DataTypes) => { const Hashtag = sequelize.define( "Hashtag", { // id: {}, MySQL에서 id가 자동으로 생성된다. name: { type: DataTypes.STRING(20), allowNull: false, }, }, { // Hashtag Module에 대한 셋팅 charset: "utf8mb4", // 한글 + 이모티콘 collate: "utf8mb4_general_ci", // 한글 + 이모티콘 저장 } ); Hashtag.associate = (db) => { db.Hashtag.belongsToMany(db.Post, { through: "PostHashtag" }); // 하나의 해시태그에 여러개의 게시글 (M:N의 관계) }; return Hashtag; }; 그리고 당연히 워크밴치에서는 게시글은 잘 들어갔지만, 해시태그 테이블은 아무것도 저장되지 않았죠. 게시글 해시태그 질문 지금 번역도 해보고 구글링도 해본 결과, 원인은 findOrCreate 메소드를 사용하면서 전달해주는 where 속성이 누락되었다고 하더라구요.. 구글링을 해보니 첫번째 : where , 두번째 : 기본 키 (값), 세번째 : transaction 값을 넣어야된다고 나와있더라구요. 궁금한게 강좌에서 설명하는 속성값과 지금 제가 검색해서 알게 된 넣어야되는 속성값이 다른이유가 있을까요 ? 그리고 결국 결론은, 지금 현재 이 에러를 해결하기 위해서 기본값을 설정해주어야하는 부분인가요 ?

  • react
  • redux
  • node.js
  • express
  • next.js
아름잉 댓글 1 좋아요 0 조회수 584

react기초 및 폴더구조 파일 문제

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안내한 것 처럼 버전 확인하고 node modules 지운 다음 다시 설치해서 yarn dev를 실행했는데 안되는데 어디에서 틀린 지를 모르겠습니다..

  • react
  • node.js
  • seo
  • graphql
  • next.js
redbull1777 댓글 1 좋아요 0 조회수 566

기능완성 후 새로고침 시 application 항목에 key value 값 사라져요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

기능완성 후 새로고침 시 application 항목에 key value 값 사라지는데 새로고침시에도 key value 값이 유지되는 방법이 있을까요

  • react
  • node.js
  • seo
  • graphql
  • next.js
손성오 댓글 1 좋아요 0 조회수 308

prettier 설정관련 질문입니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

format on save 기능을 사용하면 저장 시에 자동으로 개행과 줄바꿈을 해줘서 잘 사용하고 있습니다. 그런데 짧은 코드는 오히려 개행을 하지 않고 한줄에 작성하는 것이 가독성이 좋은 것 같아서 한줄에 쓰고 싶은데 format on save에 체크가 되어있어서 한 줄에 입력하는 게 불가능하네요. 그런데 강사님의 경우에는 if (true) { alert("안녕하세요") ; } 같은 짧은 코드의 경우에는 if (true) { alert("안녕하세요") ; } 처럼 한줄로 작성하고 저장해도 강제로 개행이 안되던데, 여쭤보고 싶은건 강사님은 format on save를 off로 설정해놓으셨나요? 아니면 format on save를 on으로 설정해놓고, 저런 짧은 if문을 한줄에 다 입력할 수 있는 설정방법이 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
yashinwol 댓글 1 좋아요 0 조회수 535

파비콘 안뜨는 이유

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 선생님 고생이 많으십니다. _app.js 헤드에 코드도 추가했고 front 폴더안에 public 폴더만들어서 파비콘 이미지도 넣어놨는데 왜 파비콘이 지구모양에서 안바뀔까요.. 체크해 볼 경우의 수가 머가 있을지 궁금합니다.. <link rel="shortcut icon" href="/favicon.ico" />

  • react
  • redux
  • node.js
  • express
  • next.js
hornedllama6 댓글 1 좋아요 1 조회수 3528

로그인 유지 구현시 CSR vs SSR

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

매 요청마다 로그인 유지를 위한 요청을 보낸다고 할때(유저 정보를 받아오는 방식) useEffect를 이용해 CSR로 구현을하면 로그인 정보를 받아오기 전에는 초기상태가 없기 때문에 `초기상태` -> `유저정보 들어있는 상태` 로 변경하는 과정에서 화면 CSS에 깜빡임이 발생합니다. 이 현상이 저는 layout shift와 같다고 느껴서 해결을 하고 싶은데 실무에서는 보통 어떻게 해결하나요? 초기로드에 SSR을 적용할지, 아니면 CSR 에서도 깜빡임을 없애는 방법이 있는지 궁금합니다.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
kenny 댓글 1 좋아요 1 조회수 586

서버 들어갈 시 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

- error Error: The default export is not a React Component in page: "/" at renderToHTMLImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\render.js:279:19) at PagesRouteModule.render (webpack-internal:///./node_modules/next/dist/server/future/route-modules/pages/module.js:31:45) at doRender (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1055:40) at cacheEntry.responseCache.get.incrementalCache.incrementalCache (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1215:34) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\response-cache\index.js:99:42 at ResponseCache.get (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\response-cache\index.js:149:11) at DevServer.renderToResponseWithComponentsImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1134:53) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:727:121 at NextTracerImpl.trace (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\lib\trace\tracer.js:90:20) at DevServer.renderToResponseWithComponents (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:727:41) at DevServer.renderPageComponent (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1366:35) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async DevServer.renderToResponseImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1398:32) at async DevServer.pipeImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:645:25) at async Object.fn (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next-server.js:1153:21) at async Router.execute (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\router.js:315:32) at async DevServer.runImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:619:29) at async DevServer.run (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:908:20) at async DevServer.handleRequestImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:546:20) { digest: undefined } 저번 폴더구조 문제를 해결하니 이러한 문제가 생겼습니다 어떻게 하나요?

  • react
  • redux
  • node.js
  • express
  • next.js
lsw0810222 댓글 11 좋아요 0 조회수 598

pages 또는 앱 디렉토리를 찾을 수 없음 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

- ready started server on 0.0.0.0:3000, url: http://localhost:3000 Error: > Couldn't find any `pages` or `app` directory. Please create one under the project root at findPagesDir (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\lib\find-pages-dir.js:54:15) at DevServer.getRoutes (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:191:71) at new Server (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:198:47) at new NextNodeServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next-server.js:175:9) at new DevServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:149:9) at NextServer.createServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:179:24) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:200:42 at async NextServer.prepare (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:161:24) at async Server.<anonymous> (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\lib\render-server.js:128:17) { type: 'Error' npm run dev를 했을 때 이런식으로 뜨는데 어떻게 해야 하나요??

  • react
  • redux
  • node.js
  • express
  • next.js
lsw0810222 댓글 5 좋아요 0 조회수 1283

fallback 관련 특성은 getStaticPaths에서만 설정가능한가요?

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

동적인 페이지에서 getStaticPaths 를 사용할때 fallback: true 속성을 이용해서 페이지를 요청때마다 새롭게 빌드할수 있는걸 배웠습니다. 만약 getStaticPaths를 안쓰고 getStaticProps만 쓰는경우는 요청할때마다 빌드하는 방식의 처리를 못하는건가요? , getStaticprops만 사용하면 revalidate 밖에 못하는건가요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
kenny 댓글 1 좋아요 1 조회수 337

useSWR 로직을 hooks로 사용하는 경우

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

로그인 유지를 swr 방식으로 교체하려고 합니다. https://swr.vercel.app/ko/docs/getting-started 공식문서에는 useSWR을 hook으로 활용하는 가이드를 제시하고 있습니다. (재사용 가능하게 만들기 항목) 가이드와 같은 방식으로 외부 파일에 hooks를 만들고, 적용했습니다. useMyInfo.js import axios from 'axios'; export default function useMyInfo(useSWR) { const fetcher = url => axios.get(url, { withCredentials: true }).then(result => result.data); const { data: me, error: myInfoError, isLoading: myInfoLoading, } = useSWR(`${process.env.NEXT_PUBLIC_BACK_END_DOMAIN}/user/me`, fetcher); // mutate('ME', { me, myInfoError, myInfoLoading }); return { me, myInfoError, myInfoLoading, }; } index.js const Home = () => { const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } = useSelector(state => state.post); useEffect(() => { useMyInfo(); // hooks 호출 }, []); ...// 생략 매개변수로 전달하는 방식으로도 바꿔봤습니다. import useSWR from 'swr' const Home = () => { const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } = useSelector(state => state.post); useEffect(() => { useMyInfo(useSWR); // hooks 호출, hooks에서는 매개변수 받아서 적용하는 방식으로 변경했음 }, []); ...// 생략 여전히 같은 에러가 뜹니다. 공식문서 가이드와 달리 hook으로 만들어 재사용하는 것이 잘 안되는데 어떻게 해결할수 있나요? 간단한 get요청 하나 가져오는게 편할줄 알았는데 redux 보다 어려운거 같네요..

  • react
  • redux
  • node.js
  • express
  • next.js
kenny 댓글 1 좋아요 0 조회수 548

게시글 작성시 post.id를 읽지 못 하는 문제가 있습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요, 제로초님. 문제에 대한 고민을 공유하기 앞서 현재 저는 [해시태그 등록하기]까지 수강한 상태입니다. 공유하려는 문제는 제목과 같이 게시글 작성시 post.id를 읽지 못 하여 컴포넌트가 렌더링 되지 않습니다. 그러나 새로고침을 하면 작성한 게시글이 정상적으로 렌더링됩니다. 네트워크와 redux 데브툴즈에는 액션들이 모두 정상적으로 작동하고 있음을 확인하였고, 콘솔을 확인해보니 아래와 같은 오류가 뜹니다. 위 오류는 비동기로 데이터를 받아오기 전에 먼저 render가 되서 발생하는 에러 임을 검색을 통해 확인하였습니다. 그래서 react suspense를 이용하여 해결해보려 했으나 해결하지 못 했습니다. 혹시 제가 해당 오류의 원인을 제대로 파악하지 못 하고 있는 걸까요? 알려주시면 감사하겠습니다.

  • react
  • redux
  • node.js
  • express
  • next.js
윤섭 댓글 2 좋아요 0 조회수 395

setValue가 함수가 아니라는 오류 발생

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

TailwindCss 적용하기 실습 중 발생한 문제입니다. setValue is not a function TypeError: setValue is not a function at handleChange ( http://localhost:3000/static/js/bundle.js:167:5 ) at HTMLUnknownElement.callCallback ( http://localhost:3000/static/js/bundle.js:11038:18 ) at Object.invokeGuardedCallbackDev ( http://localhost:3000/static/js/bundle.js:11082:20 ) at invokeGuardedCallback ( http://localhost:3000/static/js/bundle.js:11139:35 ) at invokeGuardedCallbackAndCatchFirstError ( http://localhost:3000/static/js/bundle.js:11153:29 ) at executeDispatch ( http://localhost:3000/static/js/bundle.js:15297:7 ) at processDispatchQueueItemsInOrder ( http://localhost:3000/static/js/bundle.js:15323:11 ) at processDispatchQueue ( http://localhost:3000/static/js/bundle.js:15334:9 ) at dispatchEventsForPlugins ( http://localhost:3000/static/js/bundle.js:15343:7 ) at http://localhost:3000/static/js/bundle.js:15503:16 이러한 오류가 발생하였습니다. 아래는 코드입니다. 지난 시간에서 딱히 바꾼게 없는데 오류의 원인을 잘 모르겠어서 질문드립니다. App.js import React, {useState} from "react"; import "./App.css"; import List from "./components/List"; import Form from "./components/Form" export default function App (){ const [todoData, setTodoData] = useState([]); const [value,setValue] = useState(""); const handleSubmit = (e) =>{ e.preventDefault(); // 전송시 페이지 새로고침 방지 함수 let newTodo = { id : Date.now(), title: value, completed : false }; // 새로운 할 일 데이터의 형성 setTodoData(prev => [...prev,newTodo] ) setValue("") // 원래 할 일에 새로운 할 일 데이터의 update 해주는 setState 함수 } const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } return( <div className="container"> <div className='todoBlock'> <div className="title"> <h1>To do list</h1> </div> <h1 className='text-3xl font-bold underline'>Hello world!</h1> <List todoData= {todoData} setTodoData = {setTodoData}/> <Form handleSubmit = {handleSubmit} value ={value} setValue = {setValue}/> </div> </div> ); } list.js import React from 'react' export default function List({todoData , setTodoData}) { const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } const handleClick = (id) => { let newTodoData = todoData.filter(data => data.id !== id) console.log('newTodoData',newTodoData); setTodoData(newTodoData); } const getStyle = (completed) => { return { padding : "10px", borderBottom: "1px #ccc solid", textDecoration: completed ? 'line-through' : 'none', } } const handleCompleteChange = (id) => { let newTodoData = todoData.map(data => { if (data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData); }; return ( <div> {todoData.map((data)=>( <div style = {getStyle(data.completed)} key = {data.id}> <input type = "checkbox" defaultChecked = {false} onChange = {() => handleCompleteChange(data.id)}/> {data.title} <button style = {btnStyle} onClick = {() => handleClick(data.id)}>X</button> </div> ))} </div> ) } form.js import React from 'react' export default function Form(handleSubmit,value,setValue) { const handleChange = (e) =>{ setValue(e.target.value); } return ( <form style = {{display:"flex"}} onSubmit = {handleSubmit}> <input type = "text" name = "value" style = {{flex: '10', padding :'5px'}} placeholder = "해야 할 일을 입력하세요." value ={value} onChange ={handleChange} /> <input type = "submit" value = "입력" className="btn" style ={{flex:'1'}} /> </form> ) }

  • react
  • redux
  • tdd
  • typescript
  • next.js
이성현 댓글 1 좋아요 0 조회수 663

훈훈한 자바스크립트 강의 문제점

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

appendchild강의에서 addEventListener 로 넘어갈 때, const KeyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); } }; 위 코드에서 const KeyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value) { createTodo(); } }; 로 아무런 설명없이 바뀌어 있네요. 이유를 설명해주세요. 이거 외에도 아무 부연설명없이, 코드가 바뀌어 있는 경우가 매우 많습니다. 수정해서 다시 올려주세요

  • react
  • node.js
  • seo
  • graphql
  • next.js
b18lue 댓글 2 좋아요 0 조회수 397

리액트기초 yarn 설치 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

*우분투안쓰고 윈도우로 이용중입니다. 질문1. 강의자료 보면서 따라하는 중인데요. 강의자료에 나온 화면과 다르게 저는 style.thirteen도 없고 삭제부분을 삭제하면 오류가 많습니다. 마찬가지로 첫번째 div인 container가 저는 애초에 존재하지않고 <>형식으로 되어있는데 따로 타이핑해서 만들어줘야하나요? 질문2: 버전: 강의자료에 나온것 외에도 전부 no하는게 맞나요? 잘따라가고 있는지 모르겠습니다 ㅠ 질문3: 저는 yarn dev를 해서 페이지에 접속하니 컴파일 실패가 뜨네요.. 질문4: 혹시나 powershell로 설치한게 문제인건가 싶어서 폴더를 다 삭제하고 재생성후 gitBash를 사용해봤는데 yarn설치 명령어가 안먹히네요 그리고 powershell에선 먹히던 기본 명령어들이 Gitbash에선 안먹힙니다 어디서 부터 잘못된건지 막혀서 진도를 못나가고 있습니다. 도와주십쇼.. + 실무에서 설치할때는 이런일이 발생하지 않으려면 신경써야 하는 것들이 어떤게 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 2 좋아요 0 조회수 560

처음부터 막히는데 어떻게 해야하는 건지 자세한 답변 바랍니다.

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

https://nextjs.org/docs/getting-started/installation 공식문서, 아래 명령어 실행. npx create-next-app@latest 폴더명 적고 아래와 같이 선택하여 설치. ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias? … No 강좌 그대로 따라하려고 했는데 아래 캡쳐화면이 현재 제가 설치한 화면 입니다. 강의 화면 처럼 pages 이런 폴더들이 없는데, 대체 어떻게 하라는 건가요?? 사용하지 않는 코드를 모두 정리하라고 했는데, 정리해야하는 코드들이 없을 경우 어떻게 처리를 해야 하는 지 상세한! 자세한! 답변 바랍니다.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
이은혜 댓글 2 좋아요 1 조회수 827

인기 태그

인프런 TOP Writers

주간 인기글