개발항해일지 22년/7월/3주 :: CDN Invalidation, JSP, Redux

일지 2022년 7월 3주차

 

 

이번주 키워드

1. AWS

2. Dependencies 최신화

3. JS13K

    - 회의 및 webpack 작성

    - 세미나 주제 결정

 

 

.toBe와 .toEqual 다른 점

.toEqual은 값만 비교

.toBe는 원시 값 혹은 객체 인스턴스의 referential identity(참조 신분?)을 비교한다

 

즉 deep copy가 된 배열, 객체는

toEqual에서는 같지만, toBe에서는 다르다

 

 

파일 무효화

CDN 최신화를 위해 AWS 사용

CI는 자동화가 되어있고, CD는 수동으로 하는 프로젝트가 있고,

CD가 될 때 CDN에 최신 리소스로 자동으로 교체되게 하고 싶다

 

CloundFront에서 CDN의 캐시를 최신화 시켜주는 작업을 Invalidation(무효화)라고 부르는 듯

이전까지 캐시를 무효시킨다는 말일까?

 

아무튼 Github Actions이 만들어져 있다면 꽤 간단하다

yml 파일에 이런 식으로 넣어주면된다

aws cloudfront create-invalidation --distribution-id {my distribution id} --paths "/*"

my distribution에 들어갈 아이디는 다 보이니까 Github Actions에 Secret을 사용해보자

 

 

Another project

담당하게된 프로젝트에 배포가 활발하지 않아서

새로운 프로젝트에 서브로 들어갔다

이 프로젝트는 레거시가 많이 포함된 녀석이라

JSP부터 React까지 조화(?)롭다

개발 환경 구축에 들어가는 시간도 어마어마하다

 

이 프로젝트에서 하게될 점은 아마

1. 프로젝트 리드와 팀을 이뤄서 티켓을 처리

2. Front와 Back 분리

 

두 번째 녀석을 궁극적으로 이뤄내면 골을 넣은 것처럼 좋을 듯 싶다

이 것은 그냥 npm install > start로 바꾸게 되는 그날까지

 

 

Regression test

정의 때문인지 확인 테스트라고도 부르는 것 같다

이미 테스트한 그러니까 수정을 해서 확인을 한 내용에 대한 테스트를 진행하는 것

전체를 부분적으로 나눠서 수정으로 영향이 있었는지, 다른 에러가 생겼는지 확인하는 테스트

 

직접 Regression test를 하는 건 아니고,

새로운 프로젝트에 대한 기능을 알아보기 위해 Regression test 문서를 참고할 것이다.

 

 

JSP에서 살아남기

JSP가 섞인 프로젝트를 하게 됐을 때 살아남기 위해 기본 코드를 알아보자

작성은 못하더라도, 작동이 어떻게 되는지는 알아야 되겠다

참고로 JSP는 기본적으로 MVC 디자인 패턴을 사용하는 것 같다

 

인덱스 페이지는 어디서 확일할까?

관습적으로 접미사에 Controller가 붙은 녀석이 관리한다 예를들면, HomeController.java

클래스 위에 @Controller가 있으면 이녀석이 컨트롤러

 

이 페이지에 들어가면 이러한 코드가 있는데, 인덱스 주소가 요청되면 실행된다

@GetMapping(value = "/")
/* OR */
@RequestMapping(value = "/", method = RequestMethod.GET)

위의 2가지 방법은 같은 일을 한다

 

ModelAndView

ModelAndView라는 녀석을 이용해서 반환할 템플릿을 정의한다

이런식으로 속성을 정할수도, 객체를 넣어줄 수도 있다

    @RequestMapping(value = "/", method = {RequestMethod.GET})
    public ModelAndView view() {
        ModelAndView mav = new ModelAndView();
        
        mav.addObject()
        mav.setViewName();
        mav.setAttribute()
       
        return mav;
    }

 

setViewName은 이름을 정하고,

리액트로 생각하면 addObject는 차일드 컴포넌트 느낌,

setAttribute는 props를 전해주는 것 같다

 

 

react-redux => Redux toolkit

Redux toolkit을 사용하는 프로젝트에 유지보수를 맡게되었다.

Redux는 사용해봤고, toolkit은 해본적이 없어서 학습이 필요했다.

마침 egoing 선생님 강의가 나와서 있어서

react-redux부터 시작해서, toolkit 그리고 thunk까지 머리속에 그려지도록 해보자

 

react-redux

이 강의는 egoing 선생님에게 라이브로 들었던 내용이다

다시 들어도 이해가 쏙 되는 좋은 강의

 

react-redux 컨셉

1. store을 지정하고, reducer를 만들어준다

2. reducer에 초기 state를 설정한다

3. Provider 컴포넌트에 store를 props로 보내준다

4. state를 사용하고 싶은 곳에 useSelector를 사용

// useSelector에는 함수를 전해준다
// state에 있는 number를 사용하고 싶으니 이렇게

const number = useSelector(state => state.number)

 5. 바꾸고 싶은 state를 useDispatch를 사용해서 편지를 쓰듯 store로 보낸다

// dispatch의 type에 이런걸 원한다고 내용을 보낸다

const dispatch = useDispatch()
dispatch( {type: 'PLUS_NUMBER'} )

6. 편지는 reducer로 도착하고, 보내온 type에 대해 state를 변경하는 코드를 작성한다

function reducer(currentState, action) {
  if(currentState === undefined) {
    return {
      number: 1
    }
  }
  const newState = {...currentState}
  if(action.type === 'PLUS_NUMBER') {
    newState.number++
  }
  
  return newState
}

 

redux는 state를 멀리서(컴포넌트가 깊어도)도 관리할 수 있게 해준다.

각각의 역할이 있어서 해당 역할이 무엇을 하는지만 알면 굉장히 고마운 녀석이다

 

다음은 Redux Toolkit

egoing 선생님은 redux-toolkit을 create-react-app(이하 CRA) 만큼 편리한 도구라고 하신다

CRA 덕분에 react 개발이 굉장히 쉽게 되었고,

redux-toolkit은 redux를 더욱 쉽게 만들어주는 도구라고 한다.

머리속에서 redux만큼 잘 그려볼 수 있도록 학습해보자

 

 

참고 링크

실전 Amazon S3와 CloudFront로 정적 파일 배포하기

=> https://aws.amazon.com/ko/blogs/korea/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/

 

.toBe(value)

=> https://jestjs.io/docs/expect#tobevalue

 

Understanding GitHub Actions

=> https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions

 

AWS 파일 무효화

=> https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

 

확인/리그레션테스트

=> http://jidum.com/jidums/view.do?jidumId=581

 

MVC in JSP

=> https://www.javatpoint.com/MVC-in-jsp

 

Webpack

=> https://webpack.js.org/guides/getting-started/

 

react-redux

=> https://youtu.be/yjuwpf7VH74

 

 

sail by Daniel Stenholm @unsplash