하루y

Tailwind CSS의 수천 가지 클래스명을 모두 외우는 것은 불가능에 가깝고, 숙련자들도 그렇게 하지 않습니다. 효율적으로 클래스명을 찾고 익히는 4가지 핵심 방법을 알려드릴게요.

1. 공식 문서 검색 (가장 정확한 방법)

가장 추천하는 방법은 **Tailwind CSS Documentation**을 활용하는 것입니다.

• Ctrl + K (맥은 Cmd + K): 공식 문서에서 단축키를 눌러 검색창을 띄우세요.
• 찾고 싶은 CSS 속성(예: font-size, flex, position)을 입력하면 대응하는 클래스명 리스트가 즉시 나옵니다.

2. VS Code 확장 프로그램 (필수 설치)

Tailwind CSS IntelliSense 확장을 설치하면 코딩 스타일이 완전히 달라집니다.

• 자동 완성: 클래스명을 입력하기 시작하면 사용 가능한 목록을 보여줍니다.
• 실시간 미리보기: 클래스명 위에 마우스를 올리면 실제 어떤 CSS 코드가 적용되는지 팝업으로 보여줍니다.
• 색상 확인: 색상 클래스 옆에 작은 사각형으로 실제 색상을 표시해 줍니다.

3. 클래스명 명명 규칙(Naming Convention) 이해

Tailwind의 클래스명은 일정한 패턴이 있어, 원리만 알면 유추하기 쉽습니다.

• 속성-값 구조: m-4 (margin: 4), p-2 (padding: 2)
• 방향 지정: mt-4 (margin-top), px-2 (padding left & right)
• 색상 단계: bg-blue-500처럼 색상명-밝기(50~900) 구조를 가집니다.
• 수치 단위: 보통 1 단위당 0.25rem (4px)입니다. 즉, w-4는 1rem (16px)이 됩니다.

4. 치트 시트(Cheat Sheet) 활용

공식 문서가 너무 방대하다면, 한 페이지에 모든 클래스를 모아둔 치트 시트 사이트를 북마크해 두세요. 한눈에 클래스를 훑어볼 때 매우 유용합니다.

• Tailwind Components Cheat Sheet
• Nerdcave Tailwind Cheat Sheet

팁: 브라우저 개발자 도구 활용

이미 만들어진 Tailwind 사이트가 있다면, **F12(개발자 도구)**를 눌러 요소를 찍어보세요. 어떤 클래스 조합이 어떤 디자인을 만드는지 직접 눈으로 확인하는 것이 가장 빠른 학습법입니다.

처음에는 flex나 grid 같은 레이아웃 관련 클래스부터 시작해서, 점차 색상과 간격 순으로 익혀보시는 건 어떨까요? 가장 먼저 구현해보고 싶은 UI 스타일이 있으신가요?

CORS(Cross-Origin Resource Sharing) 처리방안

1. 처리방안

1안) 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하여 클라이언트의 요청 출처를 허용하는 것.

2안) 프록시 서버를 사용하거나, 브라우저 확장 프로그램을 활용하는 방법.

openapi 호출할 때 CORS가 발생하여, 1안으로는 해결할 수 없어서 2안으로 진행함.

2. 구현절차

2.1 proxy module 설치

npm install http-proxy-middleware

2.2 proxy module 설정

setupProxy.js 파일을 생성하고, 설정한다.

 - 호출 하려는 url: https://apihub.kma.go.kr/api/typ02/openApi/VilageFcstMsgService/getLandFcst?pageNo=1&numOfRows=10&dataType=JSON&regId=11B20601&authKey=인증키

 - proxy로 호출하는 url: http://localhost:3001/proxy/api/typ02/openApi/VilageFcstMsgService/getLandFcst?pageNo=1&numOfRows=10&dataType=JSON&regId=11B20601&authKey=인증키

매핑된 /proxy는 client에서 proxy 구분으로 사용될 뿐, 실제서버에서는 url에 들어가지 않음. (react 버전 19.2.0 기준)

2.3. proxy url로 호출

결과

end.

jsp 를 이용한 로직, 또는 windows 의 tasklist 나, unix/linux의 ps 를 이용할 수도 있다.

	private static boolean checkRunningJarProcesses(String checkProcess) {
        boolean jarProcessFound = false;
        if(checkProcess == null) {
        	return jarProcessFound;
        }        	
        
        checkProcess = checkProcess.trim();
        
    	// 환경설정. 1) JAVA_HOME 정의하고, 2) path에 %JAVA_HOME%\bin 추가할 것.  
    	String command = "jps";
        String line;
        Process process = null;
        try {
            process = new ProcessBuilder(command).start();
            logger.debug("Checking for running JAR processes...");
            try(BufferedReader reader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {
                while ((line = reader.readLine()) != null) {
                    // "java -jar"가 포함된 프로세스를 찾음
                	String[] columns = line.split(" "); // 1: pid, 2: process
                    if (columns.length > 1 && checkProcess.equalsIgnoreCase(columns[1])) {
                    	logger.debug("Found JAR process: " + line);
                        jarProcessFound = true;
                    }
                }            
            }        	
            // int returnCode = process.waitFor();
            // logger.debug("returnCode: {}", returnCode);
        } catch (IOException e) {
        	logger.error(e.toString());
	    } finally {
	    	if(process != null) {
	            process.destroy();
	    	}
	    }
		
		return jarProcessFound;
	}

end.

cmd script - jar application 이 미실행 중일 때만, start 수행하는 스크립트. (@ChatGPT)

@echo off
set JAR_NAME=your_application.jar

REM JPS 명령어로 현재 JAR 파일이 실행 중인지 확인
for /f "tokens=2" %%i in ('jps -l ^| findstr /I "%JAR_NAME%"') do (
    set RUNNING=true
)

REM 실행 중이 아니라면 애플리케이션 시작
if not defined RUNNING (
    echo Starting Java application...
    start "JavaApp" java -jar "%JAR_NAME%"
) else (
    echo Java application is already running.
)

end.