176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요? 프로그램 설치 관련 질의 드린 gunaadatcom입니다. 권장하신 대로 ver2 강의에서 요구하는 대로 next.js에서 node.js 다시 다운받고 아래와 같이 다운로드를 진행하였으나 계속 애로가 나서 질의 한번 더 드립니다... npx create-next-app를 통해 폴더를 만들려고 하였으나 진행이 되질 않습니다. 확인 부탁 드립니다~~ ㅠ.ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제가 듣는 수업이 ver1 인지 ver2 인지 어떻게 확인할까요 ?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 몇 가지 질문 드리고자합니다. 로그아웃 후 client.clearStore() 통해서 로그인 정보를 지워주는 것으로 알고 있는데 accessToken이 지워지는건가요? 로그아웃 후 새로고침을 하면 위와 같은 코드가 동작하여 refreshToken이 남아 있어서 토큰을 재발급 받고 있습니다. 로그아웃을 할 때 refreshToken도 삭제할 수 있나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요? 열심히 수강 중인 직장인입니다. 섹션4 react 기초 1강에서 설명하시는 대로, node.js, npm, yarn까지는 설치가 완료되었습니다만, 그 후 notion이라는 곳에 접속하여 다른 사항들을 설치하고자 하였으나, notion 접속 방법을 모르겠습니다. 영상을 보고 강사님이 접속하신 곳 주소를 그대로 입력하여 접속 및 회원가입을 하였으나, 강사님이 영상에서 보시는 곳과는 사뭇 다른 곳이라 접속 방법 등을 문의코자 글 남깁니다. 빠른 답변 부탁 드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 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) ㅁ ㅁ ㅁ ㅁ [ㅁ ㅁ ㅁ]ㅁ 제가 잘못 입력된 부분이 있는지 혹은 강의 내용의 값이 오타였던 건지 알고싶습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 를 사용할 수 있다는 것으로 이해하면 될까요 ?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 것들은 다 작동이 되는데 수정하기 페이지에서 버튼을 눌러도 동작이 안됩니다 ㅜㅜ 콘솔에도 오류가 안 나오고 강의를 3번 처음부터 다시 봐도 뭐 때문에 동작을 안 하는지 모르겠습니다 ㅜㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Todolist 코드 작성할때 함수표현식으로 작성된 함수는 호이스팅이 되지않는다고 하셨는데, saveItemsFn같은 함수는 어떻게 정의 되기 전에 createTodo와 같은 함수에서 사용 할 수 있는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
해당 강의의 http://example.codebootcamp.co.kr/api-docs/ http://example.codebootcamp.co.kr/graphql 사이트에 연결할 수 없다고 나옵니다 ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
$ 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를 실행하는데 자꾸 위와같은 오류가 납니다 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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입니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps강의의 2분대에 나오는 코드를 동일하게 작성하고 npm run dev를 입력해서 localhost:3000/section1/getStaticProps 로 접속을 했는데 개발자도구에서 보니 계속 pending으로만 되어있고 빈 화면으로 계속 로딩중 상태에서 변화가 없는데 왜그런건가요? 콘솔에 별다른 에러도 안뜹니다 getStaticProps함수를 주석처리해주면 정상적으로 접속이 되는데 해당 함수를 사용하기만 하면 이렇게 접속이 안돼요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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에서 위와 같은 오류가 뜹니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
알려주신데로 한거 같은데 반응이 성공적이지 않았다 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> ); }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 형식이 제네릭이 아닙니다.' 이 오류가 계속 뜹니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요, 제가 배운거 바탕으로 포트폴리오를 제작중인데요 body 태그에 접근할려면 구글링 해본 결과 _document 파일이 있어야 하는데 아무리 찾아봐도 _document가 없더라구요 혹시 body태그에 접근하는방법을 여쭤봐도 될까요? ※ document.querySelector 접근할 생각을 했는데 react, next.js에서는 되도록이면 사용안하는게 좋다고해서 어쩔수없을때는 사용해도 될까요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
server state 관리를 swr 말고 react-query를 사용하려고 합니다. 아래와 같이 해당 queryKey를 가지고 stores에 대한 data를 전역으로 관리하고 싶었는데, fetchFunction 자리에 stores props가 들어갈 수 없어서 처음에 어떻게 initialdata를 가져올 수 있을지 잘 모르겠습니다.. react-query는 수업때 배우진 않지만 혹시 아시는 부분이 있다면 알려주시면 감사하겠습니다 !! const { data } = useQuery([queryKey], fetchFun)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
> 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을 해라 이런 말이 있는 것 같은데 어떻게 해야하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 화면과 달리 result 타입이 unknown이라고 뜹니다 소스를 비교했을 땐 동일한 것 같은데, 어떤 부분이 잘못 된걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 을 정의하려고 했거든요!
