176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요~ 포트폴리오 과제하다가 질문 생겨 남겨요 첫번째는 댓글 내용 수정할 때 댓글 내용을 지우다가 다 지워지면 수정 전 원래 댓글 내용으로 도로 바뀌는 문젠데요 댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 value에서 defaultValue를 대체하여 작성해주던 아래 부분 때문인 것 같더라고요 value={ props.inputs.contents !== "" ? props.inputs.contents : props.el?.contents ?? "" } 수정을 시작할 땐 props.inputs.contents === ""이니까 댓글 내용인 props.el?.contents를 불러와서 띄워주고, 지우는 중엔 state가 빈 문자열이 아니니까 props.inputs.contents대로 표시되다가 댓글 내용을 전부 지우면 props.inputs.contents가 다시 빈 문자열이 되어서 바로 기존 댓글 내용을 띄워버려요 아예 댓글 내용을 지우고 싶어도 지울수가 없게 되어버리는데 어떻게 바꾸면 될까요? 좀 생각해봤는데 감이 안와서요 혹시 나중에 고치는 내용이 나오나요 두번째는 이번 포트폴리오 과제의 댓글부분 리팩토링 진행하다가 궁금했던 건데요 // BoardCommentWrite.container.tsx // ... const onClickWrite = async (): Promise<void> => { // ... // setWriter(""); // setPassword(""); // setContents(""); setInputs( (prev) => Object.fromEntries( Object.keys(prev).map((key) => [key, ""]), ) as typeof prev, ); // ... } 댓글 작성 끝날때 writer, password, contents를 비워줄 수 있도록 빈 문자열로 초기화시켜주던 걸 이런식으로 바꾸었는데 리팩토링 마치고 나서 잘 돌아가긴 했는데요 위 부분을 너무 어거지로 바꾼 것 같아서 좀 그래요... 사실 setInputs({ writer: "", password: "", contents: "" }) 그냥 이렇게 하는게 여기선 가장 좋은 방법인 것 같긴 한데, 더 많은 state들을 묶는 경우도 있다고 생각하면 것도 좀... 그래서요 이번 댓글 부분 코드에서는 setInputs({ writer: "", password: "", contents: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?
react node.js seo graphql next.js
희주
2024-10-23T13:13:10.265Z
댓글 1
좋아요 0
조회수 167
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Swagger 사용 가능한 건지 문의드립니다.
react node.js seo graphql next.js
thekrjm
2024-10-14T06:20:10.252Z
댓글 2
좋아요 0
조회수 161
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트원 사이트에 나와있는 내용이랑 인강내용이랑 코드가 전혀다릅니다. 인증 결제 연동하기 (portone.io) 바뀐거 같은데 어떤것으로 공부해야 하나요
react node.js seo graphql next.js
imhj11777
2024-10-06T07:44:58.191Z
댓글 2
좋아요 0
조회수 186
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제가 작년에 구매하여 section 10 정도 까지 듣다가 중단했었는데요,, 그땐 싸이월드만들기 이런 강의가 없던거같은데 강의가 개정된걸까요..? 어디서부터 다시 들어야할지 모르겠네요 ..
react node.js seo graphql next.js
진진
2024-10-02T07:46:57.724Z
댓글 2
좋아요 0
조회수 259
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
AWS에 정적페이지 동적페이지 분리해서 배포했는데 https://backendonline.codebootcamp.co.kr/graphql 이주소로 API 요청하면은 CORS 에러납니다. 해당 주소로 API 요청하는게 잘못된걸까요 본강의에서 ??
react node.js seo graphql next.js
김지환
2024-10-01T15:03:39.992Z
댓글 2
좋아요 0
조회수 295
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이 강의에서 MUI에 대한 것도 배우는지 궁금합니다.
react node.js seo graphql next.js
minchoi9979
2024-09-21T18:15:46.717Z
댓글 2
좋아요 0
조회수 174
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이건 무슨 오류 일까요?
react node.js seo graphql next.js
imhj11777
2024-09-21T11:20:39.310Z
댓글 2
좋아요 0
조회수 117
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
16-02-infinite-scroller 강의 중에 이해가 가지 않는 코드가 한줄 있어서 질문드립니다! InfiniteScroll에 pageStart 옵션이 걸려있는데, 이게 어디에 영향을 주는건가요? 초기 페이지 번호라기에는 이 옵션을 999999 처럼 의미 없는 값을 줘도 문제 없이 작동하고 그러네요.. 딱히 의미가 없는 코드 같은데 pageStart라는게 어떤식으로 작동되는건지가 좀 궁금합니다..
react node.js seo graphql next.js
ten
2024-09-21T01:43:45.911Z
댓글 2
좋아요 0
조회수 171
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강의를 열심히 보면서 하고 있습니다 궁금한 점이 커리큘럼이 html, css, js를 하고 리액트 강의도 있는 건가요? 아니면 리액트 없이 바로 Next.js 강의인가요?
react node.js seo graphql next.js
부드러운 족제비
2024-09-19T06:03:22.353Z
댓글 2
좋아요 0
조회수 269
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하십니까. 포트원에서 테스트 결제후 받은 imp_uid 값으로 강의 서버의 createPointTransactionOfLoading API에 impUid값을 세팅해서 보내려고 합니다 . 테스트 결제후에 받은 imp_uid 값은 결과값 오는거까지는 잘 되는데, 해당 API에 담아서 보내면 자꾸 404 에러가 뜹니다. 왜 이러는 걸까요 ?
react node.js seo graphql next.js
김지환
2024-09-17T13:46:28.848Z
댓글 3
좋아요 0
조회수 357
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
createBoard(createBoardInput: $createBoardInput) { _id } 이 부분에서 _id만 작성하는 이유가 fetchBoard를 할 때 게시글의을 불러오는 기준을 id로 하겠다는 의미인걸까요? 2. apolloclient 를 사용하는 코드들을 안 보고 혼자 힘으로 작성 하는게 너무 어렵습니다.. 다음 수강을 계속 들으면서 계속 사용하게 될텐데 하면서 적응해 나가야 할지, 혼자 작성이 가능할 때 까지 계속 영상 돌려보며 연습을 해야할지 모르겠어요 어떻게 하면 좋을까요?
react node.js seo graphql next.js
이재현
2024-09-10T16:03:35.529Z
댓글 2
좋아요 0
조회수 179
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
git도 다운받았고 터미널도 git bash가 작동이 됩니다. 근데 husky 다운이 안되네요. .git can't be found 따라하는데 계속 이 문장만 자꾸 뜹니다. 그래서 인강에 나온 방법처럼 하지 않고 학습자료에 나와있는거 처럼 따라했는데 괜찮나요? 학습자료 방법으로 해도 괜찮나요 추가 질문) git 을 계속 재설치해서 husky를 깔아도 .git can't be found만 뜨는데요. 왜그런걸까요
react node.js seo graphql next.js
imhj11777
2024-09-01T10:26:42.719Z
댓글 2
좋아요 0
조회수 206
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
지금 section04 포트폴리오 리뷰까지 왔는데 지금은 작성자, 비밀번호 , 제목 , 내용을 입력하고 등록하기 버튼을 눌러도 등록안되고 에러뜨는게 정상인건가요? 저만 안되는건가 싶어서요
react node.js seo graphql next.js
2024-08-27T08:24:30.648Z
댓글 2
좋아요 0
조회수 213
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
container 중앙으로 이동시킬때 .container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; } 라고 하셨는데 가운데 정렬하게 될때 , margin: 0 auto; 하는것과 어떤차이가 있을까요 ??
react node.js seo graphql next.js
SJ
2024-08-25T13:08:42.604Z
댓글 2
좋아요 0
조회수 137
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
피그마에는 startDate, endDate 지정하는게 있는데 playground fetchUseditems에는 날짜 설정이 없네요. 다른 방법이 있는건가요?
react node.js seo graphql next.js
박진성
2024-08-23T08:02:47.529Z
댓글 2
좋아요 0
조회수 101
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
데이터통신 실습을 위해서 스웨거하고 graphql을 접속하려고하는데 접속이안돼요..
react node.js seo graphql next.js
minchoi9979
2024-08-21T13:45:32.520Z
댓글 2
좋아요 0
조회수 248
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import { useEffect } from "react"; declare const window: typeof globalThis & { kakao: any; }; export default function KakaoMapPage(): JSX.Element { useEffect(() => { const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new window.kakao.maps.Map(container, options); console.log(map); }, []); return ( <> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키" ></script> <div id="map" style={{ width: 500, height: 400 }}></div> </> ); } Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <div>. See more info here: https://nextjs.org/docs/messages/react-hydration-error 카카오 맵 하는데 오류 왜 뜨는건가요??
react node.js seo graphql next.js
br
2024-08-20T11:21:57.335Z
댓글 1
좋아요 0
조회수 175
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 과제중 BoardDetail 작성글 페이지에서 패치보드가 안불러와져서 계속 코드 고쳐보다가 결국 강사님이 올려주시는 포트폴리오리뷰 파일 불러와서 코드보고 똑같이 따라쳐도 제 파일에서만 패치보드가 안불러와져서 오류가 계속나네요.. 혹시 좀 봐주실수 있을까요?(_app.js에서 아폴로 주소 확인도 했습니다) 아래는 패치보드 로드 실패로 나오는 창입니다
react node.js seo graphql next.js
cyh1908
2024-08-19T21:12:18.092Z
댓글 1
좋아요 0
조회수 169
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, 댓글 삭제 기능을 구현하던 도중 Modal에서 입력받은 비밀번호가 제가 댓글을 생성할 때 입력했던 비밀번호와 동일함에도 비밀번호가 틀렸다는 에러 메시지가 나옵니다. 제가 작성한 코드에서 어떠한 오류가 있는 건지 가르쳐주시면 감사하겠습니다... BoardComment Container import { useState } from "react"; import { useRouter } from "next/router"; import { useMutation, useQuery } from "@apollo/client"; import BoardCommentsUI from "./BoardComments.presenter"; import { FETCH_BOARD, CREATE_BOARD_COMMENT, FETCH_BOARD_COMMENTS, DELETE_BOARD_COMMENT, } from "./BoardComments.queries"; import { MouseEvent, ChangeEvent, MouseEventHandler } from "react"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationDeleteBoardCommentArgs, IQuery, IQueryFetchBoardArgs, IQueryFetchBoardCommentsArgs, } from "../../../../commons/types/generated/types"; export default function BoardComments() { const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [contents, setContents] = useState(""); const [rating, setRating] = useState(0); const [user, setUser] = useState(""); const [boardCommentId, setBoardCommentId] = useState(""); const [modalPassword, setModalPassword] = useState(""); const [contentLength, setContentLength] = useState(0); const [isOpen, setIsOpen] = useState(false); const router = useRouter(); if (typeof router.query.boardId !== "string") { router.query.boardId = Array.isArray(router.query.boardId) ? router.query.boardId[0] : String(router.query.boardId); } const { data } = useQuery<Pick<IQuery, "fetchBoard">, IQueryFetchBoardArgs>( FETCH_BOARD, { variables: { boardId: router.query.boardId, }, } ); const { data: commentData, refetch } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs >(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId, }, }); const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [deleteBoardComment] = useMutation< Pick<IMutation, "deleteBoardComment">, IMutationDeleteBoardCommentArgs >(DELETE_BOARD_COMMENT); const onChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const onChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const onChangeContents = (event: ChangeEvent<HTMLTextAreaElement>) => { setContents(event.target.value); setContentLength(event.target.value.length); }; const onChangeRating = (value: number) => { setRating(value); }; const onChangeUser = (event: ChangeEvent<HTMLInputElement>) => { setUser(event.target.value); }; const onChangeModalPassword = (event: ChangeEvent<HTMLInputElement>) => { setModalPassword(event.target.value); }; const showModal = (event: MouseEvent<HTMLImageElement>): void => { setBoardCommentId(event.currentTarget.id); setIsOpen(true); console.log(boardCommentId); }; const handelOk = (): void => { setIsOpen(false); }; const handelCancel = (): void => { setIsOpen(false); }; const onClickSubmitComment: MouseEventHandler< HTMLButtonElement > = async () => { try { if (typeof router.query.boardId !== "string") { return; } await createBoardComment({ variables: { boardId: router.query.boardId, createBoardCommentInput: { writer, password, contents, rating, }, }, }); refetch(); } catch (error) { console.log(error.message); } setRating(0); setWriter(""); setPassword(""); setContents(""); }; const onClickDeleteComment = async ( event: MouseEvent<HTMLButtonElement> ): Promise<void> => { try { await deleteBoardComment({ variables: { boardCommentId, password: modalPassword, }, }); refetch(); } catch (error) { alert(error.message); } setIsOpen(false); setModalPassword(""); }; return ( <BoardCommentsUI data={data} commentData={commentData} writer={writer} password={password} contents={contents} modalPassword={modalPassword} contentLength={contentLength} rating={rating} user={user} isOpen={isOpen} onChangeWriter={onChangeWriter} onChangePassword={onChangePassword} onChangeRating={onChangeRating} onChangeContents={onChangeContents} onChangeUser={onChangeUser} onChangeModalPassword={onChangeModalPassword} onClickSubmitComment={onClickSubmitComment} onClickDeleteComment={onClickDeleteComment} showModal={showModal} handelOk={handelOk} handelCancel={handelCancel} /> ); } BoardComment Presenter import * as S from "./BoardComments.styles"; import { IBoardCommentsUIProps } from "./BoardComments.types"; import { Rate } from "antd"; export default function BoardCommentsUI(props: IBoardCommentsUIProps) { return ( <S.Container> <S.PasswordCheck open={props.isOpen} onOk={props.onClickDeleteComment} onCancel={props.handelCancel} > 비밀번호 입력:{" "} <input type="text" onChange={props.onChangeModalPassword} /> </S.PasswordCheck> <S.CommentTitleWrapper> <S.CommentIcon src="/icon/rate_review.png" /> 댓글 </S.CommentTitleWrapper> <S.CommentInputWrapper> <S.CommentInputWrapperHeader> <S.CommentWriter type="text" placeholder="작성자" onChange={props.onChangeWriter} value={props.writer} /> <S.CommentPassword type="password" placeholder="비밀번호" onChange={props.onChangePassword} value={props.password} /> <Rate onChange={props.onChangeRating} value={props.rating} /> </S.CommentInputWrapperHeader> <S.CommentInputWrapperBody> <S.CommentInputWrapperBottom placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." onChange={props.onChangeContents} maxLength={99} value={props.contents} /> <S.CommentTextCount>{props.contentLength}/100</S.CommentTextCount> <S.CommentSubmitButton onClick={props.onClickSubmitComment}> 등록하기 </S.CommentSubmitButton> </S.CommentInputWrapperBody> </S.CommentInputWrapper> <S.CommentListWrapper> {props.commentData?.fetchBoardComments.map((el) => ( <S.CommentListItemWrapper key={el._id}> <S.CommentListProfileWrapper> <S.CommentListProfileImage src="/icon/profile.png" /> </S.CommentListProfileWrapper> <S.CommentListContentsWrapper> <S.CommentListContentsHeader> <S.CommentListWriter>{el.writer}</S.CommentListWriter> <Rate disabled defaultValue={el.rating} /> </S.CommentListContentsHeader> <S.CommentListContents>{el.contents}</S.CommentListContents> <S.CommentListDate>2024-07-27</S.CommentListDate> </S.CommentListContentsWrapper> <S.CommentListItemButtonWrapper> <S.CommentListItemButton src="/icon/mode.png" //onClick={() => props.onClickDeleteComment(el._id)} /> <S.CommentListItemButton src="/icon/clear.png" //onClick={() => props.onClickDeleteComment(el._id)} id={el._id} onClick={props.showModal} /> </S.CommentListItemButtonWrapper> </S.CommentListItemWrapper> ))} </S.CommentListWrapper> </S.Container> ); }
react node.js seo graphql next.js
Levi
2024-08-19T14:05:22.504Z
댓글 2
좋아요 0
조회수 208
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
어제는 잘됬는데 오늘 다시 해보니까 계속 오류가 생겨서 무슨 문제일까요? 서버에서도 에러가 뜨고 어제는 잘됬는데요 어제는 오류 안떳는데 오늘은 뜨고요 이거 다운받아야 할까요? 네트워크는 잘 작동을 하는데요. 페이로드랑 응답에는 에러가 뜨네요. 어제는 분명이 됬는데 오늘 이러니까 이유를 모르겠어요 ㅠ 다른 섹션도요
react node.js seo graphql next.js
imhj11777
2024-08-18T06:48:44.168Z
댓글 3
좋아요 0
조회수 247
