# 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

# cordova-plugin-camera


Native: tried calling Camera.getPicture, but the Camera plugin is not installed. vendor.js:58632

Install the Camera plugin: 'ionic cordova plugin add cordova-plugin-camera' vendor.js:58638
plugin_not_installed

"@ionic-native/camera": "^4.5.2",



C:\Users\CI\Desktop\IonicConvention>ionic cordova plugin add cordova-plugin-camera
> cordova plugin add cordova-plugin-camera --save
Unmet project requirements for latest version of cordova-plugin-camera:
    cordova (7.1.0 in project, >100 required)
Fetching highest version of cordova-plugin-camera that this project supports: 3.0.0 (latest is 4.0.0)
Installing "cordova-plugin-camera" for android

:\Users\CI\Desktop\IonicConvention>npm uninstall -save cordova-plugin-camera
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})




C:\Users\CI\Desktop\IonicConvention>ionic cordova plugin add cordova-plugin-camera

C:\Users\CI\Desktop\IonicConvention>ionic cordova run android


// cordova 7.1.0 에서는 cordova-plugin-camera 4.x 는 지원하지 않음. 3.x로 설치해줘야 함




저작자표시

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

memo) error  (486) 2020.01.07
Angular 명령어  (558) 2020.01.07
memo) Error  (526) 2020.01.06

# memo) Error



ANDROID_HOME=C:\Users\CI\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_121
No target specified and no devices found, deploying to emulator
Error: No emulator images (avds) found.
1. Download desired System Image by running: "C:\Users\CI\AppData\Local\Android\sdk\tools\android.bat" sdk
2. Create an AVD by running: "C:\Users\CI\AppData\Local\Android\sdk\tools\android.bat" avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver



// usb문제로 연결이 끊어진 상태

// chrome://inspect/#devices 여기서 연결된 디바이스 확인 가능

저작자표시

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

memo) error  (486) 2020.01.07
Angular 명령어  (558) 2020.01.07
cordova-plugin-camera  (909) 2020.01.06

+ Recent posts

티스토리툴바