개발새발! 🙉

JavaScript 관련해서 세계적인 트렌트를 확인할 수 있는 사이트를 알게 돼서 내용을 공유한다. 무궁무진하게 생기는 JavaScript 시스템에서 트렌드를 쉽게 확인할 수 있다. 라이징스타 risingstars 사이트에 접속하면 2023년 프론트엔드 프레임워크 인기 순위를 알 수 있다. React가 2021년부터 현재까지 자바스크립트 생태계에서 1위를 유지하고 있다. 대표적인 프론트엔드 3대장 (React, Vue, Angular) 말고도 htmx, Svelte, Million 등 프레임워크가 인기를 끌고 있다. 그래프 오른쪽에는 사람들이 덧붙인 코멘트가 있어서 같이 읽어보면 좋다. 이 사이트의 장점은 프론트엔드 말고도 백엔드, 모바일, 빌드 도구, 테스팅 프레임워크, AI 등 다양한 자바스크립트 시..

앵귤러 프로젝트에 곧 투입될 예정이라 앵귤러 첫걸음 이라는 책을 대여해서 읽어봤다. 책을 읽기 전, 목차를 살펴보니 앵귤러 개념들을 상세하게 다루고 있는 것 같아서 선택했다. 이 책의 장점은 예제 중심으로 이루어져 있어서 실습을 통해 앵귤러의 문법과 기능을 익힐 수 있고, 실습 예제도 Github을 통해서 가져다 쓸 수 있다. 기초 설명부터 실제 프로젝트인 상품 관리 애플리케이션을 실습으로 만들어볼 수 있고, 앵귤러 CLI를 활용한 개발 방법과 앵귤러 생태계의 서드파티 라이브러리 활용, 그리고 파이어베이스를 사용한 앵귤러 웹 애플리케이션 배포까지 다루고 있다. 다만 487페이지의 방대한 분량에다가 2017년에 발행된 책이다보니 동작하지 않는 소스도 많아서 구글링으로 해결하는데 꽤 많은 시간이 소요되어 가..

강의 소개 인프런에서 Angular(2+) Front에서 Back까지 강의를 수강 완료했다. 직전에 들었던 강의보다 라우터 모듈, 서비스 개념까지 다루고 있어서 좀 더 심도 있는 수준으로 배울 수 있다. 강의자는 Angular + Nest.js 스펙을 목표로 영상을 찍으신 것 같다. 강의 후기 이 강의는 총 20개 강의, 5시간 28분 분량으로 꽤 무겁다. 실습을 같이 병행하면서 오류도 고치다보니 수강 완료까지 3-4일이 소요되었다. 무료 강의지만 강의 퀄리티가 좋은 편이다. 스톱워치 실습을 시작하기 전에 TypeScript에 대해서 간단한 예제를 보여준다. tsc 명령어로 TypeScript 파일이 JavaScript 파일로 변환되는 과정, tsconfig.json 파일의 target 설명, 접근제한자..

문제 발생 크롬 개발자도구(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을 입력하..

문제 발생 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-angula..

VsCode(Visual Studio Code)는 최초 설치하면 언어가 영문으로 기본 설정되어있다. 한국 사람은 한국어로 봐야 더 편한법! VsCode에서 영문을 한국어로 변경하는 방법을 설명한다. 1. VsCode 설정창 접속하기 VsCode에서 단축키 F1를 누르면 명령어를 입력할 수 있다. 또는 좌측 하단에 톱니바퀴 버튼 클릭 후 [Command Palette] 메뉴를 선택해도 된다. 입력창에 Configure Display Language를 입력한다. 2. 한국어 선택하기 바로 언어를 선택할 수 있는 목록이 나오는데 한국어를 선택한다. 재시작 경고창이 뜰 것인데 Restart를 눌러서 다시 시작하면 메뉴가 한국어로 설정된 것을 확인할 수 있다. 반대로 한국어에서 영문으로 다시 변경할 때에도 같은 ..

강의 소개인프런에서 Angular 기본과 간단한 To-Do 어플리케이션 만들기 강의를 수강 완료했다. 이 강의는 앵귤러 2 버전 이상의 기본기를 배울 수 있는 무료 강의이다. 앵귤러 탄생 배경과 컴포넌트, 모듈같은 중요 개념들을 학습하고, 간단한 앱을 만들어 보면서 앵귤러를 가볍게 접할 수 있다.강의 후기이 강의는 총 10개 강의, 2시간 16분 분량으로 구성되어 있어서 크게 부담스러운 학습시간은 아니다. 게다가 무료 강의라서 가벼운 마음으로 학습할 수 있다. 초급자를 위한 기초 강의인지라 배우는데 큰 어려움은 없지만, ES6 문법과 TypeScript에 대해서 익숙하지 않다면 쉽지 않을 수 있다. 앵귤러 관련 Angular CLI 설치부터 모듈, 컴포넌트, 파이프 등을 이용해서 간단한 To-Do 앱을 ..

컴포넌트 커뮤니케이션 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을 가질 수 있다..