172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자바스크립트 함수가 조금 어려운데 함수는 그냥 관련된 코드들을 작성할 때 사용하나요? 예를 들어 input으로 어떠한걸 한다면 input 함수를 만들어서 이 함수안에는 input과 관련된 코드들을 작성한다고 보면되는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그리드 부분 영상에서 헷갈리는 부분이 있습니다. 그리드 강의 영상에는 밑에 이미지처럼 grid-column: 1 / 3 부분이 첫번째 라인에서 시작해서 3번라인에서 끝난다고 하는데 사이부분까지 해서 4개의 라인이 되서 grid-column: 1 / 3이 아니라 1 / 4 가 아닌가요? 혹시 몰라 노션을 보니 노션은 1 / 4라고 되어있던데 뭐가 맞는 것인지 너무 헷갈립니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
현재 next.js 를 생성시킨후, 서버 start를 시킨후, 화면을 수정하면, 화면이 리로딩되고 있지 않습니다. 계속 새로 빌드를 해야지만, 화면 소스가 바꼈을 경우, 리로딩이 되는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 css에서 calc부분에 대해 강의를 보고 있는데 궁금한 점이 처음부터 계산해서 한번에 값을 적으면 되지 왜 calc(100% - 70px) 이런식으로 하는지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 는 없습니다. 그리곳 eslint 설치시 첫 옵션 3가시 선택(강제로 고처주는옵션) 3번째 옵션도 없습니다. 2가지만 나오네요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
사이트에 연결할 수 없다라고 나옵니다.. 혹시 몰라 5000/qqq도 해봤는데.. 액세스 거부로 나오구요. 방화벽도 꺼져있습니다..ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import { Modal } from "antd"; import DaumPostcodeEmbed from "react-daum-postcode"; import * as S from "./BoardWrite.style"; import UploadImage from "../../../commons/uploadImage/uploadImage.container"; import { v4 as uuidv4 } from "uuid"; import { useBoard } from "../../../commons/hooks/customs/useBoard"; import { useCheckedId } from "../../../commons/hooks/customs/useCheckedId"; import { useForm } from "react-hook-form"; import { useToggle } from "../../../commons/hooks/customs/useToggle"; import { useEffect, useState } from "react"; import type { IBoardWriteProps } from "./BoardWrite.types"; import { useAuth } from "../../../commons/hooks/customs/useAuth"; export interface Iform { writer: string; password: string; title: string; contents: string; boardAddress: { zipcode: string; address: string; addressDetail: string; }; youtubeUrl: string; images: string[]; } export default function BoardWrite(props: IBoardWriteProps): JSX.Element { useAuth(); const { id } = useCheckedId("boardId"); const { onClickWrite, onClickEdit, onChangePassword } = useBoard({ boardId: id, }); const [files, setFiles] = useState(["", "", ""]); // const [isActive] = useToggle(); const [isOpenModal, modalToggle] = useToggle(); // 게시글 작성 안했을시 오류 보여주는 state const [Error] = useState(""); const { register, handleSubmit, setValue } = useForm<Iform>(); useEffect(() => { if (props.data) { setValue("writer", props.data.fetchBoard.writer ?? ""); setValue("title", props.data.fetchBoard.title ?? ""); setValue("contents", props.data.fetchBoard.contents ?? ""); setValue( "boardAddress.zipcode", props.data.fetchBoard.boardAddress?.zipcode ?? "" ); setValue( "boardAddress.address", props.data.fetchBoard.boardAddress?.address ?? "" ); setValue( "boardAddress.addressDetail", props.data.fetchBoard.boardAddress?.addressDetail ?? "" ); setValue("images", props.data.fetchBoard.images ?? ["", "", ""]); } const images = props.data?.fetchBoard.images; if (images !== undefined && images !== null) setFiles([...images]); }, [props.data]); const onChangeFiles = (file: string, index: number): void => { // file값은 url값 index는 해당하는 number값. const newFiles = [...files]; newFiles[index] = file; setFiles(newFiles); setValue("images", newFiles); }; return ( <S.Wrapper> <S.BoardTitle>게시글 {props.isEdit ? "수정" : "등록"}</S.BoardTitle> <S.WriterSection> <S.HalfSection> <S.BoardLabel>작성자</S.BoardLabel> <S.BoardInput type="text" defaultValue={props.data?.fetchBoard.writer ?? ""} placeholder="작성자를 입력해주세요" {...register("writer")} /> <S.Error>{Error}</S.Error> </S.HalfSection> <S.HalfSection> <S.BoardLabel>비밀번호</S.BoardLabel> <S.BoardInput type="password" placeholder="비밀번호를 입력해주세요." {...register("password")} onChange={onChangePassword} /> <S.Error>{Error}</S.Error> </S.HalfSection> </S.WriterSection> <S.Section> <S.BoardLabel>제목</S.BoardLabel> <S.BoardInput type="text" placeholder="제목을 입력해주세요" {...register("title")} /> <S.Error>{Error}</S.Error> </S.Section> <S.Section> <S.BoardLabel>내용</S.BoardLabel> <S.BoardContents id="title" placeholder="내용을 입력해주세요" {...register("contents")} ></S.BoardContents> <S.Error>{Error}</S.Error> </S.Section> <S.Section> <S.BoardLabel>주소</S.BoardLabel> <S.ZipCodeWrapper> <S.ZipCodeInput placeholder="07725" readOnly {...register("boardAddress.zipcode")} /> <S.ZipCodeButton onClick={modalToggle}> 우편번호 검색 {/* 모달창의 state를 받아와서 true라면 모달창을 열어준다. */} {isOpenModal && ( <Modal open={isOpenModal}> <DaumPostcodeEmbed onComplete={(data) => { setValue("boardAddress.zipcode", data.zonecode); setValue("boardAddress.address", data.address); modalToggle(); }} /> </Modal> )} </S.ZipCodeButton> </S.ZipCodeWrapper> <S.Address readOnly {...register("boardAddress.address")} /> <S.Address type="text" placeholder="상세주소를 입력해주세요" {...register("boardAddress.addressDetail")} /> </S.Section> <S.Section> <S.BoardLabel>유튜브</S.BoardLabel> <S.BoardInput type="text" placeholder="링크를 복사해주세요" {...register("youtubeUrl")} /> </S.Section> <S.Section> <S.BoardLabel>사진 첨부</S.BoardLabel> {/* 이미지 업로드 컴포넌트 분리 */} <S.ImageWrapper> {files.map((el, index) => ( <UploadImage key={uuidv4()} files={el} // 여기로 들어온 el값은 ""값 기본값이기 때문에 index={index} onChangeFiles={onChangeFiles} /> ))} </S.ImageWrapper> </S.Section> <S.Section> <S.BoardLabel>메인 설정</S.BoardLabel> <S.RadioButton type="radio" id="youtube" name="radio-button" /> <S.RadioLabel htmlFor="youtube">유튜브</S.RadioLabel> <S.RadioButton type="radio" id="image" name="radio-button" /> <S.RadioLabel htmlFor="image">사진</S.RadioLabel> </S.Section> <S.RegistButton onClick={handleSubmit(props.isEdit ? onClickEdit : onClickWrite)} isEdit={props.isEdit} > {props.isEdit ? "수정" : "등록"}하기 </S.RegistButton> </S.Wrapper> ); } 포트폴리오 리펙토링을 진행하다가 useForm의 defaultValue를 사용할때 텍스트 데이터는 잘 들어오다가 modal창의 주소 데이터나 images 배열은 제대로 들어오지 않아서 방법을 찾다가 setValue를 이용해서 값을 넣어주는 방법이 있어서 이렇게 작성해봤는데 useEffect를 이용해서 만들어봤는데 setValue는 setState와 같은 기능을 하는것같아서 이런식으로하면 리렌더링의 문제가 없는지 궁금합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제가 한 final 과제 코드와 정답 코드를 비교해보고 싶은데 final 정답 코드가 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 섹션 04-05-graphql-mutation-product 따라하고 있는데 도중에 저런 에러 메세지가 떴습니다. 디버깅 하려고 해도 Network 부분에 message 부분이 안 뜨네요ㅠ 검색해보니 쿠키 및 인터넷 기록 삭제해보라고 나오는데.. 삭제해도 해결이 안 되고요ㅠㅠ 어떻게 해야 해결될까요? 도움 부탁드립니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 코드는 다 처리되고 화면에 반영되는데, 노란 부분만 그냥 건너뛰어져요. 강의 영상 코드와 여러번 비교하며 그대로 타이핑 했는데요 ㅠ 아에 처리도 안되고 그냥 건너뛰어져요 ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
내장함수 리뷰 강의에서 let isStarted = false 이 부분을 작성해주는 이유와 let timer 를 해서 setInterval 앞에 timer를 붙여 재할당부분 그리고, clearInterval(timer) 이 부분에 대해 강의를 여러번 봐도 설명이 조금 어렵더라구요. 조금 쉽게 설명부탁드리겠습니다 ^^
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
"devDependencies": { "@types/node": "^17.0.2", "@types/react": "^17.0.2", "typescript": "^4.9.4" } 이렇게 강사님과 버젼을 맞췄음에도 불구하고 yarn dev 가 실행되지 않습니다. 터미널에서 권장한 방법으로 yarn add --dev @types/react 를 입력하면 "devDependencies": { "@types/node": "^17.0.2", "@types/react": "^18.3.1", "typescript": "^4.9.4" } 이렇게 돌아가버립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자꾸 저 부분이 빠져나가서 도대체 이유를 모르겠습니다. 강사 님 코드를 똑같이 붙여넣기 해도 똑같은 결과가 나옵니다 참 이상 한 거는 InputWrapper안에 Address를 하나를 지우면 올바르게 가운데 출력이 됩니다. 코드는 강사님꺼랑 완전 똑같은데 결과가 왜 이렇게 나오는지 궁금합니다. 아무리 생각해도 똑같이 InputWrapper안에 있으면 잘 나와야 하는데 이유를 모르겠습니다. 아래는 <Address />를 하나 지웠을 경우 입니다. 또한 위에 정렬이 안된 부분도 WriterWrapper 안에 width = 100%를 지우면 정렬이 됩니다. 도대체 왜 이 두 요소만 다르게 출력 되는지 도저히 모르겠습니다.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요!! 과제 완료해서 피드백 부탁드리고자 올렸습니다! 앞으로 잘 부탁 드립니당~ <html> <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html> <css> * { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
플레이 그라운드에서 스크랩 해오면 코드에서 인식이 안돼는것 같은데 원인을 못찾겠습니다 ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 오늘 이 프론트엔드 부트캠프 수업을 결제해서 시작했는데 노션 수업자료를 준다라고 알고 있는데 이 노션 수업자료는 어디서 받아보면 되나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 추가 질문 달았는데 답변이 안 달려서 따로 올립니다. 섹션 7 학습 중 React dom 설치하고 로컬 서버 열었더니 이런 오류 메시지가 뜹니다. 대강 버전이 안 맞는다는 것 같은데 해결 방법을 모르겠습니다. 이거 답변 기다리느라 일주일 넘게 진도를 나가지 못하고 있습니다. 조속한 해결 부탁 드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql-codegen 설치중에 에러가 계속 나서 node-module 과 yarn.lock 을 삭제 한후 다시 yarn install 실행 후 yarn add --dev typescript @graphql-codegen/cli 에러가 났습니다 내친구 쳇에게 물어봤더니 제가 한거처럼 하라고 하네요 매번 환경설정시 긴장의 연속!!! 왜이러는 걸까요?? 혹시 yarn add -D typescript ts-node @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher 요걸 해줘야되는지 ?? :~/codecamp/class$ yarn add --dev typescript @graphql-codegen/cli yarn add v1.22.22 [1/4] Resolving packages... error AggregateError at internalConnectMultiple (node:net:1102:18) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, 섹션 7 듣고 있습니다. Apollo-Client를 설치하고 yarn dev 실행하니 저렇게 뜨네요. 해당 파일을 지우거나 해도 이번엔 그 파일이 없다는 이유로 에러가 뜹니다. Node.modules랑 package.lock.json 삭제 후 재설치해도 똑같고요. 조속한 해결 부탁 드리겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
//section05/05-05-dynamic-routing-board-mutaton import { 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 [myFunction] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { try { // 코드 시도하다 실패하면 catch로 넘어감 const result = await myFunction({ variables: { //variables === $ 역할을 함. 그렇다고 여기선 $를 쓰면 안됨 writer: "훈이", title: "안녕하세요", contents: "반갑습니다.", }, }); console.log(result); console.log(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> </> ); } //section05/05-05-dynamic-routing-board-mutation-moved/[number] import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; // 폴더 [qqq] 대괄호로 감 싸놓으면 폴더가 변수가됨 const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { 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) }, //graphql fetchBoard에 자료가 없거나 null이면 오류가 뜸 }); console.log(data); return ( <> <div> {router.query.number}번 게시글 </div> <div>작성자 : {data?.fetchBoard?.writer}</div> <div>제목 : {data?.fetchBoard?.title}</div> <div>내용 : {data?.fetchBoard?.contents}</div> {/* 자료가 없거나 null이 뜨면 fetchBoard에 옵셔널체이닝('?' 자료가 오면 다시 리 렌더링 해줌) 붙이기 */} </> ); } 게시물을 정상적으로 잘 등록이 됩니다 플레이그라운드에서 fetchboard 조회를 해봐도 잘 나옵니다. 네트워크 탭에 들어가도 아무것도 안나오고 콘솔에는 그저 on-demand-entries-client.js:86 GET http://localhost:3000/section05/05-05-dynamic-routing-board-mutation-moved/23131 404 (Not Found) 뭐가 문제일까요?
