묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
(정보 공유)redux toolkit으로 미들웨어 장착하기
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코든는 제로초님 깃허브에 있습니다
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 실습 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'; 라고 적은 컴포넌트에서는 콘솔이 잘 찍힙니다.
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
async await
안녕하세요. 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로 NodeBird SNS 만들기
redux toolkit에서는 redux thunk가 들어있는건가요?
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로 NodeBird SNS 만들기
이 강의에서 타입스크립트를 사용하지 않은 이유가 있나요??
요즘은 타입스크립트가 대세라는 소리를 어디서 들은 것 같아서 질문드립니다.왜 타입스크립트를 안썼냐고 따지는 것은 절때 아니고...단순히 자바스크립트를 사용했는데 어떠한 의도를 갖고 했는지가 궁금합니다.작성하기가 쉬울 수도 있고, 코드의 길이가 짧을 수도 있고, 기존에 만들어진게 자바스크립트일 수도 있다는 생각이 들긴 하지만 직접 물어보는게 더 좋을꺼같아서 질문드립니다.
-
해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
[~~].toStr에 대해
안녕하세요, 요창님 :)강의 잘 보고 있습니다! 보던 중 한 가지 궁금한게 생겨서요!실제 현업에서도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[] 이므로 타입을 지정해주고 있기 때문에 위에서 저렇게 체크를 해주는 것이라 이해했습니다.그럼 많은 부분에서 저렇게 배열을 구분하는 코드가 들어갈텐데 조금은 비 효율적이라 생각해현업에서는 다르게 사용할 것 같아서 질문 드립니다.!!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 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로 바꾸면 참이라서 바로 리렌더링이 되어서 노란색으로 버튼이 활성화 되는건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit으로 thunk를 실행하는 방법이 궁금합니다
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를 실행하는 방법이 궁금합니다!
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
SSG 페이지 갯수에 관해 질문있습니다.
안녕하세요, 강의 잘 들었습니다.SSG 페이지 갯수에 관해서 궁금한 것이 있는데요.만약에 커뮤니티 사이트 같은 걸 만든다고 하면 엄청나게 많은 글이 생성 될텐데 SEO를 위해 이 페이지 모두 SSG를 적용하면 안될 것 같다고 생각하는데 맞을까요?그리고 그렇다면 SSR로 모든 페이지를 개발한다고 하면 사용자 경험이 안 좋을 것 같고, SSR은 prefetch도 안되는 것 같은데 속도를 개선하는 방법이 없을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
ec2 도커 pgadmin 배포 에러
안녕하세요 aws ec2 배포중 docker-compose up 시 동일 에러가 계속 뜨는데 이유를 모르겠습니다ㅠㅠ...env 파일 따로 루트폴더에 생성해서 아이디 패스워드 작성해주었습니다오류메세지.envdocker-compose.yml
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
css 가운데 정렬
const ImgWrapper = styled.div` padding: 32px; text-align: center; & img { margin: 0 auto; max-height: 750px; } `;사진이 정확히 가운데에 정렬이 안돼서 padding을 봤는데 이상하게 padding 오른쪽이 있는데 오른쪽 padding이 짤려서출력이 됩니다 이유가 무었일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 규칙 적용 관련 질문입니다.
사진처럼 eslint js 파일에 rules 설정을 마쳤는데도 npx eslint .을 하면 여전히 문제가 100개 이상 발생하고 있습니다. 하지만 강의 내용에는 저 5개의 규칙만 적용해도 발생하는 문제가 없다고 뜹니다. 뭐가 문제인가요?빠른 수정 방식으로 새로운 규칙을 지정하는 등의 문제 해결은 가능하나 현재 강의 내용과 보여지는 에러가 달라서 질문 남깁니다. 빨간 줄이 쳐저 있는 부분은 import하는 부분과 코드 내부에서는 router 기능을 사용하는 곳에 표시됩니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS 첫번째 피그마 과제 질문
제 한계네용... 1.텍스트입력칸을 어떻게 하면 밑줄만 가로로 쭉 나오게 할지 모르겠고2. 성별 선택하는 라디오"만" 중앙배치 시키고싶은데 아직 해결이 안되고3.모든 요소들사이에 공간을 만들어주는게 아닌 가입버튼과 이용약관, 성별 선택라디오이렇게 세가지 요소만 공간을 만들고 요소를 선택해서 배치를 자유자재로 하고싶은데어렵네요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
1강 Nodejs, npm, yarn 이해 - 프로젝트 설치 중 컴퓨터 튕김현상
학습자료를 보고 수업프로젝트 설치목록 class와 freeboard_frontend를 설치하고 있는데, 어떨때는 설치가 잘 되는데 어떨때는 설치도중에 컴퓨터 전원이 꺼져버리네요. 왜 어쩔때는 설치도중에 컴퓨터 전원이 꺼지는 건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
useSWR 자동완성 질문
안녕하세요! 강의 잘 보고있습니다섹션 8에 유저페이지 생성하기 부분을 진행 하던 중 useSWR을 입력 시 툴팁으로 useSWR에 대한 추론이 나오시는데 저는 나오지를 않습니다ㅠㅠ.. useSWRConfig 말고는 나오지 않는데 이유가 무엇일까요?라이브러리는 제대로 설치가 되었습니다..!
-
미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
firebase admin 환경 초기화 하는 부분 질문입니다.
2:34환경을 초기화할때 사용 할 메서드 이름을 bootstrap 이라고 정하신 이유가 궁금합니다...!
-
해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
/api/[screenName].ts API에 대해 문의드립니다.
안녕하세요, 사용자 정보 조회 API 부분에서컨트롤러에 보면screenName이 없을 경우에 대해서 예외처리를 해주고 있습니다.if (screenName === undefined || screenName === null) { throw new BadReqError('screenName이 누락되었습니다.'); }위와 같은데저 에러를 구현해보고 싶어서 테스트 해봤는데 되지 않아서 고민하다가 질문드려요.[screenName].ts 형식의 Dynamic route로 되어 있어서 screenName이 누락된다면 해당 컨트롤러를 수행하지 않아 위 에러가 발생하지 않을 것 같은데 맞을까요?제가 next는 이제 막 배워가고 있는 단계라서 잘 몰라서 위 이유가 맞는지 잘 모르겠습니다. 제가 발생시키지 못 하고 있는 중이라면 어떻게 해야 저 에러를 발생시킬 수 있는지 또한 같이 답변 부탁드립니다!!요약dynamic route로 인해 screenName이 누락되었을 경우 컨트롤러를 실행하지 않는다고 생각했는데 맞을까요?실행시킬 수 있는 에러라면 어떻게 해야 저 예외처리를 실행 시킬 수 있나요?
-
해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
구글 가입 버튼 오류: redirect_uri_mismatch
redirect_uri_mismatch구글 로그인 버튼 생성하여 팝업을 실행시키면 위와 같은 에러가 나옵니다.안되는 이유를 찾던 중 강의에서는 authDomain에FIREBASE_AUTH_HOST 를 입력하셨는데 host를 입력하지 않고,firebaseconsle에서 확인할 수 있는 domain 을 가져와서 값을 넣으니 동작 하였습니다. 아래와 같은 형식authDomain: "blah-tutorial-3e756.firebaseapp.com",영상을 찍을 때와 버전이 달라져서 그런건지 문의드리며 혹시 비슷한 이슈로 팝업에서 에러를 받는 수강생들에게 도움이되길바랍니다.
