[React / Spring Boot] ToDoList #4(fin) - 리액트 컴포넌트 분리 / 마무리

Поделиться
HTML-код
  • Опубликовано: 10 янв 2025

Комментарии • 23

  • @Spring-k6d
    @Spring-k6d 2 года назад +1

    정말 잘 들었습니다 강의 디테일 부터 영상 진행속도, 딕션 뭐 하나 빠지는게 없네요 이런 강의가 앞으로도 많이 나오길 바라겠습니다 .
    설명도 그냥 넘어가지않고 이 속성이 무엇인지 왜 추가해주는지에 대한 디테일이 정말 앞으로 이 강의를 듣는 사람에게 많은 도움이 될 것이라 기대됩니다 ! 감사합니다 ! 좋은 강의 무료로 배포해주셔서

    • @allssu
      @allssu  2 года назад

      감사합니다👍

  • @ByongyulChoi
    @ByongyulChoi Год назад

    개발 빌드환경에서 프론트엔드 서버도 돌리고 백엔드도 돌리는 것 같은데 프로덕션에서는 리액트를 빌드해서 스프링부트에 어떻게 담아서 퍼블리시 하는지요?

  • @robertlee1042
    @robertlee1042 Год назад +1

    insertTodo 기능도, db의 접근 리소스를 줄이고, 프론트에서 처리하실수있다는 말에 일단 코드를 짜보았슨비다.
    setTodos([...todos, {
    todoName: input
    }]);
    해당 코드로 단순 나열 ui는 완성이 되었는데, 해당코드로는 todo의 id값이 없기에 수정, 삭제가 오류가 있습니다.
    id값은 백엔드에서 unique 값으로 생성중인데, 프론트에서 처리하다간 사이드이펙트가 좀 생길 우려가 있네요.
    그냥 궁금해서 여쭤보는 사항입니다. 프론트에서만 처리시에 다른기능에 문제없이 처리가 될까요?

    • @allssu
      @allssu  Год назад

      생성할때랑 리스트 조회할때 각각 키를 받을수도 있어요🥰 저정도는 optimistic update를 하는데 문제는 없어 보여용

    • @robertlee1042
      @robertlee1042 Год назад

      @@allssu 네 감사합니다!! js 쪽에서도 직접 관리가 가능하군요! 몰랐던 내용 알려주셔서 감사합니다😁😁

  • @이호현-o4c
    @이호현-o4c 3 года назад +1

    선생님 따라하는것 뿐이지만 얼쑤님 설명을 너무 잘해주셔서 잘따라할수있었던것 같습니다 좋은 영상 감사합니다!! 다만 제 노트북에서만 할 수 있다는게 좀 아쉬운 부분인거 같습니다ㅜㅜ

    • @allssu
      @allssu  3 года назад +1

      따라하다 익히는거죠 뭐👍 노트북같은 로컬환경에서 띄울 수도 있지만, AWS나 google cloud 같은 클라우드 환경을 이용하시면 원격 서버에 소스와 어플리케이션을 업로드 하실 수 있습니다!

    • @이호현-o4c
      @이호현-o4c 3 года назад +1

      @@allssu 귀찮으셨을텐데 댓글마다 답글달아주시고 너무 잘 알려주셔서 끝까지 따라 만들수 있었네요 ㅎㅎ 너무 뿌듯합니다 ㅎㅎ
      더 좋은영상 부탁드립니다

  • @pjw00511
    @pjw00511 3 года назад +1

    안녕하세요! 영상 잘 보았습니다~
    궁금하게 있는데
    컴포넌트라는게 기능 하나를 의미하는 건가요?
    그리고 이것을 분리하는 이유는 무엇인가요?

    • @allssu
      @allssu  3 года назад

      안녕하세요!😆 컴포넌트는 말씀하신대로 동작하는 기능 단위라고 보시면 됩니다! 스프링 리액트 무관하고 컴포넌트를 분리해서 하나의 기능 단위로 만들면 컴포넌트를 조립해서 사용이 가능해집니다! ToDoList의 경우 CRUD 하나씩만 만들었지만, 웹서비스를 만들기 위해서 수많은 기능을 만들어야 하기 때문이에요! 결국 하나의 동작하는 기능단위로 응집도를 높이고, 재사용성을 위해 컴포넌트를 분리하게 됩니다🤩

    • @pjw00511
      @pjw00511 3 года назад +1

      @@allssu 이해됐습니다~감사합니다.

  • @seungkey_mouse
    @seungkey_mouse 3 года назад +1

    얼쑤님 친절하고 깔끔한 영상 잘따라왔습니다! 설명 너무 잘해주셔서 이해가 다 됐습니다!
    크게 보면, (Docker서버Mysql 가동 + SpringBoot서버가동 + React서버 가동)으로 이루어져있는데, 실제로 웹페이지에 올리려면 여기서 어떤 툴이나 방식을 이용해서 도메인서버에 올릴 수 있을까요? 어떻게 구글링해야될지 몰라서 여쭤봅니다..

    • @seungkey_mouse
      @seungkey_mouse 3 года назад +1

      그리고 SpringBoot에서 서버를 꺼버리면 기존 데이터가 다 날라가는데 ,이런경우는 어떤 방식으로 저장해놔야될까요? 데이터값을 Spring에다가 text파일같은곳에 넣어놓아야 될까요?

    • @allssu
      @allssu  3 года назад +1

      안녕하세요! 문의주신내용 두가지 중 첫번째를 보면
      실제 운영 서버는 어떻게 올리는가?
      1. 서버를 직접 사도 되지만 부담스러우니, 클라우드 같은 환경에서 적절한 용량의 서버를 대여합니다.
      2. AWS EC2같은 서버를 우선 기동시키고, 리눅스 많이 쓰니까, 리눅스에서 Java + NodeJS를 설치하거나, 또는 Docker를 설치합니다.
      3-1. Java나 NodeJS 같은 런타임 환경을 설치해서 코드를 가져온 다음 실행하는 방법이 있습니다. 리눅스 디렉토리에 클래스파일 또는 Build된 프론트엔드를 올린다음 로컬에서 실행했던 것처럼 리눅스에서 실행하면 되죠!
      3-2. 스프링부트 프로젝트나 리액트 프로젝트를 도커라이징(dockerizing) 할 수 있습니다. 우리가 만든 어플리케이션을 도커 이미지화 시키는 방법이에요! 이미지를 만들었으면, 리눅스 서버에 떠있는 도커 에이전트에 우리가 만든 이미지를 올릴 수 있습니다. 이렇게 하면 자바나 노드를 설치하지 않고 도커로만 실행할 수 있어요. 마치 MySQL을 직접 설치 안한것 처럼요!
      4. 이러한 배포를 자동화 하기 위해서는 CI/CD라는게 필요합니다. Git에 올려져있는 소스를 Jenkins에서 받아서 도커라이징 해서 자동으로 배포되게도 설정이 가능해요!

    • @allssu
      @allssu  3 года назад +1

      두번째를 보면, 서버를 꺼버리면 기존 데이터가 다 날아가기 때문에, 데이터베이스 환경에 저장을 하게 됩니다. 실제 운영 환경에서는 기업의 데이터센터나 클라우드에 있는 데이터베이스 환경을 많이 사용하고, 기동한 데이터베이스의 데이터 손실 없이 무결성을 유지하려고 많은 노력을 들입니다. 제가 설명드렸던 Spring Data JPA의 ddl-auto 설정의 경우 대부분 none만 사용하고 create 또는 drop같은 세팅은 전혀 안쓰게 되죠! 그렇게 하면 데이터베이스에 영속적으로 데이터가 유지 될 수 있습니다.

    • @allssu
      @allssu  3 года назад +1

      추가적으로 두번째 질문주신 경우, 단순 데이터가 아닌 이미지나 음악 영상 같은 바이너리 파일을 저장하기 위해 따로 저장소를 사용합니다. 서버를 직접 구축한다면 SSD, HDD같은곳에 저장하고, 클라우드 환경에서는 amazon s3, google cloud storage 같은 클라우드 저장소를 많이 사용하게 되고, 이런 저장소를 스프링 프레임워크 같은 웹 서버 프레임워크에서 연결해서 파일을 저장하게 됩니다.
      도움이 되셨으면 좋겠습니다!

    • @seungkey_mouse
      @seungkey_mouse 3 года назад +1

      @@allssu 와 정말 깔끔하게 예시도 잘맞춰서 이해잘됐습니다..구글링하면서 도커라이징,도커이미지생성같은게 나와서 무슨말인가했는데 이미지화가 가능하군요!
      혹시 그러면 Mysql은 현재 도커에서 설치된걸 사용중인데, 3-1,3-2단계에서 연동을해주면 되는걸까요?