inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

항상 좋은 강의 감사합니다. 다름이 아니라 혹시 강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
지우혁 댓글 1 좋아요 0 조회수 327

(해결/오타문제) addPost 액션이 동작하지 않는 것에 대해 궁금합니다.

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요. 항상 좋은 강의를 해주셔서 감사합니다. 다름이 아니라 글 작성시 콘솔에 ADD_POST_REQUEST에 대한 리듀서 작동은 확인했으나 그 뒤에 addPost 사가가 작동하지 않는 것에 대해 질문이 있습니다. 위 문제는 watchAddPost()가 정상적으로 ADD_POST_REQUEST에 대한 이벤트를 캐치하지 못 해서 다음 과정이 진행되지 않는 것이라고 생각합니다. 다만 콘솔에서는 이에 대한 것도 뜨지 않아 해당 오류를 해결하기 어려워 질문 드립니다. 다음은 제가 작성한 코드입니다. () @/component/PostFrom.js const PostForm = () => { const dispatch = useDispatch(); const { imagePaths, addPostDone } = useSelector((state) => state.post); const [text, onChangeText, setText] = useInput(""); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); ... } @/reducer/post.js export const initialState = { mainPosts: [...], ... addPostLoading: false, addPostDone: false, addPostError: null } export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); const dummyPost = (data) => ({ id: 2, content: data, User: { id: 1, nickname: "윤섭", }, Images: [], Comments: [], }); const reducer = (state: initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log("REDUCER: ADD_POST_REQUEST"); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: console.log("REDUCER: ADD_POST_SUCCESS"); return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; ... } } @/sagas/post.js import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE, } from "@/reducers/post"; // add post function addPostAPI(data) { return axios.post("/api/post"); } function* addPost(action) { try { // const result = yield call(addPostAPI); yield delay(1000); console.log("SAGA: addPost"); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchAddComment)]); } 아래는 ADD_POST_REQUEST 이후 아무런 반응이 없는 스크린샷입니다.

  • react
  • redux
  • node.js
  • express
  • next.js
윤섭 댓글 2 좋아요 0 조회수 386

내장함수 타이머 작동 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

작성된 코드는 똑같은데 타이머가 작동하지 않아요 ㅠㅠ min과 sec 두 변수 모두 String으로 감싸줘보기도 하고 min "+" sec 부분을 String으로 감싸주기도 해봤는데 해결이 안돼요 let auth = () => { const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); document.getElementById("number").innerText = token; document.getElementById("number").style.color = "#" + token; let time = 180; setInterval(function () { if (time >= 0) { let min = Math.floor(time / 60); let sec = Stirng(time % 60).padStart(2, "0"); document.getElementById("timer").innerText = min + ":" + sec; time = time - 1; } else { document.getElementById("finish").disabled = true; } }, 1000); };

  • react
  • node.js
  • seo
  • graphql
  • next.js
댓글 1 좋아요 0 조회수 375

getServerSideProps cache가 되지 않을 때

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요 강사님. getServerSideProps 강의를 보고 실습중에 캐시가 되지 않아 질문드립니다. 다음과 같이 코드를 작성하고, getServerSideProps 페이지에서 로드된 html 문서의 헤더를 보면 캐시 정보가 나오지 않고 캐시가 되지 않는데 이유를 알 수 있을까요..? import type { GetServerSideProps, NextPage } from 'next'; type Props = { data: number; }; const Example: NextPage<Props> = ({ data }) => { return ( <main> <h1>getServerSideProps Page!</h1> <p>값: {data}</p> </main> ); }; export default Example; export const getServerSideProps: GetServerSideProps = async ({ res }) => { res.setHeader( 'Cache-Control', 'public, s-maxage=5, stale-while-revalidate=10' ); const delayInSeconds = 2; const data = await new Promise((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ); return { props: { data }, }; };

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
crewsade 댓글 1 좋아요 1 조회수 642

firebase 업데이트

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님 안녕하세요! 다름이 아니라 firebase 데이터 업데이트 하는 부분이 막혀 질문하려고 합니다. 아래 사진은 Firebase 데이터 업데이트 함수와 발생하는 에러 사진입니다. 해당 문제를 해결할 수 있게 도움 부탁드립니다 ㅠㅠ 해당 오류 해결하기 위해 firebase 룰을 변경했는데도 해결되지 않았습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
병아리222 댓글 1 좋아요 0 조회수 463

npm run dev 오류가 뜹니다

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

http://localhost:3000/에 뜬 오류 Server Error TypeError: Cannot read properties of undefined (reading 'user') This error happened while generating the page. Any console logs will be displayed in the terminal window. Source components/AppLayout.js (15:52) @ eval 13 | 14 | const AppLayout = ({ children }) => { > 15 | const isLoggedIn = useSelector((state) => state.user.isLoggedIn); | ^ 16 | // const { isLoggedIn } = useSelector(state => state.user); 17 | 18 | return ( Call Stack AppLayout components/AppLayout.js (15:36) Show collapsed frames 터미널에 뜬 오류 TypeError: Cannot read properties of undefined (reading 'user') at eval (webpack-internal:///./components/AppLayout.js:32:101) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/react-redux/lib/hooks/useSelector.js:67:26 npm run dev를 하고 http://localhost:3000/ 들어갔더니 이런 오류가 뜨면서 안됩니다. 유저를 왜 읽지 못하는 걸까요? 오류 해결하고 싶습니다 ㅠ

  • react
  • redux
  • node.js
  • express
  • next.js
정현영 댓글 1 좋아요 0 조회수 791

자유게시판 로그인일때 (비로그인 유저아닐때)

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님 안녕하세요, 혹시 밑에 질문했는데 제가 잘못 말을 전달한것 같아서요 비로그인일때는 피그마에서 작성자, 비밀번호를 입력하게 나타나는데 로그인일때는 작성자, 비밀번호를 입력 못하게 나타나더라고여 근데 playground 가보면 파라미터를 받는곳을 보면 user 정보를 받는 파라미터가 없더라구요 그래서 fetchBoard를 들어가서 user정보를 가져와도 null값이 나옵니다. 그럼 피그마에 있는 저거는 로그인유저도 비로그인유저 화면으로 만들어야하나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
donig1225 댓글 1 좋아요 0 조회수 301

createAsyncThunk 진행 순서

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

제가 이번에 loadPosts를 createAsyncThunk로 구현하면서 createAsyncThunk의 진행 순서가 궁금해서 질문 드립니 index.js useEffect(() => { console.log("dipathch hi"); dispatch(loadPosts(10)); }, [dispatch]); reducers/post.js export const loadPosts = createAsyncThunk(LOAD_POST, async (data) => { trottle(); return data; }); const trottle = () => listenerMiddleware.startListening({ type: LOAD_POST, effect: async (action, listenerApi) => { listenerApi.unsubscribe(); console.log("Original state ", listenerApi.getOriginalState()); await listenerApi.delay(5000); console.log("Current state ", listenerApi.getState()); listenerApi.subscribe(); }, }); const postSlice = createSlice({ name: "post", initialState, extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.post, })) // loadPosts .addCase(loadPosts.pending, (state, action) => { state.loadPostsLoading = true; state.loadPostsDone = false; }) .addCase(loadPosts.fulfilled, (state, action) => { action.payload = generateDummpyPost(action.payload); state.mainPosts = action.payload.concat(state.mainPosts); state.hasMorePost = state.mainPosts.length < 50; state.loadPostsLoading = false; state.loadPostsDone = true; }) .addCase(loadPosts.rejected, (state, action) => { state.loadPostsLoading = false; state.loadPostsError = action.error; }) .addDefaultCase((state) => state), }); 제가 하나하나 console.log를 찍어서 확인한 진행 순서를 얘기해 드리겠습니다 일단 화면을 처음 랜더링할때 index.js에서 dispatch가 제일 먼저 실행됩니다 그리고 post.js로 넘어와서 loadPost.pending -> loadPosts.fulfilled ->loadPosts = createAsyncThunk(LOAD_POST) 이 순서대로 진행이 됩니다 그래서 loadPosts.fulfilled에 generateDummpyPost()함수를 작성한 것입니다 그래서 마지막에 createAsyncThunk가 실행이 되니 return이 필요없지 않나? 라는 생각에 return을 지워봤더니 post가 하나만 작성되고 그 이후는 작성되지 않았습니다 제가 궁금한 부분은 세개입니다 createAsyncThunk의 정확한 진행순서가 궁금합니다 generateDummpyPost()함수를 저렇게 작성하는게 맞는지 궁금합니다 https://blog.logrocket.com/redux-toolkits-new-listener-middleware-vs-redux-saga/ 에서 Throttling 관련 얘기가 있어서 똑같이 따라 해봤는데 쓰로틀링을 createAsyncThunk에 장착하는 방법을 잘 모르겠습니다 쓰로틀링이 없어도 윈도우 이밴트로 요청이 한번에 많이 오는 현상은 없지만 그래도 궁금해서 질문 드립니다

  • react
  • redux
  • node.js
  • express
  • next.js
i1004gy 댓글 1 좋아요 0 조회수 302

16-02 강의에 잡음이 발생하는 것 같습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

4분 15초경부터 25초까지 잡음이 들려서 강의 소리가 잘 안들리네요 참고하시면 좋을 것 같습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
Jun 댓글 1 좋아요 0 조회수 461

Next.js13 에서 getStaticProps 관련해서 질문드립니다!

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요! 강의 잘보고있습니다 :) next.js 13 버전으로 create-next-app 으로 설치하여 강의를 듣고있는데요, 섹션1 > getStaticProps 강의내용대로 동일코드를 입력했지만 props로 넘긴 값을 받아오질 못하더라구요.. console.log를 찍어봐도 안넘어와서 문의드립니다ㅠㅠ 아래와같이 입력했고 /app/section1/page.tsx로 만들었습니다. 관련 깃헙소소는 : https://github.com/simjieun/next13 여기에 있습니다! 한번 확인부탁드리겠습니다ㅠㅠ import { NextPage } from "next"; interface Props { second: number; } const Example: NextPage<Props> = ({ second }) => { return ( <main> <h1>getStaticProps Page</h1> <p>{second}</p> </main> ); }; export default Example; export async function getStaticProps() { const delayInSecond = 2; const second = await new Promise((resolve) => { setTimeout(() => { resolve(Math.random()); }, delayInSecond * 1000); }); return { props: { second, }, }; }

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
simjieun 댓글 1 좋아요 1 조회수 883

redux toolkit을 사용해서 throttling설절을 어떻게 할 수 있나요?

미해결

[리뉴얼] React로 NodeBird SNS 만들기

아래 질문(reduxjs/toolkit 에서 loadPost 한번만 가게하기)에서 비슷한 내용의 질문이 올라왔는데 delay란 함수를 어떻게 설정하는지 잘 이해가 안되서 질문드립니다

  • react
  • redux
  • node.js
  • express
  • next.js
i1004gy 댓글 1 좋아요 0 조회수 417

useEffect()의 window에 관한 콘솔은 계속 찍히는 이유가 무었인가요?

미해결

[리뉴얼] React로 NodeBird SNS 만들기

useEffect(() => { function onScroll() { console.log( window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight ); if ( window.scrollY + document.documentElement.clientHeight === document.documentElement.scrollHeight ) if (hasMorePost) { const dummypost = generateDummpyPost(10); dispatch(loadPost({ dummypost })); } } window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, [hasMorePost]); useEffect를 이런 식으로 작성하면 hasMorePost의 값이 변경되기 전까지 useEffect는 처음 단한번만 실행된후 그후에는실행되지 않아야 하는데 왜 계속 console.log가 실행되는건가요?

  • react
  • redux
  • node.js
  • express
  • next.js
i1004gy 댓글 1 좋아요 0 조회수 385

댓글부분 구현시 Comment가 적용되지 않는 부분

미해결

[리뉴얼] React로 NodeBird SNS 만들기

댓글 구현하기 수강 중에 제로초님께서 antd의 <Comment />를 import 하여 적용하는데 안 되시는 분들은 List.Item과 List.Item.Meta를 이용해서 만들어보세요. 제 경우 antd를 최신버전으로 사용하고 있는데 공식문서를 보니 Comment는 없습니다. 대신 List 컴포넌트에 List.Item과 List.Item.Meta가 있는데 이걸 이용해 댓글 컴포넌트를 만들 수 있습니다. {commentFormOpened && ( <div> <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( // 강의에서는 <li></li>로 사용하고 있습니다. <List.Item> {/* 강의에서는 <Comment />로 사용하고 있습니다. */} <List.Item.Meta // author => title로, content => description으로 적용하면 강의에서 보는 UI와 똑같아요. title={item.User.nickname} avatar={<Avatar>{item.User.nickname[0]}</Avatar>} description={item.content} /> </List.Item> )} /> </div> )}

  • react
  • redux
  • node.js
  • express
  • next.js
윤섭 댓글 2 좋아요 9 조회수 670

자유게시판 로그인 유저 전용 작성하기

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님 안녕하세요, 혹시 로그인 유저가 자유게시판 작성하기 할때 작성자, 비밀번호등... 필요하잖아요 근데 비밀번호는 로그인 유저가 한 비밀번호를 가져와야 하는데 이걸 localStorage, session에 해버리면 보안상 문제가 생기지않나요? 지금은 그냥 localStroage, session 이런곳에 유저 비밀번호를 저장해놓을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
donig1225 댓글 1 좋아요 0 조회수 376

rangepicker를 쓰려고 하는데요

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

레인지피커의 값을 받아오려는데 e.target .value를 하면 Cannot read properties of undefined (reading 'value') 이런 오류가 떠요 구글링도 해봤는데 어떻게 알수 있는 방법 없을까요? 레인지피커는 파란색 박스에요

  • react
  • redux
  • node.js
  • express
  • next.js
정현영 댓글 1 좋아요 0 조회수 784

밑에도 같은 질문이 있지만..

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

로그인 된 상태가 아닐 때 (로그인하면 안뜸) alert창 : {"response":{"errors":[{"message":"","locations":[{"line":2,"column":3}],"path":["restoreAccessToken"],"extensions":{"code":"INTERNAL_SERVER_ERROR","exception":{"stacktrace":["Error"," at RestoreAccessTokenService.createAccessToken (/codecamp_backend_api/dist/api/token/services/mutation/restoreAccessToken.service.js:45:19)"," at runMicrotasks (<anonymous>)"," at processTicksAndRejections (internal/process/task_queues.js:93:5)"," at async target (/codecamp_backend_api/node_modules/@nestjs/core/helpers/external-context-creator.js:76:28)"," at async /codecamp_backend_api/node_modules/@nestjs/core/helpers/external-proxy.js:9:24"]}}}],"data":null,"status":200,"headers":{"map":{"content-length":"654","content-type":"application/json; charset=utf-8"}}},"request":{"query":"mutation restoreAccessToken {\n restoreAccessToken {\n accessToken\n }\n}"}} 이런 문구가 뜨는데 다른 분 질문에서 프론트딴에서는 무시해도 된다고 하셨는데 화면딴에서 이게 안뜨게는 못하는걸까요? 할 수 있다면 어떻게 해야하나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
임프런 댓글 2 좋아요 0 조회수 385

antdesign 적용안됨 오류

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님 강의 잘 듣고 있습니다 . 제가 댓글 구현하기까지 잘 진행하던중 Comment 가 antd에서 지원을 안해준다는 error가 발생하여 antd 버전을 강의와 맞게 다운그레이드 (npm i antd@4.16.1) 했습니다. 근데 그 때 이후로 화면에 antd가 제대로 적용이 되지않은 상태가 되었습니다 . 다시 원래버전을 설치해도 같은 결과입니다 . Comment문제보단 화면에 antd가 다시 제대로 적용됬으면 합니다 . 혹시 해결방안이 있을까요? 화면이 이런형식으로 바뀌였습니다. 코드는 지금까지 강의와 똑같이 진행하였습니다 package.json

  • react
  • redux
  • node.js
  • express
  • next.js
채민석 댓글 1 좋아요 0 조회수 405

개발자도구에 payload가 안보여요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님이 예시로 보여줄땐 보이는데 왜 제가 하면 payload 탭이 안보일까요ㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
치카치카 댓글 1 좋아요 0 조회수 4159

SSR을 적용해야하는 부분과 그렇지않은 부분에 대해

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

강좌에서 알려주신대로 페이지의 getServerSideProps로 초기로드를 SSR하는 방식을 제 프로젝트에서도 적용을 했는데요. 모든 페이지에 SSR을 진행하다보니 막상 배포해서 돌려보면 첫페이지 로드를 빨리 보여주는 장점보다, 서버에서 렌더링을 기다려야하는 단점이 눈에 띄게 보였습니다. 사실 모든 페이지에서 SSR을 적용하면 기존의 전통적인 웹과 다를바가 없지않나라는 생각들 들고, SEO vs SPA 둘 중의 하나의 고민으로 오게되는데 제로초님은 이런경우에 어떤 기준으로 판단을 하시나요? getStaticProps() 가 SSG(static site generation)에 해당하고 getServerSideProps() 가 SSR(server side rendering)에 해당하는것이 맞나요?

  • react
  • redux
  • node.js
  • express
  • next.js
kenny 댓글 1 좋아요 0 조회수 564

인기 태그

인프런 TOP Writers

주간 인기글