사이먼's 코딩노트

[실전 서비스 배포]저번 '실전 서비스 배포 (3)' 까지 진행하면서 docker를 통한 이미지 생성과 함께 실제 구매한 도메인 네임으로 접속까지 성공하는 실습을 진행했다.이번에는 실전 서비스 배포의 마지막 단계로 젠킨스를 통해 서비스 배포 자동화를 구현해봅시다. [젠킨스(Jenkins)란?]젠킨스는 지속적 통합(Continuous Integration, CI) 및 지속적 전달(Continuous Delivery, CD)를 지원하는 오픈 소스 자동화 도구이다.젠킨스는 개발자들이 소프트웨어 개발 과정에서 반복적인 작업들을 자동화하여 개발 생산성과 품질을 향상시킬 수 있도록 도와준다.젠킨스는 다양한 프로그래밍 언어와 프레임워크를 지원하며, 소스 코드 컴파일, 테스트 실행, 정적 분석, 배포 등의 작업을 자동..

[실전 서비스 배포]지난 서비스 배포 포스팅에 이어 이번에는 Docker를 통해 MariaDB 버전의 서비스를 배포해봅시다.앞서 필요한 패키지들을 모두 설치했다면 아래와 같이 순서대로 명령어를 입력하여 실제 배포를 실습해보겠습니다. [디렉토리 생성]서버에서 깃허브 리포지터리에 있는 프로젝트를 clone하기 전, 해당 프로젝트가 위치할 디렉토리를 만들어야한다.아래의 명령어를 순서대로 SSH 클라이언트에서 입력해준다.먼저 /docker_projects/프로젝트명/project 라는 디렉토리가 있으면 삭제하도록 하고 mkdir를 통해 새 디렉토리를 생성하고 이동한다.여기서 프로젝트명은 사용자 마음대로 지정해서 넣으면 된다.rm -rf /docker_projects/프로젝트명/projectmkdir -p /do..

[실전 서비스 배포]지난 포스팅에 이어 실전 서비스 배포 방법을 함께 실습해봅시다.서버 생성과 도메인 기본 설정을 모두 마쳤다면 이번에는 원격접속 터미널 프로그램을 통해 SSH에 접속하여 생성된 서버 안에 필요한 패키지를 설치해야한다. [SSH 클라이언트 설치]SSH는 Secure SHell의 약어로 네트워크 상의 다른 컴퓨터에 로그인하여 명령을 실행하고 정보를 보고 받을 수 있도록 해주는 통신 프로토콜이다.쉽게 말해서 현재 생성된 우리의 서버는 네이버 클라우드에서 관리하기 때문에 직접 찾아가서 세팅을 하기엔 어려움이 있다. 그렇기 때문에 SSH로 원격 접속을 하여 해당 리눅스 서버에 접근하려고 하는 것이다.대표적인 SSH 클라이언트가 있는데, 그 중에서도 Putty와 Termius를 추천한다.포스팅에서..

[실전 서비스 배포]이번 포스팅에서는 직접 도메인을 구매하고 서버 플랫폼을 이용해서 우리가 만들어낸 프로젝트를 실제로 다른 사용자들이 로컬 환경이 아닌 곳에서도 접속할 수 있게 해봅시다.  [도메인 구매]먼저 서비스를 실제로 배포하기 위해선 도메인을 하나 구매해야한다.여기서 말하는 도메인이란, google.com 이나 naver.com과 같은 우리가 흔하게 접할 수 있는 웹 사이트의 주소이다.넓은 의미로는 네트워크 상에서 컴퓨터를 식별하는 호스트명이라고 생각하면 좋다.우리는 보통 도메인 네임을 구매한다고 하는데, 말 그대로 배포할 도메인을 우리가 직접 사이트를 통해서 구매해야한다.도메인 네임이 쉽고 범용적인 것을 고르는 것이 유리하지만, 그 만큼 가격 차이도 어느정도 발생한다.아래는 추천하는 두 개의 도..

[TossPayments 결제 시스템 구현]이번 포스팅에서는 마켓 전용 프로젝트를 기반으로 토스 페이먼츠 결제 시스템을 구현해 볼 예정입니다.마켓 프로젝트의 전체 코드를 포스팅할 수 없기 때문에 전체 구조와 코드를 확인하시려면 리포지터리 주소를 참고 부탁드립니다.해당 프로젝트는 SpringBoot v_3.3.0, Java 21 기반으로 세팅되어 있습니다.리포지터리 URL 주소 : https://github.com/psm817/cod_market GitHub - psm817/cod_marketContribute to psm817/cod_market development by creating an account on GitHub.github.com [토스페이먼츠 가입]결제 시스템을 토스페이먼츠를 통해 구현하..

[Svelte Kit 개발환경 세팅]지난번에 이어 스벨트 킷 개발환경 세팅을 진행하도록 하겠습니다.앞으로 작성된 모든 코드는 아래 깃허브 리포지터리 주소를 통해 확인하실 수 있습니다.깃허브 리포지터리 주소 : https://github.com/psm817/sksb_2407 GitHub - psm817/sksb_2407Contribute to psm817/sksb_2407 development by creating an account on GitHub.github.com [TailWind 설치 및 적용]스벨트 킷에 tailwind를 적용하는 방법은 vscode에서 터미널을 열어 아래의 명령어를 실행한다.cd frontappnpm install -D tailwindcss postcss autoprefixer..

[Svelte란?]Svelte(스벨트)는 JavaScript 라이브러리 중 하나로서 React보다 가볍고 Vue.js보다 쉽다는 장점을 가진 최신 프론트엔트 기술이다.스벨트는 JavaScript 코드로 브라우저가 이해할 수 있도록 컴파일을 해주는 컴파일러에 조금 더 가깝다.다시 말해 프레임워크 혹은 라이브러리를 다운로드할 필요가 없다. [Svelte의 구조]스벨트 파일은 주로 아래와 같은 구조로 구성되어 있다.script는 상단에 작성되어 JavaScript 또는 TypeScript를 사용할 수 있다.style은 CSS 스타일링이 가능하다.//마크업 영역 [Svelte Kit 개발환경 세팅]이번에는 스벨트를 사용하기 위해 스프링부트 환경에서 스벨트 킷 개발환경을 세팅해보도록 합시다.기존의 스프링부트에서 ..

[다크모드]이번에는 버튼을 통해 라이트/다크 모드를 제어하도록 해봅시다.사용한 라이브러리는 테일윈드와 jQuery이며, 폰트도 적용하여 디자인을 해보도록 합시다.See the Pen 다크모드 by psm817 (@psm817) on CodePen.CSS를 살펴보면 모든 폰트를 Pretendard-Regular를 적용했다.테마가 라이트 모드일 때는 :root를 통해 기본 색상을 --background-color: white, --text-color: #222, --primary-color-1: #4120b0으로 설정하였고 이 속성들은 하나의 변수라고 생각하면 좋다.테마가 다크 모드일 때는 :root.dark를 통해 기본 색상을 --background-color: #121212, --text-color: ..

[패스워드 보이기]이번에는 jQuery를 사용하여 패드워드 창에서 특정 버튼을 통해 패스워드가 텍스트로 보이고 다시 가려줄 수 있는 기능을 구현해봅시다.기본적으로 패스워드를 입력하는 태그는 input 태그이고, type을 반드시 password로 지정해야한다.jQuery를 사용해야되기 때문에 반드시 html에 script 태그를 통해 작성해줘야 한다.See the Pen 비밀번호 보이기 by psm817 (@psm817) on CodePen.CSS에서는 .box_1에 position: relative를 적용하고 그 아래 특정 버튼 역할을 할 .mode에 position: absolute를 적용한다.또한 .mode에는 top: 0과 right: 0을 통해 아이콘들이 박스 안으로 들어오도록 하고 오른쪽으로..

[marquee]이번에는 marquee 태그를 적용하여 글자가 움직이는 효과를 적용해봅시다.marquee는 글자나 그림 등을 상하좌우로 움직이는 연출을 하고 싶을 때 사용하며, MS에서 Explorer에 적용하기 위해서 만들어낸 태그이다.아래 URL 주소를 참고하여 CSS만을 활용하여 여러가지 형태의 marquee를 확인해보고 실제로 적용시킬 수 있다.참고용 주소 : https://www.quackit.com/css/codes/marquees/See the Pen 240705(marquee) by psm817 (@psm817) on CodePen. [스크롤 바]이번에는 기존에 존재하는 스크롤 바를 커스텀해봅시다.딱히 필요한 라이브러리는 없으며, CSS만을 활용하여 스크롤 바 디자인을 할 수 있다.See..