실전! 스프링 부트 3 & 리액트로 시작하는 모던 웹 애플리케이션 개발

주하 힌쿨라 (Juha Hinkula)

주하 힌쿨라는 핀란드 Haaga-Helia 대학교 응용과학부의 소프트웨어 개발 강사로서 헬싱키 대학교에서 컴퓨터공학 석사 학위를 받은 18년차 소프트웨어 개발자다. 최근 몇 년 동안에는 최신 풀스택 개발에 집중했으며, 안드로이드 네이티브 기술과 리액트 네이티브를 이용한 모바일 개발에도 관심이 많다.

변영인

2021년부터 프로그래밍을 가르치고 있다. 데이터 분석, 웹 애플리케이션, 크로스플랫폼 개발 등에 관심이 많다. 단순히 최신 기술을 따라가기보다는 상황과 환경에 적정한 기술이 무엇인지 고민하는 법을 나누려 한다.

• 01부] 스프링 부트를 이용한 백엔드 프로그래밍
•  
• ▣ 01장: 환경과 툴 설정 - 백엔드
• 기술 요구 사항
• 이클립스 설치
• 그레이들의 이해
• 스프링 이니셜라이저 활용
• MariaDB 설치
• 요약
• 문제
• 추가 자료
•  
• ▣ 02장: 의존성 주입 이해하기
• 기술 요구 사항
• 의존성 주입 소개
• 스프링 부트에서 의존성 주입 이용
• 요약
• 문제
• 추가 자료
•  
• ▣ 03장: JPA를 이용한 데이터베이스 생성 및 접근
• 기술 요구 사항
• ORM, JPA, 하이버네이트 기초
• 엔티티 클래스 만들기
• CRUD 리포지터리 만들기
• 테이블 간의 관계 추가
• MariaDB 데이터베이스 설정
• 요약
• 문제
• 추가 자료
•  
• ▣ 04장: 스프링 부트로 RESTful 웹 서비스 만들기
• 기술 요구 사항
• REST 기초
• 스프링 부트로 RESTful 웹 서비스 만들기
• 스프링 데이터 REST 이용하기
• RESTful API 문서화
• 요약
• 문제
• 추가 자료
•  
• ▣ 05장: 백엔드 보호
• 기술 요구 사항
• 스프링 시큐리티 이해
• JWT으로 백엔드 보호하기
• 로그인 보호하기
• 다른 요청 보호하기
• 예외 처리하기
• CORS 필터 추가하기
• 역할 기반 보안
• 스프링 부트를 통한 OAuth 2 이용하기
• 요약
• 질문
• 추가 자료
•  
• ▣ 06: 백엔드 테스트하기
• 기술 요구 사항
• 스프링 부트에서의 테스트
• 테스트 케이스 만들기
• 그레이들로 테스트하기
• 테스트 주도 개발
• 요약
• 문제
• 참고자료
•  
• 02부] 리액트를 이용한 프런트엔드 프로그래밍
•  
• ▣ 07장: 환경과 툴 설정 - 프런트엔드
• 기술 요구 사항
• Node.js 설치
• Visual Studio Code 설치
• VS Code 확장
• 리액트 앱 만들기 및 실행
• 리액트 앱 수정하기
• 리액트 앱 디버깅하기
• 요약
• 문제
• 참고자료
•  
• ▣ 08장: 리액트 시작하기
• 기술 요구 사항
• 리액트 컴포넌트를 만드는 방법
• 첫 번째 리액트 앱 살펴보기
• 유용한 ES6 기능
• JSX와 스타일링
• 조건부 렌더링
• 리액트 훅
• 컨텍스트 API
• 리액트로 목록 처리
• 리액트로 이벤트 처리
• 리액트로 폼 처리
• 요약
• 문제
• 참고자료
•  
• ▣ 09: 타입스크립트 입문
• 기술 요구 사항
• 타입스크립트 이해하기
• 리액트에서 타입스크립트 기능 이용
• 타입스크립트로 리액트 앱 만들기
• 비트와 타입스크립트
• 요약
• 문제
• 참고자료
•  
• ▣ 10: 리액트로 REST API 이용하기
• 기술 요구 사항
• 프로미스
• fetch API 이용
• axios 라이브러리 이용
• 경쟁 조건 처리
• 리액트 쿼리 라이브러리 이용
• 요약
• 문제
• 참고자료
•  
• ▣ 11장: 유용한 리액트용 서드파티 컴포넌트
• 기술 요구 사항
• 서드파티 리액트 컴포넌트 설치
• AG Grid 이용
• 머티리얼 UI 컴포넌트 이용 라이브러리
• 리액트 라우터로 라우팅 관리
• 요약
• 문제
• 참고자료
•  
• 03부] 풀스택 개발
•  
• ▣ 12장: 스프링 부트 RESTful 웹 서비스를 위한 프런트엔드 설정
• 기술 요구 사항
• UI 모형 제작
• 스프링 부트 백엔드 준비
• 프런트엔드용 리액트 프로젝트 생성하기
• 요약
• 문제
• 참고자료
•  
• ▣ 13장: CRUD 기능 추가하기
• 기술 요구 사항
• 목록 페이지 만들기
• 백엔드에서 데이터 가져오기
• 환경 변수 이용
• 페이징, 필터링, 정렬 추가하기
• 삭제 기능 추가하기
• 토스트 메시지 표시
• 확인 대화 상자 창 추가하기
• 생성 기능 추가하기
• 수정 기능 추가하기
• CSV로 데이터 내보내기
• 요약
• 문제
• 참고자료
•  
• ▣ 14장: 리액트 MUI로 프런트엔드 꾸미기
• 기술 요구 사항
• MUI Button 컴포넌트 이용하기
• MUI 아이콘과 IconButton 컴포넌트 이용하기
• MUI TextField 컴포넌트 이용
• 요약
• 문제
• 참고자료
•  
• ▣ 15장: 리액트 앱 테스트하기
• 기술 요구 사항
• Jest 이용하기
• 리액트 테스팅 라이브러리 이용하기
• Vitest 이용하기
• 엔드투엔드 테스트
• 요약
• 문제
• 참고자료
•  
• ▣ 16장: 애플리케이션 보호하기
• 기술 요구 사항
• 백엔드 보호하기
• 프런트엔드 보호하기
• 요약
• 문제
• 참고자료
•  
• ▣ 17장: 애플리케이션 배포하기
• 기술 요구 사항
• AWS로 백엔드 배포하기
• Netlify로 프런트엔드 배포하기
• 도커 컨테이너 이용
• 요약
• 문제
• 참고자료

• GitHub 저장소: https://github.com/wikibook/springboot3-react
• ZIP 형식으로 다운로드: https://github.com/wikibook/springboot3-react/archive/refs/heads/main.zip

• 243쪽, 페이지 하단 예제 코드를 교체

  return (
  <div className="App">
    <input value={keyword}
      onChange={e => setKeyword(e.target.value)} />
    <button onClick={fetchData}>Fetch</button>
    <div className="ag-theme-material"
      style={{height: 500, width: 850}}>
      <AgGridReact
        rowData={repodata}
      />
      </div>
    </div>
  );

  ==>

  return (
    <>
      <input
        value={keyword}
        onChange={e => setKeyword(e.target.value)} />
      <button onClick={handleClick}>Fetch</button>
      <div className="ag-theme-material"
        style={{height: 500, width: 850}}>
        <AgGridReact
          rowData={repodata}
        />
      </div>
    </>
  );