Note > 개발환경과도구정리

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

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

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

동일한 기능은 찾기 못했고

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

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

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

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

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

개발환경에서 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()  //추가
  ],
})

설정 후 시작화면 입니다.

Server Options | Vite (vitejs.dev)

ssl - Vite https on localhost - Stack Overflow

HeidiSQL은 MariaDB, MySQL, Microsoft SQL Server, PostgreSQL, SQLite 등에서 사용할수 있는 GUI 데이터베이스 관리 프로그램입니다.오픈 소스입니다. 

1.설치

2.세션관리자 설정

3.작업

1.설치

Download HeidiSQL

에서 사용하는 os 버전에 맞게 다운 받아 설치합니다

2.세션관리자 설정

- heidiSQL 실행

- 파일 > 세션관리자 클릭

- 세션관리자 창에서 > 하단 “신규” 버튼 클릭 후

접속할 db의 Ip ,사용자 ,암호, 포트 3306(기본)를 설정합니다. 현재 mysqld로 접속설정 후

"열기" 버튼을 사용해서 서버에 접속합니다.

3.작업

1번 부분에서 연결된 dbms관련 탐색

2번 부분에서 정보및 쿼리 실행(탭 부분)

3번에는 실행한 쿼리가 로깅됩니다.

- cmake/cmake-gui

- 타겟이란? 만들려고 하는 목적물 이름

add_executable(Tutorial tutorial.cxx)

이 경우 윈도우 환경에서 Tutorial.exe 파일이 만들어지고 CMakeLists.txt에서 타켓이름은 Tutorial임

CMakeLists.txt

cmake_minimum_required(VERSION 3.10) #버전표시
project(Tutorial) #프로젝트명 표시
add_executable(Tutorial tutorial.cxx) # 실행파일 만들기

윈도우에서 CMake사용시 cl인지 gcc인지?

message(STATUS "C Compiler: ${CMAKE_C_COMPILER}")

message(STATUS "C++ Compiler: ${CMAKE_CXX_COMPILER}")

message(STATUS "C Compiler ID: ${CMAKE_C_COMPILER_ID}")

message(STATUS "C++ Compiler ID: ${CMAKE_CXX_COMPILER_ID}")

현재 타겟의 컴파일 옵션은?

#현재 CMakeListtxt에서 설정된것

get_target_property(TARGET_COMPILE_OPTIONS my_target COMPILE_OPTIONS)

#모든 타겟의 옵션 상속된것까지 /

get_target_property(ALL_COMPILE_OPTIONS my_target INTERFACE_COMPILE_OPTIONS) 

CMake Tutorial — CMake 3.30.2 Documentation