반응형

커스텀 축하 카드 쇼핑몰 [축하해요] 11

성공적인 '축하해요' 회고

배포도 완료하고, 파비콘까지 적용한 귀여운 우리 프로젝트의 메인 화면이다. 프리티어이기 때문에, 당분간은 서버를 띄워 둘 예정이다.성과이번 발표는 옆 반 사람들도 와서 구경했는데, 우리팀이 발표하고 난 후 모두가 우리팀 얘기만 했다고 한다(우리팀은 2팀이다).저 카톡을 받고 매우 뿌듯했다.성공 요인우리 프로젝트의 성공 요인은 아무래도 '팀원 간의 단합'이지 않을까 싶다. 팀원들끼리 모두 친하고, 자연스레 좋은 분위기 속에서 개발이 이루어졌기 때문이다.특히, 'clap'이라는 팀 문화 때문에 항상 웃었고, 감정이 상할 일이 생기지 않았던 것 같다.(그냥 좋은 일이 있으면 clap~ 이라고 외치면서 모두 박수를 쳤다.. 강사님까지 같이 칠 때도 있었다 ㅋㅋㅋㅋ 하루에 박수만 10번은 넘게 친 것 같다)또한,..

Open Graph Protocol(OGP)

Open Graph Protoolhttps://ogp.me/웹페이지를 링크 형태로 공유할 때 미리보기 형태로 제공해주는 것보다 더 나은 UX를 제공하기 위하여 facebook에서 개발인터넷 프로토콜의 한 종류웹페이지 미리보기가 제공되어 페이지 내용에 대한 확인이 쉽고, 실제 페이지 이동으로까지 이어지기 더 쉬움사용하지 않을 때링크가 어떤 것을 의미하는지 알 수 없으며, 밋밋하다.사용할 때제목, 내용, 사진을 링크를 들어가지 않아도 볼 수 있다. 좀 더 누르고 싶어진다.사용법매우 간단하다. 해당 jsp에 들어가 태그 안에 다음 내용을 추가해 주면 된다. 여기서 나는 제목과 이미지 경로는 변수 값으로 설정해 주어 사용자가 생성한 카드의 제목과 사진이 나오도록 하였고, 설명은 '카드를 열어주세요 ...

모든 페이지에 Error Page 적용(404, 500)

우선, 우리 팀의 에러 페이지를 디자인 한 후 css와 jsp를 이용하여 프레임을 구현하였다. 팀에서 만든 에러페이지는 '404'와 '500' 총 두개이며, tomcat 웹 서버를 사용한다.에러페이지의 중요성에러페이지를 불핀절하게 만들면 웹 사이트에 대한 신뢰도가 떨어지고, 사용자 경험이 떨어짐그냥 에러페이지네이버 에러페이지(더 친절해 보이고 네이버를 사용하고 싶은 마음이 더 듦)보통 DB 정보, 서버의 절대 경로 노출, 서버 버전 정보 노출 등이 포함된 에러가 주로 발생하는데, 개발자들이 쓰는 에러코드와 메세지를 웹 사이트에 그대로 노출시키면 해커들에게 좋은 정보를 제공하는 것이기 때문에 error page를 따로 만들어 주는 것이 좋음SQL injection 공격WAS 버전 정보 노출에러페이지 적용우..

GitHub Actions을 통한 CI / CD 적용

이전 글에서 서버를 배포하였다. 하지만, 이 방법은 코드를 변경하여 git에 올릴 때 마다 빌드를 새로 해 주어야 해서 상당히 불편하다.이 때, GitHub Action을 사용하면 새로 빌드를 하지 않아도 자동으로 빌드가 되어 편리하다.GitHub Actionshttps://docs.github.com/ko/actionsGitHub에서 제공하는 CI/CD 도구코드 변경 시 자동으로 워크플로우를 실행할 수 있도록 함코드 빌드, 테스트, 배포 등을 자동화 할 수 있음Workflow(워크플로우)하나 이상의 작업을 실행하는 구성 가능한 자동화된 프로세스. 디렉토리에 저장된 yaml 파일로 구성되며, 각 워크플로우는 특정 이벤트에 대하여 트리거됨Event(이벤트)워크플로우 실행을 트리거하는 활동. pull, pu..

Amazon RDS(AWS RDS)를 통한 DB 배포

우리의 서비스는 '초대장 템플릿'이 고정되어 있고, 거기에서 사용자가 원하는 템플릿을 고른 후 text를 수정해 본인만의 축하 카드를 만드는 서비스이다. 이 때, text에 추가 요소들을 넣을 수 도 있고, 글자수가 늘어나는 것을 고려하여 템플릿을 html과 css파일로 작성한 후 DB에 코드를 저장하기로 하였다.현재 작업중인 팀원이 로컬 DB에서만 돌리니 다른 팀원이 테스트 및 수정을 하기가 불편하여 DB부터 배포하기로 결정하였다. AWS rds를 이용할 것이다.Relational Database Service(RDS)관계형 DB(DB 안의 내용이 정형화 되어 있고 테이블 간 관계를 중심적으로 보는 DB)를 제공하는 aws의 서비스유저가 DB를 사용하기 쉽도록 인프라 등을 자동화 시켜주며, user가 ..

Amazon EC2(AWS EC2)를 이용한 서버 배포

1. EC2 접속 후 인스턴스 시작프로젝트 환경 : Spring, JAVA 11, Maven, Tomcat Serverhttps://ap-northeast-2.console.aws.amazon.com/ec2/home?region=ap-northeast-2#Home나는 ubuntu 서버로 생성해 주었다. 인스턴스 유형은 프리 티어 사용 가능인 t2.micro로 해 주었고, 네트워크 설정에서는 다음 두 개의 값에 체크를 눌러 트래픽을 허용해 주었다.여기서 키 페어를 생성해 주고, 생성된 키페어(~.pem)값을 저장해 주어야 한다.인스턴스가 생성되었으면, 연결 버튼을 누르고 터미널을 열어 우분투 서버에 접속할 차례이다. 이 때, 위에서 생성해 준 키페어가 있는 경로로 가서 우분투 서버를 실행해 주어야 한다.참..

Amazon S3(AWS S3)

Simple Storage Service(S3)온라인 오브젝트 스토리지 서비스데이터를 오브젝트 형태로 저장하는 서비스데이터 조작에 Http / Https를 통한 API가 사용됨객체 : S3에 저장되는 모든 데이터메타데이터 : name-value 쌍으로 이루어진 최종 수정일, 파일 타입 등의 데이터버킷에 존재하는 모든 객체는 단 하나의 key를 가지며, 이 key를 통해 식별이 가능함Bucket & ObjectBucket : 객체를 저장하고 관리하는 역할Object : 데이터와 메타데이터를 구성하고 있는 저장 단위출처chukahaeyo라는 이름의 버킷에 logo.png 객체 파일을 저장하면 다음과 같은 URL이 생성된다 : http://chukahaeyo.s3.amazonaws.com/logo.pngS3 ..

네이버 단축 url api 사용하기

https://developers.naver.com/docs/utils/shortenurl/우선 애플리케이션 등록을 해 주어야 한다. 나는 이전에 등록해 둔 것이 있어서 그 Client Secret값을 사용했었는데, 이 값을 그대로 사용하면 안된다. shortenURL과 관련된 값이 아니기 때문이다ㅠㅠ 꼭 'Naver-OpenAPI-shortenURL-TEST'로 발급받아서 사용해 주어야 한다.사용법get 요청 : https://openapi.naver.com/v1/util/shorturlpost 요청(json type) : https://openapi.naver.com/v1/util/shorturl.json위의 주소로 각각 일치하는 요청을 보내주면 된다. 단, 헤더에 Client-Id값과 Client-..

URL Manipulation 방지 리팩토링

URL Manipulation사용자가 웹 애플리케이션의 URL을 의도적으로 변경하여 서버와 상호작용하는 방식목적정보 노출 : 다른 사용자가 접근해서는 안 되는 정보에 접근하려는 시도권한 상승 : 낮은 권한의 사용자가 높은 권한의 데이터를 열람하거나 조작하려는 시도비즈니스 논리 취약점 : 애플리케이션의 비즈니스 로직을 우회하거나 악용하려는 시도기타 보안 취약점 악용 : SSRF(서버 사이드 요청 위조) 등 보안 취약점을 악용하려는 시도예시정보 노출 : user가 타인의 프로필에 접근하는 경우원래 URL : http://example.com/profile?id=1변경 URL : http://example.com/profile?id=2권한 상승 : 낮은 권한의 사용자가 관리자 페이지에 접근하는 경우원래 URL..

아임포트 API 사용

아임포트(iamport)무료로 PG 결제를 연동해주는 서비스PG 결제결제 요청을 카드사, 은행 등과 같은 결제 기관으로 보내서 승인을 받고, 그 결과를 상점에게 전달하는 것확실히 금액이 지불된 것을 확인한 상점은 물건을 고객센터에 전달함고객은 물건값을 결제기관에 지불하고, 결제기관은 PG사에게 정산해주고, PG사는 상점에게 정산해줌인증 결제결제 시 PG사로부터 결제에 대한 인증 결과 수신 이후 해당 인증키로 결제를 요청하는 결제 방식국내에서 가장 많이 볼 수 있음결제 주문 페이지에서 결제가 요청됨각 PG사의 결제창이 활성화됨고객이 선택한 카드사에 따른 카드사 전용 결제 모듈에서 인증이 완료됨해당 인증값을 통해 결제를 요청 아임포트 연동하기1. https://admin.portone.io/에서 회원가입2...

반응형