Redux Toolkit

김미영·2022년 12월 19일
0

12월

목록 보기
17/17

리덕스툴킷 설치

yarn add react-redux @reduxjs/toolkit

일반 리덕스 → 리덕스툴킷으로 코드 수정

수정 전

수정 후

리덕스툴킷으로 변경 하고있었는데 오류남.

오류발생

객체 리턴 시 ()소괄호로 감싸줘야하는데 간과함. 해결완료

devtools 확장플러그인 : 디버깅에 엄청 도움이 된다. 이건 redux toolkit에 포함되어있는 기능임.

  • 크롬에서 확장프로그램 설치

리덕스 사용 안하는 웹에서는 활성화가 안됨

리덕스 사용하는 웹에서는 초록색으로 활성화

개발자도구 > Redux 클릭 하고 그 웹에서 state에 어떠한 변화가 생기면 어떻게 변화가 생겼는지 diff에 나타남

profile
프론트엔드 지망생

2개의 댓글

comment-user-thumbnail
2022년 12월 20일

리덕스 툴킷 참 몰랐는데 덕분에 알게되었네요 감사해요

답글 달기
comment-user-thumbnail
2023년 5월 26일

14강 - 한글과 콘텐츠 형식 출력하기
[
한글 인코딩은
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
을 추가해줘야 한다.
네트워크 탭 > 파일 클릭 > content-type에 text/html; charset=UTF-8 를 확인해야 한다.
]

15강 - GET 요청과 쿼리 스트링
[
http://localhost/hello?cnt=3에서 "?cnt=3" 은 쿼리스트링 이라한다.
HttpServletRequest request, HttpServletResponse response 중에서
request는 입력도구 / response는 출력도구 이다.
]

16강 - 기본 값 사용하기
[

String cnt = request.getParameter("cnt");
int cnt = 100;
if(cnt
!= null && !cnt.equals(""))
cnt = Integer.parseInt(cnt
);
]

17강 - 사용자 입력을 통한 GET 요청
[
html의 form태그의 action 값은 만약 hi라고 적었으면 http://.../hi 가 된다.
input name에 키값을 만들어주고 키값이 있으면 그것으로 쿼리스트링을 만들어준다.
어노테이션의 값과 form태그의 action값이 일치해야 한다.
]

18강 - 입력할 내용이 많은 경우는 post 요청
[
post는 일반적으로 요청과 제출 두 단계로 나누어서 일을 처리하려고 할 때 사용한다.
사용자 입력 시 쿼리스트링에 자동으로 사용자가 입력한 값이 들어가고있다. 이는 잘못된 것.
form태그의 action을 전달하는 방법이 크게 2가지가 있다.

  • 옵션 지정안하면 입력받은 값은 쿼리값으로 전달된다.(기본값 get)
  • post로 지정 시 사용자가 입력한것을 제출하는 것으로 바꾸고 그렇게 되면 요청body에 붙어서 전달된다.
    이렇게 하고 개발자도구 > 네트워크 > 해당 파일 클릭하면 요청 메서드가 post인것을 확인할 수 있다.
    ]

19강 - 한글 입력 문제
[
UTF-8은 기본적으로 멀티바이트 문자이다.
영어는 1문자당 1byte, 한글은 1문자당 2byte이다.
나는 내용에 한글을 입력했기에 2byte가 한번에 전달되게되는데 톰캣에서는
ISO-8859-1 이라는 인코딩 방식을 사용한다.
얘는 1byte를 1문자로 인식하기 때문에 한글 3글자를 입력하면 6글자로 인식하게되고
그래서 한글이 깨지는 현상이 발생한다.
이것을 해결하려면 request요청에 utf-8방식으로 읽어달라고 요청해야 한다.
그래서 java파일에서 사용자입력을 받기 전 줄에 request.setCharacterEncoding("UTF-8"); 이것을 추가해준다.
톰캣 환경설정에서 커넥터 옵션을 변경해주면 되는데 일반적으로 톰캣서버의 설정은 잘 건들지 않는다.
이유는.. 그럼 다른 파일도 전부 동일한 환경으로 돌아갈 것이기 때문에..
]

20강 - 서블릿 필터
[
was를 톰캣 사용중 / 톰캣 사용자 요청 들어오면 -> 적절한 소프트웨어를 실행해서 그 결과를 돌려주게 되어있음
그 소프트웨어를 서블릿이라고 함. 서버쪽에는 어플리케이션이라 그 조각을 실행하게 됨.
서블릿 실행 -> 메모리 공간을 서블릿 컨테이너라고 함. 왓스는 서블릿을 실행시켜서
서블릿컨테이너에 담아놓고 그 결과를 돌려주게 되고 사용하지 않으면 삭제됨.
톰캣이란 여러 어플리케이션을 서비스하는 하나의 컨테이너임.
한 지붕에 여러가족이 살고있는 개념.
우리 가족의 설정을 맞춰서 한 지붕의 설정을 모두 바꾼다면 부담스러울 것임.
그래서 우리것에만 영향을 주게 할 수 있는데 이것은 서블릿마다 바꿔주기는 어려울 것임.
그래서 요청,응답 사이에 끼울 수 있는 소프트웨어가 있음.
이 소프트웨어는 요청을 가로채서 소프트웨어가 실행된 후 서블릿이 실행되는데
서블릿이 실행되냐 마냐도 이 소프트웨어가 결정할 수 있음.
수문장역할. 접근권한이 있는지 없는지도 체크할 수 있어 인증,권한 부분도 담당할 수 있음.
그래서 이 소프트웨어가 그 지붕에 살고있는 모든집의 설정을 한번에 설정해줄 수도 있음.
먼저 실행되게 할 수도 있고 요청을 거치고 서블릿을 거쳐 응답 할 때에도 실행되게 할 수 있음.

filterChain 이 흐름을 다음 녀석으로 넘겨줄건지 말건지에 대해 얘가 결정함.
chain.doFilter(request, response);
System.out.println("hello filter");
이 코드를 예로들면 추가하면 chain.doFilter(request, response); 이 코드가 실행되면서 흐름을 넘겨서 다음 필터나 서블릿이 실행되게 함.
그리고 결과가 돌아오면 System.out.println("hello filter"); 이 코드가 실행됨.

           System.out.println("before filter");
           chain.doFilter(request, response);
           System.out.println("after filter");

코드는 순서대로 실행된다.
이 코드는 before filter가 콘솔에 찍히고, 서블릿이 실행된다.
서블릿 실행 후 결과가 돌아오면 after filter가 콘솔에 찍히게 된다.
즉 서블릿 실행 전 뭔가 실행시키고 싶으면 chain.doFilter(request, response); 이 코드 전에 적고
후에 실행시키고 싶으면 코드 다음에 적으면 된다.
]

23강 - 여러 개의 Submit 버튼 사용하기
[
버튼이 여러개 있을 경우 input(submit)에 name을 지정해주면 된다.
]

24강 - 입력 데이터 배열로 보내기
[
input값이 여러개 있을 경우 값을 배열로 보내기 위해서 getParameterValues 라는 속성을 사용한다.
String[] num = request.getParameterValues("num");
이렇게 사용 시 num
이라는 배열에 값이 전부 담긴다.
]

25강 - 상태 유지를 필요로 하는 경우와 구현의 어려움
[
별내용없음. 계산기 만드는 초입부분
]

26강 - Application객체와 그것을 사용한 상태 값 저장
[
Application 저장소 : 서블릿 컨텍스트 -> 서블릿들이 서로간의 문맥을 이어갈 수 있도록 저장소로 사용될 수 있는 공간
ServletContext application = request.getServletContext();
이러한 코드를 작성하고 변수명을 불러와 사용할 수 있다.
application.setAttribute("value", v);
이러한 코드로 값을 저장함.. setAttribute는 MAP 컬렉션과 비슷하다고 함.
그러나 예제가 어플리케이션을 사용하기 적합한 예제는 아니라고 함
]

27강 - Session 객체로 상태 값 저장하기(그리고 Application 객체와의 차이점)
[
Application = 어플리케이션 전역에서 사용할 수 있다.
Session = 세션 범주 내에서 사용할 수 있다. (현재 접속한 사용자별로 각자 사용할 수 있다는 뜻.)
브라우저가 달라지면 다른 사용자로 인식한다. 그러나 같은 브라우저에서 동일한 탭을 두개 띄워놓고
한 탭에서 5 + 누르고, 다른 탭에서 3 = 을 누르면 8이라는 결과값이 나온다.
]

28강 - WAS가 현재사용자(Session)을 구분하는 방식
[
브라우저 서버에 요청 -> 사용자 요청을 수반한 프로그램 처리 -> 프로그램에서 다른 서블릿에게 전달,공유하고싶은 내용이 있을 때
저장하는 공간을 어플리케이션 이라고 한다.
어플리케이션에는 사용자마다 저장할 수 있는 세션공간이 따로 있다. 그건 개인사물함과 비슷한 모습이다.
사용자 요청이 오면 서블릿 실행 -> 처음 요청일경우 새로운 사용자라고 인식 -> 세션은 새로운 사용자를 위한 공간은 아직 마련되어있지 않음 ->
다만 새로운사용자던 기존 사용자던 요청에 의해서 실행되는 서블릿이 실행되다가 어플리케이션은 모든 요청에 의한 서블릿이 어플리케이션에 값을 남길 순 있다. ->
그런데 세션은 그게 안된다. 사용자가 아이디를 가지고있어야하고 세션id를 가지고 있는 사람이 세션공간에 값을 넣을 수 있다.
그래서 처음에 온 사용자는 헬스장에 처음와 아직 회원권을 끊지않은 사람이라고 생각하면 된다.
한번 왔다 가게되면 세션에서 id를 하나 부여해줌. 그럼 그걸 마치 본인 회원번호처럼 들고다니면 됨. 그게 해당 사용자의 세션공간임.
그리고 다음에 오게되면 그 회원번호에 값을 넣을 수 있음.(처음에는 안되고 세션id를 받고나서부터 가능하다는 말)
세션id가 WAS에 의해 발급이 되고 브라우저를 닫으면 사라진다 (프론트의 로컬스토리지,세션스토리지와 비슷한 것 같음)
세션을 사용 시 세션메소드를 통해 세션의 시간을 지정하고, 세션이 생성되었는지, 세션이 언제 시작됐는지 언제 마지막으로 요청됐는지까지 확인할 수 있다.
]

29강 - Cookie를 이용해 상태 값 유지하기
[
Cookie = 상태값을 서버에 두는 것이 아니라, 클라이언트가 가지고 갔다 다시 가지고 오는 형태의 값
서버 저장소는 Application과 Session이 있고, 클라이언트 저장소는 Cookie가 있다.
Cookie 사용 시 :
브라우저가 알아서 설정해주는 Header -> ex) getHeader("remote-host")
내가 보내는 사용자 데이터가 있음. -> ex) getParameter("x")
쿠키도 내가 직접 보내주는건 아니지만 쿠키가 있으면 브라우저가 알아서 가져감 -> ex) getCookies(); 이걸 이용해서 쿠키를 꺼내 쓸 수 있음. addCookie();를 사용하면 쿠키를 심어서 보낼 수도 있음.
쿠키는 키와 값으로 구분된다.
Cookie cookie = new Cookie("c", String.valueOf(result));
response.addCookie(cookie);
이렇게 요청하면 쿠키를 저장하게 된다.

쿠키 읽기
Cookie[] cookies = request.getCookies(); (쿠키가 여러개일 수 있기대문에 배열로 받아온다)
String _c = "";

if (cookies != null)
for (Cookie cookie : cookies) // 쿠키들을 돌면서 내가 찾는 키값을 찾아야한다
if("c".equals(cookie.getName()))
_c = cookie.getValue();

이런식으로 읽어올 수 있다.
** 쿠키 값으로 보낼 수 있는 것은 무조건 문자형 이여야만 한다. 그것도 URL에 사용할 수 있는 형태만 가능하다.

답글 달기