월 79,200원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
카카오맵 이 출력이 안되요
window.kakao에 underfined로 나와요...
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이벤트 위임 관련 질문드려요!
안녕하세요!이벤트 위임이란 이벤트 버블링을 이용하여 상위 태그에 이벤트 핸들러를 할당하여 하위 태그에서 중복되는 이벤트들을 없앨 수 있다. 이 과정에서 원치 않은 이벤트 버블링를 막기 위해서는 event.stopPropagation() 함수를 사용해야 한다. 라고 이해했습니다.이벤트 위임 관련해서 구글링 해보니, 구현 방식에 있어서 자바스크립트와 리액트에서 차이가 있다고 보았는데 자료들이 부정확하고 이해하기 어려워서 질문드립니다. 리액트와 자바스크립트에서 이벤트 버블링 구현시 어떤 차이가 있으며 그 이유와 원리에 대해 설명 부탁드립니다..!항상 좋은 강의 감사드립니다이벤트 위임 관련 아래 링크 첨부합니다.https://github.com/facebook/react/issues/13635https://github.com/facebook/react/issues/13625
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이벤트 핸들러 관련 질문드려요!
안녕하세요! 이벤트처리 함수 관련해서 질문드립니다.현재는 event를 넘겨서 처리하고 있다보니 currentTaget이니 target이니 신경 쓸 것이 많은데, <div onClick(() => onClickAlert(el.writer)} > 이렇게 바로 id의 값을 바인딩시켜줘도 되지 않나요?혹시 수업에서와 같이 <div id={el.writer} onClick={onClickAlert}> id 속성을 부여하고 이를 onClickAlert에서 event를 받아서 처리해야만 하는 상황이나 위와 같이 했을 때의 이점이 있는지 궁금합니다!항상 좋은 강의 감사드려요!
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section8 퀴즈 에러 질문입니다
안녕하세요, section8 퀴즈를 푸는 중 에러가 계속 해결되지 않아 글을 남기게 되었습니다.글 작성 후 상품 id를 가지고 상세 화면으로 넘어오는 것 까지 정상적으로 이루어지는데,상세 화면에서 정보를 불러오지 못하고 에러가 발생하고 있습니다.아래 코드와 발생하는 에러 첨부하였습니다.혹시 제가 어떤 부분을 잘못만들어서 에러가 나는지 알 수 있을까요?? import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; const FETCH_PRODUCT = gql` query fetchProduct($id: ID){ fetchProduct(productId:$id){ _id seller name detail price } }` export default function ProductView(){ const router = useRouter(); const {data} = useQuery(FETCH_PRODUCT, { variables: {productId: router.query.number} }) console.log(data) return( <div>{router.query.number} 상품명 {data.fetchProduct.seller} 판매자 {data.fetchProduct.detail} </div> ) }
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이거 배우면은 카페24를 자유자제로 쇼핑몰을 꾸밀 수 있나요?
이거 배우면은 카페24를 자유자제로 쇼핑몰을 꾸밀 수 있나요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
모바일의 경우 리디렉션에 대해 궁금증이 있습니다.
포트원 개발자 센터를 보면, 모바일의 경우 리디렉션을 하면서 쿼리스트링으로 imp_uid 등등의 데이터를 붙여서 보내주는걸로 보입니다. 해당 경우 리코일데이터를 비롯한 모든 데이터가 초기화 되지 않나요? 그렇다면, 로그인 정보를 비롯한 이런저런 데이터들은 어떻게 유지하고 있나요?로컬스토리지나 세션스토리지에 있는 엑세스토큰등을 이용해 아예 새롭게 데이터를 불러와야 하는걸까요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
newaccessToken 질문드립니다
만약에 지금 발급된 accessToken 이 만료되지 않은 상황이라면 해당 강의에서의 aaa.toPromise().then((newAccessToekn) =>{}) 함수 실행시에 newAccessToken 이 발급되지 않는 걸까요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업 정답코드좀 알려주세요
이부분 이거 말고도 소과제 있는 부분 전부 다 정답코드 어디에 있나요? 아무리 찾아도 안나와요 자세한 경로좀 알려주세요
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 13 대댓글 과제 관련 질문
안녕하세요 과제로 받은 자유게시판 대댓글 기능 구현과 관련한 질문이 있어 글 남깁니다 우선 포트폴리오 과제를 진행할 때 사용하는 플레이그라운드 주소는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 값
15:24 초에 createBoard 값으로 받은 result 값을콘솔에 찍어보면data.createBoard 값에 저장된 값이_typename , _id 값 두개만 보이는데백엔드 API 설계 당시에 뮤테이션의 리턴값으로 저 2개의 ㄱ값만 리턴하도록 설정되어 있는 건가요? 아님 요약 정보만 추려서 보여주는 건가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
route 53 질문드립니다
s3 를 다음과 같이 만들었는데 다음과 같이 별칭에서 나오지 않는데 어떻게 해야되나요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
도메인을 구입하지 않으면 해당 실습은 못하는 건가요?
실습을 위한 아무 도메인을 구매하면 되는지 궁금해서 질문드립니다
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인시 hocs 질문
안녕하세요. 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 강의 질문
안녕하세요 차근차근 강의 따라가고 있는 수강생입니다섹션 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가지 입니다매개변수를 지정한 이유두 가지 경우 모두 오류가 나지 않는 이유항상 감사합니다
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션별 과제 정답코드
섹션별 과제 정답코드는 어디에 있나요? 포트폴리오 말고요
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 관련 질문 - 오늘 본 상품
안녕하세요. 포트폴리오 작성 중 여러 방법을 시도해 보다 도저히 해결방법을 잘 모르겠어서 질문드립니다.구현하고 싶은 것 : 오늘 본 상품 목록을 다른 페이지에서 구현 하는 것이 아닌 여러 페이지의 본문 영역 옆에 상시 뜨도록 설계 하는 것, 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 을 통해추가 설치 ? 를 진행하려고 보니 강사님은 아무 에러 없이 잘 진행 되는 반면에 저는 이러한 에러가 뜹니다... ㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
.indexOf 메소드 사용 질문
안녕하세요, indexOf 메소드를 사용하다가 -1 값이 변환되었습니다. 파이썬에서는 인덱스가 -1이라면 맨마지막에 있는 인덱스 순서를 의미하는데 자바스크립트는 의미가 다른가요?자바스크립트에서 가지는 '-1'의 의미가 궁금합니다. 코드를 보시면 제가 indexOf 메소드 값 안에 오타를 넣었습니다.오류가 날 줄 알았는데 오타의 인덱스 값이 -1이 반환되어서 -1 값이 나온 이유에 대해 설명 부탁드립니다. 감사합니다. 수업 잘 듣고 있습니다. :)
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
next export 질문있습니다
next 14 버전부터 next export 가 없어지고 next.config.js 파일에서 output: "export" 로 대체되었다는데 이대로 진행해도 문제 없을까요?