개인 자료 정리 홈페이지 입니다.

Note > 개발환경과도구정리개발 https용 인증서, spring boot, express https, vite 접속오류

By a3040, Published on Invalid Date

1. spring boot 톰켓용 p12 인증서를 생성합니다.

> keytool -genkey -alias tomcat -storetype PKCS12 -keyalg RSA -keysize 2048 -keystore keystore.p12 -validity 3650

Enter keystore password:   <-- 개인 암호 입력

Re-enter new password: <-- 위와 같은 암호입력


1.1 생성한 인증서를 spring boot에 추가 합니다.

application.properties 또는 application.yaml


server.ssl.key-store-type=PKCS12

#위에서 생성한 keystore.p12 파일이 위치한 폴더입니다.

server.ssl.key-store=file:/C:/Us...40/keystore.p12

#위에서 인증서 생성시 keytool실행하면 나오는 암호입력부분에 입력한 암호입니다.

server.ssl.key-store-password=123456

#위에서 인증서 생성시 작성한 alias입니다. 변경 안한경우 tomcat

server.ssl.key-alias=tomcat


2.express에서 https용 인증서 생성

openssl이 설치된곳에서 생성합니다.


>openssl genrsa -out key.pem

>openssl req -new -key key.pem -out csr.pem

>openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem


2.1 인증서 추가하기

import https from 'https';
...
  let port = 3000;

  var app=express();

  const privateKey = fs.readFileSync('./key.pem', 'utf8');
  const certificate = fs.readFileSync('./cert.pem', 'utf8');

  const credentials = {
    key: privateKey,
    cert: certificate 
  };

  const server = https.createServer(credentials, app); 

  server.listen(port, () => {
    console.log(`HTTP server is running at https://localhost:${port}`);
  });


-1,2두 방법 모두 사설 인증서여서 브라우저에서 접속할 경우 경고가 발생합니다.

브라우저에서 p12로 인증서 추가하기 를 수행해주시면 경고가 사라집니다.


3.vite 사용시 connect error가 발생합니다.


npm i vite-plugin-mkcert -D

vite.config.js

import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: { https: true }, // Not needed for Vite 5+
  plugins: [ mkcert() ]
})


를 수행하면 vite의 경우 자동으로 인증서를 브라우저에 추가해줍니다.


ssl - Vite https on localhost - Stack Overflow

Note > 개발환경과도구정리vite 개발 환경에서 ssl, https로 시작하기

By a3040, Published on Invalid Date

개발환경에서 vite의 서버를 ssl로 시작해야할 경우입니다.

1.플러그인 설치

2.vite.config.ts 수정


1.플러그인 설치

 npm install -D @vitejs/plugin-basic-ssl

2.vite.config.ts수정

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import basicSsl from '@vitejs/plugin-basic-ssl'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
    basicSsl()  //추가
  ],
})


설정 후 시작화면 입니다.

vite, https, ssl 개발환경


Server Options | Vite (vitejs.dev)

ssl - Vite https on localhost - Stack Overflow

Note > tailwindcsstailwindcss google icon hover color change

By a3040, Published on Invalid Date

구글 아이콘에 hover 속성을 줘서 색상을 바꿔보려고 합니다.


1.구글 아이콘을 검색후 svg 로 다운 받습니다.

2.tailwindcss의 fill속성을 이용해서 색상을 변경합니다.


1.구글 아이콘 svg 얻기

Material Symbols and Icons - Google Fonts

<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

처음 다운정보에는 xmlns정보가 있으나 삭제했습니다.


2. tailwindcss의 fill 속성을 이용해서 색상 변경하기

<svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>


class="fill-black hover:fill-blue-500"  기본 검정, 마우스 hover일때 원하는 색상을 선택합니다. 현재 blue-500


처음에 stroke 속성인줄 알았으나 fill 이었습니다.


Fill - Tailwind CSS

Note > tailwindcsshtml tag의 직계요소와 전체요소에 속성 주기

By a3040, Published on Invalid Date

<article className="flex flex-col w-full shadow my-4">
  <a href="#" className="hover:opacity-75">
    article &gt; a
  </a>
  <div className="bg-white flex flex-col justify-start p-6">
    <a href="#" className="hover:opacity-75"> 
      article a
    </a>
  </div>
</article>


1.요소의 바로 아래 있을경우 > 를 사용합니다.

article > a {
    color: blue;
}


결과


2.article 안쪽 전체의 a 요소 색상을 변경할 경우입니다.

article a {
    color: blue;
}

결과