안녕하세요~ totally 개발자입니다. Component with inline template 저번 글에서는 component with inline style에 관해 살펴보았고 이번에는 component with inline template에 대하여 알아보도록 하겠습니다. 이 부분은 template를 직접 지정하여 사용할 수 있도록 도와주는 역할을 하며 간단하게 사용할 수 있습니다. 위의 이미지대로 ng generate component signup --inline-template 커맨드를 터미널에 입력하여 inline-template를 가진 component를 생성해줍니다. 6-8번째에 html 태그를 입력하여 지정할 수 있습니다. 여기에 class 값도 추가하여 css를 적용할 수 있도록 해줍니다...

안녕하세요~ totally 개발자입니다. Component with inline style 오늘 알아볼 부분은 위에 적혀 있는 Component with inline style입니다. 이 부분은 컴포넌트를 생성할 때 스타일을 지정할 수 있게 도와줍니다. 위의 2가지를 비교해보면 다른 부분이 6번째 줄에 나와 있는데 바로 styleUrls: ['./header.component.css']와 styles: [ ] 이 부분이 서로 다릅니다. 즉 이 styles 부분에 바로 css 코드를 적용할 수 있는 것입니다. 이것을 생성하기 위한 커맨드는 ng generate component contact --inline-style 입니다. 저번 시간에 생성했을 때에는 css파일이 같이 생성이 되어서 css파일을 따로 ..

안녕하세요~ totally 개발자입니다. 이번 시간에는 Component에 관해서 살펴보도록 하겠습니다. 여러 개의 Component들로 웹페이지가 구성이 되기 때문에 Component에 대해서 반드시 이해가 필요합니다. 앵귤러에서 component를 생성할 때, 수동으로 하나씩 파일을 만들어서 생성하는 것이 아니라 Terminal을 열어서 현재 프로젝트 경로인지 확인한 뒤, ng generate component 컴포넌트명을 입력해주면 되며, 간단히 ng g c 컴포넌트명으로만 적어서 실행 가능합니다. 실행하면 위의 이미지처럼 app 하위 디렉토리 안에 header라는 컴포넌트가 생성되었음을 알 수 있고 app.module.ts 파일 내에 5번째 줄에 자동으로 import { HeaderComponen..

안녕하세요~ totally 개발자입니다. 앵귤러(Angular)는 프레임워크로 타입스크립트를 기반으로 모듈 및 Component로 구성이 됩니다. SPA(Single Page Application)의 구조를 가지고 있으며 개발에 필요한 전반적인 기능과 라이브러리가 자체적으로 제공이 되고 있습니다. 같이 차근차근 배워보면 좋을 것 같습니다. 다운로드 및 설치는 다른 포스팅 및 유튜브 강좌에서 많이 소개되어 있으므로 바로 본론으로 들어가보도록 하겠습니다. 처음 앵귤러 프로젝트를 열면 이렇게 여러가지 directory들이 보입니다. 그 중 src -> app -> app.component.html에 들어가서 모든 내용을 지우고 Hello World을 입력하고 터미널을 열어서 ng serve를 입력해줍니다. l..