묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 실습 4탄 질문이요 ㅠㅠ
싸이월드 실습 4탄 하는 중인데LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠgame__container 부분에 flex-direction: column; align-items: center; justify-content: space-between; padding: 20px;가 들어있고lotto__text부분에도display: flex; flex-direction: column; align-items: center; justify-content: space-between;를 넣어봤으나 아무 변화가 없었습니다 ㅠgame.html:<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <div class="number1">3</div> <div class="number1">5</div> <div class="number1">10</div> <div class="number1">24</div> <div class="number1">30</div> <div class="number1">34</div> </div> <button class="lotto_button">Button</button> </div> </div> </div> </body> </html>game.css:* { box-sizing: border-box; margin: 0px } html, body{ width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/ align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title { font-size: 15px; font-weight: 900; } .game__subtitle { font-size: 11px; } .word__result { font-size: 11px; font-weight: 700; } .word__text { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox { width: 130px; height: 24px; border-radius: 5px; } .search { font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .number__box{ width: 130px; height: 24px; border-radius: 5px; background-color: #FFE400 ; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .lotto__text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .number1{ font-size: 10px; font-weight: 700px; margin: 5px; } .lotto_button { font-size: 11px; font-weight: 700; width: 62px; height: 24px; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 30 퀴즈
import styled from "@emotion/styled"; import { useState } from "react"; // 스타일 // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- const Container = styled.div` display: flex; justify-content: center; padding: 100px; `; const Wrapper = styled.table` width: 600px; `; const MyTr = styled.tr` text-align: center; `; const MyTd = styled.td` padding: 20px 0 20px 0; `; // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- export default function Quiz02() { // 리스트에 뿌려줄 목업 데이터 // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- const dataList = [ { id: 1, data: "9월달 시스템 점검 안내입니다.", date: "2020.09.19" }, { id: 2, data: "안녕하세요! 공지사항 전달드립니다.", date: "2020.09.17" }, { id: 3, data: "개인정보 처리방침 변경 사전 안내", date: "2020.09.12" }, { id: 4, data: "ios 10.0이하 지원 중단 안내", date: "2020.08.10" }, { id: 5, data: "이용약관 변경 사전 안내", date: "2020.08.01" }, { id: 6, data: "개인정보 처리방침 변경 사전 안내", date: "2020.07.19" }, ]; const [checkList, setCheckList] = useState([]); console.log("현재 체크리스트", checkList); const onClickCheckAll = () => { console.log("받아오는 데이터의 길이", dataList.length); console.log("현재 체크리스트에 들어있는 데이터의 길이", checkList.length); if (checkList.length !== dataList.length) { setCheckList(dataList); //체크 리스트 크기와 데이터 크기가 같지않으면 체크리스트에 데이터를 넣는다. } else { setCheckList([]); } }; const onCheckedItem = (list) => { console.log("내가 누른 체크리스트가 뭔가?", list); // 모든 checkList.id 중에 체크한 list.id값이 없으면 CheckList에 list 값을 넣는다. if (checkList.every((cur) => cur.id !== list.id)) { setCheckList([...checkList, list]); } else { // 체크된것만 제외하고 배열에 담는다. const result = checkList.filter((cur) => cur.id !== list.id); setCheckList(result); } }; const isChecked = (list) => { // 체크박스에 체크할지 안할지 return checkList.some((cur) => cur.id === list.id); //list.id 요소와 checkList.id 요소와 겹치는게 있다면 true를 반환한다. }; return ( <Container> <Wrapper> <tr> <th> <input type="checkbox" onChange={onClickCheckAll} checked={checkList.length === dataList.length} style={{ marginTop: "5px" }} ></input> </th> <th>번호</th> <th>제목</th> <th>작성일</th> </tr> {dataList.map((list, index) => ( // 데이터 배열의 요소와 인덱스 가져오기 <MyTr key={index}> {/* 정적 데이터기 때문에 key값을 인덱스로 설정 */} <MyTd> <input type="checkbox" onChange={() => onCheckedItem(list)} checked={isChecked(list)} style={{ marginTop: "5px" }} /> </MyTd> <MyTd>{list.id}</MyTd> <MyTd>{list.data}</MyTd> <MyTd>{list.date}</MyTd> </MyTr> ))} </Wrapper> </Container> ); }섹션 30 퀴즈 레퍼런스 코드에서 onChange={() => onCheckedItem(list)}이 부분 그냥 화살표 함수로 하는 이유가 있나요?else { // 체크된것만 제외하고 배열에 담는다. const result = checkList.filter((cur) => cur.id !== list.id); setCheckList(result); }이 코드에서 선택한것을 체크해제 했을때 아무것도 체크 되어 있지 않다면 result는 빈값인가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
콘솔이 터미널에 찍힙니다.
안녕하세요 선생님 콘솔을 찍으면 자꾸 브라우저 개발자 도구 콘솔에서 안보이고 터미널에서만 보이는데 이유가 뭔지 알 수 있을까요? 해당 컴포넌트가 server client component라 그런걸까요?'use client'; 라고 적은 컴포넌트에서는 콘솔이 잘 찍힙니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 29 state 원리
const onChangeContents = (event) => { setContents(event.target.value); if (writer && title && contents) { setIsActive(true); } };리렌더링은 함수에 바뀐값이 있다면 함수가 끝난후에 리렌더링이 되고 그래서 함수가 끝나기 전에 위 코드처럼 참/거짓 검증을 하려고 하면 undefined 값이라 거짓이라 setActive 값은 리렌더링이 되지않고const onChangeContents = (event) => { setContents(event.target.value); if (writer && title && event.target.value) { setIsActive(true); } };위처럼 event.target.value로 바꾸면 참이라서 바로 리렌더링이 되어서 노란색으로 버튼이 활성화 되는건가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
SSG 페이지 갯수에 관해 질문있습니다.
안녕하세요, 강의 잘 들었습니다.SSG 페이지 갯수에 관해서 궁금한 것이 있는데요.만약에 커뮤니티 사이트 같은 걸 만든다고 하면 엄청나게 많은 글이 생성 될텐데 SEO를 위해 이 페이지 모두 SSG를 적용하면 안될 것 같다고 생각하는데 맞을까요?그리고 그렇다면 SSR로 모든 페이지를 개발한다고 하면 사용자 경험이 안 좋을 것 같고, SSR은 prefetch도 안되는 것 같은데 속도를 개선하는 방법이 없을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 규칙 적용 관련 질문입니다.
사진처럼 eslint js 파일에 rules 설정을 마쳤는데도 npx eslint .을 하면 여전히 문제가 100개 이상 발생하고 있습니다. 하지만 강의 내용에는 저 5개의 규칙만 적용해도 발생하는 문제가 없다고 뜹니다. 뭐가 문제인가요?빠른 수정 방식으로 새로운 규칙을 지정하는 등의 문제 해결은 가능하나 현재 강의 내용과 보여지는 에러가 달라서 질문 남깁니다. 빨간 줄이 쳐저 있는 부분은 import하는 부분과 코드 내부에서는 router 기능을 사용하는 곳에 표시됩니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS 첫번째 피그마 과제 질문
제 한계네용... 1.텍스트입력칸을 어떻게 하면 밑줄만 가로로 쭉 나오게 할지 모르겠고2. 성별 선택하는 라디오"만" 중앙배치 시키고싶은데 아직 해결이 안되고3.모든 요소들사이에 공간을 만들어주는게 아닌 가입버튼과 이용약관, 성별 선택라디오이렇게 세가지 요소만 공간을 만들고 요소를 선택해서 배치를 자유자재로 하고싶은데어렵네요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
1강 Nodejs, npm, yarn 이해 - 프로젝트 설치 중 컴퓨터 튕김현상
학습자료를 보고 수업프로젝트 설치목록 class와 freeboard_frontend를 설치하고 있는데, 어떨때는 설치가 잘 되는데 어떨때는 설치도중에 컴퓨터 전원이 꺼져버리네요. 왜 어쩔때는 설치도중에 컴퓨터 전원이 꺼지는 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 23 프로그램 세팅 관련 질의
안녕하세요? 프로그램 설치 관련 한번 더 질의 드립니다. 질의 답변 및 노션의 디렉션대로 진행하던 중 어떤 문제가 발생한 듯도 했지만 설치는 진행이 되었습니다. npx create-next-app을 설치한 한 class 폴더 내 다른 폴더들 확인한 결과, 아래와 같이 pages 폴더는 설치가 되지 않았고, node.modules에서는 노션에 나온 대로 버전 변경하려 했으나 이미 변경된 상태였습니다. 시간이 지나 업데이트 등의 이유로 설치 항목이 변경되어 위와 같은 것인지, 혹은 제가 무언가 실수를 한 것인지 궁금하여 질의 드립니다. 위와 같이 설치된 상태에서도 수업 진행에 차질이 없을지요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticPaths로 각 매장의 상세 페이지 만들기
안녕하세요! 강의 수강 중 에러 원인을 모르겠어서 문의드립니다.next.js 최신 업데이트 버전을 사용하고 있어 동적 페이지 아래와 같이 생성 후 동일한 코드를 작성하였습니다. getstaticpath로 페이지 생성은 되었습니다. console에 path도 잘 나타나는 것 확인했습니다!근데 getstaticprops에서의 console이 아무것도 찍히지 않습니다. 실행 자체가 되지 않는 것 같은데 아무리 찾아도 모르겠습니다ㅜㅜ 무엇이 잘못된 것일까요?ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground 데이터 조회 관련
강사님 안녕하세요 ! 무엇이 문제인지 도통 모르겠어서 질문 남깁니다..섹션 30 강의에서 아래와 같이 작성하면import { gql, useQuery } from '@apollo/client'; const FETCH_BOARDS = gql` query { fetchBoards { number writer title contents } } `; // const FETCH_BOARDS = gql` // query { // fetchBoards { // writer // title // contents // } // } // `; export default function StaticRoutingMovedPage() { const { data } = useQuery(FETCH_BOARDS); console.log(data); console.log(data?.fetchBoards); return ( <div>안녕 {data?.fetchBoards.map(el => ( <div key={el.number}> <span> <input type="checkbox" /> </span> <span style={{ margin: "10px" }}>{el.number}</span> <span style={{ margin: "10px" }}>{el.title}</span> <span style={{ margin: "10px" }}>{el.writer}</span> </div> ))} </div> ); } 이런 에러가 확인됩니다. 조회하려는 데이터에 number가 문제인가 싶어 위에서 주석 처리한 부분과 같이 number를 지워보면빈 화면만 떴었는데 이번엔 게시글 목록 데이터가 확인이 되기는 합니다.Warning: Each child in a list should have a unique "key" prop.하지만 위와 같은 경고 문구가 확인이 되어서 return 문에 key를 추가해 봤으나, 동일한 에러가 떠있습니다. return ( <div> {data?.fetchBoards.map(el => ( <div key={el.number}> <span> <input type="checkbox" /> </span> <span style={{ margin: "10px" }}>{el.number}</span> <span style={{ margin: "10px" }}>{el.title}</span> <span style={{ margin: "10px" }}>{el.writer}</span> </div> ))} </div> ); 제가 playground에서 데이터를 조회해보면위와 같이 데이터가 확인이 되긴 하는데, 왜 number 관련 에러가 뜨는지, 무엇이 문제인지 모르겠습니다. 또 강사님과는 다른 데이터가 확인되는데, 강사님과 다른 데이터가 조회되는 것이 맞는건가요? 데이터 값이 다르게 나올 수도 있는 건지 헷갈립니다.. 질문을 남기는 중에 새로고침을 했더니, 아까와 달리 number를 지운 후, Network - Response 에 보였던 데이터가 안보이고 다른 문구가 생겼습니다.게시글 목록 데이터는 화면에 조회되는데 왜 저런 문구가 생긴걸까요? 궁금한 점이 많지만,, 답변 주시면 감사하겠습니다 ㅠㅡㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
질문 여러개 드립니다 !
섹션 26 포트폴리오 깃허브 코드를 그대로 가져가서 썼는데도 오류가 나네요 전송할때 400오류가 납니다.return() 부분이 HTML코드가 작성되는곳인데 파일저장할때 프리티어 때문에 ; 가 붙어서 문서에 자꾸 ;가 작성되는데 안되게 하는법없을까요?graphql 연습용과 포트폴리오용의 차이가 뭔가요?또 VSCODE에서 graphql으로 Mutation을 작성할때 연습용 , 포트폴리오용 중에 어떤 방식으로 작성해야하나요?createBoardInput: CreateBoardInput! 이런식으로 되어있는 Mutation에서 CreateBoardInput! 이런형태는 무조건 객체로 작성해주어야 하나요?5. 쿼리 작성할때 강사님처럼 저는 색깔이 안바뀌는데 왜그런가요? 다른 익스텐션을 설치해주어야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
프리티어 질문입니다.
["INFO" - 오후 3:42:09] Formatting file:///c%3A/Users/82109/OneDrive/%EB%B0%94%ED%83%95%20%ED%99%94%EB%A9%B4/codecamp-frontend-mentee/class/pages/_app.tsx ["ERROR" - 오후 3:42:09] Error resolving prettier configuration for c:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\class\pages\_app.tsx ["ERROR" - 오후 3:42:09] JSON Error in c:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\class\.prettierrc.json: Unexpected token '�', "��{JSONError: JSON Error in c:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\class\.prettierrc.json: Unexpected token '�', "��{이건 무엇을 의미하는건가요? 프리티어가 잘 작동을 하지 않네요 린트에러가 없는곳에서는 프리티어가 작동하는데 린트에러가 있으면 프리티어가 작동을 안하는데 원래 그런건가요?? 아님 제가 설정을 잘못한건지 모르겠네요 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
app.tsx 질문입니다
// import "../styles/globals.css"; import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"; import type { AppProps } from "next/app"; export default function App({ Component }: AppProps): JSX.Element { const client = new ApolloClient({ uri: "http://backend-example.codebootcamp.co.kr/graphql", cache: new InMemoryCache(), //컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 더 자세히 알아보기 }); //graphql 셋팅 return ( <div> <div> ============여기는 APP.js 컴포넌트 시작부분 입니다============== </div> <ApolloProvider client={client}> <Component /> </ApolloProvider> <div>============여기는 APP.js입니다==============</div> </div> ); }코드이고 Component에 빨간줄이 그어져서 마우스를 올려보니 'Component'은(는) JSX 구성 요소로 사용할 수 없습니다.Its type 'NextComponentType<NextPageContext, any, {}>' is not a valid JSX element type.'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' 형식은 'ElementType' 형식에 할당할 수 없습니다.'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' 형식은 'new (props: any) => Component<any, any, any>' 형식에 할당할 수 없습니다.구문 시그니처 반환 형식 'Component<{}, any, any>' 및 'Component<any, any, any>'이(가) 호환되지 않습니다.'render()'에서 반환되는 형식은 해당 형식 간에 호환되지 않습니다.'React.ReactNode' 형식은 'import("c:/Users/82109/OneDrive/\uBC14\uD0D5 \uD654\uBA74/codecamp-frontend-mentee/class/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode' 형식에 할당할 수 없습니다.'{}' 형식은 'ReactNode' 형식에 할당할 수 없습니다.ts(2786)(parameter) Component: NextComponentType<NextPageContext, any, {}> 라고 나오는데 실행해도 크게 문제는 없는거 같은데 ts로 바꾸면서 타입을 설정해주지 않아서 나오는 warning같은 느낌인건지 궁굼해서 질문 남깁니다.항상 좋은강의 감사드립니다!
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
app폴더 방식
안녕하세요 선생님.제가 지금 npx create next app을 하면 pages가 아니라 app폴더 방식으로 버전 13이 기본으로 되어 있는 것 같습니다.13 버전으로 공부해도 괜찮을까요? getStaticProps함수 등 여러가지 기능이 바뀌었을 것 같아서요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 40 관련 질문 드려요
섹션 40에서 postgres 관련된 부분에서 노션에 나와있는 부분과 같이 host와 비밀번호를 입력했는데 진행이 되질않는데요혹시 이 부분이 실습 불가능한 부분이라 영상만 봐도 되는 건가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
Next.js 스타일링 방식 결정
Next.js 에서 스타일링을 하는 방법들이 다양한 것으로 알고 있습니다.css-in-js도 제공하는 styled-jsx아니면 재설정 해서 styled-component, emotion ..... 등등프로젝트 스타일링을 scss, scss module로 결정하셨는데 혹시 이유가 있나요 ?????
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql mutation
import { useMutation, gql } from "@apollo/client"; const 나의그래프큐엘셋팅 = gql` mutation { createBoard(writer: "철수", title: "안녕하세요", contents: "반갑습니다.") { _id number message } } `; export default function GraphqlMutationPage() { const [나의함수] = useMutation(나의그래프큐엘셋팅); console.log(나의함수); const onClickSubmit = async () => { const result = await 나의함수(); }; return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button>; // 한 줄 일때는 괄호() 팔요 없음 } 안녕하세요 질문드립니다!이 코드에서 const [나의함수] = useMutation(나의그래프큐엘셋팅); 이 부분은 useMutation의 반환값 객체를 배열구조할당해서 나의함수라는 변수에 넣는건가요? useMutation의 반환값은 객체인가요? 배열인가요? 헷갈리네요..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
radio 버튼 css 로 색상 변경하는 방법
라디오버튼 기본값은파란 테두리, 흰 배경, 파란 점 인데빨간 테두리, 검은 배경, 노란 점이런식으로 3가지를 다 바꿀수는 없나요?과제중에 궁금해서 여쭤봅니다테두리와 점 색을 바꾸면배경은 흰색이 되어버리거나점이 사라져버리고 배경색으로만 가득 찬다거나해서3개를 함께 적용할 방법을 찾지 못하겠는데원래 안되는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
withAuth 질문
중고마켓 게시글 작성하는 부분을 작업 하고 있는데 여기서 게시글작성은 회원만 등록 할 수 있는것을 파악하였습니다.그래서 withAuth를 이용해서 분기처리를 하였는데 로그인 해도 로그인하라는 문구가 떠서 질문 드립니다.markets -> new -> index.tsxwithAuth어떤 식으로 해야 로그인 시 게시글 작성을 할 수 있을까요 , 또 로그인 안했을 시 빽쪽에서 막아놨기 때문에 게시글을 작성 할 수 없는걸까요?
