본문 바로가기

프론트기술27

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.
2020년도 Javascript 현황 조사 지난 2019년도 javascript 현황 조사에 이어 2020년도 Javascript 설문조사가 이뤄져 공개되었습니다. 주요 내용만 뽑아서 정리해보았는데요. 더 자세한 내용을 알고 싶으시면 번역도 되어 있으니 홈페이지에서 확인하시면 될 것 같아요~! 소개 - Optional Chaining과 Nullish Coalescing과 같은 새로운 기능 덕분에 언어가 계속 향상되고 있다. - 타입스크립트의 광범위한 적용은 정적 타입을 대중화함으로써 완전히 다른 수준으로 끌어올리고 있다. - Svelte의 등장으로 프론트엔드에 대한 신선한 해석이 이뤄졌으며 모든 것을 흔들어 놓았다. 인구 통계 - 137개의 나라에서 23,765명 응답 (미국 약 21%) 연봉 경력 직장 규모 기능 응답자 대부분은 설문조사에 언급.. 2021. 1. 23.
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.