묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
App is not defined
npm run dev를 했을 시 ReferenceError: App is not defined 이렇게 뜹니다 제 코드는 import React from 'react'; import PropTypes from 'prop-types'; import Head from 'next/head'; import 'antd/dist/antd.css' const NodeBird = ({Component}) => { return ( <> <Head> <meta charset='utf-8' /> <title>NodeBird</title> </Head> <Component /> </> ) }; App.PropTypes = { Component: PropTypes.elementType.isRequired, } export default App;입니다 어떻게 해야 하나요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
Banner.css가 안보이네요!
css가 전체적으로 안보여줘서 작성을 못했네요ㅜㅜ 파일 부탁드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
error Command failed with exit code 1. 해당 에러에 대한 질문드립니다.
에러 메세지 입니다. 01-02-emotion 폴더를 생성하여 강의 내용과 똑같이 작성하여 yarn dev로 실행하였는데 오류가 발생이 되어서 질문을 드립니다 .ㅠㅠ 해당 오류로 구글 검색을 해보니 공유캐시 파일을 지우고 다시 설치해보라는 글이 있어서 해보았는데도 오류가 고쳐지지 않아서 질문을 드립니다. ㅠㅠ 해당 오류는 링크의 블로그를 보고 시도해보았습니다.https://chlolisher.tistory.com/174 ㅠㅠ 도와주세요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
null 속성을 읽을 수 없음.
npm run dev를 할 시 Cannot read properties of null (reading 'prefixCls')이렇게 뜹니다..제 코드는 이렇게 되어 있는데 무엇이 문제일까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
데이터베이스 연결 부분 오류
이 오류때문에 지금 다음으로 넘어가지를 못하고있습니다...환경변수 쪽 문제인거같은데 어떻게 해도 해결이 안되네요 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
대댓글
강사님 안녕하세요 대댓글 만들고있는데요 fetchUseditemQuestionAnswers 에 return 값으로 받아오는 useditemQuestion 이게 null이라고 하는데요 혹시 이거 서버에서 문제있는거 같아서요혹시 봐주실수있으신가요?※ 대댓글 작성까지는 잘가는데 저 값을 받아와야하는데 null값이라고 하네요...
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section05 Quiz 3-8번
fetchBoards 인자로 search와 page가 있는데 search에 어떤 내용을 입력해야하는 지 모르겠습니다. 그리고 page라는 int형 값은 어디서 얻는지도 모르겠는데 알 수 있을까요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
kakaomap 으로 구현 하고 싶은데요.
안녕하세요.프론트쪽은 처음이라 하나 하나 해보고 있는데요. 카카오 맵으로 구현 하고 싶어서 https://github.com/JaeSeoKim/react-kakao-maps-sdk 라이브러르를 사용해서 naver map 사용하는 부분을 고쳐서 동작 시켰는데요.strategy="afterInteractive" , "beforeInteractive" 로 하면 TypeError: undefined is not an object (evaluating 'new window.kakao.maps') 에러가 나요.네이버맵 대신 카카오맵을 사용하고 싶은데요. 어떻게 해야할까요?감사합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
일부 도표 자료가 열리지 않습니다
도표 자료 중 커뮤니티 생성까지는 열람이 되는데 포스트 페이지 생성부터 부록까지 "파일을 찾지 못했습니다. 파일이 존재하지 않거나 읽기 권한이 없습니다."라는 경고창이 뜨면서 파일을 볼 수가 없습니다......
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn generate 가 작동하지 않아요
package.json 에 "generate": "graphql-codegen" 이라는 명령어가 없어서 작동을 제대로 안 하는거 같은데 혹시 이 문제는 뭘 어떤 걸 설치 해야 될까요? graphql 도 다시 설치해보고 인터넷에서 찾은 것들로 설치를 해봐도 문제가 해결이 안됩니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션24 포폴 질문있습니다.
포트폴리오 리뷰 중 타이핑하지 않은 상태에서 등록하기를 누르면 입력란 밑에 빨간색에러 표시가 나는 코딩부분에 질문이 있습니다.선생님은function onChangeWriter (event) { setWriter(event.target.value) if(event.target.value != "") { setWriterError("") } };이런식으로 if란에 이벤트 핸들링 함수를 넣어줘서 처리하셨고, 저는function onChangeWriter (event) { setWriter(event.target.value) if(writer != "") { setWriterError("") } };writer자체를 넣어서 안에 값이 들어오면 에러가 사라지게 만들었는데요.선생님은 코드는 한 번의 타이핑으로 바로 반응해서 없어지는데 반면, 저의 코드로는 에러 표시가 없어지기 위해서는 제목란을 제외하고는 2번씩 입력해야 에러 표시가 없어집니다.중요하지는 않은 것 같지만 궁금해서 여쭤봅니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 event 자료형따라 쳤는데 오류가 나요
멘토님 따라 작성했는데 빨간 밑줄이 사라지지 않고있습니다 ㅠㅠ임포트도 했는데 저렇게하는게 아닌걸까요??... 오류메세지는 이렇게 뜹니다 vscode 껐다 켜도 동일하고..node_modules 와 yarn.lock삭제 후 재설치해도 동일합니다ㅜㅜ 문제가 뭐일까요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 포트폴리오 과제1 질문
textarea를 적용시키니 칸을 줄이고 늘릴수 있는저런 요소가 생겼는데 못 없애나요?그리고 리액트에선 예전에Css를 다뤘던것 처럼 마우스커서로 색깔을 마음대로 선택 할수 없던데해결방법이 있나요?HTML:import { Wrapper, Project, Title, Label, Writer, Password, Contents, Address, WriterLabel, AddressNumber, AddressButton, YoutubeInput, InputWrapper, UserWrapper, TitleWrapper, ContentWrapper, AddressWrapper, YoutubeWrapper, ImageWrapper, UploadButton, UploadButtonText, SettingWrapper, RadioButton, RadioLabel, SubmitButton, } from "../../../styles/01-freeboard"; export default function EmotionPage() { // 여기는 자바스크립트 쓰는곳 return ( <Wrapper> <Project>게시물 등록</Project> <UserWrapper> <InputWrapper> <WriterLabel>작성자</WriterLabel> <Writer placeholder="이름을 적어주세요." /> </InputWrapper> <InputWrapper> <Label>비밀번호</Label> <Password type="password" placeholder="비밀번호를 작성해주세요." /> </InputWrapper> </UserWrapper> <TitleWrapper> <InputWrapper> <Label>제목</Label> <Title placeholder="제목을 작성해주세요." /> </InputWrapper> </TitleWrapper> <ContentWrapper> <InputWrapper> <Label>내용</Label> <Contents placeholder="내용을 작성해주세요." /> </InputWrapper> </ContentWrapper> <AddressWrapper> <InputWrapper> <Label>주소</Label> <AddressNumber placeholder="07250" />{" "} <AddressButton>우편번호 검색</AddressButton> <Address /> <Address /> </InputWrapper> </AddressWrapper> <YoutubeWrapper> <InputWrapper> <Label>유튜브</Label> <YoutubeInput placeholder="링크를 복사해주세요." /> </InputWrapper> </YoutubeWrapper> <ImageWrapper> <InputWrapper> <Label>사진 첨부</Label> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> </InputWrapper> </ImageWrapper> <SettingWrapper> <InputWrapper> <Label>메인 설정</Label> <RadioButton type="radio" name="radio_button" /> <RadioLabel>유튜브</RadioLabel> <RadioButton type="radio" name="radio_button" /> <RadioLabel>사진</RadioLabel> </InputWrapper> </SettingWrapper> <SubmitButton>등록하기</SubmitButton> </Wrapper> ); } Css: import styled from "@emotion/styled"; export const Wrapper = styled.div` margin: 50px; padding: 20px; width: 800px; /* border: 0.5px solid gray; */ box-shadow: 0px 0px 10px gray; display: flex; flex-direction: column; align-items: center; `; export const Project = styled.div` font-size: 34px; font-weight: bold; `; export const InputWrapper = styled.div``; export const Label = styled.div` font-size: 16px; font-weight: bold; margin-bottom: 10px; `; export const WriterLabel = styled.div` font-size: 16px; font-weight: 900; text-shadow: 2px 2px 2px gray; margin-bottom: 10px; `; export const UserWrapper = styled.div` display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Writer = styled.input` width: 380px; height: 30px; border: 1px solid #bdbdbd; `; export const Password = styled.input` width: 380px; height: 30px; border: 1px solid #bdbdbd; `; export const TitleWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Title = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; `; export const ContentWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Contents = styled.textarea` width: 100%; height: 300px; border: 1px solid #bdbdbd; `; export const AddressWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const AddressNumber = styled.input` width: 80px; height: 30px; border: 1px solid #bdbdbd; `; export const Address = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; margin-top: 20px; `; export const AddressButton = styled.button` background-color: black; color: white; height: 35px; cursor: pointer; `; export const YoutubeWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const YoutubeInput = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; `; export const ImageWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const UploadButton = styled.button` background-color: #bdbdbd; width: 75px; height: 75px; cursor: pointer; margin-right: 10px; `; export const UploadButtonText = styled.div` display: flex; flex-direction: column; `; export const SettingWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const RadioButton = styled.input` cursor: pointer; `; export const RadioLabel = styled.span` font-weight: 500; `; export const SubmitButton = styled.button` background-color: yellow; height: 60px; width: 140px; font-weight: bold; cursor: pointer; `;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
state 에 대하여 질문있습니다.
const onChangeEmail = (event) => { console.log(event.target.value); setEmail(event.target.value); console.log("!@# ", email); if (email === "") { alert(); }위의 코드를 실행할경우가장 첫 입력시 아래와 같은 문제가 발생합니다.(이메일 입력란에 'ㅁ' 입력)첫번째 console.log envent.target.value는 정상적으로 출력되며두번째 console.log는 "!@#" 을 제외한 email이 출력되지 않습니다. "!@#"만 출력됨if문의 경우 공백으로 인식해서 true 동작하여 출력이 되고 있습니다.원인은 무엇인가요?추가로 event 의 문제인가 싶어onChange가 아닌 onKeyUp 을 사용 할 경우에는f12 개발 디버깅쪽 console 에 error 표시가 잔뜩 발생합니다.이유가 무엇인가요?==================================email input tag에 최초 입력 시 아래의 코드처럼 onChange 함수안에 지역변수 testb 에 할당하는 event.target.value 는 출력되지만state 에 할당된 email 은 한반작 늦은? 출력이 됩니다.ex) input box 'ㅁ' 입력 시 결과state email = '' 공백출력지역변수 testb = 'ㅁ' 출력const onChangeEmail = (event) => { let testb = event.target.value; alert(testb); console.log(event.target.value); setEmail(event.target.value); console.log("!@# ", email); 설명 부탁드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
함수 선언시 질문있습니다.
이 질문은 학습용임으로 사용목적에 대해서 답변을 구하는것은 아닙니다.function onChangePasword(e){}위와 같이 사용도 가능하지만const onChangeEmail = function (event) {}와 같이 익명함수로도 선언이 가능하자나요?질문코자 하는 내용은 아래와 같이 default 로 생성시 error 가 발생합니다.onChangeEmail = function (event) {}또한 화살표 함수를 사용시에도 동일한 문제가 발생합니다.const onChangeEmail = (event) => {} 정상onChangeEmail = (event) => {} error 이유가 뭔가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
next/image 질문!
안녕하세요!궁금한게 있어서 질문드려요 ㅎㅎ현업에서 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} />
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업 순서에 질문있습니다.
섹션1,2,3을 마친 학생입니다.섹션4인 react를 시작하다보니 버전도 안맞고 혼자 헤매다 보니까섹션23부터 다시 react파트부터 리뉴얼 되었더라구요섹션1,2,3을 마쳤다면섹션3~섹션22까지 뛰어넘고 23부터 들으면 되는건가요?그렇게 하는게 맞다면 진도에 의한 수료증은 어떻게 받을수 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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로 NodeBird SNS 만들기
시퀄라이즈 메소드 findOrCreate 옵션 에러
현재 에러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기초 및 폴더구조 파일 문제
안내한 것 처럼 버전 확인하고 node modules 지운 다음 다시 설치해서 yarn dev를 실행했는데 안되는데 어디에서 틀린 지를 모르겠습니다..
