묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section 17 useEffect 부분
const [dog, setDog] = useState(""); const res = axios.get("https://dog.ceo/api/breeds/image/random"); console.log(res.data.message); // 사진 주소 setDog(res.data.message);위 코드에서 강사님이 설명 해주실 때, res 값이 변경되고 state 값이 바뀌니까 계속 무한루프로 리렌더링이 된다고 하셨는데, 계속 state 값이 바뀌는 이유가 이 api 자체가 fetch 할 때마다 랜덤으로 사진이 바뀌는 api라서 그런 걸까요 ? ??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
sec7 포트폴리오 질문
포트폴리오 sec7에서 게시글을 저장할 때 콘솔 창에 id를 출력해서 확인하는데, 저장한 게시글 정보를 playground에서 확인하는 방법은 무엇인가요? fetchBoard를 이용해서 찾아보려 했는데 잘 되지 않아요ㅜ 그리고 _id 말고 number이나 message 정보는 콘솔창에 출력할 수 없나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
좋아요 기능 구현
제로초님의 코드대로 한다라고 하면 게시물 데이터를 받을때 프론트쪽에 postId와 userId를 보내고 프론트에서 계산을 해야하던데 백엔드에서 이 게시물을 로그인한 유저가 좋아요를 눌럿는지 안눌엇는지에 대한 데이터를 바로 내주고 싶어서 이렇게 짜봣는데 자꾸 에러가 납니다.게시물에 대한 코드는 이거구요 const express = require("express") const { Post, Sequelize, User, Like } = require("../models") const router = express.Router() router.get("/",async(req,res,next)=>{ try { const posts = await Post.findAll({ // where:{ // id:lastId // }, limit: 10, // DESC 최신순 ASC 오래된순 order:[["createdAt","DESC"]], // 다른사람도 좋아요를 햇는지를 보여주는데 의미 없어보임 // include: [{ // model: User, // 좋아요 누른 사람 // as: 'Liked', // required: false, // attributes: ['id'], // through: { // attributes: [] // }, // }], attributes:[ "id", "content", "title", "createdAt", // 만든사람 [Sequelize.literal("(SELECT `nickName` FROM `Users` WHERE `Users`.`id` = `Post`.`userId`)"), "nickName"], // 이미지 소스 [Sequelize.literal("(SELECT `src` FROM `Images` WHERE `Images`.`postId` = `Post`.`id`)"), "src"], [ Sequelize.literal(` (SELECT CASE WHEN COUNT(*) FROM Liked WHERE Liked.PostId = Post.id AND Liked.UserId =: userId END) AS isLiked `), "isLiked" ], ], raw: true, }) res.status(201).send(posts) } catch (error) { console.error(error) next(error) } }) module.exports = router 에러는 이렇게 나고 있습니다.sqlState: '42000', sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'FROM Liked\n" + ' WHERE Liked.PostId = Post.id\n' + " ' at line 3",대체 뭐가 문제인건지도 감이 안잡히네요 ㅠㅠ
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
왜 {import.meta.env.VITE_SOME_KEY} 가 적용이 안될까요 ㅠㅠ
/src/.env 파일에 VITE_SOME_KEY = 123이렇게 설정하고, App.jsx에 function App() { return(<>{import.meta.env.VITE_SOME_KEY} <Counter/> </> )}export default App;이렇게 설정했습니다. 근데 왜 화면엔 123이 출력이 안되는 걸 까요 ㅠ? 오류 메시지도 없고..강의랑 똑같이 했는데 왜 안나올끼요 ..
-
미해결Vue로 Nodebird SNS 만들기
실습 환경 문의(Node 버전)
안녕하세요.실습을 위해서 Node 버전은 어떤 버전을 설치 해야 할까요 ?최신 버전을 받아서 설치하니 에러가 있어서, 답변바랍니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Amazon S3에서 파일 업로드 시 "Unzipped size must be smaller than 262144000 bytes" 에러가 발생합니다!
안녕하세요! 제로초님!! [리뉴얼] React로 NodeBird SNS 만들기섹션 6. AWS에 배포하기: Lambda로 이미지 리사이징 하기 강의까지 수강한 수강생 입니다!Lambda로 이미지 리사이징 강의의 20:00분 까지 그대로 잘 진행하고 있었습니다!그런데 Amazon S3에서 파일 업로드 시 아래 사진과 같은 에러가 발생합니다!"Unzipped size must be smaller than 262144000 bytes""압축 해제된 크기는 262144000바이트보다 작아야 합니다."해당 문제를 해결하기 위해 구글링 해보니serverless로 '/nodemodules' 같이 용량이 큰 것들을package exclude로 제외 시키는 것 같습니다!혹시 방법을 아시면 공유 부탁 드립니다!질문 글 읽어주셔서 감사합니다! 항상 강의 잘 보고 있습니다.+++ 혹시 모르니 저의 런타임 설정과 버킷 사진을 같이 첨부합니다!제로초님이 사용하신 Node.js 12.x가 항목에 없어서 Node.js 20.x을 사용하였습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
소셜 로그인 기능에 대해
안녕하세요 제가 고농축 강의 2개(프론트, 백엔드)를 방금 구매했는데혹시 구글,카카오,네이버 소셜 로그인(oauth2)에 대한 내용을 보려면어느 부분을 보면 될까요?
-
미해결Do it! Node.js 프로그래밍 입문
EJS formatting
안녕하세요.EJS 파일 만들어서 EJS 태그를 사용하는데 자동으로 formatting이 안되네요.. Prettier처럼 formatting이 자동으로 되게 하려면 어떻게 해야하나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
홈 화면 화살표 버튼 눌렀을때 1월에서 2월로 안 가고 3월로 갑니다 나머지 달은 잘 작동합니다.
안녕하세요 또 이렇게 질문을 해서 죄송합니다. 마지막 강의까지 다 듣고 배포까지 했는데 갑자기 홈 화면에 오른 화살표를 클릭을 하면 지금 1월 인데 누르면 3월로 이동 됩니다. 그런데 1월에서 2월 넘어갈때만 그래요 뒤로 가는건 잘 작동합니다. 홈 강의 다시 보고 틀린거 있나 확인했는데 못 찾아서 이렇게 연락드려요 https://github.com/jeain/Diary
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
playground 오류 10-06-one-to-one
다음과 같이 playground에서 mutation한 결과 "Cannot return null for non-nullable field Product.productSalesLocation." 오류 메시지가 뜹니다. mutation안의 반환값으로 product의 column만 받을 때는 오류 없이 작동되었는데 productSalesLocation의 column을 반환하려 하면 다음과 같이 오류가 뜹니다.위 사진을 보시면 DBeaver에 product와 saleslocation에 생성한 값이 잘 입력되었지만product table에서 productSalesLocationID가 NULL값으로 되어있습니다.이 부분에 연관된 코드가 여러 파일로 나뉘어져있어 코드 어느 부분을 확인해야 하는지 알려주시면 해당 코드 캡처본을 보내드리겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
EC2로 배포하니까 express-session에 저장한 데이터가 사라집니다.
로컬에서는 세션의 데이터가 안 사라지는데 EC2로 배포하니까 세션에 저장한 데이터가 사라집니다. app.use( session({ secret: process.env.SESSION_SECRET!, resave: false, saveUninitialized: false, store: MongoStore.create({ mongoUrl: process.env.DATABASE_URL }), cookie: { httpOnly: true, secure: true, domain: ".example.shop", }, }) ); 예를 들어 아래와 같이 코드를 작성하면app.get("/apple", (req, res) => { (req.session as any).apple = "apple"; console.log("apple", req.session); res.send("apple"); }); app.get("/banana", (req, res) => { console.log("banana", req.session); res.send("banana"); });/apple 에서는 세션에 apple이 저장되어 보이는데 /banana 에서 세션을 조회하면 쿠키 말고는 아무 것도 없습니다. 근데 mongodb에서 session 확인하면 저장은 잘되어 있습니다. 제가 뭘 놓친 걸까요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
ChunkLoadError: Loading chunk 552 failed.
안녕하세요. 저는 nextjs와 nestjs를 사용하고 있습니다. nextjs는 13버전을 사용하고 있는데요.코드를 원하는대로 다 작성해서 배포를 해봤는데, 개발 환경과 프로덕션 환경이 달라서 그런지 에러가 많아서 고쳐보고 있는 중입니다.그런 와중에 버튼을 클릭했을때 링크된 곳으로 사용자를 보내주는 역할을 하는 부분에서 ChunkLoadError: Loading chunk 552 failed. 이런 에러 문구가 콘솔에 뜨면서 화면이 렌더링 되지 않고 있습니다. <Link href="http://<host 서버 주소>/counsel" className="nav-link"> 상담 접수하러가기 </Link>빌드한 결과물에 이상이 있나 싶어서, dist폴더도 삭제했다가 다시 빌드해봤는데 같은 증상이 계속 나옵니다 ㅠㅠ nginx 설정에 문제가 있는걸까요? nextjs를 사용하고 있어서 따로 nginx 설정파일에 정적파일을 명시해두지는 않고 proxypass로 서버 주소를 넣어놓기만 했습니다. 구글링 해서 조치해봐도 딱히 해결책이 나오지 않아서 여쭤봅니다 ㅜㅜ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
swr 사용 후 다른 탭에서 다른 아이디로 로그인하면 데이터가 잘못 옵니다. 도와주세요ㅜ
안녕하세요 제로초님. 덕분에 많은 것을 배우고 있습니다. 정말 감사합니다.그런데 최근 혼자 해결하기 어려운 문제가 있어 질문하게되었습니다.redux를 useSWR로 대체하였는데 그 후 다른 탭에서 다른 아이디로 로그인하면 로그인한 계정의 데이터가 아닌 다른 탭 계정의 데이터가 불러와지는 문제가 발생합니다. 캐시 문제 때문인 것 같은데 어떻게 설정해야 문제를 해결할 수 있을지 잘 모르겠습니다. 힌트가 될만한 내용을 알려주시면 정말 정말 감사하겠습니다. 부탁드립니다ㅜㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리코일스테이트 사용후 문제점
codecamp 폴더 안에 각각 class폴더와 퀴즈, 프리보드 폴더를 사용중입니다. 그리고 수업내용에 따라 useRecoilState를 만들어놓고 각각 사용중인데, 수업을 따라하다보니 리코일스테이트의 네이밍이 isEditState, accessTokenState 이런식으로 다 같아서 혹시나 그것때문에 오류가 발생하나 싶어서 이름을 각각 다 변경해 보았지만 터미널에의 오류메세지는 계속 발생하네요. 이 부분은 무엇이 잘못되어서 이런 메세지가 뜨는 것인가요? 그리고 이 메세지를 안뜨게 하는 방법이 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
SPA, MPA, 리액트 Hooks 등의 개념 어디서 참고하시나요?
강사님 SPA, MPA, SSR , CSR과 리액트 Hooks 등의 개념에 대해 찾다보면 참고 문서와 링크 없고, 내용에 틀린부분도 있어보이는 블로그가 종종 있더라구요. 이러한 경우 강사님은 어디서 주로 찾으시는지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
15 페이지네이션 에러
저기서 자꾸 저런 에러가 뜨는데 어떻게 해결해야 할까요 ㅠㅠ타입을 바꿔봐도 똑같습니다 정확한 오류 메시지는{ page: number; } 형식의 인수는 'Partial<IQueryFetchBoardArgs>' 형식의 매개 변수에 할당될 수 없습니다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'Partial<IQueryFetchBoardArgs>' 형식에 'page'가 없습니다.입니다 !
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
0은 양수가 아닌거아닌가요? a >= 0 ?이렇게하면 0도 양수가 되는데..
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS 선택자 id
수업에서 CSS 선택자의 id 같은 경우 한 html에서 하나만 사용가능하다고 하셨는데 boxmodel 실습에서는 다음과 같이 id를 두 번 사용했더라고요. 상관없는걸까요? <!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> div { width: 80px; height: 80px; border: 1px solid red; } #contentBox { box-sizing: content-box; } #borderBox { box-sizing: border-box; } </style> </head> <body> <!-- 컨텐트박스 --> <div id="contentBox">박스1</div> <!-- 기본박스 --> <div>박스2</div> <!-- 보더박스 --> <div id="borderBox">박스3</div> </body> </html>
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
source map 관련해서 질문드립니다.
현재 next ^13.5.6 버전 사용중입니다.next.config.js 설정에서 devtool hidden-source-map 설정이 ^13.5.6 버전에서도 필요할까요? 아래 공식문서 보면 productionBrowserSourceMaps 설정이 동일한 역할을 하는것같은데 맞을까요?development 에서는 true 라서 source map이 보여지고 build시 자동으로 false가 되어서 hidden-source-map이 적용되는것같은데 그럼 ^13.5.6 버전에서는 따로 hidden-source-map 설정 안해도 되는걸까요?https://github.com/vercel/next.js/blob/v13.5.6/docs/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
typescript 관련 에러
제가 실습파일을 다시 만들었었는데 리액트 버전 낮추는 명령어를 치지 않고 하다가 section 13에서 antd design 관련 실습 하면서 강사님이랑 조금씩 다른 부분이 보이고, yarn dev 해도 실행이 안되어서 버전 문제라고 생각하고 중간에 버전을 낮췄거든요 ..!근데 아래처럼 '--jsx' 플래그를 제공하지 않으면 JSX를 사용할 수 없습니다. 라는 에러 메시지가 계속 뜨고 구글링해서 방법을 찾아보는데 하라는 거 해봐도 없어지지 않아요 ㅠㅠ타입스크립트를 재설치 해봐도 package.json에 dev-defendencies 항목이 생기지도 않고, tsconfig.js 파일을 삭제했다가 다시 타입스크립트 재설치 후 yarn dev 해도 변화가 없더라구요 !그래서 강사님 tsconfig와 같은 내용을 직접 작성해서 새로고침 해봤는데도 자꾸 에러가 그대로라서 ㅠㅠ 혹시 어떤 부분이 문제일까요 ㅠㅠㅠㅠ