173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
apoll-cilent 관련된 질문입니다. 질문1. 지금 강의에서는 api url이 한개만 있을 경우인데, 경로가 다 다른 경우는 어떻게 연결을 하나요?? client를 여러개 만들어서 porivder에 담아줘야하나요?? 질문2. provider는 꼭 app.jsx를 감싸야하나요?? 아니면 내부 컴토넌트안에서 원하는 컴포넌트를 provider로 감싸도 동일하게 사용이 가능한가요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
31-2 포트폴리오 과제를 진행하다가 막혀서 질문드려요!! 다른기능들은 이미 해봤던내용의 복습인것같아 잘진행을 하고있던 와중에 별점 기능을 구현하는데 어려움이 좀 있네요. 처음 만들어보는 기능이라 혼자 만들어보다가 잘진행이 되지않아 레퍼런스 코드를 한번보고싶은데요 해당 과제 세션에 링크된 레퍼런스코드에는 그기능이 따로 없는것같아서 여쭈어봅니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의에 나온 대로 아무리 해도 계속 서버 에러가 뜨네요. 이전에 질문했던 codegen 까지 설치 완료 해서 제대로 작동이 되는데 이 페이지만 실행시키면 계속 오류가 발생합니다. 저가 뭘 잘못한 걸까요? import { useQuery, gql } from "@apollo/client"; import type { IQuery, IQueryFetchBoardArgs, } from "../../../src/commons/types/generated/types"; const FETCH_BOARDS = gql` query { fetchBoards { _id writer title contents } } `; export default function StaticRoutingMovedPage() { const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardArgs>( FETCH_BOARDS ); console.log(data?.fetchBoards); return ( <div> {data?.fetchBoards.map((el) => ( <div key={el._id}> <span style={{ margin: "10px" }}>{el.title}</span> <span style={{ margin: "10px" }}>{el.writer}</span> </div> ))} </div> ); }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강사님! 제가 테스트로 boards 페이지는 로그인이 되어 있어야 들어갈 수 있게 만들면서 복습하는 와중에 궁금증이 생겨 글 작성하게 됐습니다. 위 사진처럼 로그인 체크해서 로그인이 안되어있으면 로그인 페이지로 이동하게 만들었는데요. 로그인이 안되어있을 경우 boards 소스에 있는 api 통신 자체를 못하게 막을 수 있는 방법이 있을까요 ? 현재 로그인이 안되어있어서 로그인 페이지로 이동이 되지만 boards 코드에 있는 API 요청이 아래 사진처럼 날라가고 있습니다. 추가로 로그인 성공하고 boards 페이지로 이동하는데 위 사진처럼 refreshToken이 있음에도 getAccressToken 함수 리턴값이 undefined 이고 새로고침을 해야 boards 페이지에 접근이 가능해집니다... ㅠㅠ 왜 이러는지 알려주세요!!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의에서 소개되는 노션(자료)와 실제 노션 링크 구조가 많이 다른데,,,최신화좀 해주시던지,,,정리를 좀 해주세요;;; 깃 소스를 받으려 해도 뭐 찾을 수도 없고;; 강의 아래 설명에 적어주셔도 될거같구요,,, 피그마 이용관련해서도 뭔가 어디에 볼 수 있게 적어놓아주세요;; 필요한 내용만 들으려고 하는데,,, 뭐 전부를 들어야지 해당 내용들을 따라갈수 있는건가요,,,???
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
에러 메세지 입니다. 01-02-emotion 폴더를 생성하여 강의 내용과 똑같이 작성하여 yarn dev로 실행하였는데 오류가 발생이 되어서 질문을 드립니다 .ㅠㅠ 해당 오류로 구글 검색을 해보니 공유캐시 파일을 지우고 다시 설치해보라는 글이 있어서 해보았는데도 오류가 고쳐지지 않아서 질문을 드립니다. ㅠㅠ 해당 오류는 링크의 블로그를 보고 시도해보았습니다. https://chlolisher.tistory.com/174 ㅠㅠ 도와주세요
미해결
Do it! 알고리즘 코딩테스트 with Python
올려주신 코드로 공부하고 백준에 업로드 해 본 결과 시간 초과가 뜨는데, 시간 초과가 되지 않게 하려면 어떻게 수정할 수 있을까요 ?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요 대댓글 만들고있는데요 fetchUseditemQuestionAnswers 에 return 값으로 받아오는 useditemQuestion 이게 null이라고 하는데요 혹시 이거 서버에서 문제있는거 같아서요 혹시 봐주실수있으신가요? ※ 대댓글 작성까지는 잘가는데 저 값을 받아와야하는데 null값이라고 하네요...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fetchBoards 인자로 search와 page가 있는데 search에 어떤 내용을 입력해야하는 지 모르겠습니다. 그리고 page라는 int형 값은 어디서 얻는지도 모르겠는데 알 수 있을까요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요. 프론트쪽은 처음이라 하나 하나 해보고 있는데요. 카카오 맵으로 구현 하고 싶어서 https://github.com/JaeSeoKim/react-kakao-maps-sdk 라이브러르를 사용해서 naver map 사용하는 부분을 고쳐서 동작 시켰는데요. strategy="afterInteractive" , "beforeInteractive" 로 하면 TypeError: undefined is not an object (evaluating 'new window.kakao.maps') 에러가 나요. 네이버맵 대신 카카오맵을 사용하고 싶은데요. 어떻게 해야할까요? 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
package.json 에 "generate": "graphql-codegen" 이라는 명령어가 없어서 작동을 제대로 안 하는거 같은데 혹시 이 문제는 뭘 어떤 걸 설치 해야 될까요? graphql 도 다시 설치해보고 인터넷에서 찾은 것들로 설치를 해봐도 문제가 해결이 안됩니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰 중 타이핑하지 않은 상태에서 등록하기를 누르면 입력란 밑에 빨간색에러 표시가 나는 코딩부분에 질문이 있습니다. 선생님은 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번씩 입력해야 에러 표시가 없어집니다. 중요하지는 않은 것 같지만 궁금해서 여쭤봅니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
멘토님 따라 작성했는데 빨간 밑줄이 사라지지 않고있습니다 ㅠㅠ 임포트도 했는데 저렇게하는게 아닌걸까요??... 오류메세지는 이렇게 뜹니다 vscode 껐다 켜도 동일하고.. node_modules 와 yarn.lock삭제 후 재설치해도 동일합니다ㅜㅜ 문제가 뭐일까요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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; `;
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 이유가 뭔가요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요! 궁금한게 있어서 질문드려요 ㅎㅎ 현업에서 next version 12.3.4 를 쓰고 있고 next/image를 사용해서 이미지를 화면에 보여주려고 하고 있는데 일반 img 태그를 쓸 때보다 화질이 안좋습니다.. 어떤 부분을 개선해야 할까요? 또한 next/image를 쓰면 이미지 최적화 및 lazy loading을 자동으로 지원한다고 했는데, priority를 설정 해주지 않으면 이미지가 늦게 로드 되고 lazy loading은 layout 옵션을 설정해주지 않으면 안되더라구요! 구 버전은 자동으로 지원해주지 않는걸까요? 아래 처럼 쓰고 있습니다. "next/future/image" "next/image" 두개 다 쓰고 있습니다! import Image from 'next/future/image'; <Image src="" alt="" width={320} height={395} quality={100} />
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션1,2,3을 마친 학생입니다. 섹션4인 react를 시작하다보니 버전도 안맞고 혼자 헤매다 보니까 섹션23부터 다시 react파트부터 리뉴얼 되었더라구요 섹션1,2,3을 마쳤다면 섹션3~섹션22까지 뛰어넘고 23부터 들으면 되는건가요? 그렇게 하는게 맞다면 진도에 의한 수료증은 어떻게 받을수 있나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 지금 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, } });
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안내한 것 처럼 버전 확인하고 node modules 지운 다음 다시 설치해서 yarn dev를 실행했는데 안되는데 어디에서 틀린 지를 모르겠습니다..
