172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
export default function LibraryIconPage(): JSX.Element { const onClickDelete = (event: MouseEvent<HTMLDivElement>): void => { console.log(event.currentTarget.id) } return ( <div id="삭제게시글id" onClick={onClickDelete}> <MyIcon /> </div> ) } 강사님께서 상위에 div를 만들고 event.currentTarget.id로 값을 받아오라고 설명해주셨는데, svg 상위 태그인 span에 id가 있으니까 MyIcon에 id,onClick 넣고 event.currentTarget.id로 span의 id값을 가져오는 건 잘못된 것인지 궁금합니다.
react node.js seo graphql next.js
nana
2023-06-22T02:40:10.411Z
댓글 1
좋아요 0
조회수 356
미해결
[리뉴얼] React로 NodeBird SNS 만들기
다른분들 질문 보다보니 부모컴포넌트와 자식컴포넌트가 동일한 key값으로 서버에 요청을 보내면 한번만 요청을 보내고 부모컴포넌트에서 캐싱된 값을 자식컴포넌트가 사용한다고 봤는데 공식 홈페이지 예제 보니 특정 페이지 내부에서 화면에 렌더링되는 모든 컴포넌트에서는 동일한 key값으로 서버에 요청하는경우에 하나만 요청되고 모두 캐싱되어서 같은화면?내에서 렌더링되는 컴포넌트들은 값을 공유하는것같은데 이도 맞을까요? nextjs _app Custom App component 에서 요청하는 swr key는 전역적으로 캐싱이 안되나요? _app에서 서버로 사용자 정보를 요청하도록 코드를 작성해놨고 각 페이지 마다도 동일한 key값으로 사용자 정보를 서버에 요청하도록 작성해두었습니다. 페이지를 이동하더라도 app에서 사용한 key값과 각 페이지에서 서버로 요청하는 key값이 동일하니 캐싱되어 서버로 사용자 정보를 재요청하지 않고 캐싱된 값을 사용해야된다고 생각되는데 계속해서 서버로 사용자 정보를 재요청을 보냅니다. 왜 그런것일까요..?
react redux node.js express next.js
haruharu
2023-06-21T20:46:04.510Z
댓글 1
좋아요 0
조회수 416
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
home.html이나 game.html은 css가 정상적으로 적용되는데 jukebox.html만 css가 적용되지않습니다 왜그런가욤.. jukebox.html: <!DOCTYPE html> <html lang="ko"> <head> <title>JUKEBOX</title> <link href="./styles/jukebox.css"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="wrapper__title"> <div class="title">추억의 BGM</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="wrpper__body"> <div class="wrapper__title"> <div class="title">추억의 BGM</div> <div class="subtitle">TODAY CHOICE</div> </div> </div> </div> </body> </html> jukebox.css: *{ box-sizing: border-box; margin: 0px; } html, body{ width: 100%; height: 100%; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; }
react node.js seo graphql next.js
전현욱
2023-06-21T14:55:22.264Z
댓글 1
좋아요 0
조회수 338
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
id="myword"가 떡하니 있는데 왜저럴까요.. let lastword = word[word.length-1] let firstword = myword[0] 부분도 let 선언이 안되는것같습니다 ㅠ game.html: <!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> <script src="./game.js"></script> </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" onclick="startWord()">입력</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"> <span class="number1">3</span> <span class="number1">5</span> <span class="number1">10</span> <span class="number1">24</span> <span class="number1">30</span> <span class="number1">34</span> </div> <button class="lotto_button">추첨</button> </div> </div> </div> </body> </html> game.js: const startWord = () => { let myword = document.getElementById("").value let word = document.getElementById("word").innerText let lastword = word[word.length-1] let firstword = myword[0] if(lastword === firstword){ document.getElementById("result").innerText = "정답입니다" document.getElementById("word").innerText = myword docement.getElementById("myword").value = "" } else { document.getElementById("result").innerText="떙!" docement.getElementById("myword").value = "" } }
react node.js seo graphql next.js
전현욱
2023-06-21T14:21:52.524Z
댓글 1
좋아요 0
조회수 289
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
서버사이드렌더링 전 새로고침하면 로그인 풀리는건 알겠는데, 재로그인시에 isAuthenticated 가 발동되면서 서버는 계속 로그인중입니다. 이건 서버사이드렌더링 거치면 해결될까요? 아니면 코드가 잘못돼서 그런걸까요... 백엔드서버를 다시 수동으로 종료후 재실행하면 백서버 로그인은 풀립니다
react redux node.js express next.js
hornedllama6
2023-06-21T06:42:22.021Z
댓글 1
좋아요 1
조회수 424
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 .. 중고마켓에서 너무 많이 해메고 있네요.. 중고마켓 상세페이지 부분에서 삭제하기, 찜카운트 부분은 로그인 한 사람만 버튼이 작동할까요? _id 오류가 뜨는 이유를 잘 모르겠어서요...(alert창) 아니면 id값을 못가져오는건가요? toggleUseditemPick(픽카운터) (delete 부분도 비슷하게 가져오고있습니다.) const onClickPickCount = async () => { try { await toggleUseditemPick({ variables: { useditemId: String(router.query.marketId), }, refetchQueries: [ { query: FETCH_USEDITEM, variables: { useditemId: String(router.query.marketId), }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } }; 이렇게 데이터를 가져오고 있습니다. 어떤게 문제일가요 그리고 어떻게 해야 이 문제들을 해결 할 수 있을까요?
react node.js seo graphql next.js
임프런
2023-06-21T04:47:59.180Z
댓글 1
좋아요 0
조회수 325
미해결
한국인이 좋아하는 속도로 때려넣는 파이썬
안녕하세요 강의 수강중 python을 설치하여 git bash에서 $ pip를 입력하는 과정에서 bash: pip: command not found가 출력될 경우에는 어떤 조치를 취할 수 있을까요? 완전 처음이라 문의 남깁니다.
sjw1758
2023-06-21T03:50:27.584Z
댓글 1
좋아요 0
조회수 3905
미해결
[리뉴얼] React로 NodeBird SNS 만들기
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(loggerMiddleware), preloadedState: serverState, // SSR }); export default createWrapper(makeStore); redux toolkit으로 미들웨어를 장착하고 싶으시면 getDefaultMiddleware에 concat으로 장착하시면 됩니다 configureStore코든는 제로초님 깃허브에 있습니다
react redux node.js express next.js
i1004gy
2023-06-21T01:26:43.710Z
댓글 1
좋아요 2
조회수 720
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 실습 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; }
react node.js seo graphql next.js
전현욱
2023-06-20T17:01:35.099Z
댓글 2
좋아요 0
조회수 471
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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는 빈값인가요?
react node.js seo graphql next.js
박진혁
2023-06-20T11:36:19.237Z
댓글 1
좋아요 0
조회수 282
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요 선생님 콘솔을 찍으면 자꾸 브라우저 개발자 도구 콘솔에서 안보이고 터미널에서만 보이는데 이유가 뭔지 알 수 있을까요? 해당 컴포넌트가 server client component라 그런걸까요? 'use client'; 라고 적은 컴포넌트에서는 콘솔이 잘 찍힙니다.
seo next.js vercel csr ssg ssr
jojonghyeok424
2023-06-20T09:24:25.365Z
댓글 2
좋아요 1
조회수 1171
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요. banner.js에서 질문이 있습니다 이 부분에서 왜 async await를 사용하셨는지 궁금합니다! const fetchData = async () => { // 현재 상영중인 영화 정보를 가져오기(여러 영화) const request = await axios.get(requests.fetchNowPlaying); // 여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; // 특정 영화의 더 상세한 정보를 가져오기(비디오 정보도 포함) const { data : movieDetail } = await axios.get(`movie/${movieId}`, { params: {append_to_response: "videos"}, }); setMovie(movieDetail); }
react redux tdd typescript next.js 소프트웨어-테스트
puding0712
2023-06-20T07:42:35.813Z
댓글 1
좋아요 0
조회수 372
미해결
[리뉴얼] React로 NodeBird SNS 만들기
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => { configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware(), preloadedState: serverState, // SSR }); }; export default createWrapper(makeStore); https://redux-toolkit.js.org/api/getDefaultMiddleware 이걸 읽어보니 configureStore에서 middleware의getDefaultMiddleware()에 redux thunk가 이미 추가가 되어있는거 같은데 맞나요?
react redux node.js express next.js
i1004gy
2023-06-20T05:09:51.615Z
댓글 1
좋아요 0
조회수 433
미해결
[리뉴얼] React로 NodeBird SNS 만들기
요즘은 타입스크립트가 대세라는 소리를 어디서 들은 것 같아서 질문드립니다. 왜 타입스크립트를 안썼냐고 따지는 것은 절때 아니고... 단순히 자바스크립트를 사용했는데 어떠한 의도를 갖고 했는지가 궁금합니다. 작성하기가 쉬울 수도 있고, 코드의 길이가 짧을 수도 있고, 기존에 만들어진게 자바스크립트일 수도 있다는 생각이 들긴 하지만 직접 물어보는게 더 좋을꺼같아서 질문드립니다.
react redux node.js express next.js
ym Kim
2023-06-20T04:35:46.374Z
댓글 1
좋아요 0
조회수 286
해결됨
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
안녕하세요, 요창님 :) 강의 잘 보고 있습니다! 보던 중 한 가지 궁금한게 생겨서요! 실제 현업에서도 const pageToStr = Array.isArray(convertPage) ? convertPage[0] : convertPage; const sizeToStr = Array.isArray(convertSize) ? convertSize[0] : convertSize; 위와 같은 코드(?) 가 자주 쓰이나요? 먼저 위를 예시로 들면 분명 client 에선 page을 number로 넘겼으나 api 에서 배열인지 아닌지 확인해줘야 하는 것은 인터넷에 찾아보니 next의 req.query의 타입이 string | string[] 이므로 타입을 지정해주고 있기 때문에 위에서 저렇게 체크를 해주는 것이라 이해했습니다. 그럼 많은 부분에서 저렇게 배열을 구분하는 코드가 들어갈텐데 조금은 비 효율적이라 생각해 현업에서는 다르게 사용할 것 같아서 질문 드립니다.!!
베레가모
2023-06-19T15:34:56.035Z
댓글 1
좋아요 0
조회수 264
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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로 바꾸면 참이라서 바로 리렌더링이 되어서 노란색으로 버튼이 활성화 되는건가요?
react node.js seo graphql next.js
박진혁
2023-06-19T11:35:13.595Z
댓글 1
좋아요 0
조회수 437
미해결
[리뉴얼] React로 NodeBird SNS 만들기
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; import thunkMiddleware from "redux-thunk"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => { configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ thunk: { loggerMiddleware, }, }), preloadedState: serverState, // SSR }); }; export default createWrapper(makeStore); 아런 코드에서 redux thunk를 실행하는 방법이 궁금합니다!
react redux node.js express next.js
i1004gy
2023-06-19T07:52:37.712Z
댓글 1
좋아요 0
조회수 475
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요, 강의 잘 들었습니다. SSG 페이지 갯수에 관해서 궁금한 것이 있는데요. 만약에 커뮤니티 사이트 같은 걸 만든다고 하면 엄청나게 많은 글이 생성 될텐데 SEO를 위해 이 페이지 모두 SSG를 적용하면 안될 것 같다고 생각하는데 맞을까요? 그리고 그렇다면 SSR로 모든 페이지를 개발한다고 하면 사용자 경험이 안 좋을 것 같고, SSR은 prefetch도 안되는 것 같은데 속도를 개선하는 방법이 없을까요?
서창우
2023-06-19T05:27:33.560Z
댓글 1
좋아요 1
조회수 268
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 aws ec2 배포중 docker-compose up 시 동일 에러가 계속 뜨는데 이유를 모르겠습니다ㅠㅠ.. .env 파일 따로 루트폴더에 생성해서 아이디 패스워드 작성해주었습니다 오류메세지 .env docker-compose.yml
react node.js postgresql docker typescript 클론코딩 next.js
Ycow
2023-06-19T05:12:49.322Z
댓글 1
좋아요 0
조회수 398
미해결
[리뉴얼] React로 NodeBird SNS 만들기
const ImgWrapper = styled.div` padding: 32px; text-align: center; & img { margin: 0 auto; max-height: 750px; } `; 사진이 정확히 가운데에 정렬이 안돼서 padding을 봤는데 이상하게 padding 오른쪽이 있는데 오른쪽 padding이 짤려서출력이 됩니다 이유가 무었일까요?
react redux node.js express next.js
i1004gy
2023-06-19T03:05:02.672Z
댓글 1
좋아요 0
조회수 411
