http

컴포넌트들이 모여 어떠한 하나의 기능을 수행할 때, 서버 통신이 개입되는 경우가 많다. 이 때, 만약 백엔드 단에서 api가 덜 만들어졌거나 원하는 결과를 넘겨주지 않는다면 먼저 프론트 개발을 들어가기도 어렵고, 완성되지 않은 api를 요구하는 기능의 테스트를 건너뛸 수 밖에 없다.결국 서버 통신이 요구되는 어떠한 기능이 잘 돌아가는지 보장할 수도 없고, 추후에 추가하더라도 이미 다른 코드들이 많이 짜여져있는 상황인데 이 기능의 예상치 못한 버그로 인해 많은 코드를 고쳐야할 수도 있다. 이러한 상황을 방지하기 위해 nock과 같은 라이브러리도 있지만, 나는 MSW를 도입하기로 하였다. MSW란?  MSW는 API 요청을 가로채서 사전에 설정해둔 목업 데이터를 넘겨주도록 설정해 주는 도구이다.nock과 같..

서비스를 구현할 때, 성능을 최대한으로 끌어올리기 위해 캐시를 흔히 사용한다.여러 종류의 캐시가 있지만, 여기서는 HTTP Cache에 대해 알아보려고 한다. Cache-Control 헤더 브라우저가 HTML, CSS, JS, 이미지, 비디오 파일 등 서버에 처음 요청할 때, 브라우저와 서버는 완전한 HTTP 요청/응답을 주고받는다.이 때, Cache-Control 헤더 응답 값에 따라서 처음 요청한 리소스의 캐싱 방식이 결정되게 된다. max-age 예를 들어 Cache-Control 헤더 값으로 max-age=10 을 설정하면, 리소스에 대한 캐시의 유효한 시간은 10초가 된다.  예를 들어 위와 같은 요청에서 완전한 HTTP 요청/응답을 주고받고 status 200이 반환된 것을 확인할 수 있다. ..

이전 포스팅에서는 도커파일을 통해 도커 이미지를 생성한 후 Docker hub에 올리는 방법을 알아보았다. 이제 해당 이미지를 AWS EC2 에서 사용하기 위해 AWS에 접속 후 인스턴스를 생성해보자. ✅패키지 매니저: npm ✅윈도우(Windows) ✅React(Create React App) AWS에 접속한 뒤 인스턴스 시작을 클릭한다. 우선 인스턴스 이름을 입력해준다. 그리고 스크롤을 내리면 위와 같이 키 페어를 생성하는 항목이 나온다. 새 키 페어 생성을 누른 뒤 키 페어 이름을 입력하고 키 페어 유형은 RSA 그대로 냅둔다. 우리는 putty에 접속하여 인스턴스에 접근할 것이므로 키 파일 형식을 .ppk로 체크한 뒤 생성해준다. 다운로드 된 키 페어를 잘 저장해준다. 그 후 해당 페이지에서 인스..

이제 API에 대해 알아보도록 하자. API란 Application Programing Interface로, 쉽게 말해 어떠한 응용프로그램에서 데이터를 주고받기 위한 방법을 의미한다. HelloController 파일에 위의 코드를 추가로 작성해준다. @ResponseBody 는 http 프로토콜의 body 를 의미하고, 위의 코드는 이 body 에다가 return 하는 내용을 직접 넣어주겠다는 의미이다. 템플릿 엔진과의 차이점은 View 같은 것이 있는 것이 아니라 그냥 문자열 그대로가 return 된다는 것이다. localhost:8080/hello-string?name=spring! 을 입력해주면 위와 같은 창이 뜨고, 페이지 소스를 확인해보면 HTML 이 아닌 return 해준 문자열 그대로가 r..