전체 글

[백준 1932] 숫자 삼각형 문제 출처 : https://www.acmicpc.net/problem/1932문제 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 위 그림은 크기가 5인 숫자 삼각형의 한 모습이다.맨 위층 7부터 시작해서 아래에 있는 수 중 하나를 선택하여 아래층으로 내려올 때, 이제까지 선택된 수의 합이 최대가 되는 경로를 구하는 프로그램을 작성하라. 아래층에 있는 수는 현재 층에서 선택된 수의 대각선 왼쪽 또는 대각선 오른쪽에 있는 것 중에서만 선택할 수 있다.삼각형의 크기는 1 이상 500 이하이다. 삼각형을 이루고 있는 각 숫자는 모두 정수이며, 범위는 0 이상 9999 이하이다.입력첫째 줄에 삼각형의 크기 n(1 ≤ n ≤ 500)이 주어지고, 둘째 줄부터 n+1줄까지 숫자..

[백준 11441] 합 구하기 문제 출처 : https://www.acmicpc.net/problem/11441 문제N개의 수 A1, A2, ..., AN이 입력으로 주어진다. 총 M개의 구간 i, j가 주어졌을 때, i번째 수부터 j번째 수까지 합을 구하는 프로그램을 작성하시오. 입력첫째 줄에 수의 개수 N이 주어진다. (1 ≤ N ≤ 100,000) 둘째 줄에는 A1, A2, ..., AN이 주어진다. (-1,000 ≤ Ai ≤ 1,000) 셋째 줄에는 구간의 개수 M이 주어진다. (1 ≤ M ≤ 100,000) 넷째 줄부터 M개의 줄에는 각 구간을 나타내는 i와 j가 주어진다. (1 ≤ i ≤ j ≤ N) 출력총 M개의 줄에 걸쳐 입력으로 주어진 구간의 합을 출력한다. 예제 입력 1234567851..

앵귤러 튜토리얼 - tour-of-heroes 만들기 (5)이어서, 오늘은 서비스에 대해서 알아보고자 한다.서비스가 필요한 이유는 무엇일까?현재 HeroesComponent는 가짜 데이터를 받아 표시하고 있다. 컴포넌트는 고의적으로 가짜 데이터를 표시하면 안되며, 데이터를 직접적으로 가져오거나 저장해서는 안된다.컴포넌트는 데이터를 표현하고, 액세스를 서비스에 위임하는데 집중해야한다.쉽게 말하면, 서비스는 여러 컴포넌트에서 필요로 하는 기능을 묶은 클래스다. 즉 앵귤러 사이트에서 사용되는 특정한 기능들을 서비스로 생성한 후, 해당 기능이 요구되는 컴포넌트는 이 서비스로 불러와서 사용할 수 있다.따라서, 코드가 중복되는 것을 막아주며 코드 관리의 편의성이 증가해 프로그램의 효율성을 높일 수 있는 장점이 있다..

앵귤러 튜토리얼 - tour-of-heroes 만들기 (4)이번 시간에는 세부 구성 요소를 꾸며보려고 한다.HeroDetailCompnent를 만들어보도록 하자ng generate component hero-detail app.module을 확인하면, 자동적으로 선언된 hero-detail 컴포넌트를 확인할 수 있다. (지난시간에 배운 부분)이제 hero-detail 컴포넌트에 세부사항을 옮길 것이다.기존의 heroes.component.html에서 세부사항에 해당했던 코드를 잘라내어 hero-detail.component.html으로 옮기자.이제 참조하는 형식이 변경되었기 때문에, 기존 코드의 selectedHero를 hero로 다시 모두 변경해주어야 한다. 따라서 html 템플릿 코드는 다음과 같다...

앵귤러 튜토리얼 - tour-of-heroes 만들기 (3)저번 시간에는 컴포넌트를 활용해 문자열 형태의 영웅 클래스를 만들어 출력하는 것까지 해보았다. 이제, 영웅의 수를 늘려볼 차례다. 영웅의 수가 늘어난다면 지금과 같은 형태로는 html에서 모두 나타낼 수가 없다. 이제 앵귤러의 중요한 기능 중 하나인 *ngFor를 이용해 볼 것이다.임의로 영웅들을 미리 만들어놓은 배열을 만들어보자.src/app에 ‘mock-heroes.ts’라는 이름으로 파일을 만든 후, 다음과 같이 코드를 작성해보자.import { Hero } from './hero'; export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' },..

앵귤러 튜토리얼 - tour-of-heroes 만들기 (2)이제 영웅 구성 요소들을 만들어보자ng g(generate) c(component) heroes CLI app에 heroes라는 새로운 폴더가 생성된 것을 확인할 수 있다.heroes.component.ts부터 살펴보자import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit { constructor() { } ngOnIni..

앵귤러 튜토리얼 - tour-of-heroes 만들기 (1)앵귤러 CLI install하기npm install -g @angular/cli 새로운 애플리케이션 만들기ng new angular-tour-of-heroes 해당 애플리케이션 접속cd angular-tour-of-heroes ng serve --open ng serve를 하면, http://localhost:4200/ 에서 내 브라우저를 보여준다.자신이 사용하는 코드 편집기(VScode 등)으로 만든 애플리케이션 폴더를 열고 src/app를 살펴보자.이 파일 중에 3가지로 분리되어 있는 AppComponent 쉘이 구현되어 있는 것을 찾을 수 있다.app.component.ts : 타입스크립트로 작성된 구성 요소 클래스 코드app.compone..

Angular는 단일 페이지 웹 애플리케이션2018.02.13 배운 내용Angular는 자바스크립트로 만든 클라이언트 MVC 프레임워크로, 단일 페이지 웹 애플리케이션이다.따라서, JSP나 HTML 등 에서 하이퍼링크를 통해 여러 페이지를 옮겨다니는 것과는 달리, 오직 ‘하나’의 페이지에서 모든 걸 보여주도록 만들어 주는 것이 Angular라고 말할 수 있다.그렇기 때문에 JPG 사진에 하이퍼링크를 넣어 이를 클릭하면, 다른 페이지를 보여주도록 만드는 것은 Angular에서 구현이 되지 않았던 것이다. 이에 대한 해결책은 ngIf나 ngFor 등 Angular가 가지고 있는 기능들을 더 공부해서 알아봐야 할 것 같다.이러한 기능들은, 단일 페이지 내에서 내가 보길 원하는 것들을 설정할 수 있도록 도와주며..

Angular 개발 툴 및 모듈 설명CLI를 통해 파일을 생성하고, 여러가지 구성 요소들을 살펴보자.가장 중요한 것은, src에 위치한 ‘angular-cli-json’이 곳은 앵귤러 CLI에서 사용되는 앵귤러 프로그램에 대해 기술하는곳이다.Index.html – 앱루트라는 태그만 보일 뿐, 따로 스타일 등 태그가 보이지 않는다. 하지만 cli가 자바스크립트나 css파일을 웹팩을 통해 번들링해서 서버를돌릴 때 동적으로 추가시켜준다.Main.ts 파일이 시작 지점이다.Main.ts에서 부트스트랩 할 모듈을 지정해야 하는데 이게 루트모듈. 이건 일반적으로 app.module.ts가 된다. 이 곳에서 일반적으로 부트스트랩할컴포넌트를 지정하고, 우리가 사용할 다양한 컴포넌트들을 import를한다.Module 알..

Angular CLI를 통한 프로젝트 시작하기CLI(커맨드라인 인터페이스) → 기본 구조, 컴포넌트 생성, 빌드, 유닛테스트, 개발서버, 배포관리* CLI 설치 : npminstall –g @angular/cli(이미 rc버전이 설치되어 있을 경우 → npm install –g @angular/cli@latest)* 프로젝트 생성 : ng new ‘프로젝트명’생성과 동시에, 모든 의존성 라이브러리가 설치된다.* 개발 서버 실행 : ngserveWebpack 빌드과정이 끝나면 http://localhost:4200으로 접속하여 개발 서버를 확인할 수 있다.CLI에서는 컴포넌트, 디렉티브, 서비스, 파이프의 생성이 가능컴포넌트 생성 : ng generate(=g) component [컴포넌트명]→ 컴포넌트 ..