본문 바로가기

전체 글87

간단한 자동화 CI/CD (리액트 + 깃헙액션 + 닷홈 ) 이번에 리액트로 쇼핑몰 프로젝트를 연습삼아 만들어보게되면서 닷홈의 무료 호스팅을 신청해서 그 서버에 빌드한 파일을 올리는 방법으로 호스팅해주었다. 과정은 간단한데 로컬에서 파일을 빌드하고 닷홈서버의 html폴더에 빌드한 파일을 넣어주기만 하면되는거라서 간단하게 자동화가 가능할것같았다. 그래서 github action을 이용해서 업데이트 자동화를 해보기로 했다.  우선 깃허브에 코드를 올려주고 해당 리포지토리로 이동해준다.리포지토리에서 Actions로가서 simpleworkflow를 검색한다음 configure를 클릭한다.그러면  생성한 리포지토리의 .github/workflows 경로에 blank.yml 파일을 생성해주게 된다.이제 이파일에 필요한 동작들을 작성해주면 코드가 푸쉬됐을때 깃허브에서 띄워주는.. 2025. 3. 3.
리액트 쇼핑몰 만들기 - AI로 화면구성 (feat v0.dev) 프로젝트를 만들려고 다시 옛날에 만들었던 코드를 보니 디자인이나 구성요소를 가져가기에는 맘에 들지않는 부분이많아서 디자인이나 기능 부분도 새로 만들어보기로 했다.  참고로 나는 디자인에 소질이 정말 없다고 자부하는데 고르는 색깔마다 별로 좋은 반응을 받은적이없어서 AI툴을 이용해보기로 했다  https://v0.dev/ v0 by VercelChat with v0. Generate UI with simple text prompts. Copy, paste, ship.v0.devnext.js 를 만들고 vercel 을 만드는 곳에서 개발한 AI툴인데 프롬프트에 필요한 디자인을 입력하면 해당 컴포넌트와 필요한부분들이 모두 코딩되어서 코드수준으로 만들어준다. 우선 내가 필요한 페이지를 정리해 보았다. 가장 먼저.. 2025. 3. 2.
리액트 쇼핑몰만들기(프로젝트 세팅) 작년 초에 학원에서 리액트로 쇼핑몰을 만드는 수업을 받았었다.  다시 리액트를 사용하려고보니 빌드툴도 vite라는 것을 사용하고 상태관리쪽도 새로운 라이브러리가 떠오르고있는듯해서 다시 연습하는겸 쇼핑몰 프로젝트를 다시만들어보려고한다. 지금 다니는 회사에서도 리액트 , 타입스크립트 , 넥스트 같은 기술들을 도입하려고 준비하다보니 따라가는 입장에서 연습을 해보고 사용할수있는 api도 회사에서 사용하는 기술인 fastAPI 프레임워크를 통해서 만들어보겠다.  1. 프로젝트 세팅npm create vite@latest 프로젝트이름프레임워크와 옵션을 선택할수있게 나올텐데 방향키로 움직여서 원하는 옵션에서 엔터를 누르면 해당 옵션과 프레임워크가 설치된다. 나는 리액트 프레임워크에 타입스크립트와 swc를 사용하게 설.. 2024. 11. 10.
리눅스(ubuntu) php 여러버전 사용하기. 리눅스 공부를 하면서 가장 기본적으로 많이 이용하는 APM 환경을 직접 설치해보면서 이것저것 해보는데 한 서버상에서 php를 여러 버전 설치하고 각 사용자가 웹호스팅을 할때 필요한 php 버전을 골라서 사용할수있도록 환경을 만들어 보고싶었다.   우선 나는 리눅스는 우분투 환경을 사용하고있고 윈도우상에서 VirualBox로 가상환경을 만들어서 진행했다. PHP를 한번에 여러버전을 설치하고 관리하기위해서 ondrej/php 라는 ppa를 이용했다. 리눅스에서는 PersonalPackageArchive라는게 있는데 간단하게정리하면개인이 배포하는 소프트웨어가 저장된 저장소라고 생각할수있을것같다.ondrej/php가 여러버전의 php버전을 제공하는 유명한 ppa라고 되어있어서 이용했다. PPA설치 sudo ap.. 2024. 11. 3.
SSL 보안인증서란? 사이트나 서버를 HTTPS로 호스팅하기위해서는 SSL 인증서가 필요하다.인증서의 종류나 인증서를 발급해주는기관 또 인증서별로 지원을 해주는기능들이다르다.  SSL인증서가 무엇인지 알아보자   보안인증서웹 서버와 사용자 pc간에 전송되는 모든 정보를 암호화하여 안전하게 전송하는 디지털 인증서스니핑으로 인한 개인정보 유출 방지를 위해서 필수적인 보안수단데이터 변조를 방지 인증서중에는 서브도메인이나 멀티도메인 강제암호화를 지원하는 상품이있다. 서브도메인 인증서 - 와일드카드 SSL인증서하나의 인증서로 서브도메인에서도 사용이가능한 인증서 ex) *.example.com 형식으로 모든 서브도메인을 커버한다.멀티도메인 인증서 - 다중 도메인 인증서도메인 주소가 서로 다른경우 인증서 하나로 적용할수있는 멀티도메인 인.. 2024. 10. 13.
도메인 레코드란? DNS Record DNS Record도메인 이름에 대한 다양한 정보를 저장하며 클라이언트가 도메인을 입력할때 이 정보를 받아서 적절한 처리를 한다. 일반적으로 사용되는 DNS 레코드에는 A 및 AAAA 레코드, CNAME, DNAME 및 ALIAS 레코드, CAA 레코드, CERT 레코드, MX 레코드, SOA 레코드, NS 레코드, PTR 레코드, SPF 레코드, SRV 레코드 및 TXT 레코드가 포함됩니다. 이러한 각 레코드는 고유한 기능을 가지고 있으며 각각의 레코드를 이해하는 것은 DNS 시스템이 제대로 작동하는 데 중요한 부분입니다.  A 레코드A레코드는 도메인이름을 직접적으로 서버 아이피 주소와 연결해주는 레코드이다.A레코드에 입력한 도메인주소로 접근하면 IP주소로 연결된다. CNAME - Canonical n.. 2024. 10. 13.

티스토리툴바