프론트엔드 (108) 썸네일형 리스트형 타입스크립트 자바스크립트는 타입변형이 자유로운 언어입니다. 코드를 작성할 때 타입을 지정하지 않아도 자동으로 타입을 변경해 주기 때문에 코드작성은 쉬우나 동시에 발견하기 어려운 로직에러로 이어질 수 있는데요. 타입스크립트는 자바스크립트와 모든 기능과 문법을 사용하지만 타입제한을 강화한 언어로 개발과정에서 상기 언급한 에러의 가능성을 사전에 차단해 줍니다(자바스크립트의 모든 코드는 타입스크립트에서 사용가능하며 타입스크립트는 타입만 체크). 설치하기 타입스크립트를 브라우저가 인식하기 위해서는 타입스크립트를 자바스크립트로 컴파일해야 합니다. 타입스크립트 컴파일러는 타입스크립트 공식페이지(https://www.typescriptlang.org/)에서 가능한데요. 메인페이지에서 하얀 버튼을 누르면 로컬환경에 설치 (선택 시 .. 자바스크립트 컴포넌트 - 스탭퍼 구현 먼저 HTML에 필요한 만큼 단계를 지정합니다. 해당 애플리케이션에서 다음단계 또는 이전단계로 이동은 버튼을 사용했습니다. 1 2 3 4 Prev Next 아래와 같이 스타일을 지정합니다. 단계를 표시할 선은 바탕선이 될 요소와 단계진행에 따라 채워질 선을 표현할 요소 두 가지가 필요한데 '::before'를 사용해서 바탕선을 표시했습니다. '::before'의 경우 JS에서 사용할 수 없으므로 채워질 선으로 사용하기에는 적합하지 않습니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; background-color: rgb(224, 242, 236); ali.. 기본 스타일 - 리셋 CSS의 각 요소는 미리 지정된 기본 스타일을 가지고 있습니다. 예를 들어 요소의 경우 기본적으로 마진을 가지기 때문에 화면에 아래와 같이 표시됩니다. 문제점 기본 스타일은 때에 따라서 필요한 경우도 있지만 스타일 작업 시 기본 스타일도 고려하려야 하기 때문에 스타일링 작업을 힘들게 하는 요소로 작용합니다. 또 브라우저마다 각 요소의 기본 스타일이 다르게 설정되어 있어 같은 웹사이트라도 브라우저마다 다르게 표시되어 사용자에게 부정적인 경험을 줄 수 있겠죠. 기본 스타일 제거하기 따라서, 스타일 작업에 앞서 기본 스타일을 제거하거나 일반화하는 작업이 필요한데요. 아래와 같은 방법 중 하나로 가능합니다. 1. CSS reset 말 그래도 CSS 스타일을 리셋하고 시작하는 방식으로 아래와 같은 코드를 사용합니.. 자바스크립트 컴포넌트 - 고무고무 카드 바닐라 자바스크립트로 제작된 컴포넌트로 웹 사이트 메인 헤더로 활용가능합니다. 마우스를 카드 위로 가져가면 해당 카드가 확장되는 기능을 가지고 있습니다. 구현 먼저 HTML에 사용할 만큼 박스를 아래와 같이 지정합니다. 애플리케이션의 특성상 바탕색이나 배경이미지는 아래와 같이 인라인 스타일로 삽입하는 방식이 구현에 편리합니다. 아래와 같이 스타일을 지정합니다. 개인적으로 각 요소는 기본적으로 가지는 스타일 리셋을 하고 각각의 스타일을 지정하는 방식을 선호합니다. 플렉스 속성의 grow를 활용하면 쉽게 구현이 가능합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-col.. 앵귤러 directive - RouterLinkActive (활성화된 링크 표시하기) 앵귤러 라우터는 활성화된 링크를 표시해 주는 기능을 제공하는데요. 구현하기 1. 앵귤러라우터 추가하기 앵귤러 라이브러리 - Angular Router 앵귤러는 싱글페이지 애플리케이션으로 URL경로가 바뀌지 않는데요. 하지만 앱의 구조상 페이지 분리가 필요할 때도 있습니다. 앵귤러 라우팅은 이러한 기능을 담당하는 모듈로 사용법을 알아 jin-co.tistory.com ★ 모듈이 분리된 경우 라우터를 사용하는 모든 모듈에 라이터모듈을 추가해야 합니다. 2. 활성화된 메뉴표시하기 앵귤러라우터의 RouterLinkActive는 해당링크가 활성화되었을 때 부여된 값을 해당 요소에 클래스로 추가합니다. 해당 클래스에 스타일 추가하면 간단하게 활성화된 메뉴를 시각적으로 표시가 가능하겠죠. routerLinkActiv.. 앵귤러 서비스 (Service) 앵귤러의 서비스는 템플릿과 클래스 파일이 공유하는 클래스 파일로 중복코드를 줄이고 모든 컴포넌트가 상속관계에 상관없이 정보를 공유할 수 있게 해 줍니다. 생성하기 서비스 생성은 /app 하위에 폴더를 만들고 클래스 파일생성 또는 아래와 같이 앵귤러 CLI를 통해 생성가능합니다 (CLI 사용을 권장). ng genarate service service 애플리케이션 규모가 커지면 서비스도 여러 개를 가지기 때문에 서비스 폴더를 따로 생성하는 것을 권장합니다 (아래와 같이 services/ 라고 경로를 정하고 그 아래 파일을 생성하면 자동으로 폴더 생성됨). 아래 코드는 위 커맨드의 alias버전으로 services라는 폴더 하위에 서비스를 생성합니다. ng g s services/service 마지막으로 끝.. 앵귤러 directives - ngIf 템플릿의 구조를 변경하는 Structural directive의 하나로 한 요소에 하나의 다른 구조 디렉티브와 사용이 불가능합니다. 사용예시 1. If Name: {{i.name}} Pet Owner: {{i.petOwner}} Name: {{i.petName}} // ng-if1.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-if1', templateUrl: './ng-if1.component.html', styleUrls: ['./ng-if1.component.css'], }) export class NgIf1Component implements OnInit { users: { .. 앵귤러 directives - ngFor 템플릿의 구조를 변경하는 Structural directive의 하나로 한 요소에 하나의 다른 구조 디렉티브와 사용이 불가능합니다. 사용예시 1. 일반 for 문 ID: {{i}} First Name: {{ u.firstName }} Last Name: {{ u.lastName }} Age: {{ u.age }} // ngfor1.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ngfor1', templateUrl: './ngfor1.component.html', styleUrls: ['./ngfor1.component.css'], }) export class Ngfor1Component .. 이전 1 2 3 4 5 6 7 8 ··· 14 다음
