Roopretelcham

기업엔지니어가 하는 일, 장단점 정리

RuTel — Tue, 11 Nov 2025 23:23:40 +0900

참고 영상 :

https://youtu.be/jVw3Khxeluk?si=n7cLIuq0EY66m_h2

참고 사이트 :

https://qiita.com/Conabuku/items/d077ef0b19845f29ebc7

コーポレートエンジニアのキャリア形成論 - Qiita

サマリーこの記事は、コーポレートエンジニアという職種に触れ、彼らが日々直面する挑戦、不安、そして、成長の機会を考えることにします。。コーポレートエンジニアリングの世界は、

qiita.com

1. 코퍼레이트 엔지니어의 정의와 미션

코퍼레이트 엔지니어는 '회사 비즈니스 전략과 IT를 연결하는 전문가'
주요 역할: 사내 시스템(네트워크, 서버, 업무시스템 등) 설계, 운영, 관리, 비즈니스 프로세스 개선(자동화, 효율화)으로 조직 성장·경쟁력 강화
단순 기술자에 머무르지 않고 "비즈니스의 심장부"에 관여, 기술적 시각과 경영적 시각을 지도력 있게 융합해야 함

2. 커리어에서 마주치는 현실과 불안

코퍼레이트 엔지니어 경력의 한계:
- 사내 고유 업무‧시스템을 오래 다루면 그 경험이 "특정 회사·도메인에만 국한"
- 외부 SI, 개발 쪽 전문가처럼 다양한 프로젝트/기술을 직접 체험하기 어려움
- 최신 기술 도입·교육은 예산, 업무환경상 늦어지는 경우 잦음
- 일 자체가 '사내 안정/운영'에 치중하여 신기술/혁신 영역에 뒤처지기 쉬움
- 업무가 한정돼서 "스스로 성장하는 느낌이 약하다"는 고민 흔함

3. 코퍼레이트 엔지니어의 해법·마인드·강점

그럼에도 불구하고, 기업 내 IT 핵심으로서 비즈니스 전략 달성에 직접적인 '영향력'과 '주도권'을 가질 수 있음
"업무 프로세스 이해"와 "조직横断 커뮤니케이션"에서 얻는 경험은 어디서도 대체 불가
엔지니어로서 갖추어야 할 주요 7대 스킬:
① 벤더 관리 ② 시스템·소프트웨어 운영 ③ 정보보안 ④ 인프라 설계/관리 ⑤ 데이터 분석基반 ⑥ 세일즈(설득) 스킬 ⑦ 커뮤니케이션
기술력만 Important하지 않음!
- 회사 내에서 의사결정권자(비IT조직 포함)와 협업/설득하는 역량
- 개선안 제시부터 실제 정착까지 추진하는 실행력과 문제해결 능력

4. 기타(주요 비교, 문제의식)

SIer, 외부 전문개발자와 비교해 '유연성/스킬 업데이트'에 제약이 많으나, 반대로 "현장과 밀착"‧"조직 내 영향 증대"라는 독자적 가치·경로가 있음
시장에서의 최신 기술 습득이 어렵지만, 반대로 비즈니스 중심의 IT 리더·관리직으로 커리어 전환 가능성이 높음
여러 부서, 현장과 교류하면서 인적 자산, 사업 프로세스에 대한 총체적 이해가 커지는 것이 큰 장점

결론(핵심 메시지)

코퍼레이트 엔지니어는 단순한 IT 잡무 담당자가 아닌, "비즈니스와 IT의 가교"
단점: 기술적으로는 좁아질 수 있지만, 조직 내 실질 영향력·리더십, 종합적 비즈니스 추진 경험이 쌓임
IT 베이스 + 문제해결능력 + 커뮤니케이션/리더십을 바탕으로 회사 내에서 '기술을 통한 변화'를 주도할 수 있다면 특별한 가치를 가질 수 있음

단기 업무 (즉, 평소에 매일 자주 하게 될 일)

헬프데스크 역할: 사내 직원들의 문의에 대응
- 사용자 상담: “이거 안 돼요, 어떻게 하나요?” 스타일의 즉석 질문을 받고 해결
- PC 관련 모든 트러블(고장, 오류, 소프트웨어 문제 등) 대응
- 소프트웨어나 시스템, 기기 사용법 안내
키팅: 신규 입사자 PC 설정, 장비 세팅·배포
시스템 보수·운영: 네트워크, 서버, IT장비 정상작동 점검·간단한 유지관리

장기 업무 (프로젝트성, 기간을 갖고 진행하는 일)

프로젝트 로드맵 작성: IT 관련 신규 프로젝트(시스템 개편, 자동화 등) 계획 수립
정보수집: 최신 IT, 보안, AI, SaaS 트렌드 파악 및 관련 정보 분석
최신 툴/서비스 도입: 사내에 필요하다고 판단되는 새로운 서비스(AI, SaaS, 보안 시스템 등) 도입 검토 및 적용
기존 업무의 정보화: 기존 사무 프로세스, 시스템을 효율적으로 바꿀 수 있도록 정보화 진행
외부 벤더와의 미팅: 장비/시스템 공급사 등 외부 전문가와 협업, 기술 상담, 네고 등

현실적인 요약

단기(일상)는 '잡무'와 사내 IT서포트(문제 해결, PC 설정, 사용법 안내)가 주 업무
장기적으로는 회사 전반의 IT 환경 개선, 새로운 서비스 도입, 효율화, 외부 협력 등 조금 더 "주도적"인 변화 업무가 있음

[Nuxt3] i18n 을 통한 사이트 현지화 적용

RuTel — Fri, 12 Sep 2025 15:15:23 +0900

소개

i18n은 국제화 프레임워크로서 다양한 프레임워크나 플랫폼에서 활용 가능하다.

공식 웹사이트 : https://www.i18next.com/

Introduction | i18next documentation

www.i18next.com

여기서는 해당 프레임워크를 Nuxt3와 결합해 프론트엔드 텍스트들을 구글 시트와 통합하여 빌드 시 마다 현지화 텍스트를 자동으로 동기화하고 적용하는 방법을 다룬다. 이 방식을 통해 번역된 텍스트를 더욱 효율적으로 관리 및 유지보수가능하다.

필요 라이브러리 설치

Front-end

다국어 처리 프레임워크 i18n
```
npx nuxi@latest module add i18n
```
구글 인증
```
yarn add google-auth-library
```
구글 스프레드시트
```
yarn add google-spreadsheet
```

구글 시트 API 사용 설정

구글 클라우드 콘솔 에서 프로젝트 생성
Google Sheets API 검색 후 사용 설정
API/서비스 세부정보에서 사용자 인증정보 만들기 → 서비스 계정 생성
계정 클릭 → "키" 탭 → 새 키 생성 → JSON 다운로드

예시 JSON:

{
  "type": "service_account",
  "project_id": "liahnson",
  "private_key": "-----BEGIN PRIVATE KEY-----\ntesttesttest\n——END PRIVATE KEY-----\n",
  "client_email": "service-account@test.iam.gserviceaccount.com",
  "client_id": "1234",
  "token_uri": "https://oauth2.googleapis.com/token"
}

프로젝트 기본 구조화

locales 폴더 생성
다운받은 JSON 파일을 credentials.json 으로 이름 변경 → locales 폴더에 위치
sync.js 파일 작성 (구글시트 ↔ JSON 동기화)

sync.js 예제

// 모듈 및 전역 변수 선언
const { GoogleSpreadsheet } = require('google-spreadsheet');
const { JWT } = require('google-auth-library');
const credentials = require('./credentials.json'); // 서비스 계정 인증 파일 경로
const fs = require('fs');
const path = require('path'); // 경로 조작을 위한 모듈 추가
const _ = require('lodash');

// 전역 설정
const localesPath = 'locales';
const lngs = ['ko', 'en']; // 언어 목록
const spreadsheetDocId = 'doc_id_test';
const fileNm = 'translation';

// Google API 인증
const serviceAccountAuth = new JWT({
    email: credentials.client_email,
    key: credentials.private_key,
    scopes: ['<https://www.googleapis.com/auth/spreadsheets>'],
});

// 스프레드시트 로드 함수
async function loadSpreadsheet() {
    console.info(
        '\\u001B[32m',
        '=====================================================================================================================\\n',
        `(\\u001B[34mhttps://docs.google.com/spreadsheets/d/${spreadsheetDocId}/#gid=0\\u001B[0m)\\n`,
        '=====================================================================================================================',
        '\\u001B[0m'
    );

    const doc = new GoogleSpreadsheet(spreadsheetDocId, serviceAccountAuth);
    await doc.loadInfo(); // 문서 정보 로드
    return doc;
}

// 시트 데이터 매핑 함수
async function makeTranslationsMapFromSheet(sheet, lngsMap) {
    if (!sheet) {
        console.error('Sheet not found');
        return lngsMap;
    }

    const rows = await sheet.getRows();

    rows.forEach((row) => {
        const combinedKey = row._rawData[5]; // Combined key는 해당 위치에 있다고 가정

        if (combinedKey) {
            lngs.forEach((lang, langIndex) => {
                let translation = row._rawData[langIndex + 3]; // ko, en 필드에 접근

                if (translation) {
                    translation = translation.replace(/\\\\n/g, '\\n'); // 이스케이프된 \\n 변환
                    _.set(lngsMap, `${lang}.${combinedKey}`, translation);
                } else {
                    console.warn(`No translation found for ${lang} in row with combined key: ${combinedKey}`);
                }
            });
        }
    });

    return lngsMap;
}

// JSON 파일로 저장 함수
function saveTranslationsToFile(lngsMap) {
    lngs.forEach((lng) => {
        const localeJsonFilePath = path.join(__dirname, `${lng}.json`);
        const jsonString = JSON.stringify(lngsMap[lng] || {}, null, 2); // JSON 포맷으로 저장

        fs.writeFile(localeJsonFilePath, jsonString, 'utf8', (err) => {
            if (err) {
                throw err;
            }
            console.log(`File written successfully: ${localeJsonFilePath}`);
        });
    });
}

// 메인 업데이트 함수
async function updateJsonFromSheet() {
    const doc = await loadSpreadsheet();

    let lngsMap = lngs.reduce((acc, lng) => {
        acc[lng] = {}; // 언어별 빈 객체 초기화
        return acc;
    }, {});

    for (const sheet of doc.sheetsByIndex) {
        console.log(`Processing sheet: ${sheet.title}`);
        lngsMap = await makeTranslationsMapFromSheet(sheet, lngsMap);
    }

    saveTranslationsToFile(lngsMap);
}

// 함수 실행
updateJsonFromSheet();

// 모듈 내보내기
module.exports = {
    localesPath,
    lngs,
    loadSpreadsheet,
    updateJsonFromSheet,
    fileNm,
};

위 스크립트에 맞춰 아래와 같은 구조로 구글 시트를 작성한다.

페이지명	대상	원문	Key(N)	ko (한글번역)	en (영문번역)	combinedKey (key1 + 2 + 3)
Home	버튼	Login	-	로그인	Login	home.button.login
Home	메뉴	My Page	-	마이페이지	My Page	home.menu.mypage
Manager	타이틀	Main Manager	-	메인관리자	Main Manager	manager.title.main

페이지명, 대상, 원문, key1,2,3 : 사용자가 참고하기 위한 데이터

실질적으론 아래의 값이 번역에 사용된다.

ko : 한글번역 데이터

en : 영문번역 데이터

key : i18n 에서 참고하는 키 값 (위 스크립트의 combinedKey에 해당)

그럼 작성한 sync.js 스크립트를 실행하면 아래와 같이 현지화 파일이 생성 혹은 갱신될 것이다.

빌드 시에 현지화 데이터 업데이트 및 빌드를 같이 진행하려면 아래와 같이 스크립트를 작성하면 될 것이다.

package.json script 예시

"scripts": {
  "build": "npm run lang:sync && nuxt build",
  "lang:sync": "node ./locales/sync.js"
}

프론트엔드 현지화 예시

템플릿에서는 $t('key'), 스크립트에서는 t('key')로 사용한다.

언어 변경 시에는 반드시 setLocale 함수를 호출하여 변경하도록 한다.

템플릿 :

{{ $t(mobileTitle) }}

스크립트 :

    $alert(t('client.common.passwordHasBeenModified'));

layout/manager.vue

<template>
    <div id="manager">
	    <span>{{ $t(mobileTitle) }}</span>
	  </div>
</template>

const { setLocale, t } = useI18n();
const mainStore = useMainStore();

const selectedLanguage = computed({
  get: () => mainStore.lang,
  set: (value) => {
    mainStore.setLang(value);
    setLocale(value);
    document.documentElement.lang = value;
  }
});

const mobileTitle = computed(() => {
  switch (route.path) {
    case '/manager/home':
      return 'manager.home.Home';
  }
});

const updatePassword = async () => {
  try {
    await useCustomFetch.put("/common/password", { body: { newPassword, target, email } });
    $alert(t('client.common.passwordHasBeenModified'));
  } catch (e) {
    $toastError(e.message || t('common.toastError.An error occurred while processing the request'));
  }
};

[AWS S3] 접근 정책 수정

RuTel — Mon, 20 May 2024 19:48:45 +0900

IAM > 사용자 > [특정사용자] 선택
권한정책에서 정책 이름 클릭

이 정책에 정의된 권한 > 편집

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": [
				"s3:*",
				"s3-object-lambda:*"
			],
			"Resource": "*",
			"Condition": {
				"IpAddressIfExists": {
					"aws:SourceIp": [
						"11.11.111.111/32"
					]
				},
				"StringEqualsIfExists": {
					"aws:SourceVpc": [
						"vpc-e727fc89"
					]
				}
			}
		},
		{
			"Effect": "Allow",
			"Action": [
				"s3:*",
				"s3-object-lambda:*"
			],
			"Resource": "*",
			"Condition": {
				"IpAddress": {
					"aws:SourceIp": [
						"111.11.11.252/32",
					]
				}
			}
		}
	]
}

위에서 SourceIp를 추가한 다음

다음 > 변경사항 저장을 눌러 업데이트 한다.

[AWS] EC2 > Amazon Linux 볼륨 크기 늘리기

RuTel — Tue, 14 May 2024 14:49:55 +0900

Amazon EBS 볼륨 - Amazon EC2 인스턴스에 연결하는 스토리지 볼륨

* 진행 전에 볼륨을 늘릴 순 있어도 줄일 수 없다는 것에 유의

* 볼륨 크기 증가 시 비용 계산은 아래 참고

https://aws.amazon.com/ko/ebs/pricing/

1. EC2 인스턴스 목록에서 인스턴스 ID 클릭

2. 스토리지 탭에서 볼륨 ID 클릭

3. 작업 > 볼륨 수정 클릭

4. 크기 정보 수정

5. 일정시간 지난 후 인스턴스에 연결해 파티션 확인

 lsblk

6.　파티션 확장

 sudo growpart /dev/xvda 1

7. 파일 시스템 유형 확인

* XFS filesystem data와 같이 유형이 표시된다.

sudo file -s /dev/xvda1

7. 파일시스템 확장 (위에서 확인한 시스템 유형에 따라)

7-1. ext4의 경우

 sudo resize2fs /dev/xvda1

7-2. xfs의 경우

  sudo xfs_growfs

8. 확장된 크기 확인

df -h

참고 :

https://docs.aws.amazon.com/ko_kr/ebs/latest/userguide/recognize-expanded-volume-linux.html

EBS 볼륨 크기 조정 후 파일 시스템 확장 - Amazon EBS

다음과 같은 지침에서는 Linux용 XFS 및 Ext4 파일 시스템을 확장하는 프로세스를 안내합니다. 다른 파일 시스템을 확장하는 방법에 대한 자세한 내용은 해당 설명서를 참조하세요.

docs.aws.amazon.com

[Vue3] ref와 reactive 차이

RuTel — Wed, 3 Apr 2024 15:39:03 +0900

반응형 데이터를 만들기 위한 함수

ref

<script setup>
import { ref } from 'vue'

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'HTML 배우기', done: true },
  { id: id++, text: 'JavaScript 배우기', done: true },
  { id: id++, text: 'Vue 배우기', done: false }
])

사용 대상: 모든 종류의 값 (기본 데이터 타입 또는 객체/배열).
접근 방법: .value 속성을 통해 값에 접근하고 변경합니다.
주요 특징: 기본 데이터 타입(예: 문자열, 숫자, 불리언)에 반응성을 부여할 수 있으며, 객체나 배열에도 사용 가능하지만, 단일 값에 대한 반응성을 관리하는 데 주로 사용됩니다.

reactive

<script setup>
import { reactive } from 'vue'

let id = 0

const state = reactive({
  newTodo: '',
  hideCompleted: false,
  todos: [
    { id: id++, text: 'HTML 배우기', done: true },
    { id: id++, text: 'JavaScript 배우기', done: true },
    { id: id++, text: 'Vue 배우기', done: false }
  ]
})
</script>

사용 대상: 객체나 배열.
접근 방법: .value 속성 없이 객체나 배열 내부의 속성에 직접 접근합니다.
주요 특징: 객체나 배열 전체에 대한 반응성을 부여합니다. 중첩된 객체나 배열을 포함하여 구조 내의 모든 데이터에 반응성이 적용됩니다.

reactive 사용의 이점

직관적인 접근과 수정: reactive 객체의 속성에 접근하거나 수정할 때, .value를 사용할 필요가 없습니다. 이는 코드를 좀 더 직관적으로 만들고, 일반 JavaScript 객체와 동일한 방식으로 작업할 수 있게 합니다.
중첩된 반응성: reactive를 사용하면, 객체 내의 중첩된 속성도 자동으로 반응성이 적용됩니다. 따라서 객체 내부 구조가 복잡해지거나 중첩된 경우에도, 별도의 처리 없이 모든 레벨에서 반응성을 유지할 수 있습니다.
코드 조직: 여러 반응형 데이터를 하나의 reactive 객체에 그룹화하여 관리할 수 있습니다. 이는 관련 데이터와 로직을 함께 묶어서 관리하기 편리하게 해줍니다, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

선택 기준

기본 타입(문자열, 숫자, 불리언 등)에 대한 반응성이 필요한 경우, 또는 Vue 템플릿에서 직접 참조되는 단일 변수에 대해서는 ref를 사용하는 것이 좋습니다.
객체나 배열과 같은 복합적인 데이터 구조에 대해 반응성을 제공하고, 중첩된 데이터 구조를 다루거나 여러 관련 데이터를 함께 관리해야 하는 경우 reactive를 사용하는 것이 더 적합할 수 있습니다.

[Vue3] Composition API

RuTel — Wed, 3 Apr 2024 15:13:34 +0900

전통적인 Options API

Vue에서의 스크립트 구현은 크게 두가지 방식이 있다. 전통적인 Options API와 Composition API이다.

전통적인 Options API

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [],
      nextId: 0
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: this.nextId++, text: this.newTodo });
      this.newTodo = ''; // 입력 필드 초기화
    }
  }
}
</script>

Composition API

Vue 3의 Composition API는 컴포넌트 로직을 구성하는 새로운 방법을 제공합니다. 이 API의 도입은 Vue 애플리케이션을 설계하고 개발하는 방식에 근본적인 변화를 가져왔습니다. Composition API의 특징과 장점은 다음과 같습니다:

특징

반응형 상태 정의: ref와 reactive 함수를 사용하여 반응형 상태를 선언적으로 정의할 수 있습니다. 이 상태들은 컴포넌트의 템플릿에서 직접 사용될 수 있으며, 상태 변경 시 자동으로 화면을 업데이트합니다.
setup 함수: 컴포넌트의 반응형 상태, 계산된 속성, 메서드 등 모든 로직을 setup 함수 내에 정의합니다. setup 함수는 컴포넌트의 옵션/라이프사이클 훅보다 먼저 실행되며, 여기에서 정의된 모든 값과 함수는 템플릿에서 직접 사용할 수 있습니다.
함수 기반의 구성: 로직을 재사용 가능한 함수로 캡슐화하고 조합하여 컴포넌트를 구성할 수 있습니다. 이러한 접근 방식은 컴포넌트 간에 코드를 재사용하고 조합하기 쉽게 만듭니다.

장점

로직의 재사용 및 조직화: Composition API를 사용하면 로직을 기능별로 구성하고 필요한 곳에서 재사용할 수 있습니다. 이는 코드의 중복을 줄이고, 프로젝트의 유지보수성을 향상시킵니다.
유연성: 컴포넌트의 로직을 더 유연하게 조직할 수 있습니다. 예를 들어, 관련된 모든 반응형 상태와 함수를 함께 그룹화하여 관리할 수 있으며, 이는 컴포넌트의 가독성을 크게 향상시킵니다.
타입스크립트와의 호환성: Composition API는 타입스크립트와 더욱 잘 호환됩니다. setup 함수 내에서 정의된 상태와 함수에 타입을 적용하기 쉬워, 타입스크립트를 사용하는 프로젝트에서 타입 안정성과 개발 경험을 향상시킬 수 있습니다.
응집력 있는 코드 베이스: 기능별로 로직을 그룹화하고 재사용할 수 있기 때문에, 관련 로직이 물리적으로 가까운 위치에 있게 됩니다. 이는 응집력 있는 코드 베이스를 유지하는 데 도움이 됩니다.
더 나은 성능: Composition API를 사용하면 필요한 로직만을 정확히 구성하여 사용할 수 있기 때문에, 불필요한 로직의 실행을 최소화할 수 있습니다. 이는 애플리케이션의 성능을 최적화하는 데 기여할 수 있습니다.

Composition API는 Vue 애플리케이션을 개발할 때 더 큰 유연성과 향상된 코드 재사용성을 제공합니다. 이는 특히 대규모 애플리케이션 또는 복잡한 컴포넌트 구조를 가진 프로젝

트에서 그 장점이 두드러집니다.

Vue 3 초기 버전에서의 Composition API 사용 예시

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    const addTodo = () => {
      todos.value.push({ id: todos.value.length + 1, text: newTodo.value });
      newTodo.value = '';
    };

    return { newTodo, todos, addTodo };
  }
};
</script>

Vue 3 초기 버전에서 Composition API를 사용할 때는 setup 함수 내에서 컴포넌트의 반응형 상태, 계산된 속성, 메서드 등을 정의하고, 필요한 값들을 객체로 반환하여 템플릿에서 사용할 수 있도록 했습니다.

Vue 3.2 이후에서의 <script setup> 구문 사용 예시

Vue 3.2부터 도입된 <script setup> 구문을 사용하면, setup 함수 내에서 반환 과정 없이 직접 변수와 함수를 정의할 수 있으며, 이들은 자동으로 템플릿에서 사용 가능해집니다. 이로 인해 코드가 더욱 간결하고 선언적으로 변화했습니다.

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const newTodo = ref('');
const todos = ref([]);

const addTodo = () => {
  todos.value.push({ id: todos.value.length + 1, text: newTodo.value });
  newTodo.value = '';
};
</script>

주요 차이점

코드 간결성: <script setup> 구문을 사용하면, 컴포넌트의 로직을 더욱 간결하게 작성할 수 있습니다. setup 함수 내에서 반환 과정 없이 모든 로직을 정의할 수 있으며, 이는 코드의 가독성과 유지보수성을 크게 향상시킵니다.
자동 import 추론: <script setup>은 IDE와 도구에서 더 나은 타입 추론과 자동 완성을 제공합니다. 또한, Vue 컴파일러는 <script setup> 내에서 사용된 Vue API를 자동으로 감지하여 필요한 코드를 자동으로 import 합니다.
컴포넌트 정의의 선언적 표현: <script setup> 구문은 컴포넌트의 정의를 더 선언적으로 만들어 줍니다. 이는 Vue 컴포넌트의 구조와 로직을 더 명확하게 표현할 수 있게 해줍니다.

핸들러(handler)와 콜백 함수(callback function)의 차이

RuTel — Wed, 3 Apr 2024 14:07:55 +0900

콜백 함수 (Callback Function)

정의: 콜백 함수는 다른 함수에 인자로 전달되는 함수입니다. 이 함수는 외부 함수의 내부 로직에 의해 특정 시점에 호출됩니다. 콜백 함수는 비동기 처리, 이벤트 리스너 등록, 고차 함수(higher-order function)에서 자주 사용됩니다.
용도: 콜백 함수는 비동기 작업의 결과를 처리하거나, 특정 이벤트가 발생했을 때 수행할 작업을 정의하는 데 사용됩니다. 예를 들어, 서버로부터 데이터를 요청하고 그 데이터가 도착했을 때 실행될 함수, 또는 사용자가 버튼을 클릭했을 때 실행될 함수 등이 콜백 함수로 사용될 수 있습니다.
예시:

// setTimeout 함수에 전달된 익명 함수는 콜백 함수입니다.
setTimeout(() => {
    console.log("1초 후에 실행됩니다.");
}, 1000);

핸들러 (Handler)

정의: 핸들러는 특정 이벤트나 조건에 대응하여 실행되도록 지정된 함수를 의미합니다. 이 용어는 주로 이벤트 처리와 관련된 맥락에서 사용됩니다.
용도: 이벤트 핸들러는 사용자의 입력, 시스템 이벤트, 네트워크 응답 등 다양한 이벤트에 반응하기 위해 사용됩니다. 웹 개발에서는 DOM 이벤트(클릭, 키보드 입력 등)를 처리하는 함수를 이벤트 핸들러라고 부릅니다.

예시:

<!-- HTML에서 버튼 클릭 이벤트에 대한 핸들러를 정의합니다. -->
<button onclick="alert('클릭됨!')">클릭하세요</button>

// JavaScript에서 이벤트 리스너를 추가하는 방식으로 핸들러를 지정할 수 있습니다.
document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다.");
});

결론

요약하자면, 콜백 함수는 넓은 의미에서 다른 함수의 실행 완료, 비동기 작업의 완료 등 다양한 상황에서 호출되도록 예정된 모든 함수를 말하며, 핸들러는 특히 이벤트 처리와 관련된 맥락에서 사용되는 용어입니다. 따라서 모든 이벤트 핸들러는 콜백 함수의 한 형태라고 볼 수 있지만, 모든 콜백 함수가 이벤트 핸들러는 아닙니다.

[JavaScript] Proxy

RuTel — Wed, 3 Apr 2024 13:28:59 +0900

Proxy : 대리

Proxy는 JavaScript에서 객체의 기본 동작(예: 속성 접근, 할당, 열거, 함수 호출 등)을 사용자 정의 동작으로 가로채서(trap) 조작할 수 있게 해주는 기능입니다.

즉, 객체에 대한 작업을 가로채서 그 작업이 수행되기 전, 수행된 후, 또는 작업을 완전히 대체하여 추가적인 로직을 실행할 수 있게 해줍니다. 이런 특징 때문에 Proxy는 다양한 고급 작업과 패턴에 유용하게 사용될 수 있습니다.

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

proxy1.message1 = 'hi';
console.log('target', target);

위의 코드에서 target의 message1 속성의 값은 hi로 변경되게 된다.

아래 예제를 통해 Proxy로 할 수 있는 다양한 가능성을 살펴보겠다.

1. 속성 읽기 접근 제어

속성을 읽을 때마다 로그를 출력하도록 합니다. get은 속성값을 가져오기 위한 trap(가로채기)이다.

(...)
const handler1 = {
  get(target, prop, receiver) {
    console.log(`속성 '${prop}'에 접근함`);
    return Reflect.get(...arguments);
  }
};

const proxy1 = new Proxy(target, handler1);

console.log(proxy1.message1); // 속성 'message1'에 접근함 -> hello
console.log(proxy1.message2); // 속성 'message2'에 접근함 -> everyone

Proxy는 반드시 new 키워드로만 생성가능하다.

2. 속성 쓰기 접근 제어

속성에 값을 할당할 때 유효성 검사를 추가합니다. 예를 들어, message1에는 오직 문자열만 할당될 수 있게 합니다.

(...)
const handler1 = {
    set(target, prop, value) {
        if (prop === "message1" && typeof value !== "string") {
            throw new Error("message1은 문자열이어야 합니다.");
        }
        target[prop] = value;
        return true; // 성공적으로 값을 할당했음을 나타냄
    }
};

const proxy1 = new Proxy(target, handler1);

proxy1.message1 = "안녕하세요"; // 성공
try {
    proxy1.message1 = 123; // Error: message1은 문자열이어야 합니다.
} catch (e) {
    console.error(e.message);
}

3. 속성 존재 여부 확인

객체에 특정 속성이 있는지 확인할 때마다 로그를 출력합니다.

const handler1 = {
  has(target, prop) {
    console.log(`${prop} 속성이 객체에 존재하는지 확인`);
    return prop in target;
  }
};

const proxy1 = new Proxy(target, handler1);

console.log('message1' in proxy1); // message1 속성이 객체에 존재하는지 확인 -> true
console.log('message3' in proxy1); // message3 속성이 객체에 존재하는지 확인 -> false

이외에도 다양한 Handler Function을 통해 객체의 기본동작을 정의하고 유연하게 사용할 수 있다.

Proxy생성자와 Handler Function에 대해서는 다음 문서를 참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy

Proxy() constructor - JavaScript | MDN

The Proxy() constructor creates Proxy objects.

developer.mozilla.org

[AWS Linux] Git Action Runner에서 Dotnet Core 6 Error발생 시

RuTel — Mon, 11 Mar 2024 14:50:40 +0900

AWS 리눅스 환경에 CI & CD를 적용하는데

액션러너 설정에서 다음과 같은 오류가 나며 진행이 되지 않았다.

Libicu's dependencies is missing for Dotnet Core 6.0
Execute sudo ./bin/installdependencies.sh to install any missing Dotnet Core 6.0 dependencies.

기본적으로 AWS Linuxt는 X64 아키텍처라곤 하나 위에서 알려주는 .sh 파일 실행만으론 의존성이 해결되지 않는다.

종속성 문제이기 때문에 해결법은 필요한 라이브러리를 따로 설치해주면 된다.

sudo yum install perl-Digest-SHA -y

sudo yum install libicu -y

이후에 ./config.sh를 실행하면 정상적으로 GitHub의 액션런너와 연결이 되고 설정과정을 진행할 수 있게 된다.

[Nuxt.js + Node.js] 백엔드에서 업로드한 정적파일을 프론트에서 참조하기

RuTel — Sun, 22 Oct 2023 15:13:43 +0900

백엔드에서 이미지 파일을 static 폴더에 올렸다면 일반적으로는 프론트에서 참조할 수가 없다.

하지만 express는 이미지 파일과 같은 정적 파일들을 쉽게 참조하여 반환할 수 있는 메소드를 제공한다.

| Back-end

app.use('/static', express.static(path.join(__dirname, 'static')));

express.static 메소드는 node프로세스가 실행되는 path에 따라 상대적이므로 위와 같이 환경변수인 __dirname을 써서 디렉토리명을 지정해줄 수 있다. node 프로세스가 실행되는 같은 경로의 static 폴더를 참조한다.

그러면 아래와 같이 참조했을 때 백엔드의 static 디렉토리내의 모든 파일을 참조할 수 있게 된다.

http://localhost:3000/api/static/images/mt/resize-1697954077172.jpg

| Front-end

다음은 nuxt.config.js를 수정하여

api라는 경로로 들어왔을 때 경로를 다시 쓰기해주도록 한다.

 axios: {
        proxy: true,
        prefix: '/api'
    },

    proxy: {
        '/api': { target: process.env.AXIOS_BASE_URL, pathRewrite: { '^/api/': '/' } },
    },

[프론트 .env 폴더에 정의된 api 주소]

AXIOS_BASE_URL=http://127.0.0.1:10072

만약 DB에 저장된 path과 다음과 같다면 프론트의 메소드나 computed 속성으로 경로를 반환하면 될 것이다.

static/images/mt/resize-1697954077178.jpg

  getImageUrl(img) {
            if (img.path && img.path.includes('static/images')) {
                return '/api/' + img.path;
            }
            return URL.createObjectURL(img);
        },

그러면 백엔드에서 굳이 파일객체를 리턴한다는지 리소스가 많이들고 비효율적인 방법을 쓰지않고도 쉽게 리소스를 참조할 수 있게 된다.