Project

TIL(49) 21-12-09: CORS 에러 해결하기

Facts ✅ 프론트엔드 아키텍처와 백엔드 아키텍처 연결 ✅ CORS 에러 fix ✅ API 통신 확인 Findings SOP (Same Origin Policy) Same Origin Policy의 약자로, 웹 브라우저의 브라우저 보안을 위해 Same-Origin(프로토콜, 호스트, 포트가 같은) 서버로만 리소스를 주고 받을 수 있도록 하는 정책이다. 왜 다른 출처의 리소스를 사용하는 것을 제한할까? SOP를 이용해 악의적인 리소스를 분리해서 공격의 경로를 줄일 수 있기 위함이다. 하지만, 클라이언트와 서버를 분리하여 개발하는 경우가 많기에, 다른 도메인간에 API 통신을 허용을 위해서 CORS가 등장했다. CORS (Cross Origin Resource Sharing) CORS는 Cross-Orig..

TIL(48) 21-12-08: API 문서 자동화와 테스트 코드 작성하기 (Using RestDoc)

Facts ✅ 테스트 코드 작성 Using mockMvc - 로그인, 회원가입 ✅ API 문서 자동화 Using RestDoc Findings mockMvc를 사용하여 테스트 코드를 작성하면, 포스트맨을 사용할 필요가 없다. 포스트 맨에서 테스트 하는 것을 mockMvc로 수행하는 것이다. 여기서 테스트를 해보고 테스트 케이스를 만들 수도 있고 RestDoc까지 추가로 사용하면, 테스트를 통해, API 문서화를 할 수 있다. mockMvc를 사용하여, 회원가입과 로그인 부분을 테스트를 했다. mockMvc를 사용하여 통합 테스트하고, RestDoc 설정까지 추가하여 API 문서 자동화할 수 있게 해주었다. @ExtendWith({RestDocumentationExtension.class, SpringEx..

TIL(47) 21-12-07: ElasticBeanstalk으로 백엔드 아키텍처 구성하고 GithubAction으로 프로젝트 배포

Facts ✅ 백엔드 인프라 Elasticbeanstalk를 사용하여, ELB + AutoScaling + EC2 구축 ✅ Github Action으로 프로젝트 배포 Feelings EB Elasticbeanstalk로 EC2와 ELB와 환경변수 값을 한번에 관리해 주었다. 따로 관리했을 때는 설정값도 많고 어려웠는데, 통합해서 관리함으로써, 간단한 옵션만 조절하고, 어플리케이션만 배포하면 되어서 매우 편리했다. GithubAction으로 자동 배포 GithubAction으로 Source를 Push 하자마자 자동으로 서버 배포를 반영할 수 있게 해주었다. 기존에는 서버에 배포하려면 파일을 고칠 때마다, 서버를 멈춰주고 파일을 수정해서 서버에 올려주고 다시 서버 돌리는 작업을 해서 번거로웠다. 그런데, G..

TIL(46) 21-12-06: S3와 CloudFront로 프론트엔드 인프라 구성하기

Facts ✅ 프론트엔드 인프라 s3 + cloudfront로 구성 ✅ SSL 인증서 설정 Using Certificate Manager ✅ 웹방화벽 Using AWS WAF

TIL(45) 21-12-03 : Spring에서 게시글 Pagination 처리하기

Facts 오늘은 게시글 전체와, 게시글 검색결과를 Pagination처리를 해주었다. Findings Pagination 처리 🤔 왜 Pagination처리를 해줄까? 만약, 검색을 할 때, 검색 결과 값이 수천만 개의 문서를 Json 형식으로 받는다면? 메모리가 감당이 되지 않을 것이다. 그러므로, Pagination 처리는 필수적이다. Youtube도 다 Pagination처리를 해서 제공한다. 무한 스크롤로 보이겠지만, 어느 정도 스크롤을 내리면, 로딩 후에 데이터를 제공한다. 이것도 Pagination 처리를 해줘서 제공해주는 것이다. TilRepository pageable이라는 라이브러리를 사용하면, Page object 형식의 게시글들을 가져올 수 있다. public interface Ti..

TIL(44) 21-11-30 : S3와 CloudFront를 이용한 사진 업로드 구현하기

Facts ✅ mypage 이미지 S3로 업로드 하기 [Flask → Spring] Findings Javascript에서 이미지를 입력받고 요청을 전송하고 Spring Boot에서 S3에 이미지를 저장하여 업로드 하는 코드를 작성했다. Spring Boot에서 이미지 업로드 요청 처리를 구현할 때, 여러가지 설정과 과정이 필요했다. 1) 먼저 프론트단에서 byte형식의 파일을 보내주기 위해, Multipart/form-data 형식으로 파일을 보내준다. 2) Controller에서 MultipartFile 객체를 받는다. 3) S3 이미지 업로드 하기 위해서는 다음과 같이 구현해 주었다. AWS관련 속성을 적용해주기 위해, yml 파일을 설정해주고, 파일 처리 관련 Service를 여러개 만들어주었다...

TIL(43) 21-11-28 : Spring Secruity 사용하여, 인증 인가 구현하기

Facts ✅ "Spring Security 사용하여, 인증 인가 구현한 부분"의 전체 구조 이해하기 ✅ 모든 페이지에 접근할 경우 로그인해야 접속 가능하게 함 (로그인 페이지 제외하고 모든 페이지) ✅ 로그인 페이지에 접속할 때, 토큰이 있으면 home.html 가게 처리 ✅ get user 처리 (create.html, mytil_page.html, my_page.html user 데이터 뿌려주기) Findings 스프링 시큐리티를 이용한 로그인 처리 Spring Security를 사용하면, 인증 / 인가가 성공할 때에만, Controller에게 UserDetails(회원 정보)를 전달해준다. 로그인 처리 과정 1. 유저가 로그인을 시도하여, 서버에 http 요청이 들어온다. 2. Authentica..

TIL(42) 11/22 - 11/27 : TDP 사이트 Flask 👉🏻 Spring

Facts ✅ JWT 로그인 처리 구현 ✅ index.html [Flask → Spring으로 변환] ✅ home.html [Flask → Spring으로 변환] ✅ create.html [Flask → Spring으로 변환] ✅ my_page.html [Flask → Spring으로 변환] ✅ mytil_page.html [Flask → Spring으로 변환] ✅ til_board.html [Flask → Spring으로 변환] Findings & Feelings Flask → Spring으로 변환하는 작업을 진행하였다. 처음에는 Spring이 익숙하지 않아 어렵게만 느껴졌다. Controller, Service, Repository를 분리를 어떻게 해야하지 고민도 많이 들었다. 1주일동안 부딪혀보니,..

TDP 3차 Starting Assignment (21.11.19 ~ 21.12.09)

개발해야할 기능들 Start (Flask → Spring) [x] 서버사이드 랜더링 배제 [x] Til [x] User [x] Like [x] Comment [x] Flask → Spring으로 변환 [x] sign.html [x] home.html [x] create.html [x] my_page.html [x] mytil_page.html [x] til_board.html [x] til_board_detail.html [x] detail.html 기능 구현 [x] TIL Board - List private / public [x] TIL Board - Pagination [x] Create - Tag [x] 카카오 로그인 [x] Notification (카카오 알림 API를 연결) [x] 새로운 글 ..

TIL(41) 21-11-20 : 조회수, comment 기능 구현 (Flask)

Facts ✅ 메모장 사이트 조회수 기능 구현 [flask] ✅ 메모장 사이트 Comment 기능 구현 [flask] 조회수 기능 구현 게시글을 클릭할 때마다, 서버에서 게시글 컬럼의 read_count 필드값을 증가시키게 구현했다. function readArticle(idx) { $.ajax({ type: "PUT", url: `/article/${idx}`, data: {}, success: function (response) { console.log(response['article']) let title = response['article']['title'] let content = response['article']['content'] $('#modal-title').html(title); $(..