만료 이메일 - Let's Encrypt - 무료 SSL/TLS 인증서 (letsencrypt.org)

~# certbot renew 수행했으나 에러 발생

ImportError: cannot import name 'implements' from 'zope.interface' (/usr/local/l                          ib/python3.8/dist-packages/zope/interface/__init__.py)

certbot 재설치

 apt remove --purge certbot

 apt autoremove

 apt clean

 apt install certbot -u

$ sudo certbot certonly --webroot -w /var/html/www/ -d a3040.com

인증서 설치 후 재시작

자동 갱신 설정을 추가해야할것 같습니다.

0. build.gradle에

developmentOnly "org.springframework.boot:spring-boot-devtools"를 추가합니다.

1.터미널을 열어서

> gradle -t :back:bootJar

-t:"continuous build" 또는 "실시간 빌드" 모드를 활성화합니다. 

2. 다른 터미널을 열어서

> gradle :back:bootRun

를 수행합니다.

왜인지는 모르겠으나 갑자기 vscode에서 devtools 재시작 동작이 안돼서 느리기는 하지만 잠시 사용하기로했습니다.

id 'org.springframework.boot' version '3.1.5'

참고:gradle - Spring Boot bootRun with continuous build - Stack Overflow

application.properies에 추가

spring.devtools.restart.enabled=true
spring.devtools.livereload.enabled=true

spring.devtools.restart.enabled : Spring Boot 애플리케이션의 클래스패스에 변경이 감지되면 자동으로 애플리케이션을 다시 시작하는 기능을 활성화 또는 비활성화합니다.

spring.devtools.livereload.enabled: 웹 애플리케이션 개발 중에 HTML, CSS, JavaScript 파일 등의 정적 리소스를 수정할 때 브라우저를 자동으로 새로 고치는 기능입니다.

1.vite 기반 react 프로젝트 생성

 프로젝트 이름은 : dragexpand

 >npm create vite@latest dragexpand -- --template react-ts

 생성이 완료되면 프로젝트로 이동

 >cd .\dragexpand\

 >npm install

2.tailwindcss 사용 추가

 프로젝트에 tailwindcss 종속성추가

 >npm install -D tailwindcss postcss autoprefixer

 프로젝트에 tailwindcss 사용 설정 추가

 >npx tailwindcss init -p

 실행 후에

 Created Tailwind CSS config file: tailwind.config.js

 Created PostCSS config file: postcss.config.js

 두 파일이 추가 됩니다.

 생성된 tailwind.config.js파일을 수정합니다. 

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwindcss 기본 디렉티브 추가

./src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

3.vscode 디버그 연결 설정

.vscode/launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge", /* 에지에서 디버그 */
            "request": "launch",
            "name": "Debug App",
            "url": "http://localhost:5173", /*관찰하게 될 vite가 실행되는 포트*/
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*"
            },
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ],
            "sourceMaps": true
        }
    ]
}

launch.json을 작성한 후 프로젝트를 실행합니다.

> npm run dev

vscode에서 npm run dev에서 시작한 포트를 디버그 하도록 실행하면, edge가 실행되면서 http://localhost:5173로 이동합니다. 정상적으로 연결되면 vscode에서 tsx파일을 디버그 할수 있습니다.

1.을 이용해서 디버그 시작

2.디버그가 실행되고 edge가 실행되고 연결된 상태

3.vsocde의 디버그 모드

4.tsx의 브레이크포인트 설정

5.tailwindcss 적용테스트

import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const sum =(a, b)=>{
    let c = a+b;
    return c;
  }

  useEffect(()=>{
    console.log( sum(1,2));
  }, []);

  return (
    <div className='container mx-auto h-screen
    border border-solid border-cyan-400'>

    </div>
  )
}

export default App

참조 링크

시작하기 | Vite (vitejs.dev)

Install Tailwind CSS with Vite - Tailwind CSS

수동으로 번들러 테스트를 하던중 js의 특정 소스의 값만 변경 후

브라우저에서 확인하던중 브라우저 캐쉬가 남아 있어서 변경사항이 적용이 안되는 경우가 발생했습니다.

옛날 IE의 페이지를 열때마다 새로 고침 기능을 찾았으나

동일한 기능은 찾기 못했고

브라우저에서 F12(또는 개발자도구열기) > 네트워크탭 > 캐시 사용안함 (체크해주기) 로

동일한 기능을 하는것을 발견했습니다.

새로 고침을 할때 memory cache를 사용해서 개발서버에서 변수 확인을 위해 새로고침 할 경우 index.js의 변경사항이 적용이 되지 않습니다.

새로 고침 할 때 마다 서버에서 데이터를 가져옵니다.