그래픽스 개발자의 코딩 블로그

OpenAI API 키 도용 5만건 이상 (GPT-4 무단 이용)

kgenots — Tue, 13 Jun 2023 20:52:28 +0900

최근에는 "Discodtehe"라는 사용자가 Replit 플랫폼에 게시된 소스 코드에서 API 키를 수집하여 이를 공유하는 사례가 발생했습니다. 이를 통해 800명 이상의 커뮤니티 멤버가 도용된 계정을 사용하고 큰 요금을 발생시키는 일이 벌어졌습니다.

OpenAI는 최신 언어 모델인 GPT-4를 개발자들이 활용할 수 있도록 API 키를 제공합니다. 그러나 최근 API 키의 누출로 인해 보안 위협이 증가하고 있습니다. 이 글에서는 OpenAI API 키 누출의 심각성과 개발자가 이에 대응하기 위해 취해야 할 조치에 대해 살펴보겠습니다.

OpenAI API 키의 누출과 문제점

OpenAI API 키는 개발자가 자신의 애플리케이션에 OpenAI의 기술을 통합할 수 있게 해줍니다. 그러나 많은 개발자들이 자신의 키를 코드에 포함시키고 이를 잊어버리는 경우가 많아졌습니다. 이로 인해 악의적인 사용자들이 API 키를 탈취하여 제3자 계정을 사용하거나 비용을 발생시킬 수 있으며, 민감한 비즈니스 데이터에 접근할 수도 있습니다.

GitGuardian에 따르면 현재 GitHub에서만 50,000개 이상의 OpenAI API 키가 노출되어 있어 OpenAI 개발자 계정은 MongoDB와 Google에 이어 세 번째로 가장 노출된 계정입니다.

Source: GitGuardian

OpenAI API 키 보호를 위한 개발자의 조치

개발자들은 API 키의 보안을 강화하기 위해 몇 가지 조치를 취할 수 있습니다.

키를 코드에 포함시키지 않기: 개발자는 API 키를 코드에 직접 포함시키지 않아야 합니다. 대신 환경 변수와 같은 안전한 방법을 사용하여 키를 저장하고 불러와야 합니다.
고유한 키 할당: 개발자는 각 사용자에게 고유한 API 키를 할당해야 합니다. 이를 통해 한 사용자의 키가 탈취되더라도 다른 사용자의 계정에는 영향을 주지 않습니다. API 키를 다른 사용자와 공유하는 것은 자제해야 합니다.
키 관리 서비스 사용: 개발자는 키 관리 서비스를 활용하여 키의 보안을 강화할 수 있습니다. 키를 안전하게 저장하고 주기적으로 변경하는 것이 중요합니다.
정기적인 키 변경: 개발자는 정기적으로 키를 변경하여 보안을 강화해야 합니다. 민감한 정보에 접근하는 경우에는 매일 키를 변경하는 것도 고려해야 합니다.
자동 키 변경 기능 활용: 개발자는 자동으로 키를 회전시키는 기능을 활용하는 것이 좋습니다. 이를 위해 제3자 도구를 사용할 수 있으며, 24시간마다 키를 자동으로 변경함으로써 보안을 강화할 수 있습니다.

마무리

OpenAI API 키의 누출은 심각한 보안 위협을 초래할 수 있습니다. 개발자들은 API 키의 보안을 강화하기 위해 적절한 조치를 취해야 합니다. 키를 코드에 포함시키지 않고, 고유한 키를 할당하고, 키 관리 서비스를 사용하며, 정기적으로 키를 회전시키는 것이 중요합니다. 이러한 조치를 통해 개발자들은 OpenAI API를 안전하게 활용할 수 있으며, 누출로 인한 문제를 예방할 수 있습니다.

기사 원문: https://www.darkreading.com/application-security/cybercrooks-scrape-openai-keys-pirate-gpt-4

C++ 에서 string 문자열과 char 배열 비교하기

kgenots — Tue, 23 May 2023 17:25:56 +0900

안녕하세요! 이번에는 C++에서의 std::string과 char 배열의 차이를 비교해보려고 합니다. C++에서 문자열을 표현하는 두 가지 방법인 std::string과 char 배열은 각각 장단점을 가지고 있습니다. 이 글에서는 두 방법의 동작 원리, 메모리 할당, 문자열 조작 등 다양한 측면을 비교해보면서 어떤 상황에서 어떤 방법을 선택해야 하는지 알아보겠습니다.

C++ 에서 std:string과 char[] 비교하기

std::string: 유연하고 편리한 문자열 클래스

std::string은 C++ 표준 라이브러리에서 제공하는 문자열 클래스입니다. std::string 객체는 동적으로 메모리를 할당하여 문자열을 저장하므로, 문자열의 길이에 따라 자동으로 크기가 조절될 수 있습니다. 이는 필요한 만큼의 메모리만 사용하므로 메모리의 낭비를 최소화할 수 있습니다. 또한 std::string은 다양한 내장 함수를 제공하여 문자열을 조작하고 처리하는 데 편리함을 제공합니다.

아래는 std::string을 사용한 예제 코드입니다.

#include <iostream>
#include <string>

int main() {
    std::string myString = "Hello, world!";
    
    std::cout << "문자열 길이: " << myString.length() << std::endl;
    std::cout << "첫 번째 문자: " << myString[0] << std::endl;
    
    myString += " How are you?";
    std::cout << "변경된 문자열: " << myString << std::endl;
    
    return 0;
}

char 배열: 정적 할당과 직접적인 문자 조작

char 배열은 단순한 문자들의 배열로, 문자열을 저장하기 위해 연속된 메모리를 정적으로 할당합니다. char 배열은 크기가 정해져 있으며, 정적 할당이므로 실행 시간에 크기를 조절할 수 없습니다. 또한 char 배열은 문자열 조작을 위한 내장 함수를 제공하지 않으므로 문자열을 직접 조작해야 합니다.

아래는 char 배열을 사용한 예제 코드입니다.

#include <iostream>

int main() {
    char myString[15] = "Hello, world!";
    
    int length = 0;
    while (myString[length] != '\0') {
        length++;
    }
    std::cout << "문자열 길이: " << length << std::endl;
    std::cout << "첫 번째 문자: " << myString[0] << std::endl;
    
    char additionalString[] = " How are you?";
    strcat(myString, additionalString);
    std::cout << "변경된 문자열: " << myString << std::endl;
}

std::string 과 char 배열 비교

메모리 할당 방식

std::string은 동적으로 메모리를 할당하며 필요에 따라 크기를 조절할 수 있습니다. 메모리는 힙(heap) 영역에서 동적으로 할당되며, 문자열 길이에 따라 자동으로 메모리를 조절합니다.
char 배열은 정적으로 메모리를 할당하며 컴파일 시간에 크기가 결정됩니다. 할당된 메모리는 스택(stack) 영역에 위치하며, 크기가 고정되어 있어 추가적인 메모리 할당이 불가능합니다.

문자열 조작

std::string은 문자열 조작을 위한 다양한 멤버 함수를 제공합니다. 예를 들어, 문자열 연결, 복사, 자르기, 찾기 등의 작업을 간편하게 수행할 수 있습니다.
char 배열은 내장 함수를 제공하지 않으므로, 문자열 조작을 위해 C 스타일의 문자열 함수를 사용해야 합니다. strcpy, strcat, strlen 등의 함수를 사용하여 문자열 조작을 수행합니다.

성능

std::string은 문자열의 크기가 동적으로 조절될 수 있고 내장 함수를 활용할 수 있으므로 편리하지만, 메모리 할당과 해제, 함수 호출 등의 오버헤드가 발생할 수 있습니다. 따라서 많은 문자열 처리가 필요한 경우에는 성능이 저하될 수 있습니다.
char 배열은 정적으로 할당되며 내장 함수를 사용하지 않기 때문에 메모리 오버헤드가 적고, 함수 호출도 최소화됩니다. 따라서 많은 문자열 처리가 필요한 경우에는 성능이 개선될 수 있습니다.

번들링(Bundling) 이란? 이점과 기술 소개

kgenots — Tue, 23 May 2023 16:32:56 +0900

번들링(Bundling)의 사전적인 의미는 '어떤 것을 묶다, 모으다' 입니다. 웹 개발에서 번들링은 여러 코드와 프로그램을 묶어 사용자에게 웹 애플리케이션을 제공하는 핵심 과정입니다. 번들링(Bundling)은 빌드 과정 중 하나로, 최종적으로 번들링된 파일을 브라우저에서 실행하여 웹 애플리케이션을 실행합니다.

웹 개발 번들링 이해하기

번들링의 이점

1. 파일 크기 문제 해결

번들링은 결과물 파일들을 압축하여 크기를 줄입니다. 번들 파일은 번들링되지 않은 원본 파일보다 작아지며, 실행 속도와 로딩 속도도 향상됩니다. 번들링은 성능 측면에서 이점을 제공합니다

2. 애플리케이션 임의 조작 방지

번들링된 웹 애플리케이션은 사용자가 임의로 조작할 수 없습니다. 번들링되지 않은 원본 코드에 접근할 수 있다면, 사용자가 의도하지 않은 조작을 할 수 있습니다. 번들링은 애플리케이션의 무결성과 보안을 강화합니다.

3. 파일 단위의 모듈 관리

JavaScript는 기본적으로 전역 범위를 가지므로 여러 개의 JavaScript 파일이 있을 때 변수 충돌 등의 문제가 발생할 수 있습니다. 번들링 도구인 Webpack은 모듈 번들링을 통해 이 문제를 해결합니다.

Webpack

웹팩(Webpack)

웹팩은 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용되는 모듈 번들러입니다. 웹팩은 JavaScript 애플리케이션을 위한 모듈 번들러로 사용됩니다.

모듈 번들러의 등장

모던 웹에서는 HTML, CSS 파일의 내용이 JavaScript 파일 안으로 들어오면서 JavaScript 파일의 양과 의존성 트리가 증가했습니다. 이로 인해 변수 스코프 문제와 네트워크 비용 문제가 발생하게 되었습니다. 모듈 번들러는 이러한 문제를 해결하기 위해 등장하였습니다.

웹팩이 제공하는 기능

웹팩은 다양한 기능을 제공하여 웹 개발을 편리하게 합니다.

번들링 : 웹팩은 HTML, CSS, JavaScript 등의 자원을 각각의 모듈로 보고 이를 조합해 하나의 번들로 묶습니다.
네트워크 비용 감소 : 웹팩은 각 자원을 일일이 서버에 요청해 가져오는 대신, 같은 타입의 자원을 요청하고 응답을 주고받아 네트워크 비용을 감소시킵니다.
자바스크립트 문법 호환성 지원: 웹팩은 babel-loader를 사용하여 자바스크립트 ES6 문법을 ES5로 변환해주어 호환성 문제를 해결할 수 있습니다.
개발 및 프로덕션 모드 선택: 웹팩은 개발 모드와 프로덕션 모드를 선택할 수 있습니다. 프로덕션 모드에서는 코드 난독화, 압축, 최적화 작업 등을 수행하여 성능을 향상시킵니다.

웹팩 설정 파일 (webpack.config.js)

웹팩을 사용하기 위해 webpack.config.js라는 설정 파일을 작성할 수 있습니다. 이 파일을 통해 번들링 과정을 세부적으로 제어할 수 있습니다.

다음은 webpack.config.js의 기본적인 구성 요소입니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  mode: 'development',
};

entry: 웹팩이 의존성 그래프를 그리기 시작하는 시작점 파일을 지정합니다. 일반적으로 index.js 파일을 사용합니다.
output: 생성된 번들을 내보낼 위치와 파일 이름을 지정합니다. 일반적으로 dist 폴더에 bundle.js로 출력됩니다.
module: 웹팩은 모듈을 처리하기 위해 로더를 사용합니다. 로더는 모듈을 변환하거나 의존성 그래프에 추가하는 역할을 합니다.
plugins: 웹팩 플러그인은 번들을 최적화하거나 에셋을 관리하는 등의 작업을 수행합니다.
mode: 개발 모드(development) 또는 프로덕션 모드(production)를 선택할 수 있습니다. 개발 모드는 디버깅을 용이하게 하고, 프로덕션 모드는 최적화된 번들을 생성합니다.

마무리

번들링은 웹 개발에서 필수적인 단계로, 파일 크기 문제 해결, 애플리케이션 임의 조작 방지, 파일 단위의 모듈 관리 등의 이점을 제공합니다. 웹팩은 대표적인 번들러로서 다양한 기능을 제공하며, 설정 파일을 통해 번들링 과정을 세부적으로 제어할 수 있습니다.
위의 예제 코드를 참고하여 웹팩을 활용하여 애플리케이션을 개발해 보세요. 웹 개발의 효율성과 성능을 높이기 위해 번들링은 필수적인 도구입니다.

번들링 라이브러리에는 Webpack 외에도 Rollup.js, Parcel 등이 있습니다. 자세한 사용 방법은 이후에 알아보도록 하겠습니다.

JavaScript 개발자라면 읽어야 할 JS 변천사. 1탄 Classic JavaScript

kgenots — Mon, 28 Nov 2022 18:37:55 +0900

JS 개발자라면 알아야할 변천사 1탄

JavaScript 를 사용하다보면 어떤 코드는 require 를 쓰고 있고 어떤 코드는 import 를 쓰고 있는 것을 확인할 수 있습니다.

언제 무엇을 써야 하고, 왜 그렇게 써야하는지 알기 위해서는 JavaScript의 변천사를 어느정도 이해하는 것이 필요합니다.

# 제발 안다고 하고 몰라서 require 랑 import 혼용해서 쓰지 말아주세요. 특히 Node.js 14에서...

우선 간단히 요약해서 설명하면,

정적 로드 : HTML <script>
동적 로드 (풀패키지) : Node.js 4~14 CommonJS(require)
동적 로드 (모듈) : Node.js 14~ ESModule(import)

의 순서로 이해하시면 좋습니다.

우선 1탄에서는 require를 사용하는 CommonJS, AMD, UMD 에 대해서 설명해보려합니다.

하아 이제부터 얘기할 거 틀릴까봐 겁납니다 ㅠㅠ

태초의 자바스크립트

HTML 내 <script> 태그 이용

우리가 JavaScript 를 맨 처음 배울 때, HTML 내 <script> 라는 태그를 쓰고, 직접 코드를 작성하거나 `src` attribute를 이용해서 특정 url 또는 상대경로에서 script 를 불러올 수 있었습니다. 이때까지만 하더라도 브라우저 내에서 <script> 태그 별로 하나의 스크립트를 실행할 수 있는 환경이었습니다.

생활코딩 JavaScript 강의 발췌

CommonJS와 Node.js

require의 시작

프로그래밍 언어인 JavaScript 가 갖추어야할 기능은 많아지고 언어의 범용화를 위해 모듈화에 대한 요구사항이 늘어났습니다. 이 때 CommonJS(http://www.commonjs.org/) 라는 자발적으로 조직된 워킹그룹이 JavaScript 의 범용화를 주도하였습니다. 이 시기 언저리에 브라우저와 별개 JavaScript를 독립적으로 실행할 수 있는 환경인 Node.js 가 생겨났습니다. (Node.js 말고도 많았지만 살아남은건...)

Node.js는 브라우와 별개의 독립실행 환경에서 os 모듈, fs 모듈 등을 통해 시스템에 접근 가능하게 되었습니다. 이 때, os 와 fs 같은 외부 모듈에 접근해서 로드할 수 있는 메서드가 `require()` 입니다. 이와 같은 CommonJS 형식의 모듈을 제작할 때, `module.exports` 를 사용합니다. 이 때 모듈 단위는 파일 이름이거나 index.js를 포함하고 있는 폴더 이름입니다. (Python 에서의 모듈 개념과 비슷함. 파일 이름이거나, __init__.py를 포함하고 있는 폴더 이름)

* 파일이름에서 .js를 빼기도 합니다.

CommonJS 모듈화

CommonJS의 모듈화에 사용되는 개념은 아래와 같습니다.

스코프(Scope): 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
정의(Definition): 모듈 정의는 exports 객체를 이용한다.
사용(Usage): 모듈 사용은 require 함수를 이용한다.

CommonJS(require) 사용 예시:

// Foo.js
module.exports = fooA // fooA 라는 객체, 메서드(함수), 변수를 모듈 자체로 사용함

// App.js
var fooB = require('Foo.js') // 위에서 만들어진 모듈이 현재 파일에서 fooB 라는 이름으로 사용됨

위 코드에서 fooA 는 Foo.js 에서 정의할 때 쓴 이름이고, fooB 는 App.js 사용하려고 쓴 이름입니다. 헷갈린다면 공부!!

// Foo.js
module.exports.foo = fooA // fooA 라는 객체, 메서드(함수), 변수를 모듈 자체로 사용함

// App.js 사용방법 1.
var fooB = require('Foo.js') // 일단 module.exports 가 require('Foo.js') 그 자체
console.log(fooB.foo);

// App.js 사용방법 2.
var { foo } = require('Foo.js') // 모듈은 {} 로 불렀고 내부에 foo property 가져옴
console.log(foo);

여기서 사용된 CommonJS 형태의 JS 코드는 몇가지 특징이 있습니다.

파일 자체가 모듈 형태임. 내부 객체를 빼낸다고 하더라도 객체 밖에 있는 코드는 전역적으로 한 번 동작함.
동기(Synchronous) 형태임. 호출과 동시에 실행됨.
비동기 기능을 수행하려면 Callback Function 형태를 이용해야 함. (콜백 지옥의 시작)
브라우저 내 환경은 파일 시스템을 기반으로 하지 않기에, 파일 단위의 전역 기능을 사용할 수 없음.
- 브라우저인지, 독립 환경(Node.js)인지에 따라서 JavaScript 모듈이 하는 역할(파일인가 데이터스트림인가)이 헷갈리는 이유
- CommonJS 는 브라우저 상에서 사용될 모듈 전송 포맷을 따로 정의
  - 개인적으로 여기에서부터 CommonJS 를 잊어버려도 좋다고 생각
코드 중간에 동적 로드가 가능함.

비동기와 AMD

AMD의 약간 진화된 모듈화 (독립성↑)

CommonJS가 JavaScript를 브라우저에서 분리하려는 시도를 함과 달리, CommonJS 내에서 분리된 조직인 AMD는 브라우저 내에서의 JavaScript의 역할에 집중했습니다. AMD(Asynchronous Module Definition)는 네트워크 상에서 JavaScript 모듈을 호출하고 실행하기 위해서는 파일 단위가 아닌 실제 모듈의 정의와 호출 그리고 비동기 처리가 되어야 한다는 점에 집중했습니다.

`define`이라는 함수를 통해, 실제 사용자가 사용할 수 있는 모듈 부분을 파일 자체가 아닌 코드로 별도의 scope로 정의(의미론적으로 전역적으로 한 번 실행하는 부분을 없앤 모듈의 탄생)했습니다. '필요할 때 불러서 쓴다'라는 비동기 모듈 로드가 지원이 되었습니다. 이를 지원하는 AMD의 대표적인 모듈이 RequireJS 라는 모듈이 있습니다. (이거 때문에 또 헷갈림 +1)

CommonJS보다는 독립적인 모듈에 대한 정의를 명확히 했습니다. 하지만 이 또한 빌드 및 번들링 시, 전체 파일에 대한 패키징을 실행하기 때문에, 여전히 결과물의 파일 사이즈는 거대할 수 밖에 없었고 클라이언트 입장에서는 여전히 부담스러운 모듈이었습니다.

- 사실 의미론적인 성장... (옛다 받아라 파일 전체)

모듈 패턴의 진화 UMD

Commonjs, AMD 너네 그만 싸워

UMD(Universal Module Definition)는 CommonJS(서버사이드 우선)와 AMD(브라우저 우선)를 통합하기 위한 일종의 디자인 패턴으로 만들어졌습니다. Webpack 이나 Rollup.js 등 번들러를 통해 JavaScript 모듈을 UMD 형태로 빌드하면, 아래와 같은 즉시 실행 함수(IIFE)가 코드의 맨 처음에 위치하게 됩니다.

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['exports', 'b'], factory);
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    // CommonJS
    factory(exports, require('b'));
  } else {
    // Browser globals
    factory((root.commonJsStrict = {}), root.b);
  }
}(this, function (exports, b) {
  //use b in some fashion.

  // attach properties to the exports object to define
  // the exported module properties.
  exports.action = function () {};
}));

위 코드는 CommonJS, AMD 그 외 기타 window 내 property로 적용되는 함수를 모두 돌릴 수 있는 형태로 제작되었습니다.

그러나 CommonJS가 주도했던 형태의 require를 사용하는 모든 JS 라이브러리(CommonJS, AMD, UMD)는 내부 패키지를 포함하여 빌드되었기에 그대로 배포하면 엄청 무거운지라 Webpack 과 같은 Bundler와 코드 크기를 줄여주는 Minifier 가 필수적으로 따라다녀야했죠.

- three.js 를 사용하였던 필자는 three.js 를 통해 UMD를 처음 접함 (three.module.js / 번들러 Rollup.js)

일단 여기서 1탄은 일단락 합니다. (Classic JavaScript)

여기까지는 require를 쓰는 JavaScript 였구요.

빼먹은 내용 중에서 JavaScript 특성에 v8 Engine, JIT Compile, 그리고 ECMA 의 ES3 표준을 따랐던 ActionScript(Flash) 등이 있겠지만 여기 내용도 길어서 어느 부분에 끼워 넣을까 고민중입니다.

JS 역사 타임라인은 별도로 작성해다가 올려볼께요.

# 수정이 많이 필요한 포스트

# 글은 나중에 정리 좀 해볼께요

다음 2탄에서는 Modern Javascript 에 대해 설명해보려합니다.

꼭 알아두면 좋은 VSCode 단축키 모음

kgenots — Fri, 25 Nov 2022 19:48:45 +0900

VSCode 단축키 모음

세상엔 여러 개발자가 있습니다. 타자 속도 영문 100타의 독수리 타법을 구사하는 개발자도 있고 500타는 기본인 개발자도 있습니다. 어떤 개발자가 좋은 개발자인지의 기준은 여러가지가 있겠지만, 이번 포스트는 코드 수정 속도의 효율을 올려주는 '단축키' 에 대해 알아보겠습니다.

모든 단축키를 다 작성하지는 않고, 현업에서 제가 많이 쓰는 단축키 모음입니다.

MAC 으로 포스팅하고 있어서 Windows 단축키 체크는 미흡해서 몇 개 못 적었습니다. ㅠㅠ

1. 언제까지 마우스로 폴더를 뒤적거릴건가?

* 프로젝트 내 전체 코드 검색 : command + shift + F (MAC) / ctrl + shift + F (Windows)
* 파일명 검색 : command + P (MAC) / ctrl + P (Windows)

2. 동일한 변수명 또는 글자 바꾸기

동일한 변수명을 바꿀 때, 많은 분들이 코드를 블럭처리하고 오른쪽 클릭을 해서 Refactor 라는 기능을 찾아 사용하는 경우가 많습니다. 특정 언어를 중심으로 Refactor 가 적용되는 경우엔 괜찮지만 JSON이나 XML, TXT 등 데이터 파일을 수정하는 경우엔 어떻게 할건가요?

파일 내 검색 : command + F (MAC) / ctrl + F (Windows)
파일 내 찾아바꾸기 : command + option + F (MAC) / ctrl + H (Windows)
프로젝트 내 검색 : command + shift + F (MAC) / ctrl + shift + F (Windows)
프로젝트 내 찾아바꾸기 : command + shift + H (MAC) / ctrl + shift + H (Windows)
** 검색할 때 대소문자 구분 : 위 커맨드 실행 후 command + option + C (MAC) / alt + C (Windows)

3. 여러 단어 또는 여러 줄 한 번에 수정하기 (멀티커서)

이 기능을 잘 쓰면 코드는 순식간에 수정하고, 오후에 탱자탱자 놀기 가능

우선 멀티커서를 만들기 전에 문자나 단어를 선택, 블록 처리 하는 단축키입니다.

1. 블록 지정 단축키 (= 커서 드래그)

글자 선택 : shift + ← 또는 → (공통)
단어 선택 : 더블클릭 / option + shift + ← 또는 → (MAC)
줄 선택 : command + ← 이후 option + command + → (화살표 반대로 가능)

2. 건너뛰기 단축키

글자 건너뛰기 : ← 또는 → (공통)
단어 건너뛰기 : option + ← 또는 → (MAC) / ctrl + ← 또는 → (Windows)
줄 맨 앞으로, 맨 뒤로 건너뛰기 : command + ← 또는 → (MAC) / home 또는 end (Windows)

3. 멀티커서 만들기

마우스 이용 멀티커서 만들기 : option + Click (MAC) / alt + Click (Windows)
방향키 이용 멀티커서 만들기 : command + option + ↑ 또는 ↓ (MAC) / Windows 까먹음
** 같은 문자 선택으로 멀티커서 만들기 : 블록 지정 (1. 참고) 후 command + D (MAC) / alt + D (Windows)

command + D / alt + D 예시 (출처: vscode docs)

멀티커서를 잘 활용하면, 드라마에서 종종 보던 코딩 속도에 근접(MSG 조금 뿌려서)하게 코드 수정 가능합니다.

여기에 추가했으면 하는 단축키는 댓글로 알려주세요.

써보고 피드백 또는 추가해드립니다.

협업을 위한 VSCode 확장프로그램(Extension) 추천

kgenots — Fri, 25 Nov 2022 18:11:26 +0900

많은 회사에서 유료 IDE를 쓰거나 무거운 Visual Studio를 쓰는 것과 별개로 필자는 개인적으로 VSCode 이용을 추천합니다. 기본 프로그램 자체가 가벼운 측면도 있구, 필요한 툴을 확장(Extension) 프로그램만 설치해주면 되기 때문입니다.

그 중 제가 쓰면서 추천하는 확장 프로그램 몇 개를 들고와 봤습니다.

1. GitLens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

GitLens — Git supercharged - Visual Studio Marketplace

Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerfu

marketplace.visualstudio.com

GitLens는 Git이 세팅되어 있는 프로젝트에서 줄(Line)에 커서를 올리면 언제 누가 수정했는지를 곧바로 알게해주는 확장 프로그램입니다. 해당 작업이 일어난 커밋의 히스토리를 추적해야하는 경우에 유용한 툴입니다.

사용예시:

GitLens 적용 예시

2. indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

indent-rainbow - Visual Studio Marketplace

Extension for Visual Studio Code - Makes indentation easier to read

marketplace.visualstudio.com

indent-rainbow는 들여쓰기의 단계마다 다른 색상으로 표현해주는 확장 프로그램 입니다. 기본 색상은 순서대로 노랑, 초록, 보라, 파랑 순서대로지만, 별도로 커스터마이징이 가능합니다.

python 과 같이 indent(들여쓰기)의 칸수가 맞지 않아서 오류가 나는 경우에는 빨간색으로 표시가 됩니다. indent-rainbow으로 들여쓰기 간격이 맞는지 일일이 체크해야하는 수고로움을 덜 수 있습니다.

사용예시:

indent-rainbow 사용 예시

3. Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Material Icon Theme - Visual Studio Marketplace

Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

marketplace.visualstudio.com

Material Icon Theme는 파일의 확장자 및 이름에 따라 폴더 및 파일의 아이콘을 보기 쉬운 아이콘으로 변경해줍니다.

유사 확장 프로그램으로 vscode-icons 가 있습니다. 글 작성일 기준으로 다운로드 수가 각각 Material Icons Theme(15백만), vscode-icons(12.5백만)으로 취향 차이 정도로 생각하고 좋아하는 걸 쓰면 될 것 같습니다.

사용예시:

Material Icon Theme 적용 전 / 후

4. Color Highlight

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

Color Highlight - Visual Studio Marketplace

Extension for Visual Studio Code - Highlight web colors in your editor

marketplace.visualstudio.com

Color Highlight 는 입력된 색상(rgb, hex 등)을 바로 해당 텍스트에 색상으로 표시해줍니다.

사용예시:

Color Highlight 적용 예시

맥 독(Dock) 뜨는 속도 빠르게 하는 방법

kgenots — Wed, 23 Nov 2022 23:13:00 +0900

맥 Dock 뜨는 속도 빠르게 하는 방법

MacOS를 사용하다보면 화면 아래에 숨겨진 독을 보기 위해 마우스를 화면 아래로 가져다대면 생각보다 한참 있다가 스르륵 하고 열리는 독을 볼 수 있을겁니다. 이를 답답해하는 분들이 있기에 독이 열리는 속도를 빠르게 할 수 있는 몇 가지 해결 방법을 가지고 와 봤습니다.

방법 1. 단축키를 이용해 자동 숨김/보이기 설정

단축키 options + command + D 를 입력하면 화면 아래 가려져 있던 독이 올라오게 됩니다. 또 반대로 숨기는 것도 가능합니다.

방법 2. 터미널을 통해 독 설정값 변경

1. 애니메이션 없이 바로 뜨게 하는 방법

defaults write com.apple.dock autohide-time-modifier -int 0;killall Dock

2. 애니메이션 속도를 빠르게 하는 방법

defaults write com.apple.dock autohide-time-modifier -float 0.15;killall Dock

3. 원래 상태로 복구하는 방법

defaults delete com.apple.dock autohide-time-modifier;killall Dock

Node.js 버전 변경하는 방법 - MAC

kgenots — Wed, 23 Nov 2022 22:39:20 +0900

이 포스트는 npm package 중 n 을 이용합니다.

Mac 에서 동작하는 방법이며, Windows Shell 또는 Git for Windows 에서는 동작하지 않습니다.

node.js 버전 변경하는 방법

Node.js 서버를 통해 이것저것 하다보면 버전의 영향을 많이 받을 수도 있는데...

~~예를 들어, serverless, node-sass, node-gyp 등의 오류를 피해 회피기동을 해야함.~~

로컬에서 NodeJS 버전 변경을 필요로 하는 경우가 종종 있습니다.

오늘은 n 을 통하여 설치된 Node.js 버전을 변경하는 방법을 알아보도록 합니다.

이미 Node.js 가 설치되어 있는 경우,

이유는 좀 찾아보야겠으나, Homebrew를 통해 /opt/homebrew/Cellar/node/{version}/ 에 Node.js가 설치된 경우, n 과는 호환이 되지 않으므로 기존 Node를 지워줘야 합니다. 제거 방법은 아래 포스팅을 참고해주시기 바랍니다.

기존 Node.js 제거 후 Node.js 홈페이지를 통해 재설치

2022.11.21 - [JavaScript] - Node.js 제거하는 방법 - MAC

Node.js 제거하는 방법 - MAC

1. Node.js 깔끔하게 지우는 방법 Node.js 홈페이지에서 받았을 때, sudo rm -rf /usr/local/lib/node sudo rm -rf /usr/local/lib/node_modules sudo rm /usr/local/lib/dtrace/node.d sudo rm /usr/local/share/man/man1/node.1 sudo rm -rf /usr/local/

parodev.tistory.com

2020.08.08 - [JavaScript] - Node.js 및 NPM 설치하는 방법

Node.js 및 NPM 설치하는 방법

Node.js 웹사이트 접속 Download URL : nodejs.org LTS 버전 : Long Term Support 의 약자 최신 버전보다는 안정화 버전으로 받는 것을 추천 12.18.3 LTS 버전 다운로드 특이한 점이 없으면 Next 클릭클릭 일부 NPM 모

parodev.tistory.com

Node.js 버전 변경하는 방법

1. npm 을 통해 n 을 전역에 설치해줍니다.

sudo npm install -g n

2. 현재 설치된 Node.js 버전 확인 ( 명령어: sudo n ls )

sudo n ls

3. 추가로 필요한 Node.js 버전 설치 ( 명령어: sudo n install {버전} )

sudo n install 14 # 14버전 중 가장 최신버전
sudo n install 16 # 16버전 중 가장 최신버전

1~3 과정 요약

4. 활성화시킬 Node.js 버전 변경 ( 명령어: sudo n → 엔터 )

sudo n

키보드의 화살표를 움직여 활성화시킬 Node.js 버전을 선택해줍니다.

주요 명령어 정리

모든 명령어 앞에 sudo 를 붙이는 이유는 Node.js 를 관리하는 /usr/local/ 경로에 접근하고 파일을 설치, 수정, 삭제하기 위해서입니다.

sudo n : 활성화시킬 Node.js 버전 변경
sudo n ls : 현재 설치된 Node.js 버전 확인
sudo n install {버전} : 특정 버전의 Node.js 설치
sudo n rm {버전} : 특정 버전의 Node.js 제거

기타 궁금한 명령어는 n --help 를 통해 확인할 수 있습니다.

Node.js, NPM 제거하는 방법 - MAC

kgenots — Mon, 21 Nov 2022 22:00:07 +0900

node.js 제거하는 방법

1. Node.js 깔끔하게 지우는 방법

Node.js 홈페이지에서 받았을 때,

sudo rm -rf /usr/local/lib/node
sudo rm -rf /usr/local/lib/node_modules
sudo rm /usr/local/lib/dtrace/node.d
sudo rm /usr/local/share/man/man1/node.1
sudo rm -rf /usr/local/share/doc/node
sudo rm -rf /usr/local/share/systemtap/tapset/node.stp
sudo rm -rf /usr/local/include/node
sudo rm /usr/local/bin/node
sudo rm /usr/local/bin/npm
sudo rm /usr/local/bin/npx

Homebrew 에서 받았을 때,

brew uninstall node
brew doctor
brew cleanup

설치된 NPM 캐시, 환경파일까지 제거하려면,

sudo rm -rf /Users/$USER/.npm
sudo rm -rf ~/.npm

2. Node.js 설치 및 제거 여부 확인 방법

// node 버전 확인
node -v		//버전표기(x.x.x)가 나오면 설치된 상태
        	//command not found: node 가 나오면 제거된 상태
            
// npm 버전 확인
npm -v		//버전표기(x.x.x)가 나오면 설치된 상태
        	//No such file or directory 가 나오면 제거된 상태

맥 화면캡처 시, 창 그림자 제거 방법

kgenots — Sat, 19 Nov 2022 17:03:47 +0900

화면캡처 그림자 제거 방법

MacOS 내에서 창 캡쳐를 하면서 생겼던 그림자가 포함되어 찍히는 문제를 해결하는 방법을 알아보도록 하겠습니다.

맥에서 창 캡처 방법

우선, 맥에서 창 캡처(스크린샷)를 하는 방법은,

Shift + Command + 4 키를 누릅니다. 이 상태에서 Space bar 를 누르면 마우스가 카메라 모양으로 바뀝니다.

이 상태에서 원하는 창에 올려두고 Enter 를 누르면 창이 캡처가 됩니다.

그림자 유무 차이 비교

그림자 있을 때(좌), 그림자 없을 때(우) 비교

왼쪽 캡처본은 별도의 설정없이 창 캡처를 했을 때의 결과물입니다. 이 경우, 창 밖의 그림자 부분까지 포함하여 캡처가 됩니다. 반대로 오른쪽 캡처본은 그림자 제거 설정을 하였기에, 창 밖의 그림자를 제외하고 창 부분만 깔끔하게 캡처가 된 모습입니다.

창 캡처 시, 배경은 투명 처리된 상태입니다.

창 크기가 다른거 아닌가요?

위 화면에서 그림자를 포함한 캡처 이미지가 작아보이지만, 실제로는 창의 크기는 같고, 여백을 포함한 결과물이 이미지의 크기가 큽니다.

그림자 제거 방법

그림자 제거 활성화

'터미널' 앱을 열고 아래 명령어를 순서대로 실행해줍니다.

아래 명령어를 실행해면 아무 메세지 나오지 않지만 적용이 된 상태입니다.

defaults write com.apple.screencapture disable-shadow -bool true
killall SystemUIServer

그림자 제거 비활성화 (원상복구)

위에서 명령어를 실행했던 것처럼 '터미널' 앱을 열고 아래 명령어를 순서대로 실행해줍니다.

defaults write com.apple.screencapture disable-shadow -bool false
killall SystemUIServer

맥 자동실행 항목 설정 방법

kgenots — Sat, 19 Nov 2022 14:11:29 +0900

맥 자동실행 항목 설정 방법

MacOS 부팅 시, 사용자의 기호에 따라 자동 실행이 필요한 앱들이 있습니다.

AlDente(배터리 관리 프로그램),

Rectangle(화면 분할 단축키 설정),

Karabiner(키보드 설정),

카카오톡(?)

위와 같은 잘 만들어진 앱들은 앱 내부 설정으로 대부분 자동으로 등록되는 경우가 많습니다.

하지만 그렇지 않은 앱들도 종종 있는데요.

대표적으로 제가 사용중인 TermHere(파인더 현재 경로에서 터미널 열기) 이 있습니다.

이런 경우, 로그인 항목을 직접 관리해 줄 필요가 있습니다.

로그인 항목 설정하는 방법

Spotlight 검색 창

Command + Space bar 또는 우상단 검색 아이콘을 눌르고,

Spotlight 검색을 열어 '시스템 설정'을 입력하고 들어가줍니다.

시스템 설정 창

위와 같이 시스템 설정 창이 뜬 후,

왼쪽 상단 검색에서 '로그인 항목' 을 입력해줍니다.

- Spotlight 검색에서 '로그인 항목' 검색해도 바로 들어가지네요.

로그인 항목 설정 창

로그인 시 열기 항목에서 + 또는 - 버튼을 통해 응용 프로그램을 추가 또는 제거할 수 있습니다.

이 포스트는 MacOS Ventura(벤투라) 13.0.1 버전에서 작성되었습니다.

NPM 사용하지 않는 모듈 일괄 제거하는 방법 (depcheck)

kgenots — Thu, 8 Sep 2022 23:35:40 +0900

사용하지 않는 npm 모듈 제거 방법

프로젝트를 장기간 진행하다보면, node module 을 설치하고 지우고를 반복하는 경우가 생깁니다. require 나 import 를 통해 node module 사용 부분은 지우기 편하지만, 설치 당시에 추가된 package.json 내부의 dependencies와 devDependencies 에서는 지우지 못해 남는 경우가 종종 생기곤 합니다. depcheck를 이용하면 미사용상태로 dependencies와 devDependencies 에 적혀있는 node module을 확인할 수 있습니다.

주의사항으로 lint, prettier 등 runtime 코드에서 호출되지 않고 개발을 위해서만 사용되는 module도 사용되지 않는 모듈에 포함될 수 있으니 숙련되기 전까지는 모르는 모듈 제거는 삼가하는 것을 추천합니다.

사용방법

npm install -g depcheck
depcheck

또는

npx depcheck

참고

https://github.com/depcheck/depcheck

GitHub - depcheck/depcheck: Check your npm module for unused dependencies

Check your npm module for unused dependencies. Contribute to depcheck/depcheck development by creating an account on GitHub.

github.com

NPM package.json 순서 정렬하는 방법 (sort-package-json)

kgenots — Thu, 8 Sep 2022 22:31:01 +0900

package.json 순서 정렬 방법

정리만 잘해도 코드의 품질은 올라갑니다.

package.json 의 dependencies 나 devDependencies 가 알파벳 순서대로 정리하고 싶을 때, package.json의 키 순서가 섞여있어서 license 등 특정 키를 찾기 어려워 할 때 터미널에서 npx sort-package-json만 입력해주면 해당 디렉토리 내 package.json 내용이 정리가 됩니다.

사용방법

npx sort-package-json

package.json 파일이 존재하는 폴더에서 터미널을 열고 위 명령어를 실행합니다.

참고

https://github.com/keithamus/sort-package-json

GitHub - keithamus/sort-package-json: Sort an Object or package.json based on the well-known package.json keys

Sort an Object or package.json based on the well-known package.json keys - GitHub - keithamus/sort-package-json: Sort an Object or package.json based on the well-known package.json keys

github.com

VSCode 터미널 관리자 권한으로 열기

kgenots — Tue, 30 Aug 2022 00:25:15 +0900

VScode 내 Terminal을 이용하다가 권한이 부족하여 'ERROR: Could not install packages due to an OSError: [WinError 5] 액세스가 거부되었습니다' 와 같은 에러가 뜨는 경우가 종종 발생합니다. 이 경우, VSCode 를 관리자 모드로 열면 해결이 됩니다.

관리자 모드로 열기 (한 번)

'시작' - 'Visual Studio Code' 검색 후 오른쪽 클릭 후 '관리자 권한으로 실행'을 클릭하여 VSCode 를 실행합니다.

VSCode 관리자 권한으로 실행

관리자 모드로 열기 (열때마다)

VSCode를 관리자 모드로 매번 실행하기 위해서는 VSCode 실행 파일의 속성을 수정해야합니다. 실행파일은 위 오른쪽 클릭 메뉴에서 '관리자 권한으로 실행' 밑의 '파일 위치 열기'를 클릭하면 VSCode 파일 위치가 있는 탐색기가 실행됩니다.

VSCode 파일 위치 열기

이후 Visual Studio Code 실행 파일을 오른쪽 클릭 후, '속성'을 클릭합니다.

VSCode 속성 열기

이후 '호환성' 탭에서 아래 '관리자 권한으로 이 프로그램 실행' 에 체크표시한 후 적용을 눌러주면 이후 VSCode 실행 시 관리자 권한으로 실행되는 것을 확인할 수 있습니다.

VSCode 관리자 권한으로 이 프로그램 실행

Git 기본 명령어 모음 (기초)

kgenots — Thu, 18 Aug 2022 01:10:12 +0900

Git 기본 명령어 모음 1

기초 영역 (only. Local Repository)

git init ${폴더명}

현재 디렉토리를 Local Repository 로 지정합니다.

${폴더명} 은 작성하지 않으면 . 으로 인식하여, 현재 디렉토리를 Local Repository 로 만듭니다.

${폴더명} 작성 시, 현재 디렉토리 내 ${폴더명} 디렉토리를 생성하며 해당 디렉토리를 Local Repository 로 만듭니다.

Local Repository 로 인식된 디렉토리는 .git 숨김 폴더가 생성됩니다. 또한, 일반적으로 master 브랜치가 생성됩니다.

Tip1. git init = git init .

Tip2. .git 폴더가 안 보일 때, Mac의 경우 Terminal 에서 ls -al 로 확인, Windows의 경우 cmd 에서 dir /a 로 확인합니다.

git status

파일의 상태를 확인합니다.

파일의 상태는 이전 포스트인 'Git 이란? Git 사용방법 알아보기 (기초)' 에서 확인할 수 있습니다.

해당 명령어 실행 시, 터미널 아래부분부터 Untracked Files, Changes not staged for commit, Changes to be committed가 존재합니다.

Untracked Files 에는 Untracked - New Files 상태, 즉 새로 생성된 파일들이 존재합니다.
Changes not staged for commit 에는 Tracked - Modified 상태, 즉 이전에 commit 되었던 파일 중 현재 작업 디렉토리에서 modified, deleted 된 파일들이 존재합니다.
Changes to be committed 에는 Tracked - Staged 상태, 즉 git add ${파일명 또는 폴더명} 또는 git rm ${파일명 또는 폴더명} 명령어로 실행된 파일들이 존재합니다.

git commit 명령어가 작동한 이후에는 Tracked - Staged 상태의 파일들이 작업 내역으로 반영되어 git status 에서는 보이지 않는 Tracked - Unmodified 상태가 됩니다.

git add ${파일/폴더명}

git status 명령어를 통해 확인한 파일 중 Untracked, Tracked - Modified 상태의 파일을 Tracked - Staged 상태로 변경하는 명령어 입니다.

Tip1. git add . 실행 시 현재 폴더 내 Untracked, Tracked - Modified Files 를 Tracked - Staged 로 변경합니다.

Tip2. git add 의 반대는 git reset

Tip3. git rm 은 git add의 반대가 아닌 Tracked - Unmodified 상태인 파일을 '제거'된 형태로 Tracked - Staged 상태로 변경합니다. (해당 파일 제거를 Commit 에 반영할 것임을 예고)

git diff ${파일/폴더명}

Local Repository 내에서 동일한 파일의 변경 전 내용과 변경 후 내용을 비교하여 보여줍니다.

저는 개인적으로 git diff 명령어는 터미널에서 보기 힘들어 SourceTree, GitHub For Desktop, GitKraken 등 GUI 프로그램을 사용합니다.

Tip1. git diff 만 실행 시, 변경 점이 존재하는 모든 파일을 부분적으로 비교하여 보여줍니다.

git commit -m "${커밋메세지}"

Tracked - Staged 상태의 파일들을 commit 에 반영합니다.

이 때 commit 은 고유 해시 아이디를 지니게 되며, 앞에서 5~7자리 정도만 가지고 커밋을 추적할 때 많이 사용합니다.
-m 옵션은 보통 제목 줄을 적을 때 사용하며, git commit 명령어만 입력하면 Text Editor 가 실행이 됩니다.

Editor 내에서 commit message 를 작성하여 저장 후 끝내기를 하면 입력된 commit messege 와 함께 commit이 실행됩니다. 커밋 메세지를 적는 방법은 다양하지만 대표적으로 깔끔하게 커밋 메세지를 작성하는 방법은 아래와 같습니다.

1. 첫번째 줄은 이슈번호 및 현상에 대해 간략히 설명함
2. 두번째 줄은 공백으로 남길 것!!
3. 세번째 줄 이후는 - 로 시작하여 상세 설명을 기입함

ex.
EX-02 오탈자를 수정한다

- stagg 를 stage 로 변경
- 이걸 틀리다니
- 허허

이상 Local Repository 에서 사용하는 주요 git 명령어 모음이었습니다.

추가로! git commit 이 실행된 커밋을 제거하고 과거로 돌아가는 방법

git reset HEAD^

위 명령어는 git commit 이 실행된 이후에 commit을 제거하고 과거 지점으로 돌아갈 때 사용하는 방법입니다.
Repository 에서는 각 브랜치의 마지막 커밋인 HEAD 라는 친구가 있습니다. 일반적으로 git reset은 git add로 Staged 상태로 들어간 내용은 Untracked 또는 Modified 상태로 바꿔줌을 의미했지만, 이미 생성된 커밋의 경우 git reset HEAD^ 를 통해서 해당 커밋을 지우고 Untracked 또는 Modified 상태로 변경할 수 있습니다. 같은 명령어로 git reset HEAD~ 를 사용할 수 있는데 ~ 뒤에 숫자를 붙임으로써 생성된 commit 여러 개를 시간 역순으로 동시에 지우고 Untracked 또는 Modified 상태로 나타낼 수 있습니다.

Ex. git reset HEAD~4 (HEAD 에서부터 4번째 커밋으로 돌아감)

P.S. 아직 git push는 얘기도 안 했다.

P.S. git commit 하고서 git reset HEAD^실행하고 커밋 사라졌다고 울지 말기

Git이란? Git 사용방법 알아보기 (기초)

kgenots — Wed, 17 Aug 2022 08:00:39 +0900

Git 알아보기

Git 이란?

형상 관리 도구

Git은 형상 관리 도구 (Configuration Management Tool) 중에 하나입니다. 형상 관리 도구는 다른 말로 버전 관리 도구라고도 합니다. 형상 관리 도구는 기본적으로 과거 작업 내역과 현재 작업 내역, 그리고 변경점을 확인할 수 있도록 만들어진 도구입니다. 소프트웨어 개발에 필요한 소스코드를 효과적으로 관리할 수 있게 해주는 Free Software 중 하나입니다. Linux를 만들었던 리누스 토발즈(Linus Torvlads)에 의해 만들어졌습니다.

SVN와 Git의 차이점

SVN은 Git 이전까지 소스코드를 관리하는 대표적인 형상관리툴이었습니다. SVN 과 Git의 대표적인 차이점은 SVN은 중앙 서버 저장소에서 소스코드와 히스토리를 저장하는 형태이며, Git은 여러 서버 저장소와 여러 로컬 저장소에 분산해서 저장할 수 있다는 점입니다. 이를 다른 말로 분산형 관리 시스템이라고 합니다. 서버가 고장이 나더라도 로컬 저장소를 통해 중앙 저장소를 복구할 수 있습니다. Git은 소스코드 사본을 로컬에서 관리할 수 있기 때문에 로그를 파악할 때마다 인터넷을 통해 저장소에 접근해야하는 SVN 과는 달리 시간 효율측면에서 이득이 됩니다.

Git 사용 전에 알아야 할 것

local, remote 및 origin, upstream 의 이해

Git을 쓰기 전에 local, remote 를 모르면 Git을 쓸 수가 없습니다. 우선, local은 쉽게 말해 내 컴퓨터 안의 폴더입니다. Local Repository로 불리며, 저장소(Repository)로 인식되는 폴더(Directory)는 .git 이라는 숨김 폴더를 가지고 있습니다. local 환경만으로는 네트워크 통신이 필요하지 않은 상태입니다. 다음으로, remote는 쉽게 말해 원격 서버에 있는 저장소입니다. Remote Repository로 불리며, 소스코드를 저장하고 공유할 수 있는 원격 저장소를 제공하는 대표적인 서비스로 Github, GitLab, Bitbucket 등이 있습니다. remote 내에서도 내가 저장하고 관리하는 원격 저장소(origin) 과 여러 명이 관리하는 원격 저장소(upstream) 가 있습니다. 다시 말해, remote(upstream) 는 소스코드 원형이 기록된 서버 저장소, remote(origin) 는 원형을 복제해다가 만든 내 서버 저장소, local 은 remote(origin)을 토대로 내 PC에 저장해 놓은 저장소로 이해하시면 됩니다.

.git 폴더는 git init 명령어로 생성이 되며, remote 에 생성된 저장소(Repository)를 git clone 명령어를 통해 Local에 내려받았을 때에도 생성됩니다.

Git Status (파일 상태)

출처:https://git-scm.com/book/ko/v2/Git의-기초-수정하고-저장소에-저장하기

작업 중인 파일은 local에서 4가지의 상태를 나타냅니다. 위에 표기된 상태로는 Untracked, Unmodified, Modified, Staged 로 나누지만, 디테일한 설명을 위해서 각각 Untracked - New Files, Tracked - Unmodifed, Tracked - Modified, Tracked - Staged 하도록 하겠습니다.

폴더에 파일이 새로 생성되는 경우 Untracked - New Files 상태를 의미하며, Commit을 한 번이라도 실행하여 추적이 가능한 상태를 Tracked - Unmodified 상태라고 합니다. Working Directory 에서 파일을 수정이나 제거하는 경우 Tracked - Modified 상태로 변경이 됩니다. Untracked - New Files 및 Tracked - Modified 상태에서는 git add 명령어를 통해 Git에 반영 대기중인 Tracked - Staged 상태로 만들 수 있습니다. 이 상태에서 git commit 명령어를 통해 Git 저장소에 히스토리인 Commit 으로 반영되며, 반영된 파일들은 다시 Tracked - Unmodifed 상태가 됩니다.

Git Branch (브랜치)

A라는 작업과 B라는 작업을 동시에 작업하려 할 때, 어느 것을 먼저 작업하고 백업하고 다시 불러오고 할 것이 아닌 Branch 를 이용하면 여러 작업이 가능합니다. 독립적인 작업 공간을 만들 수 있다는 얘기입니다. 마지막 작업 지점인 HEAD 에서 A라는 Branch를 생성 및 작업을 하고 Commit을 한 이후(HEAD는 A 마지막 작업 지점으로 변경됨)에 작업 이전인 원래의 HEAD 위치로 돌아와서 B라는 Branch를 생성 및 작업을 하면 A 작업 내역과 B 작업 내역을 동시에 확인할 수 있습니다. 두 개의 작업한 Branch A와 Branch B를 하나의 Branch로 합치는 과정을 Merge라고 합니다. 필요에 따라 Branch A 에서 B를 가져와서 Merge를 할 수 있고, Branch B 에서 A를 가져와서 Merge 할 수도 있습니다.

Git 명령어에 대한 자세한 설명과 헷갈릴만한 내용들은 추가 포스트로 작성 예정입니다.

위 내용 중 어려운 부분은 코멘트 남겨주시면 답변드리겠습니다.

정렬 알고리즘 #4. 빗질 정렬 (Comb Sort)

kgenots — Fri, 12 Feb 2021 21:20:24 +0900

설명

빗질 정렬은 버블 정렬의 답답함을 해결하기 위해 고안된 비교적 간단한 정렬이다. 정렬을 거북이와 토끼에 비유를 했는데, 버블 정렬을 거북이라 비유하고, 해결하기 위한 방법으로 거북이를 토끼처럼 만드는 것으로 생각하였다

기본 설명

1. 기본 과정은 버블 정렬 (Bubble Sort) 와 동일하다

2. 특정한 감소량 (shrink factor) 를 통해 차이 (Gap)을 줄여가며 버블 정렬을 실행한다

3. shrink factor는 1.3이 가장 이상적이라는 소문이 있으나, 가장 빠른 수치로 결정하면 됨

4. Gap 이 결정되면 해당 대상과의 Gap 만큼 차이가 나는 노드의 크기를 비교하여 버블 정렬을 수행함

시간 복잡도

시간복잡도는 O(n^2)으로 버블 정렬을 개선했다고는 하나, shrink factor를 적절하게 잘 선택해야하는 이슈가 있으며, 역정렬을 행할때는 버블 정렬과 똑같은 시간복잡도를 가진다. 때문에 이게 버블 정렬보다 나은가는 shrink factor라는 변수와 전체 데이터셋이 잘 맞아야하기 때문에 효율적인지는 의문이다.

코드

void combSort(int *data, int n)
{
  float shrink = 1.3;
  int j, tmp, gap = n, swapped = 1;
 
  while(gap > 1 || swapped)
  {
    if ((gap/=shrink) < 1) gap = 1;
    for(j = swapped = 0; j < n-gap; j++)
    {
      if (data[j] <= data[j+gap]) continue;
     
      swapped = 1;
      tmp = data[j]; data[j] = data[j+gap]; data[j+gap] = tmp;
    }
  }
}

C / C++ 에서 int main() 과 int main(void) 의 차이점

kgenots — Wed, 3 Feb 2021 00:14:49 +0900

이번 시간에는 int main()과 int main(void), 그리고 void main()의 차이점에서 설명하겠습니다.

// 1번 항목
int main()
{
	return 0;
}

// 2번 항목
int main(void)
{
	return 0;
}

위에 작성한 1번 항목과 2번 항목의 차이점은 무엇일까요?

사실 C나 C++에서 모두 작동합니다. 다만, C에서는 매개변수로 void가 존재하는 것, 즉 int main(void)가 매개변수를 넣지 않고서만 작동을 하기 때문에 기술적으로 더 나은 것으로 판단합니다. C에서는 함수의 매개변수를 지정하지 않으면 이는 여러 매개변수를 사용하거나, 매개변수 없이 모두 사용가능함을 의미합니다.

예를 들어,

// 1번 항목
void mat() { }
int main(void)
{
	mat(10, "ff", "FGF");
    	return 0;
}

// 2번 항목
void mat(void) { }
int main(void)
{
	mat(10, "ff", "FGF");
    	return 0;
}

위의 1번 항목과 2번 항목을 비교해봅시다.

1번 항목에서는 C에서 컴파일이 가능하지만, C++의 경우 컴파일 오류가 발생합니다.

2번 항목에서는 C와 C++ 모두 컴파일 오류가 발생합니다.

이처럼, C에서 int main()은 여러 매개변수를 사용하여 호출할 수 있지만, int main(void)는 매개변수없이만 호출이 가능하다는 점입니다. 대부분의 경우 차이가 없지만 "int main(void)"가 C에서 권장되는 방법입니다.

남은 항목은 void main() 이겠죠!

사실 void main() 혹은 main()을 쓰면 오류가 나는 것은 아닙니다. C와 관련된 표준 C99에서는 정상적인 실행의 경우 main 함수는 int 0을 return 해야한다고 알려줍니다. 컴파일러가 허용한다고는 하지만, C와 C++을 쓰는 프로그래머라면 이건 당연히 해야하는 일 정도로 생각하시면 될 것 같습니다. C++의 경우 명시적인 return 문을 포함할 필요는 없습니다. 이 경우 반환되는 값은 0이며, 실행 성공을 의미합니다. 하지만 습관적으로라도 return 0; 는 명시적으로 꼭 쓰는게 동료 개발자와의 혼동을 없애는 것일지도 모릅니다.

C 언어 기초 (C Language)

kgenots — Mon, 1 Feb 2021 22:47:51 +0900

C는 절차적 프로그래밍 언어입니다. Dennis Ritchie가 운영체제를 작성하기 위한 시스템 프로그래밍 언어로 개발했습니다. C 언어 주요 기능은 메모리에 대한 저수준 액세스를 담당하고 있으며, C언어를 운영체제 또는 컴파일러 개발과 같은 시스템 프로그래밍에 적합합니다.

이후의 많은 언어는 C 언어에서 직접적으로 혹은 간접적으로 구문/기능을 차용했습니다. Java의 구문과 마찬가지로 PHP, JavaScript 및 기타 여러 언어는 주로 C 언어를 기반으로 합니다. C++는 C 언어의 상위 집합입니다.

C 프로그램 구조

C 프로그램의 구조는 다음과 같습니다.

C 언어의 기본 구조

1. include Header : C 언어로 작성되 프로그램에서 가장 중요한 요소는 헤더 파일을 포함하는 것입니다. 헤더 파일은 여러 소스 파일간에 공유할 C 함수 선언 및 매크로를 정의합니다. Header 파일의 확장자는 .h입니다.

* 특정 헤더 파일

- stddef.h : 몇 가지 유용한 유형과 매크로를 정의합니다.

- stdint.h : 정확한 정수 유형을 정의합니다.

- stdio.h : 입력과 출력 기능을 정의합니다. (키보드, 마우스 등 IO)

- stdlib.h : 숫자 변환 함수, 랜덤 생성기, 메모리 할당

- string.h : 문자열 처리 함수를 정의합니다.

- math.h : 일반적인 수학 함수를 정의합니다.

#include < 대상 >

2. 메인 메서드 선언 : 다음 부분은 main() 함수를 선언하는 것입니다.

int main()
{
}

3. 변수 선언 : 함수에서 사용할 변수를 나타냅니다. 선언을 하지 않고는 변수를 사용할 수 없습니다. 또한 변수는 함수에서 사용 전에 선언되어야 합니다.

int main()
{
	int a;
}

4. 기타 메서드 선언 : 컨트롤, 검색, 정렬, 프린트 등을 표현합니다.

int main()
{
	int a;
    
    printf("%d", a);
}

5. Return 문 : C 프로그램의 마지막 부분은 return 문입니다. return은 함수에서 값을 반환하는 것을 나타냅니다. 이 return 문과 반환 값은 함수의 반환 유형에 따라 다릅니다. 예를 들어 반환 유형이 void면, return 문이 없기도 합니다. int, char 등에 따라 해당 유형으로 반환하여야 합니다.

int main()
{
	int a = 5;
    print("%d", a);
    return 0;
}

다음은 C프로그래밍의 종합 예시입니다. 먼저 따라해보세요.

#inclue <stdio.h>
int main(void)
{
	printf("Hello World");
    return 0;
}

Bash 폴더 내 파일 전부 옮기기 (mv 명령어)

kgenots — Tue, 19 Jan 2021 19:08:33 +0900

mv /var/www/* /recovery/wwwrecovery/

위 내용은 /var/www 폴더 내부에 있는 파일 모두를 /recovery/wwwrecovery/ 로 이동한다는 내용입니다.

* 주의할 점

source에 해당하는 경로는 파일 레벨에서 *를 붙여주며,

destination에 해당하는 경로는 폴더명 뒤에 / 까지 확실히 붙여주어야 합니다.

윈도우10 제품 시리얼 키(ProductKey) 확인하는 방법

kgenots — Tue, 19 Jan 2021 19:08:04 +0900

Regedit 에서 확인하기

1. 시작 → 실행에서 "regedit" 를 입력하고 실행합니다. ( '실행' 단축키 : Windows Key + R )

2. 레지스트리 편집기에서 다음 순서대로 경로를 찾습니다.

HKEY_LOCAL_MACHINE
	└ SOFTWARE
		└ Microsoft
			└ Windows NT
				└ CurrentVersion
					└ SoftwareProtectionPlatform

3. "SoftwareProtectionPlatform" 폴더 클릭 후, "BackupProductKeyDefault" 의 데이터가 Windows의 제품키 입니다.

4. 아래의 주소값을 복사해서 레지스트리 편집기 주소창에 입력하셔도 됩니다.

컴퓨터\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\SoftwareProtectionPlatform

Node.js 및 NPM 설치하는 방법

kgenots — Sat, 8 Aug 2020 13:36:23 +0900

Node.js 웹사이트 접속

Download URL : nodejs.org

LTS 버전 : Long Term Support 의 약자

최신 버전보다는 안정화 버전으로 받는 것을 추천

12.18.3 LTS 버전 다운로드

특이한 점이 없으면 Next 클릭클릭

일부 NPM 모듈의 경우 C/C++ 컴파일러를 사용하기 때문에, Necessary tools와 Chocolatey를 자동으로 설치하도록 체크버튼을 클릭 후 Next!

(옛날에는 하나씩 다 설치했는데, 세상 많이 좋아짐)

체크했던 추가 툴 설치 화면

설치가 끝나고나면 cmd 창에 Enter를 누르라는게 나오는데 계속 누르면 됨 (Powershell로 전환될 수도 있음)

Git 팁 - Hook commit-msg 한글 문자열 길이 적용하기

kgenots — Fri, 31 Jul 2020 18:43:56 +0900

String Length 오류가 발생하는 원인

일반적으로 PC에서 동작하는 Bash에서 Bash 문자열 길이 구하기는 한글 문자열 길이를 인식하는데 문제가 없지만, Git Hook에 해당하는 Bash Script는 한글을 UTF-8로 인식하기 때문에 글자수가 많게 출력된다. 때문에 commit-msg를 한글로 입력하게 정책이 세워진 팀이나 단체라면 의도치 않게 제한된 문자열 길이를 늘려 사용하고는 한다.

하지만 Script 내, LC_CTYPE 변수에 en_US.utf8 을 적용한 뒤에 길이 구하는 로직을 적용하면 한글을 포함하여 정확한 문자열 길이가 출력할 수 있다.

대응 코드

#!/bin/sh
#
# An example hook script to check the commit log message.
# Called by "git commit" with one argument, the name of the file
# that has the commit message.  The hook should exit with non-zero
# status after issuing an appropriate message if it wants to stop the
# commit.  The hook is allowed to edit the commit message file.
#
# To enable this hook, rename this file to "commit-msg".

# Uncomment the below to add a Signed-off-by line to the message.
# Doing this in a hook is a bad idea in general, but the prepare-commit-msg
# hook is more suited to it.
#
# SOB=$(git var GIT_AUTHOR_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
# grep -qs "^$SOB" "$1" || echo "$SOB" >> "$1"

# This example catches duplicate Signed-off-by lines.
LC_CTYPE=en_US.utf8

filename="$1"
# copy=$(tempfile -p gitco)
# cat $filename >> $copy
lineno=0

error() {
    echo "{"
    echo "    Error : hooks/commit-msg"
    echo "    Message : INAPPROPRIATE LOG MESSAGE FORMATTING"
    echo "    Detail : $1!"
    echo "}"
    # echo ""
    # echo "Original checkin message has been stored in '_gitmsg.saved.txt'"
    # mv $copy '_gitmsg.saved.txt'
    exit 1
}

while read -r line
do
    # Ignore comment lines (don't count line number either)
    [[ "$line" =~ ^#.* ]] && continue
    v_utf8=$line

    let lineno+=1
    length=${#v_utf8}

    # Subject line tests
    if [[ $lineno -eq 1 ]]; then
        [[ $length -gt 50 ]] && error "Limit the subject line to 50 characters // Current : $length"
        [[ "$line" == *. ]] && error "Do not end the subject line with a period"
    fi

    # Rules related to the commit message body
    [[ $lineno -eq 2 ]] && [[ -n $line ]] && error "Separate subject from body with a blank line"
    [[ $lineno -gt 1 ]] && [[ $length -gt 72 ]] && error "Wrap the body at 72 characters"
done < "$filename"
# rm -f $copy
exit 0

위의 코드는 커밋할 때, 메세지에 대해

제목 줄은 50자 이하,

바로 다음 줄은 공백이 존재 필수,

본문은 각 줄마다 72자 이하

로 입력을 해야한다는 내용이다.

Bash 문자열 길이 구하기

kgenots — Fri, 31 Jul 2020 18:19:16 +0900

Shell Script 문자열 길이 구하는 방법

변수 선언

$ VAR="Bash Scripting"

문자열 길이 구하는 명령어

${#변수명}\

$ echo "${#VAR}"
14

expr length "$변수명"

$ expr length "$VAR"
14

awk '{print length}'

$ echo $VAR | awk '{print length}'
14

Android Studio ADB 설정 및 환경변수 세팅

kgenots — Sat, 25 Jul 2020 00:59:55 +0900

안드로이드 스튜디오(Android Studio)를 설치하고 난 후 거의 무조건 거쳐야하는 설정이 있다.

바로 ADB 환경변수 설정이다. 테스트폰을 연결해서 디버그를 한다거나 하면 무조건 실행하게 되는데, 환경변수를 미리 설정하지 않으면 매우 불편한 상황이 벌어진다.

ADB란?

ADB는 Android Debug Bridge의 약자로 앱의 설치 및 디버깅과 같은 다양한 기기 작업에 도움이 되며, 기기에서 다양한 명령어를 실행하는데 사용할 수 있는 Unit Shell에 관한 명령어이다.

기본적으로 Android SDK가 설치되면 해당 폴더 내에 'platform-tools'라는 폴더에 안에 위치하고 있다. Terminal에서 매번 해당 폴더를 찾아가 adb shell 명령어를 칠 수 없는 노릇. 그냥 Terminal을 열고 'adb shell'을 입력하면 다음과 같이 나온다.

해당 문제를 해결하기 위해서는 시스템 환경 변수에 adb 경로를 등록해주어야한다.

ADB 환경변수 설정

윈도우키 + 'R' 을 누르면 실행창이 뜨는데, 여기에 'sysdm.cpl'을 입력한다

이후 '고급' 탭 → 우측 하단 '환경 변수(N)'을 눌러준다

다음과 같은 창이 뜨면, 시스템 변수(S) 항목에서 Path를 찾은 다음, 아래쪽 '편집' 버튼을 눌러준다

새로 만들기를 누른 뒤, '{Android SDK 경로}\platform-tools' 경로를 입력해준다.

{Android SDK 경로}의 자세한 경로는 다음 항목에서 확인

다 입력하고 '확인' 버튼을 꾹꾹 눌러서 나간 뒤 Terminal을 열어 ADB가 작동하는지 확인해보자

Android Studio에서 SDK 경로 확인하기

Android Studio 를 열고 File → Settings 를 클릭한다

Appearance & Behaviour → System Settings → Android SDK 를 들어가면, Android SDK Location이 나온다.

정렬 알고리즘 #3. 버블 정렬 (Bubble Sort)

kgenots — Thu, 23 Jul 2020 23:30:58 +0900

설명

버블 정렬은 연속된 두 개의 Index를 비교하여 정렬한 다음, 후 순위 숫자와 다음 Index를 다시 연속적으로 비교하여 정렬하는 방법이다

기본 로직

두 번째 Index부터 시작한다
현재 Index와 바로 이전의 Index 값을 비교한다
이전 Index가 크면, 현재 Index와 값을 바꿔준다
현재 Index가 크면, 다음 두 연속된 배열 값을 비교한다
(전체 배열의 크기 - 현재까지 순환한 바퀴 수)만큼 1 ~ 4 항목을 반복한다

시간복잡도

1부터 비교를 시작하여, n-1, n-2, ..., 1개를 반복하며, 전체를 대상으로 비교를 진행하므로 O(n^2)이다

코드

void BubbleSort(vector<int> v)
{
    for(int i = 0; i < v.size()-1; i++)
    {
        for(int j = 1; j < v.size()-1; j++)
        {
            if(v[j-1] > v[j])            
                swap(v[j-1], v[j]);
        }
    }
}

정렬 알고리즘 #2. 삽입 정렬 (Insertion Sort)

kgenots — Thu, 23 Jul 2020 22:59:28 +0900

설명

삽입 정렬은 현재 위치에서, 그 다음 배열들을 비교하며 자신이 들어갈 위치를 찾아 삽입하는 알고리즘이다

기본 로직

두 번째 Index부터 시작
현재 Index는 별도의 변수에 저장하고, 비교 Index는 현재 Index - 1로 설정
별도로 저장해 둔 변수의 값과 비교 Index의 값을 비교
저장된 변수의 값이 더 작으면 현재 비교 Index로 저장, 비교 Index - 1하여 비교를 반복
저장된 변수의 값이 더 크면, 비교 Index + 1에 저장

시간 복잡도

최악의 경우 n-1, n-2, ... , 1개를 반복하여 O(n^2)

이미 정렬되어 있는 경우 1번씩만 하기 때문에 O(n)

코드

void InsertionSort(vector<int> v)
{
    for(int i = 0; i < v.size(); i++)
    {
    	int key = v[i];
        int j = i-1;
        
        while(j >= 0 && key < v[j])
        {
            swap(v[j], v[j+1]);
            j--;
        }
        v[j+1] = key;
    }
}

정렬 알고리즘 #1. 선택 정렬 (Selection Sort)

kgenots — Thu, 23 Jul 2020 22:45:27 +0900

설명

선택정렬은 현재 위치에 들어갈 값을 찾아 배열을 정렬한다.

현재 위치에 저장되는 값에 따라 최소 선택 정렬(Min-Selection)와 최대 선택정렬(Max-Selection)로 나뉜다

기본 로직

정렬되지 않은 Array의 Index의 맨 앞을 대상으로 이후 가장 작은 값을 찾는다 (최솟값 찾기)
가장 작은 값을 찾으면, 현재 Index의 위치의 값과 바꾼다
다음 Index에서 위 1, 2번 과정을 반복한다

시간 복잡도

n-1개, n-2개, ..., 1개의 비교를 반복한다. 전체 비교를 진행하므로 시간복잡도는 O(n^2)이다

코드 (C++)

void SelectionSort(vector<int> v)
{
	for(int i = 0; i < v.size()-1; i++)
    {
    	int temp = i;
        for(int j = i+1; j < v.size(); j++)
        {
        	if(v[temp] >= v[j]) 
            	temp = j;
        }
        swap(v[i], v[temp]);
    }
}

3D 그래픽스 - 그래픽스 파이프라인이란? (Graphics Pipeline)

kgenots — Wed, 22 Jul 2020 17:14:11 +0900

그래픽스 파이프라인이란?

3D 컴퓨터 그래픽스에서 그래픽스 파이프라인(Graphics Pipeline) 이란 3차원의 도형 혹은 이미지를 2차원 래스터 이미지로 표현을 하기 위한 단계적 방법(방법을 몇 단계로 나눈 것)을 의미한다. 래스터(raster)는 컴퓨터에서 어떤한 도형 혹은 이미지를 픽셀로 구성하고, 이 점들의 모습을 조합, 일정한 간격의 픽셀들을 나열하여 하나의 화면을 표현하는것을 의미한다. OpenGL과 Direct3D가 3차원 그래픽 표준이며, 비슷한 그래픽스 파이프라인을 가지고 있다. 다른 단어로, 렌더링 파이프라인 (Rendering Pipeline) 이라고도 한다.

그래픽스 파이프라인 각 단계 설명

초록색 도형(고정 기능), 노란색 도형(사용자 조작)

Input Assembler (입력 어셈블러)
- 저장된 버퍼에서 원시 Vertex 데이터를 수집하고, Index 버퍼를 이용하여 Vertex 의 복제나 중복을 막는다

Vertex Shader (버텍스 셰이더)
- 모든 Vertex 위치를 Model Matrix에서 View Matrix → Projection Matrix로 변환하는 작업을 한다
- Matrix 변환 과정에서 임의로 변형이 가능하다

Geometry Shaer (지오메트리 셰이더) : 생략 가능
- Vertex Shader에서 생성되지 않은 임의의 점, 선, 삼각형 생성 및 수정할 수 있는 셰이더
- 예를 들어, 실제 객체로 생성한 캐릭터의 모양을 바꿔보이게 (실제로는 바뀌지 않음) 하거나, 실제 객체로는 존재하지 않지만, 눈에 보이는 도형을 그릴 수 있다

Rasterization (래스터화)
- Vertex Shader와 Geometry Shader를 지난 도형이 픽셀로 변경되는 것을 의미한다
- Vertex 사이에 공간이 존재할텐데 그 부분은 보간 작업을 통해 알맞은 픽셀이 표시가 된다 (보간 = 두 데이터의 평균 혹은 중간값으로 처리하는 방법 = 도울 보, 사이 간)
- 이 단계에서는 색깔이 표현되지 않음

Fragment Shader (프래그먼트 셰이더) = Pixel Shader
- Rasterize 된 픽셀들에 색을 부여하는 단계
- Vertex Shader에 보간된 데이터를 통해 색을 표현하거나, 텍스쳐 좌표(UV), Normal Mapping 등을 이용

* Matrix 란? 공간을 의미한다. Model Matrix는 모델이 놓여진 3D 공간, View Matrix는 3D 공간 내에서 카메라가 보는 공간, Projection Matrix는 카메라 센서에 투영되는 2D 공간을 의미한다.

그래픽스 파이프라인 프로그래밍 단계

OpenGL 및 Direct3D와 같은 이전 API를 사용했다면, glBlendFunc, OMSetBlendState 메서드 호출로 임의의 파이프라인을 설정할 수 있다. 최근에 생긴 Vulkan의 경우, 그래픽스 파이프라인은 변경할 수 없으므로, 셰이더를 변경하거나, 파이프라인을 새로 만들어야 한다. 파이프라인을 새로 만드는 수고를 하고서라도 Vulkan 사용의 장점은 모든 그래픽스 파이프라인을 확인할 수 있으므로, 극한의 최적화를 할 수 있다.

3D 그래픽스 - 솔리드 모델링(Solid Modeling)이란? (+ CSG, B-Rep)

kgenots — Tue, 14 Jul 2020 15:15:44 +0900

Solid Modeling System

솔리드( solid )란 의미 그대로 담는 그릇에 따라 모양이 바뀌는 물이나 공기같은 것이 아니라 고정된 물체, 즉 고체를 의미한다. 솔리드 모델링이란 고정된 물체를 컴퓨터에서 표현하는 Geometric Modeling System 가운데 하나이다.

Geometric Modeling System

Wireframe Modeling System
1. 점과 선으로 물체의 외양만 표현하는 방법. 철사로 만들어진 분자모델과 같이 3차원 물체상의 점과 특징선을 입력받아 점을 표현하는 방법
Surface Modeling System
1. Wireframe 모델에 면(face) 정보를 추가한 형태. 면 사이의 상호관계는 저장하지 않고 면의 List만 저장함. 각 곡면들에 대하여 곡면방정식을 유도할 수 있는 정보만을 저장하는 모델링 시스템.
2. 곡면 입력 방법 3가지
  1. 곡면상의 점들을 이용하여 점을 보간하는 곡면 생성
  2. 곡면상의 고선들을 그물형태로 입력한 곡선망으로부터 보간곡면을 생성
  3. 곡선 입력 후 이를 직선이동 또는 회전이동하여 곡면을 생성
Solid Modeling System
1. 개념
  1. 모양 뿐만 아니라 물체의 다양한 성질을 좀 더 정확하게 표현하기 위해 고안된 방법
  2. 기본적인 착상은 “실제 물체가 3차원 공간을 두개의 공간으로 즉, 외부와 내부로 나눈다” 임
  3. 면(face)들 사이의 상호 연결관계, 면들의 내부/외부에 관한 추가정보도 보유하는 방식으로 3차원 입체의 부피에 관한 정보를 보유하므로 부피 단위의 작업이 가능한 모델링 시스템.
  4. 완전한 입체를 모델링 해야하는 부담이 있음.
  5. 모델링 기능 5가지
    1. Primitive를 변형하거나 Boolean Operation 수행
    2. 2차원 단면형상을 이용하는 Sweeping & Skinning
    3. 이미 만들어진 입체를 국부적으로 수정하는 Rounding & Lifting
    4. 입체를 이루는 꼭지점, 모서리, 면을 조작하는 Boundary Modeling
    5. 익숙한 형상단위로 모델링하는 Feature-Based Modeling
2. CSG (Constructive Solid Geometry)
  1. Primitive의 조합으로 솔리드를 표현하는 방법
  2. 부드러운 곡면을 표현하는데 한계가 있음.
  3. Primitive에 대한 Boolean Operation 수행 과정을 Tree 구조로 저장하는 방식
  4. 초기 솔리드 모델링 시스템에서 보편적임
3. B-Rep (Boundary Representation)
  1. 방향성과 경계가 있는 곡면들로 솔리드를 표현
  2. Vertex, Edge, Face로 구성 (Topology Entity)
  3. Geometric Entity, Surface, Curve, Point 는Topology Entity에 대응되는 요소
4. Decomposition
  1. 간단한 형상의 집합으로 Approximation 시켜서 표현하는 방식
  2. Winged-Edge Data Structure
    1. Half-Edge 이전 단계. Index를 사용하는 형식으로 방향을 판단하는 로직이 필요
  3. Half-Edge Data Structure
    1. 면과 면 사이의 변을 서로 다른 방향을 가지는 두 개의 변으로 나누어 데이터를 저장. 변(edge)이 방향성을 가져서 특정한 방향의 반공간(half-space)만을 의미하게 되었기 때문에 half-edge라고 한다.
    2. 일반적으로 half-edge의 왼쪽이 유효한 half-space가 되고, 여러 개의 half-edge에 의해 정의되는 half-space의 교집합에 의해서 면(face)이 정의된다. 따라서 한 면의 경계인 half-edge들은 항상 같은 방향으로 연결되어 있어야 한다. 또, 인접한 면과 이웃한 half-edge는 서로 방향이 반대인 것을 알 수 있다. 그렇게 해야만, 면들이 서로 같은 방향성을 가져서 안과 밖을 구분할 수 있기 때문이다.

글에서 알 수 있는 것

솔리드 모델링을 생성하는 목적에 따라 방법을 나누어 사용할 수 있다.
생성하는 각 방법은 상호호환적이지 않으며, 되도록 한 가지의 방법 안에서 형상화하는 것을 추천
전문가에게 ‘모델링이 뭐에요’라는 질문을 받을 때 이 글 하나면 설명 충분

참고

HTTP #2. TCP/IP, UDP 프로토콜 개념 알아보기

kgenots — Sat, 11 Jul 2020 01:06:49 +0900

TCP/IP 정의

데이터가 의도된 목적지에 닿을 수 있도록 보장해주는 통신 규약 (프로토콜)

OSI 7 계층을 4계층으로 단순화한 모델이다

TCP/IP는 한 컴퓨터가 인터넷을 통해 데이터 패킷을 컴파일하여 올바른 위치로 보내서 다른 컴퓨터와 통신할 수 있도록 하는 인터넷의 기본 통신 언어이다. 여기서 패킷은 인터넷을 통해 전송되는 정보의 가장 작은 단위이다

TCP와 IP 두가지 프로토콜로 이루어져 있다

TCP는 많은 양의 데이터를 가져와서 패킷으로 컴파일하여 동료 TCP 계층이 수신할 수 있도록 전송 (최상위 계층)

IP는 정보 패킷이 정확한 위치로 전송 및 수신될 수 있게하는 쌍의 역할을 함

→ 요약하면 TCP가 데이터, IP는 인터넷 위치 GPS 쯤

OSI 7계층과 TCP/IP 4계층

각 계층이 하는 역할은 중간에 사용되는 프로토콜을 알게되면 외우지 않아도 이해하게 된다

프로토콜이 자신의 기능만 하도록 독립성을 보장하기 위해서 계층이 나뉘게 된다

네트워크 접근 계층 : 인터넷 계층에서 생성된 패킷을 전기신호 또는 광신호로 바꾸어 전달
인터넷 계층 : IP (Internet Protocol) 이 존재하는 계층, 라우팅 방법을 정의하고 데이터 전달의 신뢰성을 책임짐
전송 계층 : TCP, UDP가 존재하는 계층, 인터넷 계층에서 결정한 목적지까지 실제 데이터를 전송
응용 계층 : 응용프로그램들 간의 데이터 통신이 이루어짐 (SMTP, FTP, HTTP)

TCP, UDP 프로토콜

TCP 프로토콜
- 연결 지향 프로토콜
- 데이터 송수신을 위해 클라이언트와 서버의 소켓이 연결되어야 함
- 데이터가 유실되면 재전송을 요청함 (신뢰성)
- HTTP, FTP 대부분의 응용 계층 프로트콜의 전송 계층으로 이용
UDP 프로토콜
- 비연결 지향 프로토콜
- 전송한 데이터가 제대로 전달되었는지 확인하지 않고 데이터만 보냄
- 신뢰성이 떨어지지만, 속도가 빠름
- Header에 checksum이 존재하므로 신뢰성이 아예 없는 것은 아님
- 음악, 동영상 스트리밍 같은 서비스에 이용

HTTP #1. URI, URL 개념, 차이점 알아보기

kgenots — Fri, 10 Jul 2020 19:15:31 +0900

URI (Uniform Resource Identifier)

URI 이란, 통합자원식별자 즉 웹 리소스를 고유하게 식별할 수 있는 구분자 혹은 유일한 주소라고 한다

URI는 인터넷에서 요구되는 기본 조건이며, 인터넷 프로토콜에 붙어다닌다

URI의 종류는 URL, URN 두 가지이며, 일반적으로 URL을 사용한다

URL : 특정 서버에서 하나의 리소스에 대해 구체적인 위치를 서술
URN : 리소스가 어디에 있던지 찾을 수 있는 방식을 설명

URI가 URL보다 큰 개념이지만, 혼용해서 쓰는 개발자들이 많다

(URI가 URL은 아니지만, URL이 URI이긴 하니까...!!?)

URL (Uniform Resource Locator) 구조

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

scheme (스킴)
- 인터넷 프로토콜(규약)을 의미하며, 리소스를 어떻게 요청하고 접근할지를 명시
- HTTP, FTP, MAILTO, RTSP 등이 있으며, 웹에서는 HTTP를 주로 씀
user, password (사용자 이름, 비밀번호)
- 서버에 접근하기 위해 사용자의 이름과 비밀번호를 요구하기도 함
  - FTP://userid:12345@host/file.ppt
- 아무것도 입력하지 않았을 때, 기본값
  - 사용자 이름 : anonymous
  - 비밀번호 : 브라우저에서 제공하는 기본 값
host:port
- Host는 하나의 컴퓨터를 의미, Socket에 따라 Process가 달리 작동
- Port 는 Socket을 구분하는 역할
- 로컬에서 개발하면 기본적인 URL은 localhost:8080
- HTTP에서 포트 번호를 명시하지 않으면, 80번 포트를 기본 값으로 사용
path, query, fragment
- 해당 호스트에서 자원의 경로, 전달 파라미터, ID를 의미한다

URL 허용 문자 (Escape string)

클라이언트의 요청 URL 문자열이 서버측으로 손실되지 않고 전달하기 위함

초기 URL 설계자들은 ASCII 문자만으로 URL을 작성하도록 권장

웹이 커지면서 비영어권에서 ASCII 문자가 아닌 문자를 사용해야하는 상황이 발생 (ex. UNICODE 문자)

해당 문자를 %기호로 시작하고 ASCII 코드로 표현되는 이스케이프 문자로 변환

* 변경 전

https://parodev.tistory.com/category/폴리그랏

'폴리그랏' 카테고리의 글 목록

지나가는 그래픽스 개발자의 블로그

parodev.tistory.com

* 변경 후 (이스케이프 문자 변환)

https://parodev.tistory.com/category/%ED%8F%B4%EB%A6%AC%EA%B7%B8%EB%9E%8F

윈도우10 자동 로그인 설정, 로그인창 제거 방법 (netplwiz)

kgenots — Fri, 3 Jul 2020 10:32:15 +0900

Windows 10에서는 매번 비밀번호를 입력하고 시스템에 로그인 해야합니다

매번 로그인 암호를 입력해서 들어가는것도 여간 번거로운 일이 아니죠

단일 사용자 시스템일 때 유용한 자동으로 로그인하는 방법에 대해 설명하려고 합니다

Netplwiz 및 레지스트리 편집기와 같은 도구를 이용하여 자동 로그인을 구성할 수 있습니다

Windows 7과 8 마찬가지로 동작합니다

Windows 10 자동 로그인 방법 - netplwiz 이용

1. 시작 메뉴에서 "netplwiz"를 검색, 결과에서 "관리자 권한으로 실행" 옵션을 클릭합니다

(Win키 + R 키를 눌러 실행창을 띄운 후에 "netplwiz" 입력 후 Ctrl + Shift + Enter 키를 누르면 동일하게 실행됩니다)

2. "사용자 이름과 암호를 입력해야 이 컴퓨터를 사용할 수 있음" 에 체크 표시 해제를 한 후 적용버튼을 누릅니다

3. 자동 로그인에 암호 입력 및 확인창이 뜨게 됩니다. 비밀번호를 입력하고 "확인" 버튼을 클릭하세요

이렇게 Windows 10 자동 로그인 기능을 사용할 수 있습니다.

이 작업을 취소하고 싶다면, 2번 작업에 체크표시를 하고 진행하면 됩니다.

NoSQL이란 무엇인가? 개념, 특징과 장점

kgenots — Tue, 30 Jun 2020 22:36:36 +0900

NoSQL 이란?

NoSQL은 Not Only SQL의 약자입니다. 이미 여러분들이 평소에 Facebook, Twitter, Netflix, Instagram 등의 서비스에서 이미 NoSQL 을 사용하고 있습니다. NoSQL은 기존 RDBMS의 한계를 극복하기 위해 만들어진 형태의 데이터 베이스입니다. Relation 즉 관계형이 아니어서 고정된 스키마가 없으며, Join이 힘들지요. 빅데이터를 다룰때, RDBMS로만으로는 트래픽을 감당하기 어려워졌고, 여러분들이 올린 사진이나, 메시지를 저장할 때, 동시 다발적으로 상품을 추천해 줄 때, 데이터를 더 빠르게 처리하기 위해서 개발된 것이 NoSQL 입니다. 핵심 요소는 Horizontal Scalability(수평확장)과 High Availability(고가용성) 이지요.

이 용어가 처음으로 등장한 시기는 1998년 카를로 스트로찌(Carlo Strozzi)라는 엔지니어가 공개한 표준 SQL 인터페이스를 사용하지 않은 자신의 경량 Open Source 관계형 데이터베이스를 NoSQL이라고 명명한데서 유래했다고 합니다. 2009년에 요한 오스칼손(Johan Oskarsson)이라는 엔지니어가 Open Source 기반의 분산 데이터베이스 관련 행사를 준비하면서 NoSQL이라는 용어를 사용했다고 하네요.

기존 RDBMS의 한계

데이터양과 데이터 처리량이 지속해서 증가하면 아래와 같은 문제점을 만납니다

스키마 문제 : 빅데이터를 RDB의 스키마에 맞춰 변경해서 넣으려면 매우 긴 시간의 PayLoad가 발생
스케일업의 한계 : RDBMS는 스케일 아웃을 염두에 두고 설계되지 않았기 때문에, 관계 모델에서 트랜잭션의 연산, 일관성, 속성을 유지하면서 스케일 아웃 환경에서 조작하는것이 어렵습니다.

NoSQL의 특징과 장점

Map 형태의 Key-Value 형식을 지원
RDBMS가 데이터의 관계를 Foreign Key(FK) 등으로 정의하고 Join 등 관계형 연산을 하지만 NoSQL은 관계를 정의하지 않음
대용량의 데이터를 저장, 처리하기 쉬움
Schema-less
읽기 작업보다 쓰기 작업이 더 빠르며, 일반적으로 RDBMS에 비하여 읽기, 쓰기 성능이 좋음

NoSQL의 종류

Key/Value Database : Redis(인메모리), Oracle Coherence 등

단순한 저장구조, 복잡한 조회 연산 X
고속 읽기와 쓰기에 최적화
Key에 대한 단위 연산이 빠름, 여러 Key에 대해서는 느릴 수 있음
메모리를 저장소로 쓰기 때문에, 아주 빠른 Get, Put을 지원
Value는 문자열, 정수와 같은 원시 타입 및 Column Family 형태 (Column, Value) 를 지원한다

Big Table Database (= Ordered Key/value) : BigTable, Cassandra, HBase 등

Key/Value Store 와 데이터 저장 방식 동일
내부적으로 Key에 대한 정렬 지원 (보통 NoSQL은 지원안함)
순차적인 날짜 데이터를 정렬해서 보여줄 때 용이

Document Database : MongoDB, CouchDB 등

Key/Value Store의 확장된 형태
Value에 Document라는 타입을 저장 (XML, JSON, YAML 등)
복잡한 데이터 구조 표현가능
Document id 또는 특정 속성값 기준으로 인덱스 생성
Sorting, Join, Grouping 등이 가능
데이터를 파싱해서 연산 → Key/Value 모델보다 오버헤드가 큼
큰 크기의 Document를 다룰 때 성능 저하

Graph Database : Sone, AllegroGraph, Neo4j

Node들과 RelationShip으로 구성된 개념
Key/Value Store이며 모든 노드는 끊기지 않고 연결됨
RelationShip은 Direaction, Type, Start Node, End Node 등 속성을 가짐
보통 Weight 속성을 가짐

참조 : http://blog.naver.com/PostView.nhn?blogId=naverdev&logNo=120116323974&parentCategoryNo=8&viewDate=¤tPage=1&listtype=0

3D 그래픽스 - 누구든지 하는 VR, AR 공간

kgenots — Fri, 26 Jun 2020 23:56:52 +0900

공간이란?

공간(空間, 영어: space)은 어떤 물질 또는 물체가 존재할 수 있거나 어떤 일이 일어날 수 있는 장소이다. ( 참조 : 위키백과 )

3D 그래픽스에서 다루는 공간은 X, Y, Z 축이 존재하는 유클리드 공간이다.

유클리드 공간은 선형적인 축들로 이루어진 공간이며,

서로 다른 두 직선은 한 지점에서 만나거나 평행하게 이동한다는 사실에 근거하고 있다.

공간의 과거

고전물리학에서 설명하는 유클리드 공간에 반기를 들었던 수학자들이 많았는데,

1800년대 말, 많은 수학자들이 타원과, 쌍곡선 기하학에 근거하여 비유클리드 공간의 존재를 입증하였다.

위 그림에서 알 수 있듯이, 삼각형은 우리가 생각하는 내각의 합이 180도인 그런 것만 있는 것이 아니라는 것이다.

1900년대 초에는 아인슈타인이 일반 상대성 이론을 통해 시공간에 대한 개념을 도출하였고,

공간은 중력장으로 이루어져 있다는 가설을 내세우게 된다. ( 중력장 = 곡선 공간 = 비유클리드 공간 )

그리고 2015년에 중력파 검출 실험이 성공하면서 물리학계에 많은 파장을 일으켰다.

이를 통해 알 수 있는 것은 우리가 만든 평면은 실제로 평면이 아닐 가능성이 높으며, 만약 실제로 평면이라 하더라도 중력을 받는 힘이 중심부와 끝부분이 다르다는 것이다.

쉽게 설명해서, 우리가 만들고 있는 VR과 AR은 1900년대 이전 고전 물리학을 토대로 하여 만들어진 반쪽짜리 공간인 것이다.

하지만 공간 안에서 일어나는 일들을 표현하는데에 있어서는 꽤나 최근의 물리학을 근거로 표현되고 있다. ( 최근의 유체역학 같은거 )

* 물리학, 수학, 그리고 공간

어쨌든 우리는 유클리드 공간에서 사물을 표현해야 하는데 수반되는 지식들을 익혀야 한다.

(1) 고전물리학 : 뉴턴의 제 1법칙 - 제 3법칙까지

(2) 선형대수학 : 선형적인 공간을 표현해야하니... ( Vector, Matrix )

(3) 삼각함수 : 삼각함수는 선형대수에 포함되지 않는다. 딱 봐도 곡선 ( sin / cos / tan )

고등학교 때 배운거에 조금만 더 설명을 덧붙이면 앞의 내용들을 이해할 수 있다.

(수학을 왜 배우는지, 물리학을 왜 배우는지 이제서야 이해함)

* 좌표축이 3개라고 했지 방향이 어디라고 얘기 안했다.

좌표축은 3개인데, 표현하는 사람에 따라서 축이 나타내는 방향이 다 다르다.

3Ds Max 라는 AutoDesk의 모델링 프로그램에서는 z축이 위 방향을 나타내고,

그래픽스 라이브러리인 OpenGL과 DirectX는 y축이 위 방향을 나타내지만, z축의 방향이 서로 다르다.

Unity Engine은 X축이 OpenGL에 반대이다.

(내가 이거 때문에 초반에 애 좀 먹었다)

일반적인 시각에서

평면에 높이를 표현해야하는 건축계에서는 Z축이 높이,

화면에 깊이를 표현해야하는 컴퓨터에서는 Z축이 깊이, 정도로 이해를 하면 될 것 같다.

* 여기에서 설명이 필요한 단어나 용어들은 추후에 용어정리나, 링크를 통해서 전달하도록 하겠다.

* 공간에 대해서 모르겠다! 하시는 분들은 댓글 남겨주세요~~!

어느 부분이 더 필요한지 알아야 덧붙일테니...

3D 그래픽스 개념 - Point Light, Spot Light

kgenots — Thu, 20 Dec 2018 02:12:58 +0900

1. 인공적으로 만든 Light : 인조광?

가장 왼쪽에 있는 것이 Point Light, 중앙이 Spot Light, 오른쪽은 광각이 넓은 Spot Light 혹은 IES Light(?)

a. Point Light

Point Light(포인트 라이트) 한 점을 기준으로 주변에 빛을 뿌리는 역할을 합니다.

b. Spot Light

Spot Light(스팟 라이트)는 한 지점을 원뿔 모양으로 비추는 조명입니다.

[공지] 딴지는 싫어요. 대화는 좋아요.

kgenots — Wed, 12 Dec 2018 03:25:42 +0900

기존의 생활 블로그를 운영한지 3년쯤 ( 실제로는 3달쯤 ) 지나오면서,

많은 사람들이 댓글을 남겼는데 뭔가 글의 흠만 보이면 싸우려고 하는 사람이

꼭 인터넷 상에 존재한다는 것을 매번 느끼는 것 같습니다.

사람이기에 정보의 오류가 조금 존재할 수 있습니다.

최대한 오류없이 작성하도록 노력하겠습니다.

딴지는 싫습니다.

대화는 좋아합니다.

틀린게 있다면 착하고 바르고 고운말로 지적해주세요.

재빠르게 내용 확인 후 코멘트를 달겠습니다.

소개글

kgenots — Tue, 11 Dec 2018 02:03:06 +0900

(내용없음)

윈도우10 C 디스크 정리 방법 (용량 확보)

kgenots — Tue, 11 Dec 2018 01:54:04 +0900

컴퓨터를 구입한지 2년정도 되어가는데, 이제는 프로그램을 삭제해도 용량이 작은 SSD의 공간이 확보가 되지 않더라구요.

꾸준히 파일관리하는 것도 중요하지만, 임시파일, 다운로드 파일, 윈도우 백업파일과 같은 불필요한 데이터들이 존재하기 때문인데요.

용량이 부족한 경우!

Windows10 내 C 드라이브 용량 정리하는 방법을 알려드릴까 합니다

* 디스크 정리

'디스크 정리'는 다운로드 받은 파일, 임시 인터넷 파일 등을 지울 수 있습니다.

▶ '내 PC'에서 로컬 디스크(C:)에 우측 마우스를 클릭하여 '속성'을 선택해주세요.

▶ 이후 '일반'탭에서 '디스크 정리'를 눌러주세요.

▶ 왼쪽이 일반, 오른쪽이 시스템 파일 정리를 눌렀을 때 ( 한 번 정리해서 크게 차이가 없네요 :0 - 많을 때 10기가까지도 정리가 됩니다.)

▶ 파일 삭제를 누르면 디스크 정리가 시작됩니다. 시간은 조금 걸려요~

C# / .NET - Exception 예외 종류와 설명

kgenots — Tue, 11 Dec 2018 01:26:39 +0900

Exception Type	Description
Exception	.NET Framework에서 모든 예외들의 Main 클래스
AmbiguousMatchException	클래스를 호출했는데, 어떤 클래스인지 확인할 수 없을 때 발생
ArgumentException	메서드의 Argument(Parameter)가 유효하지 않을 때 발생
ArgumentNullException	메서드의 Argument가 허용할 수 없는 null Reference 일 때 발생
ArgumentOutOfRangeException	메서드의 Argument가 허용할 수 없는 범위 외의 값일 때 발생
AppDomainUnloadedException	로드되지 않은 어플리케이션 도메인에 접근하려고 할 때 발생
ArithmeticException	계산상의 오류가 있을 때 발생
ArrayTypeMismatchException	두 배열이 동일한 타입의 배열인지 확인한 뒤 같지 않을 때 발생
BadImageFormatException	DLL이나 실행 프로그램의 이미지가 올바르지 않을 때 발생
CannotUnloadAppDomainException	어플리케이션의 도메인 언로드에 실패할 때 발생
ConfigurationException	환경설정의 오류가 있을 때 발생
ContextMarshalException	마샬링(아래 설명추가)을 하는데 실패할 때 발생
CryptographicExcpetion	암호화 작업중 오류가 있을 때 발생
DataException	.NET 구성 요소를 사용해서 오류가 있을 때 발생
DivideByZeroException	0으로 나눗셈을 하려고 할 때 발생
ExecutionEngineException	실행 엔진 오류가 있을 때 발생
- .NET 4.5부터는 사용하지 않음
ExternalException	모든 COM interop 예외 및 SEH 예외에 대한 기본 예외 형식
<대표적인 케이스> - Data.Common.DbException - Data.OleDb.OleDbException - Messaging.MessageQueueException - Runtime.InteropServices.COMException - Runtime.InteropServices.SEHException - Web.HttpException
FileNotFoundException	찾는 파일이 없을 때 발생
FormatException	Argument로 쓰이는 문자열 서식이 잘못되거나 그 사양에 맞지 않을 때 발생
IndexOutOfRangeException	배열에서 찾고자 하는 인덱스(순서)가 범위 밖에 있을 때 발생
InvalidCastException	Type Casting 에 실패할 때 발생
NullReferenceException	참조하는 Reference가 null일 때 발생
OutOfMemoryException	메모리 영역을 넘어가는 값이나 Reference를 가져올 때 발생

* Exception

ApplicationException / SystemException / IOException 등의 부모 클래스

* SystemException

ArithmeticException / ArgumentException / OutOfMemoryExcpetion / NullReferenceException / IndexOutOfRangeException 등의 부모 클래스

* IOException

EndOfStreamException / FileNotFoundException / DirectoryNotFoundException 등의 부모 클래스

* ArithmeticException ( 계산상의 오류 )

- DivideByZeroException

- OverflowException

* ArgumentException ( Argument 오류 - 파라미터 관련 )

- ArgumentOutOfRangeException

- ArgumentNullException

* 마샬링<Marshalling>이란?

데이터를 전송하기 위한 포맷으로 변환하는 것을 말한다. ( 전송하기 위해 만들었던 포맷을 다시 되돌리는 것은 언마샬링<Unmarshalling>)

MySQL Workbench - UPDATE Query Error ( Code 1175 )

kgenots — Sun, 9 Dec 2018 21:34:48 +0900

*에러 메세지가 다음과 같이 발생하는 경우

Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE

that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Queries and reconnect.

* 해결방법

1. Query 입력 : SET SQL_SAFE_UPDATES =0;

2. Workbench 설정 : safe 모드 체크 해지

이 모든 문제의 원인 : Safe Update 모드 상태로 설정되어 있을 때 → UPDATE시 KEY Column을 이용하지 않으면 업데이트 불가

윈도우10 Windows.old 폴더 제거/삭제하는 방법

kgenots — Sun, 9 Dec 2018 21:23:56 +0900

Windows7 혹은 Windows8.1 에서 Windows10으로 업그레이드 할 때는 기존의 파일이나 폴더가 삭제되지 않고 바로 업그레이드가 진행된다. 하지만 바로 업그레이드 되는 만큼, 기존의 파일들의 충돌 위험성이 있기 때문에 Windows.old라는 폴더가 C:\안에 생기게 된다.

▼ C:\ 안에 Windows.old 폴더가 생긴 모습 (왠걸 폴더 용량이 6G...)

▼ 제어판 - 관리 도구 - 디스크 정리에 들어가서 '디스크 정리' 열기

▼ 윈도우가 깔린 드라이브를 선택하고 확인을 누른 후, 디스크 정리 창이 뜨면 '시스템 파일 정리' 클릭

▼ '이전 Windows 설치'를 체크해주고 오른쪽 하단에 확인 클릭하면 끝!

윈도우10 hiberfil.sys 파일 제거하는 방법

kgenots — Sun, 9 Dec 2018 21:21:05 +0900

Windows10 에 있는 Hiberfil.sys 파일의 정체!!

- 윈도우에는 절전모드 / 최대절전모드가 기능이 있습니다. 모두 컴퓨터를 켜 놓은 상태에서 오랜 시간 동안 사용하지 않으면 임시 절전되는 모드입니다.

- 이전에는 노트북에만 적용되는 절전모드 기능이 윈도우7부터는 기본 PC에 적용이 되어있지요.

- 전기를 아껴주는 기능이지만, 최대절전모드(Hibernation) 기능의 경우 SSD나 HDD의 일정 공간을 항상 차지하고 있습니다.

▲ 무려 3GB나 차지하고 있네요. 많은 경우 10GB가 넘어간다고 합니다.

SSD 128GB 중 10GB면 정말 엄청난 공간을 차지하고 있습니다.

* 삭제하는 방법

▲ 작업표시줄에 '윈도우 아이콘'을 누르고 'cmd'를 치면 명령 프롬프트가 나옵니다.

명령프롬프트를 마우스 오른쪽 클릭 - 관리자 권한으로 실행 - 예(Y) 를 눌러주세요

▲ powercfg -h off 라고 쳐주시면 아래와 같이 hiberfil.sys 파일이 없어져있음을 확인하실 수 있습니다.

* 파일이 안 보이시는 분들 같은 경우에는 C:\ 에서

[보기 탭 - 맨 오른쪽 옵션 - 폴더 및 검색옵션 변경] 에서

숨김 파일, 폴더 및 드라이브 표시!!

보호된 운영 체제 파일 숨기기(권장) 해제!!

하시면 파일이 보여요~!!

리눅스 무선랜 인터넷 끊김 해결방법 (rtl8723be)

kgenots — Sun, 9 Dec 2018 21:09:59 +0900

rails server 개발 때문에 멀티부팅으로 리눅스를 설치하고 나니

무선랜이 갑자기 중간에 뚝뚝 끊기기 시작했다

이 와중에 구글신 강림해서 또 열심히 검색한 결과

http://askubuntu.com/questions/590414/wifi-problems-with-rtl8723be-in-ubuntu-14-04

기존의 커널에 설치된 드라이버 외에 새로 설치해야 한다고 한다.

Install required packages
sudo apt-get install build-essential git 
git clone new realtek wifi modules

git clone https://github.com/lwfinger/rtlwifi_new/

enter the directory

cd rtlwifi_new

build it

make

install

sudo make install
Now you can reboot or unload/load modules

unload modules

sudo modprobe -r rtl8723be

load new module

sudo modprobe rtl8723be

if it still doesn't work, try the sollution from this post

echo "options rtl8723be fwlps=0" | sudo tee /etc/modprobe.d/rtl8723be.conf

위와 같은 방법으로 진행 후에는 정상적으로 작동하는 것을 확인할 수 있다.

(끝나고 재부팅 안하면 잘 안 되는거 같기도...)

그래픽스 개발자의 코딩 블로그

OpenAI API 키 도용 5만건 이상 (GPT-4 무단 이용)

OpenAI API 키의 누출과 문제점

OpenAI API 키 보호를 위한 개발자의 조치

마무리

C++ 에서 string 문자열과 char 배열 비교하기

std::string: 유연하고 편리한 문자열 클래스

char 배열: 정적 할당과 직접적인 문자 조작

std::string 과 char 배열 비교

메모리 할당 방식

문자열 조작

성능

번들링(Bundling) 이란? 이점과 기술 소개

번들링의 이점

1. 파일 크기 문제 해결

2. 애플리케이션 임의 조작 방지

3. 파일 단위의 모듈 관리

웹팩(Webpack)

모듈 번들러의 등장

웹팩이 제공하는 기능

웹팩 설정 파일 (webpack.config.js)

마무리

JavaScript 개발자라면 읽어야 할 JS 변천사. 1탄 Classic JavaScript

태초의 자바스크립트

HTML 내 <script> 태그 이용

CommonJS와 Node.js

require의 시작

CommonJS 모듈화

비동기와 AMD

AMD의 약간 진화된 모듈화 (독립성↑)

모듈 패턴의 진화 UMD

Commonjs, AMD 너네 그만 싸워

꼭 알아두면 좋은 VSCode 단축키 모음

1. 언제까지 마우스로 폴더를 뒤적거릴건가?

2. 동일한 변수명 또는 글자 바꾸기

3. 여러 단어 또는 여러 줄 한 번에 수정하기 (멀티커서)

협업을 위한 VSCode 확장프로그램(Extension) 추천

1. GitLens

2. indent-rainbow

3. Material Icon Theme

4. Color Highlight

맥 독(Dock) 뜨는 속도 빠르게 하는 방법

방법 1. 단축키를 이용해 자동 숨김/보이기 설정

방법 2. 터미널을 통해 독 설정값 변경

Node.js 버전 변경하는 방법 - MAC

이미 Node.js 가 설치되어 있는 경우,

기존 Node.js 제거 후 Node.js 홈페이지를 통해 재설치

Node.js 버전 변경하는 방법

주요 명령어 정리

Node.js, NPM 제거하는 방법 - MAC

1. Node.js 깔끔하게 지우는 방법

Node.js 홈페이지에서 받았을 때,

Homebrew 에서 받았을 때,

설치된 NPM 캐시, 환경파일까지 제거하려면,

2. Node.js 설치 및 제거 여부 확인 방법

맥 화면캡처 시, 창 그림자 제거 방법

맥에서 창 캡처 방법

그림자 유무 차이 비교

창 크기가 다른거 아닌가요?

그림자 제거 방법

그림자 제거 활성화

그림자 제거 비활성화 (원상복구)

맥 자동실행 항목 설정 방법

로그인 항목 설정하는 방법

NPM 사용하지 않는 모듈 일괄 제거하는 방법 (depcheck)

사용방법

참고

관련 포스트

NPM package.json 순서 정렬하는 방법 (sort-package-json)

사용방법

참고

관련 포스트

VSCode 터미널 관리자 권한으로 열기

관리자 모드로 열기 (한 번)

관리자 모드로 열기 (열때마다)

Git 기본 명령어 모음 (기초)

기초 영역 (only. Local Repository)

git init ${폴더명}

git status

git add ${파일/폴더명}