개발새발! 🙉

티스토리에서 글을 쓰면 Git에도 반영되어 아래처럼 잔디를 심어보려고 한다. 그러기 위해 Github Action을 이용하여 하루에 한번 티스토리의 RSS를 기반으로 Github에 커밋이 되도록 할 것이다. 사전 준비 npm을 사용할 것이므로 Node.js와 Git이 필수적으로 설치되어 있어야 한다. 개발 툴은 VsCode를 이용했다. 1. 티스토리 RSS 설정 먼저 티스토리에서 RSS 설정을 확인해보자. 내 블로그 설정 > 관리 > 블로그 메뉴로 들어가서 RSS 전체 공개로 설정 후 저장한다. 이제 https://devpad.tistory.com/rss 같이 본인의 블로그 주소에 접속하면 RSS 정보를 확인할 수 있다. 2. repository 생성 Github Action으로 연동할 새로운 repos..

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

문제 발생 앵귤러에서 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 -> ..

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 앱을 ..