# Angluar 명령어



Install the Angular CLI


Angular CLI를 아직 설치 하지 않은 경우 설치

npm install -g @angular/cli



Create a new application

CLI 명령을 이용하여 'test' 라는 이름의 새 프로젝트 만들기

ng new test



Serve the application

프로젝트 디렉토리로 이동하여 응용 프로그램 시작하기

cd test
ng serve --open

이 ng serve 명령은 응용 프로그램을 빌드하고, 개발 서버를 시작하고, 소스 파일을 감시하고, 해당 파일을 변경할 때 응용 프로그램을 다시 작성합니다.
--open 플래그는 브라우저를 엽니다 http://localhost:4200/



Create the heroes component

CLI를 사용하여 'heroes' 라는 이름의 새 구성 요소(component) 생성

ng generate component heroes

CLI는 src/app/heroes/ 라는 경로에 새 폴더를 만들고 HeroesComponent 의 세 파일을 생성합니다. 



@Component 는 Angular metadata를 지정하는 decorator 함수입니다.

CLI는 세 가지 metadata 속성을 생성합니다.
  1.  selector - component의 CSS 요소 선택자
  2.  templateUrl - component의 templet file 위치
  3.  styleUrls - component의 비공개 CSS style의 위치



저작자표시

'Front-end dev > Angular || Ionic' 카테고리의 다른 글

memo) error  (486) 2020.01.07
cordova-plugin-camera  (909) 2020.01.06
memo) Error  (526) 2020.01.06

# CSS 말줄임



1. 한줄

브라우저 지원 IE7 ~ , Chrome, safari, firefox

.text {
        white-space:nowrap;         //줄바꿈이 되지 않게 처리
        overflow:hidden;            //넘치는 글자를 잘라줌
        text-overflow:ellipsis;     //... 처리
      }

- 이렇게 적용해도 안되는 경우에는 width 값을 적용해주어야한다.


2. 두줄

브라우저 지원 Chrome, safari    // IE, firefox 는 지원하지 않음

.text {
        font-size:1em;                    //폰트 사이즈 지정
        overflow:hidden;                  //넘치는 글자를 잘라줌
        text-overflow:ellipsis;           //... 처리
        line-height:1.5;                  //줄 높이를 설정
        height:3em;                       //높이 설정
        word-wrap:break-word;             //긴단어를 끊어서 줄바꿈하기
        display:-webkit-box;              //flex box 형대로 바꾸줌
        -webkit-line-clamp:2;             //보여줄 줄의 갯수
        -webgit-box-orient:vertical;      // flex box의 방향 설정
      }



저작자표시

'Front-end dev > HTML || CSS' 카테고리의 다른 글

box-shadow  (439) 2020.07.08
Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03

# [Node.js] listen EADDRINUSE Error


node.js를 사용하다보면 
1
2
3
4
events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: listen EADDRINUSE :::3000


"C:\Program Files\JetBrains\WebStorm 2017.3\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run server-start --scripts-prepend-node-path=auto
> IonicConvention@0.0.1 server-start C:\Users\CI\Desktop\IonicConvention
> nodemon ./server/server.js
[nodemon] 1.13.3
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./server/server.js`
[nodemon] app crashed - waiting for file changes before starting...
events.js:183
      throw er; // Unhandled 'error' event
      ^
Error: listen EADDRINUSE :::3000
    at Object._errnoException (util.js:1024:11)
    at _exceptionWithHostPort (util.js:1046:20)
    at Server.setupListenHandle [as _listen2] (net.js:1351:14)
    at listenInCluster (net.js:1392:12)
    at Server.listen (net.js:1476:7)
    at Object.<anonymous> (C:\Users\CI\Desktop\IonicConvention\server\server.js:40:8)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)



위와 같은 EADDRINUSE 에러를 마주하게 되는 경우가 종종 생기게 된다.
이는 해당 포트(위의 예시에서는 3000번)를 사용하고 있는 다른 프로세스가 이미 존재하기 때문에 뜨는 에러이다
그럴 때는, 이전의 프로세스를 종료하면 되는데 cmd 창을 열어 
1
taskkill /F /IM node.exe


라고 입력한다. 프로세스가 종료되면
'성공: 프로세스 "node.exe"(PID ---)이(가) 종료되었습니다.' 라고 뜨며,
원래 실행하려던 프로그램을 다시 실행해보면 정상적으로 동작하는 것을 확인할 수 있다.

위 명령어로 다른 프로세스도 강제로 종료할 수가 있는데,
/F는 강제종료, /IM은 이미지 이름을 의미한다.

인터넷 익스플로러를 종료하고 싶다면,
아래와 같이 입력하면 된다.

1
taskkill /F /IM iexplore.exe



저작자표시

'Front-end dev > Etc.' 카테고리의 다른 글

codepen 불러오기  (587) 2020.07.08
vscode와 Git 연동하기  (530) 2020.01.17
모델-뷰-컨트롤러(Model-View-Controller, MVC)  (580) 2020.01.07
Front-end 로드맵(v.2020)  (887) 2020.01.03
Front-end 로드맵(v.2018)  (518) 2018.03.29

+ Recent posts

티스토리툴바