수업 정답코드좀 알려주세요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이부분 이거 말고도 소과제 있는 부분 전부 다 정답코드 어디에 있나요? 아무리 찾아도 안나와요 자세한 경로좀 알려주세요
- react
- node.js
- seo
- graphql
- next.js
172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이부분 이거 말고도 소과제 있는 부분 전부 다 정답코드 어디에 있나요? 아무리 찾아도 안나와요 자세한 경로좀 알려주세요
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 서버사이드 렌더링 적용후에 css가 풀렸다가 다시 적용되는 것 같은데, 해결 방법이 있을까요? 로그인 후 새로고침을 하면 잠깐 첫번째 화면이 보였다가 두번째 화면을 보여줍니다. 세번째 화면은 리덕스 상태입니다. 서버사이드 렌더링을 해서 user와 post의 데이터는 잘 받아오고 있는것 같습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 과제로 받은 자유게시판 대댓글 기능 구현과 관련한 질문이 있어 글 남깁니다 우선 포트폴리오 과제를 진행할 때 사용하는 플레이그라운드 주소는 https://backend-practice.codebootcamp.co.kr/graphql 다음과 같습니다 플레이그라운드를 확인해보니 대댓글과 관련된 쿼리와 뮤테이션은 UseditemQuestions, UseditemQuestionAnswers 인 것 같은데요 대댓글과 관련된 다른 질문들을 통해 댓글=질문, 대댓글=질문에 대한 답변 으로 생각하면 된다는 답변을 보았습니다 현재 자유게시판 댓글과 관련된 과제를 진행할 때 사용한 쿼리와 뮤테이션은 BoardComments 인데요 그러면 BoardComment 쿼리와 뮤테이션을 사용해 구현한 댓글 기능을 UseditemQuestion으로 변경해야 대댓글 기능을 구현할 수 있는 건가요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 현재 댓글 수정, 삭제 구현중에 있습니다. 강의 과정에는 없지만 추가적으로 궁금한 부분이 있어 질문 드립니다. 댓글을 삭제하는 경우, 바로 반영되어 댓글이 삭제되기는 하나 애니메이션을 적용시켜 천천히 사라지며 삭제되는 코드를 짜고싶습니다. 현재 TransitionGroup, CSSTransition, keyframes 컴포넌트를 사용해 애니메이션은 적용이 되고 있으나, 삭제시 삭제되는 해상 댓글에만 적용하기는 너무 어렵네요 생각하기로는, 해당 댓글의 id 값을 스타일시트로 받아와서 스타일시트에서 해당 _id의 댓글만 애니메이션을 적용하면 될 것 같은데 생각대로 되지 않는 것 같습니다. 어떻게 하면 좋을지 힌트라도 얻을 수 있을까요? import { getDateTime } from '../../../../commons/libraries/utils'; import * as S from './BoardCommentDetail.styles'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import { useEffect } from 'react'; export default function BoardCommentDetailUI(props) { useEffect(() => { // 댓글이 변경될 때 추가적인 정리 또는 부작용을 수행할 수 있습니다. }, [props.data?.fetchBoardComments]); return ( <div> <TransitionGroup> {props.data?.fetchBoardComments.map((el) => ( <CSSTransition> <S.CommentWrapper> <S.Comment> <S.ProfileImg> <img src={`/img/profileIcon.svg`} width={48} height={48} /> </S.ProfileImg> <S.CommentContentsArea> <S.CommentContentsWriter> <S.ContentsWriter>{el.writer}</S.ContentsWriter> <S.ContentsRate value={el.rating} disabled /> </S.CommentContentsWriter> <S.CommentContents>{el.contents}</S.CommentContents> <S.CommentDate>{getDateTime(el.createdAt)}</S.CommentDate> </S.CommentContentsArea> <S.WriterIconWrapper> <img src={`/img/mode-24px.svg`} /> </S.WriterIconWrapper> <S.WriterIconWrapper id={el._id} onClick={() => props.onClickDeleteComment(el._id)} > <img src={`/img/clear-24px.svg`} /> </S.WriterIconWrapper> </S.Comment> </S.CommentWrapper> </CSSTransition> ))} </TransitionGroup> </div> ); } import { useMutation, useQuery } from '@apollo/client'; import { FETCH_BOARD_COMMENTS, DELETE_BOARD_COMMENT, } from './BoardCommentDetail.queries'; import { useRouter } from 'next/router'; import BoardCommentDetailUI from './BoardCommentDetail.presenter'; import { useState } from 'react'; export default function BoardCommentDetail() { const router = useRouter(); const [commentIdToDelete, setCommentIdToDelete] = useState(null); const { data, refetch } = useQuery(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId }, }); const [deleteBoardComment] = useMutation(DELETE_BOARD_COMMENT); const onClickDeleteComment = async (commentId) => { setCommentIdToDelete(commentId); const isConfirmed = window.confirm('댓글을 삭제하시겠습니까?'); if (isConfirmed) { try { const passwordConfirmation = prompt('비밀번호를 입력하세요'); await deleteBoardComment({ variables: { boardCommentId: commentId, password: passwordConfirmation, }, }); alert('댓글이 삭제되었습니다.'); refetch(); } catch (error) { console.error('댓글 삭제 중 오류 발생', error); } } }; return ( <BoardCommentDetailUI data={data} onClickDeleteComment={onClickDeleteComment} /> ); }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
15:24 초에 createBoard 값으로 받은 result 값을 콘솔에 찍어보면 data.createBoard 값에 저장된 값이 _typename , _id 값 두개만 보이는데 백엔드 API 설계 당시에 뮤테이션의 리턴값으로 저 2개의 ㄱ값만 리턴하도록 설정되어 있는 건가요? 아님 요약 정보만 추려서 보여주는 건가요?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 안녕하세요 선생님, 질문은 3가지 입니다. 1) 저는 문제를 딱 접했을때 분류모형을 써야할지, 예측모형을 써야할지 판가름을 정확하게 못하는 것 같습니다. 쉽게 판별하는 방법이 있을까요? 2) 이 문제의 경우 target인 output 컬럼을 train.head() 로 보면 0과 1로 구분되어있어서, 0 또는 1로 분류하는(분류모형) 것인가 생각했다가도 문제 맨위에서 참조해주는 예시에서 id,output 41,0.633 28,0.123 222,0.355 를 보면 output이 확률값으로 되어있어서 회귀모형을 사용해야하는 것인가? 라고 헷갈리곤합니다. 어디서 개념을 잡지 못하는 것일까요 3) 최종 예측을 할때 pd.DataFrame({'id':test_id, 'output':pred_proba[:,1]}).to_csv("00000.csv", index=False) output에 pred_proba 를 쓰셨는데 참조예시에서 확률값을 OUTPUT에 담았기 때문에 pred_proba를 사용한 것일까요? 그렇다면 output에 pred 를 담는 경우는 어떤 경우인지요?
미해결
부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편
안녕하세요. 강의 잘 듣고 있습니다. node에서 user가 실행하는 일반적인 코드는 single thread라 async로 분리해서 실행하면 조금 늦게 끝나야 하는데 너무 차이가 나서 제가 잘못이해하고 있었나?하고 순간 당황했네요. Array 생성하실때 파라메터가 길이이고 fill함수의 파라메터가 값인듯 합니다. 확인 부탁드립니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
s3 를 다음과 같이 만들었는데 다음과 같이 별칭에서 나오지 않는데 어떻게 해야되나요?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 df = df.T df.head() mean_2001 = df[2001].mean() mean_2003 = df[2003].mean() a = sum(df[2001] > mean_2001) b = sum(df[2003] < mean_2003) print(a+b) 이렇게 작성하면 결과가 다르게 나오는데,, 어디서 잘못된 것일까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
현재 강의가 nextjs12로작성된듯한데 create-app 으로 12버젼을 지정해도 14버전이 깔려버립니다. 혹시 강의자체를 리뉴얼 하실 계획이 있으신가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
실습을 위한 아무 도메인을 구매하면 되는지 궁금해서 질문드립니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. hocs 관련해서 질문하나 남깁니다. 강사님께서 새롭게 진행해주신 refreshtoken이후의 로그인 체크를 통해, 진행하던 중 질문이 생겨 여쭙습니다. 문제점 : loginUser를 통해 로그인을 진행한 후 logoutUser을 통해 로그아웃을 한 뒤 로그인 창으로 돌아와 새로고침을 누르고 로그인을 하려고 하면 hocs에서 막히게 됩니다. 로그인 > 로그아웃 > 새로고침 > 재로그인(hocs 오류) 로그를 찍으며 확인을 해보니 첫 로그인 당시 로그 첫 로그인 성공 후 로그 로그아웃 후 새로고침 시 로그 여기서 문제가 발생합니다. recoil store에서 공유하고 있는 restoreAccessTokenLoadable 함수가 로그아웃 후 새로고침을 하면 undefined을 반환을 합니다. 이후 withauth에서도 promise가 반환되지 않아서 로그인권한 오류가 발생하고 있습니다. 현재 restoreAccessTokenLoadable 코드입니다 export const restoreAccessTokenLoadable = selector({ key: "restoreAccessTokenLoadable", get: async () => { const newAccessToken = await getAccessToken(); console.log(newAccessToken, "restoreaccess 결과입니다"); return newAccessToken; }, }); 해결 방법이 있을까요?? 혹시 몰라 다른 부분 코드도 첨부합니다 withauth (로그인체크권한) useEffect(() => { console.log("withauth가 실행되었습니다"); void aaa.toPromise().then((newAccessToken) => { console.log(newAccessToken, "withauth결과입니다"); console.log(aaa); if (newAccessToken === undefined) { alert("로그인 후 이용가능합니다."); void router.push("/section30/30-01-login-refreshtoken"); } }); }, []); apollo에서 useEffect부분 const [accessToken, setAccessToken] = useRecoilState(accessTokenState); const aaa = useRecoilValueLoadable(restoreAccessTokenLoadable); useEffect(() => { void aaa.toPromise().then((newAccessToken) => { setAccessToken(newAccessToken ?? ""); }); }, []); 입니다 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 차근차근 강의 따라가고 있는 수강생입니다 섹션 13. 10-02 강의를 듣고 궁금한 점이 생겨 글을 남깁니다 export interface IBoardWriteUIProps { onClickSubmit: (event: MouseEvent<HTMLButtonElement>) => void; onClickUpdate: (event: MouseEvent<HTMLButtonElement>) => void; ... } 강의에서는 위 두 함수의 매개변수를 지정해 주었습니다 export interface IBoardWriteUIProps { onClickSubmit: () => void; onClickUpdate: () => void; ... } 그런데 매개변수를 지정하지 않아도 오류가 없더라고요 const onClickSubmit = async () => { ... }; const onClickUpdate = async () => { ... }; 두 함수는 매개변수로 event를 받아오고 있지 않습니다 그래서 궁금한 점은 아래 2가지 입니다 매개변수를 지정한 이유 두 가지 경우 모두 오류가 나지 않는 이유 항상 감사합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션별 과제 정답코드는 어디에 있나요? 포트폴리오 말고요
미해결
실습으로 끝장내는 웹 크롤링과 웹 페이지 자동화 & 실전 활용
driver = webdriver.Chrome () 여기서 계속 오류가 나는데요. 혹시 최근에 바뀐게 있나요? 강의 내용 외 개인적인 실습 사이트의 질문은 답변이 제공되지 않습니다. 문제가 생긴 코드, 에러 메세지 등을 꼭 같이 올려주셔야 빠른 답변이 가능합니다. 코드를 이미지로 올려주시면 실행이 불가능하기 때문에 답변이 어렵습니다. 답변은 바로 제공되지 않을 수 있습니다. 실력 향상을 위해서는 직접 고민하고 검색해가며 해결하는 게 가장 좋습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 포트폴리오 작성 중 여러 방법을 시도해 보다 도저히 해결방법을 잘 모르겠어서 질문드립니다. 구현하고 싶은 것 : 오늘 본 상품 목록을 다른 페이지에서 구현 하는 것이 아닌 여러 페이지의 본문 영역 옆에 상시 뜨도록 설계 하는 것, recoil을 이용하지 않고 localStorage 를 이용하여 구현하는 것 입니다. 아래 사진은 현재 진행 과정 입니다. 아래는 현재 코드입니다 sidebar.tsx import { useEffect, useState } from "react"; import * as S from "./sidebar.style"; import type { IUseditem } from "../../../../commons/types/generated/types"; import { LikeFilled } from "@ant-design/icons"; import { getPrice } from "../../../../commons/libraries/price"; export default function SideBar(): JSX.Element { const [items, setItems] = useState<IUseditem[]>([]); useEffect(() => { const storedItems = localStorage.getItem("todaylist"); if (!storedItems) return; setItems(JSON.parse(storedItems)); }, []); return ( <S.SideBarWrapper> <S.SideBarTitle>오늘 본 상품</S.SideBarTitle> {items .filter((el) => el) .map((el) => ( <S.SideBarContents key={el._id}> <S.SideBarP> <LikeFilled style={{ color: "#ffd903" }} /> {el.pickedCount} </S.SideBarP> {el.images && ( <S.SidaBarImg src={`https://storage.googleapis.com/${el.images[0]}`} /> )} <S.SidebarDetail> <S.SideBarName>{el.name}</S.SideBarName> <S.SideBarRemarks>{el.remarks}</S.SideBarRemarks> <S.SideBarPrice>{getPrice(el.price)}</S.SideBarPrice> </S.SidebarDetail> </S.SideBarContents> ))} </S.SideBarWrapper> ); } 문제점 useEffect 부분에서 storedItems 가 업데이트 될 때마다, 리렌더링을 해주고 싶어, 종속성 배열에 items state를 넣으니 ⚠ Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 관련 오류가 뜹니다. 여러 방법을 시도해도 옳은 방법을 잘 모르겠어서 질문 남깁니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 설치하고 yarn dev 한 이후, yarn add --dev @types/react @types/node 을 통해 추가 설치 ? 를 진행하려고 보니 강사님은 아무 에러 없이 잘 진행 되는 반면에 저는 이러한 에러가 뜹니다... ㅠ
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
이전에는 잘 되었는데 faker로 더미데이터 사용 후에 다음과 같은 에러가 뜹니다! faker 버전 이슈를 보고 삭제 후 npm i -D faker@5 로 재설치했는데 오류가 해결되지 않았습니다ㅠ console.log 찍어본 postData의 타입이랑 에러메시지 입니다! 4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined } type : string type : function TypeError: postData.split is not a function at PostCardContent (C:\Users\pc\react-nodebird\prepare\front\.next\server\pages\index.js:1131:13) at processChild (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14) at resolve (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5) at ReactDOMServerRenderer.render (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435: 22) at ReactDOMServerRende rer.read (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29) at renderToString (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27) at Object.renderPage (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851) at Document.getInitialProps (C:\Users\pc\react-nodebird\prepare\front\.next\server\pages\_document.js:264:19) at loadGetInitialProps (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101) at renderToHTML (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142) PostCardContent.js 코드 중 의심스러운 부분입니다 const PostCardContent = ({ postData }) => ( <div> {postData.split(/(#[^\s#]+)/g).map((v, i) => { if (v.match(/(#[^\s#]+)/)) { return <Link href={`/hashtag/${v.slice(1)}`} key={i}><a>{v}</a></Link>; } return v; })} </div> ); PostCardContent.propTypes = { postData: PropTypes.string.isRequired, };
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
안녕하세요 조은님! 완강 후에 Data Fetching 관련해서 질문 드릴게 있어서 왔습니다. Q. Next 12에서는 정적인 페이지와 주기적으로 데이터 값이 바뀌어야 할 때 (SSG, SSR) 등 상황에 맞게 Data Fetching을 사용하고 있었는데 Next 13에서는 Server component 만으로 SSG와 SSR을 대체가 가능한걸까요? Q. 강의에서 데이터를 가져올 때 fetch를 사용하셨었는데 Server component에서는 fetch 말고 axios를 사용해도 상관없는지 궁금합니다. Q. 저는 아래와 같이 axios를 사용해서 Time 데이터를 가져왔는데 캐시 비우기 버튼을 누르지도 않았는데 새로고침 할 때 마다 초가 계속 바뀌더라구요(disabled cache 체크 안했습니다!) 그래서 fetch로 바꾸어서 해봤더니 강의에서 나온 것 처럼 잘 동작하고 있었습니다. 혹시 어떤 차이가 있는건지 궁금합니다. import customAxios from "./customAxios"; import { METHOD } from "@/type/common"; export const getTime = async (timeZone: string) => { const data = await customAxios( METHOD.GET, `https://timeapi.io/api/Time/current/zone?timeZone=${timeZone}`, { next: { tags: ["time"] } } ); return data; };
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 무게에서 - 120을 뺀 이유가 무엇인가요?