월 79,200원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션24 포폴 질문있습니다.
포트폴리오 리뷰 중 타이핑하지 않은 상태에서 등록하기를 누르면 입력란 밑에 빨간색에러 표시가 나는 코딩부분에 질문이 있습니다.선생님은function onChangeWriter (event) { setWriter(event.target.value) if(event.target.value != "") { setWriterError("") } };이런식으로 if란에 이벤트 핸들링 함수를 넣어줘서 처리하셨고, 저는function onChangeWriter (event) { setWriter(event.target.value) if(writer != "") { setWriterError("") } };writer자체를 넣어서 안에 값이 들어오면 에러가 사라지게 만들었는데요.선생님은 코드는 한 번의 타이핑으로 바로 반응해서 없어지는데 반면, 저의 코드로는 에러 표시가 없어지기 위해서는 제목란을 제외하고는 2번씩 입력해야 에러 표시가 없어집니다.중요하지는 않은 것 같지만 궁금해서 여쭤봅니다.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 event 자료형따라 쳤는데 오류가 나요
멘토님 따라 작성했는데 빨간 밑줄이 사라지지 않고있습니다 ㅠㅠ임포트도 했는데 저렇게하는게 아닌걸까요??... 오류메세지는 이렇게 뜹니다 vscode 껐다 켜도 동일하고..node_modules 와 yarn.lock삭제 후 재설치해도 동일합니다ㅜㅜ 문제가 뭐일까요
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 포트폴리오 과제1 질문
textarea를 적용시키니 칸을 줄이고 늘릴수 있는저런 요소가 생겼는데 못 없애나요?그리고 리액트에선 예전에Css를 다뤘던것 처럼 마우스커서로 색깔을 마음대로 선택 할수 없던데해결방법이 있나요?HTML:import { Wrapper, Project, Title, Label, Writer, Password, Contents, Address, WriterLabel, AddressNumber, AddressButton, YoutubeInput, InputWrapper, UserWrapper, TitleWrapper, ContentWrapper, AddressWrapper, YoutubeWrapper, ImageWrapper, UploadButton, UploadButtonText, SettingWrapper, RadioButton, RadioLabel, SubmitButton, } from "../../../styles/01-freeboard"; export default function EmotionPage() { // 여기는 자바스크립트 쓰는곳 return ( <Wrapper> <Project>게시물 등록</Project> <UserWrapper> <InputWrapper> <WriterLabel>작성자</WriterLabel> <Writer placeholder="이름을 적어주세요." /> </InputWrapper> <InputWrapper> <Label>비밀번호</Label> <Password type="password" placeholder="비밀번호를 작성해주세요." /> </InputWrapper> </UserWrapper> <TitleWrapper> <InputWrapper> <Label>제목</Label> <Title placeholder="제목을 작성해주세요." /> </InputWrapper> </TitleWrapper> <ContentWrapper> <InputWrapper> <Label>내용</Label> <Contents placeholder="내용을 작성해주세요." /> </InputWrapper> </ContentWrapper> <AddressWrapper> <InputWrapper> <Label>주소</Label> <AddressNumber placeholder="07250" />{" "} <AddressButton>우편번호 검색</AddressButton> <Address /> <Address /> </InputWrapper> </AddressWrapper> <YoutubeWrapper> <InputWrapper> <Label>유튜브</Label> <YoutubeInput placeholder="링크를 복사해주세요." /> </InputWrapper> </YoutubeWrapper> <ImageWrapper> <InputWrapper> <Label>사진 첨부</Label> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> </InputWrapper> </ImageWrapper> <SettingWrapper> <InputWrapper> <Label>메인 설정</Label> <RadioButton type="radio" name="radio_button" /> <RadioLabel>유튜브</RadioLabel> <RadioButton type="radio" name="radio_button" /> <RadioLabel>사진</RadioLabel> </InputWrapper> </SettingWrapper> <SubmitButton>등록하기</SubmitButton> </Wrapper> ); } Css: import styled from "@emotion/styled"; export const Wrapper = styled.div` margin: 50px; padding: 20px; width: 800px; /* border: 0.5px solid gray; */ box-shadow: 0px 0px 10px gray; display: flex; flex-direction: column; align-items: center; `; export const Project = styled.div` font-size: 34px; font-weight: bold; `; export const InputWrapper = styled.div``; export const Label = styled.div` font-size: 16px; font-weight: bold; margin-bottom: 10px; `; export const WriterLabel = styled.div` font-size: 16px; font-weight: 900; text-shadow: 2px 2px 2px gray; margin-bottom: 10px; `; export const UserWrapper = styled.div` display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Writer = styled.input` width: 380px; height: 30px; border: 1px solid #bdbdbd; `; export const Password = styled.input` width: 380px; height: 30px; border: 1px solid #bdbdbd; `; export const TitleWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Title = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; `; export const ContentWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Contents = styled.textarea` width: 100%; height: 300px; border: 1px solid #bdbdbd; `; export const AddressWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const AddressNumber = styled.input` width: 80px; height: 30px; border: 1px solid #bdbdbd; `; export const Address = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; margin-top: 20px; `; export const AddressButton = styled.button` background-color: black; color: white; height: 35px; cursor: pointer; `; export const YoutubeWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const YoutubeInput = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; `; export const ImageWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const UploadButton = styled.button` background-color: #bdbdbd; width: 75px; height: 75px; cursor: pointer; margin-right: 10px; `; export const UploadButtonText = styled.div` display: flex; flex-direction: column; `; export const SettingWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const RadioButton = styled.input` cursor: pointer; `; export const RadioLabel = styled.span` font-weight: 500; `; export const SubmitButton = styled.button` background-color: yellow; height: 60px; width: 140px; font-weight: bold; cursor: pointer; `;
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
state 에 대하여 질문있습니다.
const onChangeEmail = (event) => { console.log(event.target.value); setEmail(event.target.value); console.log("!@# ", email); if (email === "") { alert(); }위의 코드를 실행할경우가장 첫 입력시 아래와 같은 문제가 발생합니다.(이메일 입력란에 'ㅁ' 입력)첫번째 console.log envent.target.value는 정상적으로 출력되며두번째 console.log는 "!@#" 을 제외한 email이 출력되지 않습니다. "!@#"만 출력됨if문의 경우 공백으로 인식해서 true 동작하여 출력이 되고 있습니다.원인은 무엇인가요?추가로 event 의 문제인가 싶어onChange가 아닌 onKeyUp 을 사용 할 경우에는f12 개발 디버깅쪽 console 에 error 표시가 잔뜩 발생합니다.이유가 무엇인가요?==================================email input tag에 최초 입력 시 아래의 코드처럼 onChange 함수안에 지역변수 testb 에 할당하는 event.target.value 는 출력되지만state 에 할당된 email 은 한반작 늦은? 출력이 됩니다.ex) input box 'ㅁ' 입력 시 결과state email = '' 공백출력지역변수 testb = 'ㅁ' 출력const onChangeEmail = (event) => { let testb = event.target.value; alert(testb); console.log(event.target.value); setEmail(event.target.value); console.log("!@# ", email); 설명 부탁드립니다.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
함수 선언시 질문있습니다.
이 질문은 학습용임으로 사용목적에 대해서 답변을 구하는것은 아닙니다.function onChangePasword(e){}위와 같이 사용도 가능하지만const onChangeEmail = function (event) {}와 같이 익명함수로도 선언이 가능하자나요?질문코자 하는 내용은 아래와 같이 default 로 생성시 error 가 발생합니다.onChangeEmail = function (event) {}또한 화살표 함수를 사용시에도 동일한 문제가 발생합니다.const onChangeEmail = (event) => {} 정상onChangeEmail = (event) => {} error 이유가 뭔가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업 순서에 질문있습니다.
섹션1,2,3을 마친 학생입니다.섹션4인 react를 시작하다보니 버전도 안맞고 혼자 헤매다 보니까섹션23부터 다시 react파트부터 리뉴얼 되었더라구요섹션1,2,3을 마쳤다면섹션3~섹션22까지 뛰어넘고 23부터 들으면 되는건가요?그렇게 하는게 맞다면 진도에 의한 수료증은 어떻게 받을수 있나요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
react-hook-form으로 기본값 설정하기
안녕하세요 지금 section31과제를 진행하고 있습니다.제가 지금 useForm으로 포트폴리오 과제를 진행하고 있는데 초기값 설정하는 데 어려움이 있습니다현재 useForm이 가지고 있는 defalutValues속성으로 기본값을 설정하는데 console에서는 data값이 찍히는데 defaltValues에서는 undefined값으로 나옵니다.변수가 먼저 선언되고 값이 할당이 안되는 걸까요?useForm에서는 기본값을 어떻게 설정해야 하는걸까요?useForm을 사용하기 시작했는데, 점점 벅찬거같아요... 이제라도 input으로 변경해야할까요..export default function BoardWriteUI({isEdit, data, onSubmitCreate, onSubmitUpdate, onClickMoveToBack}) { console.log(data) const {register,watch, formState : {errors, isValid}, handleSubmit} = useForm({ mode : 'onSubmit', defaultValues : { writer : data?.fetchBoard.writer, password : "", title : data?.fetchBoard?.title, contents : data?.fetchBoard?.contents, } });
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
react기초 및 폴더구조 파일 문제
안내한 것 처럼 버전 확인하고 node modules 지운 다음 다시 설치해서 yarn dev를 실행했는데 안되는데 어디에서 틀린 지를 모르겠습니다..
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기능완성 후 새로고침 시 application 항목에 key value 값 사라져요
기능완성 후 새로고침 시 application 항목에 key value 값 사라지는데 새로고침시에도 key value 값이 유지되는방법이 있을까요
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
prettier 설정관련 질문입니다.
format on save 기능을 사용하면 저장 시에 자동으로 개행과 줄바꿈을 해줘서 잘 사용하고 있습니다. 그런데 짧은 코드는 오히려 개행을 하지 않고 한줄에 작성하는 것이 가독성이 좋은 것 같아서 한줄에 쓰고 싶은데 format on save에 체크가 되어있어서 한 줄에 입력하는 게 불가능하네요.그런데 강사님의 경우에는 if (true) { alert("안녕하세요") ; } 같은 짧은 코드의 경우에는 if (true) { alert("안녕하세요") ; } 처럼 한줄로 작성하고 저장해도 강제로 개행이 안되던데, 여쭤보고 싶은건강사님은 format on save를 off로 설정해놓으셨나요? 아니면 format on save를 on으로 설정해놓고, 저런 짧은 if문을 한줄에 다 입력할 수 있는 설정방법이 있을까요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
훈훈한 자바스크립트 강의 문제점
appendchild강의에서 addEventListener 로 넘어갈 때,const KeyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); } };위 코드에서const KeyCodeCheck = function () {if (window.event.keyCode === 13 && todoInput.value) {createTodo();}};로 아무런 설명없이 바뀌어 있네요. 이유를 설명해주세요.이거 외에도 아무 부연설명없이, 코드가 바뀌어 있는 경우가 매우 많습니다. 수정해서 다시 올려주세요
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트기초 yarn 설치 질문
*우분투안쓰고 윈도우로 이용중입니다. 질문1.강의자료 보면서 따라하는 중인데요.강의자료에 나온 화면과 다르게 저는 style.thirteen도 없고 삭제부분을 삭제하면오류가 많습니다. 마찬가지로 첫번째 div인 container가 저는 애초에 존재하지않고 <>형식으로 되어있는데따로 타이핑해서 만들어줘야하나요? 질문2:버전: 강의자료에 나온것 외에도 전부 no하는게 맞나요?잘따라가고 있는지 모르겠습니다 ㅠ 질문3:저는 yarn dev를 해서 페이지에 접속하니 컴파일 실패가 뜨네요.. 질문4:혹시나 powershell로 설치한게 문제인건가 싶어서 폴더를 다 삭제하고 재생성후gitBash를 사용해봤는데 yarn설치 명령어가 안먹히네요그리고 powershell에선 먹히던 기본 명령어들이 Gitbash에선 안먹힙니다어디서 부터 잘못된건지 막혀서 진도를 못나가고 있습니다. 도와주십쇼..+ 실무에서 설치할때는 이런일이 발생하지 않으려면 신경써야 하는 것들이어떤게 있을까요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그아웃 질문
로그아웃 버튼 클릭후에setAccessToken을통해 accessToken이 공백으로 바뀌고 로그아웃 mutation 결과값 true 반환까지 확인되는데쿠키의 refreshtoken 값이 사라지지않습니다ㅜㅜ도와주세요
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
D-Day강의 중에 오류가 있네요. 수정 좀 해줘요
훈훈한 자바스크립트 강의 중에 D-Day 사이트 만들기 강의가 있는데, 설명 복잡한 건 그렇다 쳐도, 최종적으로 코드에 오류가 있더라고요. 새로 고침을 하게 되면 사이트 로컬 스토리지 에서, 데이터가 사라져 있는 걸 볼 수가 있어요. 해결 방법 알려주세요.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
UPDATE_BOARD 400error
useForm 이용해서 하고있는데 update_board를 할때 계속 try에서 catch(error)로 넘어가네요 ㅠpresenter.jsimport * as S from "./BoardWriter.styles"; export default function BoardWriteUI(props) { return ( <S.Wrapper onSubmit={props.isEdit? props.handleSubmit(props.onClickUpdate, props.onInValid) : props.handleSubmit(props.onValid, props.onInValid)}> <S.Title>{props.isEdit? "게시글 수정": "게시글 등록"}</S.Title> <S.WriterWrapper> <S.InputWrapper> <S.Label>작성자</S.Label> <S.Writer {...props.register("writer", { validate : (value) => value ? true:"작성자를 작성해주세요."} )} onChange={e => props.onChangeWriter(e)} type="text" placeholder="이름을 적어주세요."/> <S.Error>{props.errors.writer?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>비밀번호</S.Label> <S.Password {...props.register("password", { validate : (value) => value? true: "비밀번호를 작성해주세요."} )} onChange={e => props.onChangePassword(e)} type="password" placeholder="비밀번호를 작성해주세요." /> <S.Error>{props.errors.password?.message}</S.Error> </S.InputWrapper> </S.WriterWrapper> <S.InputWrapper> <S.Label>제목</S.Label> <S.Subject {...props.register("title", { validate : (value) => value? true: "제목을 작성해주세요."} )} onChange = {e => props.onChangeTitle(e)} type="text" placeholder="제목을 작성해주세요." /> <S.Error>{props.errors.title?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>내용</S.Label> <S.Contents {...props.register("contents", { validate : (value) => value? true: "내용을 작성해주세요."} )} onChange={e => props.onChangeContents(e)} placeholder="내용을 작성해주세요." /> <S.Error>{props.errors.contents?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>주소</S.Label> <S.ZipcodeWrapper> <S.Zipcode {...props.register("boardAddress")} placeholder="07250" /> <S.SearchButton>우편번호 검색</S.SearchButton> </S.ZipcodeWrapper> <S.Address /> <S.Address /> </S.InputWrapper> <S.InputWrapper> <S.Label>유튜브</S.Label> <S.Youtube {...props.register("youtubeUrl")} placeholder="링크를 복사해주세요." /> </S.InputWrapper> <S.ImageWrapper> <S.Label>사진첨부</S.Label> <S.UploadButton>+</S.UploadButton> <S.UploadButton>+</S.UploadButton> <S.UploadButton>+</S.UploadButton> </S.ImageWrapper> <S.OptionWrapper> <S.Label>메인설정</S.Label> <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.OptionWrapper> <S.ButtonWrapper> <S.SubmitButton isActive={props.isActive} type="submit">{props.isEdit? "수정하기": "등록하기"}</S.SubmitButton> </S.ButtonWrapper> </S.Wrapper> ); } quires.jsimport { gql } from '@apollo/client' export const CREATE_BOARD = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput : $createBoardInput){ _id } } ` export const UPDATE_BOARD = gql` mutation updateBoard($updateBoardInput: updateBoardInput!, $password: String, $boardId: ID!) { updateBoard(updateBoardInput: $updateBoardInput, password: $password, boardId: $boardId) { _id } } `container.jsimport { useState } from 'react' import { useForm } from 'react-hook-form'; import { useRouter } from 'next/router'; import { useMutation } from '@apollo/client' import BoardWriteUI from './BoardWriter.presenter'; import { CREATE_BOARD, UPDATE_BOARD } from './BoardWriter.queries'; export default function BoardsWriteContainer(props) { const router = useRouter() const [isActive, setIsActive] = useState(true) const [createBoard] = useMutation(CREATE_BOARD) const [updateBoard] = useMutation(UPDATE_BOARD) const { register, watch, handleSubmit, formState: { errors } } = useForm(); const onChangeWriter = (e) => { e.target.value && watch("password") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangePassword = (e) => { e.target.value && watch("writer") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangeTitle = (e) => { e.target.value && watch("password") && watch("writer") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangeContents = (e) => { e.target.value && watch("password") && watch("title") && watch("writer") ? setIsActive(false) : setIsActive(true) } const onValid = async (data) => { try { const result = await createBoard({ variables: { createBoardInput: { writer: data.writer, title: data.title, password: data.password, contents: data.contents, } } }) console.log(result.data.createBoard._id) alert("게시물이 정상적으로 등록되었습니다.") router.push(`/boards/${result.data.createBoard._id}`) } catch(error) { alert(error.message) } } const onInValid = (error) => { console.log("에러입니다", error) } const onClickUpdate = async (data) => { try { const result = await updateBoard({ variables: { updateBoardInput : { title: data.title, contents: data.contents }, password : data.password, boardId : router.query.boardid, } }) console.log(result) // router.push(`/boards/${router.query.boadid}`) } catch(error) { console.log(error) } } return <BoardWriteUI onValid = {onValid} oninValid = {onInValid} register = {register} handleSubmit = {handleSubmit} errors = {errors} onChangeContents = {onChangeContents} onChangeTitle = {onChangeTitle} onChangePassword = {onChangePassword} onChangeWriter = {onChangeWriter} onClickUpdate = {onClickUpdate} isActive={isActive} isEdit={props.isEdit} /> }
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fetchUserLoggedIn가 안됩니다 도와주세요
강의를 따라 순서대로 따라했는데마지막에 cannot read property _id 오류가뜹니다ㅠㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강사님 질문드립니다.
현재 저는 국비학원을 마치고 취업을 준비중 현실을 맞닥들이고 다시 공부를 시작하였습니다. 국비는java를 기반으로 수료했지만 저의 적성이 백엔드보다는 프론트가 맞을 것 같아 본 강의를 구매했습니다. 기본적인 html,css는 이해하고있지만 js는 다소 약한 부분이있습니다.강의를 들으려고 보니 새로 시작한 사람은 새셕23부터 시작하면 된다고 설명이 되어있길래 살펴봤더니 바로 리액트부터 시작하는 것 같았더라구요. js가 다소 약하더라도 따라가는데 어려움이 없을지 질문 드립니다.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Quiz 코드
Quiz에 관한 코드는 따로 없을까요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground createProfile error
오타있는지도 확인하고 껐다가 다시 실행시켜봐도 안됩니다 ㅠ 어떻게 해결해야 하나요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Number 로 변환
const { data } = useQuery(FETCH_BOARD, { // $: { number: 1 }, // variables: { number: Number(router.query.qqq) }, variables: { number: Number(router.query.number) }, }); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, });포트폴리오에서는 router.query 부분을 문자인데 숫자로 왜 변형을 안 시키는 걸까요 ?05-04 수업에서는 router.query.qqq 를 문자니까 Number 로 변환시켜주어 포트폴리오에서도 똑같이 했는데 안되더라고요!