Part2 : 쇼핑몰 프로젝트 1. 새로운 프로젝트 생성 & Bootstrap 사용하기 먼저 프로젝트를 생성해줘야 하므로 폴더를 만들어서 powershell 창을 열고 npx create-react-app으로 리액트 프로젝트를 만들어 줍니다. 프로젝트를 vscode로 열어서 필요없는 것들 지워주고 react bootstrap 라이브러리를 설치해줍니다. *bootstrap은 레이아웃을 복사붙여넣기식으로 편하게 개발가능한 라이브러리 입니다. 예를들어 버튼같은 것들! react bootstrap 홈페이지에서 Get started를 눌러줍니다. 중간에 npx install react-bootstrap bootstrap을 터미널에서 설치해줍니다. *tip 미리보기를 종료하고 싶을땐 ctrl + c 를 통해 미리보..

지난번 (1/2)편을 마치고 이번엔 (2/2)과정을 작성하였습니다. [코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지! (1/2) Part1 : 블로그 제작 & 기초 문법 리액트를 왜 쓰는가 Single Page Application을 만들 때 씁니다. React를 쓰면 html 재사용이 편리하다. 같은 문법으로 앱개발이 가능하다. *Single Page Application이란 하나의 페 eungae-d.tistory.com 1. 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기) 동적인 UI 만드는 3단계 1. html css로 미리 디자인 완성 2. UI의 현재 상태를 state로 저장 3. state에 따라 UI가 어떻게 보일지 작성 이것이 1번 css로 미리 디자인을 완성시켰습니다...

Part1 : 블로그 제작 & 기초 문법 1. 리액트를 왜 쓰는가 Single Page Application을 만들 때 씁니다. React를 쓰면 html 재사용이 편리하다. 같은 문법으로 앱개발이 가능하다. *Single Page Application이란 하나의 페이지를 사용하는 애플리케이션이다. SPA는 서버로부터 새로운 페이지를 가져오는 것이 아닌, 하나의 페이지에서 내용을 동적으로 변경함으로써 사용자 웹앱을 의미합니다. 전통적인 방식은 클라이언트가 최초 요청을 보내면 서버는 html 파일을 응답으로 보내고, 클라이언트가 다시 form 데이터를 전송하면 서버가 다른 html 파일을 응답으로 보내 페이지가 리로드 되는 방식이었다. 그러나 SPA 방식은 form 작성 시 ajax를 이용하여 form 데..

대부분 데이터 접근 계층은 일명 CRUD로 같은 코드를 반복 개발해야 한다. JPA를 사용하여 이 같은 문제가 발생한다. 회원 리포지토리와 상품 리포지토리가 하는 일이 비슷하다. 이런 문제를 해결하려면 제네릭과 상속을 적절히 사용해서 공통 부분을 처리하는 부모 클래스를 만들면 된다. 이것을 GenericDAO라 한다. 이 방법은 공통 기능을 구현한 부모 클래스에 너무 종속되고 구현 클래스 상속이 가지는 단점에 노출된다. 1. 스프링 데이터 JPA 소개 데이터 접근 계층을 개발할 때 구현 클래스 없이 인터페이스만 작성해도 개발을 완료할 수 있다. 일반적 CRUD 메서드는 JpaRepository 인터페이스가 공통으로 제공하므로 문제가 없다. 그런데 MemberRepository.findByUsername{..