묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
혹시 강의 중에 git clone 말씀하시는데, git 주소를 좀 알수 있을까요?
혹시 강의 중에 git clone 말씀하시는데, git 주소를 좀 알수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 적용안됨
선생님이 설명하신 것처럼 따라서 했는데 저장할 시 저절로 2칸 tab되는 기능이 안되는데 어디서 잘못된 지 알려주시면 감사하겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인에 성공해도 name을 불러오지 못 하는거 같습니다
playgroud 에서 회원을 생성 이후 login 페이지에서 로그인을 성공적으로 하였으나 login success 페이지에서 fetchuserloggedin 이 성공적으로 이루어 지지 않는거 같습니다. 회원가입을 여러번 해서 다른 계정으로 시도해도 name 부분이 표시가 되지 않네요. 혹시 뭐가 문제일까요? import { useState } from "react"; import { gql, useMutation } from "@apollo/client"; import { IMutation, IMutationLoginUserArgs, } from "../../../src/commons/types/generated/types"; import { accessTokenState } from "../../../src/commons/stores"; import { useRecoilState } from "recoil"; import { useRouter } from "next/router"; const LOGIN_USER = gql` mutation loginUser($email: String!, $password: String!) { loginUser(email: $email, password: $password) { accessToken } } `; export default function LoginPage() { const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loginUser] = useMutation< Pick<IMutation, "loginUser">, IMutationLoginUserArgs >(LOGIN_USER); const [, setAccessToken] = useRecoilState(accessTokenState); const onChangneEmail = (event) => { setEmail(event.currentTarget.value); }; const onChangnePassword = (event) => { setPassword(event.currentTarget.value); }; const onClickLogin = async () => { try { //1.로그인 뮤테이션 날려서 accessToken 받아오기 const result = await loginUser({ variables: { email, password, }, }); const accessToken = result.data?.loginUser.accessToken; console.log(accessToken); //받아온 accessToken 을 글로벌 스테이트에 저장해야지 모든 애들이 쓸수 있음 if (accessToken === undefined) { alert("로그인에 실패했습니다: 다시 시도해주세요"); return; } setAccessToken(accessToken); // 3. 로그인 성공 페지이로 이동하기 void router.push("/section23/23-01-login-success"); } catch (error) { if (error instanceof Error) alert(error.message); } }; return ( <> 이메일:{" "} <input onClick={onChangneEmail} type="text" placeholder="이메일 입력" /> 비밀번호:{" "} <input onClick={onChangnePassword} type="password" placeholder="비밀번호 입력" /> <button onClick={onClickLogin}>로그인</button> </> ); } import { useQuery, gql } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } `; export default function LoginPage() { const { data } = useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN); return <>{data?.fetchUserLoggedIn.name}님 환영합니다!</>; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션28 오류 질문
검색 해보니까 input태그에 자식을 넣어서 발생하는 에러라고 하는데 코드에는input태그에 props를 넣은것 빼곤 그럴만한 에러사항이 없습니다. 무엇이 문제인가요..?ㅠ index.jsimport BoardWrite from "../../../src/components/units/board/write/BoardWrite.container"; export default function GraphqlMutationPage() { // 한 줄일 땐 괄호() 필요 없음 return ( <div> <div>########## 여기는 페이지입니다.####### </div> <BoardWrite />;<div>########## 여기는 페이지입니다.####### </div> </div> ); } BroadWrite.container.js:import { useMutation } from "@apollo/client"; import { useState } from "react"; import BoardWriteUI from "./BoardWrite.presenter"; import { 나의그래프큐엘셋팅 } from "./BoardWrite.queries"; export default function BoardWrite(props) { const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState(); const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ variables: { // variables 이게 $ 역할을 함 writer: writer, title: title, contents: contents, }, }); console.log(result); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> <BoardWriteUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={onChangeContents} /> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> </div> ); } BroadWrite.presenter.jsimport { RedInput, BlueButton } from "./BoardWrite.styles"; export default function BoardWriteUI(props) { return ( <div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> <div> 작성자: <RedInput type="text" onChange={props.bbb} /> 제목: <input type="text" onChange={props.ccc} /> 내용: <input type="text" onChange={props.ddd} /> <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton>; </div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> </div> ); } BroadWrite.styles.jsimport styled from "@emotion/styled"; export const RedInput = styled.input` border-color: red; `; export const BlueButton = styled.input` background-color: blue; `;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 업로드 url 오류
어떤 부분때문에 이런 오류가 나는 걸까요? 이미지 등록 버튼을 눌러서 파일 선택하면 이 오류 메세지가 뜹니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
dig 질문입니다.
가비아 에서 도메인 결제 후 터미널 dig 부분에서 막혀서 질문 드립니다. 가비아 AWS 여기까지 잘 따라 왔는데 터미널에서 오류가 뜨네요 강의에서 2-3일 걸릴수도 있다했는데 현재 6시간 이상 지나도 안돼서 궁금함에 질문 남겨요.. 기다리면 될까요? 아님 잘못한 부분이 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입을 적을때 쓰는 JSX.Element
deprecated 되는 걸로 알고있고안써줘도 되는 것 같은데 리액트랑 타입스크립트 버전업에 따른 결과인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
대댓글 쿼리문
강사님 안녕하세요 혹시 쿼리문좀 백엔드에서 잘못되는거 같은데한번 봐주시면 안될까요...아무리 _id로 할려고해도 같은 유저가 질문하게 되면 컨텐츠로도 확인해야해서요 ㅠㅠ 강사님 댓글이라도 대댓글 이거에 관한 힌트라도 얻을수있게 남겨주시면 감사하겠습니다..아무리해도 쿼리문에서 필요한게 없으니 어떻게 해야할지를 모르겠습니다...
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql 강의중 질문
보시는 것과 같이 첫번째 사진처럼 백틱을 넣으면두번째 사진과 같은 자동완성기능이 제기능을 못합니다. 이유와 해결방법이 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
재설치를 해도 app.tsx 빨간줄
재설치를 해도 에러 메시지가 사라지지않네요 ㅠㅠ 저랑 같은 문제인가 싶어 https://www.inflearn.com/questions/872799/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%98%A4%EB%A5%98#259807해당글의 방법도 시도했지만 달라지지가 않네요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
d-day 오류
<!DOCTYPE html> <html lang="ko"> <head> <script src="./js/calculator.js"></script> <link rel="stylesheet" href="./calculator.css"> <title>D-Day</title> </head> <body> <h1>D-day</h1> <div id="d__day__container"> <div class="d__day__child__container"> <span id="days">0</span> <span>일</span> </div> <div class ="d__day__child__container"> <span id="hours">0</span> <span>시간</span> </div> <div class ="d__day__child__container"> <span id="min">0</span> <span>분</span> </div> <div class ="d__day__child__container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="target-selector"> <input id="year" type="text" placeholder="년도" class="day-caleander" size=5 maxlength="4"> <input id="month" type="text" placeholder="월" class="day-caleander" size=5 maxlength="2"> <input id="day" type="text" placeholder="일" class="day-caleander" size=5 maxlength="2"> </div> <div id="target__selector"> <button onclick="counterMake()" id="start__btn">카운트다운</button> </div> </body> </html> const dateFormMaker = () => { const inputYear = document.getElementById("year").value; const inputMonth = document.getElementById("month").value; const inputDay = document.getElementById("day").value; const dateFormat = `${inputYear} - ${inputMonth} - ${inputDay}`; return dateFormat; } const counterMake = () => { const targetDateInput = dateFormMaker(); const nowDate = new Date() const targetDate = new Date(targetDateInput); const remaining = (targetDate-nowDate) / 1000; if(remaining <=0) { console.log("타이머가 종료되었습니다.") }else if (isNaN(remaining)) { "유효한 시간 형식이 아닙니다" } const reaminingDate = Math.floor(remaining /3600 /24); const remainingHours = Math.floor (remaining/3600) & 24; const remainingMin = Math.floor(remaining/60) % 60; const remainingSec = Math.floor(remaining) & 60; const dDayCounter = `남은 시간 : ${reaminingDate}일 ${remainingHours}시 ${remainingMin}분 ${remainingSec}초`; console.log(dDayCounter) return dDayCounter; } console 하나하나 찍어가며 파악한 결과 targetDate에서 NaN이 뜨는데, 아무리 봐도 이유를 모르겠습니다 ㅠㅠㅠinput 박스에 적은 값들도 잘 읽어오는데 갑자기 저기서 에러가 뜨니까 답답하네요 . 피드백 부탁드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
(Section 26. Graphql Mutation) ApolloError:Failed to fetch
useMutation section 에서 해당 소스를 작성하고 Graphql API 요청하기 버튼을 누르면 아래와 같이 오류 메세지가 나옵니다. 설치 오류인가 싶어 package.json 을 봐도 특별히 어떤 문제인지 확인되지 않습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
apoll-cilent 관련된 질문
apoll-cilent 관련된 질문입니다.질문1. 지금 강의에서는 api url이 한개만 있을 경우인데, 경로가 다 다른 경우는 어떻게 연결을 하나요??client를 여러개 만들어서 porivder에 담아줘야하나요??질문2. provider는 꼭 app.jsx를 감싸야하나요?? 아니면 내부 컴토넌트안에서 원하는 컴포넌트를 provider로 감싸도 동일하게 사용이 가능한가요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
댓글 작성기능중 별점 rating 부분 질문
31-2 포트폴리오 과제를 진행하다가 막혀서 질문드려요!!다른기능들은 이미 해봤던내용의 복습인것같아 잘진행을 하고있던 와중에 별점 기능을 구현하는데 어려움이 좀 있네요. 처음 만들어보는 기능이라 혼자 만들어보다가 잘진행이 되지않아 레퍼런스 코드를 한번보고싶은데요해당 과제 세션에 링크된 레퍼런스코드에는 그기능이 따로 없는것같아서 여쭈어봅니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 15 페이네이션 서버 에러
강의에 나온 대로 아무리 해도 계속 서버 에러가 뜨네요. 이전에 질문했던 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 페이지에 접근이 가능해집니다... ㅠㅠ 왜 이러는지 알려주세요!!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자료 최신화,,,
강의에서 소개되는 노션(자료)와 실제 노션 링크 구조가 많이 다른데,,,최신화좀 해주시던지,,,정리를 좀 해주세요;;; 깃 소스를 받으려 해도 뭐 찾을 수도 없고;;강의 아래 설명에 적어주셔도 될거같구요,,,피그마 이용관련해서도 뭔가 어디에 볼 수 있게 적어놓아주세요;;필요한 내용만 들으려고 하는데,,, 뭐 전부를 들어야지 해당 내용들을 따라갈수 있는건가요,,,???
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
error Command failed with exit code 1. 해당 에러에 대한 질문드립니다.
에러 메세지 입니다. 01-02-emotion 폴더를 생성하여 강의 내용과 똑같이 작성하여 yarn dev로 실행하였는데 오류가 발생이 되어서 질문을 드립니다 .ㅠㅠ 해당 오류로 구글 검색을 해보니 공유캐시 파일을 지우고 다시 설치해보라는 글이 있어서 해보았는데도 오류가 고쳐지지 않아서 질문을 드립니다. ㅠㅠ 해당 오류는 링크의 블로그를 보고 시도해보았습니다.https://chlolisher.tistory.com/174 ㅠㅠ 도와주세요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
대댓글
강사님 안녕하세요 대댓글 만들고있는데요 fetchUseditemQuestionAnswers 에 return 값으로 받아오는 useditemQuestion 이게 null이라고 하는데요 혹시 이거 서버에서 문제있는거 같아서요혹시 봐주실수있으신가요?※ 대댓글 작성까지는 잘가는데 저 값을 받아와야하는데 null값이라고 하네요...
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section05 Quiz 3-8번
fetchBoards 인자로 search와 page가 있는데 search에 어떤 내용을 입력해야하는 지 모르겠습니다. 그리고 page라는 int형 값은 어디서 얻는지도 모르겠는데 알 수 있을까요?