inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

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

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

미해결

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

분명 현재 없는 상태이고 결과가 자꾸 이상하게 나와서 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
seonjun Moon 댓글 1 좋아요 0 조회수 649

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

설치 과정 중 질문

해결됨

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

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

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

SpringDataJpa를 쓸때 수정 기능

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

test 학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] test 강의 내용으로 게시판 만들기를 병행하고 있습니다. 이번 강의에서 Spring Data Jpa로 변경을 하였는데 게시글 수정과 같은 수정 기능은 인터페이스인 SpringDataJpaMemberRepository에서 작성하나요? 아니면 Service단에서 Repository의 find를 통해서 수정하도록 작성하나요? SpringDataJpa에서 find, delete는 있는데 수정은 어떻게 이뤄지는지 궁금합니다..d

  • java
  • spring
  • mvc
  • spring-boot
승민짱! 댓글 1 좋아요 0 조회수 551

도메인 객체와 엔티티 객체 분리 시 객체 그래프 탐색 관련 질문

해결됨

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

안녕하세요. 김영한 선생님의 강의를 참 잘 보고 있는 학생입니다. SQL 중심적인 개발의 문제점 편에서, 객체지향 프로그래밍에서 객체는 자유롭게 객체 그래프를 탐색할 수 있어야하 지만 SQL로 개발하는 경우에는 처음 실행하는 SQL에 따라 탐색 범위가 결정된다 는 문제가 있다고 말씀하셨습니다. 그리고 엄격한 도메인 주도 설계의 관점에서는 '도메인 객체'와 '엔티티 객체'를 분리 해야 한다고 알고 있습니다. 비즈니스 로직을 다루는 도메인 객체가 JPA 라고 하는 기술에 의존하는 것은 영 즐거운 일은 아니기 때문이죠.. ( https://stackoverflow.com/questions/24703756/having-separate-domain-model-and-persistence-model-in-ddd ) 그렇기 때문에 도메인 객체와 엔티티 객체를 분리하게 된다면 Repository 계층에서 예를 들어 findById 를 했을 경우 엔티티 객체를 도메인 객체로 매핑해서 돌려주어야 합니다. 그런데 이럴 경우, 기존의 SQL로 개발하는 경우와 비슷한 문제가 발생하게 되는 것 같습니다. 매핑을 어디까지해서 돌려주어야 하느냐는 점이죠. Member 를 조회했을 때, 객체 그래프 안에 있는 Category까지 싹싹 다 조회해와서 매핑을 해주기도 곤란한 노릇이고, MemberWithTeam , MemberWithOrderAndOrderItem... 와 같은 객체를 따로 따로 만드는 것도 요상해보입니다. 그렇다고 객체 그래프를 다 끊어놓자니 그것도 객체지향적이지 않은 것 같아보이구요.. 이런 상황에서는 어떤 식으로 도메인 객체를 설계하는지, 엔티티 객체의 매핑은 어떤 방법으로 이루어지는지가 너무 궁금합니다.

  • java
  • jpa
  • ddd
Octoping 댓글 1 좋아요 1 조회수 909

addPostToMe createSlice()로 처리하기

해결됨

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

제가 redux toolkit으로 제로초님 강의를 따라가고 있는데 제로초님이 올려주신 toolkit 깃허브 코드에는 addPostToMe에 대해 reducers로 선언만 다른 코드에서 사용하는건 안보이는데 그래서 제가 강의내용과 비슷하게 수정을 했습니다 user.js const userSlice = createSlice({ name: "user", initialState, reducers: { addPostToMe(draft, action) { draft.me.Posts.unshift({ id: action.payload }); }, removePostOfMe(draft, action) { draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.payload); }, }, }) export const { addPostToMe, removePostOfMe } = userSlice.actions; PostForm.js import { addPostToMe } from "../reducers/user"; const onSubmit = useCallback(() => { const id = shortId.generate(); dispatch(addPost({ id, text })); dispatch(addPostToMe()); }, [text]); 이렇게 코드를 수정했는데 혹시 제로초님은 다른 방식으로 addPostToMe를 사용했는데 제가 발견을 못한걸까요? 아니면 제가 작성한 코드에 뭔가 다른 문제가 생길 수도 있나요?

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

git 관련 질문

해결됨

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

안녕하세요. 최근 강의를 수강을 시작하였는데요. nextjs가 13버전으로 바뀜에 따라 강의 에 맞게 소스 코드를 받아서 진행하려고 합니다. git checkout 으로 0-2 branch로 이동하고 여기서 부터 이어하려고 했으나, error: Your local changes to the following files would be overwritten by checkout: pages/section1/clientSideRendering.tsx pages/section1/getServerSideProps.tsx Please commit your changes or stash them before you switch branches. Aborting 변경점이 있는것 같아 해당 branch로 이동이 안되는것 같습니다! $ git stash && git pull origin master && git stash pop 임시 저장소로 옮기고 pull을 하려고 했으나 git@github.com : Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 키가 없어서 안되는것 같습니다! 혹시 이런경우에 어떻게 해결해야 할지 알 수 있을까요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
류호원 댓글 1 좋아요 2 조회수 425

ansible-server에 pywinrm 설치 시, 에러 발생하여 문의드립니다.

미해결

구성 관리 자동화 도구 - 앤서블(Ansible)

안녕하세요. 아래 섹션 실습 중, 에러가 발생하여 문의드립니다. 섹션 9 : [응용] 윈도우 관리학 - (1)베이그런트를 이용해서 윈도우를 추가하기 Ansible_env_ready.yaml 에 아래와 같이 추가 후, vagrant provision ansible-server을 수행했는데 pvwinrm 설치 과정에서 에러가 발생하였습니다. - name: Install python-pip yum: name: python-pip state: present - name: Install pywinrm pip: name: pywinrm state: present ansible-server에 접속하여 수동으로 pip install pywinrm을 수행했는데 역시 에러가 발생합니다. python 버전을 업그레이드 하라고 메시지가 나오는데 향후 수업 따라하기 시, 영향이 있을 듯 하여 선뜻 테스트하지 못 하고 있습니다. 해결 방법에 대해서 가이드 부탁드리겠습니다. 감사합니다 !

  • ansible
  • pywinrm
  • python
doore.park 댓글 1 좋아요 0 조회수 640

pagination - next 캐싱문제

해결됨

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

강의 코드를 작성하다가 중간에 잘못 작성한 부분이 있었는지 다음페이지를 눌렀을때 11 , 21, 31페이지로 넘어가지 않고 계속 1 ~ 10페이지만 작동을 해서 좀 이상하길래 재수정을 하고 재빌드를 했는데 코드의 이상이 없음에도 똑같이 작동하길래 .next 폴더를 삭제하고 재빌드를 했더니 정상작동 하는 것을 보았습니다. .next 폴더가 캐싱 정보를 가지고 있어서 그랬던 건가요? 만약에 .next 폴더를 건드리고 싶지 않다면 브라우저에서 캐시된 것들을 지우면 되는 건가요?

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

하위 요소에 특정 데이터를 넘길 시, 필요한 데이터만 특정해서 넘기기 vs 객체 형태로 크게 넘기기

미해결

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

안녕하세요, 강사님 "댓글구현하기"편을 보던 중 기존 업무에서도 궁금했던 점이 생각나 질문 남깁니다. 예를들어 부모요소에서 하위요소에 post객체에 속한 id값 하나만 전달하고자 합니다. 그럴 때 <하위요소 post = {post}/> 와 <하위요소 postId = {post.id}/> 중에 어떤 방식을 선호하시나요? 단, 이때 자식요소에서 post의 id외에는 필요가 없습니다. 개인적으로는 다른 사람도 저의 코드를 보고 이해할때 '아! 이 자식 요소에서는 post의 id만 사용하는 구나' 딱 알수 있기 때문에 <하위요소 postId = {post.id}/> 가 더 좋을 것 같다 생각했습니다. 강사님의 의견 여쭤보고 싶습니다. 답변 기다리겠습니다. 감사합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
김소진 댓글 1 좋아요 0 조회수 228

리액트 17버전을 사용하는 이유가 궁금합니다

해결됨

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

안녕하세요. 멘토님. 강의를 듣다 보니 react 18이 아닌 17버전을 쓰는 이유가 궁금해져서 질문 드립니다. 18 버전을 사용하게 된다면 다른 라이브러리와 호환이 안되는 이슈가 생겨서 17버전을 쓰는 것일까요? 18버전을 쓸때 어떤 이슈가 생길 수 있는지 궁금해서 질문 드립니다..!

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

rest일때만 무한 루프 도는 이유가 궁금합니다.

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 그냥 컨트롤러에서 model에 담아서 조회할떄는 무한루프가 안도는데 json으로 반환할떄는 왜 무한로프 도는지가 궁금합니다.

  • java
  • spring
  • spring-boot
  • jpa
maurizio 댓글 2 좋아요 2 조회수 644

섹션8 | 데이터 통신 강의는 아무런 반응이없네요.

해결됨

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

다음 수업 > 을 통해서 섹션8 | 데이터 통신 에 도달하였는데 아무 반응이 없네요. 해당 페이지에서 다음 수업 > geolocation 은 정상동작하네요.

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

섹션 5 퀴즈 질문

해결됨

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

질문1:빨간색 부분에 width랑 background가 하얀글씨로 되어있는데 적용이 된건가요? 그리고 강의 중 이 부분에 예시가 없어서 레퍼런스 코드를 참고해버렸는데요 질문2: transition: 제일 앞에 선언할수 있는 속성이 무엇이 있는지 질문3: transition-property: 는 어떤식으로 사용하는지 궁금합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 2 좋아요 0 조회수 277

CSS 섹션3 퀴즈 질문

해결됨

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

박스사이즈를 구하라는 문제에서 저는 div의 크기를 생각하고 24*3(폰트사이즈*3em) + 20(가로세로 padding 10+10) =92 생각했는데 93이라는 약간의 오차도 있고 정답은 폰트사이즈인 72네요 ㅠ 1.제가 문제를 잘못이해했는지 2.div크기 구하는데 오차가 발생하는 이유 위 두가지가 궁금합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 2 좋아요 0 조회수 381

MySQL Workbench 예기치 못한 상황에 종료되었습니다. ( 버전문제 )

해결됨

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

프론트 부분 회원가입한 후 router설정 까지 끝낸 후, 회원정보가 잘 들어갔는지 확인하기 위해 Workbench에서 Users테이블을 클릭 했는데,, 바로 예기치 않게 종료되었습니다. 가 떴습니다. 구글링 해본 결과 버전이 문제인데 싹 - 지우고 다운그레이 하라고 하더라구요. 지금 버전이 8.0.32 인데 몇으로 다운그레이 해야할까요 ? + 그 전까지는 잘 작동되던 워크벤치가 왜 갑자기 버전충돌이 일어난거죠 ?

  • react
  • redux
  • node.js
  • express
  • next.js
아름잉 댓글 1 좋아요 0 조회수 737

redux toolkit payload data 질문

해결됨

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

https://github.com/ZeroCho/react-nodebird/tree/master/toolkit redux toolkit으로 바꾸면서 제로초님 강의를 듣고있는데 .addCase(addComment.fulfilled, (draft, action) => { const post = draft.mainPosts.find((v) => v.id === action.data.PostId); console.log('draft', draft, 'post', post, 'Comments', post.Coments); post.Comments.unshift(action.data); draft.addCommentLoading = false; draft.addCommentDone = true; }) 이런 코드를 보면 action.data이렇게 action에서 data를 가져오는데 제가 redux devtools에서 봤을 때 action안에 값들은 action.payload에 저장이 되어있는거 같습니다 혹시 값들을 action.data로 저장하는 방법이 있나요?

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

인기 태그

인프런 TOP Writers

주간 인기글