개발새발!

프로프레임(proframe) 서비스 개발방법 정리

컴슈터 — Wed, 10 Dec 2025 22:20:39 +0900

이번 프로젝트에서 proframe4를 처음으로 사용해 봤다. 티맥스소프트에서 만든 proframe은 B2B 제품이다 보니, 일반유저가 해당 제품을 사용해 보려면 proframe을 사용하는 프로젝트에 투입되어야지 쓸 수 있다.

보안상의 문제로 자세한 내용은 다룰 수 없지만, proframe을 개발하면서 알게 된 표면적인 내용을 정리해보려고 한다. proframe 개발 순서는 DTO > DAO > BO > SO 순서로 개발하기를 권장한다.

프로프레임 서비스 개발

DTO 작성하기

DTO는 데이터를 전달하기 위한 Data Object.
DBIO를 호출하거나 SO, BO 오퍼레이션의 in/out 객체로 사용
DTO 내에서 타 DTO include 가능
PDTO (pair DTO) : 복수건 처리 가능한 DTO. 쉽게 말해 DTO List 로 보면 됨. DTO 파일 내 우클릭 > Pair DTO 생성할 수 있다.
화면과 통신하는 DTO는 xml 파일 체크 필요하다. 체크시 '~DTOMsgXml' 파일이 만들어짐

DAO 작성하기

DB 데이터를 컨트롤하며, 쿼리 작성하는 부분.
바인드 변수명은 :변수명 으로 한다.
주의할 점 : 쿼리 수정 후 [파라미터 적용] 클릭, [Query Test_Apply] 버튼 클릭해야 쿼리 내용이 반영된다.
DBIO 실행 타입
- 1) persist : 단일 테이블에 대한 CRUD 기능 수행
- 2) view : persist에서 지원할 수 없는 여러 테이블에 대한 join 등의 select 수행
- 3) execute : persist에서 지원할 수 없는 insert/update/delete 등 기능 수행
다이내믹 쿼리 사용 시 /*DYNAMIC_KEYWORD*/ 작성하고, 호출 메서드를 아래와 같이 설정한다. BO단에서 dynamicBind.setBindingToDAO(_config)와 같이 바인딩 세팅 필요.
- 1) selectDynamic : 다이내믹 쿼리 1개
- 2) selectMultiDynamic :다이내믹 쿼리 1개 이상
DTO 기존 항목 수정/삭제 시, 변경된 DTO in/out으로 사용하는 DAO 쿼리문을 재생성(재매핑) 해야 한다.

BO(Business Object) 작성하기

BO는 비즈니스 기능을 수행한다.
오른쪽 파렛트를 통해 모듈 생성 가능.
- 1) 이너모듈 : 주석처럼 사용하기도. (가독성 위해)
- 2) 버츄얼 모듈
- 3) 루프 모듈
BO 오퍼레이션 생성 후, 위에서 생성한 DAO 오퍼레이션을 드래그 앤 드롭한다.

SO (Service Object) 작성하기

SO 오퍼레이션 생성 후, 위에서 생성한 BO 오퍼레이션을 드래그 앤 드롭한다.
입출력 (입력 DTO, 출력 DTO 매핑 정의 할 수 있다)
매핑방법
- 1) Bypass : 소스/타깃 DTO가 동일할 때 사용
- 2) Transformation : 일부 칼럼만 선택적으로 원하는 Target 칼럼을 지정할때 사용. Source/Target 명시 후 Assign에 칼럼을 지정한다. (cloneOption에 주의한다)

Deployment Descripter

SO까지 개발이 끝나고 나서 서버에 자원 반영 하려면,

proframe-application.xml 먼저 선 업데이트 후,
반영할 자원 우클릭 > 프로프레임 > Generate Applicaion DD 클릭하여 Deployment Descripter를 한다.
이후 proframe-application.xml을 커밋해 준다. (커밋 이후 이미 등록된 오퍼레이션은 삭제하면 안 된다고 함)

버전 관리

체크아웃 : 자원 우클릭 > 팀 > 체크아웃 선택 시 검정체크박스가 생기면서 수정 및 커밋 가능해짐.
가져오기 : 서버에 저장된 서비스모듈을 가져올 수 있음.

용어참고

PC : Process Component
CS : Composite Service
BS : Basic Service
EC : Entity Component
UC : Utility Component

2025~2030년 금융권 프로젝트 향후 계획

컴슈터 — Mon, 8 Dec 2025 10:54:59 +0900

BI Korea 기사를 보고 개인적으로 정리한 내용입니다.

1. NH농협은행 – 프로젝트 'NEO' (총 6200억 / 60개월)

사업 구조
   • 1단계: IT 기반 기술 검증
   • 2단계: 비대면 채널 중심 '스몰뱅킹' 구축, PI 퀵 윈
   • 3단계: 마무리 단계

사업자 구도
   • 신규 코어뱅킹 패키지: SK AX '넥스코어'
   • SK AX가 1단계 제안 불참 → LG CNS가 1단계 + 후속 2·3단계 독식 가능성이 높음

2. 국민은행 – 코볼 to 자바 전환 로드맵

최근 수주
   • 196억 규모: 개인여신 플랫폼 재구축
   •   수주: KB데이타시스템 + LG CNS

향후 계획
   •   2026년 하반기
   •   비대면 채널 전면 개선(스타뱅킹 리뉴얼)
   •   기업여신 개편
   •   두 사업 합산 800~1000억

전체 로드맵
   •   3~5년간
   •   수신·외환 → x86 + 리눅스 + 자바 전환
   •   메인프레임 코볼 완전 탈피 로드맵

3. 우리은행 – 'U to L' 계정계 전환

사업 상황
   •   2025년 발주 → 2026년 중반으로 지연
   •   채널고도화 계약이 늦어지면서 U to L도 늦어짐

U to L 규모
   •   원안: 약 1200억
   •   일정 지연 + 남양주 제2 전산센터 연계 시: 2000억 이상으로 확대될 가능성

4. SC제일은행 – 애플리케이션 현대화

추진 방향
   •   메인프레임 기반 계정계 유지 중
   •   PI 컨설팅(EY한영) 거의 완료
   •   2026년부터 COBOL → Java 전면 개편 본격화 전망

5. 새마을금고 – 차세대 코어뱅킹 (2000억+)

변수
   • 12월 17일 중앙회장 선거 중요
   • 현 김인 회장(IT 투자 적극) 연임 시: 2000억+ 차세대 코어뱅킹 개편 가시권
   • 교체시: 사업 불확실

6. 신협중앙회 – 차세대 정보시스템

진행 현황
   •   2025년 초: 차세대 정보시스템기획단 출범 예정
   •   김윤식 회장 의지가 강해 대규모 투자 확정적
   •   수천억 대 규모 예상(정확한 금액 미공개)

금융IT 트렌드

향후 금융IT 빅 사업이 많아질 전망이다. 농협은행·국민은행·우리은행·SC제일은행·새마을금고·신협까지 한국 금융권 전반이 "코볼 → 자바 / 메인프레임 → x86-리눅스"로 대규모 전환하며 향후 3~5년간 역대급 SI 시장이 열리는 상황이다.

이에 따라 인력 수급 이슈가 있다. 금융권 IT 전문인력 부족 심각할 우려가 있다. 특히 신용 업무 아키텍처 가능한 특고급 인력 수요 폭증할 것이며, 중급 개발자를 교육 후 투입하는 사례도 증가할 수도 있다고 한다.

개발하다가 오류가 발생하면 손부터 움직이지 말자

컴슈터 — Sun, 7 Dec 2025 15:27:36 +0900

개발자로 일하다 보면 실력 있는 선배님들을 보며 느낀 점이 있다.

어떤 오류가 발생했는데 가만히 쳐다보기만 한다?
먼저 손부터 대며 막 고치지 않고, 가만히 모니터를 바라본다.

문제를 얼른 해결한답시고 손부터 나가지 않는다. 조용히 모니터를 보고 응시한다.

지켜보니 그 시간에 증상을 먼저 정리한 거였다.
정확히 뭐에서 터졌는지를 확실히 짚고 넘어가고 나서 시작한다.
오류 나는 부분이 여기 아닐까? 대충 때려보는 게 아니라, 명확한 근처를 찾고 움직인다.

오류 메시지가 있다면 로그를 먼저 확인한다. 대부분의 답은 항상 에러로그에 나와있다.

잘하는 개발자들은 이상하게 느리지만, 빠르게 해결책을 도출해 낸다.
그 사실을 알고 나서부터 잘 되지는 않지만 최대한 손부터 움직이지 않으려고 한다.

이 오류가 어떤 때에 발생하는지 증상을 정리하고, 왜 발생하는지 문제의 근원지를 찾기 위해 고심하자.
머릿속으로 정리되어 해결점이 명확해진다면 그때 손을 움직이자.

프리랜서 개발자 실업급여 받는 방법 (실업급여 수급조건)

컴슈터 — Wed, 20 Nov 2024 21:33:24 +0900

프리랜서 개발자도 실업급여를 받을 수 있을까?

소프트웨어 기술자 산재보험 및 고용보험 의무가입으로 변경되면서, 프리랜서 개발자도 잘하면 실업급여를 탈 수 있게 되었다.

언젠가는 실업급여를 타야할 때가 있을지 모르니 실업급여에 관해 간단하게 정리해봤다. 내가 직접 실업급여를 받아본 것이 아니라, 인터넷으로 알아본 정보들을 정리한 것이니 부정확한 내용이 있을 수 있다.

프리랜서 개발자도 실업급여 받을 수 있다

특수형태 근로종사자의 경우 고용보험, 산재보험이 의무로 바뀌면서 실업급여 혜택도 받을 수 있게 되었다. 그리고 2021년 7월 이후 소프트웨어 기술자도 특수형태 근로종사자에 편입되어있다.

즉 고용보험에 의무 가입하게 되면서, 프리랜서 개발자도 실업급여에 대한 수급자격을 얻을 수 있는 기회가 생겼다고 보면 된다. 프로젝트 계약이 종료되면 업체에서 고용보험 피보험자 자격상실을 신청하게 되면서 수급자격이 생긴다. 이때 정상적인 계약기간만료, 사업종료일 경우에도 실업급여를 신청할 수 있다.

단 무조건적은 아니고 12개월 이상 고용보험을 낸 경우에 실업급여 신청이 가능하다. 그 외에도 아래 5가지 조건을 충족해야 하고, 귀책사유로 인해 해고된 경우가 아니어야 한다.

실업급여 수급조건

이직일 이전 24개월 동안 피보험 단위기간이 통산하여 12개월 이상 고용보험 낸 경우
근로 또는 노무제공 의사와 능력이 있음에도, 취업을 하지 못하는 상태
적극적으로 재취업 활동 중이어야 함
이직사유가 비자발적임
노무계약으로부터 발생되는 월보수액이 2022년 기준 80만원 이상 충족해야 함
(단기 노무제공자의 경우 소득은 확인하지 않음)

실업급여 지급액과 평균 보수

실업급여 지급액은 고용보험 가입 기간에 따라 달라진다. 아래 표처럼 최소 120일(4개월)에서 최대 270일(9개월) 범위 내에서 퇴직 전 평균 보수의 60%를 지급 받는다.

연령 및 가입기간	1년 미만	1년 이상~3년 미만	3년 이상~5년 미만	5년 이상~10년 미만	10년 이상
50세 미만	120일	150일	180일	210일	240일
50세 이상 및 장애인	120일	180일	210일	240일	270일

이때 평균 보수는 이직일 이전 12개월간 신고된 보수 총액 / 이직일 이전 12개월간 총 일수(고용보험 가입일수)를 계산한 값이다.

실업급여 수급신청 방법

먼저 고용노동부 1350로 전화하면 관할고용센터 위치를 안내해준다. 그 곳에 찾아가서 본인이 실업급여 대상에 해당되는지, 된다면 월 지급액, 몇개월 동안 지급되는지 등 산정은 어떻게 이루어지는지 안내해줄 것이다.

참고로 개인사업자는 사업자 휴업신고 후 방문신청해야 하며, 3.3% 프리랜서는 인터넷 신청도 가능하다. 개인사업자인 프리랜서는 본인이 자발적으로 고용보험을 낸 경우에 실업급여를 받을 수 있는것 같다. 그 외에 자세한 내용은 1350로 전화 문의해보자.

실업급여 신청기한

실업급여(구직급여)는 퇴직 다음날부터 12개월 이내 신청과 수급완료가 이루어져야 한다. 즉 최대 1년까지 실업급여를 신청할 수 있으니 수급조건에 해당한다면 바로 신청하는게 좋다.

참고로 실업급여를 알아보다 보니, 실업급여 외에도 활용할 수 있는 다른 제도가 있었다. 조기재취업수당, 출산전후급여 등의 수당도 있으니 현명하고 효율적으로 활용하면 프리랜서 공실일 때 부담을 줄일 수 있을 것이다.

참고

프로프레임(proframe) 특징

컴슈터 — Sun, 19 May 2024 18:31:02 +0900

ProFrame 프레임워크에 대해 간단하게 정리해본다.

프로프레임 (ProFrame)

ProFrame은 티맥스소프트에서 개발한 애플리케이션 프레임워크 솔루션이다. 티맥스 홈페이지에서는 ProFrame을 "성능 및 안정성이 검증된 아키텍처와 표준화된 개발 및 운영 환경을 제공하는 통합 애플리케이션 프레임워크" 라고 설명하고 있다.

프로프레임 특징

비즈니스 중심의 개발 환경

거래 유형별 템플릿 이용이 가능하고, 표준 API를 통한 시스템 자원 접근 가능
개발자는 순수 업무 로직만 구현해도 비즈니스 목적에 맞는 애플리케이션을 구축할 수 있음

EMB 기반의 개발 생산성 향상

ProFrame은 EMB(Enterprise Module Bus) 아키텍처 기반임
다양한 형태 모듈로 개발 환경에서 코딩 없이 디자인만으로 프로그래밍 가능
업무 단위별 모듈의 재사용이 가능해 모듈 간의 분해 및 조립을 통해 새로운 서비스 개발 가능
다소스코딩이 최소화되고 업무 로직의 재사용이 가능해 개발이 표준화되므로 개발의 효율성 대폭 향상

고성능 및 안정성 보장

고도의 기술이 필요한 메모리, DB 로깅 등의 시스템적인 기능들을 이미 검증된 기술로 제공
타사 대비 디버깅 기능을 강화하여 애플리케이션의 성능과 안정성 보장

아래 사진이 프로프레임 예시이다. 업무 단위별로 모듈이 분리되어 마치 flowChart처럼 보인다.

출처: https://pangate.com/159

프로프레임 관련 내용 정리

구글링을 하면서 ProFrame 관련해서 알게된 내용을 정리해둔다.

ProFrame 개발환경은 C 언어용과 Java 버전용이 있다.
ProFrame은 전자정부프레임워크 또는 Spring은 전혀 무관하며, ProFrame은 TP(Transaction Processing)를 구현하기위한 프레임워크 환경이다.
ProFrame 제품이 B2B (Business to Business) 제품이다보니 기업환경에서 프로젝트를 경험해보지 않는 이상
일반유저 입장에서 제품을 사용해볼 수 있는 기회가 거의 없다.
ProFrame은 Eclipse 툴을 기반으로 만들어져 있어서 개발자가 처음 접근할 때 친숙하게 접근할 수 있다.
하지만 ProFrame 스튜디오가 단순 이클립스 기반의 로컬 IDE 처럼 보이지만 클라이언트 PC 외에도 서버, DB서버가 구성되어야 한다. 다양한 설정들이 복잡하게 얽혀있기 때문에 티맥스소프트 엔지니어의 도움없이는 개발/테스트 환경 구축이 쉽지 않다.
Proframe 업무개발자는 정말 순수 업무 로직만 개발하면 된다. 개발자 입장에선 편리하다는 장점이 있지만 너무 많은 편의로 인해 개발 실력을 쌓을 많은 기회를 놓치게 된다.
쉽게 말해서 입력구조체를 만들고 데이터를 받아 처리하는 업무로직을 구현하고 출력구조체로 가공된 데이터를 던져주기만 하면 된다. 인프라 레벨의 모든것을 프레임워크가 처리해주므로 편리하다.
개발된 시스템을 운영하는 운영자나 기업입장에서는 ProFrame이 정말 좋은 선택지가 된다. ProFrame를 이용해서 개발한 시스템은 EMB design이라는 방식으로 한눈에 업무 파악을 하기 쉽고, 업무 로직들이 모두 각각의 업무 모듈로 개발되어 동적링크로 구성되기 때문에 해당 업무모듈만 변경 후 테스트, Hot deploy로 간단하게 변경이 가능하다.
인프라 레벨은 개발자가 전혀 손대지 않기 때문에 업무 변경에 있어서 훨씬 안전하고 인프라 레벨의 문제는 티맥스소프트에서 기술지원을 받으면 되기 때문에 책임 소재의 부분에 있어서도 자유롭다.
ProFrame은 철저하게 System Software의 영역과 Application의 영역을 구분하는것을 지향한다. 최대한 AP 개발자들에게 편의를 제공해 업무 로직 구현에만 집중하게 하고 인프라 레벨은 알아서 관리해준다. 익숙해지면 정말 편하고 생산성이 매우 높아진다.
현재 티맥스에서는 ProFrame 이후로 ProObject를 차세대 애플리케이션 프레임워크로 밀고 있는 것 같다.

옛날 자료이긴 해도 ProFrame 관련 가이드를 확인하고 싶다면 기술지식 메뉴를 참고하자.

References

개인생각 ProFrame에 대한 상반된 시선

Ionic Life cycle (아이오닉 앵귤러 생명주기) 정리

컴슈터 — Sat, 18 May 2024 15:08:07 +0900

Ionic life cycle를 참고하였습니다.

이번 프로젝트에서 Ionic & Angular로 구축된 모바일 프로젝트를 진행 중이다. 개발을 하다보니 Page life cycle(페이지 생명주기)가 어떤 순서로 작동하는지 알아둘 필요가 있어서 간단하게 정리해본다.

Ionic 페이지 생명 주기

Ionic 페이지 생명 주기는 아래 순서대로 이벤트가 발생한다. Ionic에서는 angular의 생명주기 이벤트도 수용하고 있기 때문에, angular 로 구현되어 있다면 angular의 lifecycle도 같이 고려해 보아야 한다.

ngOnInit
ionViewWillEnter
ionViewDidEnter
ionViewWillLeave
ionViewDidLeave
ngOnDestroy

이게 뭔 순서인가 싶지만, 1번과 6번을 제외하고는 비슷한 단어라서 유추하기 쉽다. 1번과 6번은 angular에서 제공하는 대표적인 생명 주기 이벤트이고 나머지는 ionic에서 제공하기 때문에 ion이라는 키워드가 붙는다.

Angular 생명주기 이벤트

1. ngOnInit : 컴포넌트 초기화 중에 1번 실행된다. 로컬 멤버를 초기화하고 딱 한 번만 수행하면 되는 서비스를 호출할 때 사용한다.

6. ngOnDestroy : Angular가 해당 뷰를 파괴하기 직전에 실행된다. 예를 들어 Observable 구독 취소 같이 정리시 유용하다.

Ionic 생명주기 이벤트

Ionic 생명주기 이벤트는 쉽게 설명하자면 처음 페이지에 들어갈 경우 2, 3번이 호출되고 해당 페이지를 나가면 4, 5번이 호출된다.

2. ionViewWillEnter : 페이지가 로드되고, active 되기 전에 호출된다. event listener 등 뷰에 진입하는 초기에 해야 하는 작업들을 선언하기에 적합하다.

3. ionViewDidEnter : 페이지가 active 된 직후에 호출된다. 직전의 ionViewWillEnter와 비슷하게 사용한다. (데이터를 로드할 때 ionViewWillEnter를 사용하여 성능 문제가 발생하면 대신 ionViewDidEnter에서 데이터 호출을 수행할 수 있음)

4. ionViewWillLeave : 페이지에서 나가고, active 상태가 해제되기 직전에 호출된다. event listener의 해제 등, 페이지를 나가는 시점에 해야 하는 작업들을 선언하기에 적합하다.

5. ionViewDidLeave : 페이지가 active 상태가 해제된 직후에 호출된다.

Ionic & Angular 생명주기 예시

아래는 ionic docs에서 제공하는 Ionic & Angular lifeCycle 예시이다. 2개의 페이지를 왔다갔다 이동하면서 Ionic 생명주기의 순서를 확인할 수 있다.

page 1 페이지 진입시 생명주기

page 1 ngOnInit // 최초 1번만 실행
page 1 ionViewWillEnter // page 1 진입 예정
page 1 ionViewDidEnter // page 1 진입

page 1 -> page 2 버튼 클릭시 생명주기

page 2 ngOnInit // 최초 1번만 실행
page 1 ionViewWillLeave
page 2 ionViewWillEnter // page 2 진입 예정
page 2 ionViewDidEnter // page 2 진입
page 1 ionViewDidLeave

page 2 -> page 1 버튼 클릭시 생명주기

page 2 ionViewDidLeave
page 1 ionViewWillEnter // page 1 진입 예정
page 1 ionViewDidEnter // page 1 진입
page 2 ionViewDidLeave
page 2 ngOnDestroy

페이지 진입 시에는 angular가 먼저 시작된 후 ionic이 실행되며, 페이지를 나갈 때에는 ionic이 먼저 종료된 이후, angular가 종료된다. 스택처럼 쌓이는 방식이라고 보면 될 것 같다.

위에서 다룬 lifeCycle 이벤트 말고 다양한 생명주기 이벤트들이 있다. 자세한 가이드는 ionic docs에서 참고하자.

Integer.valueof() vs Integer.parseint() 차이 및 소스분석

컴슈터 — Fri, 17 May 2024 21:49:00 +0900

자바에서 문자열을 int형 타입으로 형변환할 때, 흔히 Integer.parseInt() 또는 Interger.valueOf() 메서드를 사용한다. 이 둘의 차이점과 실제 Java API 소스를 가볍게 살펴보려고 한다.

Integer.valueof() vs Integer.parseint() 차이

parseInt() : int 타입을 반환
valueOf() : Integer 래퍼(wrapper) 객체를 반환

Java 내부 API 까보기

Integer.parseInt 메서드는 기본데이터 타입인 int 값으로 반환한다.

public static int parseInt(String s) throws NumberFormatException {
    return parseInt(s, 10);
}

Integer.valueOf 메서드는 Integer 타입으로 반환한다.

public static Integer valueOf(String s) throws NumberFormatException {
    return Integer.valueOf(parseInt(s, 10));
}

위 메서드 둘 다 결국엔 아래의 parseInt를 호출한다. 매개변수 s는 대상 문자열이고 radix는 10진수이다. 순서대로 문자열 null 체크, 진수 체크를 하고 나서 +/- 부호 체크 등을 검증하고 나서 최종적으로 return 값에 결괏값이 담긴다.

public static final int MIN_RADIX = 2;
public static final int MAX_RADIX = 36;
@Native public static final int MIN_VALUE = 0x80000000;
@Native public static final int MAX_VALUE = 0x7fffffff;

// 생략...

public static int parseInt(String s, int radix) throws NumberFormatException {

    if (s == null) {
        throw new NumberFormatException("Cannot parse null string");
    }

    if (radix < Character.MIN_RADIX) {
        throw new NumberFormatException("radix " + radix + " less than Character.MIN_RADIX");
    }

    if (radix > Character.MAX_RADIX) {
        throw new NumberFormatException("radix " + radix + " greater than Character.MAX_RADIX");
    }

    boolean negative = false;
    int i = 0, len = s.length();
    int limit = -Integer.MAX_VALUE;

    if (len > 0) {
        char firstChar = s.charAt(0);
        if (firstChar < '0') { // Possible leading "+" or "-"
            if (firstChar == '-') {
                negative = true;
                limit = Integer.MIN_VALUE;
            } else if (firstChar != '+') {
                throw NumberFormatException.forInputString(s, radix);
            }

            if (len == 1) { // Cannot have lone "+" or "-"
                throw NumberFormatException.forInputString(s, radix);
            }
            i++;
        }
        int multmin = limit / radix;
        int result = 0;
        while (i < len) {
            // Accumulating negatively avoids surprises near MAX_VALUE
            int digit = Character.digit(s.charAt(i++), radix);
            if (digit < 0 || result < multmin) {
                throw NumberFormatException.forInputString(s, radix);
            }
            result *= radix;
            if (result < limit + digit) {
                throw NumberFormatException.forInputString(s, radix);
            }
            result -= digit;
        }
        return negative ? result : -result;
    } else {
        throw NumberFormatException.forInputString(s, radix);
    }
}

비슷한 알고리즘 문제 풀이를 하다가 느낀 거지만, 잘 만들어진 API를 잘 가져다 쓰는 것도 중요하지만 내부 로직이 어떻게 짜여 있는지 의식적으로 살펴보는 것도 중요하다고 생각한다.

개발자의 5가지 방향

컴슈터 — Wed, 1 May 2024 04:08:02 +0900

okky 글을 보고 개발자 방향성 관련해서 잘 정리해두신 것 같아서 저장한 글입니다.

결론적으로 말씀드리면 개발만해서는 답이 없습니다.

'개발자' = '응용프로그램 개발자' 라고 한정지어 보겠습니다
여기 들어 오시는 분들의 99% 가 여기에 해당 될테니깐요

구체적으로 응용프로그램 개발자에 대해서 정의해 보자면
아래와 같습니다.

- 웹 개발자
    Java, Js(React, Nodejs 등), Python, Php, C# 등

- 모바일(하이브리드) 개발자
    Android(Java, Kotlin), IOS(Object c, Swift), 멀티플랫폼(RN, Flutter 등)

- Windows 개발자
   C++, MFC, C# 등, 요즘은 많이 없죠

- 하드웨어 + 임베디드 개발자
    키오스크, 장비, 단말기, IOT 등

이 분들의 최고 월단가는  800선 입니다.
여기 프리랜서 구인 내용이 시장의 상황을 반영하고 있죠.
단순 계산해서 x 12 하면 9600 정도 될려나요?

나는 실력이 좋아서 코딩만으로 1000, 2000 벌수 있다?
그게 한두번은 가능하지만 꾸준히 벌수가 없습니다

그 이유를
간단하게 검증할 수 있는 방법이 있습니다.
당신이 생각하는 높은 수준의 알고리즘과 스펙을 기술한 다음에
위시-켓이나, 크-몽 같은 외주 사이트에 올려 보세요 (요거 스팸단어네요 ㅠㅠ)
일정을 기준으로 단가를 계산해서요

1달 일정 = 800
2달 일정 = 1600
3달 일정 = 2400

글 올린지 하루도 안돼서 프리랜서들 견적서 10~20개 날라옵니다.
대부분 10년~20년 된 개발자 들이죠.

당신이 생각하는 대단한 기술은 고급 기술자면 누구나 만들수 있다는 이야기 이고
그 기술은 이미 미국에서 10년 20년 전에 나온 기술들입니다.
즉, 새로 창조한 기술도 아니며, 다른 사람도 충분히 습득이 가능하다는 이야기 이죠.

클라이언트 입장에서는 당신 아니어도 얼마든지 대체 가능하다는 이야기 입니다.
그렇게 형성된 시장이 고급 기준  800 인 겁니다.

여기서 예외는
원천기술자 제외 입니다.
원천기술을 가진 사람들은 여기에 들어올 일도 별로 없을 뿐더러
이미 제품으로 판매를 하고 있을 겁니다.
독보적인 기술이니깐요

제가 프리 하면서 경력 10년 정도 넘어갈 때 이런 고민을 했습니다.
수입을 더 올리고 싶은데...
왜 개발자 등급은 특급이 없는 걸까?
특급이 있다면 더 공부하고 실력을 늘려서 특급 단가를 받고 싶은데...

결론은...
'응용프로그램 개발에 특급이 필요가 없어서 입니다.'

비지니스상 응용프로그램을 만들때
원천기술이 필요한 라이브러리나, 엔진등은
제품으로 구해다가 활용하면 되는 것이지
궂이 수천만원을 더 들여서 따로 개발하는게 비지니스 논리상 안 맞기 때문이죠
내가 오너라고 해도 그렇게 하지 않겠습니까?

그래서 제가 시도했던 방법은...
대 부분의 사람들이 생각하는 것처럼 아래와 같습니다.

수입을 늘리기 위해서 PL로 지원을 했습니다
그 결과 관공서, 대기업 플젝 하면서  100, 150 만원 더 받자고
월화수목금금금 의 삶을 3개월 동안 산적이 있습니다.

팀장으로 갈수록 책임감이 높아져서 내 시간을 갈아 넣게 되더군요.
산출물 수만페이지 만든다고 몇달씩 문서 작업 하는 것도 적성에 안 맞고 ..
삶의 만족도가 떨어져서 결국 접었습니다

고급 개발자로만 계속 남기로 결심을 한거죠

그리고 스타트업으로 개인사업을 시작 한적이 있습니다.
아이폰/안드로이드앱, 테블릿앱, 백엔드 서버, 관리자 페이지, 플래시 데시보드
혼자서 이것 저것 다 만들었습니다
결국 망했습니다

나중에야 깨달았습니다.
사업이란 것은 단기간에 돈을 벌려고 하면 안된다는 것을요.
오랜기간 투자해야 하고 그 기간동안 버틸수 있는 자본이 있어야 한다구요

시간이 지나고 여러가지 일을 해 오면서
개발자 출신이 어떻게 하면 연봉 1억을 넘길수 있을까..
아래처럼 5가지 정도 방향이 정리가 되었습니다.

1. 개발 + 관리능력
    일반적인, 대기업, 중소기업의 팀장, 부장, 이사, CTO 의 역할입니다.
    개발 능력과 설계 능력은 평이 하지만(고급기준) 관리 능력이 좋아서 개발팀을 이끌면서
    플젝을 성공적으로 마쳐서 고부가가치를 내기 때문에 오너는 1억 이상의 연봉을 기꺼이 지불하는 경우 입니다.
    이런 삶을 즐기는 분들도 있고 회의를 느끼시는 분들도 있을 겁니다.

2. 개발 + 설계(디자인) 능력
    대기업, 관공서, 빅테크 에서 대형 시스템을 설계하고 운영하는 엔지니어 입니다
    보통 강연때 강사로 많이 볼수 있는 분들이죠.
    이 분들은 대형 시스템에서의 경험과 이론적인 능력을 바탕으로 연봉 1,2억을 넘기게 됩니다.
    일반적으로 정규직 개발자들의 롤 모델이라고 할수 있는거죠.

3. 개발 + 사업능력
    이 분들은 시스템을 이용해서 돈을 버는 겁니다.
    중소 SI, 에이전시, 인력 파견업체등...
    직원이 아니고 오너이기 때문에 시스템을 효율적으로 돌리고 남은 이득은 모두 본인이 챙겨 갈수가 있습니다.
    개발자의 경험을 가지고 있기 때문에 그들을 잘 이해하고 있고
    개발자들이 좋아할 만한 복지를 만들어서 부러움을 사기도 합니다

4. 개발 + 멀티잡
    대표적으로 1인 개발자, 재택근무 프리랜서 들입니다.
    영업이 잘 되면 인건비(800) + 알파 의 마진이 생기도 하죠.
    보통 직장에서는 실질적으로 1일 평균 5~6 시간 정도 밖에 코딩을 안하지만
    프리랜서 들은 본인이 코딩하는 만큼 돈을 벌기 때문에 하루 12시간 일해도 피곤한줄 모르고 할때가 있습니다.
    물론 출퇴근 시간도 세이브 할수 있습니다.
    그래서 프리랜서 분들은 1000 이상 벌면서 여유롭게 사시는 분들도 많습니다.

5. 개발 + 권리수입(복제수입)
    대표적인게 성공한 앱 개발자들 입니다.
    하지만 앱 개발에 성공하려면 투자 기간을 길게 잡아야 합니다.
    제가 볼때는 최소한 1~3년 정도 투자 기간을 잡아야 한다고 봅니다.
    그래서 월 지출이 많은 가정의 가장 보다는 싱글들이 더 유리 하지 않나 싶습니다.
    유튜브 알고리즘에 선택 받듯이 앱이 한번 뜨기 시작하면 순식간에 돈이 들어오기도 합니다.
    그렇지 않더라도 해당 카테고리에서 스테디 셀러가 되면 꾸준히 고수입이 가능해 집니다.

저는 개인적으로 4, 5번의 방향을 추구 하고 있습니다.
현재도 연봉 1억 이상은 되구요. (그래서 너는 얼마 버는데? 하고 딴지 걸까봐 씁니다.)
그렇다고 부자라는 이야기는 아닙니다. ㅠㅠ
수입이 많은 것과 돈을 많이 모으는 것은 별개의 문제 이니깐요

제가 이런 글을 쓰는 이유는 어그로 끌어서 논란을 만들려고 하는게 아닙니다.

후배님들에게..
지극히 현실을 인식하고 정확한 방향을 잡은 다음 미래를 준비하도록 하는게 목표입니다.

개발자 로드맵 사이트 추천, 원하는 스킬 한눈에 파악 가능

컴슈터 — Tue, 16 Apr 2024 06:53:13 +0900

구글링하다가 개발자 로드맵 관련해서 좋은 사이트를 찾아내서 공유한다. Developer Roadmaps 사이트에는 Frontend, Backend 외에도 DevOps, Flutter, React, AI 등 다양한 로드맵을 제시하고 있다.

현재 내가 관심있는 앵귤러 프레임워크를 예시로 살펴보자면 TypeScript부터 RxJS, Angular CLI 등 필요한 개념들을 짚어주고 있다. 원하는 언어나 스킬이 있다면 참고해볼 만한 사이트이다.

앵귤러 @NgModule API 살펴보기

컴슈터 — Sun, 14 Apr 2024 18:02:00 +0900

앵귤러 API 문서를 보면서 궁금했던 것들을 하나씩 까보려고 한다. 현재 프로젝트에서 쓰고 있는 앵귤러 5 버전을 기준으로 기록한다.

@NgModule

NgModule이란 기능 모듈 단위로 코드를 관리하는 것을 말한다. 기능이 연관된 구성요소(컴포넌트, 디렉티브, 파이프 등)를 하나로 묶어 관리하는 단위이다.

아래처럼 @NgModule 데코레이터로 선언하여 메타데이터를 입력한다. 앵귤러 애플리케이션은 최상위 모듈인 AppModule에서 시작된다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  // 메타데이터 선언
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

메타데이터

declarations : 이 모듈에 포함되는 컴포넌트, 디렉티브, 파이프를 등록한다. 최초에는 AppComponent 컴포넌트 하나밖에 없다. AppModule는 최상위 모듈이므로 보통 AppComponent 하나만 선언해둔다.
imports : 이 모듈에서 필요한 기능을 다른 모듈에서 로드할 때 사용한다. 기능 모듈의 컴포넌트, 디렉티브, 파이프를 등록한다. 불러온 모듈 안에서 컴포넌트, 디렉티브, 파이프가 export 키워드로 지정되어 있다면 imports 배열을 지정한 현재 모듈안에서 자유롭게 사용할 수 있다.
providers : 앱에서 사용하는 서비스를 등록한다. 서비스 프로바이더를 등록하면 하위 모듈에서 모두 이 서비스를 의존성으로 주입받을 수 있다.
bootstrap : index.html 페이지에 생성되고 실행될 최상위 컴포넌트를 지정한다. bootstrap 배열에 등록된 컴포넌트는 부트스트랩 단계에서 바로 생성되어 브라우저 DOM에 추가된다.

다시 살펴보자면 @NgModule는 아래와 같은 역할을 정할 수 있다.

해당 모듈에 속한 컴포넌트, 디렉티브, 파이프가 어떤 것인지 정의
해당 모듈에 속한 컴포넌트, 디렉티브, 파이프 중 모듈 외부로 공개할 요소를 지정하여 다른 모듈의 컴포넌트 템플릿에서 이 구성요소를 사용할 수 있음
해당 모듈에 필요한 다른 모듈의 컴포넌트, 디렉티브, 파이프를 로드함
컴포넌트에 사용할 서비스 프로바이더를 등록함

자주 사용하는 NgModule

BrowserModule : 브라우저에서 애플리케이션을 실행할 때
CommonModule : ngIf, ngFor를 사용할 때
FormsModule : 템플릿 기반 폼을 사용할 때(NgModel 포함)
ReactiveFormsModule : 반응형 폼을 사용할 때
RouterModule : RouterLink, forRoot(), forChild()를 사용할 때
HttpClientModule : 서버와 HTTP 통신을 해야 할 때
그 외 NgModule 형태로 제공되는 서드파티 라이브러리 : Material Design, Ionic, AngularFire2 등

앵귤러는 최소 1개 이상의 Module이 존재하는 셈

모든 Angular 앱은 반드시 최상위 모듈이 존재하며, 따라서 최소 1개 이상의 모듈을 갖는다고 할 수 있다. 애플리케이션은 이 최상위 모듈을 부트스트랩하면서 시작된다.

최상위 모듈 AppModule에는 애플리케이션 실행에 필요한 컴포넌트만 간단하게 정의한다. 앱이 점점 커지면서 최상위 모듈은 담당하는 기능에 따라 여러 개의 기능 모듈로 나뉘어진다. 결국 최상위 모듈은 직접 컴포넌트를 로드하는 대신, 다른 모듈을 로드하는 방식으로 수정된다.

주의사항

컴포넌트는 반드시 NgModule 한 곳에만 꼭 등록해야 한다. 반드시 @NgModule 하나에만 선언되어야 한다.

키보드 한컴 입력기 삭제하는 방법 (키보드 자동 변환되어 불편할 때)

컴슈터 — Thu, 11 Apr 2024 07:00:01 +0900

타자를 치다보면 가끔씩 Micosoft 입력기가 아닌 엉뚱한 입력기로 변경되곤 한다. 한컴 입력기가 자동으로 변환되어 가끔 타자가 안쳐지는 불편한 상황이 일어나서, 불필요한 입력기를 삭제하려고 한다.

윈도우+i키를 눌러서 윈도우 설창을 연 뒤 언어를 검색한다. 한국어 설정의 [옵션]을 선택한다.

언어 옵션: 한국어로 진입하면, 현재 설치된 키보드 목록이 보여진다. 이중 옛한글 입력키를 삭제할 것이다.

불필요한 입력기를 삭제했다면 앞으로는 한국 영어 자동변환 오류가 발생하지 않는다. 반대로 사용하려는 키보드를 추가할 수도 있다.

앵귤러에서 ionic Framework (아이오닉 프레임워크) 간단한 정리

컴슈터 — Sun, 7 Apr 2024 20:08:05 +0900

이번에 앵귤러 모바일 프로젝트에 투입되었다. 애플리케이션 서버를 실행할 때 ng serve가 아닌 ionic serve로 서버를 실행하더라...? 생전 처음 들어본 inoic이 무엇인지 알아봤다.

사전지식

반응형 웹 (웹) : html, css, js로 이루어진 웹을 모바일 상의 화면으로 보는 것
네이티브 앱 (앱) : android(코틀린) 혹은 ios(스위프트) 환경의 코드로 제작된 모바일용 애플리케이션
하이브리드 앱 (앱) : 웹 코드로 이용해 각 플랫폼(android, ios)으로 패키징 한 애플리케이션 (웹+앱)
프로그레시브 웹앱 (웹) : 하이브리드 앱처럼 보이지만 설치가 필요하지 않고, 네이티브앱 기능을 사용할 수 있는 애플리케이션

ionic Framework (아이오닉)

2013년에 등장한 아이오닉은 하이브리드 모바일 앱개발을 위한 프레임워크이다. 네이티브 앱에 비해서 다양한 플랫폼을 지원하고, 서드파티(third-party) 코드를 이용할 수 있다. ionic 공식 홈페이지에서는 React, Vue, Angular 같은 서드파티 코드 기반으로 모바일 앱을 구축할 수 있는 모바일 UI 툴킷이라고 소개하고 있다.

아이오닉 최초 버전은 AngularJS와 아파치 코도바(Cordova)로 제작되었지만, 최신 버전은 React, Vue, Angular 그 어떤 UI 프레임워크라도 선택할 수 있다. 특히 모바일 앱은 이러한 웹 기술로 제작한 다음, 코도바나 캐파시터를 이용해 네이티브 앱 스토어를 통해 배포하여 기기에 설치할 수 있다.

스마트폰에 최적화된 UI를 디자인할 수 있고 무엇보다 크로스 플랫폼 개발이 가능하며, HTML5의 부족한 API는 네이티브 API로 보완할 수 있다. 아이오닉은 주로 typeScript를 사용하고 Angular를 통해 하나의 코드로 android/ios/web을 동시에 시작할 수 있다.

ionic 장점

웹 표준을 사용하여 제작한다.
신속한 수정, 업데이트 및 배포가 가능하다.
각 플랫폼에서 네이티브 앱으로 실행된다.

ionic 단점

인터페이스가 표준 네이티브 앱과 다를 수 있다.
그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있다.
일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소 시간 지연이 발생할 수 있다.
개발자는 웹 앱을 네이티브 앱으로 변환시키기 위한 부가적인 소프트웨어를 사용해야 한다.

ionic Framework 특징

Cordova 환경을 제공하며, Cordova 플러그인을 사용할 수 있다.
AngularJs를 기반으로 만들어졌으며, SPA를 MVC, MVVM으로 개발할 수 있다.
네이티브에 가까운 UI 컴포넌트들을 제공한다.
위에 장점에 있듯이 크로스 플랫폼 빌드가 가능하다.(android, ios, 이외에도 다양한 플랫폼 지원)

ionic 사용 전 알아야 하는 기술

AngularJs : spa를 개발할 때 사용하는 프레임워크로 양방향 바인딩을 지원하며 Dom 조작에 있어 쉽고 간편하다
TypeScript : AngularJs2가 기본적으로 TypeScript를 내세우며 필요하게 된 기술
Cordova : 하이브리드 웹 애플리케이션 개발을 위한 프레임워크이다.
Node.js : 자바스크립트를 활용하는 소프트웨어 플랫폼으로 확장성 있는 네트워크 애플리케이션 개발에 사용된다.

참고

Ionic (아이오닉) vs React Native (리액트 네이티브)

보험사 프로젝트 관련 용어 정리

컴슈터 — Tue, 2 Apr 2024 07:10:31 +0900

계약 관련

가계약
보험회사나 대리점에 의하여 보험증권이 발행될 때까지의 무보험 상태를 메꾸기 위한 계약을 말함. 물론 이는 확정적이며 단시일이라는 요건이 필요하다.

단체취급계약
계약자가 단체(회사, 관공서 등)에 근무하는 경우, 단체가 보험료를 계약자의 급여에서 공제하여 보험자에게 지급하는 방식의 계획. 단체 자체가 계약자가 되어서 체결하는 단체 계약과는 다르다.

계약일

계약일 : 계약을 위해 청약서를 작성한 날
계약체결일 : 제1회 보험료를 납입한 날
책임개시일 : 건강진단을 받고 안 받고에 따라 달라짐

보통 청약서를 작성함과 동시에 제1회 보험료를 납입하는 것이 관례이므로, 계약일과 계약체결일은 통상 같은 의미다. 단지 주의해야 할 사항은 책임개시일은 엄밀히 구분된다.

계약의 부활(효력회복)
보험료를 납부하지 않고 일정기일이 경과하면 그 계약은 효력이 상실되는 경우 보험계약자의 청약에 따라 효력상실 전 상태로 회복하는 제도이다. 이 제도는 보험계약자가 차후의 신계약이 불리하거나 또는 불가능하게 될 수 있기 때문에 이를 구제하기 위한 것이다. 이 경우 체납된 보험료는 납입해야 한다.

계약보전
계약이 성립된 후 그 계약이 소멸될 때까지의 보험기간을 통해서 생기는 전 사무

청약
보험계약은 낙성계약으로, 청약과 승낙에 의해서 성립되는 것인데, 청약이란 승낙과 합치시킴으로써 계약을 성립시키려고 하는 의사표시를 말한다.

청약 철회
ex. 계약자는 보험증권을 받은 날부터 15일 이내에 그 청약을 철회할 수 있고, 이 경우 납입한 보험료를 돌려준다. 다만, 청약한 날부터 30일(단, 만 65세 이상의 계약자가 통신수단 중 전화를 이용하여 체결한 경우 45일)이 초과된 계약은 청약을 철회할 수 없다.

승환계약
보험 설계사가 다른 회사로 이동하면서, 관리하던 고객의 계약을 해약한 뒤 새 회사의 보험계약으로 다시 가입시키는 것을 의미한다.

자사승환 계약
타사승환 확인
부당승환 : 보험 승환 시 모집종사자가 보험계약자에게 새로운 보험계약과 기존 보험계약의 보험기간과 예정 이자율 등의 중요사항을 비교하여 알리지 않는 경우

돈 관련

보험료와 보험금

보험료 : 보험을 가입한 사람이 보험회사에 내는 돈 (보험계약자가 보험사에게 주는 것)
보험금 : 보험사고가 발생했을 때 보험회사가 보험가입자에 지급하는 돈 (보험사가 보험수익자에게 주는 것)

보장보험료와 적립보험료

보장보험료 : 보험계약에 따른 보장을 받기 위해 내는 돈. (사고가 없다면 자동 소멸된다)
적립보험료 : 적립되어 만기시 만기 환급금으로 사용된다.

초회보험료
보험계약이 성립하면 보험계약자는 보험료 납입의무를 지는데 이 의무에 의해 최초로 납입하는 보험료

자기부담금
보험사고 발생시, 보험가입자에게 일부금액을 부담시키는 금액.

제지급금
고객에게 각종 보험금, 환급금, 보험계약대출금 등을 지급하는 것

보장성보험과 저축성보험

보장성보험 : 만기 시에 지급하는 환급금이 납입보험료 합계액의 범위 내로 설계된 보험
저축성보험 : 만기 시에 지급하는 환급금이 납입보험료 합계액 보다 많도록 설계된 보험

만기환급형과 순수보장형

만기환급형 : 보험 만기 시 적립된 보험료 일부를 돌려받는 상품
순수보장형 : 보험 만기시 돈을 못 받는 상품 (상대적인 보험료가 저렴)
무해지환급형 : 보험료 납입기간 중 해지하면 해지환급금이 없는 상품. (보험료가 좀 더 저렴하지만, 납입기간 중 해지하면 한 푼도 못 받음)

약관대출과 중도인출

약관대출 : 보험의 해지환급금을 담보로 받는 대출 (대출이므로 원금 및 이자 납입이 필수)
중도인출 : 가입한 보험상품의 적립된 보험금을 미리 당겨 쓰는 것 (만기/해지 시 환급금 감소될 수 있음)

사람 관련

보험자, 보험계약자, 피보험자, 보험수익자

보험자 : 보험회사
보험계약자 : 보험계약을 한 당사자
피보험자(보험대상자) : 보험사고의 대상이 되는 사람 (피보험자가 여러 명일 수 있음)
보험수익자 : 보험금을 받는 자

표준체와 표준미달체

표준체 : 신체적 또는 위험한 직업에 종사하는 등 뚜렷한 결점이 없어서, 기준보험료로 계약할 수 있는 피보험체
표준미달체 : 표준 이하의 체격, 건강상태로 일반의 조건으로는 가입을 거부당하는 피보험체

계피동일과 계피상이

계피동일 : 보험을 계약한 사람과, 보험으로 보장받는 사람이 같은 경우 (내가 내 보험에 가입함)
계피상이 : 보험을 계약한 사람과, 보험으로 보장받는 사람이 다른 경우 (엄마가 내 보험을 가입시켜 줌)

주피와 종피 (피보험자가 여러 명인 경우)

주피 : 보험을 통해 보호받을 주대상
종피 : 주피와 함께 보험을 통해 보호받을 대상

평균여명
어느 연령의 사람이 앞으로 생존해 있을 수 있는 평균 연수. 이제부터 몇 년을 살아 있을 수 있는가를 가리키는 숫자

상령일
보험 나이의 기준. 생일의 ±6개월이 되는 시점을 1년으로 본다. 즉 6개월이 넘을 경우 나이가 한 살 추가된다. 예를 들어 생일이 1990년 12월 1일생이라면, 2022년 6월 1일과 2021년 6월 1일이 보험 상령일이 된다.

보험 관련

정액보험과 부정액 보험

정액보험 : 미리 약정된 금액(정액)을 지급함. ex. 종신보험의 사망보험금, 암보험의 암진단비 등
부정액 보험(=손해보험, 실손보험) : 보험사고로 인해 생긴 손해에 크기에 비례하여 보험금을 지급함. 실손의료비 보험, 운전자보험의 비용 담보 등

생명보험, 손해보험, 제3보험

생명보험 : 사망보험, 생존보험, 양로보험으로 사람의 생존 및 사망이 보험대상. ex. 피보험자 사망 시, 정해진 금액을 보험금으로 지급(정액보상)
손해보험 : 일반보험, 자동차보험, 장기보험으로 재산상의 손해가 보험대상. ex. 자동차사고 발생 시, 실제 발생한 손해를 보상(실손보상)
제3보험 : 질병보험, 상해보험, 간병보험으로 정액보상과 실손보상이 혼합되어 있음. 보통 질병보험(암보험 등), 상해보험, 간병보험

물보험과 인보험

물보험 : 사고발생의 객체가 재산 또는 특정 물건인 보험 (물건 등에 문제가 생겼을 때)
인보험 : 사고발생의 객체가 사람의 생명 또는 신체인 보험 (사람에게 문제가 생겼을 때)

단기보험과 장기보험

단기보험 : 보험기간이 1년 미만의 계약
장기보험 : 보험기간이 3년 이상인 계약 (케이스에 따라 다를 수도)

배당보험과 무배당보험

배당보험(유) : 보험계약자에 대해서 이익 또는 잔여금의 배당을 해주는 보험
무배당보험(무): 예정이율 및 예정사망률 등이 실적치와 차이가 생겨도 보험특약자에게 그 차액을 돌려주지 않는 보험을 말한다. 되도록 차액이 생기지 않도록 하기 위해서 당초부터 보험료를 싸게 하는 것이 이 보험의 특징이다.

특약
특약은 주계약의 보험상품에 부가하는 것인데, 부가함으로써 주계약의 납부내용을 확대하고, 피보험 범위를 넓히게 되는 것이 일반적이다. 특약을 부과한 경우, 대개는 주계약 보험료와는 별도로 거기에 따른 할증 보험료를 지급하게 되어 있다. 이 보험료를 특약 보험료라고 한다.

담보

묵시담보 : 법에 의해서 보험계약에 부과
명시담보 : 계약당사자간에 합의되어 보험증권에 기재

보험 상품 가입하기 위해 선택할 수 있는 개별 계약 내용이다. 예를 들어 암보험에는 암진단비, 암입원일당, 암사망 등 개별 담보를 선택할 수 있다. 계약 시 해당 담보를 선택하지 않았다면 사고 후 관련 보험금을 받을 수 없다.

부담보기간
이미 질병이 발생한 사람이 이를 숨기고 보험에 가입하는 역선택이 우려되는 경우, 계약일로부터 일정기간 이내에 발생되는 보험사고에 대하여는 보상하지 않는 것을 말한다. 암보험에서 계약체결 이후 90일간 암 담보를 하지 않는 것은 대표적인 부담보 기간이라 할 수 있다. 한편, 보험계약 청약 시 피보험자가 병력에 대해 보험회사에 고지하고, 보험회사에서는 해당 질병 및 부위에 대해 일정기간 보장을 하지 않는 것으로 계약을 인수하기도 하며, 이때 그 보장하지 않는 기간을 '부담보 기간'이라고 한다.

고지의무 (계약 전 알릴 의무)
보험계약자 또는 피보험자는 계약체결 시에 보험자에 대해서 중요한 사실을 알리고 또 중요한 사항에 관하여 부실하게 알려서는 안 될 의무를 진다. 이것을 '고지의무'라고 하는데, 보험계약자가 이를 위반했을 때에는 보험자는 일정한 요건 아래 계약을 해지할 수 있게 되어 있다.

배서 (계약 변경)
보험계약의 내용을 변경하는 것. 계약자가 보험회사의 승인을 받아 계약기간, 보험료, 가입금액 등 여러 사항을 수정할 수 있다.

급부
피보험자 또는 보험수익자가 보험계약의 지급사유에 해당될 경우, 보험회사로부터 보험금 등이 지급되는 것

면책
특정한 사유에 대해서는 피보험자에게 보험사고가 발생하더라도 보험금 지급책임이 없는 경우를 말한다.

재물사고
화재, 폭발, 파열, 붕괴, 침강, 풍수재 등으로 피보험자 소유의 재물이 피해를 입은 경우

판매방식 관련

대면 채널과 비대면 채널

대면 채널 : 보험전문가가 직접 소비자를 만나 상품에 대한 설명과 분석을 통해 보험을 판매하는 방식
비대면 채널 : 전화, 온라인을 통해 보험상품을 판매하는 채널. (고객이 보험설계사를 거치지 않고도 보험사와 직접 계약할 수 있으며 다이렉트 보험이라고 부름)

대면 채널

전속설계사 채널 : 특정 보험회사에 소속되어 있는 설계사. ex. A생명 보험회사의 전속 설계사인 경우, 생명보험 상품은 A생명 보험회사의 상품만 소비자에게 제안 가능
GA채널 (General Agency): 법인 보험대리점에 소속된 설계사의 판매채널. 전속 설계사와 달리 다양한 보험회사의 상품을 소비자에게 제안 가능
방카슈랑스 채널 : 은행에서 보험을 판매하는 채널. 은행에서 보험까지 가입할 수 있지만, 설계사의 주력상품인 종신보험, 자동차보험을 가입할 수 없는 등 상품이 제한적임

비대면 채널

TM 채널 (Tele-Marketing) : 텔레마케팅 채널. 전화를 이용해 보험 판매하는 채널
CM 채널 (Cyber-Marketing) : 인터넷을 매개로 한 채널. 소비자는 웹앱을 통해 보험사와 직접 계약 가능

기타

LC (Life Consultant)
보험사 소속 보험전문컨설턴트. 고객에게 최적의 위험보장 및 재무 설계 서비스를 제공함

본인부담상한제
환자가 연간 부담한 의료비 중 건강보험 본인일부부담금 총액이 개인별 상한액을 초과하는 경우, 그 초과금액을 건강보험공단이 부담하는 제도이다.

비례보상
여러 보험에 가입하더라도, 각 보험사가 손해액을 일정 비율로 나누어 손해액만큼만 보상한다. 손해를 공정하게 분담하여, 손해액을 보험사들이 나누어 지급한다.

일상생활배상책임보험 (일배책)
일상생활중 본인이나 가족의 부주의로 타인을 다치게 하거나 재물을 파손시키는 경우, 피해액을 보상하는 보험상품.

이내첩 (이첩과 내첩)
이첩: 받은 공문이나 통첩을 다른 부서로 다시 보내어 알림
내첩: 다른 담당자의 처리건을 수신함.

2024년 건강보험 피부양자 탈락? 프리랜서 피부양자 자격상실 소득 기준

컴슈터 — Sun, 31 Mar 2024 10:08:13 +0900

예전부터 프리랜서로 전향한 뒤 아빠 밑에 직장피부양자로 선정되어 건강보험료를 별도로 내지 않았다. 냠냠뇸 꿀빨다가 작년 2023년 12월부터 지역가입자로 변경되어 건보료를 납부하라는 고지서가 날라왔다.

사람 심리가 안 내다가 내면 배가 아픈법...
갑자기 왜 변경되었는지 건강보험 고객센터에 문의해 보니

"님 소득이 500만 원 초과돼서 그럼"
"작년소득과표가 500만 원이라서 초과돼서 그래요"

라는 답변이 왔는데 피부양자 탈락 기준이 궁금해서 찾아봤다. 대체 뭐길래 내 맘을 이리 슬프게 만드니,,?

피부양자?

피부양자는 직장가입자의 가족으로 직장가입자의 부모, 배우자, 자녀 등이다. 근로 능력이 없다고 판단하여 부양을 받아야 할 사람으로 판단하여 보험료를 내지 않아도 건보 혜택을 누릴 수 있다. 소득/재산이 일정 기준 아래라면 피부양자 자격을 얻을 수 있다.

참고로 건강보험 가입자 유형은 매우 다양하다. 쉽게 생각해서 일반 4대 보험 직장에 다니면 '직장가입자', 프리랜서이면 '지역가입자'로 보면 된다.

지역 세대주
지역 세대원
지역 비가입자
직장 가입자
직장 피부양자
의료급여 세대주
의료급여 세대원

내가 어떤 가입자 유형인지 확인하고 싶다면 국민건강보험에서 자격득실확인서를 조회해 보면 된다. 내 경우 직장피부양자였다가 2023.12.01일 자로 지역가입자로 바뀌었다.

피부양자 인정 기준

2022년도 9월 건보료 개편으로 좀 더 깐깐하게 피부양자를 선별하면서 건강보험료 납부 대상자가 늘어났다고 한다. 피부양자 판별은 크게 2가지 소득/재산 요건을 기준으로 판정하는데, 이 기준에 못 미칠 경우 지역가입자로 전환되어 건보료를 납입하게 된다.

1. 피부양자 소득 요건

사업자등록자로 사업소득이 없는 경우
사업자등록이 없고 사업소득이 연간 500만 원 이하인 경우 (*내가 여기에 걸려버림)
합산소득(사업·금융·연금·근로·기타 소득 등) 합해서 연간 2,000만 원 이하인 경우

2. 피부양자 재산 요건

재산과표가 5.4억 원 이하인 경우
재산과표가 5.4억 원 초과 ~ 9억 원 이하인 경우 연간 소득 1,000만 원 이하인 경우
형제자매는 재산과표 1.8억 원 이하인 경우

단 피부양자가 기혼자인 경우, 소득요건에 의해 탈락하면 배우자까지 동반 탈락이며, 재산요건으로 탈락하면 본인만 피부양자에서 탈락하게 된다.

내 경우 피부양자 소득 요건에서 걸린 케이스다. 프리랜서 연 소득금액이 500만 원이 넘게 되어 피부양자 자격이 상실되고 지역가입자로 전환되어 건보료를 납부하게 되었다.

홈택스에서 소득금액증명서를 발급받아 확인해 보니, 소득금액 (그중 사업소득) 이 500만 원이 넘어서 피부양자 소득 요건에서 탈락된 것이다.

사업소득 = 수입금액 - 필요경비

수입금액에서 필요경비가 빠진 금액이 '소득금액'이고, 기준경비율 또는 단순경비율로 필요경비를 제외한 소득금액을 기준으로 본다.

피부양자 자격 기준 도표로 보기

본인의 소득 재산 요건이 헷갈린다면 피부양자 자격 기준 도표로 확인해 볼 수 있다. 아래 플로우차트를 모두 통과해야 피부양자로 인정되는 것이다.

피부양자 상실시 지역가입자 전환은 언제부터?

작년 소득 기준으로 보면, 올해 5월 종합소득세 신고 → 올해 11월 공단 자료에 연계 → 올해 12월부터 피부양자 자격 상실되어 지역가입자로 전환된다.

12월 1일 지역가입자로 자격이 변동될 경우, 12월 보험료부터 지역가입자로 납부한다. 즉, 내년도 1월부터 지난달 보험료를 납부하게 된다.

공단에서는 매년 종합소득과 관련하여 국세청으로부터 제공받은 소득자료를 토대로, 피부양자들을 대상으로 피부양자 인정기준을 확인한다. 피부양자 기준에 미충족 하면 피부양자 상실처리를 한다.

매년 소득/재산 요건을 기준으로 피부양자 여부를 판단하므로, 올해 소득이 많으면 피부양자 탈락되었다가 내년에 소득이 적으면 다시 선정되었다가 하게 된다.

만약 지역가입자->직장가입자로 자격 변동될 경우, 지역가입자 자격은 상실처리되며 직장에서 보험료가 납부된다. 건강보험료는 이중부과하지 않는 셈이다.

더 자세한 내용은 국민건강보험 피부양자 안내를 참고하자.

티스토리 글 작성하면 Github에 자동 커밋시키는 방법 (feat. 잔디 심기)

컴슈터 — Sat, 30 Mar 2024 12:46:11 +0900

티스토리에서 글을 쓰면 Git에도 반영되어 아래처럼 잔디를 심어보려고 한다. 그러기 위해 Github Action을 이용하여 하루에 한번 티스토리의 RSS를 기반으로 Github에 커밋이 되도록 할 것이다.

사전 준비

npm을 사용할 것이므로 Node.js와 Git이 필수적으로 설치되어 있어야 한다.
개발 툴은 VsCode를 이용했다.

1. 티스토리 RSS 설정

먼저 티스토리에서 RSS 설정을 확인해보자. 내 블로그 설정 > 관리 > 블로그 메뉴로 들어가서 RSS 전체 공개로 설정 후 저장한다. 이제 https://devpad.tistory.com/rss 같이 본인의 블로그 주소에 접속하면 RSS 정보를 확인할 수 있다.

2. repository 생성

Github Action으로 연동할 새로운 repository를 생성한다. 저장소 이름은 본인 소개 페이지를 많이 이용한다. (예를 들어 https://github.com/comsuter/comsuter)

참고로 repository 생성시 혹시라도 꼬일까봐 README 파일이나 gitIgnore 등 아무런 설정을 하지 않았다.

3. 로컬 환경과 repository 연동

내 경우 C:\comsuter 폴더를 만들어서 거기서 VsCode를 열고 아래 명령어를 순차적으로 실행했다. 명령어들은 위 사진에서 가이드하고 있는 명령어를 일부 가져다 쓴 것이다.

git init
git branch -M main
git remote add origin https://github.com/comsuter/comsuter.git

4. RSS 및 Git Action 파일 작성

1) package.json 파일 생성
package.json 파일을 생성하기 위해 아래 명령어를 콘솔창에 입력한다.

npm init -y

아래 내용으로 파일이 생성된다.

2) rss-parser 설치
이어서 RSS 정보를 파싱할 수 있는 rss-parser 라이브러리를 설치한다.

npm i rss-parser

3) package.json 편집
package.json 파일을 열어서 "type": "module", "start": "node index.js",를 추가한다.

{
  "name": "comsuter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "rss-parser": "^3.13.0"
  }
}

4) index.js 파일 추가

프로젝트 루트에서 index.js 파일을 추가한 뒤 아래처럼 작성한다. 이 파일은 최종적으로 README.MD에 작성될 내용이다. index.js의 스크립트를 node를 이용해서 수행하는 것이다.

import { writeFileSync } from 'node:fs';
import Parser from "rss-parser";

/**
 * README.MD에 작성될 페이지 텍스트
 * @type {string}
 */
let text = `# Hi there  

## 이런 환경에 익숙해요✍ 

## 언어

<p>
  <img alt="" src= "https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=JavaScript&logoColor=white"/> 
  <img alt="" src= "https://img.shields.io/badge/TypeScript-black?logo=typescript&logoColor=blue"/>
</p>

##   Latest Blog Posts

`;

// rss-parser 생성
const parser = new Parser({
    headers: {
        Accept: 'application/rss+xml, application/xml, text/xml; q=0.1',
    }});

(async () => {

    // 피드 목록
    const feed = await parser.parseURL('https://devpad.tistory.com/rss'); // 본인의 블로그 주소
    
    text += `<ul>`;
    
    // 최신 10개의 글의 제목과 링크를 가져온 후 text에 추가
    for (let i = 0; i < 10; i++) {
        const {title, link} = feed.items[i];
        console.log(`${i + 1}번째 게시물`);
        console.log(`추가될 제목: ${title}`);
        console.log(`추가될 링크: ${link}`);
        text += `<li><a href='${link}' target='_blank'>${title}</a></li>`;
    }

    text += `</ul>`;
    
    // README.md 파일 생성
    writeFileSync('README.md', text, 'utf8', (e) => {
        console.log(e);
    })
    console.log('업데이트 완료');
})();

5) main.yml 생성
Git action 파일을 생성하기 위해 프로젝트 루트에서 .github\workflows 폴더를 생성한다. 해당 폴더 안에 main.yml을 생성한다.

main.yml 파일에 아래 내용을 기입한다. 스케쥴러 크론식(cron)을 이용하여 스크립트 실행 주기를 정할 수 있다.

# This is a basic workflow to help you get started with Actions

name: Readme Update

# Controls when the workflow will run
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  # 1시간에 한번씩 아래 스크립트를 실행한다.
  schedule:
    - cron: "0 */1 * * *"
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Install dependencies
        run: | 
          npm ci
          npm install rss-parser

      - name: Update README
        run: npm start

      - name: Check if there are any changes
        id: verify_diff
        run: |
          git diff --quiet . || echo "changed=true" >> $GITHUB_OUTPUT

      - name: Commit README
        if: steps.verify_diff.outputs.changed == 'true'
        run: |
          git config --local user.email "본인의 Github 이메일"
          git config --local user.name "본인의 Github 이름"
          git add .
          git commit -m "Update README.md"
          git push origin main

6) .gitignore 파일 생성

프로젝트 루트에서 .gitignore 파일도 생성해주자. 중요한 건 아니라서 패스해도 된다.

/node_modules

여기까지 진행한다면 프로젝트 구조가 이렇게 된다.

7) Github에 push 하기

여태까지 변경한 내용을 Github에 push한다. VsCode에서는 [커밋 및 동기화]를 이용해서 간단하게 push할 수 있다.

5. Git action permission 설정

여기까지 진행한다면 에러가 발생할 것이다. Github에서 Actions 탭에서 build 오류 내용을 살펴보면 403 permission 오류가 발생한다.

이를 해결하기 위해 Settings 메뉴로 들어가서 Actions > General로 들어간다.

스크롤을 내리면 Workflow permissions 항목에서 [Read and write permissions] 선택한 뒤 저장한다.

다시 시간이 지난 뒤 Action을 확인하면 정상적으로 처리된 것을 확인할 수 있다. 참고로 크론식 주기를 짧게 잡으면 설정한 시간보다 좀 더 느리게 처리된다. 만약 하루에 한번씩 업데이트 되도록 하려면 cron 항목을 "0 0 * * *" 으로 변경하면 된다.

최종적으로 아래 사진처럼 최근 10개의 글만 업데이트 된다. 전체 코드 및 결과물을 확인하려면 https://github.com/comsuter/comsuter를 참고하자.

References

Tistory 글 작성하고 Github 잔디심기, README.md에 gif 파일 넣기

Github action nothing to commit, working tree clean 오류 해결

컴슈터 — Sat, 30 Mar 2024 12:25:28 +0900

문제 발생

Git Action을 이용해서 티스토리와 Github를 서로 연동하다가 build failed이 발생했다.

내 경우 git add .를 수행하다가 발생했는데, 다른 명령어를 수행하다가 동일한 에러가 발생할 수 있다.

Github action nothing to commit, working tree clean
Error: Process completed with exit code 1.

main.yml 파일에서 아래 명령어를 순차적으로 실행하다가 ✅ 표시된 부분에서 오류가 발생한 것이다. 빌드 시점에 새롭게 추가된 내용이 없는데 git add .를 수행하려고 하니 오류가 발생한 것이다.

jobs:
  # This workflow contains a single job called "build"
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          
      - name: Install dependencies
        run: | 
          npm ci
          npm install rss-parser
          
      - name: Update README
        run: npm start
        
      - name: Commit README
        run: |
          git add .     // ✅ 이 부분에서 에러 발생
          git config --local user.email "본인의 Github 이메일"
          git config --local user.name "본인의 Github 이름"
          git commit -m "Update README.md"
          git push origin main

해결 방법

그렇다면 빌드를 수행할 시점에 추가된 내용이 존재하는지 체크한 다음, 내용이 없다면 커밋하거나 푸시하지 않으면 된다. Git 명령어 diff를 이용해서 소스 변경 여부를 체크한다. 소스에서 추가되거나 변경된 내용이 없으면 문제가 발생한 부분을 아예 실행하지 않는다.

jobs:
  # This workflow contains a single job called "build"
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Install dependencies
        run: | 
          npm ci
          npm install rss-parser

      - name: Update README
        run: npm start

      - name: Check if there are any changes ✅ 변경점 있는지 체크
        id: verify_diff
        run: |
          git diff --quiet . || echo "changed=true" >> $GITHUB_OUTPUT

      - name: Commit README
        if: steps.verify_diff.outputs.changed == 'true' ✅ 변경점 있을 경우에만 실행
        run: |
          git config --local user.email "본인의 Github 이메일"
          git config --local user.name "본인의 Github 이름"
          git add .
          git commit -m "Update README.md"
          git push origin main

최종적으로 build success된 것을 확인했다.

앵귤러 NullInjectorError: No provider for _HttpClient! 오류 해결

컴슈터 — Fri, 29 Mar 2024 14:13:48 +0900

문제 발생

앵귤러에서 HTTP 통신을 하기 위해 HttpClient를 이용하려고 한다. 서비스의 constructor에서 HttpClient를 가져다썼더니 NullInjectorError 에러가 발생했다.

import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserService {

  constructor(public httpClient: HttpClient) { } // 여기서 문제 발생
  
}

NullInjectorError 에러의 내용은 HttpClient에 대한 provider가 없다는 의미다.

ERROR NullInjectorError: R3InjectorError(_AppModule)[_UserService -> _HttpClient -> _HttpClient]:
NullInjectorError: No provider for _HttpClient!
at NullInjector.get (core.mjs:1654:27)
at R3Injector.get (core.mjs:3093:33)
at R3Injector.get (core.mjs:3093:33)
at injectInjectorOnly (core.mjs:1100:40)
at Module.ɵɵinject (core.mjs:1106:42)
at Object.UserService_Factory [as factory] (user.service.ts:8:25)
at core.mjs:3219:47
at runInInjectorProfilerContext (core.mjs:866:9)
at R3Injector.hydrate (core.mjs:3218:21)
at R3Injector.get (core.mjs:3082:33)

해결 방법

HttpClient 모듈을 앱의 모든 곳에서 사용할 수 있게 하려면, AppModule에서 해당 모듈을 추가하기만 하면 된다. 즉 아래처럼 HttpClientModule을 import한 뒤, @NgModule 내의 imports에서 모듈을 추가한다.

[app.module.ts]

import { HttpClientModule } from '@angular/common/http'; // 추가

@NgModule({
  // 생략...
  imports: [
    HttpClientModule // 추가
  ],
})
export class AppModule { }

JavaScript 최신 트렌드 확인하기 (feat. 라이징스타)

컴슈터 — Thu, 28 Mar 2024 18:02:23 +0900

JavaScript 관련해서 세계적인 트렌트를 확인할 수 있는 사이트를 알게 돼서 내용을 공유한다. 무궁무진하게 생기는 JavaScript 시스템에서 트렌드를 쉽게 확인할 수 있다.

라이징스타

risingstars 사이트에 접속하면 2023년 프론트엔드 프레임워크 인기 순위를 알 수 있다. React가 2021년부터 현재까지 자바스크립트 생태계에서 1위를 유지하고 있다. 대표적인 프론트엔드 3대장 (React, Vue, Angular) 말고도 htmx, Svelte, Million 등 프레임워크가 인기를 끌고 있다. 그래프 오른쪽에는 사람들이 덧붙인 코멘트가 있어서 같이 읽어보면 좋다.

이 사이트의 장점은 프론트엔드 말고도 백엔드, 모바일, 빌드 도구, 테스팅 프레임워크, AI 등 다양한 자바스크립트 시스템에 대한 트렌드를 확인할 수 있다는 점이다.

이 정보들은 지난 12개월 동안 Github에 추가된 별의 개수를 비교한 것인데 Best of JS 사이트에서 나온 프로젝트를 기반으로 한눈에 보기 쉽게 그래프로 보여주고 있다.

[Book] 앵귤러 첫걸음 책을 읽은 후기

컴슈터 — Thu, 28 Mar 2024 07:40:44 +0900

앵귤러 프로젝트에 곧 투입될 예정이라 앵귤러 첫걸음 이라는 책을 대여해서 읽어봤다. 책을 읽기 전, 목차를 살펴보니 앵귤러 개념들을 상세하게 다루고 있는 것 같아서 선택했다.

이 책의 장점은 예제 중심으로 이루어져 있어서 실습을 통해 앵귤러의 문법과 기능을 익힐 수 있고, 실습 예제도 Github을 통해서 가져다 쓸 수 있다.

기초 설명부터 실제 프로젝트인 상품 관리 애플리케이션을 실습으로 만들어볼 수 있고, 앵귤러 CLI를 활용한 개발 방법과 앵귤러 생태계의 서드파티 라이브러리 활용, 그리고 파이어베이스를 사용한 앵귤러 웹 애플리케이션 배포까지 다루고 있다.

다만 487페이지의 방대한 분량에다가 2017년에 발행된 책이다보니 동작하지 않는 소스도 많아서 구글링으로 해결하는데 꽤 많은 시간이 소요되어 가볍게 완독 하는 데에만 일주일이 넘게 걸렸다.

아쉬운 점은 후반부로 갈수록 내용에 소스 범벅에 산만한 느낌이 있다. 또한 예제 소스의 결과물에 대한 이미지의 양이 적어서 꽤 애를 먹었다. 옛날 소스라서 당장 동작이 안되는데 그림이 없으니 어떤 흐름인지 파악하기가 어려웠다. 예제에 대한 결과물을 그림으로 보여주면 좀 더 쉽게 이해가 될텐데, 그러면 페이지 양이 늘어나서 첨가를 안 하신 건가?라는 생각이 들었다.

그래도 구버전 앵귤러가 아닌, 신버전 앵귤러에 대해서 자세하게 설명하고 있는 몇 안되는 앵귤러 서적이라서, 나같이 앵귤러 프로젝트에 투입 예정인 개발자들은 가볍게 읽어봐도 좋을 것 같다. 두 번째로 읽었을 때는 어떤 느낌일지 다시 읽어보려고 한다.

앵귤러 첫걸음 목차

✅ PART I 기초 다지기
CHAPTER 1 앵귤러 준비하기
1.1 Node.js
1.2 NPM 다루기
__1.2.1 패키지 설치
__1.2.2 실습: welcome-msg-app
__1.2.3 패키지와 의존 관계
__1.2.4 로컬 환경과 전역 환경
__1.2.5 package.json
1.3 마치며

CHAPTER 2 앵귤러 시작하기
2.1 타입스크립트
__2.1.1 타입 언어
__2.1.2 상위 언어
__2.1.3 열린 언어
__2.1.4 에디터 설정
2.2 Hello, Angular
__2.2.1 ng new
__2.2.2 ng serve
__2.2.3 ng test
__2.2.4 타입 선언 정보
2.3 마치며

CHAPTER 3 앵귤러 아키텍처
3.1 뷰를 구성하는 요소
__3.1.1 컴포넌트와 템플릿
__3.1.2 컴포넌트 생명 주기
__3.1.3 컴포넌트 트리
__3.1.4 데이터 바인딩
__3.1.5 마치며
3.2 애플리케이션을 완벽하게 만드는 요소
__3.2.1 서비스와 의존성 주입
__3.2.2 상태 관리 및 공유
__3.2.3 지시자
__3.2.4 파이프
__3.2.5 모듈
3.3 머티리얼 패키지 적용
3.4 마치며

✅ PART II 기본기 향상하기
CHAPTER 4 뷰를 구성하는 기초
4.1 컴포넌트
__4.1.1 컴포넌트의 선언
__4.1.2 메타데이터
__4.1.3 부트스트래핑
__4.1.4 컴포넌트 트리
4.2 템플릿
__4.2.1 절차적 방식과 선언적 방식
__4.2.2 데이터 바인딩
__4.2.3 지시자
__4.2.4 파이프
4.3 마치며

CHAPTER 5 견고한 애플리케이션 만들기
5.1 서비스
__5.1.1 서비스의 생성과 사용
__5.1.2 실습: 마우스 위치 로거
__5.1.3 싱글턴으로서의 서비스
5.2 의존성 주입
__5.2.1 Injectable, Inject 데코레이터
__5.2.2 providers
__5.2.3 의존성 주입기 트리
__5.2.4 Host, Optional 데코레이터
5.3 테스트 코드 작성
__5.3.1 서비스 테스트
__5.3.2 컴포넌트 테스트
5.4 디버깅
5.5 마치며

CHAPTER 6 컴포넌트 고급
6.1 독립된 요소: 컴포넌트
__6.1.1 웹 컴포넌트
__6.1.2 컴포넌트와 스타일 정보
__6.1.3 컴포넌트의 독립성을 깨뜨리는 안티패턴
6.2 컴포넌트 간 상태 공유와 이벤트 전파
__6.2.1 부모-자식 컴포넌트 간의 통신
__6.2.2 실습: 컴포넌트 통신 V2
__6.2.3 다양한 상태 공유 시나리오
__6.2.4 싱글턴 서비스를 이용한 상태 공유
6.3 앵귤러 방식의 템플릿 요소 탐색
__6.3.1 ViewChild를 사용한 요소 탐색
__6.3.2 템플릿 참조 변수와 ElementRef
__6.3.3 Content Projection과 ContentChild를 사용한 요소 탐색
6.4 컴포넌트 생명 주기
__6.4.1 ngOnInit과 ngOnDestroy
__6.4.2 ngAfterContentInit과 ngAfterViewInit
__6.4.3 ngOnChanges
__6.4.4 ngDoCheck
__6.4.5 ngAfterContentChecked와 ngAfterViewChecked
__6.4.6 지시자의 생명 주기
6.5 마치며

CHAPTER 7 HTTP 통신과 RxJS
7.1 HttpModule과 Http 서비스 기초
__7.1.1 실습: 초간단 사용자 조회 애플리케이션
__7.1.2 angular-in-memory-web-api 활용
7.2 RxJS
__7.2.1 왜 RxJS인가?
__7.2.2 RxJS 원리
__7.2.3 RxJS 연산자 활용
__7.2.4 RxJS를 활용한 마우스 위치 로거 코드 개선
7.3 게이트웨이 기반 Http 서비스 활용
__7.3.1 ApiGateway 서비스
__7.3.2 실습: 사용자 관리 애플리케이션
__7.3.3 HTTP 통신 관련 중복 코드 제거
7.4 마치며

CHAPTER 8 폼 다루기
8.1 폼의 구성
__8.1.1 폼 모델
__8.1.2 AbstractControl과 폼의 값 상태
__8.1.3 폼 지시자
__8.1.4 실습: NgModel과 FormControl
8.2 템플릿 주도 폼
__8.2.1 ngModel과 양방향 바인딩
__8.2.2 실습: 템플릿 주도 폼
__8.2.3 폼 유효성 검증
__8.2.4 커스텀 Validator 지시자 작성
8.3 반응형 폼(모델 주도 폼)
__8.3.1 ReactiveFormsModule
__8.3.2 FormBuilder
__8.3.3 FormGroup, FormControlName
__8.3.4 실습: 반응형 폼
__8.3.5 실습: 동적 폼
8.4 마치며

CHAPTER 9 앵귤러 동작 원리
9.1 부트스트랩과 컴파일
__9.1.1 애플리케이션의 최초 진입점
__9.1.2 JIT 컴파일
__9.1.3 AOT 컴파일
__9.1.4 부트스트랩 과정 분석
9.2 Zone.js와 변화 감지
__9.2.1 앵귤러를 움직이게 만드는 세 가지 이벤트
__9.2.2 Zone.js를 활용한 비동기 코드 감지
__9.2.3 상태 변화를 일으키는 세 가지 이벤트
__9.2.4 변화 감지 트리와 변화 감지 전략
9.3 마치며

PART III 깊이 들어가기
✅ CHAPTER 10 프로젝트: 상품 관리 애플리케이션 구성
10.1 애플리케이션 설계
__10.1.1 기능 정의 및 도메인 모델
__10.1.2 컴포넌트 트리
10.2 프로젝트 구성
10.3 프로젝트 구현 1: 기본 레이아웃 구현
__10.3.1 주요 컴포넌트 생성
__10.3.2 컴포넌트 구현 코드
__10.3.3 라우터 없이 사이드바 기능 구현
10.4 마치며

CHAPTER 11 모듈과 라우터
11.1 모듈의 분리
__11.1.1 기능 모듈
__11.1.2 핵심 모듈
__11.1.3 모듈의 imports, exports
__11.1.4 프로젝트 구현 2: 도메인별 기본 구현
11.2 라우터 기본
__11.2.1 라우터 설정: Route
__11.2.2 Routes 등록
__11.2.3 RouterLink, RouterLinkActive
__11.2.5 프로젝트 구현 3: 라우터 설정
__11.2.6 라우터 사용의 장점
11.3 라우터 활용
__11.3.1 상태 관리
__11.3.2 Router
__11.3.3 ActivatedRoute
__11.3.4 가드의 설정
11.4 모듈별 라우터
__11.4.1 컴포넌트 경로
__11.4.2 라우팅 설정 분리하기
__11.4.3 프로젝트 구현 4: 라우터 설정 분리
11.5 마치며

CHAPTER 12 프로젝트: 파이어베이스 사용
12.1 파이어베이스 사용
__12.1.1 프로젝트 생성
__12.1.2 파이어베이스 CLI
__12.1.3 파이어베이스 연동
12.2 프로젝트 구현 5
__12.2.1 도메인 모델 클래스 구현
__12.2.2 사용자 세션 기능 구현
12.3 프로젝트 구현 6
__12.3.1 실시간 데이터베이스 사용
__12.3.2 NoCounterService 구현
__12.3.3 DataStoreService 구현
__12.3.4 파이어베이스 보안 규칙 설정
12.4 마치며

CHAPTER 13 프로젝트: 상품 관리 애플리케이션 구현 최종
13.1 프로젝트 구현 7
__13.1.1 카테고리 관리 뷰
__13.1.2 CategoryDetailComponent
__13.1.3 CategoryDetailResolverService
__13.1.4 CategoryItemComponent
__13.1.5 CategoryManagementComponent
__13.1.6 CategoryListResolverService
13.2 프로젝트 구현 8
__13.2.1 상품 관리 뷰
__13.2.2 ProductDetailComponent
__13.2.3 ProductDetailResolverService
__13.2.4 ProductListComponent
__13.2.5 ProductListResolverService
__13.2.6 CheckedProductSetService
__13.2.7 ButtonGroupComponent
__13.2.8 ProductBulkUpdaterService
__13.2.9 ProductManagementComponent
13.3 프로젝트 최종 구현
__13.3.1 MainDashboardComponent
__13.2.2 스피너
__13.3.3 상품 상태 파이프
__13.3.4 CanDeactivate 가드 설정
__13.3.5 세션 가드
13.4 마치며

부록.
자바스크립트의 진화: ES6(ECMAScript 6)
1. ES6 표준의 의미
2. 모듈 시스템
3. 모듈 번들러
4. 실습: area-calculator

[강의] 앵귤러(2+) Front에서 Back까지 후기

컴슈터 — Wed, 27 Mar 2024 07:49:19 +0900

강의 소개

인프런에서 Angular(2+) Front에서 Back까지 강의를 수강 완료했다. 직전에 들었던 강의보다 라우터 모듈, 서비스 개념까지 다루고 있어서 좀 더 심도 있는 수준으로 배울 수 있다. 강의자는 Angular + Nest.js 스펙을 목표로 영상을 찍으신 것 같다.

강의 후기

이 강의는 총 20개 강의, 5시간 28분 분량으로 꽤 무겁다. 실습을 같이 병행하면서 오류도 고치다보니 수강 완료까지 3-4일이 소요되었다.

무료 강의지만 강의 퀄리티가 좋은 편이다. 스톱워치 실습을 시작하기 전에 TypeScript에 대해서 간단한 예제를 보여준다. tsc 명령어로 TypeScript 파일이 JavaScript 파일로 변환되는 과정, tsconfig.json 파일의 target 설명, 접근제한자, 데코레이터 등 가볍게 다룬다.

특히 아래처럼 생성자에서 public으로 선언시, 해당 클래스에 멤버변수로 등록된다는 점이 꽤 신선했다.

// 기존 방법
class Car {
    age
    constructor(age: number) {
        this.age = age;
    }
}

// 새로운 방법
class Car {
    constructor(public age: number) {
    }
}

Angular CLI 설치부터 모듈, 컴포넌트, 라우팅 모듈, 서비스까지 개념이 언급된다. 영상 후반부로 갈수록 강의 내용이 어려워지기 때문에, 실습하면서 복습 및 숙지하는 과정이 꼭 필요했다.

실습 초반부에 front-end 폴더를 만들면서 back-end 폴더도 만들 것이라는 암시를 주셨지만 실제로 강의 내용은 front-end에서 끝나서 그 부분은 아쉬웠다.

2019년도에 올라온 강의라서 앵귤러 버전부터 소스까지 미세하게 달라진 부분이 많았지만, 컴포넌트 및 모듈 개념이나 ES6 문법은 대체로 비슷해서 큰 문제없이 수강할 수 있었다. 스톱워치 샘플을 만들어보면서 앵귤러에 대해 파악하고 싶다면 추천한다.

도움 되는 분들

Angular가 궁금하신 분들
기본적인 웹 지식이 있는 분들(특히 ES6 이상 문법)

커리큘럼

크롬 개발자도구 소스 붙여넣기 오류 해결하기 (Don’t paste code DevTools)

컴슈터 — Tue, 26 Mar 2024 14:23:14 +0900

문제 발생

크롬 개발자도구(F12)에서 소스를 복사 붙여넣기하면 아래와 같은 오류가 발생하며 붙여넣기가 정상적으로 되지 않는다.

Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below to allow pasting.

직역하자면 DevTools Console에 신뢰 불가능한 코드를 붙이지 말라는 경고 문구로, 붙여넣기를 허용하려면 allow pasting을 입력하라는 명쾌한 해답을 제시한다.

해결 방법

아래처럼 allow pasting 명령어를 입력하여 매우 간단하게 해결할 수 있다.

앵귤러 Could not fine the '@angular-devkit/build-angular:dev-server' builder's node package. 오류 해결

컴슈터 — Mon, 25 Mar 2024 15:25:57 +0900

문제 발생

Github에서 다른 사람이 올린 소스를 git clone하여 로컬 PC에 받은 뒤 ng serve 명령어로 프로젝트를 실행하니 아래의 오류가 발생한다.

Error: Could not fine the '@angular-devkit/build-angular:dev-server' builder's node package.

직역하자면 '@angular-devkit/build-angular:dev-server' 빌더의 노드 패키지를 찾을 수 없다는 에러이다.

해결 방법 1

build-angular 패키지를 삭제했다가 다시 설치한다.

npm uninstall @angular-devkit/build-angular
npm install --save-dev @angular-devkit/build-angular

해결 방법 2

build-angular 패키지를 강제적으로 설치한다.

npm install @angular-devkit/build-angular --force

나는 2번째 방법으로 패키지를 강제적으로 설치했다. ng sever 명령어로 서버를 재실행하니 정상 실행되었다.

VsCode 한국어(한글)로 언어 설정 변경하는 방법

컴슈터 — Sun, 24 Mar 2024 07:57:16 +0900

VsCode(Visual Studio Code)는 최초 설치하면 언어가 영문으로 기본 설정되어있다. 한국 사람은 한국어로 봐야 더 편한법! VsCode에서 영문을 한국어로 변경하는 방법을 설명한다.

1. VsCode 설정창 접속하기

VsCode에서 단축키 F1를 누르면 명령어를 입력할 수 있다. 또는 좌측 하단에 톱니바퀴 버튼 클릭 후 [Command Palette] 메뉴를 선택해도 된다.

입력창에 Configure Display Language를 입력한다.

2. 한국어 선택하기

바로 언어를 선택할 수 있는 목록이 나오는데 한국어를 선택한다.

재시작 경고창이 뜰 것인데 Restart를 눌러서 다시 시작하면 메뉴가 한국어로 설정된 것을 확인할 수 있다. 반대로 한국어에서 영문으로 다시 변경할 때에도 같은 방법을 사용하면 된다.

[강의] 앵귤러 기본과 간단한 To-Do 어플리케이션 만들기 후기

컴슈터 — Sat, 23 Mar 2024 07:13:12 +0900

강의 소개

인프런에서 Angular 기본과 간단한 To-Do 어플리케이션 만들기 강의를 수강 완료했다. 이 강의는 앵귤러 2 버전 이상의 기본기를 배울 수 있는 무료 강의이다. 앵귤러 탄생 배경과 컴포넌트, 모듈같은 중요 개념들을 학습하고, 간단한 앱을 만들어 보면서 앵귤러를 가볍게 접할 수 있다.

강의 후기

이 강의는 총 10개 강의, 2시간 16분 분량으로 구성되어 있어서 크게 부담스러운 학습시간은 아니다. 게다가 무료 강의라서 가벼운 마음으로 학습할 수 있다.

초급자를 위한 기초 강의인지라 배우는데 큰 어려움은 없지만, ES6 문법과 TypeScript에 대해서 익숙하지 않다면 쉽지 않을 수 있다. 앵귤러 관련 Angular CLI 설치부터 모듈, 컴포넌트, 파이프 등을 이용해서 간단한 To-Do 앱을 만들고 라우터, 서비스에 대한 내용은 다루지 않는다.

아쉬운 점은 2017년도에 올라온 강의라서 앵귤러 버전부터 소스까지 미세하게 달라진 부분이 많았지만, 컴포넌트 및 모듈 개념이나 ES6 문법은 대체로 비슷해서 큰 문제없이 수강할 수 있었다. 가볍게 앵귤러에 대해 파악하고 싶다면 들어볼 만한 강의이다.

도움 되는 분들

평소 Angular 를 학습하고 싶었던 분
Angular2 이상의 버전을 학습하고 싶은 분
웹프론트엔드 개발자가 되고 싶은 분
Javascript 에 대한 이해도가 있으신 분

커리큘럼

앵귤러 컴포넌트 데이터 전달 방법 및 Todo 리스트 예제 응용하기

컴슈터 — Sat, 23 Mar 2024 06:17:16 +0900

컴포넌트 커뮤니케이션

1) 부모-> 자식 컴포넌트

✅ 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 @Input 데코레이터를 이용하면 부모->자식 컴포넌트로 속성값을 세팅할 수 있다.
✅ 자식 컴포넌트의 속성을 ES6 setter를 이용해서 데이터를 가공한 후에 비공개 속성값을 세팅할 수도 있다. get을 통해 비공개 속성값을 공개적으로 가져오게 된다.
✅ @ViewChild 데코레이터를 이용하여 자식 컴포넌트 클래스에 인스턴스 레퍼런스를 부모 컴포넌트에서 직접 전달받을 수도 있다.

2) 자식->부모 컴포넌트

✅ 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 발송할 때는 @Output 데코레이터와 EventEmitter를 이용하여 특정 이벤트와 데이터를 발생시킬 수 있다.
✅ 이벤트 바인딩을 통해 데이터를 전달 받거나,
✅ 자식 컴포넌트가 부모 컴포넌트를 생성자를 통해 직접 주입받을 수 있다. (단, 강력한 의존관계가 성립되므로 꼭 필요한 경우에만 사용하는 것이 좋음)

TODO 리스트 예제 응용하기

Todos 부모 컴포넌트와 Todos, AddTodo 라는 2개의 자식 컴포넌트 간 데이터를 주고받는지를 알아본다.

1. todo 컴포넌트 생성

이전 포스팅에서 반복문으로 표현했던 Todo 목록을 별도의 컴포넌트로 분리할 것이다. todos 폴더 우클릭 후 [New Component]를 선택하여 입력창에 todo를 입력한다. 그러면 오른쪽 사진과 같이 todos/todo 컴포넌트가 생성된다.

2. 모델 클래스 만들기

arc/app/todo 폴더에서 share 폴더 생성 후 todo.model.ts 파일을 생성한다. 하나의 모델 클래스를 만들어놓고, 여러 컴포넌트에서 참조해서 쓸 수 있도록 할 것이다.

src/app/todo/share/todo.model.ts 파일

// Todo 클래스는 2개의 속성을 정의한다.
export class Todo {
  done: boolean = false;
  text: string = '';
}

src/app/todo/todos/todos.component.ts 파일

import { Todo } from '../share/todo.model'; // 모델 추가

export class TodosComponent {

  // todos: { // 변경 전 : 모델로 분리하기 전
  //   done: boolean,
  //   text: string
  // }[]

  todos: Todo[]; // 변경 후 : 모델로 분리한 후 (모델 클래스 Todo[]로 대체)

}

3. @Input 사용하기

src/app/todo/todos/todo/todo.component.ts 파일

import { Todo } from '../../share/todo.model';

export class TodoComponent {
  @Input() todo: Todo = new Todo; // 하나의 객체를 의미하는 Todo 클래스로 대체
                                  // @Input으로 부모->자식 컴포넌트로 데이터 전달

src/app/todo/todos/todos.component.html 파일

<div *ngFor="let todo of todos" (click)="toggleTodo(todo)">
    <!-- app-todo 셀렉터로 todo 속성을 설정 -->
    <app-todo [todo]="todo"></app-todo>
</div>

src/app/todo/todos/todo/todo.component.html 파일

<!-- 체크박스 로직을 분리 -->
<input type="checkbox" [checked]="todo.done"><label>{{ todo.text }}</label>

여기까지 진행하면 흐름이 이렇게 된다.

4. add-todo 컴포넌트 생성

이제 @Input과 반대의 케이스인 @Output 케이스를 보기 위해 별도의 컴포넌트로 분리할 것이다. todos 폴더 우클릭 후 [New Component]를 선택하여 입력창에 add-todo를 입력한다. 그러면 오른쪽 사진과 같이 todos/add-todo 컴포넌트가 생성된다.

src/app/todo/todos/add-todo/add-todo.component.html 파일

<!-- 할 일 추가 로직을 분리 -->
<input type="text" placeholder="할 일 추가" [(ngModel)]="newText">
<button (click)="addTodo(newText)">추가</button>

5. @Output 사용하기

src/app/todo/todos/add-todo/add-todo.component.ts 파일

import { Component, Output, EventEmitter } from '@angular/core';

// 생략...
export class AddTodoComponent {

  // @Input 및 EventEmitter를 이용하여 자식->부모 컴포넌트로 이벤트 및 데이터를 전달
  @Output() onTodoAdded = new EventEmitter();
  newText: string = '';

  addTodo(newText: string) {
    this.onTodoAdded.emit(newText);
    this.newText = '';
  }
}

src/app/todo/todos/todos.component.html 파일

<div>
  <!--  할 일 추가 부분에 onTodoAdded 내용 추가 -->
  <app-add-todo (onTodoAdded)="addTodo($event)"></app-add-todo>
</div>

여기까지 진행하면 흐름이 이렇게 된다.

여기까지의 최종 소스

src/app/todo/todos/add-todo/add-todo.component.html

<button (click)="addTodo(newText)">+</button>
<input type="text" placeholder="할 일 추가" [(ngModel)]="newText">

src/app/todo/todos/add-todo/add-todo.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-add-todo',
  templateUrl: './add-todo.component.html',
  styleUrl: './add-todo.component.css'
})
export class AddTodoComponent {

  @Output() onTodoAdded = new EventEmitter();
  newText: string = '';

  addTodo(newText: string) {
    this.onTodoAdded.emit(newText);
    this.newText = '';
  }
}

src/app/todo/todos/todo/todo.component.html

<input type="checkbox" [checked]="todo.done"><label>{{ todo.text }}</label>

src/app/todo/todos/todo/todo.component.ts

import { Component, Input } from '@angular/core';
import { Todo } from '../../share/todo.model';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrl: './todo.component.css'
})
export class TodoComponent {
  @Input() todo: Todo = new Todo;
}

src/app/todo/todos/todos.component.html

<div class="title">
  <h1>나의 일정</h1>
  <h2>{{ today | date : 'M월 d일'}}</h2>
</div>
<div>
  <div *ngFor="let todo of todos" (click)="toggleTodo(todo)">
    <app-todo [todo]="todo"></app-todo>
  </div>
</div>
<div>
  <app-add-todo (onTodoAdded)="addTodo($event)"></app-add-todo>
</div>

src/app/todo/todos/todos.component.ts

import { Component } from '@angular/core';
import { Todo } from '../share/todo.model';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrl: './todos.component.css'
})
export class TodosComponent {

  newText: string = '';

  todos: Todo[];

  constructor() {
    this.todos = [
      { done: false, text: '운동하기' },
      { done: true, text: '공부하기' },
    ]
  }

  toggleTodo(todo: any) {
    todo.done = !todo.done
  }

  addTodo(newText: string) {
    this.todos.push({
      done : false,
      text : newText
    })
  }
}

컴포넌트 css 처리 추가

src/app/todo/todos/todos.component.css

.title {
  background-color: blueviolet;
  padding: 46px 26px 26px 16px;
  color: white;
  font-weight: normal;
}

h1, h2 {
  margin: 0;
  font-weight: normal;
}
h1 {
  margin-bottom: 16px;
}

app-todo, app-add-todo {
  border-bottom: 1px solid #cccccc;
}

src/app/todo/todos/todo/todo.component.css

:host {
  display: block;
  padding: 16px;
  color: darkgray;
  background-color: white;
}

input {
  position: relative;
}
input:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 20px;
  position: absolute;
  top: -6px;
  left: -8px;
  border: 1px solid dimgray;
}
input:checked:after{
  content: '\2713';
  display: inline-block;
  font-size: 18px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  position: absolute;
  top: -6px;
  left: -8px;
  border: 1px solid dimgray;
  background-color: dimgray;
  text-align: center;
  color: white;
}

input:checked + label {
  text-decoration: line-through;
}

src/app/todo/todos/add-todo/add-todo.component.css

:host {
  display: block;
  padding: 16px 16px 16px 10px;
  background-color: white;
}

input {
  display: inline-block;
  font-size: 18px;
  border: none;
}

input:focus, button:focus {
  outline: none;
}

button {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  color: white;
  font-size: 16px;
  line-height: 17px;
  border: 1px solid dimgray;
  background-color: darkblue;
}

src/styles.css

/* You can add global styles to this file, and also import other style files */
body {
  margin: 0;
  background-color: #dddddd;
}

css까지 입힌 모습이다.

Maven 외부 라이브러리를 maven local repository에 직접 추가하는 방법

컴슈터 — Fri, 22 Mar 2024 12:56:24 +0900

외부 라이브러리가 포함된 Java 웹 애플리케이션을 war로 배포하려고 하니, 배포 실패가 되면서 maven repository에서 외부 라이브러리가 누락되었다는 오류가 발생했다.

지금부터 누락된 라이브러리를 local maven repository에 직접 추가하는 작업을 진행하려고 한다. 예를 들어 외부 라이브러리 ImageConverter.jar 파일을 직접 추가하려고 한다.

lib 폴더에 jar 파일 넣기

프로젝트￦lib 폴더를 생성하여 아래처럼 maven dependency 형식대로 폴더를 만든다. maven의 디렉토리 구조대로 동일하게 구성한다.

lib 폴더
    -- com 폴더
        -- company 폴더
            -- ImageConverter 폴더
                -- 1.0.0 폴더
                    -- ImageConverter-1.0.0.jar 파일

버전은 임의로 1.0.0으로 정의했으며 jar 파일명에도 1.0.0 버전을 붙여서 ImageConverter-1.0.0.jar으로 명명했다.

pom.xml 파일에 정보 기입하기

pom.xml 파일에 외부 라이브러리 jar의 groupId, artifactId, versjon을 추가한다.

<dependency>
    <groupId>com.company</groupId>
    <artifactId>ImageConverter</artifactId>
    <version>1.0.0</version>
</dependency>

여기까지만 실행하면 pom.xml에서는 not found 에러 메세지를 출력하는데 이유는 maven local repository에 해당 라이브러리가 배포되지 않았기 때문이다.

즉, pom.xml 파일에 정의되어 있는 의존성들은 모두 maven local repository를 참조하는데, 내 PC에서 m2 디렉토리 안에 ImageConverter.jar 파일이 존재하지 않아서 발생하는 것이다.

Maven Install 실행

이를 해결하기 위해서 아래 문법으로 maven install 하여 maven local repository에 ImageConverter-1.1.0.jar 파일을 배포시키면 된다.

case 1) Maven 설치된 경우

mvn install:install-file -Dfile=파일경로￦파일명.jar -DgroupId=그룹아이디 -DartifactId=아티팩트아이디 -Dversion=버전 -Dpackaging=jar

위 형식으로 실제로 작성하자면 아래와 같다.

mvn install:install-file -Dfile=.\lib\com\company\ImageConverter\1.0.0\ImageConverter-1.0.0.jar -DgroupId=com.company -DartifactId=ImageConverter -Dversion=1.0.0 -Dpackaging=jar

case 2) Maven 설치되지 않은 경우

만약 maven이 설치되지 않아서 mvn 명령어를 인식하지 못하는 경우, 아래처럼 mvn 명령어만 제외해도 정상적으로 실행이 된다. 프로젝트 우클릭 > Run As > Maven build > Goals에 아래 입력하여 Run 실행한다.

install:install-file -Dfile=.\lib\com\company\ImageConverter\1.0.0\ImageConverter-1.0.0.jar
-DgroupId=com.company -DartifactId=ImageConverter -Dversion=1.0.0 -Dpackaging=jar

내 경우 maven이 설치되지 않은 환경이라서 case 2번으로 진행했다.

로컬 Maven repository에 지정한 외부 라이브러리가 저장된다. .m2 디렉토리 내에서 .jar 파일과 .pom파일이 생성되는 것을 확인한 다음, 외부 라이브러리가 포함된 Java 웹 어플리케이션을 war로 배포하니 정상적으로 실행되었다.

이처럼 third party library를 maven local repository에 배포시키기 위해서는 다른 개발자들도 로컬에서 maven install 명령어를 실행시켜야 하는 수고가 필요하다.

앵귤러 모듈 컴포넌트 개념 및 Todo 리스트 예제 살펴보기

컴슈터 — Fri, 22 Mar 2024 07:51:15 +0900

모듈(Module)

모듈

세부 구현이 숨겨지고 공개 API를 이용해 다른 코드에서 재사용 가능한 코드를 말한다. (예를 들어 리모컨)

ES6에서의 모듈

ES6에서는 모듈 개념 + 변수의 스콥이 모듈로 제한된다. 스코프가 모듈 내로 제한된다는 의미는 각각 파일들이 하나의 모듈이 되는 것이며, 각각 파일에서 정의가 된 변수들은 파일 안에서 스콥이 보장된다. 따라서 각 파일에 있는 기능을 쓰려면 export, import 작업을 해야 한다.

앵귤러에서의 모듈

컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 주요 부분을 기능 단위로 그룹핑하게 해 준다.

모든 앵귤러 애플리케이션은 하나의 Root Module을 가진다. (ex. app.module.ts)
여러 Feature Module을 가질 수 있다.
재사용할 수 있는 기능을 외부에 배포하기 위해 사용되기도 한다. (ex. 메테리얼 디자인의 MdButtionModule, 부트스트랩의 ModalModule)

컴포넌트(Component)

앵귤러 애플리케이션은 여러 컴포넌트로 구성되어 있으며, 애플리케이션에서 가장 중요한 구성 요소이다. 여러 html 요소들이 한 컴포넌트에 그룹화되어 있다.

빌딩 블록(레고)
HTML 요소들의 그룹
뷰(템플릿)와 로직으로 구성되어 있음!

TODO 리스트 예제 만들기

1. 모듈 생성

모듈명이 todo인 모듈을 생성한다. src/app/todo/todo.module.ts 파일이 생성된다.

ng generate module todo            
# 또는 약어 사용가능
ng g m todo

이어서 todo 모듈 내부에 todos 컴포넌트를 생성한다. 이때 --module 플래그로 특정 모듈을 직접 지정가능한데 todo.module.ts 파일을 직접 지정했다. 또한 todo 컴포넌트는 다른 데서 사용할 수 있다는 의미로 --export 플래그를 추가한다. ( todo 컴포넌트도 export를 하기 때문에 ES6 모듈이 된다)

ng generate component todo/todos --module todo/todo.module.ts --export
# 또는 약어 사용가능
ng g c todo/todos --module todo/todo.module.ts --export

즉 아래처럼 명령어를 입력하면 총 5개의 파일이 생성된다.

최종적으로 모듈 파일 1개와 컴포넌트 관련 파일 4개가 생성된 것을 확인할 수 있다.

이제 todo 관련 내용으로 변경하기 위해 소스를 변경한다. app.component.ts 파일이 아닌 todos.component.ts 파일 내용으로 보이도록 변경할 것이다.

src/app/app.component.html 파일에서 Todo 셀렉터로 변경한다.

<app-todos></app-todos>

src/app/app.module.ts 파일에서 TodoModule 모듈을 추가한다.

// 생략...
import { TodoModule } from './todo/todo.module'; // Todo 모듈 추가

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TodoModule // Todo 모듈 추가
  ],
  //...
})
export class AppModule { }

여기까지 진행하면 todo 컴포넌트로 대체되어 보인다.

2. 샘플용 파일 작성

src/app/todo/todos/todos.component.html 파일에서 정적인 html 파일을 작성한다. 이 파일을 기준으로 컴포넌트 분리해 볼 것이다.

<div class="title">
    <h1>나의 일정</h1>
    <h2>3월 19일</h2>
</div>
<div>
    <div>
        <input type="checkbox">운동하기
    </div>
    <div>
        <input type="checkbox">공부하기
    </div>
</div>
<div>
    <input type="text" placeholder="할 일 추가">
</div>

서버 실행 시 정적인 html 파일 내용이 보인다.

3. 템플릿(Template) 이해하기

앵귤러에서 템플릿은 HTML 코드로서 템플릿을 표현한다. Template 표현식과 Template 문장을 가진다.

템플릿에서 가장 많이 이루어지는 게 특정 대상을 바인딩하는 것이다. 바인딩(Binding)은 컴포넌트 클래스의 속성과 데이터를 실제 브라우저 도큐먼트 오브젝트인 DOM의 속성과 이벤트와 연결하는 것이다.

바인딩은 크게 단방향, 양방향으로 분류할 수 있다. (아래 사진 화살표 참고) 바인딩의 대상으로는 속성, 이벤트, ngModel, class, style이 있다.

4. 단방향 바인딩 사용하기 (컴포넌트 -> DOM)

src/app/todo/todos/todos.component.ts 파일에서 단방향 바인딩을 사용하기 위해 todos 배열 객체를 생성한다.

// 생략...
export class TodosComponent {

  todos: {
    done: boolean,
    text: string
  }[]

  constructor() {
    this.todos = [
      { done: false, text: '운동하기' },
      { done: true, text: '공부하기' },
    ]
  }
}

src/app/todo/todos/todos.component.html 파일에서 todos 객체를 {{ }} 표현식을 이용하여 바인딩한다.

<div class="title">
    <h1>나의 일정</h1>
    <h2>3월 19일</h2>
</div>
<div>
    <div>
      <input type="checkbox" [checked]="todos[0].done">{{ todos[0].text }}
    </div>
    <div>
      <input type="checkbox" [checked]="todos[1].done">{{ todos[1].text }}
    </div>
</div>
<div>
    <input type="text" placeholder="할 일 추가">
</div>

위 소스의 Todo 목록을 *ngFor 문법을 이용하여 반복문으로 변경한다.

<div class="title">
  <h1>나의 일정</h1>
  <h2>3월 19일</h2>
</div>
<div>
  <div *ngFor="let todo of todos">
    <input type="checkbox" [checked]="todo.done">{{ todo.text }}
  </div>
</div>
<div>
  <input type="text" placeholder="할 일 추가">
</div>

여기까지 진행한다면 결과는 아래처럼 나온다.

5. 단방향 바인딩 사용하기 (DOM -> 컴포넌트)

src/app/todo/todos/todos.component.html 파일에서 반복문 부분에 클릭 이벤트인 toggleTodo 메서드를 설정한다.

  <div *ngFor="let todo of todos" (click)="toggleTodo(todo)">
    <input type="checkbox" [checked]="todo.done">{{ todo.text }}
  </div>

src/app/todo/todos/todos.component.ts 파일에서 toggleTodo 메서드 생성한다.

export class TodosComponent {
  // 생략...

  toggleTodo(todo: any) {
    todo.done = !todo.done
  }
}

6. 양방향 바인딩 사용하기 (ngModel)

src/app/todo/todos/todos.component.html 파일에서 [할 일 추가] 버튼에 ngModel 바인딩 처리 및 추가 버튼을 생성한다.

<div>
  <input type="text" placeholder="할 일 추가" [(ngModel)]="newText">
  <button (click)="addTodo(newText)">추가</button>
</div>

ngModel를 사용하기 위해서는 src/app/todo/todo.module.ts 파일에서 FormModule을 import 해야 한다.

// 생략...
import { FormsModule } from '@angular/forms';

@NgModule({
  // 생략...
  imports: [
    CommonModule,
    FormsModule // NgModule을 사용하기 위해 추가
  ],
})

src/app/todo/todos/todos.component.ts 파일에서 newText 변수와 addTodo 메서드를 생성한다.

// 생략...
export class TodosComponent {

  newText: string = '';

  addTodo(newText: string) {
    this.todos.push({
      done: false,
      text: newText
    });
    this.newText = '';
  }
}

결과는 아래와 같다. 입력란에 일정을 추가하면 새롭게 일정이 추가된다.

파이프

마지막으로 화면에 보이는 하드코딩된 날짜를 바꿔보자. 파이프는 템플릿에서 보이는 데이터를 변환해준다. 앵귤러 1 버전에서는 필터로 제공했다. 참고로 예제에서 {{ todos | json }} 으로 확인하면

파이프 형식 : {{ express | pipeName: paramValue }}
ex. {{ today | date }}
ex. {{ today | date : "yy/mm/dd" }}
ex. {{ today | date | uppercase }}

src/app/todo/todos/todos.component.html

<div class="title">
  <h1>나의 일정</h1>
  <h2>{{ today | date : 'M월 d일'}}</h2>
</div>

여기까지의 최종 소스

src/app/todo/todos/todos.component.html

<div class="title">
  <h1>나의 일정</h1>
  <h2>{{ today | date : 'M월 d일'}}</h2>
</div>
<div>
  <div *ngFor="let todo of todos" (click)="toggleTodo(todo)">
    <input type="checkbox" [checked]="todo.done">{{ todo.text }}
  </div>
</div>
<div>
  <input type="text" placeholder="할 일 추가" [(ngModel)]="newText">
  <button (click)="addTodo(newText)">추가</button>
</div>

src/app/todo/todos/todos.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrl: './todos.component.css'
})
export class TodosComponent {

  newText: string = '';

  todos: {
    done: boolean,
    text: string
  }[]

  constructor() {
    this.todos = [
      { done: false, text: '운동하기' },
      { done: true, text: '공부하기' },
    ]
  }

  toggleTodo(todo: any) {
    todo.done = !todo.done
  }

  addTodo(newText: string) {
    this.todos.push({
      done: false,
      text: newText
    });
    this.newText = '';
  }
}

VsCode에서 디렉토리 폴더 구조 겹침 없애는 방법

컴슈터 — Thu, 21 Mar 2024 15:13:27 +0900

VsCode(Visual Studio Code)를 사용하다보면 탐색기에서 상위 폴더와 하위 폴더가 / 로 분류되어 폴더 계층구조가 겹쳐서 보인다. 한 눈에 계층구조를 파악하기 불편하므로 폴더를 계층구조로 보이도록 설정할 것이다.

요거를 저렇게

1. VsCode 설정창 들어가기

본인의 운영체제에 따라 아래의 키를 동시에 누르면 VsCode 설정창에 접속한다.

Windows : Ctrl + ,
macOS : ⌘ + ,
Linux : Ctrl + ,

2. Compact Folders 체크박스 해제

설정창에서 explorer.compactFolders 검색 후 Explorer: Compact Folders 체크박스를 해제한다.

이제 하위 폴더도 계층 구조대로 확인할 수 있다. 간단하지만 은근 신경 쓰이는 부분 해결!

앵귤러 프로젝트 기본 구조 및 핵심 파일 살펴보기

컴슈터 — Thu, 21 Mar 2024 07:01:34 +0900

앵귤러 16 버전 기준으로 프로젝트 파일 구조를 알아보려고 한다. 앵귤러 버전별로 파일 구조가 다를 수 있으며, 타버전은 버전별 file-structure 문서를 참고하자.

앵귤러 프로젝트 구조

중요한 파일들 하나씩 살펴보기

angular.json 파일

이 파일은 워크스페이스에 있는 모든 프로젝트에 적용되는 Angular CLI 환경설정 파일이다. Angular CLI를 이용해서 빌드, 실행, 테스트할 때 사용하는 설정도 이 파일에서 구성한다.

이 파일에서 대표적인 중요한 키워드를 살펴보자.

"sourceRoot": "src" : 프로젝트의 루트 폴더는 src 폴더인 것을 알 수 있음
"outputPath": "dist/first-app" : 프로젝트 빌드시 dist 폴더가 만들어짐
"index": "src/index.html" : 인덱스 파일은 index.html 파일임
"browser": "src/main.ts" : 시작 지점이자 메인 파일은 main.ts 파일임

index.html 파일

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FirstApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

✅ 웹사이트에 접근한 사용자가 보게 되는 메인 HTML 파일이다.
✅ 앱에 사용되는 JavaScript 파일과 CSS 파일은 Angular CLI가 빌드시점에 자동으로 index.html 파일에 추가하기 때문에 <script> 태그나 <link> 태그를 수동 작성할 필요가 없다. (좀 더 덧붙이자면 Angular CLI는 Webpack을 통해 번들링해서 실제 서버 실행시 관련 자원들을 동적으로 추가해준다. 빌드를 하면 dist 폴더가 만들어지고, JavaScript나 CSS 파일이 포함된 배포용 index.html 파일이 생기게 된다.)
✅ <body> 부분에는 <app-root>셀렉터가 들어가 있다.

main.ts 파일

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

✅ 애플리케이션의 메인 진입점으로, 우리가 만든 코드들의 컴파일을 브라우저에서 담당한다.
✅ JIT (Just-In-Time) 컴파일러를 사용하면 이 파일을 기준으로 애플리케이션의 최상위 모듈(AppModule)이 부트스트랩된다. (참고로 --aot 플래그를 사용하면 AOT 컴파일러가 사용된다)
✅ 소스에서 AppModule 변수는 app.module.ts 파일을 참고하고 있다.

app.module.ts 파일

import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [ // 컴포넌트, 지시자, 파이프 등이 들어옴
    AppComponent
  ],
  imports: [ // 다른 모듈들이 들어옴
    BrowserModule,
    AppRoutingModule
  ],
  providers: [ // View가 없는 서비스 로직들이 들어옴
    provideClientHydration()
  ],
  bootstrap: [AppComponent] // 처음 실행할 컴포넌트를 지정함
})
export class AppModule { }

✅ 애플리케이션 구성이 시작될 최상위 모듈 AppModule을 정의한다. 프로젝트 최초 생성시 AppComponent 컴포넌트만 존재하지만, 앱이 커질수록 컴포넌트도 늘어나게 된다.
✅ @NgModule 데코레이터를 사용했으며 AppComponet 컴포넌트를 부트스트랩 한다고 정의되어 있다.
✅ 맨 하단의 import, export 문법은 ES6에서 제공하는 모듈 시스템이다.

AppComponent 컴포넌트 관련 파일

AppComponent는 최상위 컴포넌트에 해당하며, 하나의 컴포넌트가 각자 역할에 따라 분리되어 있다.

app.component.ts : 최상위 컴포넌트 AppComponent 정의
app.component.html : 최상위 컴포넌트 AppComponent의 HTML 템플릿 정의
app.component.css : 최상위 컴포넌트 AppComponent의 CSS 스타일 정의
app.component.spec.ts : 최상위 컴포넌트 AppComponent의 유닛 테스트 스펙을 정의

또한 ng generate 명령어를 이용하여 컴포넌트를 만들 수 있다, 컴포넌트 생성시 위처럼 4개 파일이 세트로 만들어진다. 즉 4가지 파일이 하나로 뭉쳐진 레고 조각이라고 보면 된다.

app.component.ts 파일

import { Component } from '@angular/core';

@Component({
  selector: 'app-root', // CSS 셀렉터 같은 선택자
  templateUrl: './app.component.html', // 뷰에 대한 정의
  styleUrl: './app.component.css' // 스타일에 대한 정의
})
export class AppComponent {
  title = '개발새발';
}

✅ 사용자가 보는 화면은 최상위 컴포넌트인 AppComponent를 기준으로 구성된 뷰 계층이다. 개발자가 구현한 컴포넌트와 서비스도 AppComponent 안에서 동작한다.
✅ @의 의미는 TypeScript에서 제공하고 있는 데코레이터를 의미하며 @Component는 단순 클래스가 아니라 ngAngular Component 이라는 것을 정의한 클래스가 된다.
✅ 컴포넌트의 셀렉터가 app-root로 설정되어 있기 때문에 index.html 파일의 <app-root>에 해당 컴포넌트가 들어가진다. 셀렉터는 #app-todos 또는 .app-todos 처럼 특정 엘리먼트를 선택 가능하고 또는 엘레먼트 이름이 <app-root>인 DOM을 가르킬 수도 있다.
✅ templateUrl 은 app.component.html 파일로 설정되어있고 styleUrl은 app.component.css 파일로 설정되어 있다. AppComponent 클래스의 title 속성은 아래 html 파일과 바인딩되어 아래 템플릿에 표현이 된다.

app.component.html 파일

<div>
  {{ title }}
</div>

JAVA 오버로딩, 오버라이딩을 통해 다형성 구현하기

컴슈터 — Wed, 20 Mar 2024 11:42:04 +0900

다형성(polymorphism)이란 하나의 객체가 여러 가지 타입을 가질 수 있는 것이다. 자바에서는 다형성을 위해 부모클래스 타입의 참조변수로 자식클래스 타입의 인스턴스를 참조할 수 있도록 한다. 오버로딩과 오버라이딩을 통해 다형성을 구현할 수 있다.

오버로딩과 오버라이딩의 비교

오버로딩과 오버라이딩은 그 단어의 유사함으로 인해 혼동하기 쉽다. 하지만 그 개념은 확실히 다르며, 그 차이점을 아는 것이 중요하다. 오버로딩(overloading)은 새로운 메서드를 정의하는 것이고, 오버라이딩(overriding)은 상속받은 기존의 메서드를 재정의하는 것이다.

	오버로딩	오버라이딩
메서드명	동일	동일
매개변수 및 타입	다름	동일
리턴 타입	관계 없음	동일

다형성을 구현하는 방법

오버로딩 : 메서드명이 같지만 파라미터가 다른 메서드

메서드명이 같아야 한다.
매개변수의 개수 또는 타입이 달라야 한다.
매개변수는 같고 리턴 타입만 다르면 오버로딩이 성립되지 않는다.

메서드 오버로딩을 사용함으로써 메서드에 사용되는 이름을 절약할 수 있다. 또한, 메서드를 호출할 때 전달해야 할 매개변수의 타입이나 개수에 대해 크게 신경을 쓰지 않고 호출할 수 있게 된다. 대표적인 예로는 println() 메서드를 들 수 있다.

class OverloadingTest {

    void test() {
        System.out.println("No parameters");
    }

    void test(int param) {
        System.out.println(param);
    }

    void test(String param) {
        System.out.println(param);
    }

    void test(int param1, int param2) {
        System.out.println(param1 + ", " + param2);
    }
}

public class Sample {
    public static void main(String[] args) {

        OverloadingTest obj = new OverloadingTest();

        obj.test(); // 출력 결과 : No parameters
        obj.test(1); // 출력 결과 : 1
        obj.test("one"); // 출력 결과 : one
        obj.test(10, 20); // 출력 결과 : 10, 20
    }
}

오버라이딩 : 부모클래스에서 정의한 메서드를 자식클래스에서 재정의

부모클래스의 메서드와 메서드 구성 요소 모두가 동일해야 한다.
메서드명, 매개변수, 리턴 타입이 모두 같아야 한다.

자바에서 자식 클래스는 부모 클래스의 private 멤버를 제외한 모든 메서드를 상속받는다. 이렇게 상속받은 메서드는 그대로 사용해도 되고, 필요한 동작을 위해 재정의하여 사용할 수도 있다. 즉, 메서드 오버라이딩이란 상속받은 부모 클래스의 메서드를 재정의하여 사용하는 것을 의미한다.

class Employee {
    public String name;
    public int age;

    public void print() {
        System.out.println("사원의 이름은 " + this.name + "이고 나이는 " + this.age + "입니다.");
    }
}

class Manager extends Employee {
    String jobOfManage;

    public void print() {
        System.out.println("관리자 " + this.name + "은 " + this.jobOfManage + " 담당입니다.");
    }
}

public class Sample {
    public static void main(String[] args) {

        Manager obj = new Manager();
        obj.name = "홍길동";
        obj.age = 40;
        obj.jobOfManage = "PM";  
        obj.print(); // 출력 결과 : 관리자 홍길동은 PM 담당입니다.
    }
}

좀 더 알아보기 : 참조변수의 다형성

참조변수가 사용할 수 있는 멤버의 개수가 실제 인스턴스의 멤버 개수보다 같거나 적어야 참조할 수 있다. 클래스는 상속을 통해 확장될 수는 있어도 축소될 수는 없기 때문에, 자식클래스에서 사용할 수 있는 멤버의 개수는 언제나 부모클래스와 같거나 많게 된다.

class Parent { ... }
class Child extends Parent { ... }

Parent pa = new Parent(); // 가능
Child ch = new Child();  // 가능
Parent pc = new Child(); // 가능
Child cp = new Parent();  // 오류 발생

참조변수의 타입 변환

class Parent { ... }
class Child extends Parent { ... }
class Brother extends Parent { ... }

Parent p1 = null;
Parent p2 = new Parent();
Child ch = new Child();
Brother br = null;

p1 = ch;          // 가능
br = (Brother)p2; // 가능
br = (Brother)ch; // 오류 발생

instanceof 연산자

다형성으로 인해 런타임에 참조변수가 실제로 참조하고 있는 인스턴스의 타입을 확인할 필요성이 생긴다. 자바에서는 instanceof 연산자를 제공하여, 참조변수가 참조하고 있는 인스턴스의 실제 타입을 확인할 수 있도록 해준다. 즉, 해당 객체가 어떤 클래스나 인터페이스로부터 생성되었는지를 판별해 주는 역할을 한다.

class A {}

class B extends A {}

public static void main(String[] args) {
    A a = new A();
    B b = new B();

    System.out.println(a instanceof A); // true
    System.out.println(b instanceof A); // true
    System.out.println(a instanceof B); // false
    System.out.println(b instanceof B); // true
}

왼쪽에 전달된 참조변수가 실제로 참조하고 있는 인스턴스의 타입이 오른쪽에 전달된 클래스 타입이면 true를 반환하고, 아니면 false를 반환한다. 만약에 참조변수가 null을 가리키고 있으면 false를 반환한다.

class Parent { ... }
class Child extends Parent { ... }
class Brother extends Parent { ... }

public class Polymorphism {
    public static void main(String[] args) {
        Parent p = new Parent();
        System.out.println(p instanceof Object); // true
        System.out.println(p instanceof Parent); // true
        System.out.println(p instanceof Child);  // false

        Parent c = new Child();
        System.out.println(c instanceof Object); // true
        System.out.println(c instanceof Parent); // true
        System.out.println(c instanceof Child);  // true    
    }
}

앵귤러 Property has no initializer and is not definitely assigned in the constructor 오류 해결

컴슈터 — Wed, 20 Mar 2024 07:52:41 +0900

문제 발생

앵귤러에서 클래스 안에서 속성 선언 시 아래의 오류가 발생한다.

Property xxx has no initializer and is not definitely assigned in the constructor

name이라는 문자열과 todos라는 배열을 선언할 때, 속성 값에 초기화 값이 없다는 뜻이다. 속성을 선언하고 난 뒤 값을 할당하거나 생성자에 초기화하지 않을 때 발생한다. 이 오류는 TypeScript의 엄격한 클래스 초기화 검사의 일부로, 모든 클래스 속성이 사용되기 전에 초기화되는지 확인한다.

해결 방법 1

속성 값을 직접 선언하여 초기화한다.

  name: string = ''; // 빈 문자열로 초기화
  
  todos: {
    done: boolean,
    text: string;
  }[] = []; // 빈 배열로 초기화

  constructor() {
  }

해결 방법 2

생성자(constructor)에서 속성을 초기화한다.

  name: string;
  
  todos: {
    done: boolean,
    text: string;
  }[];

  constructor() { // 생성자에서 속성 초기화
    this.name = '테스트';
    this.todos = [
      { done: false, text: '운동하기' },
      { done: true, text: '공부하기' },
    ];
  }

해결 방법 3

확실한 할당 주장(definite assignment assertion)인 느낌표('!')를 사용한다. 속성에 느낌표를 붙이면 TypeScript에 속성이 사용되기 전에 값이 할당되도록 할 것임을 알려준다. 다만 이 접근 방식은 초기화 검사를 우회하므로 사용할 때 주의해야 한다. 런타임 오류를 방지하려면 코드의 다른 곳에서 초기화를 적절하게 처리해야 한다. (TypeScript 관련내용 참고)

  name!: string;
  
  todos!: {
    done: boolean,
    text: string;
  }[];

  constructor() {
  }

위 3가지 방법 중 하나를 따르면 앵귤러에서 "Property has no initializer and is not definitely assigned in the constructor" 오류를 해결할 수 있다.

앵귤러 Can't bind to 'ngModel' since it isn't a known property of 'input' 오류 해결

컴슈터 — Tue, 19 Mar 2024 16:47:45 +0900

문제 발생

앵귤러에서 양방향 바인딩을 하기 위해 ngModel 문법을 사용하려고 하니 아래 에러가 발생했다.

Can't bind to 'ngModel' since it isn't a known property of 'input'

해결 방법

해결법은 매우 간단하다. 양방향 데이터 바인딩을 사용하기 위한 ngModel은 앵귤러 모듈에서 FormsModule 패키지를 import 해야 가져다 쓸 수 있다. 따라서 app.module.ts 파일에서 FormsModule 관련 정보를 추가한다.

import { FormsModule } from '@angular/forms';

...

@NgModule({
  imports: [
    FormsModule
  ],
})

즉, 아래처럼 두 줄을 추가하면 에러는 사라진다. 앵귤러를 처음 접하다보니 겪게 되는 소소한 문제이다.

코사(KOSA) 경력 등록하는 방법, 개발자 프리랜서 경력관리

컴슈터 — Sat, 16 Mar 2024 13:32:39 +0900

코사(KOSA)는 소프트웨어 기술자 경력관리 사이트이다. 프리랜서 개발자로 일하는 경우(특히 초급) 프로젝트 투입 시 코사 증명서를 요구하는 경우가 많아서 경력 증빙용으로 등록하곤 한다.

국민연금가입증명서 등으로 경력증빙 대체도 가능해서 코사에 등록하지 않는 사람도 많지만, 개인적인 경험상 아직까지는 업체 측에서 요구하고 있기에 코사로 경력관리를 하고 있다.

1. 코사(kosa) 접속하기

코사에 접속해서 회원가입 및 로그인을 한 뒤 [기술자신청] 버튼을 클릭한다.

2. 경력 정보 입력하기

기술자신청 화면으로 이동하면 본인이 일했던 경력 사항들을 입력하면 된다. 7개 파트(개인정보, 근무경력, 기술경력, 학력, 기술자격, 교육, 상훈)로 나뉘어 있는데 하나씩 살펴보자.

1) 개인정보

회원가입했던 기본 정보를 토대로 이미 세팅되어 있다. 현근무처는 [정상근무중/퇴사/프리랜서] 중에서 본인의 현재 상황에 따라 근무처 정보를 변경하면 된다.

2) 근무경력

근무경력 상단 [추가] 버튼으로 근무경력을 추가할 수 있다. 근무경력은 정규직으로 일했을 때의 근무경력만 입력해야 한다. 프리랜서 경력은 기술경력 항목에 입력해야 한다.

근무경력 입력시 주의사항

✅ 근무기간은 최대 오늘날짜까지만 입력할 수 있다. 현재 정규직으로 근무중이라면 퇴사 이후에 입력 후 기술자 신청을 진행하는 게 편리하다.

✅ 담당업무는 직종/직무 분류가 상세하게 나뉘어 있으니 신중하게 입력한다. 내 경우 SW개발 > 응용SW개발로 입력했다.

✅ 증빙방법은 회사명을 입력 시 아래 3개의 선택란이 보인다.

기업확인요청 : 본인이 입력한 근무경력을 기업에게 확인 요청해서 승인받는 방식 (단, 기업확인요청 진행 필수)
우편(방문) 제출 : 코사에 우편 또는 방문해서 근무경력 제출서류를 제출하는 방식
온라인 제출 : 첨부파일로 근무경력 제출서류를 제출하는 방식

기업확인요청 시

3개의 선택지 중 [기업확인요청] 방식이 관련 제출서류를 안내도 되서 가장 간단한 방법이다. 단, 기업확인요청 메뉴에서 직접 요청을 신청해야 한다.

신청방법은 요청받을 근무/기술경력을 체크박스 선택 후 [기업확인요청] 버튼을 클릭하여 진행한다. 기업이 코사 확인을 못할 수 있으니, 나는 회사에 "코사 기업확인 요청드린다"는 연락을 드려서 기업확인요청을 받았다.

우편(방문) 제출 또는 온라인 제출할 경우

회사 검색시 [기업확인요청]이 보이지 않는 경우 우편 또는 온라인으로 서류를 제출해야 한다. 내 경우 근무했던 회사가 코사에 등록되어 있지 않아서인지 [기업확인요청] 선택란이 아예 보이지 않았다. 그래서 퇴사했던 회사에 찾아가서 근무경력확인서 직인 도장 받으러 갔다.ㅎ

근무경력 제출서류 (아래 ①, ② 모두 제출)

① 근무경력확인서 (별지 제17호)
② 경력 및 기간 증명서류 (다음 중 택 1) : 건강보험자격득실확인서, 국민연금가입자가입증명, 고용보험피보험자격내역서, 근로소득원천징수영수증

휴폐업 기업인 경우 근무경력 (택 1)

① 법인등기사항전부증명서(법인사업자) : 인터넷대법원 등기소 발급, 폐쇄사항/말소사항 포함
② 사실증명원(법인/개인사업자) : 가까운 세무서 내방 (회사명, 사업자등록번호, 폐업일자, 업종/업태/부업종/부업태 등)

근무경력 증빙 및 모든 과정이 끝나면 아래처럼 최종 진행상태가 [확인]으로 바뀐다.

3) 기술경력

기술경력 상단 [추가] 버튼으로 기술경력을 추가할 수 있다. 프리랜서 경력은 기술경력 항목에 입력해야 한다. 본인이 참여한 프로젝트에 대한 정보를 작성하면 된다.

기술경력 입력 시 주의사항

✅ 참여사업명은 계약서에 명시되어 있는 프로젝트명을 기입한다.
✅ 수행기간은 프로젝트 전체 기간이 아닌, 실제 프로젝트에 참여한 기간을 입력한다.
✅ 직위는 프리랜서라면 '프리랜서'를 체크한다.
✅ 증빙구분은 아래 2개 선택지 중 택한다. 기술 경력확인서 직인을 받을 곳을 선택한다.

근무처 증빙 : 계약서 작성한 회사, 본인과 직접 계약한 업체 (급여를 지급해 주는 곳)
발주처 증빙 : 참여사업의 발주기관(고객사)

기업확인요청 시

기업확인요청으로 증빙할 경우 별도 메뉴에서 직접 신청해야 한다. 위 내용과 중복되므로 생략한다.

우편(방문) 제출 또는 온라인 제출할 경우

기술경력 제출서류 (아래 ①, ② 모두 제출)

① 기술경력확인서 (별지 제18호)
② 경력 및 기간 증명서류 (다음 중 택 1) : 건강보험자격득실확인서, 국민연금가입자가입증명, 고용보험피보험자격내역서, 근로소득원천징수영수증

프리랜서의 경우 추가 제출서류 (아래 ①, ② 모두 제출)

① 기술경력확인서 또는 용역계약서
② 경력 및 기간 증명서류 (다음 중 택 1) : 사업소득원천징수영수증, 급여 입금 내역 통장 사본(회사명으로 입금된 급여 확인), 기타 객관적인 증빙 서류

휴폐업 기업인 경우 기술경력

기술경력확인서 (발주처 확인)
프리랜서의 경우 : 용역계약서 (단, 용역계약서 상 계약명/기간/근무처/발주처/SW과업여부 등 명확하게 확인되어야 증빙서류로 확인 가능)

기술경력 증빙 및 모든 과정이 끝나면 아래처럼 최종 진행상태가 [확인]으로 바뀐다.

4) 학력

본인이 다녔던 학교 정보를 입력한다. 고등학교, 전문대, 대학교, 대학원, 기타 등 상세하게 입력할 수 있다. 제출 서류는 학력졸업증명서 또는 학위수여증명서를 제출하면 된다. (단 고등학교 학력에 한하여 행정정보조회에 동의하면 증빙서류를 제출하지 않아도 됨)

5) 기술자격

기술자격은 기술사, 기사, 산업기사, 기능사, 공인민간자격 등 본인이 취득한 자격증을 입력한다. 정보처리 분야 관련 자격증만 신청 가능하다. 제출 서류는 자격국가기술자격증 사본 또는 취득사항 확인서를 제출하면 된다. 단, 행정정보에 동의하면 증빙서류를 제출하지 않아도 되므로 정보처리기사 등 별도로 서류를 제출하지 않아도 된다.

6) 교육

IT 국비과정을 들었거나 정보처리 관련 교육정보를 입력한다. 제출 서류는 교육교육 수료증 사본이 필요하다.

7) 상훈

정보처리 관련 상훈이 있다면 입력한다. 제출 서류는 상훈표창장, 상장 등 사본을 제출하면 된다.

3. 기술자 경력 신청하기

본인의 기술 경력을 입력 후 기업확인요청까지 완료했다면 코사에게 승인을 받아야 한다. 코사에 최초 기술자 신청 시 25,000원의 비용이 발생하며 1년간 유효하다. 이후 경력관리비 5,000원 추가 납부하면 경력관리 기간이 1년간 연장된다.

4. 기술자 신청 후 대기

기술자 신청 처리는 접수순으로 진행하고 있어 당일 처리 등 우선처리는 불가능하니 프로젝트 투입 전 미리 준비하는 것이 좋다. 영업일 기준 3~4일 이내에 처리된다고 안내하고 있으며, 진행상황이 궁금하다면 기술자경력확인 > 신청내역 메뉴에서 확인할 수 있다.

(참고) 근무기간 축소 등 정정신청 가능

정정신청 메뉴에서 기존에 받았던 경력을 정정신청 할 수도 있다. 근무기간 축소, 담당업무 변경 등 경력사항에 대하여 정정 신청 시 해당기업의 소명자료가 필요하다. (근무기간 확장의 경우, 정정신청이 아닌 근무경력 추가를 해야 한다)

앵귤러 프로젝트 생성 및 개발환경 설정하기

컴슈터 — Wed, 13 Mar 2024 15:41:15 +0900

대표적인 프론트엔드 3대장은 리액트, 뷰, 앵귤러가 있다. 이 중 앵귤러 프로젝트에 투입 예정이라서 앵귤러에 대해 간단하게 공부해보려고 한다. (사실 앵귤러가 아니라 리액트를 하고 싶었던 건 안비밀 )

SPA

앵귤러를 알기 위해서는 SPA(단일 페이지 웹 애플리케이션)의 개념이 중요하다. SPA는 서버에 요청할 때마다 전체 리소스를 로드하는 것이 아닌, Ajax 요청을 통해 필요한 부분만 렌더링하는 것이다.

앵귤러는 SPA 개발을 위한 자바스크립트 프레임워크이며 점차 브라우저에서 재사용 가능한 단위인 컴포넌트 기반으로 웹 애플리케이션 개발이 가능하게 된다. SPA 및 컴포넌트를 활용하는 대표적인 것이 바로 앵귤러인 셈이다.

앵귤러(Angular)

앵귤러(Angular)는 구글에서 만든 SPA 프레임워크이고, 하나의 프레임워크로 웹과 앱을 동시에 구현할 수도 있다. 리액트나 뷰에 비해 러닝커브가 높아서인지 개발자들에게 상대적으로 인기가 낮은 편이다. 특히 앵귤러는 버전에 따라 문법이 크게 변화하는데 이것도 개발자들의 인기 영향에 한몫 끼쳤을 것으로 보인다.

앵귤러는 구버전, 신버전이 있다

구버전 : AngularJS (버전 1버전 JavaScript 기반)
신버전 : Angular (버전 2부터 TypeScript 기반)

구버전인 AngularJS는 버전 1.x에 해당되며 JavaScript 기반의 프레임워크이다. 출시 당시 jQuery급으로 급성장했지만, 신기술 동향이 JavaScript 보다는 TypeScript 추세를 따르기 때문인지 결국 2021년 말에 구버전 LTS 지원 중단하면서 사실상 AngularJS는 막을 내리게 되었다.

이후 버전 2부터는 Angular로 이름을 변경하여 기존 프레임워크를 싹 다 갈아엎고 TypeScript를 기본적으로 쓸 것을 전제로 한다. 즉 기존의 성능 이슈와 개발 생산성 문제를 해결함과 동시에, 컴포넌트 기반의 개발 방법을 갖게 된다.

현재 앵귤러 최신버전

2024년 3월 기준으로 버전 16 (LTS)까지 등장했으며 이전 버전인 2~14 버전은 지원 중단된 상황이다. 현재까지 지속적으로 릴리즈 버전이 출시되고 있다.

앵귤러 버전 비교

앵귤러는 구버전에서 신버전으로 전환되면서 스콥 및 컨트롤러 개념이 사라졌다. 비즈니스 로직을 구현하려면 타입스크립트 클래스에서 구현하고, 타입스크립트 모듈 시스템이 자체적으로 쓰인다. 기능이 많이 줄어든 것처럼 보이지만, 사실은 좀 더 간편하게 더 많은 기능들을 쓸 수 있게 되었다.

	구버전 Angular	신버전 Angular
중첩 스콥	O	X
지시자와 컨트롤러	O	X
비지니스 로직 구현	Controller를 구현한 함수	타입스크립트(ES6) 클래스
자바스크립트 모듈 시스템	require.js를 통한 구현	타입스크립트(ES6) 모듈시스템

앵귤러 특징

앵귤러 기본 기술스택

✅ TypeScript 기반이다.

최초에는 JavaScript 기반이었으나 앵귤러 2 버전 이후 TypeScript 기반이다.

✅ npm 설치를 지원한다.

npm에는 JavaScript와 관련된 라이브러리가 저장되어 있다.
앵귤러도 역시 npm을 통해 가져올 수 있다.

✅ ES6 문법을 따른다.

ES6는 ECMAScript 표준의 가장 최신 버전이다.
코드가 간결해지고 생산성이 향상된다.

✅ SPA 개발이 주된 목적이다.

SPA (Single Page Application) : 싱글 페이지 애플리케이션
한번 전체 로딩한 이후, 페이지 전환 시에 새로운 페이지를 불러오지 않고 변경된 정보만 동적으로 변경한다.

✅ MVVM 패턴 구조

MVVM(Model-View-ViewModel) 패턴 채택
전통적인 MVC 구조가 아닌, 컨트롤러가 뷰 모델로 대체된 구조이다.
각 뷰와 뷰 모델이 밀접한 관계로 이루어져 있다.

앵귤러 프로젝트 시작하기

지금부터 앵귤러 프로젝트 생성하여 서버 실행해 보고, 간단하게 소스를 수정하여 원하는 내용이 출력되는지 확인해 볼 것이다. 자세한 내용은 Angular 가이드 참고했다.

1. VsCode 설치

다양한 IDE 편집기 중에서 VsCode를 사용할 것이므로 VsCode를 설치한다. 기본설정 그대로 설치 후 필요한 확장자(Extension)를 설치한다. 특히 Angular-cli를 설치하면 Angular Cli를 쉽게 사용할 수 있으므로 추천한다.

2. Node.js 설치

앵귤러를 실행하려면 반드시 선행으로 Node.js가 설치되어 있어야 한다. Node.js 사이트에서 LTS 버전으로 기본 설치하면 된다. 설치 후 버전을 확인하려면 터미널에서 node -v를 입력한다. (내 경우 v20.11.1 버전 출력)

# Node.js 버전 확인
node -v

앵귤러 관련 애플리케이션은 npm 패키지를 활용하는 방식으로 동작한다. npm은 Node.js를 설치할 때 함께 설치되므로 별도로 설치할 필요 없다. npm 설치되었는지 확인하려면 터미널에서 npm -v를 입력한다. (내 경우 v10.2.4 버전 출력)

# npm 버전 확인
npm -v

3. Angular CLI 설치

Angular CLI를 설치하여 터미널이나 콘솔에서 커맨드 명령어를 입력해서 여러가지들을 실행할 수 있는 개발 도구이다. 예를 들어 프로젝트 생성부터 실행, 배포, 테스트까지 다양한 일들을 할 수 있다.

npm install -g @angular/cli

# 또는 특정 버전으로 설치하고 싶은 경우
npm install -g @angular/cli@12.0

4. 앵귤러 프로젝트 생성

프로젝트명이 first-app인 앵귤러 프로젝트를 생성한다. 프로젝트 생성 방법이 크게 2가지 방식이 있는데, 앵귤러에서는 최신 버전인 17 버전부터 방법 1을 추천하지만, 내 경우 최신버전 이하의 프로젝트에 투입될 예정이므로 방법 2를 이용하여 프로젝트를 생성할 것이다.

방법 1 : 단독 컴포넌트를 기본으로 프로젝트를 생성하는 방법 (앵귤러 17 버전부터는 권장)
방법 2 : 기존의 NgModule 기반으로 프로젝트를 생성하는 방법

# 방법 1 (앵귤러 17 버전부터 권장)
ng new first-app

# 방법 2 (기존 버전에 하던 방식. 포스팅에서는 이 방법으로 생성할 것임)
ng new first-app --no-standalone

그다음 아래처럼 옵션 사항을 선택해야 한다. 순서대로 CSS, Yes를 입력하면 앵귤러 프로젝트가 만들어진다. 어떤 파일들이 만들어졌는지 콘솔창에서 목록을 확인할 수 있고, 앵귤러 관련 패키지 파일까지 자동으로 설치해 주므로 편리하다.

앵귤러 프로젝트가 성공적으로 만들어졌다면 VsCode로 프로젝트를 오픈한다. 프로젝트 구조를 살펴보면 src/app 폴더에 실제 애플리케이션 소스가 들어가고 src/asset 폴더에 그 외에 이미지 관련된 파일들이 들어간다. (참고로 17 버전부터 권장되는 방법 1로 프로젝트를 생성했다면 app.module.ts 파일이 보이지 않는다)

5. 앵귤러 프로젝트 실행

VsCode 터미널을 열고 ng serve 명령어로 서버를 실행하자.

cd first-app
ng serve --open

참고로 --open 옵션(또는 -o)을 붙이면 앱을 빌드한 후에 브라우저가 자동으로 실행되면서 http://localhost:4200 주소로 접속한다. (실행 중인 서버를 종료하려면 Ctrl+C 키를 입력하면 서버가 꺼진다.)

6. 원하는 내용으로 출력하기

아래처럼 app 폴더에서 app.component.ts, app.component.html 파일을 수정하여 원하는 문자열을 입력한다.

변경한 문자열로 출력되는지 확인하자. 여기까지 진행하면 앵귤러 프로젝트에 대한 기본적인 실행이 끝난다.

앵귤러 CLI 커맨드 알아보기

Angular CLI에서 제공하는 다양한 커맨드를 확인할 수 있다.

ng --help

위 커맨드들 중에서 몇 가지를 살펴본다. 버전에 따라 커맨드가 사라지거나 새로 생기거나 할 수 있다. 자세한 내용은 command 가이드를 참고하자.

커맨드	alias	설명
add		프로젝트에 외부 라이브러리에 대한 지원을 추가한다.
analytics		Angular CLI 사용 메트릭 수집을 구성한다.
build	b	소스폴더에 있는 내용들을 빌드해서 dist 폴더에 파일에 만들어 준다 Angular 응용 프로그램 또는 라이브러리를 지정된 출력 경로에서 dist/라는 이름의 출력 디렉토리로 컴파일한다.
cache		영구 디스크 캐시를 구성하고 캐시 통계를 검색한다.
completion		커맨드 라인 명령어를 자동완성되도록 설정한다. 터미널에 대해 Angular CLI 자동 완성을 설정합니다.
config		작업 공간의 angular.json 파일에서 Angular 구성 값을 검색하거나 설정한다.
deploy		지정된 프로젝트 또는 작업 공간의 기본 프로젝트에 대한 배포 작성기를 호출한다.
doc	d	앵귤러 공식 문서를 열어준다. (angular.io)
e2e	e	Angular 응용 프로그램을 구축하고 서비스를 제공한 다음 end-to-end 테스트를 실행한다.
extract-i18n		소스 코드에서 i18n 메시지를 추출한다. 다국어 메시지에 있는 메시지 코드들과 메시지들을 추출한다.
generate	g	새로운 모듈, 컴포넌트, 라우트 등 파일을 생성한다. (가장 많이 쓰임)
lint		지정된 프로젝트 폴더의 Angular 응용 프로그램 코드에서 linting 도구를 실행한다. 포로젝트 코드에 대한 스타일 가이드에 맞춰서 잘 작성됐는지 체크해 준다.
new	n	새 Angular 작업 공간을 만든다. Angular CLI를 통해 앵귤러 프로젝트를 만든다.
run		프로젝트에 정의된 선택적 사용자 지정 작성기 구성으로 Architect 대상을 실행한다.
serve	s	파일 변경을 기반으로 애플리케이션을 구축하고 서비스한다. 빌드 후 애플리케이션을 서버로 띄워준다.
test	t	프로젝트에서 단위 테스트를 실행한다. 단위 테스트에 가깝다. 컴포넌트 및 서비스 각각 단위별로 테스트할 때 사용한다.
update		작업 공간과 그 종속성을 업데이트한다. https://update.angular.io/ 참조
version	v	Angular CLI 버전 확인

생성형 AI ChatGPT와 소라 등장! 미래 AI 대체 위험 직업군은?

컴슈터 — Sat, 9 Mar 2024 16:34:22 +0900

JTBC News 영상을 보고 개인적으로 정리한 내용입니다.

ChatGPT에 이어 AI 소라 등장

날로 발전하는 인공지능(AI) 기술이 여러 직군을 위협하고 있다. 2024년 2월, OpenAI 기업에서 소라(Sora)를 공개했다. ChatGPT 개발에 이어 또다시 혁신을 몰고 온 최신형 인공지능이다.

Sora 공식 홈페이지에서는 소라를 한마디로 정의한다.

Creating video from text.
(텍스트로 영상을 만들 수 있다)

소라는 텍스트로 지시를 내리기만 하면, 사실적이고 상상력이 풍부한 장면을 빠른 속도로 연출할 수 있는 AI 모델이다. 소라와 ChatGPT는 대표적인 생성 AI 시스템이다.

기존 AI 기술은 수많은 데이터를 학습해서 모방하고 예측하는 정도의 수준이었다면, 생성 AI는 새로운 아이디어를 제시할 뿐 아니라, 인간이 만든 수준에 버금가는 콘텐츠를 더 빠른 속도로 만들어낸다.

사람이 하는 일을 대체 가능하며 오히려 더 효율적인 작업 속도를 내므로, 기업 입장에서는 AI 사용료를 낼지언정 기술자를 쓸 필요성이 줄어드는 것이다. AI에게 일자리를 빼앗일 수 있는 위기감이 드는데, 마치 산업혁명 당시 '러다이트 운동'이 연상된다.

러다이트 운동 : 18세기말에서 19세기 초에 걸쳐 영국의 공장지대에서 일어난 노동자들의 기계파괴 운동

화이트칼라의 종말?

이미 빅테크 업계에선 올해 들어서만 3만여 명, 지난해부터 30만여 명이 해고 통보를 받았다. 기업 입장에서는 AI 투자에 박차를 가하려면, 이와 무관한 인력은 해고할 수밖에 없다는 입장이다.

미국 투자은행 골드만삭스는 2035년까지 기존 일자리 3억 개가 사라질 수 있다고 내다봤고, IMF도 "전 세계 일자리 절반 가까이가 AI의 영향을 받을 것"으로 전망했다.

인간지능을 모방하는 AI는 특히 화이트칼라 직업군을 위협하고 있다. 화이트칼라는 고학력 사무직 일자리를 말한다. 기존 산업용 로봇이나 소프트웨어는 단순 반복적인 업무를 대신 수행했지만, 인공지능은 더 복합적으로 인지하고 분석하는 고학력 전문직의 업무를 갈수록 대체하는 범위가 넓어질 것이라고 한다.

"창의적인 직업이 더 위험하다"

많은 사람들이 AI가 블루칼라 직종을 가장 먼저 대체할 것이라 생각했다. 창의적인 직업은 거의 안전할 거라고 생각했는데, 정확히 반대방향으로 가고 있다.

AI가 더 강력해질수록 위험과 스트레스 긴장 수위는 모두 높아질 것이다.
어떤 예측 불가능한 일이 일어날지에 대해 많이 생각하고 대비하는 것이 중요하다고 생각한다.

- 샘 알트만 (오픈 AI CEO)

AI 대체 위험 높은 직업군 목록

한국은행 '인공지능과 노동시장 변화' 발표에 따르면, 아래 직업군이 AI 대체 위험도가 높은 직업군으로 나타났다.

단순노동직
의사
회계사
자산운용가
변호사
화학공학 기술자
발전장치 조작원
철도 및 전동차 기관사
상하수도 처리장치 조작원
재활용 처리장치 조작원
금속재료공학 기술자

AI 대체 위험 낮은 직업군 목록

상대적으로 대면 중심으로 업무를 수행하는 직업은 인공지능 대체 위험이 낮은 것으로 조사됐다.

가수
경호원
대학교수
성직자
기자
음식 관련 단순 종사자
상품 대여 종사자
식음료 서비스 종사자
운송 서비스 종사자

AI 시대, 인간의 미래는?

AI 전문가들도 앞으로 우리의 일상이 얼마나 바뀔지 현재로선 예측 불가능하다고 말한다. AI는 인간의 능력을 어디까지 대체할 수 있는 것일까?

인공지능이 발전하면서 기존 일자리를 빼앗기도 하지만, 예전보다 효율적인 생산성이 높아지고, AI 시대에 파생되는 새로운 일자리가 생길 것이다. 과거 전화교환원이 핸드폰이 생기면서 사라졌지만, 스마트폰 관련 사업이 창출되는 것처럼 새로운 순환점이 되길 바라본다.

2024년 제2금융권 저축은행 차세대 준비

컴슈터 — Thu, 7 Mar 2024 15:49:49 +0900

BI Korea 기사를 보고 개인적으로 정리한 내용입니다.

2024년부터 내년까지 금융 IT 차세대 프로젝트가 본격적으로 시작될 조짐이 보이고 있다. 올해의 주요 이슈는 제2 금융권 및 저축은행의 차세대 IT시스템 개발이다.

다올저출은행과 스마트저축은행 발주 예상

다올저축은행은 올해 상반기 발주, 스마트저축은행은 하반기 발주할 것으로 예상된다.

다올저축은행 : IT시스템 개편 예정(약 300억 원)
스마트저축은행 : 차세대 IT시스템 구축을 준비 중(약 300억 원)

두 저축은행 말고도 흥국생명, 흥국화재, 동양생명, NH농협생명, NH농협손보, 한화생명, 한화손해보험 등 많은 금융권들이 차세대 준비를 고려하고 있는 것으로 보인다.

인력 부족 우려

작년에 이어 제1금융권 관련 대규모 사업이 줄어든 시점인 반면, 제2금융권 IT 사업이 동시에 확정될 가능성이 있는 상황이다. 이 때문에 개발자 인력 부족이 우려된다고 한다.

특히 저축은행의 300억 원대 예산으로 인력 부족에 대한 대응이 가능할지 의문이고, 실제로 인건비 비중이 점차 늘어날 예정이다.

따라서 IT시스템 관련 기업들은 인력 부족 가능성을 염두에 두고, 인력수급 계획을 먼저 챙겨야 하는 상황으로 보인다.

2024년도 금융권 IT투자 사업목록 정리, 금융권 차세대 프로젝트

컴슈터 — Wed, 28 Feb 2024 13:52:57 +0900

BI Korea 기사를 보고 개인적으로 정리한 내용입니다.

올해 금융권 IT 투자사업 관련 기사를 보고, 프로젝트 정보를 요약해 둔다. 프로젝트의 투자내용 및 규모는 예상 추정치이며, 현재 진행 중인 사업도 있고 진행 예정인 사업도 있다.

1. 은행사

1금융권은 단위사업 위주로, 2금융권은 차세대 IT개발 위주로

국민은행

통합데이터 플랫폼 현대화(300억원)
코어넥스트(CoreNext 슬림화, Non 코어뱅킹 영역, 100억 원)
통합단말 현대화(100억 원)
그룹공동 챗봇 고도화(20억 원)
그룹공동 콜봇 고도화(20억 원)
원(One) 클라우드 고도화(10억 원)

신한은행

글로벌시스템 고도화 및 일본향 패키지 작업(130억 원)
SBJ 일본은행 해외사업(100억 원)
R비서 본 사업(RPA 2단계 고도화, 95억 원)
서울시금고 주거래은행 사업(50억 원)

하나은행

2월 말로 리빌드 1단계 사업을 마치고, 5월부터 리빌드 2단계 본 사업(1200억 원)
프라이빗 클라우드 시스템 안정화 및 운영(20억 원) 본격화
하나금융지주는 그룹데이터허브(약 50억 원) 예산 반영
우리 원(WON) 뱅킹 구축

우리은행

그룹공동 클라우드 고도화 3차 사업(100억 원)
디지털자산 플랫폼 구축(60억 원)
MVNO 지원시스템 구축(60억 원)
우리금융지주가 그룹 데이터댐 구축(50억 원) 예산 반영

NH농협은행

올해 계정계 차세대 밑그림 작업
농협상호금융 정보계 차세대 올해 집행 200억 원
2분기 발주가 예상되는 1000억 원 농협중앙회 범농협 AICC

SC제일은행

올해 KT와 700억 원대 IT아웃소싱 연장 계약 체결
9월경 차세대 IT시스템 구축 추진 예상

대구은행

4분기 추진 예상하는 차세대시스템(1차 연도 500억 원)
프라이빗 클라우드 시스템 2차 사업(50억 원)

수협은행

디지털뱅킹 고도화(50억 원)

카카오뱅크

죽전 IT센터 상면서비스(200억 원)

케이뱅크

채널 재구축(100억 원)

한국은행

경기 센터 구축 및 이전 사업(250억 원)
회계결제시스템 ISO 20022 전문적용(100억 원)
차세대 외자운용시스템 구축(100억 원)

새마을금고

정보계 시스템 고도화(320억 원)
하반기 차세대시스템 투자 준비 중(1500억 원)

2. 보험사

은행권보다 좀 더 동적인 움직임을 보임

흥국생명

한화시스템과 소송 진행 중
소송과 무관하게, 1분기 차세대시스템 사업자 재선정 및 7월 착수 목표(1000억 원)

흥국화재

신 채널계 구축 : 장기 청약 분리 및 채널계 고도화(100억 원)
차세대 시스템 구축(300억 원)

동양생명

차세대 시스템 구축(600억 원)

NH농협생명

차세대 시스템 추진(500억 원)

NH농협손보

차세대 시스템 추진(200억 원)

한화생명

얼마 전 한화시스템을 주사업자로 선정
융자 차세대 시스템 구축(200억 원)
마이크로웹서비스 고도화(100억 원)
사이버보안플랫폼 구축(100억 원)
AICC(50억 원)
AI STS(Sales training system)(35억 원)

한화손해보험

차세대시스템(영업지원, 채널통합, 인프라 도입)(200억 원)

교직원공제회

콜센터 재구축(100억 원)
내년 추진 목표로 보험업무 고도화(200억 원)

3. 증권사

눈에 띄는 업계는 현대차증권과 코스콤

현대차증권

차세대시스템 개발(400억 원)

코스콤

차세대 원장시스템 구축(200억 원)
안양 데이터센터 재구축(200억 원)

KB증권

정보계 시스템 구축(100억 원)

신영증권

정보계 차세대시스템을 메가존클라우드로 이전하는 사업(200억 원)

교보증권

채널계 대상 MSA 적용(100억 원)

4. 기타 (카드사 등)

삼성카드

모니모 재구축(700억 원)

신한카드

디지털 코어 1단계 구축(채널, 30억 원)

예탁결제원

투이컨설팅이 참여 중인 차세대 시스템 구축 사업(300억 원)

현대카드

정보계 클라우드 전환(100억 원)

산은캐피탈

차세대 시스템 구축(300억 원)

금융결제원

4분기 추진이 예상되는 차세대구축(200억 원)

우리종합금융

차세대(수신/여신, 350억 원)

VSCode 터미널 오류 해결 : 이 시스템에서 스크립트를 실행할 수 없으므로...

컴슈터 — Tue, 27 Feb 2024 18:36:25 +0900

문제 발생

VSCode에서 터미널을 통하여 npm 혹은 yarn을 사용하여 작업 수행시, 아래와 같은 에러가 발생할 수 있다.

이 시스템에서 스크립트를 실행할 수 없으므로 ~ 파일을 로드할 수 없습니다.
자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.

해결 방법 1

Windows 환경에서는 PowerShell 스크립트 실행이 기본적으로 비활성화되어 있다. PowerShell 스크립트 실행을 허용하려면 아래와 같이 실행 정책을 수정한다.

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

해결 방법 2

1. PowerShell 앱을 관리자 권한으로 실행한다.

2. 현재 권한상태를 확인한다.

get-ExecutionPolicy

현재 권한 상태가 "Restricted" 으로, 로컬에서 작성한 스크립트를 실행할 수 없는상태이다.

권한 상태값

Restricted : 디폴트 설정값으로, 스크립트 파일을 실행 불가능
AllSigned : 신뢰할 수 있는(서명된) 스크립트 파일만 실행 가능
RemoteSigned : 로컬에서 본인이 생성한 스크립트와, 신뢰할 수 있는(서명된) 스크립트 파일 실행 가능
Unrestricted : 모든 스크립트 실행가능
ByPass : 경고/차단 없이 모든 것을 실행 가능
Undefined : 권한을 설정하지 않겠음

3. 권한 상태를 "RemoteSigned"으로 변경한다. 이 권한으로 설정하면 스크립트 정책이 풀리면서 실행 가능해진다.

Set-ExecutionPolicy RemoteSigned

4. 권한이 정상적으로 변경되었는지 다시 확인한다.

get-ExecutionPolicy

5. VSCode로 돌아가서 터미널 명령을 재수행하여 오류가 해결되었는지 확인한다.

프리랜서 공실, 안좋은 감정에 무뎌지지 않을 것

컴슈터 — Tue, 27 Feb 2024 16:48:26 +0900

작년 12월, 애매한 기간에 개발 프로젝트가 끝났다. 프리랜서 보릿고개 시즌인 1~2월이 지나가고 있지만, 곧 3월이 다가오는 지금까지도 시장 상황이 좋지 않아 보인다.

계속 금리도 올라가면서 정리해고도 많아졌고 회사들도 돈이 없는 건 사실이라 작년부터 프로젝트 양이 현저히 적다. 올해 미국 금리가 인하된다는 소식에 시장 상황이 더 나아질거라 보고 있지만, 지금 당장은 늪지대 같은 상황이다.

처음으로 맞는 보릿고개라서 그런가, 답답한 마음에 더 많은 생각이 든다.

끊임없이 내려앉는 기분에 사로잡히지 말자. 집에 있으면 생각만 많아지니 밖으로 카페라도 나가자. 최대한 직장 생활하는 것처럼 규칙적인 패턴을 유지하도록 노력하고, 시간 날 때 틈틈이 운동하자.

사람 일은 언제나 잘 풀릴 수는 없는 법이고.. 지금까지 순탄한 길을 걸어왔다고 앞으로도 잘 풀릴것이란 보장도 없다.

내가 지금 해야 하는 일은 무력감에 사로잡히는 것이 아니라, 이런 상황에서도 내가 해야 할 일을 정확히 인지하고 행동하는 것이다.

이 또한 지나갈 것이라 믿고 오늘 해야할 일에 집중하자.

자바 컬렉션 프레임워크(Java Collection Framework) 정리

컴슈터 — Mon, 18 Dec 2023 21:20:42 +0900

자바 컬렉션 프레임워크(Java Collection Framework)

배열을 보완하는 컬렉션(Collection)

컬렉션(Collection)은 여러 요소들을 담을 수 있는 자료구조이다. 즉, 다수의 데이터 그룹이며 컨테이너(Container)라고도 부른다. 컬렉션은 배열과 비슷하지만, 크기가 고정된 배열을 보완하여 Re-sizable한 특성을 가진다.

자바 초창기에는 Vector, Stack, HashTable 등의 컬렉션 클래스만 제공했으나 자바 1.2 이후 표준적인 방식으로 컬렉션을 다루기 위한 컬렉션 프레임워크(Collection Framework)가 등장하였다.

모든 컬렉션 클래스명은 구현한 인터페이스명이 포함되어 있어서 바로 클래스의 특징을 바로 알기 쉽다. (예를 들어 HashMap 클래스는 Map 인터페이스를 구현한 것임)

단, Vector, Stack, HashTable처럼 컬렉션 프레임워크 이전부터 존재하던 컬렉션 클래스(Legacy Class)는 이러한 명명법을 따르지 않는다.

결론 : 크기가 고정된 배열의 문제점을 해결하고, 널리 알려진 자료구조를 바탕으로 객체들을 효율적으로 추가, 삭제, 검색할 수 있도록 java.util 패키지에 컬렉션과 관련된 인터페이스와 클래스들을 포함시킨 것이 바로 '컬렉션 프레임워크'이다.

컬렉션 프레임워크의 장점

컬렉션 프레임워크들은 잘 테스트되고 잘 검증되어 있기 때문에 코드 품질을 보장하고 있다. 우리가 별도로 컬렉션 클래스를 구현하는 것보다 이미 구현되어 있는 것을 사용함으로써 코딩 시간을 줄일 수 있다.

JDK에 포함된 컬렉션 프레임워크들을 사용하여 코드 유지보수 시간을 줄일 수 있다. 또한 재사용이 가능하고 상호 운용성이 보장된다.

컬렉션 프레임워크 계층 구조

컬렉션 프레임워크 구성요소

컬렉션 인터페이스 : 모든 컬렉션 인터페이스는 java.util 패키지에 있다.
컬렉션 클래스 : 모든 컬렉션 클래스는 java.util 또는 java.util.concurrent 패키지에 있다.
컬렉션 알고리즘 : 검색, 정렬, 셔플과 같은 기능을 제공한다.

컬렉션 인터페이스(Collection Interface)

제네릭(Generics)으로 표현

컬렉션 인터페이스들은 제네릭(Generics)으로 표현된다. 컴파일 시점에서 객체의 타입을 체크하기 때문에 런타임 에러를 줄이는 데 도움이 된다.

예를 들어 런타임 시 발생하는 ClassCastException을 컴파일 시점에서 찾아낼 수 있다. 또한 클래스 캐스팅을 하지 않아도 되고 instansof를 사용하지 않아도 되므로 코드를 좀 더 깔끔하게 유지할 수 있다.

대표적인 인터페이스

컬렉션 프레임워크의 대표적인 인터페이스는 다음과 같다. 자바로 개발할 때 주로 쓰이는 인터페이스들이다.

List 인터페이스
Set 인터페이스
Map 인터페이스

이 중에서 List, Set 인터페이스는 Collection 인터페이스를 상속받는다. 따라서 List 인터페이스와 Set 인터페이스의 공통된 부분이 Collection 인터페이스에서 정의된다. 반면 Map 인터페이스는 구조상의 차이(Key-Value)로 인해 Collection 인터페이스를 상속받지 않고 별도로 정의된다.

다양한 컬렉션 인터페이스가 존재하기 때문에, 크게 3가지 (Collection 인터페이스 그룹, Map 인터페이스 그룹, 기타 그룹)로 분류하여 하나씩 살펴볼 것이다.

1. Collection 인터페이스 그룹

1.1 Collection 인터페이스

Collection 인터페이스는 직접적인 구현은 제공하지 않으며, 모든 컬렉션 클래스가 구현해야 하는 아래 메서드들을 포함하고 있다. Collection 인터페이스에서 공통적인 기능들을 제공하고 있기 때문에, 우리는 ArrayList나 HashSet 같은 컬렉션 클래스들은 사용할 때 아래 기능들을 가져다 쓸 수 있게 된다.

boolean add(E e) : 해당 컬렉션에 전달된 요소를 추가
boolean remove(Object o) : 해당 컬렉션에서 전달된 객체를 제거
void clear() : 해당 컬렉션의 모든 요소를 제거
boolean contains(Object o) : 해당 컬렉션이 전달된 객체를 포함하고 있는지
boolean equals(Object o) : 해당 컬렉션과 전달된 객체가 같은지
boolean isEmpty() : 해당 컬렉션이 비어있는지
Iterator <E> iterator() : 해당 컬렉션의 반복자(iterator)를 반환
int size() : 해당 컬렉션의 요소의 총개수를 반환
Object [] toArray() : 해당 컬렉션의 모든 요소를 Object 타입의 배열로 반환

1.2 List 인터페이스

List 인터페이스는 순서가 있는 컬렉션이며 중복 요소를 포함할 수 있다. 인덱스로 모든 요소에 접근할 수 있으며, List 인터페이스로 구현된 컬렉션 클래스는 ArrayList, LinkedList, Vector, Stack 이 있다.

1.3 Set 인터페이스

Set 인터페이스는 중복 요소를 포함할 수 없으며 랜덤 액세스(Random access)를 허용하지 않으므로 iterator 또는 foreach를 이용하여 요소를 탐색할 수 있다. Set 인터페이스로 구현된 컬렉션 클래스는 HashSet, TreeSet, LinkedHashSet 이 있다.

1.4 SortedSet 인터페이스

SortedSet 인터페이스는 요소를 오름차순으로 유지하는 Set이다. SortedSet 인터페이스로 구현된 컬렉션 클래스는 TreeSet 이 있다.

1.5 Queue 인터페이스

Queue 인터페이스는 처리하기 전에 요소를 보유하는 데 사용된다. 기본 컬렉션 작업 외에도 Queue는 삽입, 추출 및 검사 작업을 제공한다. 일반적으로 Queue는 요소를 FIFO 방식으로 정렬하며 예외에는 우선순위 큐가 있다. Quque 인터페이스로 구현된 컬렉션 클래스는 PriorityQueue 이 있다.

1.6 Deque 인터페이스

Deque 인터페이스는 양쪽 끝에 요소 삽입 및 제거를 지원한다. double ended queue의 약자이며 데크라고 읽는다. Deque 인터페이스로 구현된 컬렉션 클래스는 ArrayDeque 이 있다.

2. Map 인터페이스 그룹

2.1 Map 인터페이스

Map 인터페이스는 키와 값을 매핑한다. 중복 키가 존재할 수 없으며 각 키는 하나의 값만 매핑할 수 있다. Map의 기본 연산은 put, get, containsKey, containsValue, size, isEmpty 등이 있다. Map 인터페이스로 구현된 컬렉션 클래스는 HashMap, TreeMap, LinkedHashMap, Hashtable, Properties 이 있다.

2.2 SortedMap 인터페이스

SortedMap 인터페이스는 매핑을 오름차순의 키 순서로 유지하는 Map이다. SortedMap 인터페이스로 구현된 컬렉션 클래스는 TreeMap 이 있다.

3. 기타 그룹

3.1 Iterator 인터페이스

Iterator 인터페이스는 어떤 컬렉션이든 반복적으로 수행하기 위한 메서드를 제공한다. 컬렉션 프레임워크에서는 Enumeration 대신 Iterator를 사용하며, 컬렉션 클래스의 Iterator는 Iterator 디자인 패턴을 구현한다. iterator 메서드를 통해 컬렉션으로부터 iterator instance를 가져올 수 있고 컬렉션을 순회하는 도중에 엘리먼트들을 삭제할 수 있다.

3.2 ListIterator 인터페이스

ListIterator 인터페이스는 어느 방향이든 목록을 탐색하고 반복하면서 목록을 수정하고, 목록에서 반복자의 현재 위치를 가져올 수 있다. ListIterator에는 현재의 요소가 없다. 커서 위치는 항상 previous()에 대한 호출에 의해 반환될 요소와 next()에 대한 호출에 의해 반환될 요소 사이에 위치한다.

3.3 Concurrent 인터페이스 그룹

Concurrent 인터페이스 그룹은 아래와 같다.

BlockingQueue 인터페이스
TransferQueue 인터페이스
BlockingDeque 인터페이스
ConcurrentMap 인터페이스
ConcurrentNavigableMap 인터페이스

컬렉션 클래스(Collection Class)

컬렉션 프레임워크는 위에서 살펴본 컬렉션 인터페이스에 대한 구현 클래스를 제공한다.

컬렉션 클래스의 종류는 아래와 같다. 이 중에서 파란색으로 표시된 클래스만 본문에서 다룰 것이다.

일반적으로 쓰이는 클래스 : ArrayList, LinkedList, HashSet, TreeSet, PriorityQueue, ArrayDeque, HashMap, TreeMap, LinkedHashMap
Concurrent 클래스 : CopyOnWriteArrayList, ConcurrentHashMap, CopyOnWriteArraySet
Legacy 클래스 : Vector, Stack, Dictionary, Hashtable, Properties (비권장)
Abstract 클래스 : AbstractList, AbstractSequenctailList, AbstractSet, AbstractQueue

1. Collection 인터페이스 그룹의 클래스

1.1 ArrayList 클래스

ArrayList 클래스는 resizable-array이면서 비동기이다. 만약 동기화가 필요할 때는 Collections.synchronizeList() 메서드를 통해 동기화가 보장되는 List를 반환받아 사용한다.

ArrayList 클래스와 유사한 Vector 클래스는 resizable-array이고 동기화를 보장한다. 참고로 ArrayList 클래스는 내부적으로 배열을 이용하여 요소를 저장한다.

1.2 LinkedList 클래스

LinkedList 클래스는 Queue, Deque 속성과 메서드를 가지고 있고 비동기이다. 만약 동기화가 필요할 때는 Collections.synchronizeList() 메서드를 통해 동기화가 보장되는 List를 반환받아 사용한다. ArrayList 클래스의 주요 메서드뿐 만 아니라 Queue, Deque의 메서드도 포함되어 있다. 참고로 LinkedList 클래스는 내부적으로 연결 리스트를 이용하여 요소를 저장한다.

1.3 HashSet 클래스

HashSet 클래스는 HashMap에 의해 지원되는 Set 인터페이스의 구현체이다. set의 반복 순서를 보장하지 않으며 null 요소를 허용한다.

1.4 TreeSet 클래스

TreeSet 클래스는 TreeMap이 근본이 되는 NavigableSet 구현이다.

1.5 PriorityQueue 클래스

PriorityQueue 클래스는 Queue는 FIFO 순서로 요소를 처리하지만, 때로는 우선순위에 따라 요소를 처리하기를 원할 경우 PriorityQueue를 사용할 수 있다.

1.6 ArrayDeque 클래스

ArrayDeque 클래스.

2. Map 인터페이스 그룹의 클래스

2.1 HashMap 클래스

HashMap 클래스는 비동기이며 null을 허용한다는 점을 제외하면 Hashtable과 유사하다. 맵의 순서를 보증하지 않는다.

2.2 TreeMap 클래스

TreeMap 클래스.

2.3 LinkedHashMap 클래스

LinkedHashMap 클래스.

3. 기타 인터페이스 그룹의 클래스

3.1 Concurrent 클래스 그룹

Java 1.5에서 Concurrent 패키지(java.util.concurrent)에는 반복하는 동안 컬렉션을 수정할 수 있는 thread-safe 한 컬렉션 클래스가 포함되어 있다. 대표적으로 CopyOnWriteArrayList, ConcurrentHashMap, CopyOnWriteArraySet가 있다.

LinkedBlockingQueue
ArrayBlockingQueue
PriorityBlockingQueue
DelayQueue
SynchronousQueue
LinkedBlockingDeque
LinkedTransferQueue
CopyOnWriteArrayList
CopyOnWriteArraySet
ConcurrentSkipListSet
ConcurrentHashMap
ConcurrentSkipListMap

컬렉션 알고리즘(Collection Algorithm)

Collections 클래스는 모든 컬렉션의 알고리즘(Algorihtm)을 담당한다. 유틸리티 클래스로, static 메서드로 구성되어 있고 컬렉션들을 컨트롤하는 데 사용된다. Collections 클래스는 정렬, 셔플링, 이진 검색, 뒤집기 등의 메서드를 가지고 있다. 주의할 점은 자바의 Collection은 인터페이스이며, Collections는 클래스라는 점이다.

정렬(Sorting)

정렬 알고리즘은 요소가 오름차순이 되도록 리스트를 재 정렬한다.

셔플링(Shuffling)

셔플링 알고리즘은 랜덤으로 목록을 재 정렬한다. 이 알고리즘은 우연한 게임을 구현할 때 유용하다.

탐색(Searching)

이진 검색 알고리즘은 정렬된 목록에서 지정된 요소를 검색한다.

컬렉션 클래스의 특징 정리

	컬렉션 클래스 (Collection Class)	순서 (Ordering)	랜덤 액세스 (Random Access)	키-값 (Key-Value)	중복 요소 (Duplicate Element)	널 요소 (Null Element)	스레드 안전 (Thread Safe)
List	ArrayList	O	O		O	O
	LinkedList	O			O	O
	Vector	O	O		O	O	O
	~~Stack~~	O			O	O	O
Set	HashSet					O
	TreeSet	O
Map	HashMap		O	O		O
	TreeMap	O	O	O
	~~Hashtable~~		O	O		O
	~~Properties~~		O	O		O
etc	CopyOnWriteArrayList	O	O		O	O	O
	CopyOnWriteArraySet					O	O
	ConcurrentHashMap		O	O			O

컬렉션 프레임워크의 모범 사례

필요에 따라 상황에 맞는 컬렉션을 선택해야 된다.

크기(size)가 고정되어 있다면 ArrayList보다 Array를 사용하자.
맵에 삽입된 순서대로 iterate를 하고 싶으면 TreeMap을 사용하는 것이 좋다.
중복을 허용하고 싶지 않으면 Set을 사용하면 된다.
몇몇 컬렉션 클래스들을 초기 용량을 지정할 수 있다. 만약 저장할 요소들의 사이즈를 알 경우에 초기 용량을 지정함으로써 rehashing이나 resizing이 일어나는 것을 회피할 수 있다.
코드를 작성할 때, 구현 클래스가 아닌 인터페이스를 기반으로 작성해야 나중에 구현체를 변경할 때 코드를 재작성하는 수고를 줄일 수 있다.
런타임에 발생할 수 있는 ClassCastException을 회피하려면 항상 제네릭(Generics)을 사용해서 type-safety 한 상태를 유지하라.
맵에 키를 사용할 때 JDK에서 제공하는 immutable 클래스를 사용하여 사용자 클래스에서 hashCode()와 equals() 구현할 필요가 없게 하라
읽기 전용 및 동기화, 빈 컬렉션 등을 만들 때는 자신만의 구현으로 생성하지 말고 Collections에서 제공하는 유틸리티 클래스를 사용하라. 이는 코드 재사용성을 높여주고 안정적이며 유지보수 비용을 줄여 준다.

References

Spring Security 3 버전에서 h2.console.enabled : true일 때 servlet 오류 해결 방법

컴슈터 — Mon, 18 Dec 2023 17:15:14 +0900

Spring security 3점대 버전에서 spring.h2.console.enabled=true 로 옵션을 주니 아래 오류가 발생했다.

문제 발생

org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'org.springframework.security.config.annotation.web.configuration.WebSecurityConfiguration': Unsatisfied dependency expressed through method 'setFilterChains' parameter 0: Error creating bean with name 'filterChain' defined in class path resource [com/company/helloBoard/common/config/SecurityConfig.class]: Failed to instantiate [org.springframework.security.web.SecurityFilterChain]: Factory method 'filterChain' threw exception with message: This method cannot decide whether these patterns are Spring MVC patterns or not. If this endpoint is a Spring MVC endpoint, please use requestMatchers(MvcRequestMatcher); otherwise, please use requestMatchers(AntPathRequestMatcher).

This is because there is more than one mappable servlet in your servlet context: {org.h2.server.web.JakartaWebServlet=[/h2-console/*], org.springframework.web.servlet.DispatcherServlet=[/]}.

For each MvcRequestMatcher, call MvcRequestMatcher#setServletPath to indicate the servlet path.
	at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredMethodElement.resolveMethodArguments(AutowiredAnnotationBeanPostProcessor.java:825) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredMethodElement.inject(AutowiredAnnotationBeanPostProcessor.java:778) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:145) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessProperties(AutowiredAnnotationBeanPostProcessor.java:483) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1416) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:597) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:520) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:326) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:324) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:200) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:973) ~[spring-beans-6.0.11.jar:6.0.11]
	at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:942) ~[spring-context-6.0.11.jar:6.0.11]
	at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:608) ~[spring-context-6.0.11.jar:6.0.11]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:146) ~[spring-boot-3.1.3.jar:3.1.3]
	at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:734) ~[spring-boot-3.1.3.jar:3.1.3]
	at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:436) ~[spring-boot-3.1.3.jar:3.1.3]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:312) ~[spring-boot-3.1.3.jar:3.1.3]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1306) ~[spring-boot-3.1.3.jar:3.1.3]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1295) ~[spring-boot-3.1.3.jar:3.1.3]
	at com.company.helloBoard.HelloBoardApplication.main(HelloBoardApplication.java:14) ~[classes/:na]
	at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:na]
	at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77) ~[na:na]
	at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:na]
	at java.base/java.lang.reflect.Method.invoke(Method.java:568) ~[na:na]
	at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:50) ~[spring-boot-devtools-3.1.3.jar:3.1.3]
Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'filterChain' defined in class path resource [com/company/helloBoard/common/config/SecurityConfig.class]: Failed to instantiate [org.springframework.security.web.SecurityFilterChain]: Factory method 'filterChain' threw exception with message: This method cannot decide whether these patterns are Spring MVC patterns or not. If this endpoint is a Spring MVC endpoint, please use requestMatchers(MvcRequestMatcher); otherwise, please use requestMatchers(AntPathRequestMatcher).

오류 내용을 보면 서블릿 컨텍스트에 매핑 가능한 서블릿이 여러 개 있기 때문에 무슨 servlet을 사용할지 명시하라고 안내하고 있다. h2-console 사용시 서블릿 컨텍스트에 h2-console과 dispatcherServlet의 두 가지 서블릿이 매핑되어 어떤 서블릿을 사용해야하는지 알 수 없어서 발생하는 오류이다.

해결 방법

스프링 시큐리티 설정을 아래와 같이 변경하여 오류를 해결했다. filterChain의 requestMatchers에 MvcRequestMatcher, AntPathRequestMatcher 중 사용하려는 클래스를 명확하게 지정해주었다.

@Bean
public SecurityFilterChain filterChain(HttpSecurity http, HandlerMappingIntrospector introspector) throws Exception {
	http.authorizeHttpRequests((request) -> request
    	.requestMatchers(new MvcRequestMatcher(introspector,"/login/**")).permitAll()
		.anyRequest().authenticated());
	return http.build();
}

스프링부트 개발환경 구성하기 (9) 게시물 조회/등록/수정/삭제

컴슈터 — Fri, 8 Dec 2023 21:59:05 +0900

포스팅 순서는 아래와 같다.

REST API 설계 내용을 기반으로 게시물 조회, 등록, 수정, 삭제 기능을 구현했다. 사실 크게 어려운 게 없기 때문에 소스 만으로 충분히 설명이 될 것 같다.

BoardController.java

package com.company.helloBoard.domain.board.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.company.helloBoard.domain.board.model.Board;
import com.company.helloBoard.domain.board.service.BoardService;

@RestController
@RequestMapping(value = "/boards")
public class BoardController {

	@Autowired
	BoardService boardService;

	@GetMapping("/{boardId}")
	public ResponseEntity<Board> getBoard(@PathVariable("boardId") int boardId) {
		return ResponseEntity.ok(boardService.getBoard(boardId));
	}

	@PostMapping("")
	public ResponseEntity<Integer> insertBoard(@RequestBody Board board) {
		return ResponseEntity.ok(boardService.insertBoard(board));
	}

	@PutMapping("/{boardId}")
	public ResponseEntity<Integer> updateBoard(@PathVariable("boardId") int boardId, @RequestBody Board board) {
		return ResponseEntity.ok(boardService.updateBoard(boardId, board));
	}

	@DeleteMapping("/{boardId}")
	public ResponseEntity<Integer> deleteBoard(@PathVariable("boardId") int boardId) {
		return ResponseEntity.ok(boardService.deleteBoard(boardId));
	}

}

BoardService.java

package com.company.helloBoard.domain.board.service;

import com.company.helloBoard.domain.board.model.Board;

public interface BoardService {

	public Board getBoard(int boardId);

	public int insertBoard(Board board);

	public int updateBoard(int boardId, Board board);

	public int deleteBoard(int boardId);
}

BoardServiceImpl.java

package com.company.helloBoard.domain.board.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.company.helloBoard.domain.board.mapper.BoardMapper;
import com.company.helloBoard.domain.board.model.Board;

@Service
public class BoardServiceImpl implements BoardService {

	@Autowired
	BoardMapper boardMapper;
	
	@Override
	public Board getBoard(int boardId) {
		return boardMapper.getBoard(boardId);
	}

	@Override
	public int insertBoard(Board board) {
		return boardMapper.insertBoard(board);
	}

	@Override
	public int updateBoard(int boardId, Board board) {
		board.setBoardId(boardId);
		return boardMapper.updateBoard(board);
	}

	@Override
	public int deleteBoard(int boardId) {
		return boardMapper.deleteBoard(boardId);
	}
}

BoardMapper.java

package com.company.helloBoard.domain.board.mapper;

import org.apache.ibatis.annotations.Mapper;
import com.company.helloBoard.domain.board.model.Board;

@Mapper
public interface BoardMapper {

	Board getBoard(int boardId);

	int insertBoard(Board board);

	int updateBoard(Board board);

	int deleteBoard(int boardId);
}

BoardMapper.xml

이전 포스팅에서 생성한 sq_board_id 시퀀스를 이용하여, 글을 등록할때마다 게시글ID를 자동 채번하도록 했다. 이때 주의할 점은 h2 DB 문법으로 NEXTVAL을 사용한 것이기 때문에 DB 종류마다 문법이 조금씩 다르다. 예를 들어 오라클은 sq_board_id. NEXTVAL 형식으로 사용해야 오류가 발생하지 않는다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.company.helloBoard.domain.board.mapper.BoardMapper">
	
	<select id="getBoard" parameterType="integer" resultType="Board">
		SELECT BOARD_ID
			 , WRITER
			 , TITLE
			 , CONTENT
			 , REG_DATE
			 , UPDATE_DATE
			 , DELETE_DATE
	     	FROM BOARD
	     WHERE BOARD_ID = #{boardId}
	</select>

	<insert id="insertBoard" parameterType="Board">
		INSERT INTO BOARD (
			BOARD_ID
			, WRITER
			, TITLE
			, CONTENT
			, REG_DATE
			, UPDATE_DATE
			, DELETE_DATE
		) VALUES (
			NEXTVAL('sq_board_id')
			, #{writer}
			, #{title}
			, #{content}
			, TO_CHAR(SYSDATE, 'YYYYMMDDHH24MISS')
			, ''
			, ''
		)
	</insert>

	<update id="updateBoard" parameterType="Board">
		UPDATE BOARD
		   SET TITLE = #{title}
		     , CONTENT = #{content}
		     , UPDATE_DATE = TO_CHAR(SYSDATE, 'YYYYMMDDHH24MISS')
		 WHERE BOARD_ID = #{boardId}
	</update>

	<delete id="deleteBoard" parameterType="integer">
		DELETE FROM BOARD
		 WHERE BOARD_ID = #{boardId}
	</delete>
</mapper>

페이지 추가

list.html

게시물 제목을 클릭하면 view.html 으로 이동하고, 글쓰기 버튼 클릭시 edit.html 으로 이동한다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>게시판</title>

	<link type="text/css" href="/css/style.css" rel="stylesheet">
	<script type="text/javascript" src="/js/com-ajax.js"></script>
	<script type="text/javascript" src="/js/com-page.js"></script>
</head>
<script type="text/javascript">

	// 페이지 온로드시 게시글 목록 조회
	window.onload = function () {
		getList();
	}

	// 게시글 목록 조회
	function getList(pageNo) {
		pageNo = pageNo || 0;

		const title = document.querySelector("#title").value;
		const writer = document.querySelector("#writer").value;
		const sort = document.querySelector("#sort").value;

		const data = "?title=" + title + "&writer=" + writer + "&page=" + pageNo + "&sort=" + sort;

		AJAX.ajaxCall("GET", "/boards", data, afterGetList);
	}

	// 조회 후 처리
	function afterGetList(response) {

		PAGE.paging(response.totalPages, response.number, response.totalElements, "getList");

		// 결과 테이블 생성
		resultTable(response);
	}

	// 동적으로 테이블 생성
	function resultTable(response) {
		document.querySelector("#fieldListBody").innerHTML = "";

		if (response.size > 0) {
			const content = response.content;

			// ✅ 제목 클릭시 뷰 화면 이동
			for (var i = 0; i < content.length; i++) {
				let element = document.querySelector("#fieldListBody");
				let result = content[i];
				let template = `
					<td><p>${PAGE.pageRowNumber(response.number, response.size, i, response.totalElements)}</p></td>
					<td><p><a href="/board/view?boardId=${result.boardId}">${result.title}</a></p></td>
					<td><p>${result.writer}</p></td>
					<td><p>${result.regDate}</p></td>
				`;
				element.insertAdjacentHTML('beforeend', template);
			}
		}
	}

	// 초기화
	function resetList() {
		document.querySelector("#title").value = "";
		document.querySelector("#writer").value = "";
		document.querySelector("#fieldListBody").innerHTML = "";

		// 초기화
		let reg_date = document.querySelector("#reg_date");
		if (reg_date.className == 'sort_asc') {
			reg_date.classList.toggle("sort_desc");
			reg_date.classList.toggle("sort_asc");
		}

		// 정렬 초기화
		document.querySelector("#sort").value = "";

		getList();
	}

	// 동적 정렬
	function dynamicSort(sortColumn) {
		let sortId = sortColumn.id;

		sortColumn.classList.toggle("sort_desc");
		sortColumn.classList.toggle("sort_asc");

		if (sortColumn.className == "sort_desc") {
			document.querySelector("#sort").value = sortId + ",DESC";
		} else {
			document.querySelector("#sort").value = sortId + ",ASC";
		}

		// 조회
		getList();
	}

	// ✅ 글쓰기 화면 이동
	function insertBoard() {
		location.href = "/board/edit";
	}

</script>

<body>
	<div>
		<h2>게시판 목록</h2>
		<table>
			<tr>
				<th>제목</th>
				<td><input type="text" id="title"></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td><input type="text" id="writer"></td>
			</tr>
			<tr>
				<td><button onclick="getList()">조회</button></td>
				<td><button onclick="resetList()">초기화</button></td>

				<!-- ✅ 버튼 추가 -->
				<td><button onclick="insertBoard()">글쓰기</button></td>
			</tr>
		</table>

		<input type="hidden" name="page" id="page" value="0" />
		<input type="hidden" name="sort" id="sort" value="" />
	</div>
	<div>
		<table>
			<colgroup>
				<col width="150px" />
				<col width="150px" />
				<col width="150px" />
				<col width="250px" />
			</colgroup>
			<thead>
				<tr>
					<th>No.</th>
					<th>제목</th>
					<th>작성자</th>
					<th>
						<p class="sort_desc" id="reg_date" onclick="dynamicSort(this)">작성시간</p>
					</th>
				</tr>
			</thead>
			<tbody id="fieldListBody">
			</tbody>
		</table>
		<ul id="pagingArea" class="pagination"></ul>
	</div>
</body>

</html>

view.html

view.html 화면에서 수정 버튼을 클릭하면 편집모드로 이동한다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>게시판</title>

	<script type="text/javascript" src="/js/com-ajax.js"></script>
</head>
<script type="text/javascript">

	// 페이지 온로드시 게시글 조회
	window.onload = function () {
		getBoard();
	}

	// 게시글 조회
	function getBoard() {
		const urlParams = new URL(location.href).searchParams;
		const boardId = urlParams.get('boardId');

		AJAX.ajaxCall("GET", "/boards/" + boardId, "", afterGetInfo);
	}

	// 조회 후 처리
	function afterGetInfo(response) {
		document.querySelector("#boardId").value = response.boardId;
		document.querySelector("#writer").innerHTML = response.writer;
		document.querySelector("#title").innerHTML = response.title;
		document.querySelector("#content").innerHTML = response.content;
	}

	// 수정 화면으로 이동
	function moveUpdatePage() {
		let boardId = document.querySelector("#boardId").value;
		location.href = "/board/edit?boardId=" + boardId;
	}
	
	// 삭제
	function deleteBoard() {
		let boardId = document.querySelector("#boardId").value;
		AJAX.ajaxCall("DELETE", "/boards/" + boardId, "", backList);
	}

	// 목록으로 이동
	function backList() {
		location.href = "/board";
	}

</script>

<body>
	<h2>게시판 상세</h2>

	<input type="hidden" name="boardId" id="boardId" value="" />
	<table>
		<tr>
			<th>작성자</th>
			<td>
				<div id="writer"></div>
			</td>
		</tr>
		<tr>
			<th>제목</th>
			<td>
				<div id="title"></div>
			</td>
		</tr>
		<tr>
			<th>내용</th>
			<td>
				<div id="content"></div>
			</td>
		</tr>
	</table>
	<button onclick="moveUpdatePage()">수정</button>
	<button onclick="deleteBoard()">삭제</button>
	<button onclick="backList()">목록</button>
</body>

</html>

edit.html

게시물 등록 또는 수정하고 다시 게시글 목록으로 돌아간다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
	<meta charset="UTF-8">
	<title>게시판</title>

	<script type="text/javascript" src="/js/com-ajax.js"></script>
</head>
<script type="text/javascript">

	// 페이지 온로드시 게시글 조회
	window.onload = function () {
		
		// 파라미터에서 boardId 값 추출
		const urlParams = new URL(location.href).searchParams;
		const boardId = urlParams.get('boardId');
		
		// 값 세팅
		document.querySelector("#boardId").value = boardId;
		
		// 제목과 버튼 세팅
		const boardTitle = document.querySelector("h2#boardTitle");
		const updateBtn = document.querySelector("#updateBtn");
		const insertBtn = document.querySelector("#insertBtn");
		
		if (boardId != null) {
			boardTitle.textContent = "게시물 수정";
			insertBtn.style.display = 'none';
		
		} else {
			boardTitle.textContent = "게시물 등록";
			updateBtn.style.display = 'none';
		}
		
		// 수정일 경우 조회
		if (boardId != null) {
			getBoard(boardId);
		}
	}

	// 게시글 조회
	function getBoard(boardId) {
		AJAX.ajaxCall("GET", "/boards/" + boardId, "", afterGetInfo);			
	}

	// 조회 후 처리
	function afterGetInfo(response) {
		document.querySelector("#boardId").value = response.boardId;
		document.querySelector("#writer").value = response.writer;
		document.querySelector("#title").value = response.title;
		document.querySelector("#content").value = response.content;
	}
	
	// 등록
	function insertBoard() {
		const data = {
			writer: document.querySelector("#writer").value,
			title: document.querySelector("#title").value,
			content: document.querySelector("#content").value
		};
		AJAX.ajaxCall("POST", "/boards", data, backList);
	
	}

	// 수정 
	function updateBoard() {
		let boardId = document.querySelector("#boardId").value;

		const data = {
			title: document.querySelector("#title").value,
			content: document.querySelector("#content").value
		};
		AJAX.ajaxCall("PUT", "/boards/" + boardId, data, backList);
	}
	
	// 목록으로 이동
	function backList() {
		location.href = "/board";
	}

</script>

<body>
	<h2 id="boardTitle"></h2>

	<input type="hidden" name="boardId" id="boardId" value="" />
	<table>
		<tr>
			<th>작성자</th>
			<td>
				<input type="text" id="writer" />
			</td>
		</tr>
		<tr>
			<th>제목</th>
			<td>
				<input type="text" id="title" />
			</td>
		</tr>
		<tr>
			<th>내용</th>
			<td>
				<input type="text" id="content" />
			</td>
		</tr>
	</table>
	<button onclick="updateBoard()" id="updateBtn">수정</button>
	<button onclick="insertBoard()" id="insertBtn">등록</button>
	<button onclick="backList()">목록</button>
</body>

</html>

자바에서 줄바꿈 \n 개행문자 치환하는 예제

컴슈터 — Wed, 6 Dec 2023 19:15:26 +0900

개행문자(newLine)

개행문자는 컴퓨터에서 줄바꿈을 나타내는 제어 문자를 말하며, 줄바꿈문자라고도 부른다. 개행문자에는 크게 두가지 종류가 있다.

LF (new Line Feed)

라인피드, 뉴라인으로 부르며, 커서를 한 칸 아래로 이동해 새로운 라인을 추가한다.
\n
아스키코드 : 10

CR (Carriage Return)

캐리지리턴, 리턴으로 부르며, 커서를 맨 왼쪽으로 이동(시작 위치로 복귀)한다. 엔터키와 동일하다.
\r
아스키코드 : 13

개행문자는 운영체제마다 다름

윈도우 : CRLF (\r\n)
맥 : CR (\r)
유닉스 : LF (\n)

자바 개행문자 사용하기

자바에서 개행을 처리할 때 \r\n 으로 처리하는 것이 가장 간단한 방법이긴 하지만, 개행문자는 운영체제별로 다르게 처리될 수 있으므로 지양하는 것이 좋다. 아래처럼 System.lineSeparator() 메서드를 사용하는 것을 추천한다.

사용 예제

// 비추천
String test = "개발\r\n새발";

// 추천
String test = "개발" + System.lineSeparator() + "새발";
		
System.out.println(test);
// 출력 결과 :
// 개발
// 새발

참고로 System.getProperty("line.separator") 으로 사용해도 동일한 결과가 나오지만, 자바7 이상이라면 System.lineSeparator()를 사용하자.

개행문자 치환하는 예제

String value = "안녕\r\n하세요\r\n";		
value = value.replaceAll(System.lineSeparator(), "");
		
System.out.println(value); // 출력 결과 : 안녕하세요

스프링부트 Scheduler 정해진 시간마다 동작 시키는법

컴슈터 — Tue, 5 Dec 2023 21:38:49 +0900

이번 프로젝트에서 정해진 시간마다 특정 동작을 수행해야 하는 기능이 있었다. Spring Boot에서 제공하는 Scheduler 기능을 이용해서 매우 간단하게 구현할 수 있다.
이번 포스팅에서는 특정 시간에 스케줄러를 통해 특정 동작을 구현하는 다양한 예제를 살펴볼 것이다.
(쪼금 스압 주의)

1. 스케줄러 활성화

Scheduler는 기본적으로 Spring Boot에 포함되어 있어서 의존성을 별도로 추가할 필요는 없다.
메인 Application 클래스에 @EnableScheduling를 추가하여 Scheduler를 활성화한다.

@SpringBootApplication
@EnableScheduling // 스케줄러 활성화
public class SchedulerApplication {
    public static void main(String[] args) {
        SpringApplication.run(SchedulerApplication.class, args);
    }
}

2. 스케줄러 대상에 적용하기

스케줄러를 사용하기 위해서는 스케줄러를 적용할 대상 클래스에 @Component를 추가하고, 주기적으로 실행하고 싶은 메서드에 @Scheduled를 추가하면 된다.

@Component
public class Scheduler {

	@Scheduled
	public void sample() {
	}
}

만약 스케줄러 적용할 클래스가 @Controller, @RestController, @Service와 같이 스프링 빈에 등록된 클래스일 경우, 어노테이션 내부에 이미 @Component이 포함되어 있기 때문에 @Component를 추가하지 않아도 된다.

스케줄러 메서드는 아래와 같은 규칙을 지켜야 하며

스케줄러 메서드는 void 리턴 타입이어야 함
스케줄러 메서드는 매개변수 사용 불가

@Scheduled 속성을 설정할 수 있다. 순서대로 하나씩 알아보자.

fixedDelay : 메소드의 실행이 끝난 시간을 기준으로, 설정된 밀리세컨드 간격마다 실행
fixedRate : 메소드의 실행이 시작하는 시간을 기준으로, 설정된 밀리세컨드 간격마다 실행
initialDelay : 설정된 밀리세컨드 시간 후부터 fixedDelay 간격마다 실행
cron : Cron 표현식을 사용하여 설정한 시간에 실행

예제 1) fixedDelay

이전 작업의 종료 시점으로부터 정의된 ms 시간만큼 지나면 작업을 실행한다. 즉, 작업 수행시간을 포함해서 작업을 마친 후부터 주기 타이머가 돌아 메서드를 호출하므로 Delay 될 수 있다.

@Scheduled(fixedDelay = 1000) // 1초마다 실행
public void fixedDelayJob() throws InterruptedException {
	log.info("fixedDelay START");
	Thread.sleep(500); // 0.5초씩 지연
}

위 예제를 실행하면 1.5초에 한번씩 실행되고 있다. fixedDelay 프로퍼티에 1000(1초)로 설정했지만 sleep(0.5초) 지연시켰기 때문이다.

fixedDelay는 1.5초마다 실행되고 있다.

예제 2) fixedRate

이전 작업의 시작 시점으로부터 정의된 ms 시간만큼 지난 후 작업을 실행한다. 즉, 작업 수행시간과 상관없이 일정 주기마다 메서드를 호출한다.

@Scheduled(fixedRate = 1000) // 1초마다 실행
public void fixedRateJob() throws InterruptedException {
	log.info("fixedRate START");
	Thread.sleep(500); // 0.5초씩 지연
}

반면 fixedRate는 sleep(0.5초)로 지연시키든 말든 1초마다 실행되고 있다.

fixedRate는 1초마다 실행되고 있다.

fixedDelay vs. fixedRate

이 둘의 차이점은 무엇일까? fixedDelay는 해당 작업이 끝난 시점부터 시간을 세고, fixedRate는 해당 작업의 시작 시점부터 시간을 센다.

만약 작업 수행시간이 설정한 ms보다 길면 어떤 결과가 나올까? fixedDelay는 작업 종료 때부터 시간을 재므로 sleep을 아무리 걸어도 종료 이후부터 n초를 기다려 실행할 것이다.

그렇다면 fixedRate의 경우 어떨까? 만약 fixedRate의 작업 수행시간이 fixedRate보다 길면 어떤 결과가 나올까?

@Scheduled(fixedRate = 1000) // 1초마다 실행
public void fixedRateJob() throws InterruptedException {
    log.info("fixedRate START");
    Thread.sleep(3000); // 3초씩 지연
    log.info("fixedRate END");
}

fixedRate 값이 1초로 설정되어 있음에도 3초에 한번씩 실행되고 있다.

강제로 지연시키자 바로 다음 작업을 실행하는 fixedRate

sleep으로 3초씩 강제로 지연시킴으로써 작업 수행시간이 fixedRate를 넘겨버렸으므로 작업이 끝나자마자 다음 n초대를 기다리지 않고, 바로 다음 작업을 실행한다. 즉, fixedRate은 작업의 수행시간이 길어진다면, 주기적인 실행을 보장하지 못하는 점을 주의해야 한다.

예제 3) initialDelay

스케줄러에서 메서드가 등록되자마자 수행하는 것이 아닌, 초기 지연시간을 설정하는 것이다. 다음 예제는 3초의 대기(initialDelay) 후에 5초(fixedRate)마다 문자열을 출력하게 된다.

@Scheduled(initialDelay = 3000, fixedRate = 5000) // 3초 대기 후에 5초마다 실행
public void run() {
	log.info("Hello World!");
}

예제 4) cron

Cron 표현식을 사용하여 작업을 예약할 수 있다.

@Scheduled(cron = "*/10 * * * * *") // 10초마다 실행
public void run() {
	log.info("Hello World!");
}

첫 번째 *부터 초(0-59) 분(0-59) 시간(0-23) 일(1-31) 월(1-12) 요일(0-6) (0: 일, 1: 월, 2:화, 3:수, 4:목, 5:금, 6:토) 로 표현할 수 있다. 스프링의 @Scheduled cron은 6자리 설정만 허용하며 연도 설정을 할 수 없다.

cron 사용 예시

// 매일 오후 18시에 실행
@Scheduled(cron = "0 0 18 * * *")
public void run1() {
	log.info("Hello World!");
}

// 매달 10일,20일 14시에 실행
@Scheduled(cron = "0 0 14 10,20 * ?")
public void run2() {
	log.info("Hello World!");
}

// 매달 마지막날 22시에 실행
@Scheduled(cron = "0 0 22 L * ?")
public void run3() {
	log.info("Hello World!");
}

// 1시간 마다 실행 ex) 01:00, 02:00, 03:00 ...
@Scheduled(cron = "0 0 0/1 * * *")
public void run4() {
	log.info("Hello World!");
}

// 매일 9시00분-9시55분, 18시00분-18시55분 사이에 5분 간격으로 실행
@Scheduled(cron = "0 0/5 9,18 * * *")
public void run5() {
	log.info("Hello World!");
}

// 매일 9시00분-18시55분 사이에 5분 간격으로 실행
@Scheduled(cron = "0 0/5 9-18 * * *")
public void run6() {
	log.info("Hello World!");
}

// 매달 1일 10시30분에 실행
@Scheduled(cron = "0 30 10 1 * *")
public void run7() {
	log.info("Hello World!");
}

// 매년 3월내 월-금 10시30분에 실행
@Scheduled(cron = "0 30 10 ? 3 1-5")
public void run8() {
	log.info("Hello World!");
}

// 매달 마지막 토요일 10시30분에 실행
@Scheduled(cron = "0 30 10 ? * 6L")
public void run9() {
	log.info("Hello World!");
}

아래부터는 읽어보면 좋을 내용들을 추가했습니다 :)

(참고) cron 설정 파일 분리하기

Cron 표현식이 많을 경우 별도 설정파일로 분리해서 관리하는 것이 편할 수 있다. 예를 들어 src/main/resources 패키지에서 config 폴더 추가하여 schedule.properties 파일을 만들어서 아래처럼 관리할 수도 있다.

schedule.sample.cron=* 10 * * * *

스케줄러 클래스

@Component
@PropertySource(value = { "classpath:config/schedule.properties" })
@Slf4j
public class Scheduler {

	@Scheduled(cron = "${schedule.sample.cron}") // 설정파일에서 가져오도록 변경
	public void run() {
		log.info("START");
	}
}

(참고) 스케줄러 사용하기 - Thread Pool

Spring의 스케줄러의 기본 설정은 한계점이 있다. 바로 싱글 스레드로 돈다는 점이다. 그렇기 때문에 만약 @Scheduled 작업이 여러개가 있다면, 이런 상황이 발생할 수도 있다.

@Scheduled(initialDelay = 1000, fixedRate = 1000) // 1초 대기 후에 1초마다 실행
public void fixedRateJob() throws InterruptedException {
	log.info("fixedRateJob START");
	Thread.sleep(1500); // 1.5초 지연
	log.info("fixedRateJob END");
}

@Scheduled(initialDelay = 1000, fixedDelay = 1000) // 1초 대기 후에 1초마다 실행
public void fixedDelayJob() throws InterruptedException {
	log.info("fixedDelayJob START...");
	Thread.sleep(500); // 0.5초 지연
	log.info("fixedDelayJob END...");
}

fixedDelay이 제대로 실행되지 않고 있다.

fixedRateJob이 이전과 똑같이 수행시간이 rate보다 길게 잡혀있다. 이렇게 될 경우, 싱글 스레드로 도는 특성상 다른 Scheduled 작업들도 정상적으로 수행되지 않는다. fixedDelayJob은 1.5초마다 실행되어야 정상일텐데, 로그 상에서는 무려 5초 뒤에나 실행이 되었다. 즉, 어느 것 하나 정시에 작동하지 않았다.
이를 방지하기 위해서는, 스케줄러가 멀티 스레딩으로 작동하게 만들어 줄 필요가 있다. 기본 스케줄러는 pool size가 1인 ThreadPool에서 작동하는데, 우리는 Scheduling 설정을 커스터마이징해서 이 Thread Pool을 늘릴 수 있다.

@Configuration
public class SchedulerConfig implements SchedulingConfigurer {
    private final static int POOL_SIZE = 10;

    @Override
    public void configureTasks(ScheduledTaskRegistrar taskRegistrar) {
        final ThreadPoolTaskScheduler threadPoolTaskScheduler = new ThreadPoolTaskScheduler();

        threadPoolTaskScheduler.setPoolSize(POOL_SIZE);
        threadPoolTaskScheduler.setThreadNamePrefix("hello-");
        threadPoolTaskScheduler.initialize();

        taskRegistrar.setTaskScheduler(threadPoolTaskScheduler);
    }
}

적어도 이제 fixedDelay는 정상적으로 작동하게 되었다.

SchedulingConfigurer는 @EnableScheduling이 걸린 @Configuration에 사용될 목적으로 만들어진 인터페이스이다. 이 인터페이스는 TaskScheduler를 등록하기 위한 용도로 주로 쓰이고, 이 등록은 configureTasks 메서드를 통해 이루어진다.

메서드의 매개변수인 ScheduledTaskRegistrar는 스케줄된 작업(cron, fixedDelay, fixedRate 추가 및 제거 등)을 전반적으로 관리해준다. 그 중에 setTaskScheduler 메서드는 스케줄된 Task들을 실행해줄 TaskScheduler를 선택할 수 있게 해준다. 이를 통해 우리는 직접 만든 ThreadPoolTaskScheduler를 주입시킬 수 있다.

실행 결과를 보면, 이전에 scheduling-1 로만 표시되던 스레드가 hello-n으로 바뀐 것을 확인할 수 있다. 설정한 대로 10의 size를 가지는 thread pool에서 작업들이 수행되게 된 것이다. 그 결과 fixedDelayJob은 정상적으로 1.5초마다 실행된다. (참고 : How to Schedule Tasks with Spring Boot)

(참고) 스케줄러 사용하기 - Async

이제 딱 한가지 문제만 남았다. ThreadPool을 사용했음에도 불구하고 fixedRateJob의 문제만큼은 해결이 되지 않았다. 결국 ThreadPool을 사용하더라도 Thread 하나에 Task 하나가 할당될 뿐, 같은 Task가 동시에 여러 Thread로 실행되지는 않는다는 의미이다. 이 문제는 비동기적으로 스케줄링을 수행할 수 있게 해주는 @Async을 사용하면 된다.

@Async을 사용하기 위해서 Application 클래스에 @EnableAsync를 넣어준다.

@SpringBootApplication
@EnableScheduling // 스케줄러 활성화
@EnableAsync // Async 활성화
public class SchedulerApplication {
    public static void main(String[] args) {
        SpringApplication.run(SchedulerApplication.class, args);
    }
}

그 후, fixedRateJob에 @Async를 넣는다.

private static int i = 0;

@Scheduled(initialDelay = 1000, fixedRate = 1000)
@Async
public void fixedRateJob() throws InterruptedException {
	int j = i;
	i++;
	log.info("fixedRateJob START with i = {}", j);
	Thread.sleep(1500);
	log.info("fixedRateJob END with i = {}", j);
}

fixedRate가 이제서야 정상 작동한다. (빨간색은 task 하나를 표시한 것이다)

실행 결과를 보면 fixedRateJob이 이제서야 정상작동하는 것을 알 수 있다. Async로 선언한 이후로, fixedRateJob이 "task-n"이라는 별도의 스레드에서 생성되고 있으며, 앞의 fixedRate가 아직 끝나지 않았더라도 새로운 task thread에 fixedRate를 넣어 실행시키고 있다는 것까지 확인할 수 있다.
특히, 해당 task가 어떤 thread에서 처리되는지 제대로 확인하기 위해, 실행될 때마다 지역변수 j에 전역변수 i의 값을 복사하고, i는 올리되 로그에는 j를 찍도록 했는데, 이를 통해 출력되는 메시지가 몇번째 실행된 Task였는지를 확인할 수 있다. 이를 통해 알 수 있는 부분은, 한번 실행된 task는 종료 때까지 쭉 같은 스레드를 사용하고 있다는 것을 확인할 수 있다.

@Async 스케줄링은 위에서 설명한 ThreadPool 스케줄링만큼이나 설명할게 많은 방식이다. 제대로 사용하기 위해서는 커스텀 Configuration을 사용해야만 한다.

References

Spring Boot - 스케줄러 사용해보기

Spring Boot 내장 톰캣 제외시키는 방법

컴슈터 — Tue, 5 Dec 2023 10:05:08 +0900

Spring Boot로 개발된 애플리케이션을 실행할 때, 내장 톰캣이 아니라 다른 서버로 배포해야 하는 경우가 있다. (예를 들어 내장톰캣이 아니라 Weblogic 서버로 배포해야 할 경우)

이런 경우 내장톰캣 관련된 설정을 모두 제거해야 한다. Spring Boot 애플리케이션에서 내장 톰캣서버를 제외시키는 방법은 간단하다.

내장톰캣 제외하기

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>

pom.xml에서 <exclusion>으로 내장 톰캣을 제외하면 된다.

그런데 간혹 내장톰캣 제외 설정을 해도 안지워지는 경우가 있다. maven repository에서 내장톰캣을 사용하는 라이브러리들을 찾은 뒤, 마찬가지로 <exclusion>로 제외시키면 된다.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>

애플리케이션을 war/jar로 배포해보면 lib 폴더에 톰캣 관련한 jar가 모두 제외된 것을 확인할 수 있다.

(참고) 다른 웹서버 사용하는법

Spring Doc 를 보면, 다양한 Spring Boot starter 패키지로 기본 내장 컨테이너가 포함되어 있다. 이런 경우 웹서버를 쉽게 가져다 쓸 수 있다.

spring-boot-starter-web (spring-boot-starter-tomcat를 포함)
spring-boot-starter-undertow
spring-boot-starter-webflux
spring-boot-starter-reactor-netty
spring-boot-starter-jetty

개인적으로 느낀 개발자 좋은 습관들 끄적

컴슈터 — Mon, 4 Dec 2023 20:15:38 +0900

n년차 개발자로 일하면서, 개발 선배님들께 조언을 듣거나 스스로 부딪히면서 깨닫게 된 점들이 꽤 있다. "잘 먹고 잘 자야 건강해진다" 같은 뻔한 말이지만, 결국 그 뻔한 말들이 옳은 방향이었음을 느낀다.

지금부터 개발자 좋은 습관을 적어보려고 한다. (*개인적인 의견임을 밝힙니다)

일단 기록하자

프로젝트 투입 시 업무, 회의, 개발하면서 발생하는 모든 것들을 요약하여 기록하는 습관을 만들자.

중요한 회의에 참석 시 녹음하여 회의록에 복기한다. 회의와 관련된 내용 (회의일자, 논의주제, 참석자, 담당자 답변 예정 일자 등)을 적어두면 이것은 내 논리의 뒷받침이자 무기가 된다.

상사며 동료며 후배며, 업무 관련해서 구두로 나눈 얘기도 메일이나 메신저로 남겨놓는다. 특히 업무 지시와 보고 내용은 확실하게 적어두는 게 좋다. 그게 나를 지켜준다. ~~(뒤통수 몇 번 맞다 보면 기록하게 됨....)~~

빡빡해 보일 수 있지만, 주변 사람들에게 꼼꼼한 인상을 심어준다. 내 기억의 뒷받침에는 증빙이 있는 셈이라고 선언하는 셈이다.

귀찮지만 녹음의 효과는 좋다! 플젝 투입 시 처음 업무설명을 들을 때 양해를 구하고 녹음을 트는 편인데, 이는 업무 숙지를 더 빠르고 원활하게 해 준다. 여러 번 같은 것을 물어보는 것보다 녹음 복기하면서 모르는 점을 정리해서 여쭤보는 것이 훨씬 낫다고 본다.

노력하자

사람들에게 일 잘하는 사람으로 인식받으려고 노력하자. 자연스럽게 일거리가 몰릴 수도 있지만, 본인이 성장하고 싶다면 일단 노력하는 게 중요하다고 생각한다.

그렇다고 너무 격하게 열심히 하는 모습을 보여주면 기대치가 높아진다. 적당한 스탠스를 취하면서 내 맡은 할 일을 착실히 하자.

초급 때 독하고 끈덕지게 하자. 이때 한 고생은 나중에 자산이 된다. 나이 들어서 실력 없는 개발자가 되기 싫으면 꾸준히 노력하는 수밖에 없다.

가만히 있지 말자. pm이 일을 줄 때까지 조용히 기다리는 수동적인 사람이 생각보다 많았다. '내가 이건 안 해본 거라서...' 이런 핑계는 대지말자. 이런 말을 하는 개발자들도 많았다. 해본 거만 해볼 수는 없다. 안 해봤더라도 부딪혀보고 배우면 된다.

구체적인 업무 노력들

인덱스를 기억하자. 파일서버나 제공된 문서의 인덱스를 살펴본다. 인덱스를 기억했다가 필요한 것을 제때 꺼내쓸 수 있도록 기억해놓자.
API를 살펴보자. 예를 들어 웹스퀘어를 사용한다면 전반적인 API를 참고하거나, 스프링 부트로 개발한다면 spring.io 사이트와 친해지는 것이 좋다.
DB 실데이터와 ERD 구성도를 살펴보면서 업무흐름도(flow) 그려보자. 실제 데이터를 보고 흐름을 파악하라는 부장님들의 조언이 많았다.
소스를 가져다 쓸 때 증빙을 가지고 있는다. 왜 이 소스를 가져다썻는지 구체적인 증빙을 가지고 있자. 추측으로 끝내지 않는 게 중요하다. "오류 나는 곳이 여기겠지? 이렇게 사용하는 게 맞겠지?" 구글링이든 소스에서 확인하든 추측을 사실로 만드는 과정이 필요하다.
디버깅과 테스트를 잘 활용하자. 업무 효율성이 높아진다.
프로젝트의 관련 용어를 숙지하자. 예를 들어 보험 프로젝트에 투입되었다면 인바운드, 아웃바운드 같은 기본 용어를 숙지하고 보험약관에서 용어들을 읽어보자.
excel이나 notepad를 잘 활용하자. 경력이 높아질수록 문서 작업이 많아진다. 엑셀 vlookup 같은 기능을 잘 활용하고 notepad는 열작업이나 정규표현식으로 원하는 데이터 추출하는 것 등을 알아두자.

복습하자

신기하게도 프로젝트를 끝나고 다음 프로젝트를 하면, 전 프로젝트의 내용은 기가 막히게 잊어버리게 된다.

내가 짠 소스도 기억이 안 날 수 있다. 상사가 내가 담당한 소스에 대해 '그거 뭐였지?' 물어본다면, 곧잘 대답할 수 있는 정도의 복습정도는 해야 한다. 그것이 진짜 내 것이 된 거니까. 내 것을 만들어야 한다.

현재 프로젝트를 설명할 수 있는가? 만약 면접이라면, 내 담당업무 및 전체흐름을 일목요연하게 말할 수 있는가? 내가 경험했던 업무를 A4용지 1장씩으로 정리해 보자. 그것을 면접관한테 설명한다고 생각하고 업무팀 설명을 요약한다. 매년 본인의 업무에 대해서 이런 상태를 유지해 놓으면 내 자신감이자 자산이 된다.

기능이 돌아가게끔만 구현하는 SI 개발자들이 많다. 기한 내에 개발하는 것은 우선시 되어야 하는 게 맞지만, 그 후 시간이 된다면 복습하면서 이게 꼭 필요한 소스였을까? 너무 가져다 쓰진 않았을까? 대체제는 없을지 고민해 보자.

센스를 가지자

인사는 항상 밝고 적극적인 태도로 할수록 좋다. 상대방에게 좋은 인상을 심어주는 것이 중요하다고 생각한다.

출근시간에는 최소 10분 전에는 도착해서 앉아있자. 지각 안 하고 성실한 태도를 보여주는 것이 좋다.

내 퇴근과 휴가는 내가 챙겨야 한다. 너무 눈치 보지 말고 일 없을 때 스스로 챙겨야 한다.

모르는 게 있으면 확실하게 물어본다. 지레짐작하다 엉뚱한 방향으로 굳혀질 수 있다. (기껏 코드를 짜놨는데 일을 두번해야 할 수도 있다)

다만 궁금한 게 생길 때마다 질문하지 말고, 충분한 고민을 하고 여러 질문을 모아서 질문하자.

맡은 일이 기간 내 불가능하다고 생각한다면, 구체적인 완료시간과 대안을 제시한다.

완벽주의는 버리자. 선개발 후개선을 하더라도 기간은 웬만하면 엄수해야 한다.

SI의 장점

SI 프로젝트의 장단점이 많지만, 내가 프로젝트에서 느낀 SI의 제일 큰 장점을 말해보자면 '계속 발전해 나갈 수 있는 것'이다.

이 프로젝트에서 팀장에게 질문하는 걸 잘하지 못했다면? 다음 프로젝트에서 질문을 시도해 보면 된다. 이번 프로젝트에서 상사에게 뒤통수를 몇 번 맞았다면? 다음 프로젝트에서 문서로 기록하는 걸 시도하면 된다. 이번 프로젝트에서 대충 코딩을 짰다면? 다음 프로젝트에서는 좀 더 나은 코드를 짜기 위해 노력하면 된다.

새로운 프로젝트에 들어갈 때마다, 새로운 마음으로 나 스스로를 조금씩 업그레이드시킨다는 마음으로 임할 수 있는 게 장점이라고 생각한다.

지금까지 내가 느꼈던 개발자 습관을 두서없이 적어봤다.

Spring Boot에서 static 변수로 선언한 @Value 값이 NULL일 경우

컴슈터 — Fri, 1 Dec 2023 20:20:09 +0900

Spring Boot에서는 초기화 과정에서 컴포넌트를 주입할 때, 애플리케이션에 대한 Key/Value 형태의 설정을 클래스 내 변수에 값을 넣어주는 @Value 어노테이션이 존재한다.

이러한 설정은 application.properties 설정 파일에서 다음과 같은 형식으로 관리할 수 있다.

encrypt.key=1.0.2

이러한 방식을 사용하여 다른 3rd party 서비스를 사용할 때 Access Key 또는 Secret Key 같은 설정을 유용하게 할 수 있다.

static 변수에 대하여 @Value 사용하기

@Component로 선언된 클래스에서 @Value으로 변수를 설정하여 설정파일에 선언한 값을 가져올 수 있다. 다만 static 변수에서 다음과 같이 @Value 을 사용한다면 잘못된 결과를 초래하게 된다.

잘못된 예

@Component
public class EncryptUtil {

    @Value("${encrypt.key}"})
    public static String encryptKey;
    
}

위와 같이 클래스 에서 정의되어 있는 static으로 선언된 변수를 사용하면 항상 null 값이 반환된다. static 변수에 대해서는 @Value이 동작하지 않는다.

올바른 예

이를 해결하기 위해 setter 메소드를 추가하여 static 변수에 직접적으로 값을 넣을 수 있도록 하면 값을 가져와진다.

@Component
public class EncryptionUtil {

    public static String encryptKey;

    @Value("${encrypt.key}"})
    public void setKey(String key) {
        encryptKey = key;
    }
}

postman json 형식으로 post 요청하는 법

컴슈터 — Fri, 1 Dec 2023 07:55:26 +0900

매우 간단하지만 안쓰면 까먹는 것 중 하나

postman에서 json 형식으로 post 요청을 보내려면 Body > raw 탭을 선택하여 json 형식으로 전송하면 된다.

참고로 [Send] 버튼으로 요청을 보내면 되지만, [Send] 버튼을 펼쳐보면 [Send and Download] 버튼이 있어서 만약 응답 결과가 이미지 같은 파일이라면 이 기능으로 내 PC에 파일을 저장할 수 있다.

스프링부트 EnvironmentPostProcessor로 사용자 정의

컴슈터 — Thu, 30 Nov 2023 22:20:47 +0900

이번 프로젝트에서 Spring Boot 애플리케이션 구동시 실행되는 기능을 만들어야 했다.
EnvironmentPostProcessor 인터페이스를 활용하여 커스터마이징 환경으로 구현할 수 있었다. 이 인터페이스는 Environment 애플리케이션 컨텍스트가 올라가기 전에 애플리케이션을 사용자 정의할 수 있게 해주는 기능이다.

실제 예시를 살펴보자.

사용자 정의 클래스 생성

EnvironmentPostProcessor 인터페이스를 구현한 사용자 정의 클래스를 작성한다.

import org.apache.commons.logging.Log;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.env.EnvironmentPostProcessor;
import org.springframework.boot.logging.DeferredLogFactory;
import org.springframework.core.env.ConfigurableEnvironment;

public class LoadLicenseProcessor implements EnvironmentPostProcessor {

	private final Log logger;

	public LoadLicenseProcessor(DeferredLogFactory logFactory) {
		this.logger = logFactory.getLog(LoadLicenseProcessor.class);
	}

	@Override
	public void postProcessEnvironment(ConfigurableEnvironment environment, SpringApplication application) {
		logger.info("EnvironmentPostProcessor START!!!");
		loadLicense(); // 사용자 정의 로직
	}
}

위 예제를 보면 Log를 별도로 구현했는데 이유는 롬복의 @Slf4j 를 이용했더니 로그 출력이 안되는 이슈가 발생했기 때문이다. stackoverflow 답변을 참고하여 DeferredLogFactory로 별도로 구현했다.
Spring Boot 2.4부터 EnvironmentPostProcessor 구현 시 선택적으로 다음 생성자 매개변수를 사용할 수 있다.

DeferredLogFactory : 애플리케이션이 완전히 준비될 때까지 출력이 지연되는 로거를 생성하는 데 사용할 수 있는 팩토리(환경 자체에서 로깅 수준을 구성할 수 있음)

spring.factories 파일 생성

EnvironmentPostProcessor를 구현한 클래스가 정상적으로 동작하기 위해서는 META-INF/spring.factories 파일을 만들고 해당 클래스의 풀 경로를 기입해주어야한다.

프로젝트 src/main/resources 경로에 META-INF 폴더를 만들고 spring.factories 파일을 만든다.

해당 파일에 생성한 클래스의 full 경로를 기입한다.

org.springframework.boot.env.EnvironmentPostProcessor=com.company.helloBoard.config.LoadLicenseProcessor

이렇게 설정한 뒤 jar 또는 war 파일로 압축하면 아래와 같이 spring.factories 파일이 잘 들어가져 있다.
jar로 배포할 경우 META-INF 안에 포함되어 있음

war로 배포할 경우 WEB-INF/classes/META-INF 안에 포함되어 있음

jar 파일 실행하여 애플리케이션 구동시, 로그도 잘 찍히고 사용자 정의 기능도 잘 수행되었다.

References

STS 4에서 war 파일로 쉽게 배포하는 방법 (배포 및 실행까지)

컴슈터 — Wed, 29 Nov 2023 20:16:16 +0900

STS 4에서 Spring boot와 Maven으로 개발한 애플리케이션을 war 파일로 배포하려고 한다.

이클립스에서는 간단히 war 파일을 만들 수 있지만, STS 4에서는 Export - war file 탭 항목이 아예 뜨질 않는다.

war야 대체 어딧니,,?

Stackoverflow에서는 플러그인(Eclipse Enterprise Java and Web Developer Tools)을 설치하면 된다고 하지만, 굳이 플러그인을 설치하지 않아도 Maven을 통해 war 파일을 생성할 수 있다.

Maven으로 war 파일 생성하기

STS에서 war 파일로 만드는 방법은 생각보다 간단하다. 아래 2개만 하면 된다.

프로젝트 폴더 우클릭 > Run As > Maven clean
프로젝트 폴더 우클릭 > Run As > Maven install

먼저 maven clean으로 대상 폴더를 비우고 install을 진행하면 war 파일이 생성된다.
콘솔창에서 'BUILD SUCCESS'가 뜨면 성공적으로 처리된 것인데 만약 'BUILD FAIL'이 뜬다면 관련 창을 모두 다 닫고 프로젝트 폴더 우클릭 > Maven > Update Project로 메이븐을 업데이트한 뒤 다시 시도해보자.

이제 프로젝트 폴더(workspace)에서 target 경로에 가보면 war 파일이 만들어진 것을 확인할 수 있다. 해당 war 파일을 원하는 이름으로 바꾸고 배포를 하면 된다.

war 파일 실행하기

spring boot로 제작된 프로젝트를 실행하려면, 프로젝트를 war 또는 jar 파일로 export 하여 아래처럼 해당 파일을 실행하면 된다.

java -jar example.war

방금 만든 war파일을 실행하면 localhost:8080으로 접속할 수 있다.