코딩항해기

[Error/JTE] 외장 톰캣으로 실행 시 흰 페이지 뜨는 에러

miniBcake — Wed, 21 Jan 2026 13:10:42 +0900

Springboot 4.0.1

내장 톰캣 (임베디드 톰캣)으로 구동 시에는

gg.jte.development-mode가 true여야하지만

gg.jte.development-mode=true

외장 톰캣은 src/main/jte 폴더를 알지 못하므로 사전 컴파일 옵션을 켜줘야한다.

그러면서 development-mode를 꺼줘야 정상 구동한다.

(외장 톰캣 세팅 시 내장 톰캣으로는 구동 안됨)

# JTE
gg.jte.development-mode=false
gg.jte.use-precompiled-templates=true

그럼 정상 작동하는 걸 확인 할 수 있다.

파일이 없으니까 기본 Resolver가 실행된 건데

ViewResolver 문제라고만 나오고, 로그에도 크게 별 내용이 없고,, JTE도 처음 하는 거라 삽질 한 느낌..

[기타](URL) Http 상태 코드 정리

miniBcake — Fri, 16 Jan 2026 17:26:12 +0900

https://www.jin-blog.dev/posts/2aa737e1-66ac-42f8-bd70-bdaadfee96e3

Jin's Dev Log | HTTP 응답 상태 코드

내가 보려고 편집한 상태코드들 (feat: MDN)

www.jin-blog.dev

[기초] WebDAV

miniBcake — Fri, 16 Jan 2026 09:20:49 +0900

Web Distributed Authoring and Versioning (웹 분산 저작 및 버전 관리)

WebDAV는 HTTP를 확장해서 웹 서버의 파일을 네트워크 드라이브처럼 읽고/쓰게 해주는 파일 관리용 프로토콜이다.
HTTP/HTTPS 위에서 동작하며, 원격 서버에 있는 문서·파일을 생성, 수정, 삭제, 이동할 수 있게 해준다.

주요 기능 정리

파일 잠금(lock): 동시에 여러 사용자가 편집할 때 덮어쓰기를 방지.
속성 관리: 작성자, 수정 시간 등 메타데이터를 읽고/설정.
컬렉션(폴더) 관리: 디렉터리 생성(MKCOL), 복사(COPY), 이동(MOVE) 등 제공.

HTTP 확장 메서드

PROPFIND: 리소스의 속성 정보(메타데이터, 목록)를 조회.
PROPPATCH: 리소스의 속성을 수정/삭제.
MKCOL, COPY, MOVE, LOCK, UNLOCK 등 추가 메서드로 파일 시스템 비슷한 조작을 지원.

사용 예시

NAS, 웹하드, 그룹웨어, 문서 협업 시스템 등에서 웹 기반 파일 공유에 활용.
FTP와 달리 80/443 포트 하나로 동작하고, HTTPS를 통한 전송 암호화와 인증 연동이 용이하다는 장점이 있다.

[Linux](URL) 우분투 부팅 USB 만들기

miniBcake — Wed, 14 Jan 2026 16:53:30 +0900

https://amkorousagi-money.tistory.com/entry/%EC%9A%B0%EB%B6%84%ED%88%AC-%EB%B6%80%ED%8C%85-usb-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%9A%B0%EB%B6%84%ED%88%AC-%EC%84%A4%EC%B9%98

우분투 부팅 usb 만들기, 우분투 설치

우분투 이미지 다운로드 우분투 22.04 버전이 stable이지만 몇몇 소프트웨어가 아직 호환이 되지 않는 문제가 있기 때문에 우분투 20.04 버전을 기준으로 포스팅합니다. Ubuntu 20.04.4 LTS (Focal Fossa) Selec

amkorousagi-money.tistory.com

https://ubuntu.com/download/desktop

https://rufus.ie/ko/

Rufus - 부팅 가능한 USB 드라이브를 간편하게 만들기

rufus.ie

[Linux] 크론탭 CronTab

miniBcake — Sun, 7 Dec 2025 16:28:07 +0900

crontab -e : Crontab 파일 편집기 열기

crontab -l : 현재 등록된 Cron 작업 확인

crontab -r : 현재 등록된 모든 Cron 작업 제거

Cron 구문 작성 규칙

Crontab 파일에 작업 스케줄을 등록할 때는 아래와 같은 다섯 자리 시간 필드와 실행할 명령어 순서로 작성해야 합니다.

순서	필드	허용 값	설명
1	분 (Minute)	0 - 59	몇 분에 실행할지
2	시 (Hour)	0 - 23	몇 시에 실행할지 (24시간제)
3	일 (Day of Month)	1 - 31	매월 며칠에 실행할지
4	월 (Month)	1 - 12	몇 월에 실행할지
5	요일 (Day of Week)	0 - 7	요일에 실행할지 (0 또는 7=일요일, 1=월요일, ..., 6=토요일)
6	명령어	모든 쉘 명령어	실제로 실행할 명령어 또는 스크립트

Crontab 시간 설정 예시

시간 필드에서는 특정 값 외에도 다양한 기호를 사용하여 반복을 설정할 수 있습니다.

기호	의미	예시	설명
*	모든 값	* * * * *	매 분, 매 시, 매일 실행 (1분마다)
,	쉼표 (목록)	0 10 * * 1,3,5	매주 월, 수, 금요일 오전 10시 0분에 실행
-	하이픈 (범위)	0 10 * * 1-5	월요일부터 금요일까지 오전 10시 0분에 실행
/	슬래시 (간격)	/15 * * *	15분 간격(0, 15, 30, 45분)으로 실행

주요 예제

스케줄 구문	설명
0 3 * * * /bin/bash /path/to/backup.sh	매일 새벽 3시 0분에 backup.sh 스크립트 실행
/10 * * * /usr/bin/logger "10분마다 실행"	10분마다 로그 기록 (10분, 20분, 30분...)
0 0 1 * * /path/to/monthly_report.sh	매월 1일 0시 0분에 월별 보고서 스크립트 실행

특수 문자열 (Special Strings)

자주 사용하는 스케줄 패턴은 짧은 문자열로 대체하여 사용할 수 있습니다.

문자열	구문과 동일	설명
@hourly	0 * * * *	매 시 정각
@daily	0 0 * * *	매일 자정 (새벽 0시 0분)
@weekly	0 0 * * 0	매주 일요일 자정
@monthly	0 0 1 * *	매월 1일 자정
@annually	0 0 1 1 *	매년 1월 1일 자정
@reboot		시스템 재부팅 시 한 번 실행

[Nexacro](URL) 넥사크로 OSMU

miniBcake — Tue, 25 Nov 2025 09:30:42 +0900

https://m.blog.naver.com/tobesoftux/220993962355

Nexacro platform으로 OSMU 시스템 만들기

지난 ‘BUX모델이란?’ 연재를 통해 모바일 오피스와 기업용 UI의 One Source ...

blog.naver.com

https://blog.naver.com/tobesoftux/220992459489

모바일오피스,기업용 UI의 OSMU - 1

혁신기업의 스마트워크-모바일오피스 도입오늘날 IT분야에서 모바일 만큼 사람들의 집중을 받는 주제는 ...

blog.naver.com

[기타] Gson 어노테이션, Jackson 어노테이션 비교 (JSON)

miniBcake — Fri, 15 Aug 2025 10:38:40 +0900

Gson에서 Jackson으로 JSON 문자열 변경 라이브러리를 바꾸게 되었다.

그때 사용한 비교 정보를 기록용으로 남겨둔다.

Gson	Jackson	기능 요약	상세 설명
@SerializedName	@JsonProperty	필드명을 JSON에서 다른 이름으로 매핑	JSON과 자바 필드명이 다를 때 매핑. Jackson에서는 속성명뿐 아니라 직렬화/역직렬화 접근성(access = READ_ONLY, WRITE_ONLY)도 지정 가능.
@Expose	@JsonProperty(access=...) @JsonIgnore	해당 필드를 직렬화/역직렬화 할지 제어	Gson은 기본적으로 모든 필드 직렬화/역직렬화하지만, GsonBuilder().excludeFieldsWithoutExposeAnnotation()을 설정하면 @Expose붙은 필드만 포함. @Expose(deserialize=false, serialize=true)처럼 세분화 지정 가능. Jackson은 @JsonProperty(access=...)로 읽기/쓰기 별도 제어. @JsonIgnore는 필드를 직렬화/역직렬화에서 완전히 제외.
@Since	@JsonView @JsonProperty(access=...)	특정 버전(이상)에서만 필드 포함	Gson은 @Since로 특정 버전 이상일 때만 필드 포함 가능. Jackson은 완전히 같은 기능은 없지만 @JsonView로 특정 뷰, 또는 @JsonProperty(access=...)로 직렬화/역직렬화 제어 가능.
@Until	-	특정 버전(이하)에서만 필드 포함	Gson만 지원. 지정한 버전 이하에서만 필드 포함. Jackson엔 직접 매칭 개념 없음.
-	@JsonInclude	조건(Null 등) 따라 JSON 포함 여부 선택	Jackson만 지원. 필드 값이 null · default 등 조건에 따라 JSON 내 포함 여부를 결정함.
-	@JsonIgnoreProperties	여러 필드 한 번에 제외	Jackson만 지원. 클래스나 필드 단위에서 여러 속성 이름을 한꺼번에 제외할 때 사용.
-	@JsonAlias	JSON의 여러 키를 하나의 필드로 허용	Jackson만 지원. 여러 JSON key를 하나의 필드에 매핑할 때 유용.

[Spring] Gradle Dependency Configuration

miniBcake — Thu, 5 Jun 2025 15:00:57 +0900

주요 Gradle Dependency Configuration 종류, 예시, 설명

종류	예시	설명
implementation	implementation 'org.springframework:spring-core:5.3.31'	컴파일/런타임 모두 필요. 외부에 노출되지 않음(모듈 캡슐화). 가장 일반적으로 사용.
api	api 'com.google.guava:guava:33.2.0-jre'	컴파일/런타임 모두 필요. 이 모듈을 사용하는 다른 모듈에도 의존성이 전파됨.
compileOnly	compileOnly 'javax.servlet:servlet-api:2.5'	컴파일 시에만 필요. 런타임에는 포함되지 않음. 예: 서블릿 API
runtimeOnly	runtimeOnly 'mysql:mysql-connector-java:8.0.33'	런타임에만 필요. 컴파일에는 필요 없음. 예: DB 드라이버
testImplementation	testImplementation 'org.junit.jupiter:junit-jupiter:5.11.4'	테스트 코드에서만 필요. 실제 배포에는 포함되지 않음.
testCompileOnly	testCompileOnly 'org.projectlombok:lombok:1.18.32'	테스트 코드 컴파일 시에만 필요. 테스트 실행에는 포함되지 않음.
testRuntimeOnly	testRuntimeOnly 'org.hsqldb:hsqldb:2.7.2'	테스트 실행(런타임)에서만 필요. 예: 테스트 DB
annotationProcessor	annotationProcessor 'org.projectlombok:lombok:1.18.32'	컴파일 시 어노테이션 기반 코드 생성용. 예: Lombok
developmentOnly	developmentOnly 'org.springframework.boot:spring-boot-devtools:3.3.0'	개발 환경에서만 필요. 배포에는 포함되지 않음. 예: 핫리로드 도구
providedRuntime	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'	WAR 배포 시 서버가 제공하므로 빌드 결과물에는 포함하지 않음.
fileTree	implementation fileTree(dir: 'libs', include: ['*.jar'])	특정 폴더의 모든 JAR 파일을 의존성에 추가. 로컬 라이브러리 사용 시
project	implementation project(':common')	같은 멀티 프로젝트 내 다른 모듈을 의존성에 추가

dependencies {
    // 컴파일과 런타임 모두 필요한 일반적인 의존성
    implementation 'org.springframework.boot:spring-boot-starter-web'

    // 다른 모듈에서도 이 의존성을 사용할 수 있게 노출 (라이브러리 개발 시 주로 사용)
    api 'com.google.guava:guava:33.2.0-jre'

    // 컴파일 시에만 필요, 실행 파일에는 포함되지 않음 (예: Lombok)
    compileOnly 'org.projectlombok:lombok:1.18.32'

    // 컴파일 시 어노테이션 프로세서로 사용 (예: Lombok)
    annotationProcessor 'org.projectlombok:lombok:1.18.32'

    // 런타임에만 필요, 컴파일 시에는 필요 없음 (예: DB 드라이버)
    runtimeOnly 'mysql:mysql-connector-java:8.0.33'

    // 개발 환경에서만 필요, 배포에는 포함되지 않음 (예: DevTools)
    developmentOnly 'org.springframework.boot:spring-boot-devtools'

    // WAR 배포 시 톰캣 등 서버가 제공하므로 빌드 결과물에는 포함하지 않음
    providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'

    // 특정 폴더의 모든 JAR 파일을 의존성에 추가 (예: libs 폴더)
    implementation fileTree(dir: 'libs', include: ['*.jar'])

    // 멀티 프로젝트에서 다른 모듈을 의존성에 추가
    implementation project(':common')

    // 테스트 코드에서만 필요
    testImplementation 'org.springframework.boot:spring-boot-starter-test'

    // 테스트 코드 컴파일 시에만 필요
    testCompileOnly 'org.projectlombok:lombok:1.18.32'

    // 테스트 실행(런타임)에서만 필요 (예: 테스트용 DB)
    testRuntimeOnly 'com.h2database:h2'
}

[Tip](URL) 인텔리제이 intellij 멀티 모듈

miniBcake — Thu, 5 Jun 2025 10:07:16 +0900

https://j-ungry.tistory.com/382

[Spring] intellij 멀티모듈 만들기 + 의존성 추가

저번에 게이트웨이랑 api 서버 2개를 만들었는데 플젝마다 repo 를 만들면 git 에서 관리가 어려울 것 같아 멀티 모듈로 만들어보려고 한다 !!!프로젝트 우클릭 -> new -> module을 선택하면 spring 프로젝

j-ungry.tistory.com

[실습/Flutter] inappwebview로 http status 처리

miniBcake — Wed, 21 May 2025 11:45:41 +0900

flutter에는 webview가 두 가지 있는데 그냥 webview는 공식에서 관리하는 대신 기능이 적고 inappwebview는 서드파티앱인 대신 기능이 상대적으로 많은 webview이다.

처음에는 webview를 사용했는데 http status를 받아와서 404나 500처리를 하려니 쉽지 않아서 inappwebview로 전환했다.

뭔가 코드 구조도 좀 더 간결한 느낌...!

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart'; // InAppWebView 패키지 가져오기

void main() {
  runApp(const Webview()); // 앱 실행
}

class Webview extends StatelessWidget {
  const Webview({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WebviewPractice(), // 홈 화면으로 WebviewPractice 설정
    );
  }
}

class WebviewPractice extends StatefulWidget {
  const WebviewPractice({super.key});

  @override
  State<WebviewPractice> createState() => _WebviewPracticeState(); // 상태 생성
}

class _WebviewPracticeState extends State<WebviewPractice> {
  late InAppWebViewController _controller; // 웹뷰 컨트롤러 

  // 접근 제어 목록
  final List<String> whitelist = ['naver.com', 'flutter.dev']; // 허용할 도메인 목록
  final List<String> blacklist = ['google.co.kr']; // 차단할 도메인 목록

  // 화이트 리스트 함수
  Future<NavigationActionPolicy> _checkWhiteList (host) async {
    if (whitelist.any((allowed) => host.contains(allowed)))
      return NavigationActionPolicy.ALLOW; // 탐색 허용

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('허용되지 않은 사이트입니다: $host')),
    );
    return NavigationActionPolicy.CANCEL; // 탐색 차단
  }

  // 블랙 리스트 함수
  Future<NavigationActionPolicy> _checkBlackList (host) async {
    if (blacklist.any((blocked) => host.contains(blocked))) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('차단된 사이트입니다: $host')),
      );
      return NavigationActionPolicy.CANCEL; // 탐색 차단
    }
    return NavigationActionPolicy.ALLOW; // 그 외의 모든 URL은 허용
  }

  Future<NavigationActionPolicy> _chooseCheckList(host, String msg) async {
    switch (msg) {
      case 'B':
        return _checkBlackList(host);
      case 'W':
        return _checkWhiteList(host);
      default:
        debugPrint('error: 알 수 없는 리스트 타입 - $msg');
        return NavigationActionPolicy.CANCEL;
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('InAppWebView')), // 앱바 제목

      body: InAppWebView(
        // 초기 URL 설정
        initialUrlRequest: URLRequest(
          url: WebUri('https://naver.com'), // WebUri로 URL 생성 (초기 uri)
          
          // 테스트용
          // url: WebUri('https://httpstat.us/404'), // 404 오류 테스트를 위한 URL
          // url: WebUri('https://httpstat.us/500'), // 500 오류 테스트
          // url: WebUri('https://example.com/nonexistent-page'), // 404 오류 발생
          // url: WebUri('https://thiswebsitedoesnotexist.zzz'), // 도메인 해석 실패 테스트
        ),

        // 웹뷰 초기 설정
        initialSettings: InAppWebViewSettings(
          javaScriptEnabled: true, // 자바스크립트 활성화
        ),

        // 웹뷰가 생성됐을 때 호출되는 콜백
        onWebViewCreated: (controller) => _controller = controller, // 컨트롤러 저장 (나중에 웹뷰 제어에 사용)

        // HTTP 통신 오류 처리 (서버 응답 오류: 404, 500 등)
        onReceivedHttpError: (controller, request, errorResponse) { // 매개변수로 받는 controller는 이벤트 controller, 콜백에서 저장한 _controller는 전역.. (동일한 객체 참조)
          int? statusCode = errorResponse.statusCode; //상태코드
          debugPrint('HTTP error: $statusCode, url: ${request.url}, description: ${errorResponse.reasonPhrase}');

          // 404나 500 오류일 때 리다이렉트 (연습을 위해 다른 페이지로 요청)
          if ( (statusCode == 404 || statusCode == 500) )
            _controller.loadUrl( urlRequest: URLRequest(url: WebUri('https://new.express.adobe.com/')) );
        },

        // 웹뷰 로딩 자체 오류 처리 (네트워크 연결 실패, 도메인 해석 실패 등)
        onReceivedError: (controller, request, error) => debugPrint('Load error: ${error.type.toString()}, ${error.description}, url: ${request.url}'),

        // URL 로딩 요청을 가로채서 허용/차단 결정하는 콜백
        shouldOverrideUrlLoading: (controller, navigationAction) async {
          final uri = navigationAction.request.url;
          if (uri == null) return NavigationActionPolicy.CANCEL; // URL이 없으면 탐색 차단
          final host = uri.host; // 호스트 도메인 추출

          return _chooseCheckList(host, 'B');
        },
      ),
    );
  }
}

        // HTTP 통신 오류 처리 (서버 응답 오류: 404, 500 등)
        onReceivedHttpError: (controller, request, errorResponse) { // 매개변수로 받는 controller는 이벤트 controller, 콜백에서 저장한 _controller는 전역.. (동일한 객체 참조)
          int? statusCode = errorResponse.statusCode; //상태코드
          debugPrint('HTTP error: $statusCode, url: ${request.url}, description: ${errorResponse.reasonPhrase}');

          // 404나 500 오류일 때 리다이렉트 (연습을 위해 다른 페이지로 요청)
          if ( (statusCode == 404 || statusCode == 500) )
            _controller.loadUrl( urlRequest: URLRequest(url: WebUri('https://new.express.adobe.com/')) );
        },

이 부분이 에러 발생 시 리다이렉트하는 부분이며, errorResponse로부터 statusCode를 받아와 전역 controller를 통해 리다이렉트 시키는 구조로 되어있다. onReceiveHttpError의 경우 http 에러가 발생했을 때만 처리되기 때문에 네트워크 문제나 도메인 해석 실패 등은 감지할 수 없고, 정상 작동도 여기서는 처리할 수 없다.

[Flutter] Dart 기초

miniBcake — Wed, 21 May 2025 11:31:26 +0900

다트 Dart

구글이 멀티 플랫폼 상에서 동작되도록 하는 앱을 위해 디자인된 객체지향 프로그래밍 언어이다. 2011년 10월 공개되었으며, C언어와 유사한 문법을 가지고 있고, Java, C#, JS와 같은 기능적 스트럭쳐를 추가한 언어라서 간결하고 강력한 기능을 지원한다.

Dart는 DVM(Dart VM)상에서 동작하거나 네이티브 컴파일링을 통해 모바일, 데스크톱, 웹 브라우저, 서버 플랫폼 상에서 어플리케이션 실행을 지원한다. 구글에서 2017년 발표한 크로스플랫폼 앱 프레임워크인 Flutter가 사용하는 언어이다.

Android Studio, Intellij, VS Code 등에서 사용할 수 있다. (IDE)

Dart 자료형

기본 자료형
int	정수형	42, -1, 0
double	부동 소수점	3.14, -0.5, 1.0
num	int와 double의 상위 타입	int 또는 double 값 가능
bool	불리언	true, false
String	문자열	'안녕', "Dart"
컬렉션 자료형
List	순서가 있는 객체 집합	[1, 2, 3], <String>['a', 'b']
Set	중복이 없는 객체 집합	{1, 2, 3}, <String>{'a', 'b'}
Map	키-값 쌍의 컬렉션	{'key': 'value'}, <String, int>{'a': 1}
특수 자료형
dynamic	모든 타입 허용	어떤 타입도 할당 가능
var	타입 추론	초기값에 따라 타입 결정
final	한 번만 할당 가능	final name = 'Dart'
const	컴파일 타임 상수	const pi = 3.14
Object	모든 클래스의 기본 클래스	모든 객체의 상위 타입
Null	null 값만 가질 수 있음	null
기타
Runes	유니코드 문자열	' '.runes
Symbol	심볼 식별자	#name
Enum	열거형	enum Color { red, green, blue }
Future	비동기 작업의 결과	Future<String>
Stream	비동기 데이터 시퀀스	Stream<int>
Function	함수 타입	void Function(String)

기본 함수 구조

반환타입 함수이름(매개변수) { //매개변수 타입 생략 가능(명시하는 것이 좋음)
  // 함수 내용
  return 반환값; // 반환값이 있는 경우
}

var와 dynamic 차이

// [불가] - 문자 타입의 var 에 1 을 집어넣지 못함
var userName = 'aeco';
userName = 1;

// [가능] - 문자 타입의 dynamic 에 1 을 넣어 숫자 타입으로 변경 됨
dynamic userName = 'aeco';
userName = 1

final, const 차이

final String userName1 = 'aeco'; //런타임 때 생성
const String userName2 - 'aeco'; //컴파일 때 생성

물음표 연산자

// 타입 뒤에 ?를 명시해서 null값을 가질 수 있음
double? number1 = null;

// 타입 뒤에 ?를 명시하지 않아 에러가 남
double number2 = null;

double? number;   // 자동으로 null값 지정
print(number);

number ??= 3;   // ??를 사용하면 기존 값이 null일 때만 저장
print(number);

number ??= 4; // null이 아니기 때문에 기존 3이 그대로 유지
print(number);

https://mjn5027.tistory.com/115

[실습/Flutter] WebView

miniBcake — Tue, 20 May 2025 21:58:36 +0900

앱 내에서 웹페이지 띄우기 (WebView 활용)

dependencies

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  #WebView 의존 추가
  webview_flutter: ^4.12.0

dart code

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart'; //webview

void main() {
  runApp(const Webview());
}

class Webview extends StatelessWidget {
  const Webview({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WebviewPractice(),
    );
  }
}

class WebviewPractice extends StatefulWidget {
  const WebviewPractice({super.key});

  @override
  State<WebviewPractice> createState() => _WebviewPracticeState();
}

class _WebviewPracticeState extends State<WebviewPractice> {
  late final WebViewController _controller;

  // 화이트리스트 도메인
  final List<String> whitelist = ['naver.com', 'flutter.dev'];

  // 블랙리스트 도메인
  final List<String> blacklist = ['google.co.kr'];

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate( //검증
          onNavigationRequest: (NavigationRequest request) {
            final host = Uri.parse(request.url).host; //uri의 도메인 추출
            
            //화이트리스트 검증 또는 블랙리스트 검증 추가 위치
          },
        ),
      )
      ..loadRequest(Uri.parse('https://naver.com')); //첫 페이지 세팅
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView')), //상단 바 세팅
      body: WebViewWidget(controller: _controller), //body 전체를 웹 페이지로
    );
  }
}

화이트 리스트의 경우

(화이트 리스트에 있는 도메인만 허용)

// 화이트리스트 로직
if (whitelist.any((allowed) => host.contains(allowed))) { //whiteList의 요소가 host(도메인)에 포함된다면
     return NavigationDecision.navigate; //허용
}
// 차단된 도메인 접근 시 알림 가능
ScaffoldMessenger.of(context).showSnackBar( //스낵바알림
     SnackBar(content: Text('허용되지 않은 사이트입니다: $host')),
);
return NavigationDecision.prevent; //차단

블랙 리스트의 경우

(블랙 리스트에 있는 도메인만 비허용)

// 블랙리스트 로직
if (blacklist.any((blocked) => host.contains(blocked))) { //blackList의 요소가 host(도메인)에 포함된다면
     ScaffoldMessenger.of(context).showSnackBar( //스낵바알림
          SnackBar(content: Text('차단된 사이트입니다: $host')),
     );
     return NavigationDecision.prevent; //차단
}
return NavigationDecision.navigate; //허용

[Tip] 인텔리제이 intellij 세팅

miniBcake — Tue, 20 May 2025 19:58:52 +0900

[Tip] 인텔리제이 intellij 단축키 (window)

https://resources.jetbrains.com/storage/products/intellij-idea/docs/IntelliJIDEA_ReferenceCard.pdfhttps://www.jetbrains.com/help/idea/mastering-keyboard-shortcuts.html# IntelliJ IDEA keyboard shortcuts | IntelliJ IDEA www.jetbrains.com https://disquiet.io/

minibcake.tistory.com

(설정 탭 : File - Settings (Ctrl+alt+S))
인텔리제이 설정에는 IDE 설정과 Project 설정이 있음
(구분되는 설정은 상단에 설정 드롭다운메뉴가 있으니 상단 체크!)

▤ 한글 -> 영어 변경
[Settings] Plugins - installed - korean 검색 - 체크해제

▤ SQL no datasource 노란 밑줄 해제
[Settings] Editor - inspections - No data sources configured 체크해제

▤ 코드 작성 화면에서 오른쪽 세로줄 제거
[Settings] Editor - General - Apprerance - Show hard wrap and visual guides... 설정 체크 해제

▤ 테마 변경
ctrl + `

▤ 코드 폴딩 단축키 (properties 값 미리보기, 코드 접기 등)
접기 : ctrl + numpad -
풀기: ctrl + numpad +

▤ 코드 한 줄 변경 해제
[Settings] Editor - General - Code Folding - One-line methods 해제

▤ import 자동 접힘 해제
[Settings] Editor - General - Code Folding - import 해제

▤ 파일 미리보기
[Settings] Editor - General - Editor Tabs - Enable preview tab 체크

▤ 주석(코멘트) 맞춤법 검사 해제
[Settings] Editor - inspections - proofreading - Typo - [option] Process comments 해제

▤ import 자동 *(와일드카드) 처리 해제
[Settings] Editor - code style - 언어 - import - Class count to use, Names count to use 숫자를 999처리

▤ 안 쓰는 import 자동처리
[Settings] Editor - General - Auto Import - Optimize imports on the fly

▤ 탭, 스페이스바 표시
[Settings] Editor - General - Appearance - Show whitespaces
- Leading : 줄에서 코드 앞쪽의 공백 표시
- Inner : 줄에서 코드 중간의 공백 표시
- Trailing : 줄에서 코드 끝의 공백을 표시
- Selection : 코드를 선택했을 때 선택된 영역의 공백을 표시

▤ 대소문자를 가리지 않는 자동완성
[Settings] Editor - General - Code Completion - Match case 해제

▤ hot reload 설정 (only front)
[Settings] server edit - Run/Debug Configurations - Modify options
- On 'Update' action : Update resources
- On frame dectivation : Update resources

▤ UTF-8 설정
[Settings] Editor - File Encodings

▤ 작업 중인 패키지 경로 보여주기
project 우클릭 - Always Select Opened File

▤ ctrl+휠 에디터 폰트 사이즈 조절 옵션 켜기
[Settings] Editor - General - Change font size with Ctrl+Mouse Wheel 체크

▤ 설정 백업 및 동기화 (intellij 계정)
[Settings] Backup and Sync - login (로그인 후 백업 및 동기화 원하는 항목 선택)

▤ 터미널 windows CMD 에서 Git Bash로 변경
Tools - Terminal - shell path - (git/bin/sh.exe가 있는 경로)

"C:\Program Files\Git\bin\sh.exe" -login -i

--> 이 방식보다는 그냥 git bash 창 여는게 나음

▤ 스페이스를 탭으로 전환 (관련 설정 해봐야 안 먹힘..)
Search Everywhere (shift 두번) - to tabs
최하단 오른쪽에 tab할지 spaces할지 결정하는 설정있음

▤ TODO

[Tip] 인텔리제이 intellij TODO 코드 태그 커스텀

// TODO, // FIXME 와 같은 코드 태그를 인텔리제이에서도 설정할 수 있다. 코드 태그를 사용하면 주석을 하이라이팅하거나 한 눈에 모아볼 수도 있고 스크롤에서 해당 위치에 표시가 되기 때문에

minibcake.tistory.com

가장 많이 사용되는 IntelliJ IDEA 단축키 15개 | Post Blog

IntelliJ IDEA는 편집, 탐색, 리팩토링, 디버깅 등 일상적으로 수행하는 대부분의 작업에 대하여 해당 명령어의 키보드 단축키를 제공합니다. 이러한 단축키를 배우고 연습하여 기억해 두면 작업 흐

blog.jetbrains.com

전체 최상위 폴더에서 "Optimize Imports" 실행
프로젝트 패널에서 루트 폴더(프로젝트 전체)를 선택합니다.

우측 클릭 → Code → Optimize Imports 선택

또는 단축키 Ctrl + Alt + O (Windows/Linux), ⌃ + ⌥ + O (macOS)
→ 이 단축키는 선택한 폴더 하위의 모든 파일에 적용되어, 전체 소스의 unused import를 한 번에 정리할 수 있습니다.

커밋 시 자동 import 정리
커밋 창 우측의 옵션에서 **"Optimize imports"**를 체크
→ 커밋할 때마다 자동으로 import가 정리됩니다.

참고
각 단축키 및 메뉴는 [Code > Optimize Imports] 메뉴에서 확인 가능합니다.

방법 1의 폴더 전체 선택 후 Optimize Imports 실행이 가장 확실하게 프로젝트 전체에 적용됩니다.

자동 정리 옵션을 켜면 커밋이나 저장 시 별도 작업 없이 import가 항상 깨끗하게 정리됩니다.

추가로,
정렬 기준도 설정:
Settings > Editor > Code Style > Java > Imports 에서 import 그룹 순서 및 사용 기준도 세부적으로 지정할 수 있습니다

[Flutter] flutter dependencies version check & update

miniBcake — Tue, 20 May 2025 10:15:52 +0900

flutter는 의존 버전을 확인하고 업그레이드 할 수 있는 기능을 제공한다.

1. 버전 확인

flutter pub outdated

터미널에 해당 명령어를 입력하면 현재 주입된 dependency의 버전을 체크해 알려준다.

2. 업데이트

버전 업데이트가 필요할 경우 하단의 명령어를 터미널에 입력한다.

flutter pub upgrade

3. pub get

pub이 변경되었으니 반영해준다.

flutter pub get

[Flutter] dependencies & dev_dependencies

miniBcake — Tue, 20 May 2025 09:50:36 +0900

Flutter에서 pubspec.yaml에서 dependencies를 보면 두 가지가 있는 것을 볼 수 있다.

# Dependencies specify other packages that your package needs in order to work.
# (의존성은 현재 패키지가 작동하기 위해 필요한 외부 패키지들을 명시합니다.)
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`.
# (패키지 의존성을 최신 버전으로 자동 업데이트하려면 `flutter pub upgrade --major-versions` 명령을 실행하세요.)
# Alternatively, dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev.
# (또는 아래의 버전 번호를 pub.dev에 공개된 최신 버전으로 수동 변경할 수 있습니다.)
# To see which dependencies have newer versions available, run `flutter pub outdated`.
# (사용 중인 의존성 중에서 더 최신 버전이 있는지 확인하려면 `flutter pub outdated`를 실행하세요.)

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons fonts to your application.
  # (다음은 애플 스타일의 아이콘을 제공하는 Cupertino Icons 폰트를 앱에 추가합니다.)
  # Use with the CupertinoIcons class for iOS style icons.
  # (iOS 스타일 아이콘을 사용하려면 CupertinoIcons 클래스를 함께 사용하세요.)
  cupertino_icons: ^1.0.8

  # Flutter 공식 WebView 플러그인입니다.
  # Android, iOS, macOS에서 웹 콘텐츠를 렌더링할 수 있습니다.
  # 최신 버전(4.12.0) 사용 중이며, Flutter 3.0 이상과 호환됩니다.
  webview_flutter: ^4.12.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices.
  # (아래의 "flutter_lints" 패키지는 좋은 코딩 습관을 유도하기 위한 권장 린트 규칙들을 포함합니다.)
  # The lint set provided by the package is activated in the `analysis_options.yaml` file located at the root of your
  # package.
  # (이 패키지가 제공하는 린트 세트는 루트 디렉토리에 위치한 `analysis_options.yaml` 파일에서 활성화됩니다.)
  # See that file for information about deactivating specific lint rules and activating additional ones.
  # (특정 린트 규칙을 비활성화하거나 추가 규칙을 활성화하는 방법은 해당 파일을 참고하세요.)
  flutter_lints: ^5.0.0

이때 dependencies는 개발 완료 후 앱을 배포할 때 포함해야하는 플러그인 목록으로 컴파일 할 때 필요한 의존 목록이다.

dev_dependencies는 개발 단계에서 앱을 테스트하기 위해 필요한 플러그인 목록으로 개발할 때만 필요해서 컴파일할 때는 필요없는 의존 목록이다. 린트가 대표적인 예인데, 린트는 개발할 때 코드 스타일을 통일하기 위한 것이므로 배포할 때는 필요가 없어 dev_dependencies에 들어가 있는 것을 볼 수 있다. 그 외에도 테스트나 디버깅을 위한 도구들이 여기에 들어가게 된다.

[Error/Flutter] Assertion failed : Cannot provide both...

miniBcake — Mon, 19 May 2025 14:56:06 +0900

Container(
  width: double.infinity, height: 300, 
  color: Colors.white, margin: EdgeInsets.all(20), 
  decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10))),
  child: const Text('1', textAlign: TextAlign.center),
),

borderRadius 주는 방법을 찾아보기 전에 여러가지 시도하다가 decoration과 color가 겹쳐서 생긴 문제이다.

flutter 경고는 너무 살벌하게 뜨는 것 같다... ㄷㄷ... 아무튼 color와 decoration은 동시에 사용할 수 없고, decoration을 사용할 때는 color가 decoration 안으로 들어가야한다.

Container(
  width: double.infinity, height: 300, margin: EdgeInsets.all(20), 
  decoration: BoxDecoration(
    color: Colors.white, 
    borderRadius: BorderRadius.all(Radius.circular(10))),
  child: const Text('1', textAlign: TextAlign.center),
),

이렇게 수정하면 정상적으로 color와 borderRadius가 적용된다.

[Error/Flutter] Unable to load asset

miniBcake — Sun, 18 May 2025 23:19:50 +0900

Unable to load asset: "assets/test.png",The asset does not exist or has empty data

Image.asset() 위젯을 사용하니 이미지 위치에 해당 문구가 떴다.

Image.asset()을 사용하기 위해서는 먼저 해당 경로에 파일이 있어야 하며, pubspec.yaml 파일에 assets가 정의되어있어야한다.

근데 파일도 잘 있고, 정의도 해놔서... 원인을 알기 어려웠는데 pub get이 제대로 안되면 그럴 수도 있다고 해서 pub get도 다시 해봤는데 되지 않아 그냥 IDE 다시 껐다가 켜니까 정상적으로 로딩 되는 것을 확인할 수 있었다..

ㅠㅠ

[Flutter] 기초 위젯 사용

miniBcake — Sun, 18 May 2025 23:14:39 +0900

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); //MyApp class 실행
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( //상단 바(appBar), 메인(body), 하단 바(bottomNavigationBar) 3개로 분할해주는 위젯
        appBar: AppBar( title: Text('제목 테스트', style: TextStyle(fontWeight: FontWeight.w900),), //큰 스타일이 아니라면 style에서 지정
                        leading: Icon(Icons.icecream_outlined), actions: [ //title은 제목, leading은 title 앞 icon 쓸 때 사용됨, actions는 오른쪽 버튼들
          Icon(Icons.cake), //icon은 Icon 위젯을 활용해 작성
          Icon(Icons.cake)
        ],),

        body: Align( //정렬 상세 단순 센터 정렬은 Center() 위젯도 있음
          alignment: Alignment.topLeft,
          child: SizedBox(
            child: Row(
                children: [
                  Image.asset('assets/test.png'), //pubspec.yaml에서 assets에 대한 사전 설정이 필요하고 get을 통해 update 적용 후 사용
                  SizedBox(
                    child: Column(
                      children: [
                        Text('1'),
                        Text('2'),
                        Text('3'),
                      ],
                    ),
                  )
                ]
            )
          ),
        ),

        bottomNavigationBar: SizedBox(//Container로 감쌀 수도 있지만 높이 너비 child 정도만 할 때는 가벼운 SizedBox
          width: double.infinity, height: 50, //기본단위 LP
          child: Row( //가로로 정렬, column은 세로로 정렬
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, //메인 축 요소 aligin 설정
              crossAxisAlignment: CrossAxisAlignment.center, //반대 축 요소 aligin 설정
              children : [ //row 처리할 요소들
                Icon(Icons.cake),
                Icon(Icons.cake),
                Icon(Icons.cake),
              ]),
        ),
      ),
    );
  }
}

[Flutter] flutter PowerShell 명령어 정리

miniBcake — Sun, 18 May 2025 14:38:13 +0900

1. Flutter SDK 관련 명령어

flutter channel	Flutter 채널(버전 트랙) 목록 확인 및 변경
flutter config	Flutter 설정 구성
flutter doctor	개발 환경 점검 및 문제 진단
flutter upgrade	Flutter SDK 최신 버전으로 업데이트
flutter downgrade	Flutter SDK 이전 버전으로 다운그레이드
flutter precache	Flutter 도구가 필요한 바이너리 캐시 미리 받기
flutter bash-completion	쉘 자동완성 스크립트 출력

2. 프로젝트 관련 명령어

flutter create <디렉토리>	새 Flutter 프로젝트 생성
flutter run [옵션]	연결된 디바이스나 에뮬레이터에서 앱 실행
flutter build <타겟>	앱 빌드 (apk, ios, web 등 플랫폼 지정 가능)
flutter clean	빌드 캐시 및 생성 파일 삭제 (빌드 초기화)
flutter analyze	Dart 코드 정적 분석 수행
flutter test	단위 테스트 실행
flutter assemble	Flutter 리소스 및 바이너리 빌드
flutter drive	통합 테스트 자동화 실행
flutter gen-l10n	로컬라이제이션(localization) 파일 생성
flutter pub <서브명령어>	Flutter 프로젝트 의존성 관리 및 패키지 관련 명령어 실행

3. 도구 및 디바이스 관련 명령어

flutter devices	연결된 디바이스(에뮬레이터 포함) 목록 확인
flutter emulators	에뮬레이터 목록 확인, 실행, 생성
flutter install	연결된 디바이스에 앱 설치
flutter logs	실행 중인 앱의 로그 출력
flutter screenshot	연결된 디바이스에서 스크린샷 촬영
flutter symbolize	AOT(미리 컴파일)된 Flutter 앱의 스택 트레이스 심볼리케이션 수행
flutter attach	이미 실행 중인 앱에 연결하여 디버깅
flutter custom-devices	사용자 정의 디바이스 관리 (등록, 삭제, 초기화 등)

[Flutter] VSCode 세팅하기

miniBcake — Sun, 18 May 2025 14:19:07 +0900

1. Dart, Flutter Extention(플러그인) 설치

2. Flutter SDK download

플러그인을 다운로드한 뒤에는 Control+Shift+P를 눌러 커멘드창에 flutter를 입력해 New Project를 고르면 SDK 폴더를 지정해주거나 다운로드 할 수 있다.

https://docs.flutter.dev/get-started/install/windows/mobile

Start building Flutter Android apps on Windows

Configure your system to develop Flutter mobile apps on Windows.

docs.flutter.dev

다운로드 한 뒤에 바로 SDK 패스 추가를 물어보는데 바로 세팅되지 않아서.. 다시 New Project를 통해 SDK 폴더를 지정해줬다.

3. VSCode Terminal 에서 확인하기

flutter doctor -v

해당 명령어를 통해 상태를 확인할 수 있는데 당연히 일부 기능에서 문제가 생길 것이다. Android SDK 및 Android Studio가 없기 때문인데 Android Studio를 설치하면 SDK까지 설치가 완료되므로 Android Studio를 설치한다.

4. Android Studio 설치

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

5. Android toolchain 설치

Android Studio가 설치가 완료되면 Android Studio를 통해 필요한 툴들을 설치한다.

More Actions에서 SDK Manager를 선택한다.

여기서 SDK tools에 들어가 부족한 툴을 선택해 다운로드 받아주면 된다.

6. 라이센스 허용

다시 flutter doctor를 VSCode Terminal에서 해보면 licenses가 accepted 되지 않았다고 뜰텐데 아래의 명령어로 라이센스를 허용한다.

flutter doctor --android-licenses

이후 Accept?를 물어보면 y를 입력하면 동의가 완료된다. 모두 동의가 완료되면 하단의 문구가 나온다.

All SDK package licenses accepted

7. 확인

다시 flutter doctor -v를 해보면,

Visual Studio 빼고는 완료된 것을 확인할 수 있다. Android 개발을 연습할 예정이라 일단 뒀으며 필요할 경우 install을 통해 해당 환경을 갖춰주면 된다.

+ 나중에 정리 잘된 영상을 찾아서 첨부한다. 잘 아는 사람이 단계별로 알려줄때 잘 따라서 익혀두자...

[Linux/우분투] Docker 설치

miniBcake — Thu, 10 Apr 2025 17:20:23 +0900

실행환경

Ubuntu 22.04

Docker 설치방법

1. 우분투 시스템 패키지 업데이트

sudo apt-get update

2. 필요한 패키지 설치

sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

3. Docker의 공식 GPG키를 추가

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

4. Docker의 공식 apt 저장소를 추가

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

5. 시스템 패키지 업데이트

sudo apt-get update

6. Docker 설치

sudo apt-get install docker-ce docker-ce-cli containerd.io

7. Docker가 설치 확인

7-1 도커 실행상태 확인

sudo systemctl status docker

7-2 도커 실행

sudo docker run hello-world

출처

- https://velog.io/@osk3856/Docker-Ubuntu-22.04-Docker-Installation

[Docker] Ubuntu 22.04 Docker 설치

Ubuntu 22.04 에 Docker 설치하기

velog.io

실행환경

Ubuntu 22.04

Docker 설치방법

1. 우분투 시스템 패키지 업데이트

sudo apt-get update

2. 필요한 패키지 설치

sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

3. Docker의 공식 GPG키를 추가

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

4. Docker의 공식 apt 저장소를 추가

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

5. 시스템 패키지 업데이트

sudo apt-get update

6. Docker 설치

sudo apt-get install docker-ce docker-ce-cli containerd.io

7. Docker가 설치 확인

7-1 도커 실행상태 확인

sudo systemctl status docker

7-2 도커 실행

sudo docker run hello-world

REFERENCE

ChatGPT

[Linux/우분투] 공장초기화

miniBcake — Thu, 10 Apr 2025 17:01:37 +0900

하단 명령어를 차례로 입력해 초기화한다.

# 모든 패키지 제거
sudo apt-get purge -y $(dpkg --get-selections | grep -v deinstall | grep -v "apt" | grep -v "dpkg" | grep -v "grub" | grep -v "sudo" | grep -v "login" | grep -v "libc6" | grep -v "init" | awk '{print $1}')
 
# 필수 패키지 재설치
sudo apt-get install --reinstall ubuntu-server
 
# 설정 파일 재설정
sudo cp -r /etc/skel/. /etc/
 
# 시스템 업데이트 및 업그레이드
sudo apt-get update
sudo apt-get upgrade -y
 
# 시스템 재부팅
sudo reboot

환경 설정이되지 않은 패키지들을 환경에 설정합니다.

sudo dpkg --configure -a

레포지토리들의 내용을 업데이트합니다.

sudo apt-get update

의존성을 빠뜨린 걸 고치기 위해 아래의 install 명령어를 실행합니다.
(Try to fix missing dependencies:)

sudo apt-get -f install

가능한 새로운 버전으로 모든 패키지들을 업데이트 합니다.

sudo apt-get full-upgrade

Ubuntu desktop을 재설치합니다.

sudo apt-get install --reinstall ubuntu-desktop

불필요한 패키지들을 제거합니다.

sudo apt-get autoremove

이미 설치된 다운로드한 패키지들을 삭제합니다.

sudo apt-get clean

이슈가 해결되었는지 보기 위해 시스템 재시작합니다.

sudo reboot

[ES5] Babel과 Polyfill

miniBcake — Mon, 7 Apr 2025 14:07:45 +0900

트랜스파일러 Transpiler

트랜스파일러는 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환해주는 도구이다. 주로 최신 버전의 언어를 구형 버전의 언어로 변환하는 과정을 거쳐 원본 코드와 동일한 동작을 하는 대상 언어 코드를 생성한다.

최신 버전의 자바스크립트(ES6/ES2015)를 구형 버전인 ES5로 변환해주는 Babel이 대표적인 예이다. 변환을 통해 구형 브라우저에서도 동작할 수 있도록 지원하고, 변환된 코드는 호환성을 확보하면서 최신 기능을 사용할 수 있는 이점을 제공한다.

트랜스파일러는 언어 간의 문법 차이나 기능 지원 차이를 극복하여 크로스플랫폼 개발이나 호환성을 향상시키는데 사용된다. TypeScript의 컴파일러나 CoffeeScript의 컴파일러 등이 트랜스파일러 예시이다.

트랜스파일러를 사용하면 개발자는 최신 언어의 기능과 문법을 사용할 수 있으면서도 호환성을 유지할 수 있어 개발 효율성이 높아진다.

자바스크립트 트랜스파일러

바벨이 가장 인기 있는 트랜스파일러이며, 그 외에도 TypeScript, Buble, SWC, Closure Compiler 등이 있다.

바벨 Babel

바벨은 자바스크립트 트랜스파일러로 최신 버전의 자바스크립트 코드를 구형으로 변환해주는 역할을 수행한다. 바벨은 다양한 빌드 도구와 통합하여 사용할 수 있으며, Webpack과 함께 사용해 모듈 번들링과 트랜스파일링을 한 번에 처리할 수 있다.

그러나 추가적인 빌드 단계를 필요로 하고, 성능 문제를 일으킬 수 있다. 특히 큰 규모의 프로젝트에서는 트랜스파일링 속도가 느려질 수 있다. 그 외에도 오래된 환경 지원에 한계가 있을 수 있다. 일부 기능이 완벽하지 않을 수 있고, 크로스브라우징 이슈의 완벽한 대안이 되지 못하는 점이 있다.

뿐만아니라 브라우저나 실행 환경에 존재하지 않는 내장기능이나 API는 변환하지 못한다는 점이 있다. fetch나 Promise의 경우와 같은 예이다. 이 경우 폴리필을 사용해 문제를 해결할 수 있다.

바벨, 폴리필 예시

바벨

// 변환 전: 최신 자바스크립트 문법 사용
const greet = (name) => `Hello, ${name}!`;
 
export default greet;
 
 
// 변환 후: ES5 이하의 자바스크립트로 변환됨
var greet = function greet(name) {
  return "Hello, " + name + "!";
};
 
module.exports = greet;

폴리필

// 변환 전: 최신 기능을 사용한 코드
const hasValue = [1, 2, 3].includes(2); // includes 메서드는 ES6 기능
 
// 변환 후: 폴리필을 추가한 코드
var hasValue = [1, 2, 3].indexOf(2) > -1; // includes를 지원하지 않는 브라우저에서 대체 구현

Babel 사용하기

Web버전

Babel · Babel

The compiler for next generation JavaScript

babeljs.io

*FORCE ALL TRANSFORMS 옵션 체크

설치버전

Babel을 프로젝트에 적용하는 방법은 여러 가지가 있지만, 보편적이고 효율적인 방법은 npm을 이용해 @babel/cli, @babel/preset-env, @babel/core와 같은 필수 패키지를 설치하고, 이를 .babelrc 파일로 설정하는 것이다. 이렇게 하면 최신 자바스크립트 코드를 쉽게 ES5 이하로 변환할 수 있다.

Babel 설치

npm install --save-dev @babel/core @babel/cli @babel/preset-env

Babel 설정 파일 생성

프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고, @babel/preset-env를 사용하여 변환할 JavaScript의 범위를 설정한다. @babel/preset-env는 현재 실행 환경을 기준으로 필요한 변환만 수행할 수 있어 매우 효율적이다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"  // 구형 브라우저를 지원하기 위한 설정
      }
    ]
  ]
}

Babel 실행

이제 Babel을 실행하여 최신 자바스크립트 파일을 ES5 이하로 변환할 수 있다. 예를 들어, src 폴더에 있는 JavaScript 파일을 dist 폴더로 변환하려면 아래와 같은 명령어를 실행한다.

npx babel src --out-dir dist

Polyfill 적용하기

Babel은 문법을 변환할 수 있지만, 내장 함수나 API는 변환하지 않는다. 이때 필요한 것이 바로 폴리필(polyfill)이다. 최신 자바스크립트 기능을 구형 브라우저에서 사용할 수 있도록 폴리필을 추가하는 방법은 크게 두 가지가 있다.

core-js와 regenerator-runtime 설치

가장 널리 사용되는 폴리필 라이브러리는 core-js와 regenerator-runtime이다. core-js는 ES6 이상에서 추가된 기능들을 폴리필해주고 regenerator-runtime은 async/await와 같은 비동기 기능을 폴리필해준다.

npm install --save core-js regenerator-runtime

Polyfill을 Babel 설정에 포함시키기

@babel/preset-env에서는 자동으로 필요한 폴리필을 추가해주는 기능이 있다. 이때 useBuiltIns와 corejs 옵션을 설정하여 어떤 방식으로 폴리필을 적용할지를 결정할 수 있다. useBuiltIns 옵션을 entry로 설정하면, 프로젝트 진입점에서 사용되는 기능에 맞춰 폴리필을 자동으로 포함시켜준다.

.babelrc 파일을 아래와 같이 수정한다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",  // 구형 브라우저를 지원하기 위한 설정
        "useBuiltIns": "entry",         // 진입점에서 폴리필 자동 삽입
        "corejs": 3                     // core-js 3 버전 사용
      }
    ]
  ]
}

그리고 진입점 파일(예: index.js)에서 core-js와 regenerator-runtime을 임포트한다.

import "core-js/stable";       // 최신 자바스크립트 기능에 대한 폴리필
import "regenerator-runtime/runtime";  // async/await 폴리필
 
// 이제 ES6+ 코드가 구형 브라우저에서도 정상 동작함

Polyfill을 선택적으로 적용하기

전체 프로젝트에서 모든 폴리필을 적용할 필요가 없고, 특정 기능만 필요한 경우 useBuiltIns: 'usage'를 설정하여 필요한 폴리필만 자동으로 적용할 수 있다. 이 경우는 프로젝트에서 사용한 기능에 따라 필요한 폴리필만 포함되므로 코드가 더 경량화된다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",  // 구형 브라우저를 지원하기 위한 설정
        "useBuiltIns": "usage",         // 사용된 기능에 맞는 폴리필만 삽입
        "corejs": 3                     // core-js 3 버전 사용
      }
    ]
  ]
}

최적화와 효율성 고려하기

폴리필과 Babel 설정을 프로젝트에 통합하면, 최신 자바스크립트 기능을 구형 브라우저에서도 사용할 수 있지만 아래와 같은 최적화를 고려해야 한다.

트리 쉐이킹(Tree Shaking)
불필요한 코드가 포함되지 않도록, Babel의 변환과 폴리필 적용이 끝난 후 불필요한 부분을 제거하는 트리 쉐이킹을 적용할 수 있다. 이를 위해 Webpack이나 Rollup과 같은 번들러에서 설정을 추가해야 한다.

선택적 폴리필
모든 폴리필을 적용하지 않고, 필요한 것만 적용하는 방식(useBuiltIns: 'usage')을 사용하는 것이 성능 측면에서 더 유리하다.

브라우저 지원 범위 설정
@babel/preset-env의targets옵션을 통해 필요한 브라우저만 지원하도록 설정하면, 불필요한 코드 변환을 방지할 수 있다.

https://fabric0de.tistory.com/86

[ES5] ECMAScript5 주요 특징 및 현재 사용 시 주의점

miniBcake — Mon, 7 Apr 2025 13:41:28 +0900

ECMAScript5 주요특징

엄격 모드 Strict Mode

ES5에서 추가된 기능 중 엄격모드가 있으며, 지시어로 활성화 할 수 있는 이 모드는 JavaScript 문법의 제약을 강화하고 불완전한 작업을 방지한다.

"use strict";
// 코드는 이제 엄격 모드로 실행됩니다

선언되지 않은 변수를 사용하거나, 읽기 전용 속성에 할당하거나, 매개변수 이름이 중복될 경우, 삭제할 수 없는 속성을 삭제할 경우 오류가 발생하며, with문 사용과 eval, argument를 함수명으로 사용하는 것이 금지된다. this의 기본값이 전역 객체 대신 undefined로 설정된다.

최신의 자바스크립트에서는 이 Strict 모드가 기본처럼 사용되고 있다. 특히 이후 버전인 ES6부터 도입된 클래스와 모듈은 기본이 Strict Mode, 엄격 모드 상태이다. 바벨과 타입스크립트도 Strict 모드를 기본으로 사용하고 있다.

JSON 지원

ES5는 JSON 데이터 형식을 네이티브로 지원한다.

// 객체를 JSON 문자열로 변환
var jsonString = JSON.stringify({name: "John", age: 30});

// JSON 문자열을 객체로 파싱
var obj = JSON.parse('{"name":"John","age":30}');

배열 메서드 확장

사용 가능

ES5 도입 배열 메서드	설명
forEach()	각 요소에 대해 콜백 실행
map()	요소 변환 후 새 배열 반환
filter()	조건 만족하는 요소만 새 배열 반환
reduce()	누적 계산
reduceRight()	오른쪽부터 누적 계산
every()	모든 요소가 조건 만족?
some()	일부 요소가 조건 만족?
indexOf()	특정 요소의 인덱스 찾기
lastIndexOf()	끝에서부터 요소 인덱스 찾기
isArray() (Array.)*	배열 여부 확인

사용 불가

ES6 이후 도입 배열 메서드	도입시기	설명	예시
find()	ES6	조건 만족 첫 요소 반환
findIndex()	ES6	조건 만족 첫 인덱스 반환
from() (Array.)*	ES6	유사 배열 → 배열	Array.from()
of() (Array.)*	ES6	인자들을 배열로	Array.of()
includes()	ES2016	값 포함 여부 확인	indexOf()보다 직관적
flat()	ES2019	배열 평탄화	다차원 배열 처리
flatMap()	ES2019	map 후 평탄화	고급 변환
at()	ES2022	음수 인덱스 지원	arr.at(-1)
toReversed()	ES2023	불변 .reverse()	원본 유지
toSorted()	ES2023	불변 .sort()	원본 유지
toSpliced()	ES2023	불변 .splice()	원본 유지
with()	ES2023	특정 인덱스 값 대체	arr.with(1, 'x')

예시

var arr = [1, 2, 3, 4, 5];

// forEach: 배열의 각 요소에 대해 함수 실행
arr.forEach(function(element, index) {
  console.log(element, index);
});

// map: 각 요소를 변환하여 새 배열 생성
var doubled = arr.map(function(element) {
  return element * 2;
}); // [2, 4, 6, 8, 10]

// filter: 조건에 맞는 요소만 포함하는 새 배열 생성
var evens = arr.filter(function(element) {
  return element % 2 === 0;
}); // [2, 4]

// reduce: 배열을 단일 값으로 축소
var sum = arr.reduce(function(accumulator, current) {
  return accumulator + current;
}, 0); // 15

// some: 하나 이상의 요소가 조건을 만족하는지 확인
var hasEven = arr.some(function(element) {
  return element % 2 === 0;
}); // true

// every: 모든 요소가 조건을 만족하는지 확인
var allEven = arr.every(function(element) {
  return element % 2 === 0;
}); // false

// indexOf 및 lastIndexOf: 요소의 인덱스 찾기
var index = arr.indexOf(3); // 2

객체 메서드 확장

사용 가능

ES5 도입 메서드	설명
Object.create(proto, [propertiesObject])	지정한 프로토타입 객체 및 속성으로 새 객체 생성
Object.defineProperty(obj, prop, descriptor)	객체에 새 속성 추가 또는 기존 속성 변경 (세부 설정 포함)
Object.defineProperties(obj, props)	여러 속성 한 번에 정의
Object.getOwnPropertyDescriptor(obj, prop)	주어진 객체의 특정 속성 설명자 반환
Object.keys(obj)	객체의 열거 가능한 자체 속성 이름을 배열로 반환
Object.getOwnPropertyNames(obj)	객체의 모든 자체 속성 이름(열거 가능 여부 무관)을 배열로 반환
Object.preventExtensions(obj)	객체 확장 금지
Object.isExtensible(obj)	객체가 확장 가능한지 여부 반환
Object.seal(obj)	객체 봉인: 확장 금지 + 속성 삭제 금지
Object.isSealed(obj)	객체가 봉인되었는지 여부 반환
Object.freeze(obj)	객체 동결: 확장 금지 + 속성 삭제 금지 + 속성 변경 금지
Object.isFrozen(obj)	객체가 동결되었는지 여부 반환

사용 불가

ES6 이후 도입 메서드	도입시기	설명
Object.assign(target, ...sources)	ES6	하나 이상의 출처 객체에서 대상 객체로 속성을 복사
Object.is(value1, value2)	ES6	두 값이 같은지 비교 (===과 유사하지만 NaN, +0/-0 처리 다름)
Object.entries(obj)	ES8	객체를 [key, value] 쌍의 배열로 반환
Object.values(obj)	ES8	객체의 값들을 배열로 반환
Object.getOwnPropertyDescriptors(obj)	ES8	모든 자체 속성의 설명자 객체를 반환
Object.fromEntries(iterable)	ES10	[key, value] 쌍의 iterable로부터 객체 생성
Object.hasOwn(obj, prop)	ES2022	객체가 주어진 속성을 자체적으로 가지고 있는지 확인 (기존 hasOwnProperty보다 안전)

예시

// Object.create: 지정된 프로토타입 및 속성으로 새 객체 생성
var person = {
  isHuman: true,
  printInfo: function() {
    console.log("Name: " + this.name + ", Human: " + this.isHuman);
  }
};

var john = Object.create(person);
john.name = "John";

// Object.defineProperty: 객체에 새 속성 추가 또는 기존 속성 수정
Object.defineProperty(john, 'age', {
  value: 30,
  writable: true,
  enumerable: true,
  configurable: true
});

// Object.defineProperties: 여러 속성 한 번에 정의
Object.defineProperties(john, {
  job: {
    value: 'Developer',
    writable: true
  },
  salary: {
    value: 50000,
    writable: false
  }
});

// Object.getOwnPropertyNames: 열거 가능 여부와 관계없이 모든 속성 이름 반환
var propNames = Object.getOwnPropertyNames(john); // ["name", "age", "job", "salary"]

// Object.keys: 열거 가능한 속성의 이름만 반환
var keys = Object.keys(john); // ["name", "age", "job"]

// Object.getPrototypeOf: 객체의 프로토타입 반환
var proto = Object.getPrototypeOf(john); // person 객체

// Object.preventExtensions: 객체에 새 속성 추가 방지
Object.preventExtensions(john);

// Object.isExtensible: 객체가 확장 가능한지 확인
var canExtend = Object.isExtensible(john); // false

// Object.seal: 속성 추가/삭제 방지 (값 수정은 가능)
Object.seal(john);

// Object.isSealed: 객체가 봉인되었는지 확인
var isSealed = Object.isSealed(john); // true

// Object.freeze: 속성 추가/삭제/수정 방지 (완전 불변)
Object.freeze(john);

// Object.isFrozen: 객체가 동결되었는지 확인
var isFrozen = Object.isFrozen(john); // true

Function.prototype.bind()

bind() 메서드는 함수의 this 값을 명시적으로 설정하고 미리 인수를 부분적으로 적용할 수 있다.

var user = {
  name: "John",
  sayHi: function() {
    console.log("Hi, " + this.name);
  }
};

var sayHiFunc = user.sayHi;
sayHiFunc(); // "Hi, undefined" (this가 전역 객체 참조)

var boundFunc = user.sayHi.bind(user);
boundFunc(); // "Hi, John" (this가 user 객체 참조)

// 인수를 부분적으로 적용
function multiply(a, b) {
  return a * b;
}

var double = multiply.bind(null, 2);
double(5); // 10

Getter와 Setter

var person = {
  firstName: "John",
  lastName: "Doe",
  
  // getter
  get fullName() {
    return this.firstName + " " + this.lastName;
  },
  
  // setter
  set fullName(name) {
    var parts = name.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(person.fullName); // "John Doe"
person.fullName = "Jane Smith";
console.log(person.firstName); // "Jane"
console.log(person.lastName); // "Smith"

// Object.defineProperty로도 getter/setter 정의 가능
var counter = {count: 0};
Object.defineProperty(counter, 'increment', {
  get: function() {
    this.count++;
    return this.count;
  }
});

console.log(counter.increment); // 1
console.log(counter.increment); // 2

문자열 메서드

trim이 추가되었다.

사용 불가

ES6이후 도입 메서드	도입시기	설명
String.prototype.startsWith(search, [pos])	ES6	주어진 문자열이 특정 문자열로 시작하는지 확인
String.prototype.endsWith(search, [length])	ES6	주어진 문자열이 특정 문자열로 끝나는지 확인
String.prototype.includes(search, [start])	ES6	문자열이 특정 문자열을 포함하는지 확인
String.prototype.repeat(count)	ES6	문자열을 주어진 횟수만큼 반복한 새 문자열 반환
String.prototype.codePointAt(pos)	ES6	주어진 위치의 UTF-16 코드 포인트 반환 (이모지 등 2바이트 문자에 유용)
String.fromCodePoint(...codePoints)	ES6	하나 이상의 유니코드 코드 포인트로부터 문자열 생성
String.prototype.padStart(targetLength, padString)	ES8	주어진 길이에 도달할 때까지 문자열 시작 부분에 다른 문자열 추가
String.prototype.padEnd(targetLength, padString)	ES8	주어진 길이에 도달할 때까지 문자열 끝 부분에 다른 문자열 추가
String.prototype.matchAll(regexp)	ES11	정규 표현식과 일치하는 모든 결과의 이터레이터 반환 (반복 가능한 매칭 결과 제공)
String.prototype.replaceAll(search, replacement)	ES12	문자열 내 모든 일치 항목을 교체 (기존 replace는 첫 번째만 교체됨)

예시

// trim: 문자열 앞뒤의 공백 제거
var str = "  Hello World  ";
var trimmed = str.trim(); // "Hello World"

// 부분 문자열 추출 메서드
var text = "JavaScript";
text.charAt(0); // "J"
text.charCodeAt(0); // 74 (J의 Unicode 값)
text.substring(0, 4); // "Java"
text.substr(4, 6); // "Script"
text.slice(0, 4); // "Java"
text.slice(-6); // "Script"

그 외에도 Date 객체 개선사항 등이 있다.

사용 시 주의점

var와 let, const 차이에 대해 주의해야한다. var의 경우 함수 스코프를 가지며 같은 이름으로 재선언 및 호이스팅이 가능하다. 블록 스코프 변수 선언이 필요한 경우 즉시 실행 함수로 대체해야하며 호이스팅으로 인해 예상치 못한 동작에 주의해야한다.

함수 정의 시에는 함수 표현식과 함수 선언식만 가능하며 화살표함수를 사용할 수 없다. 기본 매개변수 값 문법이 없고 나머지 매개변수 문법도 없다.

// 함수 선언식
function add(a, b) {
  return a + b;
}

// 함수 표현식
var subtract = function(a, b) {
  return a - b;
};

// 즉시 실행 함수 표현식(IIFE)
(function() {
  var private = "비공개 변수";
  console.log(private);
})();

Promise가 네이티브로 지원되지 않는다. 콜백지옥이 발생할 수 있고, async, await 구문을 사용할 수 없다. Promise 폴리필 또는 라이브러리를 필요로 한다.

// 콜백 패턴
function getData(callback) {
  setTimeout(function() {
    callback("데이터");
  }, 1000);
}

getData(function(data) {
  console.log(data); // "데이터"
});

// Promise는 라이브러리(예: Bluebird, Q)를 통해 구현해야 함

네이티브 모듈 시스템이 없다. import, export 문법을 사용할 수 없으며 모듈 로더 또는 번들러를 필요로 한ㄷ. 전역 네임스페이스 오염에 주의하여야 한다.

// ES5에서는 전역 네임스페이스를 사용한 패턴
var MyModule = (function() {
  var privateVar = "비공개";
  
  function privateFunc() {
    console.log(privateVar);
  }
  
  return {
    publicVar: "공개",
    publicFunc: function() {
      privateFunc();
    }
  };
})();

// 또는 CommonJS(Node.js 스타일)
var module = require('./module');
module.doSomething();

// 또는 AMD(RequireJS 스타일)
define(['dependency'], function(dependency) {
  return {
    doSomething: function() {}
  };
});

객체 및 배열을 조작할 때 구조 분해 할당 및 스프레드 연산자가 없다. 스프레드 연산자 대신 concat(), apply() 사용이 필요하다. assign()의 경우 후기 버전에서만 사용 가능하다.

// 객체에서 값 추출
var person = { name: "John", age: 30 };
var name = person.name;
var age = person.age;

// 객체 복사/병합
var original = { a: 1, b: 2 };
var copy = {};

Object.keys(original).forEach(function(key) {
  copy[key] = original[key];
});

// ES5 후기에 추가된 Object.assign 사용
var merged = Object.assign({}, original, { c: 3 });

// 배열 복사
var arr = [1, 2, 3];
var arrCopy = arr.slice();

// 배열 병합
var arr1 = [1, 2];
var arr2 = [3, 4];
var merged = arr1.concat(arr2);

클래스 상속 시에는 프로토타입 기반 상속을 해야한다. ES6 클래스 문법은 당연히 사용 불가하며 super 키워드가 없다.

// 생성자 함수
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 프로토타입에 메서드 추가
Person.prototype.sayHello = function() {
  return "Hi, I'm " + this.name;
};

// 상속
function Employee(name, age, job) {
  // 상위 생성자 호출
  Person.call(this, name, age);
  this.job = job;
}

// 프로토타입 체인 설정
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

// 하위 클래스에 메서드 추가
Employee.prototype.getJob = function() {
  return this.job;
};

var john = new Employee("John", 30, "Developer");
john.sayHello(); // "Hi, I'm John"
john.getJob(); // "Developer"

문자열 연결 시 + 연산자를 사용해야한다. 템플릿 리터럴``(백틱)은 사용불가하다.

var name = "John";
var age = 30;

// 문자열 연결
var message = "My name is " + name + " and I am " + age + " years old.";

// 여러 줄 문자열
var multiline = "This is a\n" +
                "multiline\n" +
                "string.";

[ES5] JavaScript ECMAScript5

miniBcake — Sat, 5 Apr 2025 21:57:35 +0900

ECMAScript

자바스크립트는 1995년 Brendan Eich라는 사람이 발명했다. 그리고 1997년에 ECMA 표준이 되었다. ECMA Script는 Ecma 인터내셔널 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어졌으며, 액션스크립트, J스크립트 등 다른 스크립트 언어도 포함한다.

ES5

ECMAScript5를 줄여서 ES5라고 하며 새로운 표준이 발표될 때마다 숫자가 늘어난다. ES5는 2009년에 발표된 버전이며 대부분의 브라우저에서 지원한다. 아직 var를 사용하는 버전이다.

ES6부터는 let, const를 지원하며 그 외에도 다른 기능들이 많이 추가되었다. 유독 ES5와 ES6를 구분짓는데, 그 이유는 var let const처럼 버전 차이에 따른 기능 추가가 뚜렷했기 때문이다. (그 외에도 Arrow function, Default parameter, Template literal, Multi-line string, 클래스, 모듈, 프로미스 등 다양한 기능이 추가됐다.)

공부 이유

넥사크로를 사용해야하는데, 투비소프트에서는 그냥 JS 사용하면된다고 쉽게 말하는데 내가 배운 JS와 너무 달라서 계속 찾아보니 기반 버전이 완벽하게 ES5는 아닌 것 같지만 대체로 ES5에 가까운 것 같았기 때문이다. 예제 코드, 교육에서도 var만 사용하는 부분도, await나 async 개념이 없고 콜백 함수로 전부 처리하는 부분도, replaceAll()을 지원하지 않는 부분도 전부 구버전 JS로 느껴졌기 때문이다.

물론 최신 버전도 계속 공부할 예정이지만 당장 써야하는 JS가 구버전이라면 기왕 하는 거 구버전 알아서 하면 도움이 될 거라고 생각한다. 마침 집에 부모님이 예전에 공부하던 JS책이 있었는데, ES5였다.. 어릴 때 첨 접했던 개발인 플래시가 죽은 뒤로 개발책도 물려받을 수 있을 거라곤 생각하지 못했는데 넥사크로가 많은 길을 열어주는 것 같다^^

[Nexacro] 넥사크로 N v24

miniBcake — Sat, 5 Apr 2025 21:40:54 +0900

넥사크로 N v24

넥사크로 N의 24버전은 2023년 11월 투비소프트에서 출시된 UIUX 통합개발 플랫폼이다.

로우코드를 지원하고 있으며 기업용 솔루션을 제공하는데 초점이 맞춰져 있다. 고성능의 UI 및 애플리케이션 개발을 지원하는 다양한 기능을 제공하고 있다.

기능

크로스 플랫폼 지원:

넥사크로 N v24는 웹, 모바일(Android, iOS), 데스크탑(Windows, macOS)을 아우르는 다양한 플랫폼을 지원하며, 한번의 개발로 여러 플랫폼에서 실행 가능한 애플리케이션을 만들 수 있다.

강력한 UI 컴포넌트:

다양한 UI 컴포넌트와 스타일을 제공하여, 고급 UI/UX를 개발할 수 있게 한다. 그리드, 차트, 리스트, 다이얼로그 등 기업용 애플리케이션에서 자주 사용하는 UI 요소들을 쉽게 구현할 수 있다.

넥사크로 엔진:

넥사크로는 자체적인 넥사크로 엔진을 기반으로 작동한다. 이 엔진은 크로미움(Chromium) 엔진을 활용하여 웹 애플리케이션을 실행하며, 자바스크립트 엔진인 V8을 사용한다.

자바스크립트 코드 실행, HTML5, CSS3 지원을 통해 다양한 웹 기술을 활용할 수 있다.

자바스크립트 기반의 로직 처리:

넥사크로 N v24는 자바스크립트를 기반으로 로직을 처리하며, 강력한 비동기 처리와 데이터 바인딩 기능을 지원한다.

고성능 비즈니스 로직 처리:

대규모 기업용 애플리케이션에서 발생하는 복잡한 비즈니스 로직을 효율적으로 처리할 수 있는 구조를 제공하며, 고속의 데이터 처리 성능을 자랑한다.

RESTful API 통합:

REST API 기반으로 서버와의 통합을 쉽게 할 수 있으며, 클라이언트와 서버 간 데이터 통신을 효율적으로 처리한다.

다양한 템플릿 제공:

다양한 템플릿을 제공하여 개발자가 애플리케이션을 빠르게 시작할 수 있게 해주며, 다양한 비즈니스 요구에 맞춘 커스터마이징이 가능하다.

디버깅 및 테스트 도구:

개발 중에 디버깅을 지원하는 도구와 테스트를 위한 기능들을 제공하여, 안정성 있는 애플리케이션을 쉽게 개발할 수 있다.

보안 기능:

기업용 애플리케이션의 특성상 보안이 매우 중요하므로, 넥사크로 N v24는 암호화, 인증, 권한 관리 등 다양한 보안 기능을 제공하여 안전한 애플리케이션 개발을 지원한다.

장단점

넥사크로 N v24는 기업용 크로스 플랫폼 애플리케이션 개발에 강점을 가지며, 특히 모바일, 웹, 데스크탑에서 동시에 작동할 수 있는 애플리케이션을 제공해야 하는 기업들에서 높은 사용 추세를 보이고 있다. 하지만 최신 자바스크립트 기능 지원이 약하고, 커스터마이징에 한계가 있다. 뿐만아니라 크로미움 엔진에 의존하므로 일부 기능이 제한될 수 있다. 비용 문제도 있다.

자세한 단점은 하단 글을 참조 바란다.

https://grast.tistory.com/3#google_vignette

어째서 도대체 왜 넥사크로를 배워야 하는가

제목 그대로다. 어째서 도대체 왜 넥사크로를 배워야 하는가를 분석하는 글이다. 필자 왈왈, 현존하는 프로그래밍 툴 중 정말 최악의 쓰레기인데도 왜 써야 하는가를 논하는 글이다. 이 글은 투

grast.tistory.com

국내 SI에서만 사용되는 툴이며, 개발자 커뮤니티에 들어가보면 넥사크로를 걷어내는 프로젝트에 참여했다는 말이 제법 많다. 물론 넥사크로 교육을 투비소프트에서 직접 지원해주고, 다양한 부분에서 지원을 해주려는 노력은 많이 보이는데... 난 솔직히 왜 이걸 써야하는지 잘 모르겠다...

화면을 빠르게 찍어내는데는 도움이 될지 모르겠지만 비용도 계속해서 발생하는데다가 라이센스도 번거로운 측면이 있고(라이센스 기간 기준은 도무지 납득되지 않음), 데이터 바인딩은 좀 쉬울지 몰...라도? 그로인해 새롭게 도입된 통신이.. 그다지 편해보이지도 좋아보이지도 않는다.... JSP로 화면 구성 배울 때는 DB고 뭐고 알바 아닌 느낌으로 할 수 있었는데 (Controller에서 넘어오는 데이터가 중요하니) 넥사는 DB까지 알고 있어야하는 느낌이다. 데이터셋이라는걸로 DB테이블 같은 걸 구성해둔다. 넥사 쓰면 MVC 분리 가능할지.. 어케 해야할지 좀 어렵게 느껴졌다..

그리고 사용하는 JS가 굉장히 구버전으로, 모든 예제가 var로 되어있고, JS 최신버전에 replaceAll()이 있는데도 불구하고 JS에는 없어서 넥사크로 자체 메서드로 구현했다는 말을 자랑처럼한다...;; 배우면서 왜 이걸 이렇게 해야하는지 의문이 든 순간이 엄청 많았다... 기본 HTML CSS JS 보다 번거로워지고 귀찮아지기만한 느낌..

일단 일을 해야하니 공부과 탐구는 더 해야겠지만...

넥사 스튜디오 자체도 진짜 와 너무너무 구려서 제발 회사에서 넥사 안 쓰겠다고하고 조만간 접었으면 좋겠다... 이제 프론트 소홀히 하지 않구 공부 열심히 할게요...ㅠ

[DBMS/PLSQL] 블록 BLOCK

miniBcake — Tue, 4 Mar 2025 14:38:20 +0900

블록

PL/SQL 소스 프로그램의 기본 단위로 선언부, 실행부, 예외처리부로 구성된다. 블록은 이름이 있는 블록과 익명 블록으로 구분되며, 함수, 프로시저, 패키지 등이 익명 블록에 속한다.

블록 구조

이름부 (없을 시 익명함수)
IS (AS)
선언부 (DECLARE Optional)
BEGIN
실행부 (BEGIN END mandatory)
EXCEPTION
예외 처리부 (Optional)
END;

PL/SQL 블록 내에서는 한 문장이 종료될 때마다 세미콜론을 통해 구분하며, END 뒤에 세미콜론을 통해 블록이 끝났다는 것을 명시한다.

Declarative Section (선언부)

변수, 상수, CURSOR, USER_DEFINE Exception 등을 선언한다.

Executable Section (실행부)

SQL, 반복분, 조건문을 작성한다.. 실행부는 BEGIN으로 시작하고 END로 종료되며, 실행문은 프로그램 내용이 들어가는 부분으로서 필수적으로 사용되어야 한다.

Exception Handling Section (예외처리)

예외에 대한 처리를 진행한다.. 일반적으로 오류를 정의하고 처리하는 부분으로 선택 사항이다.

블록 예시

DECLARE
	vi_num NUMBER; --선언
BEGIN
	vi_num := 100; --100 할당
	DBMS_OUTPUT.PUT_LINE(vi_num); --vi_num 변수 출력
END;

DBMS_OUTPUT 패키지를 사용하기 위해서는 SET SERVEROUTPUT ON 명령어가 필요하다.

http://www.gurubee.net/lecture/1342

[기초] CMDB와 KEDB (KMDB)

miniBcake — Fri, 28 Feb 2025 13:07:32 +0900

구성 관리 데이터베이스 CMDB

IT조직에서 IT 자산에 대한 정보를 저장하는 데이터베이스이다. 사용하는 하드웨어, 소프트웨어, 네트워크 간 관계를 명확히하는 파일이다.

하드웨어, 소프트웨어, 시스템, 시설, 직원과 같은 항목 구성에 대한 정보를 저장한다. 구성 데이터에는 항목 간의 상호 종속성, 각 항목의 변경 기록, 클래스 및 특성이 포함될 수도 있다. 이러한 추적 항목을 CI(구성 항목)이라고 하며 CI는 IT 서비스를 제공하기 위해 관리해야하는 모든 컴포넌트를 의미한다. 라우터, 서버, 애플리케이션, 가상 머신 등이 있다.

CMDB의 목표는 더 나은 비즈니스 의사 결정을 내리고 효율적인 ITSM(조직이 IT 서비스를 계획, 설계, 구축, 운영, 유지 관리하는데 필요한 프로세스) 프로세스를 실행하는데 필요한 정보를 제공하는 것에 있다. 모든 구성 정보를 중앙 집중식으로 유지하면 CI의 관계를 더 잘 파악할 수 있다.

https://www.atlassian.com/ko/itsm/it-asset-management/asset-tracking

구성 관리 데이터베이스(CMDB)란? | Atlassian

CMDB는 수명 주기 전반에 걸쳐 구성 기록을 저장합니다. CMDB의 특징 및 이점과 이것이 자산 관리와 연결되는 방식을 알아보세요.

www.atlassian.com

알려진 오류 데이터베이스 KEDB

Known Error DataBase로, 알려진 오류의 데이터베이스이다. 알려진 오류란 원인과 해결방안이 알려진 오류를 의미한다. 다시 말하면 KEDB는 오류의 원인과 해결 방안에 대한 DB라고 할 수 있다. KEDB가 있다면 관리자가 오류의 원인을 분석하고, 해결 방안을 찾을 필요없이 바로 조치할 수 있기 때문에 인프라 장애 시간을 줄이는 효과를 얻을 수 있다.

장애를 인지하고 문제를 정의하고, 문제의 원인 규명 및 임시 해결방안을 도출하면 KEDB에 넣을 데이터 한 개를 확보하게 된다. 이러한 모든 단계를 Knowledge Management DataBase KMDB개념으로 관리하기도 한다.

IT 업계에서 장애, 에러에 관한 정보는 중요한 지식 자산이다.

https://m.blog.naver.com/watch_all/221840673527

Known Error DataBase(KEDB) 개념과 활용법

IT 인프라 관리자라면, 장애 관리를 위한 Known Error DataBase(KEDB)를 관리를 빼놓을 수 없습...

blog.naver.com

[DBMS] SQL과 PL/SQL 차이

miniBcake — Thu, 27 Feb 2025 09:25:37 +0900

SQL

관계형 DB에 저장된 데이터에 접근하기 위해 사용하는 표준 언어이다.

(SELECT, UPDATE, INSERT와 같은 데이터 조작 쿼리)

PL/SQL

Oracle’s Procedural Language extension to SQL의 약자로, SQL문을 사용하여 프로그램을 작성할 수 있도록 확장해놓은 오라클의 절차적 언어이다. PL/SQL문은 블록 구조로 되어 있고, PL/SQL 자신이 컴파일 엔진이 가지고 있다.

(DECLARE, EXCEPTION, LOOP 등 절차적 프로그래밍)

**SQL*PLUS**

SQL, PL/SQL을 실행할 수 있는 환경을 제공하는 오라클의 툴이다.

SQL*PLUS의 명령어는 SQL 명령어와 다르다.

정리

SQL은 데이터를 조작하는데 주로 사용되는 쿼리언어이고 PL/SQL은 응용 프로그램을 설계하는 절차언어이며, SQL에서는 할수없는 조건,반복문, 등 DB중심의 응용프로그램을 설계하기위한 오라클의 원시 프로그래밍 언어이다. PL/SQL은 명령문 블록을 서버로 전달하기에 속도가 빠르고, SQL은 한번에 하나의 명령만 가능하기에 느리다.

[기타] 웹사이트 참고용 사이트

miniBcake — Wed, 26 Feb 2025 19:26:28 +0900

https://webjangi.com/artwork

웹쟁이 | 모든 웹 작품과 리소스가 한 곳에

webjangi.com

https://wwit.design/

What Was IT

한국의 UI/UX 모바일 패턴을 수집합니다.

wwit.design

https://uibowl.io/

유아이볼 | 매일 하루에 한개씩 업데이트 되는 패턴과 친해져요!

국내 UI/UX 패턴을 담은 공간, 유아이볼

uibowl.io

https://cssdesignawards.com/

CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards

AWARDED 2025 FEB 25 Distinctive website solutions for leading and rising companies. Salva Carlino Head of Design UI 9 UX 9 INN 9 9 Gabriel Contassot Design Director UI 9 UX 9 INN 9 9 Ana Jesus Founder and Creative Head UI 8.5 UX 8.5 INN 8.5 8.5 Mayra Metax

cssdesignawards.com

https://www.gdweb.co.kr/main/

http://www.gdweb.co.kr

www.gdweb.co.kr

https://www.awwwards.com/

Awwwards - Website Awards - Best Web Design Trends

Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.