개발새발! 🙉

컴포넌트 커뮤니케이션 1) 부모-> 자식 컴포넌트 ✅ 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 @Input 데코레이터를 이용하면 부모->자식 컴포넌트로 속성값을 세팅할 수 있다. ✅ 자식 컴포넌트의 속성을 ES6 setter를 이용해서 데이터를 가공한 후에 비공개 속성값을 세팅할 수도 있다. get을 통해 비공개 속성값을 공개적으로 가져오게 된다. ✅ @ViewChild 데코레이터를 이용하여 자식 컴포넌트 클래스에 인스턴스 레퍼런스를 부모 컴포넌트에서 직접 전달받을 수도 있다. 2) 자식->부모 컴포넌트 ✅ 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 발송할 때는 @Output 데코레이터와 EventEmitter를 이용하여 특정 이벤트와 데이터를 발생시킬 수 있다. ✅ 이벤트 바인딩을 통해 ..

외부 라이브러리가 포함된 Java 웹 애플리케이션을 war로 배포하려고 하니, 배포 실패가 되면서 maven repository에서 외부 라이브러리가 누락되었다는 오류가 발생했다. 지금부터 누락된 라이브러리를 local maven repository에 직접 추가하는 작업을 진행하려고 한다. 예를 들어 외부 라이브러리 ImageConverter.jar 파일을 직접 추가하려고 한다. lib 폴더에 jar 파일 넣기 프로젝트￦lib 폴더를 생성하여 아래처럼 maven dependency 형식대로 폴더를 만든다. maven의 디렉토리 구조대로 동일하게 구성한다. lib 폴더 -- com 폴더 -- company 폴더 -- ImageConverter 폴더 -- 1.0.0 폴더 -- ImageConverter-1...

모듈(Module) 모듈 세부 구현이 숨겨지고 공개 API를 이용해 다른 코드에서 재사용 가능한 코드를 말한다. (예를 들어 리모컨) ES6에서의 모듈 ES6에서는 모듈 개념 + 변수의 스콥이 모듈로 제한된다. 스코프가 모듈 내로 제한된다는 의미는 각각 파일들이 하나의 모듈이 되는 것이며, 각각 파일에서 정의가 된 변수들은 파일 안에서 스콥이 보장된다. 따라서 각 파일에 있는 기능을 쓰려면 export, import 작업을 해야 한다. 앵귤러에서의 모듈 컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 주요 부분을 기능 단위로 그룹핑하게 해 준다. 모든 앵귤러 애플리케이션은 하나의 Root Module을 가진다. (ex. app.module.ts) 여러 Feature Module을 가질 수 있다..

VsCode(Visual Studio Code)를 사용하다보면 탐색기에서 상위 폴더와 하위 폴더가 / 로 분류되어 폴더 계층구조가 겹쳐서 보인다. 한 눈에 계층구조를 파악하기 불편하므로 폴더를 계층구조로 보이도록 설정할 것이다. 1. VsCode 설정창 들어가기 본인의 운영체제에 따라 아래의 키를 동시에 누르면 VsCode 설정창에 접속한다. Windows : Ctrl + , macOS : ⌘ + , Linux : Ctrl + , 2. Compact Folders 체크박스 해제 설정창에서 explorer.compactFolders 검색 후 Explorer: Compact Folders 체크박스를 해제한다. 이제 하위 폴더도 계층 구조대로 확인할 수 있다. 간단하지만 은근 신경 쓰이는 부분 해결!

앵귤러 16 버전 기준으로 프로젝트 파일 구조를 알아보려고 한다. 앵귤러 버전별로 파일 구조가 다를 수 있으며, 타버전은 버전별 file-structure 문서를 참고하자. 앵귤러 프로젝트 구조 중요한 파일들 하나씩 살펴보기 angular.json 파일 이 파일은 워크스페이스에 있는 모든 프로젝트에 적용되는 Angular CLI 환경설정 파일이다. Angular CLI를 이용해서 빌드, 실행, 테스트할 때 사용하는 설정도 이 파일에서 구성한다. 이 파일에서 대표적인 중요한 키워드를 살펴보자. "sourceRoot": "src" : 프로젝트의 루트 폴더는 src 폴더인 것을 알 수 있음 "outputPath": "dist/first-app" : 프로젝트 빌드시 dist 폴더가 만들어짐 "index": "s..

다형성(polymorphism)이란 하나의 객체가 여러 가지 타입을 가질 수 있는 것이다. 자바에서는 다형성을 위해 부모클래스 타입의 참조변수로 자식클래스 타입의 인스턴스를 참조할 수 있도록 한다. 오버로딩과 오버라이딩을 통해 다형성을 구현할 수 있다. 오버로딩과 오버라이딩의 비교 오버로딩과 오버라이딩은 그 단어의 유사함으로 인해 혼동하기 쉽다. 하지만 그 개념은 확실히 다르며, 그 차이점을 아는 것이 중요하다. 오버로딩(overloading)은 새로운 메서드를 정의하는 것이고, 오버라이딩(overriding)은 상속받은 기존의 메서드를 재정의하는 것이다. 오버로딩 오버라이딩 메서드명 동일 동일 매개변수 및 타입 다름 동일 리턴 타입 관계 없음 동일 다형성을 구현하는 방법 오버로딩 : 메서드명이 같지만 ..

문제 발생 앵귤러에서 클래스 안에서 속성 선언 시 아래의 오류가 발생한다. Property xxx has no initializer and is not definitely assigned in the constructor name이라는 문자열과 todos라는 배열을 선언할 때, 속성 값에 초기화 값이 없다는 뜻이다. 속성을 선언하고 난 뒤 값을 할당하거나 생성자에 초기화하지 않을 때 발생한다. 이 오류는 TypeScript의 엄격한 클래스 초기화 검사의 일부로, 모든 클래스 속성이 사용되기 전에 초기화되는지 확인한다. 해결 방법 1 속성 값을 직접 선언하여 초기화한다. name: string = ''; // 빈 문자열로 초기화 todos: { done: boolean, text: string; }[] =..

문제 발생 앵귤러에서 양방향 바인딩을 하기 위해 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)는 소프트웨어 기술자 경력관리 사이트이다. 프리랜서 개발자로 일하는 경우(특히 초급) 프로젝트 투입 시 코사 증명서를 요구하는 경우가 많아서 경력 증빙용으로 등록하곤 한다. 국민연금가입증명서 등으로 경력증빙 대체도 가능해서 코사에 등록하지 않는 사람도 많지만, 개인적인 경험상 아직까지는 업체 측에서 요구하고 있기에 코사로 경력관리를 하고 있다. 1. 코사(kosa) 접속하기 코사에 접속해서 회원가입 및 로그인을 한 뒤 [기술자신청] 버튼을 클릭한다. 2. 경력 정보 입력하기 기술자신청 화면으로 이동하면 본인이 일했던 경력 사항들을 입력하면 된다. 7개 파트(개인정보, 근무경력, 기술경력, 학력, 기술자격, 교육, 상훈)로 나뉘어 있는데 하나씩 살펴보자. 1) 개인정보 회원가입했던 기본 정보..

okky 글을 보고 개인적으로 정리한 내용입니다. 몇 년 전 글이지만 개인적으로 도움이 되는 글이라서 기록해 둔다. 내 생각엔 작성자분이 okky에서 뜬금없이 해결법만 요구하는 사람들을 위해 올리신 것 같다. 회사나 개발 커뮤니티에서 질문 잘하는 방법 같은 건 학교나 사회생활에서 배우지 않기 때문에 질문을 잘 하지 못하는 사람들이 꽤 있다. 어느 정도 학습을 한 상태에서 질문할 경우, 아래 내용을 고려해 보는 것이 질문자와 답변자 서로 간에 도움이 되고 더 빠른 문제 해결을 위한 지름길일 것이다. 1. 본인이 참고한 레퍼런스를 언급하자 본인이 공부한 과정이나 레퍼런스(웹 사이트, 참고 서적)를 알려준다. 잘못된 레퍼런스를 참조했다면 더 나은 레퍼런스를 얻을 것이고, 그 글을 이미 학습한 사람이라면 부연 ..