프론트기술/Angular13 Spring Boot + Angular 프로젝트들 Spring Boot 와 Angular 의 조합은 제가 선호하는 프레임워크 스택입니다. 간단한 프로젝트부터 대규모 프로젝트까지 협업하기에도 좋은 선택지라고 생각합니다. GitHub에 공개된 프로젝트가 몇가지 있어서 소개해볼까 합니다. 1. Task CRUD GitHub : github.com/revfactory/spring-boot-angular-example 작년에 제가 공개한 프로젝트로 간단하게 CRUD를 작성한 프로젝트입니다. 블로그 포스팅을 위해 프로젝트를 업데이트 했습니다. Spring Boot 와 Angular 는 같은 저장소를 사용했으며, 포트로 분리하여 실행하거나, Angular 빌드도 가능합니다. 자세한건 Readme를 참조하세요. Spring 은 H2Database가 설정되어 있으며, .. 2021. 2. 21. Angular 11 에 Tailwind CSS 를 적용해보자. Tailwind CSS 최근 CSS Framwork 조사 에서는 Tailwind CSS가 Bootstrap, PureCSS 등을 제치고 가장 많은 인기를 얻고 있다. Tailwind 는 HTML 문서에 class 를 정의해서 사용하는 방법으로 디자인을 구성할 수 있는데, 커스터마이징이 자유로운 편이고, 직관적이어서 CSS를 직접 다루는 개발자들에게 좋은 호응을 얻고 있다. 홈페이지 메인에서부터 아주 직관적인 사용법이 표현이 되어 있다. tailwindcss.com Angular 11 에 Tailwind CSS 적용하기 Angular 프로젝트에 Tailwind CSS 를 사용할때 유의해야할 점은 TailwindCSS 의 기본 CSS 파일의 사이즈가 아주 크다는 것이다. 현재 버전을 확인해보니 4.63MB .. 2021. 2. 21. check python checking for Python executable "python" in the PATH 윈도우 환경에서 Angular Project에서 npm 명령을 수행할때, 아래와 같은 에러가 발생했다. gyp verb check python checking for Python executable "python" in the PATH gyp verb `which` succeeded python C:\Users\revfactory\AppData\Local\Programs\Python\Python39\python.EXE gyp ERR! configure error gyp ERR! stack Error: Command failed: C:\Users\revfactory\AppData\Local\Programs\Python\Python39\python.EXE -c import sys; print "%s.%s.%.. 2021. 2. 20. Angular 11 디버깅 가이드 Angular 의 로드맵을 보면 더 많은 신규 유저를 유입시키기 위한 노력들을 진행하고 있다. 가이드 문서를 전체적으로 개선하고, CLI 메세지등을 개선하고 업데이트를 쉽게 할 수 있도록 하며, 더 나은 오류메세지로 디버깅 환경을 개선하는 등의 플랜을 가지고 있다. 여기서는 Angular 11.1.0 부터 개선된 표준화된 오류 코드와 함께 Angular 의 디버깅 가이드 내용을 살펴보고자 한다. Angular Error Message Angular 오류 메세지는 모두 NG 로 시작하며, 뒤에 표기되는 코드값에 따라 에러 유형을 판단하는데 도움을 준다. 이러한 코드는 다음과 같은 형식으로 식별할 수 있다. 에러코드가 0으로 시작하는 3자리 코드의 경우 런타임 에러를 의미하며 다음과 같은 카테고리로 구성된다.. 2021. 1. 31. Angular + Scully 로 JAM Stack 맛보기 Angular CLI 로 프로젝트 생성 $ ng new jamstack-example - 엄격한 유형검사 : y - Angular routing 사용 : y - Stylesheet Format : SCSS (CSS 도 상관없음) 콘솔에서 실행 $ cd jamstatck-example jamstatck-example$ ng serve IntelliJ 에서 실행시 Material 모듈 추가 jamstack-example$ ng add @angular/material - Browser Animation : no Scully 모듈 추가 jamstack-example$ ng add @scullyio/init Navi 컴포넌트 추가 jamstack-example$ ng g @angular/material:nav m.. 2021. 1. 15. PowerShell 에서 Angular Cli가 안될때 The term 'ng' is not recognized as the name of a cmdlet 'ng' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. (the term 'ng' is not recognized as an internal or external command, operable program or batch file.) 1. Windows PowerShell 실행 정책 변경 Windows PowerShell 실행 정책을 사용하면 Windows PowerShell이 구성 파일을로드하고 스크립트를 실행하는 조건을 결정할 수 있습니다. 실행 정책 유형 : Restricted** -로컬, 원격 또는 다운로드 스크립트는 시스템에서 실행할 .. 2021. 1. 15. 이전 1 2 3 다음
