전체 글

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 [컴포넌트명]→ 컴포넌트 ..

변수로 자바스크립트 이해하기자바스크립트에서 변수는, 단순히 값을 설정하고 사용하는 개념에 그치지 않는다.일반적으로 우리가 생각하는 변수는 int, string, date 등 데이터 타입들이 있다. 하지만 자바스크립트에서는 느슨한 데이터 타입이기에 모든 데이터 타입을 var로 지정할 수 있다. 따라서 문자열이나 숫자 뿐만 아니라, 객체나 함수도 변수로 지정한다.이처럼 자바스크립트에서는 변수가 단순히 값을 설정하고 사용하는 개념에 그치지 않는다.참조변수, 스코프, 클로저, 컨택스트, this 등도 자바스크립트를 제대로 이해하기 위한 핵심적인 개념을 담고 있기 때문에 반드시 이해하고 넘어가야 한다.변수 선언자바스크립트에서 변수는 선언하는 위치를 반드시 신경 써줘야 한다. 그 변수의 위치에 따라 의미하는 바가 ..

타입 스크립트 기본 개념 정리타입과 문자열let 선언자let 선언자가 나오게 된 이유? 호이스팅 문제 발생 때문(호이스팅 : 지역 스코프에 선언된 변수가 전역 스코프에 선언된 변수에 영향을 미치는 현상)호이스팅이 발생하는 예시var emotion="happy"; { var emotion="sad"; } console.log(emotion); 실행결과 sad 코드를 보면 emotion 변수가 2번 선언되어 있다.첫번째 emotion은 전역 스코프, 두번째 emotion은 지역 스코프에 선언되어있는 모습이다.전역에서 설정되어 있는 happy가 출력되어야 맞지만, 실행결과는 지역 스코프의 sad가 출력되는데 이것이 전형적인 호이스팅 문제다.이유 : 지역 스코프에 선언된 emotion이 동일한 이름을 가진 전역..

[앵귤러] 컴포넌트 사용하기컴포넌트 생성ng g c 컴포넌트명이렇게 생성하면 ts, html, css, spec.ts 총 4가지가 만들어짐만약 ts만 만들고 싶다면?ng g c 컴포넌트명 -it -is -spec false양방향 바인딩 [(ngModel)]을 사용할 때는 app.module.ts에 다가 import 추가import { FormsModule } from '@angular/forms'; imports: [ FormsModule ] 부모 컴포넌트에서 자식 컴포넌트로 데이터 보내기클래스 안에 자식으로 보낼 데이터를 입력msg = "i am a parent"; 템플릿(html)에 불러오는 자식 컴포넌트의 selector안에 데이터를 입력 이제 자식 컴포넌트에서 name이라는 이름으로 msg 데이터..

앵귤러는?모바일과 데스크탑을 위한 하나의 완성된 자바스크립트 프레임워크다.구글의 앵귤러 + 마이크로소프트의 타입스크립트서버측 프레임워크가 아닌, 클라이언트측 프레임워크다.jQuery나 React같은 자바스크립트 라이브러리가 아니다. (MVC와 같은 디자인 패턴 X)최근 추세는, 멀티페이지 (MPA) -> 싱글페이지로 이동 중 (SPA)Header/Footer 컴포넌트 생성 해보기ng generate component header –dry-runng g c header -dng g c header –spec false -dng g c footer –inline-template –spec false -dng g c footer -it –spec false -dng g c footer -it –inline-s..

객체, 클래스, 인스턴스의 차이객체(Object) : 소프트웨어 세계에 구현할 대상클래스(Class) : 이를 구현하기 위한 설계도인스턴스(Instance) : 소프트웨어 세계에 구현된 실체객체(Object)는 현실의 대상(Object)과 비슷해서 상태나 행동을 가지지만, 소프트웨어 관점에서는 그저 콘셉에 불과하다. 소프트웨어에서 객체를 구현하기 위해서는 콘셉 이상으로 많은 것들을 사고하여 구현해야 하므로, 이를 위한 설계도로 클래스(Class)를 작성한다.설계도를 바탕으로 객체를 소프트웨어에 실체화 하면, 그것이 인스턴스(Instance)가 되고, 이 과정을 인스턴스화(instantiation)라고 한다. 실체화된 인스턴스는 메모리에 할당된다.개념적으로 인스턴스는 객체에 포함된다고 볼 수 있다. 하지만..

우리는 블로그나 카페에서 내가 갖고 있는 파일을 업로드할 수 있다. Node.js에서도 이러한 파일 업로드를 만들어 실습해보자 express에서는 기본적으로 파일 업로드에 대해서 지원해주지 않는다. 따라서 이에 해당하는 모듈을 설치해야한다. multer라는 모듈은 우리가 파일 업로드를 할 수 있도록 도와준다. npm을 통해서 설치하자 12345//설치npm install multer --save //app_file.js에 작성var multer = require('multer');cs multer 모듈을 사용하기 위해 app_file.js에 위와 같이 require 문을 작성하도록 한다. 우리가 업로드할 파일을 저장할 uploads 폴더를 하나 만들고, multer로 해당 경로를 아래와 같이 app_fi..

이제 지금까지 배운 것을 통해서 Express 프레임워크를 통해 간단한 웹 애플리케이션을 만들어보자. 기존의 app.js에 추가하면 가독성이 떨어지므로, 프로젝트에 새로 app_file.js 파일을 만들어 진행하자. 이번 애플리케이션 실습을 통해 파일 시스템 모듈도 활용할 것이다. 데이터 값을 저장할 data 폴더, html로 나타낼 pug 파일을 저장할 views_file 폴더를 만들자. 이제 app_file.js를 작성해보도록 하자 1234567var express = require('express');var fs = require('fs'); // 파일 시스템 모듈 생성var app = express(); // 애플리케이션 객체 생성 app.listen(3000, function(){ console..

[백준 2292] 벌집 문제 출처 : https://www.acmicpc.net/problem/2292 문제 위의 그림과 같이 육각형으로 이루어진 벌집이 있다. 그림에서 보는 바와 같이 중앙의 방 1부터 시작해서 이웃하는 방에 돌아가면서 1씩 증가하는 번호를 주소로 매길 수 있다. 숫자 N이 주어졌을 때, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈 때 몇 개의 방을 지나가는지(시작과 끝을 포함하여)를 계산하는 프로그램을 작성하시오. 예를 들면, 13까지는 3개, 58까지는 5개를 지난다. 입력첫째 줄에 N(1 ≤ N ≤ 1,000,000,000)이 주어진다. 출력입력으로 주어진 방까지 최소 개수의 방을 지나서 갈 때 몇 개의 방을 지나는지 출력한다. 예제 입력 113cs 예제 출력 13..

지금까지 진행했던 방식은 get을 이용해 사용자가 데이터를 가져오는 방식이었다. get방식은 사용자의 접속에 의해 애플리케이션이 응답하고, 사용자가 정보를 가져오는 것을 말한다. 이때 쿼리 스트링으로 애플리케이션에 요청하여 정보를 가져오게 된다. 이처럼 get방식은 우리가 서버에 정보를 요청해서 가져오는 것을 말한다. POST 이번에는 post방식에 대해서 알아보자.post 방식은 사용자의 정보를 서버로 전송하는 것을 말한다. 예를 들면, 우리가 홈페이지에서 로그인을 할 때 아이디나 패스워드를 서버로 전송하는 과정이 필요하다. 이럴 때 사용하는 것이 바로 get 방식이 아닌 post방식이다. post 방식을 알아보기 위해 views폴더에 form.jade를 만들자 제목과 내용을 각각 text와 texta..