수업 버전
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제가 듣는 수업이 ver1 인지 ver2 인지 어떻게 확인할까요 ?
- react
- node.js
- seo
- graphql
- next.js
매력적인 토끼
댓글 2
좋아요 0
조회수 356
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
로그아웃 후 token
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 몇 가지 질문 드리고자합니다. 로그아웃 후 client.clearStore() 통해서 로그인 정보를 지워주는 것으로 알고 있는데 accessToken이 지워지는건가요? 로그아웃 후 새로고침을 하면 위와 같은 코드가 동작하여 refreshToken이 남아 있어서 토큰을 재발급 받고 있습니다. 로그아웃을 할 때 refreshToken도 삭제할 수 있나요?
- react
- node.js
- seo
- graphql
- next.js
용준
댓글 1
좋아요 0
조회수 470
섹션 4 React 기초 1강에서 notion 접속 방법을 모르겠습니다...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요? 열심히 수강 중인 직장인입니다. 섹션4 react 기초 1강에서 설명하시는 대로, node.js, npm, yarn까지는 설치가 완료되었습니다만, 그 후 notion이라는 곳에 접속하여 다른 사항들을 설치하고자 하였으나, notion 접속 방법을 모르겠습니다. 영상을 보고 강사님이 접속하신 곳 주소를 그대로 입력하여 접속 및 회원가입을 하였으나, 강사님이 영상에서 보시는 곳과는 사뭇 다른 곳이라 접속 방법 등을 문의코자 글 남깁니다. 빠른 답변 부탁 드립니다.
- react
- node.js
- seo
- graphql
- next.js
gunaadatcom
댓글 2
좋아요 0
조회수 827
섹션 2 - 강력한 CSS의 "grid 속성" 강의에 오타가 있는 것 같습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 2 - 강력한 CSS의 "grid 속성" 강의에서 15분 30초쯤에 보이는 grid 레이아웃이 그림 예시와 적용된 속성값이 다른 것 같습니다. grid-item에게 grid-column: 1 / 3; grid-row: 2 / 3; 속성을 주고 실행했을 경우 아래의 레이아웃으로 나눠지고 ex) HTML <div class="container"> <div class="item item1">box</div> <div class="item">box</div> // ... </div> CSS .container { box-sizing: border-box; border: 2px solid pink; display: grid; grid-template-columns: 200px repeat(3, 1fr); grid-template-rows: 1fr 2fr; } .item { font-size: 1.3em; font-weight: 500; border: 2px solid powderblue; } .item1 { grid-column: 1 / 3; grid-row: 2 / 3; } result) ㅁ ㅁ ㅁ ㅁ [ㅁ ㅁ]ㅁ ㅁ 강의에서 보여지는 레이아웃처럼 만드려면 grid-column: 1 / 4; grid-row: 2 / 3; 처럼 입력해 주어야 아래처럼 적용이 되었습니다. ex) CSS /* ... */ .item1 { grid-column: 1 / 4; /* 3 -> 4 */ grid-row: 2 / 3; } result) ㅁ ㅁ ㅁ ㅁ [ㅁ ㅁ ㅁ]ㅁ 제가 잘못 입력된 부분이 있는지 혹은 강의 내용의 값이 오타였던 건지 알고싶습니다.
- react
- node.js
- seo
- graphql
- next.js
joka
댓글 1
좋아요 0
조회수 322
수업 질문이용! event 관련해서...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); // error State const [emailError, setEmailError] = useState(''); //on 으로 시작하는 함수는 행동을 취할 때 마다 event 가 들어온다. => 이벤트핸들러함수 function onChangeEmail(event) { console.log(event); //행위 console.log(event.target); //행위 대상 console.log(event.target.value); //그래서 입력한 값이 뭔지 setEmail(event.target.value); } function onChangePassword(event) { setPassword(event.target.value); } //마지막 포장한 거 보내주기 function onClickSignup() { //진짜 포장이 잘 됐는지 확인해보기 console.log(email); console.log(password); //검증하기 //@ 가 들어가 있지 않다면 if (email.includes('@') === false) { // alert('이메일이 올바르지 않습니다!! @ 가 없음 !!'); // document.getElementById('error').innerText = '이메일이 올바르지 않습니다!! @ 가 없음 !!'; setEmailError('이메일이 올바르지 않습니다!! @ 가 없음 !!'); } else { // 메시지 알림 이전, Backend 컴퓨터에 있는 API(함수) 요청하기 alert('회원가입을 축하합니다!!'); } } onClicksignup 매개 변수로 event 를 써주지 않는 것은 이 함수는 입력값을 보내주지 않아서 그런걸까요 ? on 이 붙은 함수가 모두 event 를 사용할 수 있다는 것으로 이해하면 될까요 ?
- react
- node.js
- seo
- graphql
- next.js
매력적인 토끼
댓글 1
좋아요 0
조회수 332
수정하기 버튼이 동작이 안됩니다..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 것들은 다 작동이 되는데 수정하기 페이지에서 버튼을 눌러도 동작이 안됩니다 ㅜㅜ 콘솔에도 오류가 안 나오고 강의를 3번 처음부터 다시 봐도 뭐 때문에 동작을 안 하는지 모르겠습니다 ㅜㅜ
- react
- node.js
- seo
- graphql
- next.js
wsws
댓글 2
좋아요 0
조회수 968
함수 호이스팅
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Todolist 코드 작성할때 함수표현식으로 작성된 함수는 호이스팅이 되지않는다고 하셨는데, saveItemsFn같은 함수는 어떻게 정의 되기 전에 createTodo와 같은 함수에서 사용 할 수 있는건가요?
- react
- node.js
- seo
- graphql
- next.js
박진혁
댓글 1
좋아요 0
조회수 326
Rest-API 실습 : postman/swagger api 링크 안됨
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
해당 강의의 http://example.codebootcamp.co.kr/api-docs/ http://example.codebootcamp.co.kr/graphql 사이트에 연결할 수 없다고 나옵니다 ㅠ
- react
- node.js
- seo
- graphql
- next.js
nsonestudy1
댓글 1
좋아요 0
조회수 340
yarn generate오류
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
$ yarn generate yarn run v1.22.19 $ graphql-codegen ✔ Parse Configuration ⚠ Generate outputs ❯ Generate to ./src/commons/types/generated/typed.ts ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Cannot use GraphQLObjectType "BoardReturn" from another module or realm. Ensure that there is only one instance of "graphql" in the node_modules directory. If d… error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. practice로 주소를 변경하고 yarn generate를 실행하는데 자꾸 위와같은 오류가 납니다 ㅠㅠ
- react
- node.js
- seo
- graphql
- next.js
김무연
댓글 1
좋아요 0
조회수 375
04-03-graphql-mutation-args 에서 작성한 게시글을 확인하려고 합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
useState로 number를 만들어서 createBoard로 작성한 게시글의 번호를 저장해두고그 number를 variables로 넣어서 내용을 확인하려고 합니다. import { gql } from "@apollo/client"; import { useQuery } from "@apollo/client"; import { useMutation } from "@apollo/client"; import React, { useState } from "react"; const CREATE_BOARD = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; const GraphqlMutationArgsPage = () => { const [createBoard] = useMutation(CREATE_BOARD); const { data: fetchBoardData, refetch } = useQuery(FETCH_BOARD); const [number, setNumber] = useState(0); const onClickSubmit = async () => { const result = await createBoard({ variables: { // variables: $ 역할 writer: "훈이", title: "안녕하세요!", contents: "반갑습니다.", }, }); console.log(result); setNumber(result.data.createBoard.number); }; const onClickFetch = async () => { await refetch({ number }); console.log(fetchBoardData); }; return ( <div> <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> {number} <button onClick={onClickFetch}>GRAPHQL-API 내용확인</button> </div> ); }; export default GraphqlMutationArgsPage; 이렇게 refetch 를 사용하는게 맞나요? 현재 작성한 게시글이 조회가 안되고 직전 게시글이 조회가 되네요.. 현재 작성한 게시글 number는 13280인데 조회된 게시글은 13279입니다.
- react
- node.js
- seo
- graphql
- next.js
myday0827
댓글 1
좋아요 0
조회수 453
getStaticProps 사용시 무한로딩
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps강의의 2분대에 나오는 코드를 동일하게 작성하고 npm run dev를 입력해서 localhost:3000/section1/getStaticProps 로 접속을 했는데 개발자도구에서 보니 계속 pending으로만 되어있고 빈 화면으로 계속 로딩중 상태에서 변화가 없는데 왜그런건가요? 콘솔에 별다른 에러도 안뜹니다 getStaticProps함수를 주석처리해주면 정상적으로 접속이 되는데 해당 함수를 사용하기만 하면 이렇게 접속이 안돼요
- seo
- next.js
- vercel
- csr
- ssg
- ssr
이주연
댓글 1
좋아요 0
조회수 352
antd 임포트 이후 에러입니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import { UpCircleOutlined } from "@ant-design/icons"; import styled from '@emotion/styled' import { MouseEvent } from "react"; import { useState } from "react"; const MyIcon = styled(UpCircleOutlined)` color: red; font-size: 130px; ` export default function LibaryIconPage(): JSX.Element { const [ count, setCount] = useState(0) const onClickDelete = (event: MouseEvent<HTMLDivElement>): void => { console.log(event.currentTarget.id) setCount(count + 1) console.log(count) } return ( <div id="삭제" onClick={onClickDelete}> <MyIcon />; </div> ) } MyIcon에서 위와 같은 오류가 뜹니다!
- react
- node.js
- seo
- graphql
- next.js
김무연
댓글 1
좋아요 0
조회수 814
section27 quiz 질문입니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
알려주신데로 한거 같은데 반응이 성공적이지 않았다 400 상태 코드를 받았다고 alert창에 뜨는데.. 어떤게 문제 인지 잘 모르겠네요 ㅠㅠ 네트워크 페이로드를 보면 다 잘 들어간거같은데... 페이로드랑 코드입니다. {operationName: "createProduct",…} operationName: "createProduct" query: "mutation createProduct($seller: String, $createProductInput: CreateProductInput!) {\n createProduct(seller: $seller, createProductInput: $createProductInput) {\n id\n _typename\n }\n}" variables: {seller: "김갑수", createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"}} createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"} contents: "멋진 안경" pName: "안경" price: "15000" seller: "김갑수" import { gql, useMutation } from "@apollo/client"; import { useState } from "react"; const CREATE_PRODUCT = gql` mutation createProduct( $seller: String $createProductInput: CreateProductInput! ) { createProduct(seller: $seller, createProductInput: $createProductInput) { _id } } `; export default function Boards_05_quiz() { //js const [seller, setSeller] = useState(""); const [pName, setPname] = useState(""); const [contents, setContents] = useState(""); const [price, setPrice] = useState(""); const [createProduct] = useMutation(CREATE_PRODUCT); const onChangeSeller = (event) => { setSeller(event.target.value); }; const onChangePname = (event) => { setPname(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; const onChangePrice = (event) => { setPrice(event.target.value); }; const onClickHandler = async () => { try { const result = await createProduct({ variables: { seller, createProductInput: { pName, contents, price, }, }, }); console.log(result); } catch (error) { alert(error.message); } }; return ( //html <div> <input type="text" placeholder="판매자명을 입력해주세요" onChange={onChangeSeller} ></input> <input type="text" placeholder="상품명을 입력해주세요" onChange={onChangePname} ></input> <input type="text" placeholder="삼품내용을 입력해주세요" onChange={onChangeContents} ></input> <input type="text" placeholder="상품가격을 입력해주세요" onChange={onChangePrice} ></input> <button onClick={onClickHandler}>상품등록</button> </div> ); }
- react
- node.js
- seo
- graphql
- next.js
지우혁
댓글 1
좋아요 0
조회수 457
MouseEvent 형식이 제네릭이 아닙니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const onClickSpan = (event: MouseEvent<HTMLSpanElement>) => { alert(event.currentTarget.id + "번 게시물입니다.") console.log(event.currentTarget.id) } const onClickDiv = (event: MouseEvent<HTMLDivElement>) => { alert(event.currentTarget.id + "번 게시물입니다.") console.log(event.currentTarget.id) } const qqq = (event: MouseEvent<HTMLSpanElement>) => { alert("클릭 타이틀") } // map의 특이점 또는 callback함수의 특이점 : 중괄호{} 로 쓰면return 생략 불가능 , () 로 쓰면 return 생략 가능 return( <> <div> {data?.fetchBoards.map((el: any) => ( // 함수타입은 인자 받는 곳에서 타입을 선언해주면됨 <div> <span> <input type='checkbox' /> </span> <span onClick = {() => ( // 안에서 바로 지정해버리는 법 alert(el.number + "번 게시물입니다. 안에서 지정 법") )} style = {mystyle}>{el.number}</span> <span id = {el.number} onClick = {onClickSpan} style = {mystyle}>{el.writer}</span> <span id = {el.number} onClick = {onClickSpan} style = {{margin: "10px"}}>{el.title}</span> <span id = {el.number} onClick = {onClickSpan} style = {{margin: "10px"}}>{el.contents}</span> </div>))} </div> <div> {data?.fetchBoards.map((el: any) => ( // 위에서 처럼 하나하나 지정 말고 한번에 지정하는 법 (이벤트 버블링으로 클릭 이벤트 전파) <div id={el.number} onClick={onClickDiv}> <span> <input type='checkbox' /> </span> <span onClick = {qqq} style = {mystyle}>{el.number}</span> <span style = {mystyle}>{el.writer}</span> <span style = {{margin: "10px"}}>{el.title}</span> <span style = {{margin: "10px"}}>{el.contents}</span> </div>))} </div> 위 코드에서 span 태그에는 HTMLSpanElement Div 태그에는 HTMLDivElement 를 적용했는데 'MouseEvent 형식이 제네릭이 아닙니다.' 이 오류가 계속 뜹니다!
- react
- node.js
- seo
- graphql
- next.js
김무연
댓글 1
좋아요 0
조회수 1380
Next.js body태그 접근
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요, 제가 배운거 바탕으로 포트폴리오를 제작중인데요 body 태그에 접근할려면 구글링 해본 결과 _document 파일이 있어야 하는데 아무리 찾아봐도 _document가 없더라구요 혹시 body태그에 접근하는방법을 여쭤봐도 될까요? ※ document.querySelector 접근할 생각을 했는데 react, next.js에서는 되도록이면 사용안하는게 좋다고해서 어쩔수없을때는 사용해도 될까요?
- react
- node.js
- seo
- graphql
- next.js
donig1225
댓글 1
좋아요 0
조회수 802
안녕하세요 용주님 질문이 있습니다~
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
server state 관리를 swr 말고 react-query를 사용하려고 합니다. 아래와 같이 해당 queryKey를 가지고 stores에 대한 data를 전역으로 관리하고 싶었는데, fetchFunction 자리에 stores props가 들어갈 수 없어서 처음에 어떻게 initialdata를 가져올 수 있을지 잘 모르겠습니다.. react-query는 수업때 배우진 않지만 혹시 아시는 부분이 있다면 알려주시면 감사하겠습니다 !! const { data } = useQuery([queryKey], fetchFun)
- seo
- next.js
- vercel
- csr
- ssg
- ssr
bj2525
댓글 1
좋아요 1
조회수 436
git 업데이트
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
> git push -u origin master To https://github.com/eunpse/preCamp.git ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'https://github.com/eunpse/preCamp.git' hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. 과제에 알려주신 방법으로 깃에 먼저 파일을 올렸다가, 내용을 수정하고 다시 깃에 올리려고 하는데 오류가 발생합니다. git pull을 해라 이런 말이 있는 것 같은데 어떻게 해야하나요?
- react
- node.js
- seo
- graphql
- next.js
박세은
댓글 1
좋아요 0
조회수 473
'result' is of type 'unknown'. ts(18046)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 화면과 달리 result 타입이 unknown이라고 뜹니다 소스를 비교했을 땐 동일한 것 같은데, 어떤 부분이 잘못 된걸까요?
- react
- node.js
- seo
- graphql
- next.js
cm-lee
댓글 2
좋아요 0
조회수 899
Final signup 과제에서
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let phone1 = document.getElementById('phone1').value; function ph1() { if (phone1.length === 3) { document.getElementById('phone2').focus(); } } function ph1() { let phone1 = document.getElementById('phone1').value; if (phone1.length === 3) { document.getElementById('phone2').focus(); } } 안녕하세요. 섹션1 final 과제 sign up 진행 중입니다. 핸드폰 번호를 입력하면 포커스를 이동 중에 첫번째 코드블럭 같이 정의한 후 포커스를 이동하려 했더니 되지 않더라고요! 혹시 위의 두 코드 블럭은 다른 코드로 정의되는 것인가요 ? 저는 {} 밖에서 정의를 해 주면 전체 코드에 적용된다고 해서 한번에 phone1,phone2,phone3 을 정의하려고 했거든요!
- react
- node.js
- seo
- graphql
- next.js
매력적인 토끼
댓글 2
좋아요 0
조회수 428
final signup 과제
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let phone1 = document.getElementById('phone1').value; function ph1() { if (phone1.length === 3) { document.getElementById('phone2').focus(); } } let phone1 을 상위에 정의 하면 왜 null 값으로 읽히는 걸까요 ?
- react
- node.js
- seo
- graphql
- next.js
매력적인 토끼
댓글 1
좋아요 0
조회수 192
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🧘♀️ [운동공간] 기획자/디자이너/앱 개발자를 찾습니다 띄띄
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS