복습

npm

• 옵션값

• d : 개발자 모드로 사용(npm install -d)

---

CRUD 복습

• 프로젝트생성

• 생성법(빌드방식에 따라) :
  - gradle - json 형식 사용(application.yml)
  - maven - xml파일 사용(SAXXXException, ParseXXXException과 같이 문법에 오류 있으면 오류 발생)
  - Port : 5001
  

• jsp 호출(controller 경유여부가 다르다!!!)

• webapp :
  - scope : pageContext
  - https://localhost:5001/user.jsp -> src>main>webapp
  - 표준 서블릿이 처리(제어역전 상관없음, 스프링관여 없었음, 경유x)
• WEB-INF
  - scope : request(??java와 jsp 사이에서 유지할 수 있도록 해준다. 관련 클래스 Model-scope가 request)
  - https://localhost:5001/user -> /WEB-INF
  - 스프링을 활용하였다.(제어역전 있었음. 스프링이 관여함, 경유o)

둘의 차이가 뭔지 확실히 알고 넘어가자.
스프링을 사용하면서 어디서 스프링이 작용하는지 모른다? 노놉

✅ JSP 스코프에는 Page, Rquest, Session, Application이 있음. 변수의 생존 기간을 제어한다.

---

• 1. page(pageContext) : 단 하나 (스크립틀릿 참조 시 -> JspContext>
     - 하나의 JSP페이지
     - 페이지는 하나의 JSP이므로, 한 페이지에서 다른 페이지의 정보를 사용할 수 없다.
• 2. [[request]] (스크립틀릿 참조 시 -> ServletRequest)
     - 하나의 http요청 정보
     - 클라이언트로부터 오는 한번의 요청과 관련된 영역으로, 브라우저가 결과를 받으면 요청했던 request객체는 사라짐.
     - 하나의 요청 처리하는데 모든 JSP를 포함한다.
     - Request객체 - 웹 브라우저에 웹 사이트 주소 입력하면, 웹 브라우저는 해당 웹 서버에 연결 후 요청 정보 전송함.
     - Request객체는 JSP페이지에서 가장 많이 사용되는 기본 객체
• 3. [[Session]] (스크립틀릿 참조 시 -> HttpSession)
     - 하나의 브라우저
     - 세션은 하나의 브라우저(Chrome, Internet, Microsoft Edge 등) 내에서만 정보/값 공유한다.
     - 주로 로그인 정보/상태를 유지할때 사용함.
• 4. application (스크립틀릿 참조 시 -> ServletRequest)
     - 하나의 웹 애플리케이션
     - 애플리케이션은 모든 유저, 모든 페이지, 페이지 요청, 세션에 공유될 수 있음.
     - 위의 예제를 통해 application기본객체는 서로 다른 JSP에서도 정보/값을 공유하고 있음
     - (모든 JSP에서 사용가능)을 알 수 있다!

---

• 어노테이션?

• 클래스 앞에 @Controller, @RestController => 정보를 먼저 쥔다!!!

컨트롤계층 지원 어노테이션 -> 웹 요청을 받고 적절한 응답을 반환하는 역할

@Controller -> 페이지로 출력

• 메소드 이름이 페이지 이름이 됨.
• 화면 직접 처리 시 사용
• Model 클래스와 함께 사용
• @RequestMapping + @ Controller -> WebServlet임!
  

@RestController -> 문자열로 출력

• [[mime type]] : 아래의 경우 사용(페이지 출력 아닌 모든 경우) <- Model 사용 필요 x
  - text/plain
  - application/json
• back front의 완전한 분리를 지원하는 설계(UI, JSON 활용 필요 시 사용)
• 이 어노테이션이 붙은 클래스 메소드의 리턴타입은 String이다.
• 주의, 절대 redirect나 forward 붙이지 말 것!!
• 세션을 주입받을 수 있다 -> 상태관리([쿠키], [[Session]](서버 cache메모리) -> 타임라인 존재)
  

@XXXController 뒤에 괄호를 넣어 빈의 이름을 설정할 수 있으나, 클래스 이름과 동일하게 입력하는 것 필요(P.928)
왜? 이름을 다르게 할 경우, 클래스를 찾는 과정에서 충돌이 일어날 수 있음. 따로 입력을 하지 않는 경우, default로 클래스 이름으로 생성이 됨.
예 : @Controller("noticeController")

---

강의 내용

회원가입 구현

• 코드설계?

• role -> Spring Security

• MVC -> FLUX 아키텍쳐(중심 : 원웨이) -> Redux탄생

• front
  - jsp : 기존 스프링에서 실습 진행한 내용
  - 리액트 : FLUX아키텍쳐, 시큐리티와 함께 사용해보려고 함.
  - jstl : 사용자 정의 태그, 라이브러리, 쿠키 세션, 자바 코드 아닌 태그 사용 -> 디자이너/백엔지니어와 같이 관리

• 프로젝트 설계

• 프론트 : 리액트(with 리덕스)

• 백엔드 : SpringBoot

• 서버 : 파이어베이스

• 시큐리티 : 스프링 시큐리티

• 리액트 코드리뷰 및 환경설정

• package.json 확인

{  
  "name": "reduxDemo2",  
  "version": "0.1.0",  
  "private": true,  
  "dependencies": {  
    "@fortawesome/fontawesome-free": "^6.5.1",  
    "@testing-library/jest-dom": "^5.14.1",  
    "@testing-library/react": "^13.0.0",  
    "@testing-library/user-event": "^13.2.1",  
    "axios": "^1.6.5",  
    "bootstrap": "^5.3.2",  
    "firebase": "^9.18.0",  
    "firebase-auth": "^0.1.2",  
    "react": "^18.2.0",  
    "react-bootstrap": "^2.9.2",  
    "react-dom": "^18.2.0",  
    "react-quill": "^2.0.0",  
    "react-redux": "^9.0.4",  

	--라우터 설정 위한 의존성
    "react-router": "^6.21.1",  
    "react-router-dom": "^6.21.1",  
 
	"react-scripts": "5.0.1",  
    "redux": "^5.0.1",  
    "styled-components": "^6.1.6",  
    "web-vitals": "^2.1.0"  
  },  
  "scripts": {  
    "start": "react-scripts start",  
    "build": "react-scripts build",  
    "test": "react-scripts test",  
    "eject": "react-scripts eject"  
  },  
  "eslintConfig": {  
    "extends": [  
      "react-app",  
      "react-app/jest"  
    ]  
  },  
  "browserslist": {  
    "production": [  
      ">0.2%",  
      "not dead",  
      "not op_mini all"  
    ],  
    "development": [  
      "last 1 chrome version",  
      "last 1 firefox version",  
      "last 1 safari version"  
    ]  
  }  
}

• env : 파이어베이스, 카카오 app키 수정
• App.jsx : 싱글페이지 어플리케이션(SPA)위한 코딩전개 페이지, 라우터를 활용한 화면전환 처리!!(Not location, sendRedirect, forward)
• Toast.jsx : java의 setTimeOut과 같이 일정 시간이 지나면 알림창이 보이도록 함수를 설정해 둔 jsx -> 사용 필요한 곳에서 {toastStatus.status && }로 사용 -> Redux폴더 toastStatus의 action.js에서 자세한 설정 내용을 확인할 수 있다.
  - 왜 한 곳에서 기능을 정의하지 않고, 리액트, 리덕스를 나눠서 구현해야하는거지??
  - Props를 통한 값, 상태의 전달이 아니라 리덕스를 통해 스토어에서 여러 리듀서를 관리하고, 필요한 곳에서 사용한다.
• Header : 메뉴 바 -> 추후에는 Navbar와 나눠서 제작 필요

• 로그아웃 기능 구현

• 로그아웃을 하는 경우, 메시지 전송, 홈이동, 랜더링을 통한 로컬스토리지 비우기(로그아웃을 실행해도 화면이 새로 고침되지 않으면 로컬스토리지의 초기화는 이루어지지 못 함. 따라서 함수의 끝에 화면 랜더링 부분이 반드시 들어가야함.)

const logoutAction = () => {  
  logout(userAuth.auth);  
  dispatch(setToastMsg(email+"님 로그아웃."));  
  /*로그아웃 처리되었을 때, 이동할 Path 정보 설정*/  
  navigate("/");  
  /*왜 로그아웃 후 리로드를 해야할까?? Local Storage 변경부분은 새로고침이 되어야 확인이 가능하다!!*/  
  window.location.reload();  
}  return (  
  <>
  화면 내용
  </>

FLUX 아키텍쳐는
원웨이 방식에서 변동값이 있을 때, 신호 변경된 것으로 다시 화면에 띄울 수 있도록!! (Action)

---

Spring 프로젝트 파일 생성

• create

• 의존성 주입 : Spring Web, Spring Boot DevTolls, Lombok,
• Spring Security?? 실행 시 매번 랜덤하게 비밀번호를 콘솔창에 생성해줄 수 있음
  

---