Project 13

화면상에서 권한별 동적 렌더링에대한 고민

사용자가 작성한 사용자 본인의 게시글 및 댓글 View에는 수정 ,삭제 버튼이 보여야한다. 현재 로그인해 접속해있는 사용자의 권한을 어떤방법으로 확인해 권한별로 동적 렌더링을 진행할지에대한 고민이 시작됬다. (이전 프로젝트에서는 ThymeLeaf를 사용해 서버에서 html을 만든다음에 브라우저에게 내려줘, Spring security 및 권한 연동이 간편했지만, 이번 프로젝트는 React를 사용해 이러한 고민이 들게되었다...) 자 그럼 어떤 방식으로 브라우저에게 지금 로그인해 접속한 유저가 해당 게시글 , 댓글을 작성했다고 알려 줄 수 있을까? 나는 2가지 방법을 고안했다. 1. BackEnd 에서 권한을 확인한 후 프론트엔드에게 동적 렌더링 여부를 알려준다. 2. FrontEnd 에서 최초 로그인시 ..

Axios를 이용해 BinaryFile Upload 하기

기존 MultiPart 를 Content-Type 으로 FormData를 이용해 이미지를 업로드하는 방법은 많이 존재하지만 Octet-stream을 이용한 binary file로 업로드하는방법의 글은 없어 작성해본다. https://kdh931228.tistory.cm/62 우선 알고있는대로 axios를 이용해 input Tag에 들어온 이미지를 업로드를 해보자 현재 REST API Server Controller 상태다. header로 파일명을 받고 request에서 stream을 추출해 AWS S3로 업로드를 진행한다. Front로 돌아와 React에서 Input의 onChange를 이용해 Axios로 Post요청을 보내자. 현재 서버에서는 stream만 받고있으므로 Content-Type을 필히 o..

JWT Token, Cookie ? LocalStorage ?

요즘은 한창 프론트엔드 진행중이다. 로그인 기능을 개발하며 드디어 다시 JWT에 관해 고민하게되었다. 꽤 단골주제이긴한데, 넘겨받은 JWT 토큰을 쿠키에 저장할지, 로컬 스토리지에 저장할지다. 우선, 쿠키와 로컬스토리지 각각의 장단점부터 파악해봤다. Cookie 장점 간단한 데이터파일로 서버와 클라이언트가 쉽게 주고받을 수 있다. 단점 저장용량이 작고, 보안에 취약하다. ( 서버와 통신하며 주고받는 구간에서 탈취의 위험이 존재함 ) Local Storage 장점 클라이언트측에서 저장만하기때문에 쿠키에비해 보안 이점이있다. 브라우저를 종료해도 데이터는 남아있는다. (반영구적) 단점 모든 브라우저가 지원하지는 않는다. ( Internet Explorer 7 이하 버전은 지원하지않는다.... ) 클라이언트 즉..

Image Upload, MIME Type을 Octet-Stream으로 결정한 이유

게시판에서 사용자가 질문 글을 작성할 때, 간단하게 사용자가 이미지 1개를 올릴 수 있는 기능을 개발하기로 결정했으므로 어떤식으로 이미지를 업로드할지 고민했다. 우선 이미지 업로드는 그 전 팀프로젝트에서 한번 경험해보긴 했지만, 이미지를 EC2서버에 저장하는 형태였기에 확장성에 있어 부족한점이 많고, 파일이 유실될 가능성도 존재하기에 업로드 방식을 바꿔 진행하기로 결정. AWS S3 를 사용하기로 했다. Client -> Server -> S3 순으로 업로드가 진행되고 S3 -> Server -> Client 순으로 다운로드가 진행되는 구조를 이용하기로 구상을하면서 가장 고민이 됬던점은 MIME Type (미디어타입) 결정이였다. Octet-Stream을 이용할지 MultiPart를 사용할지 공부를 위해..

Testable Code 작성을 위한 노력 1

난 테스트 코드 작성을 좋아하기도하고 중요하게 생각한다. 왜냐면 녹색불이 뜨면 기분이좋다.... 그렇다보니 테스트 코드에 대해 여러가지로 공부하려 노력을하는데 어제 테스트 코드를 작성하기 어려운 메서드를 작성하게되어 Testable Code란 무엇일지 공부해봤다.. 우선 문제의 메서드 문제점 메서드의 역할과 책임이 다양하다. 이미지 검증도하고... uuid로 이름 변환도하고....S3로 이미지 업로드도 진행하고.... 해당 메서드의 테스트를 진행하려하니 참조하고있는 imageUploader 객체의 imageToS3의 메서드가 실행되지않아 테스트가 불가능해졌다... 테스트하기 좋은코드란 우선 역할과 책임이 단순 명료해야한다. 그렇기때문에 LayerArchitecture가 테스트 케이스에 이점을 가지고있는것..

테스트 케이스를 작성하지말자.

글 제목은 나도 한번 어그로 끌고싶어서 작성했다.... 외부 API를 사용할 때 그 외부 API 기능에대한 테스트 케이스에대한 나의 고민을 적어보려한다. 어제 AWS S3를 이용해 이미지를 업로드하는 기능의 개발을 마치고 테스트 코드를 작성중.. S3의 경우 Service Layer의 통합테스트 진행시 실제 S3객체를 이용해 테스트할시 테스트를 진행 할 때마다 S3로 업로드가 진행되어 프리티어를 이용하는 나에겐 큰 부담이 됬다. (비용을 떠나서 E2E테스트도 아닌 통합 테스트인데 굳이 S3에 이미지를 보내야하나 싶기도하고...) 구글링을 통해 S3 를 모킹 할 수 있는 객체를 발견했고 테스트를 코드를 작성하기위해 실제 프로덕션 코드를 보다... 문득 StackOverFlow에서 우문현답을 찾았던 경험이 ..

조회수 동시성문제 비관적 Lock을 선택한이유.

조회수 기능을 어제 추가했는데 조회수같은 기능의 단골주제가 또 동시성문제다. 100명의 유저가 웹 사이트에 접속해있을 때 동시에 한개의 글 조회를 요청한다면 어떤 일이 발생할까? 우선 조회수가 증가하는 방식은 간단하게 설정해놨다. ( 아직 사용자마다 중복된 조회수를 방지하는 기능은 개발하지않아서 ) 유저가 글 조회 요청을하면 해당 글의 viewCount를 1씩 증가 시켰다. 테스트코드나, PostMan에서는 조회수가 이쁘게 딱딱 나오는걸 확인했지만 동시에 100명의 유저가 요청을 한다면 을 가정하고싶어 Jmeter 라는 프로그램을 사용하기로함. 1초안에 100명의 사용자가 get요청을 보내도록 설정을 했다. 그 결과는... 분명 100이 글을 조회했으니까 최종 조회수는 100이여야 한다. 하지만 조회수는..

Layer간 의존성 줄이기 - 1 -

현재 내 프로젝트의 Layerd Architecture 전통적인 3계층을 따르고있다. Presentaion Layer ⬇️ Business Layer ⬇️ Persistence Layer 이러한 계층형 아키텍쳐를 설계한 이유의 첫번째는 테스트 코드 작성을 중요하게 여겨서다. 계층별로 관심사를 분리하면 테스트 코드 작성이 쉬워진다. 특히 Presentaion Layer인 Controller의 단위 테스트를 작성할 때 3계층 아키텍처를 고려하지않고 무분별하게 프로덕션 코드를 작성했다면 Service Class뿐아니라 Persistence Layer들의 객체까지도 Mocking했어야할것이다. 그런데, 최근 계층형 아키텍쳐에대해 공부하며 내 개인 프로젝트를 만들며 문제점을 발견했다. 나의 개발 방향성을 지속적으..

JWT를 이용한 로그인 기능 구현을하며

우선 저번 팀프로젝트에서는 Spring Inteceptor와 Session을 이용해서 로그인 기능을 구현했지만 이번엔 Spring Security와 JWT를 사용해 인증과 인가를 부여하기로했다. JWT를 사용한 이유 학습의 목적. 경험해보지않은 기술을 직접 구현해보며 학습하기위해 최근 Security 강의를 들었던 경험의 복습 인증 정보를 서버에 저장하지않고 토큰에 저장해 사용자가 가지고다니는 Sateless한 점. Signature 에 의한 보안성 크게 3가지 이유로 인해 이번 프로젝트에서 인증 기능은 JWT를 사용하기로했다. Spring Security에서 JWT의 흐름부터 파악하며 공부하기 시작했다. 클라이언트에 로그인 요청 REST API Server 필터에서 요청 헤더에 JWT가 존재하는지 검..

@WebMvcTest에 대한 고민

Presentation Layer의 단위 테스트를 진행할 때 @WebMvcTest 를 이용해 컨트롤러와 관련된 Bean들만 띄워서 가볍게 단위 테스트를 진행할지 or @SpringBootTest 를 이용해 Service 및 Repository Bean들도 같이 띄워서 통합테스를 진행하지 고민이 많이됬다. @WebMvcTest 를 이용할 경우 andExpected 단계에서 Response의 Body가 담겨오지 않게된다. (실 서비스를 실행하지않고 Mockit의 verify() 메서드를 이용해 서비스 메서드가 실행됬는지만 검증하기때문에) 서비스가 제대로 실행되고 응답값을 검증하고싶어 방법을 구글링했더니 Mockito.when()을 많이 사용하는거같아 테스트코드에 적용시켜봤다. 응답값은 잘 넘어는것을 확인했지..