묻고 답해요

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

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

해결됨

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

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

• react
• node.js
• seo
• graphql
• next.js

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

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

해결됨

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

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

• react
• node.js
• seo
• graphql
• next.js

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

양방향 연관관계 순환참조 질문

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요 강의 잘 듣고 있습니다. 강의를 듣다가 궁금증이 생겨 질문 드립니다. 양방향 연관관계의 설정이 언제 필요할지 생각을 해보았는데 게시글과 댓글의 일대 다 관계에서 게시글을 조회할때 댓글이 같이 조회되는것을 원하는 경우가 있을 것 같습니다. 그렇다면 이전강의에 말씀하셨던 무한 루프(?)에 빠질 수 있을 것 같은데요. 아마 이걸 순환참조라고 말한다고 알고 있습니다. 그러면 애초에 댓글은 댓글대로 따로 조회하고 게시글을 조회할때 댓글 조회하는 방식 즉 연관관계의 주인이 아닌곳에서 리스트를 조회하려고 하는 방식은 안쓰는것이 좋은것인가요?

• java
• jpa

cascade 부모, 자식 동시 적용

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 안녕하세요, cascade 설정과정에서 궁굼증이 생겨 문의드립니다. 부모 객체와 자식객체 양쪽다 CascadeType. ALL 옵션을 주고, 부모쪽에 orphanRemoval = true 옵션을 준 상태에서 Parent parent = new Parent(); Child child = new Child(); Child child2 = new Child(); parent.addChild(child); parent.addChild(child2); Team findParent = em.find(Parent.class, 1L); findParent.getChild().remove(0); 와 같이 진행 했을때, child가 삭제됨 child가 삭제되며 cascade 옵션에 의해 부모인 team을 삭제함 team을 삭제하기 전 cascade 옵션에 의해 자식에 포함된 child를 모두 삭제함 team이 삭제됨 이렇게 이해했고 실제로 parent, child, child2 모두 삭제 되었습니다. 그런데 Parent parent = new Parent(); Child child = new Child(); Child child2 = new Child(); Child child3 = new Child(); ... Child childN = new Child(); parent.addChild(child); parent.addChild(child2); parent.addChild(child3); ... parent.addChild(childN); Team findParent = em.find(Parent.class, 1L); findParent.getChild().remove(0); 이렇게 자식을 3개 이상 넣어줬을경우 자식객체 2개만 삭제(remove에 넣어주는 index에 따라 2개 삭제될 자식이 결정됨)되고 나머지 자식과 부모는 남아있는걸로 확인되는데... 어떤 매커니즘때문에 이런 현상이 나오는걸까요?..

• java
• jpa

코틀린 Companion object

미해결

자바 개발자를 위한 코틀린 입문(Java to Kotlin Starter Guide)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 선생님! 수업을 잘 듣고있는 백엔드 취준생 입니다! 자바를 공부하다가 코틀린도 공부하면 좋을꺼 같아서 같이 공부하고있는데요.. 혹시 좀더 코틀린을 딥하게 파보고 싶은데 추천하시는 사이트 혹시 있으실까요??

• java
• kotlin
• 객체지향

구글 앱스 스크립트는 파일로 다운이 어려운가요?

미해결

현재 구글 앱스 스크랩트를 활용해 특정한 셀의 내용을 다운받는 스크립트를 짜고 있습니다. 자꾸 작동이 되지 않아서 챗gpt에 물어보니 그러려면 자바와 연동을 하든 뭘 하든 구글 앱스 스크립트 내에서는 안된다고 하는데 이거 정말 안되는걸까요?ㅠㅠ

• googleappsscript
• java

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

미해결

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

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

• react
• redux
• node.js
• express
• next.js

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

댓글부분 구현시 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

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

해결됨

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

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

• react
• node.js
• seo
• graphql
• next.js

rangepicker를 쓰려고 하는데요

해결됨

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

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

• react
• redux
• node.js
• express
• next.js

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

해결됨

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

로그인 된 상태가 아닐 때 (로그인하면 안뜸) 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

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

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

해결됨

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

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

• react
• node.js
• seo
• graphql
• next.js

왜 쿠폰수가 너무 많을까요?

미해결

실습으로 배우는 선착순 이벤트 시스템

분명 현재 없는 상태이고 결과가 자꾸 이상하게 나와서 sout 처리를 잠시 해보았습니다 package com.example.api.service; import com.example.api.domain.Coupon; import com.example.api.repository.CouponCountRepository; import com.example.api.repository.CouponRepository; import org.springframework.stereotype.Service; @Service public class ApplyService { private final CouponRepository couponRepository; private final CouponCountRepository couponCountRepository; public ApplyService(CouponRepository couponRepository, CouponCountRepository couponCountRepository) { this.couponRepository = couponRepository; this.couponCountRepository = couponCountRepository; } public void applyV1(Long userId) { Long count = couponRepository.count(); if(count > 100) { return; } couponRepository.save(new Coupon(userId)); } public void applyV2(Long userId) { Long count = couponCountRepository.increment(); System.out.println(count); if(count > 100) { return; } couponRepository.save(new Coupon(userId)); } } @SpringBootTest class ApplyServiceTest { @Autowired private ApplyService applyService; @Autowired private CouponRepository couponRepository; @Test public void applyOnce() { applyService.applyV1(1L); long count = couponRepository.count(); Assertions.assertEquals(1L, count); } @Test public void 여러명응모V1() throws InterruptedException { int threadCount = 1000; ExecutorService executorService = Executors.newFixedThreadPool(32); CountDownLatch latch = new CountDownLatch(threadCount); for(int i=0; i<threadCount; i++){ long userId = i; executorService.submit(() -> { try { applyService.applyV1(userId); } catch(Exception e) { System.out.println(e); }finally { latch.countDown(); } }); } latch.await(); long count = couponRepository.count(); assertThat(count).isEqualTo(100); } @Test public void 여러명응모V2() throws InterruptedException { int threadCount = 1000; ExecutorService executorService = Executors.newFixedThreadPool(32); CountDownLatch latch = new CountDownLatch(threadCount); for(int i=0; i<threadCount; i++){ long userId = i; executorService.submit(() -> { try { applyService.applyV2(userId); } catch(Exception e) { System.out.println(e); }finally { latch.countDown(); } }); } latch.await(); long count = couponRepository.count(); org.assertj.core.api.Assertions.assertThat(count).isEqualTo(100); } } 그런데 여러명응모V2 test를 실행시에 count를 출력시 다음과 같은 수가 나옵니다. 20003 20011 20012 20013 20015 20016 20017 20018 20020 20022 ??? 한번 할때마다 1000씩 쿠폰의 수가 증가중인데요;;; 조회했을때는 empty라 나오는데 이렇게 되는 연유를 잘 모르갰습니다. 테스트 코드라서 rollback이 되야할거 같은데 그렇지 않는것도 잘 모르겟네요;; ㅠㅠ

• java
• docker
• spring-boot
• kafka
• redis

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

설치 과정 중 질문

해결됨

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

안녕하세요 선생님 맨 처음 설치 과정에서 막히는 부분이 있어 질문 남깁니다! class 폴더를 만들고, apollo, emotion등 것들을 분명 설치를 했는데 package.json에는 확인되지 않는 이유가 뭘까요?

• react
• node.js
• seo
• graphql
• next.js