코딩기록

아임포트를 통한 결제 시스템 구현 중 계속하여 "IMP is not defined" 오류가 발생했다. 내부 js파일(/js/lesson/payment.js)에서 아임포트에서 제공하는 하기 링크의 라이브러리를 읽어와야 하는데 읽어오지 못했다. 문제는 html 파일에서 외부 js 파일을 불러오는 순서에 있었다. 외부 링크 라이브러리가 먼저 실행되어 js파일을 외부로부터 불러오고 내부 js파일을 불러오면, 내부 js파일에서 이를 잘 읽었다. 또 css 파일을 불러오는 link 태그가 가장 아래쪽에 있어야 잘 JS파일도 불러와 졌다.

패턴, 포맷별 출력 형식이다. LocalDateTime date = LocalDateTime.now( date.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss.SSS")) // 2021-09-02 14:56:20.669 date.format(DateTimeFormatter.BASIC_ISO_DATE) // 20210902 date.format(DateTimeFormatter.ISO_DATE) // 2021-09-02 date.format(DateTimeFormatter.ISO_DATE_TIME) // 2021-09-02T14:56:20.669 date.format(DateTimeFormatter.ISO_INSTANT) // ERROR date.forma..

지난번 단계에서 RDS, 엘라스틱빈스톡 환경을 구축했다. 이번에 Github Action을 통한 최종 배포를 진행한다. Github Action은 테스트, 배포, 필요한 스크립트 실행 등을 진행하여 ci/cd를 자동화 해주는 Github의 서비스이다. Github Action에게 일을 시키기 위해, Spring 프로젝트에 deploy.yml / 00-makeFiles.config / Procfile 3개의 파일을 적절한 경로에 만들어 주어야 한다. deploy.yml .github/workflows/*.yml 파일에 배포에 필요한 액션이 작성되는 스크립트이다. 제공되는 라이브러리 활용이 가능하다. name: lessonReserve on: push: branches: - prod jobs: build: ..

for 문 에서 i는 let 변수 사용해야 함 이유: let 변수의 적용범위는 { } 안이기 때문에 각 중괄호 안에서 지정된 숫자가 출력됨 var 변수의 적용범위는 function이기 때문에 향후 이벤트리스너 실행 시 for문의 최종 숫자가 i에 적용됨 for (let i = 0; i < $(".list li").length; i++) { $(".tab-button") .eq(i) .on("click", function () { $(".tab-button").removeClass("orange"); $(".tab-content").removeClass("show"); $(".tab-button").eq(i).addClass("orange"); $(".tab-content").eq(i).addClass("..

모달창 코드는 body 안에서 제일 앞에다 놓기 애니메이션(fadeIn 등)은 css만으로 처리하는게 좋음(성능이 이것이 더 효율적임) one-way UI 애니메이션 설정방법 1. 시작스타일 2. 최종스타일 3. 원할때 최종스타일로 변하라고 코드짬 4. transition 추가 opacity 투명도 visibility: hidden; 애니메이션에 적합, 모습만 숨기는 것 애니메이션 효과 - transition: all 1s; 부착 및 script에 addClass / removeClass 로 변경 .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; ..

getElementByClassName getElementByClassName(‘title1’)[x] = 찾은것 중 위에서 x번째 찾기 이벤트 리스너 = 감시자 역할(keydown, mouseover 등) document.getElementById("close").addEventListener('click', function() { document.getElementById("alert-box").style.display = "none"; }); function은 콜백함수(파라미터 자리에 들어가는 함수) 토글 함수: 클래스명을 붙였다 뗐다 해줌 document.getElementById("navButton").addEventListener("click", function() { document.getEl..

지난 포스트에 작성된 과정에서 CI/CD의 개념을 이해하였으며, 이제부터 본격적으로 GithubAction, 로드밸런서를 통한 최종 배포를 진행해볼 예정이다. 이를 위한 환경설정을 진행하며, 해당 내용을 기록했다. 깃허브 포크하기: 남의 레포지토리에서 프로젝트 복제해오기 1. 보안그룹 생성 보안그룹 (1)security-group-aws-v5 80. 22 3306(내 IP, 같은 시큐리티 그룹이면 다 들어올 수 있게) (RDS 포함) (2)sg-078a86f18b5522c06(ec2가 가지고 있는 시큐리티 그룹) vpc vpc-0efdde57da278439d (RDS 포함) rds aws-v5-mariadb.cza8ywk6w952.ap-northeast-2.rds.amazonaws.com rds 타임존 ..

CI/ CD : 완성된 또는 새로운 코드가 나오면 이것을 자동으로 통합, 테스트, 배포하는 것 기존 방식은 윈도우에서 테스트 및 빌드 후, EC2를 통해 수동 배포하였기 때문에, 테스트 실행 환경이 달랐다.(배포 전 window 테스트 후 -> 배포 후 리눅스 테스트) CI/ CD는 로컬에서 깃허브 배포 -> CI(지속적 통합) 서버(AWS환경과 동일해야 함)에서 테스트, 빌드, 실행파일 생성함 : CI(countinuous integration) 서버는 AWS 서버의 실행을 보장시켜 줌 : CD(countinuous delivery 지속적 배포) 폴링: 10초에 한번씩 요청하는 것 훅: 이벤트 전달 젠킨스: 훅 방식, 트래비스: 폴링 방식 Github Action를 통해서도 무중단 배포 가능 AWS I..

전 포스트에서 배포 장소였던 EC2는 Issa로서, 해당 인스턴스에 직접 OS 및 스프링 프로젝트를 설치하여야 했다. 한편 엘라스틱 빈스톡은 PaaS로서, OS, jdk 등이 미리 설치된 소프트웨어로 편하게 사용이 가능하다. 이번에는 엘라스틱 빈스톡을 이용하여 스프링 프로젝트 배포를 진행해 보았다. 엘라스틱 빈스톡 OS 설치가 필요없음 jdk 설치가 필요없음 오토스케일링, 각종 소프트웨어 구성, 로드밸런서, 모니터링, 업데이트 버전관리 최앞단에서 클라이언트 요청 받음, 외부오픈, 80포트 (기존 ec2는 ec2가 다이렉트로 클라이언트에게 요청을 받는 구조) ↓ 요청:80 nginx 서버(프록시) 80포트 ↓ 내부적으로 호출:5000 jdk(샘플코드 동작) 5000포트 NGinx 서버 -> 외부 IP 요청..

EC2 우분투 자동 배포를 위한 스크립트(deploy.sh) 를 작성하였다. 아래 9가지 단계로 진행된다. 1. 환경변수 등록 2. 실행 중인 크론 종료 3. 현재 구동중인 서버 체크(구동 중이면 종료 / 구동되지 않고 있으면 최초 배포 준비(jdk 설치, timezone 설치)) 4. 기존 프로젝트 폴더 삭제 5. git clone 6. 실행파일 권한 부여 7. 빌드 8. 실행 9. 지속적 배포 크론 재실행 환경변수 export LOVE="i love you" 환경변수 저장 echo $LOVE = i love you ./.bashrc 에 적용하면 환경변수 영구히 사용 가능 1 aws 재부팅하면 적용되고 또는 2 source ./.bashrc 로 강제적용 할수도 있음 환경변수 적용범위 .bashrc 에 ..