묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결지금 당장 NodeJS 백엔드 개발 [사주 만세력]
만세력 2100~2200도 받으려면 어떻게 해야할까요?
2023년 태어난 애들은 100살까지 산다고 가정한다면 대운 세운을 구하려면 2100~2200도 필요할 것이잖아요 혹시 이거 데이터는 어디서 구할까요?! 선생님은 2000~2100 데이터는 어떻게 구했는지 알 수 있을까요?! 선배님 답변을 듣고 싶습니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
트랜잭션 사용 유의점
안녕하세요. 지난번 질문에 빠른 답변감사합니다. 트랜잭션 공부 중 주의사항에 대한 블로그 글을 짧게 봤는데요, 트랜잭션은 꼭 필요한 최소의 코드에만 적용하는 것이 좋다는 내용이었습니다. 결제 부분만 트랜잭션을 사용하고 나머지 게시판, 채팅 등 다른 기능 구현시 굳이 트랜잭션 사용 안해도 되는거죠?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
블로그 학습일지 저작권 관련 문의
안녕하세요 저작권 관련 질문드립니다! 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리한 것을 공개 처리해두어도 문제가 되지 않을지 문의드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 깃허브
포트폴리오를 깃허브에 올리려고 하는데 git허브강좌 보면서 따라하고 있었는데 git add . 후 git status 하면은 해당 오류가 떠요 .. admin@DESKTOP-8KF9PK5 MINGW64 ~/Desktop/portfolio (master)$ git add .admin@DESKTOP-8KF9PK5 MINGW64 ~/Desktop/portfolio (master)$ git statusOn branch masterNo commits yetChanges to be committed:(use "git rm --cached <file>..." to unstage)new file: freeboard_frontendChanges not staged for commit:(use "git add <file>..." to update what will be committed)(use "git restore <file>..." to discard changes in working directory)(commit or discard the untracked or modified content in submodules)modified: freeboard_frontend (modified content, untracked content) 해당 폴더 구조는 이렇습니다 보니까 .git이 이중으로 설치되어 있는데 어디 부분을 어떤 명령어로 삭제해야하는지 알려주시면 감사하겠습니다..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
콘솔로그가 2번 찍히는데 이유를 잘 모르겠습니다.
05-05-dynamic-routing-board-mutation강의에 있는 내용을 구현했습니다이상은 없게 정상 작동하는데콘솔로그가 2번 찍히는데 이해가 가지 않습니다===========================================폴더구조================================================05-05-dynamic-routing-board-mutation/index.jsimport {gql, useMutation} from "@apollo/client"; import {useRouter} from "next/router"; const 나의그래프큐엘세팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String){ createBoard(writer: $writer, title: $title, contents: $contents){ _id number message } } ` export default function GraphqlMutationPage() { const router = useRouter() const [나의함수] = useMutation(나의그래프큐엘세팅) const onClickSubmit = async () => { try{ // try에 있는 내용을 시도하다가 실패하면, 다음에 있는 모든 줄들을 모두 무시하고, catch에 있는 내용이 실행됨. const result = await 나의함수({ variables: { writer: "호날두", title: "모두다 외쳐", contents: "Siuuuu~~~~~~" } }) //console.log("result 값은 다음과 같습니다", result) //console.log("동적라우팅 주소는 number라고 지칭했고 다음과 같아요", result.data.createBoard.number) // router.push('/section05/05-05-dynamic-routing-board-mutation-moved' + result.data.createBoard.number) router.push(`/section05/05-05-dynamic-routing-board-mutation-moved/${result.data.createBoard.number}`) }catch (error){ alert(error.message) } } return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> // 한줄일 때는 괄호 ( ) 가 필요없다. }===========================================================05-05-dynamic-routing-board-mutation-moved/[number]/index.jsimport {gql, useQuery} from "@apollo/client"; import {useRouter} from 'next/router' const FETCH_BOARD = gql` query fetchBoard($number: Int){ fetchBoard(number:$number){ # 1번 게시글 내용에 생략된 내용이 많아서 19047을 1번 게시글로 가정 number writer title contents } } ` export default function StaticRoutingMovedPage(){ const router = useRouter() console.log("라우터에 뭐가 들어있는지 알아보기",router) const { data } = useQuery(FETCH_BOARD, { variables: { number: Number(router.query.number) } }) console.log("데이터에 뭐가 들어있는지 알아보기",data) return( <> <div>{router.query.number}번 게시글 이동이 완료됐어요!!😀😀</div> <div>작성자: {data && data.fetchBoard?.writer}</div> <div>제목: {data?.fetchBoard?.title}</div> <div>내용: {data? data.fetchBoard?.contents : "로딩중입니다."}</div> </> ) }==================================================================브라우저 콘솔창-> 여기서 GraphQL요청 후 콘솔 찍어놓은게 2번 반복됩니다.위의 내용 확대 ==================================================================네트워크 탭여기에 GraphQl 요청이 두번 나간 것 같은데 그것 때문에 그런 건가요?아니면 data 내용을 콘솔 찍었을때 한번 undefined 처리가 되어서 데이터를 받아오는 과정에서 한번 더콘솔이 찍힌건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
포트폴리오는 몇개가 좋을까요?
프론트 엔드 강의에 있는 포트폴리오 1개백엔드 강의에 있는 포트폴리오 1개이 강의에 총 포트폴리오가 2개 있는데2개 다 하는게 좋을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 실행 오류
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) npm run dev를 실행했더니 이런 오류가 떠요.....도와주세요ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 로그인 관련 redux 질문있습니다.
다름이 아니라 제로초님의 로그인 문제 해결하기 챕터를 보다가Posts.length관련 오류 해결하는 강의를 보는데제로초님의 redux화면이랑 저의 화면이랑 구성이 좀 다른 것 같아서 문의드립니다.제로초님의 화면은 위 사진처럼 me라는 객체로 나와서 확인하기 쉬운데제 화면은 아래처럼 그냥 데이터 라고 나오고 있습니다..어느 부분을 수정해야하는지 잘 모르겠어서 질문드립니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
글 작성이 안 되는 오류
컴파일은 오류 없이 잘 되는데, 폼에서 짹짹(게시)버튼을 눌러도 글 작성이 되지 않습니다개발자도구에서 나타나는 오류입니Incorrect use of <label for=FORM_ELEMENT>The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.To fix this issue, make sure the label's for attribute references the correct id of a form field. PostCard가 작성되지 않는데 코드에서 오류를 못 찾겠어서 질문합니다! 의심스러운 부분들만 올려봅니다..post.js 코드입니다const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST } const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST: { return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; }; default: { return { ...state, }; }; } }; PostForm.js 코드입니다const PostForm = () => { const { imagePaths } = useSelector((state) => state.post); const dispatch = useDispatch(); const imageInput = useRef(); const [text, setText] = useState(''); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmit = useCallback(() => { dispatch(addPost); setText('') }, []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='새로운 글 작성' /> <div> <input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: 'right' }} htmlType="submit">게시</Button> </div> <div> {imagePaths?.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img scr={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ) }; pages/index.js 코드입니다const Home = () => { const { isLoggedIn } = useSelector((state) => state.user); const { mainPosts } = useSelector((state) => state.post); return ( <AppLayout> {isLoggedIn && <PostForm />} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} </AppLayout> );
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그 결과값 표기 이상
안녕하세요, 수업 도중에 콘솔에 찍힌 결과가 이해가 되지 않아 문의 남깁니다.persons에 "철수"부터 "영수"까지 for문에 결과가 총 6번 나와야 하는데 4개 값 밖에 안나와 해당 이유. 궁금합니다,
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
docker-compose.yml 은 왜 루트에 하나염
docker-compose.yml 은 왜 루트에 두나요?.?~
-
미해결Node.js로 웹 크롤링하기
크롤링 자바스크립트 exe파일
안녕하세요!! 크롤링 강의 너무 잘들었습니다!!이 강의를 듣고 더 무언가를 해보고 싶어, 질문드립니다!!강의 내용 중 unsplash사이트에서 이미지를 가져오는 내용이 있는데요.이 코드를 돌리는데 명령어가 아닌 js파일을 exe실행 파일로 만든 후 exe파일을 눌었을 경우 코드가 실행되기 위해서 npm의 pkg를 사용하여 만들었는데 실행이 안되서요..ㅠ강의자님은 js파일을 exe실행 파일로 만들으셔서 사용하실 때 어떤 방법을 이용하시나요?!
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
로그로 남겨야하는 항목을 어디까지로 해야할까요?
안녕하세요 제로초님.강의 잘 보았습니다.유저가 http request를 보냈을 때 해당 요청에 대한 로깅을 하려고 하는데 남겨야하는 정보에대한 고민이 있어 문의드립니다.한번의 요청에는 수업시간에 기재해주신 정보 이외에 여러정보가 있는걸로 알고있습니다.header(jwt token정보 등), body, param, query, response body 등 여러정보중 어떤 것을 로그에 포함해서 남겨주는게 좋을지 가늠이 되지 않아서 조언을 구하고 싶습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
04-05-graphql-mutation-product
마지막 createProduct 불러오는 부분에서 createProductInput 부분에 제공되는 값이 없다고 뜨는 것 같습니다.오타나 변수를 확인해봐도 제 눈에는 안보여서.. 이 부분에서 오류가 나는건 맞는 것 같은데 서버에서 못받아오는걸까요? 어떤게 문제일까요?ㅠㅠ 작성코드도 같이 첨부합니다..!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그아웃시 req logout의 콜백함수 에러가 납니다...
req.logout을 호출할때 콜백함수가 필요하다 라고 나옵니다.req#logout requires a callback function이런식으로요 제 코드는 제로초님 코드처럼 적어놨는데 제가 이해하는 콜백함수라는게 라우터 부분이라고 생각이 드는데 어떻게 수정을 해야할지 감이 안잡힙니다 ㅜㅜ const express = require('express'); const bcrypt = require('bcrypt'); const passport = require('passport'); const { isLoggedIn, isNotLoggedIn } = require('./middlwares') const { User, Post } = require('../models'); const router = express.Router(); router.post("/login", isNotLoggedIn, (req, res, next) => { passport.authenticate("local", (err, user, info) => { if (err) { // 서버에러 부분 console.error(err) return next(err) } if(info){// 클라이언트 에러 부분 return res.status(401).send(info.reason) } // 성공시 return req.login(user,async(loginErr)=>{ // 패스포트 에러날시 if(loginErr){ console.error(loginErr) return next(loginErr) } // 유저의 모든 정보 const fullUserWithoutPassword = await User.findOne({ where:{id:user.id}, // 비밀번호 제외 // 받고 싶은 정보만 적을경우 // attributes:["id","nickname","email"], attributes: { exclude:["password"] }, // 나머지 정보 include:[{ model:Post }, { model: User, as: "Followings", }, { model: User, as: "Followers", }] }) // post 팔로워 팔로잉 정보 비밀번호 제거 return res.status(200).json(fullUserWithoutPassword) }) })(req,res,next) }) router.post("/", isNotLoggedIn, async (req, res, next) => { try { const exUser = await User.findOne({// 중복이 됫는지아닌지. where:{ email:req.body.email, } }) if(exUser){ return res.status(403).send("이미 사용중인 아이디입니다.") } const hashedPassword = await bcrypt.hash(req.body.password, 12) await User.create({ email:req.body.email, nickname: req.body.nickname, password: hashedPassword, }) // res.setHeader("Access-Control-Allow-Origin","http://localhost:3000") res.status(201).send("회원가입이 완료되셨습니다.") // 201은 생성이 잘됫다. } catch (error) { console.error(error) next(error)// 에러가 난거를 브라우저에 알려준다. statsus:500 } }) router.post('/logout', (req, res) => { req.logout(); req.session.destroy(); res.send('ok'); }); module.exports = router
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
post 추가 시 오류
안녕하세요 제로초님다름이 아니라 로그인 후 포스트를 추가할 때 에러가 발생하는데혼자 해결하려고 노력해봤지만 해결을 아직 하지 못하여 질문드립니다.reducers/post.jsimport shortId from "shortid"; import { produce } from "immer"; import faker from "faker"; export const initialValue = { mainPosts: [], //이미지업로드 할떄 이미지경로들이 여기 들어간다. imagePaths: [], hasMorePost: true, //true면 가져올 시도를 해라. (스크롤 했을 때) loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, //게시글 추가가 완료되었을때 TRue addPostLoading: false, addPostDone: false, addPostError: null, removePostLoading: false, removePostDone: false, removePostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; //가짜 데이터 export const generateDummyPost = (number) => Array(number) .fill() .map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.paragraph(), //아무 문장, Images: [ { src: "https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg", }, ], Comments: [ { User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.sentence(), }, ], })); export const LOAD_POSTS_REQUEST = "LOAD_POSTS_REQUEST"; export const LOAD_POSTS_SUCCESS = "LOAD_POSTS_SUCCESS"; export const LOAD_POSTS_FAILURE = "LOAD_POSTS_FAILURE"; export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const REMOVE_POST_REQUEST = "REMOVE_POST_REQUEST"; export const REMOVE_POST_SUCCESS = "REMOVE_POST_SUCCESS"; export const REMOVE_POST_FAILURE = "REMOVE_POST_FAILURE"; export const ADD_COMMENT_REQUEST = "ADD_COMMENT_REQUEST"; export const ADD_COMMENT_SUCCESS = "ADD_COMMENT_SUCCESS"; export const ADD_COMMENT_FAILURE = "ADD_COMMENT_FAILURE"; export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); export const addComment = (data) => ({ type: ADD_COMMENT_REQUEST, data, }); //리듀서란 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수(단, 불변성은 지키면서) //draft는 불변성 상관없이 바꾸면 immer가 알아서 불변성있게 만들어준다. const reducer = (state = initialValue, action) => produce(state, (draft) => { switch (action.type) { //게시글 추가 case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.data); draft.imagePaths = []; //unshift란 배열의 맨 앞에다가 추가하는 함수 break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break; //게시글 불러오기 case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); //concat은 두개 이상의 배열을 합칠 때 사용 //action.data에는 더미데이터들이 들어있고 draft.mainPosts는 원래 데이터 draft.hasMorePost = draft.mainPosts.length < 50; //50개보다 적으면 불러와야함 break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; //댓글 추가 case ADD_COMMENT_REQUEST: draft.addCommentLoading = true; draft.addCommentDone = false; draft.addCommentError = null; break; case ADD_COMMENT_SUCCESS: //immer버전 (너무 간단함) const post = draft.mainPosts.find( (v) => v.id === action.data.postId ); //해당 게시글 찾기 post.Comments.unshift(dummyComment(action.data.content)); draft.addCommentLoading = false; draft.addCommentDone = true; //댓글 넣어주기 break; //immer를 안 쓴 부분 // const postIndex = state.mainPosts.findIndex( // (v) => v.id === action.data.postId // ); // const post = { ...state.mainPosts[postIndex] }; // post.Comments = [ // dummyComment(action.data.content), // ...post.Comments, // ]; //얕은 복사 // const mainPosts = [...state.mainPosts]; // mainPosts[postIndex] = post; //댓글 추가하는 부분 너무어려움.. // //불변성을 지키다 보니 가독성이 너무 안좋음 // return { // ...state, // mainPosts, // addCommentLoading: false, // addCommentDone: true, // }; case ADD_COMMENT_FAILURE: draft.addCommentLoading = false; draft.addCommentError = action.error; break; //게시글 삭제 case REMOVE_POST_REQUEST: draft.removePostDone = false; draft.removePostLoading = true; draft.removePostError = null; break; case REMOVE_POST_SUCCESS: draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter( (v) => v.id !== action.data ); break; case REMOVE_POST_FAILURE: draft.removePostLoading = false; draft.removePostError = action.error; break; default: break; } }); export default reducer;여기서 Images안에 아무것도 들어있지 않아서 나타나는 오류같은데 잘 모르겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
ElasticSearch 개념 내용은 어디서 볼 수 있나요?
ElasticSearch 개념을 학습할 수 있는 부분이 검색 섹션에 있을 거 같은데 보이지 않아 여쭤봅니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
<StopOutLined> 이 exported 되지 않는 오류
import { List, Button, Card } from 'antd';import { StopOutLined } from '@ant-design/icons';로 임포트를 했는데도 불구하고 프로필창을 열면 다음과 같은 에러가 납니다터미널에는 에러메시지도 뜨고요error - ./components/FollowList.jsAttempted import error: 'StopOutLined' is not exported from '@ant-design/icons'. npm i antd antd 와 npm install @ant-design/icons --save-dev로 다시 설치해봤는데 해결되지 않았습니다 package.json 에서 확인한 버전입니다 "antd": "^5.10.2", "@ant-design/icons": "^5.2.6", FollowList.js 에서 의심스러운 부분입니다import { List, Button, Card } from 'antd'; import { StopOutLined } from '@ant-design/icons'; const FollowList = ({header, data}) => { return ( <List renderItem={(item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutLined key="stop" />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> )} /> ) };
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
login Cookie 전송에 관해 질문이 있습니다.
현재 Sleact 프로젝트를 Nestjs로 백앤드 개발을 완료하여 개인 도메인으로 배포중 이고 현재 Sleact 프론트단을 Vite 와 React-query 를 이용해서 다시 제작중에 Login의 쿠키가 정상적으로 넘어 오지 않는 에러가 있었습니다.해당 에러는 배포중인 api는 개인 도메인이고 프론트 단은 localhost 여서 sameSite 에러가 발생 한거였는데아래와 같이 secure: true 설정을 하게되면 Api 서버는 https 이고 localhost 는 http 여서 실패하게되고 cookie: { httpOnly: true, sameSite: 'none', secure: true, },아래와 같이 secure: false 설정을 하게되면 인용구 문구가 뜨면서 실패하게 됩니다. cookie: { httpOnly: true, sameSite: 'none', secure: false , },samesite none 속성은 있지만 samesite=none 을 사용하는데 필요한 secure 속성은 없으므로 set-cookie 헤더를 통해 쿠키를 설정하려는 시도가 차단되었습니다현재는 api를 localhost로 추가로 실행하여 front 단에서 현재 개발환경에 따라 dev 일때는 localhost 개발 단에서는 개인도메인으로 요청하도록 해서 해결햇는데, localhost 에서 배포된 api를 받아 사용할때 어떻게 처리하는게 올바른 방법인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요 리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 합니다
리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 하는데 로그인api를 호출 후 fetchUser를 호출하면 Unauthorized에러가 납니다 헤더에 토큰이 저장되지 않아서 그런걸까요?