호짱의 개발 블로그

[SSL] 우분투에서 certbot 설치 및 nginx 연동

HoZang — Thu, 9 Jan 2025 14:00:21 +0900

[SSL] 우분투에서 certbot 설치 및 nginx 연동

sudo apt install certbot python3-certbot-nginx

[PostgreSQL] 데이터베이스 연결 수 확인 쿼리

HoZang — Fri, 25 Oct 2024 15:44:45 +0900

[PostgreSQL] 데이터베이스 연결 수 확인 쿼리

select  * from
(select count(*) used from pg_stat_activity) q1,
(select setting::int res_for_super from pg_settings where name=$$superuser_reserved_connections$$) q2,
(select setting::int max_conn from pg_settings where name=$$max_connections$$) q3;

[Windows] 원격데스크톱(MSTSC) Ctrl + Alt +Del 단축키 실행

HoZang — Tue, 8 Oct 2024 09:14:22 +0900

[Windows] 원격데스크톱(MSTSC) Ctrl + Alt +Del 단축키 실행

Ctrl + Alt + End

결론부터 말하면 누르면 된다.

원격데스크톱(MSTSC)을 사용중에 Ctrl + Alt + Del 단축키를 입력하려고 하면

내 로컬 컴퓨터에서 단축키가 실행된다.

이럴 땐 Ctrl + Alt + End를 누르면 원격 컴퓨터에서 Ctrl + Alt + Del 단축키와 똑같이 실행된다.

[Next.js] Next.js with nestjs

HoZang — Tue, 1 Oct 2024 19:32:27 +0900

[Next.js] Next.js with nestjs

우선 Next.js로 프로젝트 생성

npx create-next-app@latest

nestjs 수동 설치

# 개발도구 nestjs/cli 설치
npm i -g @nestjs/cli

# 필수 패키지 수동 설치
npm i @nestjs/core @nestjs/common @nestjs/config @nestjs/platform-express rxjs reflect-metadata
npm i -D @types/express cross-env

nestjs 기본 코드 생성

src/server/app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './controllers/app.controller.js';
import { AppService } from './services/app.service.js';

@Module({
    imports: [],
    controllers: [AppController],
    providers: [AppService],
})
export class AppModule {}

src/server/controllers/api.controller.ts

import { Controller, Get } from '@nestjs/common';
import { AppService } from '../services/app.service.js';

@Controller()
export class ApiController {
    constructor(private readonly appService: AppService) {}

    @Get('/api')
    getApi(): string {
        return this.appService.getHello();
    }
}

src/server/services/app.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
    getHello(): string {
        return 'Hello World!';
    }
}

src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './server/app.module.js';
import { NextServer } from 'next/dist/server/next';
import express, {NextFunction, Request, Response} from 'express';
import next from 'next';
import {ExpressAdapter} from "@nestjs/platform-express";
import http from "http";

async function bootstrap() {

    let appNext: NextServer|null = null;

    const options = 'development' === process.env.NODE_ENV ? { protocol: 'https', dev: true, hostname: "", port: 443 } : { protocol: 'https', hostname: "", port: 443 };

    try {
        appNext = next(options);
    } catch (error) {
        console.error(error);
        throw error;
    }

    try {
        const handle = appNext.getRequestHandler();
        const server = express();

        const app = await NestFactory.create(AppModule, new ExpressAdapter(server));
        app.use((req: Request, res: Response, next: NextFunction) => {
            if (req.url.startsWith('/_next/static')) {
                next();
            } else if (req.url.startsWith('/_next/webpack')) {
                next();
            } else {
                return next();
            }
        });
        app.use((req: Request, res: Response, next: NextFunction) => {
            if (req.path.startsWith("/api")) {
                next();
            } else {
                return handle(req, res);
            }
        });
        await app.init();

        appNext.prepare()
            .then(() => {
                server.set('port', 3000);

                const httpServer = http.createServer(server);
                httpServer.listen(3000);
            })
            .catch((errorAppNext) => {
                console.error(errorAppNext.stack);
                process.exit(1);
            });
    } catch (error) {
        console.error(error);
    }
}

bootstrap();

tsconfig는 next.js파일 기본으로 사용

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

nestjs에 사용할 tsconfig.server.json 별도로 생성

tsconfg.server.json

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES6",
    "lib": ["ES6", "dom", "dom.iterable", "esnext"],
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}

package.json에 추가 사항

nestjs는 기본 셋팅이 commonjs로 되어있는데 nextjs는 esm 셋팅이라서 여기에 맞춰 설정한 해주고

디버깅 모드 실행 시 nestjs 디버깅 명령어로 실행하되

위에서 추가한 tsconfig.server.json 파일을 컴파일러 옵션 파일로 지정해준다.

{
  ...
  "type": "module",
  "scripts": {
    "dev": "nest start --path tsconfig.server.json --watch",
    ...
  },
  ...
}

이제 프로젝트를 디버깅모드로 실행해보자.

npm run dev

http://localhost:3000

http://localhost:3000/api

컨트롤에서 라우팅 한 부분은 nestjs로 그 외에 경로는 next.js에서 라우팅한 페이지로 잘 나온다.

[JWT] ssh-keygen openssl key 생성

HoZang — Tue, 24 Sep 2024 16:29:24 +0900

[JWT] ssh-keygen openssl key 생성

# private key pem 파일 생성
ssh-keygen -t rsa -b 4096 -m pem -f private.pem

# public key pem 파일 생성
openssl rsa -in private.pem -pubout > public.pem

[PostgreSQL] 자동증가 값 초기화

HoZang — Thu, 12 Sep 2024 18:13:10 +0900

[PostgreSQL] 자동증가 값 초기화

SELECT SETVAL('{테이블명}_{컬럼명}_seq', 1, FALSE);

확인하는 방법은 pgAdmin 기준으로

Schememas => public => Sequences 메뉴로 가면 시퀀스 항목을 볼 수 있다.

[PostgreSQL] the environment variable comspec does not seem to point to the cmd.exe

HoZang — Thu, 12 Sep 2024 14:47:50 +0900

[PostgreSQL] the environment variable comspec does not seem to point to the cmd.exe

There has been an error. The environment variable COMSPEC does not seem to point to the cmd.exe or there is a trailing semicolon present. Please fix this variable and restart installation.

PostgreSQL 설치 중 위와 같은 오류가 나왔을 때 해결방법

https://babyadventure.tistory.com/57

Windows 11 PostgreSQL 설치 오류

PostgreSQL을 공부하기 위해 공식 홈페이지에서 설치파일을 다운받았지만 모든 버전의 설치파일이 아래와 같은 메시지를 띄우며 실행되지 못했다. There has been an error. The environment variable COMSPEC does n

babyadventure.tistory.com

[Linux] 사용자 루트 폴더 격리

HoZang — Thu, 12 Sep 2024 12:09:26 +0900

[Linux] 사용자 루트 폴더 격리

https://help.ishosting.com/en/how-to-restrict-ssh-user-access-to-a-specific-directory

How to Restrict SSH User Access to a Specific Directory?

There are many reasons for granting user permissions only to certain directories, especially for web servers. But the main reason is security. You can use chroot (change root) to restrict user access

help.ishosting.com

https://www.tecmint.com/restrict-ssh-user-to-directory-using-chrooted-jail/

Restrict SSH User Access to Home Directory Using Chrooted Jail

In this article, we will explain to you how to restrict SSH user access to a specific directory using chrooted jail in Linux systems.

www.tecmint.com

[Java] boolean 멤버의 Getter 네이밍 문제

HoZang — Tue, 10 Sep 2024 22:06:30 +0900

[Java] boolean 멤버의 Getter 네이밍 문제

문제점

boolean 속성의 멤버 변수의 경우 isSuccess와 같이 isXXXX 의 형태로 멤버 변수를 이름을 짖는다.

이 경우 Lombok으로 getter setter가 생성될 경우 멤버 변수는 success로 변경되고 getter가 isSuccess로 지동 네이밍된다.

이렇게 getter가 자동 생성된 객체를 json과 같은 serialize 방식으로 변환할경우 해당 멤버 변수는 success로 변환된다.

해결방법

해당변수만 getter을 getIsSuccess와 같이 getIsXXXXX 의 형태로 수동 선언해준다.

[GIT] 전체 브랜치 Pull

HoZang — Fri, 30 Aug 2024 09:24:22 +0900

[GIT] 전체 브랜치 Pull

git branch -r \
  | grep -v '\->' \
  | sed "s,\x1B\[[0-9;]*[a-zA-Z],,g" \
  | while read remote; do \
      git branch --track "${remote#origin/}" "$remote"; \
    done
git fetch --all
git pull --all

[Node.js] NVM 수동 설치

HoZang — Thu, 11 Jul 2024 10:55:26 +0900

[Node.js] NVM 수동 설치

윈도우즈에서 nvm을 설치할 때 인스톨러를 사용하지 않고 수동으로 설치할 경우

settings.txt 파일을 직접 생성하고 내용을 입력해줘야한다.

nvm이 설치된 폴더에 settings.txt 파일을 생성 후

root: D:\Program Files\nvm (nvm 폴더 경로)
path: C:\Program Files\nodejs (node 바로 가기가 생성될 경로)

각자 설치된 경로에 맞게 위 내용을 입력 후 nvm을 실행하면 정상 실행된다.

저의 경우 인스톨러 기본 설치 경로에 한글이 포함되어있어서 nvm이 정상적으로 실행되지 않아서

수동 설치방법을 선택했다.

[Java] Base64 encode/decode

HoZang — Thu, 30 May 2024 12:19:12 +0900

[Java] Base64 encode/decode

//...
import java.util.Base64;
//...

public class Application {

	public static void main(String[] args)
	{
    	var text = "테스트";
		var bytes = text.getBytes();
		var base64 = Base64.getEncoder().encodeToString(bytes);
		var decodedBytes = Base64.getDecoder().decode(bytes);
		var decodedText = new String(decodedBytes);
	}

}

[Flutter] Container 넓이 100%

HoZang — Wed, 29 May 2024 10:35:33 +0900

[Flutter] Container 넓이 100%

...

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,

...

[Flutter] Container 넓이, 높이 최대값 설정

HoZang — Wed, 29 May 2024 10:31:41 +0900

[Flutter] Container 넓이 최대값 설정

...
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: const BoxConstraints(maxWidth: 300, maxHeight: 300),

...

[Flutter] Container 가운데 정렬하기

HoZang — Wed, 29 May 2024 10:27:16 +0900

[Flutter] Container 가운데 정렬하기

넓이가 지정된 Container를 디스플레이하면 좌측정렬된 상태로 나온다.

...

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 300,
        height: 300,
        decoration: const BoxDecoration(
          color: Colors.lightBlueAccent,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => {},
              child: const Text("Button")
            )
          ],
        ),
      )
    );
  }

...

이럴 때 Center 위젯으로 감싸주면 Container 위젯이 가운데 정렬되어 디스플레이 된다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          decoration: const BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => {},
                child: const Text("Button")
              )
            ],
          ),
        ),
      )
    );
  }

[Dart] byte array 표현 및 데이터를 포함한 선언

HoZang — Mon, 27 May 2024 18:08:07 +0900

[Dart] byte array 표현 및 데이터를 포함한 선언

import 'dart:typed_data';

...

Uint8List example = Uint8List.fromList([0, 1, 2, ..., x]);

[Flutter] getApplicationCacheDirectory 폴더 위치

HoZang — Mon, 27 May 2024 17:33:33 +0900

[Flutter] getApplicationCacheDirectory 폴더 위치

안드로이드

- /data/user/0/{패키지명}/cache

윈도우즈

- C:\Users\{유저명}\AppData\Local\{CompanyName}\{ProjectName}

[Flutter] Windows App getApplicationCacheDirectory 경로 변경

HoZang — Mon, 27 May 2024 16:59:15 +0900

[Flutter] Windows App getApplicationCacheDirectory 경로 변경

%프로젝트폴더%\windows\runner\Runner.rc 파일을 열면

80~100 줄 사이에 아래와 같은 내용이 보인다.

CompanyName에 해당 하는 부분을 원하는 이름으로 바꿔주면 된다.

CompanyName은 path_provider패키지의 getApplicationCacheDirectory 함수를 사용할 때 캐시폴더 경로에 영향을 준다.

getApplicationCacheDirectory 함수는 C:\User\UserName\AppData\Local\CompanyName\ProjectName 경로를 반환한다.

...

BEGIN
    BLOCK "StringFileInfo"
    BEGIN
        BLOCK "040904e4"
        BEGIN
            VALUE "CompanyName", "com.example" "\0"
            VALUE "FileDescription", "project_name" "\0"
            VALUE "FileVersion", VERSION_AS_STRING "\0"
            VALUE "InternalName", "project_name" "\0"
            VALUE "LegalCopyright", "Copyright (C) 2024 com.example. All rights reserved." "\0"
            VALUE "OriginalFilename", "project_name.exe" "\0"
            VALUE "ProductName", "project_name" "\0"
            VALUE "ProductVersion", VERSION_AS_STRING "\0"
        END
    END
    BLOCK "VarFileInfo"
    BEGIN
        VALUE "Translation", 0x409, 1252
    END
END

...

[Dart] late와 nallable 그리고 final 차이

HoZang — Sun, 26 May 2024 15:55:40 +0900

[Dart] late와 nallable 그리고 final 차이

선언 방식

아래와 같이 선언할 때 UserC 클래스는 선언과 동시에 member 변수 name의 값을 지정해야 한다.

하지만 UserA와 UserC 클래스는 선언 후에 name 변수를 입력해도 된다.

UserB의 경우에는 name 변수를 계속 수정 가능하지만 UserA의 경우에는 선언 후에 원하는 시기에 값을 입력하고,

그 이후에는 값을 변경할 수 없다.

dart 프로그래밍에서 late 접두사는 클래스의 멤버 변수를 선언할 경우 초기화는 지연시키고 불변성은 유지하고 싶은 때 사용할 수 있다.

class UserA {
  late final String name;
}

class UserB {
  String? name;
}

class UserC {
  UserC({required this.name});
  final String name;
}

main() {
  var userA = UserA();
  var userB = UserB();
  var userC = UserC(name: 'nameC');
}

[Flutter] Yaml 파일 Decode/DeSerialize(Yaml 객체화)

HoZang — Sun, 26 May 2024 13:40:50 +0900

[Flutter] Yaml 파일 Decode/DeSerialize(Yaml 객체화)

아래 코드는 yaml 파일로부터 읽어온 데이터를 GetIt ServiceLocator에 저장 하는 과정까지의 코드이다.

http 통신에 사용할 서버 정보를 yaml파일로 설정하기 위한 예시이다.

import 'package:get_it/get_it.dart';
import 'package:hello_world/services/config_service.dart';
import "package:flutter/services.dart" as services;
import "package:yaml/yaml.dart";

Future<void> serviceConfig() async {
  final String data = await services.rootBundle.loadString('server.yaml');
  final YamlMap mapData = loadYaml(data);
  final Server server = Server.fromYaml(mapData);
  final ConfigService configService = ConfigService(server: server);

  GetIt.I.registerSingleton<ConfigService>(configService);
}

class Server {
  const Server({
    required this.protocol,
    required this.host
  });

  final String protocol;
  final String host;

  factory Server.fromYaml(YamlMap yaml) => Server(
      protocol: yaml['protocol'] ?? '',
      host: yaml['host'] ?? ''
  );
}

class ConfigService {
  ConfigService({required this.server});

  final Server server;
}

[Flutter] Splash Screen(앱 시작 화면) 만들기

HoZang — Sun, 26 May 2024 10:14:38 +0900

[Flutter] Splash Screen(앱 시작 화면) 만들기

우선 flutter_native_splash 패키지를 설치한다.

flutter pub add flutter_native_splash

패키지 설치 후 pubspec.yaml 파일에 설정값을 입력하거나

flutter_native_splash.yaml 파일을 만들어서 설정값을 입력해도 된다.

flutter_native_splash:
	color: "#ffffff"
    image: assets/images/logo.png
    
    # 안드로이드12버전 이상은 따로 설정 해줘야 한다.
    android_12:
    	image: assets/images/android12_log.png
    
    # 그 외에 빌드 환경별로 설정 할 수 있다.
    # image는 가운데 앱 로고, brand_image는 하단 브랜드 로고이다.
    
    #color_android: "#42a5f5"
    #color_dark_android: "#042a49"
    #color_ios: "#42a5f5"
    #color_dark_ios: "#042a49"
    #color_web: "#42a5f5"
    #color_dark_web: "#042a49"
    #image_android: assets/splash-android.png
    #image_dark_android: assets/splash-invert-android.png
    #image_ios: assets/splash-ios.png
    #image_dark_ios: assets/splash-invert-ios.png
    #image_web: assets/splash-web.gif
    #image_dark_web: assets/splash-invert-web.gif
    #background_image_android: "assets/background-android.png"
    #background_image_dark_android: "assets/dark-background-android.png"
    #background_image_ios: "assets/background-ios.png"
    #background_image_dark_ios: "assets/dark-background-ios.png"
    #background_image_web: "assets/background-web.png"
    #background_image_dark_web: "assets/dark-background-web.png"
    #branding_android: images/logo.png
    #branding_dark_android: assets/dart_dark-android.png
    #branding_ios: assets/brand-ios.png
    #branding_dark_ios: assets/dart_dark-ios.png
    #branding_web: assets/images/logo.png
    #branding_dark_web: assets/dart_dark-web.gif

설정이 완료됐다면 콘솔(커맨드라인)에서 설정내용을 적용해줘야한다.

dart run flutter_native_splash:create

// 설정 파일을 별도로 사용했다면 파일 경로를 인자로 입력해줘야 한다.
dart run flutter_native_splash:create --path=flutter_native_splash.yaml

// 설정값을 지우는 명령어
dart run flutter_native_splash:remove

다음은 앱 코드에 Splash Screen 코드를 추가한다.

void main() {
  var widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
  
  // Splash Screen은 자동으로 사라지지 않는다.
  // 앱이 실행된 후 Splash Screen이 사라지길 원하는 시점에 아래 코드를 추가하자.
  // FlutterNativeSplash.remove();
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
    FlutterNativeSplash.remove();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash screen sample',
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
          useMaterial3: true
      ),
      home: HomeScreen(),
    );
  }
}

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter package

Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.

pub.dev

[Flutter] GetIt 패키지를 이용한 Service Locator 전역 상태 관리

HoZang — Sat, 25 May 2024 23:29:42 +0900

[Flutter] GetIt 패키지를 이용한 Service Locator 전역 상태 관리

class UserService extends ChangeNotifier {
  UserService();

  User? get user => _user;

  User? _user;

  set user(User? user) {
    _user = user;
    // 값 변경을 알려주는 notifyListeners 추가.
    notifyListeners();
  }
}

void main() {
  // GetIt을 이용해서 전역상태 관리를 할 객체 Service Locator 등록
  GetIt.I.registerSingleton<UserService>(UserService());
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final _userService = GetIt.I<UserService>();

  @override
  void initState() {
    super.initState();
    // statefull widget의 상태를 초기화 할 때
    // service locator listener에 현재 widget 상태변경 알림 추가
    // ChangeNotifier를 상속한 service locator의 notifyListeners가 동작할 때
    // 현재 widget의 state도 업데이트 된다.
    _userService.addListener(() => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ServiceLocatorState',
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
          useMaterial3: true,
          fontFamily: "NanumBarunGothic"
      ),
      home: HomeScreen(title: 'Z Talk', products: products)
    );
  }
}

[Flutter] JsonSerialize(encode / decode)

HoZang — Fri, 24 May 2024 15:46:10 +0900

[Flutter] JsonSerialize(encode / decode)

클래스 맴버로 toJson, fromJson 메서드를 만들어 준 후

dart:convert 라이브러리의 jsonEncode, jsonDecode 함수로 변환해준다.

https://api.flutter.dev/flutter/dart-convert/jsonEncode.html

jsonEncode function - dart:convert library - Dart API

jsonEncode function String jsonEncode(Object? object, {Object? toEncodable(Object? nonEncodable )?} ) Converts object to a JSON string. If value contains objects that are not directly encodable to a JSON string (a value that is not a number, boolean, strin

api.flutter.dev

json_serializable 패키지를 사용하는 방법도 있는데 다른 언어(C#, Java, javascript)들 처럼 간편하진 않다.

@JsonSerializable 어노테이션을 선언 한 후 json_serializable 패키지 명령어로 utility code( _$클래스명ToJson, _$클래스명FromJson )를 생성해서 위와 같은 방식으로 toJson, fromJson에 생성된 utiltiy code의 함수를 반환해주는 방식이다.

https://docs.flutter.dev/data-and-backend/serialization/json

JSON and serialization

How to use JSON with Flutter.

docs.flutter.dev

[Java] 테스트 코드 실행 없이 빌드

HoZang — Fri, 24 May 2024 12:38:40 +0900

[Java] 테스트 코드 실행 없이 빌드

gradle build -x test

[Flutter] SliverList 고정되는 항목 만들기

HoZang — Thu, 23 May 2024 10:52:30 +0900

[Flutter] SliverList 중 고정되는 항목 만들기

SliverPersistentHeader widget의 pnned 요소를 true로 해서 CustomScrollView widget의 slivers에 추가해준다.

SliverPersistentHeader는 스크롤 될 때 ScrollView 상단에서 고정되는걸 볼 수 있다.

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: CustomScrollView(
              slivers: [
                SliverPersistentHeader(
                    pinned: true,
                    delegate: SliverPinnedHeaderDelegate(
                        minHeight: 50,
                        maxHeight: 50,
                        child: Container(
                          color: Colors.white,
                          child: ListTileTheme(
                            child: ListTile(
                              title: Text('SubTitle_01'),
                            ),
                          ),
                        )
                    )
                ),
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                      childCount: widget.products.length,
                          (context, index) {
                        return ShoppingListItem(product: widget.products[index], inCart: _shoppingCart.contains(widget.products[index]), onCardChanged: _handleCartChanged);
                      }
                  ),
                ),
                SliverPersistentHeader(
                    pinned: true,
                    delegate: SliverPinnedHeaderDelegate(
                        minHeight: 50,
                        maxHeight: 50,
                        child: Container(
                          color: Colors.white,
                          child: ListTileTheme(
                            child: ListTile(
                              title: Text('SubTitle_02'),
                            ),
                          ),
                        )
                    )
                ),
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                      childCount: widget.products.length,
                          (context, index) {
                        return ShoppingListItem(product: widget.products[index], inCart: _shoppingCart.contains(widget.products[index]), onCardChanged: _handleCartChanged);
                      }
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

[Flutter] ListView 오류 Vertical viewport was given unbounded height.

HoZang — Fri, 17 May 2024 10:21:59 +0900

[Flutter] ListView 오류 Vertical viewport was given unbounded height.

The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.

Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column or Wrap instead. Otherwise, consider using a CustomScrollView to concatenate arbitrary slivers into a single scrollable.

The relevant error-causing widget was:
ListView ListView:file:///... ...

ListView 위젯을 하위 위젯으로 사용할 때 이런 오류가 나온다면 SizedBox 위젯으로 감싸준다.

...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 200,
              child: ListView(
                padding: const EdgeInsets.symmetric(vertical: 8),
                children: widget.products.map((product) {
                  return ShoppingListItem(product: product, inCart: _shoppingCart.contains(product), onCardChanged: _handleCartChanged);
                }).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
...

[Flutter] 우측 상단 'DEBUG' 배너 제거하기

HoZang — Thu, 16 May 2024 18:57:10 +0900

[Flutter] 상단 'DEBUG' 배너 제거하기

우측 상단에 디버그 상태 배너가 우측상단 버튼을 가리는게 거슬린다

MaterialApp 위젯 인자중에 debugShowCheckedModeBanner 값을 false로 한다.

MaterialApp(
    title: 'Hello World',
    debugShowCheckedModeBanner: false,
  );
}

[Flutter] IntelliJ Device Manager 버튼 안 보일 때 활성화 방법

HoZang — Thu, 16 May 2024 16:14:33 +0900

[Flutter] IntelliJ Device Manager 버튼 안 보일 때 활성화 방법

Settings > Languages & Frameworks > Android SDK 설정 화면으로 이동

사용할 SDK버전을 다운로드 하여 선택해 주거나, 이미 설치된 SDK 폴더 지정.

IntlliJ 재시작.

활성화 됐다.

[Flutter] 플러터 웹 디버깅 포트 지정

HoZang — Tue, 14 May 2024 18:27:18 +0900

[Flutter] 플러터 웹 디버깅 포트 지정

Additional run args 에 --web-port 옵션으로 원하는 포트를 지정

[Flutter] IntelliJ 프로젝트 생성 시 Unable to find git in your PATH

HoZang — Tue, 14 May 2024 17:58:49 +0900

[Flutter] IntelliJ 프로젝트 생성 시 Unable to find git in your PATH

Unable to find git in your PATH 오류가 나오면서 프로젝트 생성이 실패한다.

git config --global --add safe.directory '*'

위 명령어로 해결했다.

[참조] https://github.com/flutter/flutter/issues/123995

[SQL Server] How to change MSSQL Server data folder on Linux

HoZang — Wed, 8 Mar 2023 15:33:16 +0900

[SQL Server] How to change MSSQL Server data folder on Linux

# stop the mssql server service
systemctl stop mssql-server

# make your own new mssql data folder and log folder
mkdir /data/mssql/data
mkdir /data/mssql/log

# check the mssql binary path
ls /opt/mssql/bin

# change the mssql data folder
sudo /opt/mssql/bin/mssql-conf set filelocation.defaultdatadir /data/mssql/data

# change the mssql log folder
sudo /opt/mssql/bin/mssql-conf set filelocation.defaultlogdir /data/mssql/log

#copy all file in the default data and log folder to your own new data and log folder
sudo cp -r /var/opt/mssql/data/* /data/mssql/data
sudo cp -r /var/opt/mssql/log/* /data/mssql/log

#change ownership of data and log files
sudo chown -R mssql:mssql /data/mssql

#restart the mssql server service
systemctl start mssql-server

[SQL Server] How to use MSSQL Server custom port on Linux

HoZang — Wed, 8 Mar 2023 15:24:02 +0900

[SQL Server] How to use MSSQL Server custom port on Linux

# Default port is 1433
# I will set 1434 on port
sudo /opt/mssql/bin/mssql-conf set network.tcpport 1434

# And restart mssql-server service.
systemctl restart mssql-server

[MariaDB] 저장 위치 변경

HoZang — Tue, 27 Dec 2022 17:30:03 +0900

[MariaDB] 저장 위치 변경

MariaDB [(none)]> select @@datadir;

-- 디비 데이터 저장 디렉토리 위치 확인

systemctl stop mariadb
// 마리아 디비 종료
sudo mkdir /data/mysql
// 새 디비 저장공간 디렉토리 생성
chown -R mysql:mysql /data/mysql
// 생성한 디렉토리에 mysql 권한 부여
sudo rsync -av /var/lib/mysql /data/mysql
// rsync를 사용해서 새 디렉토리에 디비 데이터 파일 복사

/etc/mysql/mariadb.conf.d/50-server.cnf
// 위 파일 수정

datadir = /data/mysql

systemctl start mariadb
// 또는
systemctl start mysql

// [Warning] Can't create test file /home/mysql/beta.lower-test
위와 비슷한 오류와 함께 디비 서비스가 시작이 안된다면

/etc/systemd/system/mysql.service
// 파일에서 아래 부분 수정
ProtectHome=false

systemctl daemon-reload
// 데몬 서비스 리로드 후 mariadb 서비스 다시 시작
systemctl start mariadb

[Express] session cookie가 생성되지 않는경우

HoZang — Fri, 29 Jul 2022 16:36:55 +0900

[Express] session cookie가 생성되지 않는경우

express session 설정 부분에서 쿠키에 도메인 명을 입력해주자.

{
    .
    .
    cookie: {
        .
        .
        domain: 'your_domain_name.com'
        .
        .
    }
    .
    .
}

대부분의 nodejs 웹 앱의 경우 nginx나 apache와 같은 웹서버와 함께 리버스 프록시 서버로 서비스하게 된다.

만약 작업중인 웹앱이 이렇게 서비스 중이라면 프록시 서버를 신뢰하도록 설정해준자.

app.set('trust proxy', true);

[MariaDB] MariaDB can't create test file lower-test

HoZang — Fri, 29 Jul 2022 10:50:48 +0900

[MariaDB] MariaDB can't create test file lower-test

Linux에서 MariaDB를 설치한 후 데이터 저장 폴더 경로를 변경하는 과정에서 MariaDB can't create test file lower-test 라는 오류 메세지와 함께 MariaDB 서비스가 시작되지 않는 경우가 있다.

원인은 리눅스 서비스파일 설정에 home 폴더 경로에 대한 권한을 막는 기능이 MariaDB 서비스 파일에 추가되어있고, 필자의 경우 데이터 저장 경로를 home 폴더 하위의 폴더로 변경했기 때문에 이런 오류가 발생했다.

vim /usr/lib/systemd/system/mariadb.service


# Prevent accessing /home, /root and /run/user
ProtectHome=false

기본 값은 true로 되어있을 것이다 false로 변경해주자.

그런 후에

systemctl daemon-reload
systemctl resart mariadb

서비스 설정을 불러온 후 MariaDB 서비스를 재시작해주면 된다.

그런데 MariaDB 업데이트 시 같은 현상이 발생한다.

systemctl edit mariadb


# nano editor로 설정화면이 열린다.
# 아래 내용 추가 후 저장


[Service]
ProtectHome=false

# Ctrl + O, Alt + D, Ctrl + X


# 변경된 서비스을 설정 불러온다.
systemctl daemon-reload

p.s. 위 설정은 두고 MariaDB 데이터 저장경로를 home 폴더 경로 이 외의 위치로 바꿔줘도 된다.

[MariaDB|MySql] 이벤트 스케쥴러 설정

HoZang — Fri, 15 Jul 2022 15:46:10 +0900

[MariaDB|MySql] 이벤트 스케쥴러 설정

my.cnf 또는 my.ini 파일에

event_scheduler = ON

위 항목 추가

mariadb 또는 mysql 접속 후

SHOW VARIABLES LIKE 'event%';

위 쿼리 실행.

event_scheduler | ON

상태로 나온다면 설정 완료

[API] 로또 당첨번호 조회

HoZang — Thu, 31 Mar 2022 12:16:54 +0900

API

www.dhlottery.co.kr/common.do?method=getLottoNumber&drwNo=회차번호

{
    "returnValue":"success", // 요청결과
    "drwNoDate":"2004-10-30", // 날짜 
    "totSellamnt":56561977000, // 총상금액 
    "firstWinamnt":3315315525, // 1등 상금액 
    "firstPrzwnerCo":4, // 1등 당첨인원 
    "firstAccumamnt":0, 
    "drwtNo1":1, // 로또번호 1 
    "drwtNo2":7, // 로또번호 2 
    "drwtNo3":11, // 로또번호 3 
    "drwtNo4":23, // 로또번호 4 
    "drwtNo5":37, // 로또번호 5 
    "drwtNo6":42, // 로또번호 6 
    "bnusNo":6, // 로또 보너스 번호 
    "drwNo":100 // 로또회차
}

로또뽑기

HoZang — Sun, 27 Mar 2022 00:40:50 +0900

https://libretool.com/hitLotto

Hit Lotto - LibreTool

Hit Lotto - LibreTool, hit lotto, perfect lotto, it's rainy lotto, aim lotto number

libretool.com

요즘 회사 프로젝트중 next.js 기반으로 작업하고 있어서 공부할겸 겸사겸사 하나 만들어 봤습니다.

좀 더 수정하고 추가할 기능이 많지만 시간 날 때마다 조금식 작업할 예정이에요.

[HTTPS] mkcert를 활용한 localhost 환경에서 SSL 설정

HoZang — Wed, 16 Feb 2022 14:43:11 +0900

[HTTPS] mkcert를 활용한 localhost 환경에서 SSL 설정

chocolatey 설치

# Get-ExecutionPolicy 실행
$ Get-ExecutionPolicy

# Restricted라면 AllSigned나 Bypass로 설정
# ExcutionPolicy를 AllSigned로 설정
$ Set-ExecutionPolicy AllSigned

# ExcutionPolicy를 Bypass로 설정
$ Set-ExecutionPolicy Bypass -Scope Process

# 설치!
$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

# 확인
$ choco

mkcert 설치

choco install mkcert

인증서 생성

mkcert localhost domain2.localhost

Created a new certificate valid for the following names  
 - "localhost"
 - "domain2.localhost"
 
 The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem"

https://pstudio411.tistory.com/entry/%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%B0%9C%EA%B8%89-%EB%B0%9B%EA%B8%B0-%EC%9C%84%ED%95%9C-mkcert

인증서 발급 받기 위한 mkcert

mkcert 라는 프로그램으로 로컬 환경(내 컴퓨터) 에서 신뢰할 수 있는 인증서를 만들 수 있는 간단한 도구이다. CA(인증기관)의 인증서를 발급받아 자체적으로 관리하는 것은 복잡한 명령, 전문 지

pstudio411.tistory.com

https://dev.to/everylearning/localhost-ssl-55oe

localhost에 인증서(SSL) 설정하기

로컬에서 개발을 진행할 때 SSL문제로 테스트에 문제가 되는 경우가 있습니다. 그래서 로컬에도 SSL을 적용할 수 있는 방법들이 추가되고 있습니다. ...

dev.to

[SQL Server] MSSQL CLI Backup

HoZang — Tue, 24 Aug 2021 16:11:24 +0900

[SQL Server] MSSQL CLI Backup

https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-backup-and-restore-database?view=sql-server-ver15

Backup and restore SQL Server databases on Linux - SQL Server

Learn how to backup and restore SQL Server databases on Linux. Also learn how to backup and restore with SQL Server Management Studio (SSMS).

learn.microsoft.com

Linux backup sh 파일 설정

dateTimeString=$(date '+%Y-%m-%d_%H%M%S')
backupPath=/data/mssql/backup
if ! [ -d $backupPath ]
then
    mkdir -p "${backupPath}"
fi
dbName=
dbUser=
dbPassword=
backFile=${dbName}_${dateTimeString}.bak

/opt/mssql-tools18/bin/sqlcmd -S localhost -C -U ${dbUser} -P ${dbPassword} -Q "BACKUP DATABASE [${dbName}] TO DISK = N'${backupPath}/${backFile}' WITH NOFORMAT, NOINIT, NAME = '${dbName}-full', SKIP, NOREWIND, NOUNLOAD, STATS = 10"

Windows backup bat 파일 설정

set hour=%time:~0,2%
if "%hour:~0,1%" == " " set hour=0%hour:~1,1%
set min=%time:~3,2%
if "%min:~0,1%" == " " set min=0%min:~1,1%
set secs=%time:~6,2%
if "%secs:~0,1%" == " " set secs=0%secs:~1,1%

::Korean
set year=%date:~0,4%
set month=%date:~5,2%
if "%month:~0,1%" == " " set month=0%month:~1,1%
set day=%date:~8,2%
if "%day:~0,1%" == " " set day=0%day:~1,1%

::English
::set year=%date:~-4%
::set month=%date:~4,2%
::if "%month:~0,1%" == " " set month=0%month:~1,1%
::set day=%date:~7,2%
::if "%day:~0,1%" == " " set day=0%day:~1,1%

set dbName=
set datetimstr=%year%%month%%day%_%hour%%min%%secs%
set backupdir=D:\Database\Backup
set filename=Backup_%dbName%_%datetimstr%.bak
set filepath=%backupdir%\%filename%
if not exist %backupdir% mkdir %backupdir%
sqlcmd -E -S "127.0.0.1" -Q "backup database %dbName% to disk='%filepath%'"

[App] 윈도우즈용 파일/폴더 검색 프로그램 Everything

HoZang — Tue, 10 Mar 2020 13:50:38 +0900

[App] 윈도우즈용 파일/폴더 검색 프로그램 Everything

윈도우즈용 파일/폴더 검색 프로그램 Everything

얼마나 좋은지 써보면 뙇

https://www.voidtools.com/ko-kr/

voidtools

Everything 실시간 파일/폴더 검색 작은 설치파일 깔끔하고 단순한 UI 빠른 파일 색인 빠른 검색 최저 자원 사용 쉬운 파일 공유 실시간 갱신 등등... Everything 1.4.1.965 다운로드 32비트 설치파일 64비트 설치파일 32비트 휴대용 압축파일 64비트 휴대용 압축파일 변경 이력새 기능구버전라이선스SHA256지원 언어도움말

www.voidtools.com

[Search] 티스토리 구글 검색 Sitemap 색인 등록

HoZang — Tue, 20 Aug 2019 23:31:52 +0900

티스토리 구글 검색 Sitemap 색인 등록

사이트맵(Sitemap)

이 글 앞에 티스토리 블로그를 구글 웹마스터에 연동하는 설명을 했습니다.

https://khanorder.tistory.com/entry/Google-Search-console-SEO

[Search] 티스토리 구글 검색 등록(Google Search console)

티스토리 구글 검색 등록 구글 웹마스터 도구(Google Search Console) 검색 최적화 블로그나 웨사이트를 구글 검색엔진에 최적화해서, 구글 검색에 보다 잘 노출되게 해주는 서비스이다. 그렇습니다. Search cons..

baejangho.com

위 글에 이어서 블로그나 홈페이지의 페이지 정보를 담은 사이트맵 XML 파일을 생성하고

구글 웹마스터 도구에 등록해서 여러분 블로그의 게시물이 구글 검색에 좀 더 잘 노출되도록 해보겠습니다.

사이트맵 파일은 XML Sitemap Generator 사이트를 통해서 생성합니다.

유/무료 사이트맵 생성 사이트들이 많지만 그 중에 저는 http://www.web-site-map.com/ 이곳을 이용합니다.

먹통은 사이트도 있고 생성해주는 페이지를 많이 제한하는 사이트도 있지만

개인적 경험으로는 무료 사이트 중 여기가 가장 안정적이었습니다.

http://web-site-map.com

링크를 따라 이동하셔서 이런 화면이 나오면 사이트맵을 생성할 블로그 혹은 홈페이지 주소를

위 이미지 붉은줄로 표시한 부분 적어줍니다.

그리고 'Get free XML Sitemap' 버튼을 눌러서 사이트맵 생성을 시작합니다.

사이트맵 생성 설정화면입니다.

Page changing frequency는 Always로 설정해주시고, 캡챠 코드 입력하신 후

'Create free XML Sitemap' 버튼 클릭하시면 사이트맵 XML파일 생성이 시작됩니다.

사이트맵 생성중

사이트맵을 생성하는데 시간이 조금 걸립니다.

컴퓨터가 꺼지거나 절전모드로 들어가지 않게하고 기다립니다.

사이트맵 XML파일 생성이 완료되면 다운로드 받습니다.

파일 이름은 상관없습니다. xml 확장자만 유지해줍니다.

구글 웹마스터 도구를 포함한 검색엔진 등록관리 도구들은

검색등록한 해당 사이트 주소경로의 XML파일만 사이트맵 파일로 등록할 수 있습니다.

제 블로그의 경우 http://khanorder.tistory.com/sitemap.xml 와 같은 형식의 주소여야 합니다.

그런데 티스토리 블로그는 위의 예시와 같이 내가 원하는 이름의 .xml 경로 페이지를 만들 수 없습니다.

그래서 편법적으로 게시물 첨부파일로 사이트맵 XML을 등록한 후

첨부파일 주소를 사이트맵 주소로 사용하면 됩니다.

그런데 최근에 티스토리 글작성 에디터가 업데이트 되었습니다.

새 에디터에서 등록된 첨부파일은 블로그와 다른 주소 경로를 사용고있습니다.

그래서 구 에디터에서 글을 작성하고 첨부파일 등록을 해줘야합니다.

우선 에디터 설정을 구 에디터로 변경하겠습니다.

티스토리 구 에디터 사용설정

에디터 설정을 했다면 이제 글쓰기 화면으로 갑니다.

사이트 맵 파일만 사용하면 되기 때문에 게시글 이름은 어떻게 하든 상관없습니다.

티스토리 구 에디터에서 파일 등록 버튼을 클릭

에디터 상단 메뉴에 파일 등록 버튼을 클릭하면 파일 등록 팝업창이 나옵니다.

Drag & Drop해도 되고 파일 선택상자 열어서 검색해서 파일을 선택해도 됩니다.

파일등록 팝업

사이트맵 파일 첨부파일로 등록

티스토리 구 에디터 우측상단 비공개 선택

내용에 의미가있는 글은 아니므로 비공개로 저장하겠습니다.

저장 확인 팝업이 나오면 '저장' 버튼을 클릭합니다.

등록한 사이트맵 파일 주소 복사

방금 등록한 사이트맵 게시물 페이지에서 첨부파일 링크를 '우클릭' 팝업 메뉴에서 '링크 주소 복사' 를 클릭해서

등록한 사이트맵 파일의 주소를 복사합니다.

그러면 http://khanorder.tistory.com/attachment/cfile22.uf@991388465D5BFCFA12992E.xml

이런 형태의 블로그 주소로 시작되는 첨부파일 주소경로를 사용할 수 있습니다.

이제 이 주소를 구글 웹마스터 도구 사이트맵 목록에 등록하면 됩니다.

구글 웹마스터 도구 사이트맵 등록 화면

위 그림은 저의 구글 웹마스터 도구에 사이트맵 등록화면입니다.

저는 이미 등록한 사이트맵들이 있어서 목록에 몇개의 사이트맵 주소가 있습니다.

복사한 주소에서 앞 부분 블로그 주소만 지우고 나머지 경로만 입력하신 후 제출하면 됩니다.

이제 여러분의 블로그가 구글 검색에서 보다 돋보일 거에요!

이상 구글 웹 마스터 도구에 사이트맵 XML 파일 등록에 대한 설명이었습니다.

[Search] 티스토리 구글 검색 등록(Google Search console)

HoZang — Mon, 19 Aug 2019 22:26:31 +0900

티스토리 구글 검색 등록

구글 웹마스터 도구(Google Search Console) 검색 최적화

블로그나 웨사이트를 구글 검색엔진에 최적화해서, 구글 검색에 보다 잘 노출되게 해주는 서비스이다.

구글 웹마스터 도구

그렇습니다. Search console은 구글신의 검색결과에 더 돋보이게 해준다고 합니다.

그럼 여러분 블로그를 구글 검색에서 돋보이게 해봅시다.

위 검색 링크를 클릭해서 이동하면 이런 화면이 나옵니다.

구글 웹 마스터 도구(Google Search Console) 메인화면

시작하기를 눌러 넘어 가겠습니다.

구글 계정으로 로그인

구글 계정으로 로그인이 안되어 있으면 로그인 화면이 나옵니다.

계정이 없으시면 만들어서 로그인 해주시구요.

Google Search Console 시작화면

이제 시작화면입니다.

우측을 URL 입력상자에 블로그 주소를 적어주세요.

좌측은 설명처럼 도메인 기준으로 모든 하위 도메인 사이트를 검색 최적화 등록하는 메뉴입니다.

이 포스팅에선 생략하고, 단일 URL 기준으로 등록하는 방법을 설명하겠습니다.

주소를 입력하고 '계속' 버튼을 클릭하시면

인증 확인 중...

정상적은 주소인지 확인합니다.

그러면 다시 홈페이지에 소유권을 확인하는 화면이 나옵니다.

소유권 확인, HTML 태그방식을 사용합니다.

인증코드가 담긴 HTML 파일, HTML 태그, 이미 등록된 Google 애널리틱스 계정 등 여러가지 방법으로 인증가능합니다.

저는 HTML 태그 방식으로 메타 태그를 추가해서 소유권 확인을 진행하겠습니다.

위 그림에 빨간색 네모 상자로 표시한 부분의 HTML <meta ... ... ... /> 태그를 복사합니다.

이제 여러분의 블로그 관리자 화면으로 갑니다.

좌측 메뉴 중에서 '스킨편집'을 클릭합니다.

좌측메뉴 > 꾸미기 > 스킨편집

스킨 편집 화면이 새창 또는 새탭으로 열리면, 우측 스킨편집 부분에서 'HTML 편집'을 클릭합니다.

티스트로 스킨 편집 화면

그러면 스킨 편집창 오른쪽 영역이 HTML 편집기로 바뀝니다.

HTML 코드가 나오는데 <head>태그 아래 </head> 태그 위의 영역 중

다른 태그(<></> 형태)와 겹치지 않는 적당한 위치에 좀 전에 복사해온 소유권 확인 <meta> 태그를 붙여넣어줍니다.

HTML을 잘 몰르시는 분들은 아래 사진처럼

<meta name="viewport" ... ... maximum-scale=1.0" /> 태그 다음 줄에 붙여넣기 해줍니다.

HTML 편집기에서 복사해온 소유권 확인 meta 태그 복사 붙여넣기

그리고 까먹지 말고 '적용' 버튼을 클릭해줍시다. 단축키 Ctrl + S로도 적용할 수 있습니다.

HTML을 수정했으면 적용해줍니다.

이제 태그를 복사해온 화면으로 다시 돌아가서 '확인' 버튼을 클릭해줍니다.

소유권 확인 완료

이제 소유권이 확인됐습니다. '속성으로 이동' 버튼을 클릭하면

방금 등록한 사이트의 '개요' 화면으로 넘어갑니다.

Google Search Console

'개요' 화면으로 오시면 검색 결과, 클릭 수, 유효 페이지, 등 다양한 정보를 보실 수 있습니다.

다음은 구글 검색에 잘 노출되게 하기위해 여러분의 사이트(블로그)의 정보를 구글 검색에 '색인' 해줘야합니다.

그러려면 여러분들이 블로그에 작성한 글, 구성한 페이지들의 정보가 담긴 sitemap XML 파일을

위 그림의 'Sitemaps' 메뉴에서 등록하면 구글 검색에 '색인'됩니다.

sitemap XML 파일 생성과 등록 방법은 이어지는 포스팅에서 설명하겠습니다.

티스토리 블로그 사이트맵 구글 검색 등록

http://baejangho.com/entry/Tistory-Sitemap-Google-Search-Console

[Search] 티스토리 구글 검색 Sitemap 색인 등록

티스토리 구글 검색 Sitemap 색인 등록 이 글 앞에 티스토리 블로그를 구글 웹마스터에 연동하는 설명을 했습니다. https://khanorder.tistory.com/entry/Google-Search-console-SEO [Search] 티스토리 구글 검색..

baejangho.com

[PHP] 시드 암호화 알고리즘(KISA SEED Encryption algorithm)

HoZang — Sat, 17 Aug 2019 01:17:51 +0900

한국인터넷 진흥원 시드 암호화 알고리즘

KISA SEED Encryption algorithm

KISA SEED 암호화 알고리즘

프로젝트를 진행하던 중 타 회사에서 개발중인 시스템과 정보를 공유해야할 일이 있었는데,

그 때 KISA SEED 암호화 알고리즘을 사용하게되었던 경험을 정리했습니다.

암호화 알고리즘 소스와 개발 매뉴얼 다운로드 페이지입니다.

https://seed.kisa.or.kr/kisa/Board/17/detailView.do

KISA 암호이용활성화 - 암호알고리즘 소스코드

한국인터넷진흥원(KISA)에서는 128비트 블록암호 SEED를 쉽게 활용할 수 있도록, ECB, CBC, CTR, CCM, GCM 운영모드에 대한 소스코드를 배포하고 있습니다. 언어 : C/C++, Java, ASP, JSP, PHP 다음글 2019-01-31 이전글 2019-01-31

seed.kisa.or.kr

링크에 암호화 알고리즘 소스 다운로드 페이지로 가서 다운로드 받으셨나요?

언어별로, 운영모드(CBC, CTR, GCM 등) 별로 소스코드가 있습니다.

그러면 그냥 다운로드 받은 소스코드의 함수를 실행하면되지 뭐 때문에 이 글을 적는가?

아마 다운로드한 소스코드의 encrypt, decrypt 함수를 실행하면 암호화, 복호화가 정상적으로 안될겁니다.

예전이 이 소스코드 실행하다가 맨붕했던 기억나네요... ... 그래서 이렇게 사용방법을 공유해봅니다.

참고로 예제로 보여드릴 코드는 CBC운영모드를 기준으로 했습니다.

우선 다운로드 받은 소스코드의 함수를 실행하면 정상 작동안하는 이유는 SEED 암호화 알고리즘은 128비트 블록 암호화 알고리즘입니다.

위 링크에 같이 첨부된 개발 메뉴얼 PDF파일을 읽어보면

SEED 암호화 알고리즘 개발 메뉴얼 중

암호화할 데이터를 128비트 단위로 블럭화 해야합니다.

그러니까 마지막 블럭의 크기가 128비트가 안되면 나머지 크기만큼 패딩을 해서 128비트 블럭을 만들라는 말이겠죠?

그래서 개발 매뉴얼 PDF 내용중 고려사항에서 좀 더 뒤로 가면 패딩방법 3가지를 설명하주고 있습니다.

직접 패딩하란 소리죠. ㅎ ㅏㅎ ㅏㅎ ㅏ 하긴 암호화 알고리즘 만들어 준게어디야... 라고 작업 당시에 생각했는데

최근에 Java로 작업하게 되서 Java 소스를 살펴보니 패딩처리까지 되어있더군요.

나머지 다른 언어들은 확인하지 못했지만 정말 치사하단 생각이 들더라구요. ㅜ_ㅡ 지못미 PHP

어쨋든 PDF에 패딩이 필요하다니까 해야하겠죠. 그런데 내용이 좀...

SEED 암호화 알고리즘 블럭 패딩 설명

그냥 작성된 소스코드 좀 주시면 안될까요? 하...

그래서 구글링을 해서 패딩작업을 한 소스를 찾았습니다.

참고한 소스의 출처를 적으려니 너무 오래되서 어디서 참고했는지 기억이 잘 안나네요.

죄송하지만 출처를 좀 생략하고 다른 곳에서 참고했다는 것만 밝히겠습니다.

<?php
require_once ('KISA_SEED_CBC.php');

class KISA_SEED_CBC_HANDLE
{
	private static $g_bszUser_key = [ "f1", "96", "ff", "18", "28", "c8", "ef", "cc", "ab", "1a", "fd", "8d", "8c", "b9", "a4", "34" ];
	private static $g_bszIV = [ "78", "69", "81", "ab", "4a", "4c", "2c", "a8", "a9", "99", "67", "81", "77", "a1", "cc", "bb" ];
	private static $SeedBlockSize = 16;
	private static $PADDING_VALUE = 0x0F;

	public function addPadding($source, $blockSize) {
		$paddingResult = $source;
		$paddingCount = $blockSize - (count($source) % $blockSize);
		if (!$paddingCount) {
			for($i=0;$i<self::$SeedBlockSize;$i++) {
				$paddingResult[] = self::$PADDING_VALUE;
			}
		} else {
			for($i=0;$i<$paddingCount;$i++) {
				$paddingResult[] = 0x0A;
			}
		}

		return $paddingResult;
	}

	public function removePadding($source, $blockSize) {
		$paddingResult = $source;
		$byte_length = count($source);
		$lb_start = $byte_length - $blockSize - 1;
		$is_padding = false;
		$padding_start = 0;
		for ($i = $lb_start; $i < $byte_length; $i++) { 
			if ($source[$i] == 10) {
				$is_padding = true;
				$padding_start = $i;
				break;
			}
		}
		for ($i = $padding_start; $i < $byte_length; $i++) {
			array_pop($paddingResult);
		}

		return $paddingResult;
	}

	public function encrypt($str) {

		$planBytes = array_slice(unpack('c*', $str), 0);
		$planBytes = $this->addPadding($planBytes, self::$SeedBlockSize);
		$keyBytes = self::$g_bszUser_key;
		$IVBytes = self::$g_bszIV;
		
		for($i = 0; $i < 16; $i++)
		{
			$keyBytes[$i] = hexdec($keyBytes[$i]);
			$IVBytes[$i] = hexdec($IVBytes[$i]);
		}

		if (count($planBytes) == 0) {
			return $str;
		}
		$ret = null;
		$bszChiperText = null;
		$pdwRoundKey = array_pad(array(),32,0);

		$bszChiperText = KISA_SEED_CBC::SEED_CBC_Encrypt($keyBytes, $IVBytes, $planBytes, 0, count($planBytes));

		$r = count($bszChiperText);

		for($i=0;$i< $r;$i++) {
			$ret.= ($ret ? "," : "") . sprintf("%02X", $bszChiperText[$i]);
		}
		return $ret;
	}

	public function decrypt($str) {
		$planBytes = [];
		$keyBytes = self::$g_bszUser_key;
		$IVBytes = self::$g_bszIV;
		
		for($i = 0; $i < 16; $i++)
		{
			$keyBytes[$i] = hexdec($keyBytes[$i]);
			$IVBytes[$i] = hexdec($IVBytes[$i]);
		}

		$hex_arr = explode(",", $str);

		foreach ($hex_arr as $hex) {
			$dec = hexdec($hex);
			$planBytes[] = $dec;
		}

		if (count($planBytes) == 0) {
			return $str;
		}

		$pdwRoundKey = array_pad(array(),32,0);

		$bszPlainText = null;

		$planBytresMessage = "";
		$bszPlainText = KISA_SEED_CBC::SEED_CBC_Decrypt($keyBytes, $IVBytes, $planBytes, 0, count($planBytes));
		for($i=0;$i< sizeof($bszPlainText);$i++) {
			$planBytresMessage .=  sprintf("%02X", hexdec($bszPlainText[$i])).",";
		}

		$decryptHexStr = substr($planBytresMessage,0,strlen($planBytresMessage)-1);
		$decryptHex = explode(",", $decryptHexStr);

		$dec_data = call_user_func_array("pack", array_merge(array("c*"), $decryptHex));
		return $dec_data ? trim($dec_data) : "";
	}

}

끝으로 클래스 속성값으로 선언해준 암호화 seed 값은 원하는 16진수 값으로 넣으시면 됩니다.

Codeigniter3 XSS filtering issue

HoZang — Tue, 13 Aug 2019 00:33:44 +0900

XSS Cross-site Scripting

Codeigniter3 XSS filtering issue

회사에서 이 전에 진행한 프로젝트에서 Codeigniter 3 Framework를 사용하였는데, 이 사이트의 HTML을 사용하는 영역을 제외하고는 Input Class에서 XSS filtering을 한 후 Parameter 값을 사용했습니다.

그런데 이 사이트 사용자 중 한 분에게 입력한 내용이 일부 사라졌다는 오류 제보를 받았습니다.

확인해보니 Codeigniter 3(이하 CI3)에서 XSS filtering을 할 때 특정 문자열 패턴이 HTML로 인식되서 사라지는 현상이었고, 원인은 '% 33', '% 40' 와같이 엔퍼센트 특수 문자 뒤에 한칸 띄우고 숫자가 2개 이상 오는 패턴일 때 XSS방어 기능이 이 패턴을 HTML entity로 인식하고 제거해버리는 것이었습니다.

CI3 가이드 문서를 보면 CI의 XSS filtering 기능은 매우 강력하게 작용하으므로 전역적으로 사용하지 말라고 나와있습니다.

하지만 제 생각에는 이런 오류라면 부분적으로 사용한다고 하더라도 안심하고 CI XSS filtering 기능을 적용하기에는 문제가 있다고 생각이 들었습니다.

사용자가 입력하는 불특정한 데이터를 XSS filtering 기능에 맞기기에는 데이터 자체가 훼손될 수 있기 때문이죠.

실제로 그 이유로 불편함을 제보 받았구요.

짧은 영어로 stackoverflow에 질문을 해보니

https://stackoverflow.com/questions/56572511/some-text-was-removed-while-xss-filtering-in-codeigniter

Some text was removed while xss filtering in codeigniter

Removed text is '% 33', '% 40'. (single quote is not included) $text = "% 33"; $xss_text = $this->input->post($text, TRUE); echo $xss_text; // result is 3 and @

stackoverflow.com

고맙게도 댓글로 도움을 주신분이 XSS filtering 쓰지 말라고하면서 XSS filtering 기능의 문제에 대해서 설명한 링크를 알려주더라구요.

https://stackoverflow.com/questions/5337143/codeigniter-why-use-xss-clean

CodeIgniter - why use xss_clean

if I'm sanitizing my DB inserts, and also escaping the HTML I write with htmlentities($text, ENT_COMPAT, 'UTF-8') - is there any point to also filtering the inputs with xss_clean? What other benefits

stackoverflow.com

그러면 XSS 방어는 포기?

그러면 XSS 방어는 어떻게 해야할까? 에 대해서 생각을 해야하는데요.

위에 두 번째 링크의 질문에 대한 답변 글 중 Useful 점수가 가장 높은 글 내용의 결론은

'XSS는 출력(output)의 문제이지 입력(input)의 문제가 아니다' 라는 것입니다.

그러니 input parameter에서 filtering 하기보다는 Output할 때 escape해주는 것이 좋은 방법입니다.

글을 적으면서 확인해보니 CI3 가이드 문서에도 XSS 이스케이프는 output에서 진행하라는 안내가 있었습니다.

http://www.ciboard.co.kr/user_guide/kr/libraries/input.html

Input Class ‐ 코드이그나이터 3.0 한글매뉴얼

CodeIgniter는 POST, COOKIE 혹은 SERVER 아이템을 가져오기 위해서 3가지 헬퍼함수를 제공합니다. 각 아이템들을 직접 가져오는 것보다($_POST['something']) 헬퍼를 사용하면 더 좋은 이유는, 헬퍼가 아이템이 세팅되어 있는지를 먼저 체크하고 세팅되어있지 않다면 FALSE를 반환하기 때문입니다. 아이템이 존재하는지 먼저 검사하고 처리할 필요가 없어집니다. 다시말하면, 일반적으로 여러분안 아래와 같이 프로그램할 것입니다: $

www.ciboard.co.kr

개인적으로도 이 생각에 동의합니다. 하지만 웹 애플리케이션(Web application)에 출력되는 모든 데이터를 escape하는 일은 상당히 번거로운 일입니다.

<?php $variable = "<p>호짱의 개발 블로그</p>"; ?>
<?=htmlentities($variable)?>
<?=htmlspecialcharacters($variable)?>
// 출력
// <p>호짱의 개발블로그</p>

PHP 내장 함수로 escape처리를 하려면 아마 모든 문자열을 이런식으로 출력해줘야하니까요.

그런데 Twig(https://twig.symfony.com/) 같은 View 페이지 Template engine을 사용하면 escape를 좀 더 간단하게 처리할 수 있습니다.

{{ var }}
{{ var|escape }}
{{ var|e }}         {# shortcut to escape a variable #}

PHP 스크립트 시작 태그인 <?php 태그를 사용하지 않아도되서 View 페이지 코드를 작성할 때 HTML과 함께 사용하기도 더 편리하고 위 코드처럼 escape처리 뿐만아니라 일반적인 문자열 출력도 훨씬 간편해집니다.

이 링크는 CI3에서 Twig를 상용할 수있게 해놓은 Library Github 저장소입니다.

https://github.com/kenjis/codeigniter-ss-twig

kenjis/codeigniter-ss-twig

A Simple and Secure Twig integration for CodeIgniter 3.x - kenjis/codeigniter-ss-twig

github.com

PHP에서 View Template engine은 Twig만 있는건 아닙니다.

Laravel Framework에 내장된 Blade Template engine도 있는데요.

Blade도 CI3에서 사용할 수있습니다.

https://khanorder.tistory.com/entry/ci-blade

코드이그나이터에서 블레이드 템플렛 사용하기

코드이그나이터에서 블레이드 템플렛 사용하기 우선 블레이드를 라라벨 없이 사용가능한 컴포넌트를 받아 오토로드 합니다. 컴포저가 설치됐다는 가정 하에 커멘드라인에서 컴포넌트 설치. composer require dunca..

khanorder.tistory.com

제가 작성한 CI3에서 Blade Template engine 사용법에 대한 글입니다.

Blade에서도 Twig처럼 간결하고 쉽게 문자열을 escape하고 출력할 수있습니다.

// blade는 기본 출력이 escape
{{ $variable }}
 
// escape 없이 출력할려면 이렇게
{!! $variable !!}

이렇게 말이죠~

이상 CI3 XSS filtering 기능의 문제점과 좀 더 안전하고 편안한 XSS 방어 방법으로 View Template engine을 통한 문자열 escape 방법에 대해 적어봤습니다.

[IntelliJ] 2019.2 업데이트 후 언어셋 오류 해결

HoZang — Mon, 12 Aug 2019 22:59:12 +0900

2019.2 업데이트 후 언어셋 오류 해결

IntelliJ 설치 후 한글이 깨지는 현상을 해결하는 방법을 지난 번에 포스팅했는데요.

https://khanorder.tistory.com/entry/IntelliJ-resolve-garbled-korean-problem

[IntelliJ] 한글깨짐 해결 UTF-8 Encoding 설정

[IntelliJ] 한글깨짐 해결 UTF-8 Encoding 설정 1. IntelliJ 가상머신 Encoding 설정 IntelliJ 실행시 사용되는 가상머신 Encoding 설정. Windows 환경에서 기본 설정으로 IntelliJ를 설치할 경우를 기준으로 C:\P..

khanorder.tistory.com

그런데 저는 업데이트 후 이 설정이 정상적으로 인식이 안되는 현상이 있었습니다.

위 링크에 첫 번째 설정이 문제였는데요.

문제는 .vmoptions 파일은 IntelliJ가 설치된 폴더에도 있지만

OS 사용자 설정폴더에있는 IntelliJ 개인 설정 폴더에도 있습니다.

C:\Users\Account\.IntelliJIdea2019.2\config\idea64.exe.vmoptions

만일 저처럼 업데이트 후에 .vmoptions 파일 설정이 되어있는데도 한글 깨짐문제가 발생한다면,

Windows 기준으로 사용자 개인설정 파일 폴더에 있는 .vmoptions파일을 확인해보세요.

여기는 적용이 안되어있을겁니다.

아 그리고 제가 첨부한 스크린샷 이미지에는 2019.2 버전 폴더인데

2019.1 버전에서 업데이트 한 경우라면

개인설정 폴더가 2019.1로 되어있을 겁니다.

그래서 실제 설치된 폴더의 .vmoptions 파일을 수정해도 아무 효과가 없었던것 같아요.

[IntelliJ] 메소드 구분선 표시(Show method separators)

HoZang — Fri, 9 Aug 2019 15:53:34 +0900

메소드 구분선 표시(Show method separators)

File > Settings (Ctrl + Alt + S), Editor > General > Appearance

설정하고 나면

메소드 사이에 구분선이 생겨서 가독성이 좋아집니다~

[JSP] EUC-KR 캐릭터셋 한글 깨짐현상 해결방법

HoZang — Thu, 8 Aug 2019 16:14:42 +0900

EUC-KR 캐릭터셋 한글 인코딩 깨짐 해결방법

EUC-KR 언어셋 환경에서 GET 방식으로 한글 문자를 전송할 경우 글자가 깨집니다.

이럴 땐 URL encoding을 한 후 전송해서, 전송 받은 데이터를 8859_1 인코딩 바이트 코드로 받은 후

받은 byte code 값을 String 객체를 사용해서 euc-kr 언어셋으로 재생성 해주면됩니다~!

// 전송할 때

String send_str = URLEncoder.encode("호짱", "euc-kr");

// 물론 위 값을 html a 태그 등에 파마미터로 붙여서 전송

// 전송된 문자열 데이터를 받을 때

String get_str = new String(request.getParameter("send_str").getBytes("8859_1"),"euc-kr");

[IntelliJ] 자동완성 설정 Live Templates

HoZang — Sun, 28 Jul 2019 16:51:21 +0900

[IntelliJ] 자동완성 설정 Live Templates

IntelliJ에서 기본 자동완성 단축키는 Ctrl + Space로 Eclipse와 같습니다.

그런데 자동 완성 기능은 전체 Class명이나 Method명에서 검색되는 반면에

Live Templates 기능은 미리 지정된 단축문과 관련있는 Class, Method로 완성됩니다.

입력중인 키워드의 연관된 Live Templates

현재 커서 위치에서 사용될것 같은 Live Templates를 보여주는 단축키는 Ctrl + J입니다.

공백인 커서 위치에서 Ctrl + J 키를 눌렀을 때

Eclipse를 사용할 때 특정 키워드를 입력후 자동완성 단축키(Ctrl + Space)를 입력하면

Class나 Method를 자동완성 해주는 기능과 동일합니다.

(예: 'sysout' 입력 후 Ctrl + Space 누르면 'System.out.println()' 자동완성)

참고로 IntelliJ에서 'System.out.println()' Method의 단축 키워드는 'sout' 이고

Eclipse 'foreach'에 해당하는 for (Object el : ) { ... } 형태의 단축 키워드는 'iter'입니다.

IntelliJ의 기본 단축 키워드가 마음에 안들면 수정하거나 추가해서 사용할 수 있습니다.

File > Settings 단축키(Ctrl + S) 설정 화면에서 Editor > Live Templates에서 추가, 수정, 삭제할 수 있습니다.

우측에 '+' 버튼을 눌러서 Live Template를 추가할 group을 생성하거나 현재 group중에 Live Template를 추가하고

단축 키워드 Abbreviation, 완성될 Template text를 입력한 후

아래 change 버튼을 눌러서 사용될 영역을 지정해주면됩니다.

(영역 지정을 안해주면 Ctrl + J를 눌러도 안 나옵니다.)

보통 Java 코드가 작성되는 영역은 Java 트리에 Statement를 체크해주세요~

[IntelliJ] SQL dialect detection (SQL 경고 끄기)

HoZang — Fri, 26 Jul 2019 12:00:49 +0900

[IntelliJ] SQL dialect detection

IntelliJ 3일차 mybatis mapper xml 파일을 여는 순간 온통 경고 화면이 뜬다.

IntelliJ 설치 후 mybatis mapper xml 파일 화면

sql dialect ? sql 방언? 특정 database의 명령어가 발견되었다는 뜻인가?

경고화면 부분에서 Alt + Enter 키를 눌러서 Edit inspection profile setting 화면을 열어서 해당 경고를 꺼도된다.

그런데 이 방법보다. 현재 사용중인 Database를 IDEA에 지정해주면 경고도 사라지고 해당 Database에 맞는 코드검증도 해준다.

Settings창의 SQL Dialects 지정 화면

File > Settings 또는 Ctrl + Alt + S를 눌러서 Settings 창을 열고, 좌측메뉴 Languages & Frameworks > SQL Dialects 메뉴에서 사용중은 Database를 지정해주면된다.

IDEA 전역 기본값부터 프로젝트 기본값, 그리고 경로에 따라서도 지정할 수 있다.