본투코드

모듈은 쉽게 정의하면 객체이다. 앵귤러JS는 이를 통해 동적인 프로그래밍이 가능하다. * ng-app - AngularJS 애플리케이션의 초기 설정 HTML 코드에서 지시자 ng-app을 통해 모듈을 참조할 수 있다. 예시 코드에서 보면 가장 상위에 있는 div태그에 ng-app 지시자를 통해 invoice1 모듈을 참조하는걸 볼 수 있다. * ng-controller - AngularJS에서 데이터를 제어하기 위해 사용 간단하게 말하면 js 파일에서 mvc 패턴을 구현 * ng-model - 사용자가 입력 또는 선택한 값을 제어 , 과 같이 사용자가 값을 입력하는 태그들에 ng-model 지시자를 넣으면 입력된 값을 동적으로 제어할 수 있다. 예시 코드에서 보면 에서 입력된 값 qty, cost가 in..

참고 강의 https://www.inflearn.com/course/Angular/lecture/20483?tab=curriculum&speed=2 Angular(2+) Front에서 Back까지 - Nest js를 알려면 Angular 모듈을 알아야한다! - 인프런 | 학습 페이지 지식을 나누면 반드시 나에게 돌아옵니다. 인프런을 통해 나의 지식에 가치를 부여하세요.... www.inflearn.com 앵귤러js는 객체지향언어처럼 모듈 기능을 지원한다. 기본적으로 import되는 앵귤러의 core를 살펴보면 여러가지 다양한 객체(?)들이 export되고 있는 걸 볼 수 있다. 기본적으로 앵귤러는 app.module이 컴포넌트와 모듈들을 관리한다. 예시로 임포트 되어 있는 LayoutModule을 보자 ..

기본 index.html이 웰컴 페이지로 설정되어 있다. main.ts -> app.module.ts 실행 -> app.module에 등록 되어 있는 컴포넌트 app.component.ts 실행 -> app.component.ts 안에 있는 selector, templateUrl, styleUrls 3가지의 정보를 토대로 html, css 실행 AppModule 호출 등록되어 있는 모듈들 AppComponent 호출 AppComponent 객체를 @Component를 통해 모듈로 등록 selector : 태그 이름 templateUrl : html 경로 styleUrls : css 경로 app.component.html을 들어가보면 이렇게 구성되어 있다. app.module.ts에 모듈로 등록되어 있는 ..

a(); var a = function() { }; - 실행 불가 (a is not a function * a는 함수로 사용이 가능하지만 본질은 변수이기 때문에 선언 이후에 사용을 해야한다 a(); function a() {} - 실행 가능 * a는 함수로 선언이 됬기 때문에 어디서든 호출이 가능하다

으로 데이터를 전달하는 방법은 2가지가 있다 첫번째 방법 (, 활용) 1. 에 action을 지정 2. [type='submit']에 inline으로 onclick = "return 함수();" 지정 *함수()의 결과를 true 또는 false로 받고 true면 submit 실행, false면 아무 행동도 하지 않고 현재 페이지에 머뭄 3. onclick에서 true를 리턴하면 이 결과를 이 가지고 action에 지정된 url로 이동 두번째 방법 (를 쓰지 않고 submit() 함수 활용) 1. 에 action, method 지정하지 않고 대신 id값을 지정 2. [type='submit'] 대신 [type='button']을 지정 3. [type='button']에 onclick = "return 함수..

modal element가 의 상단에 있으면 먼저 공간을 점유해서 다른 element들에게 영향을 주기 때문에 일반적으로 끝에 위치시킨다 modal 위에서 content가 동작하기 때문에 가장 밑에 있으면 다른 element에 끼어서 움직이지 않는다 그러므로 content는 z-index를 통해 가장 위에 위치시켜야하고 나머지 element는 그 아래 위치한다

자바스크립트 함수를 inline에서 호출을 하면 onload 또는 jQuery의 ready 안의 함수에는 접근이 불가하다 inline 호출 함수에서 매개변수를 주지 않으면 내에서 this는 window를 가리키기 때문에 두가지 방식으로 사용할 수 있다 1. this.event.target을 이용해 window에 발생한 event를 타겟해서 사용 2. 매개변수를 주어 this에 element를 담아 보내준다

window는 페이지 전지역을 가리킨다 즉 window.addEventListener는 페이지 전체에서 이벤트가 발생했을 때 () 안의 명령을 실행시킨다 이 때문에 가 안에 있다면 필수적으로 명시해 안에 있는 객체에 접근할 수 있도록 해야한다 *또는 에 다이렉트로 명시도 가능 window.addEventListener에 페이지를 로드했을 때 실행이 되는 함수를 등록해놓고 그 안에 원하는 이벤트 핸들러를 등록해야 페이지 안의 모든 변수, 객체들에 접근이 가능하다 페이지를 로드하는 핸들러 페이지 로드 함수() { 버튼의 아이디를 받아와 변수와 버튼을 연결 버튼을 가리키는 핸들러 생성 } 버튼 함수() { 버튼 벨류 변경 명령어 }

-을 getElementById, querySelector로 선택해 변수 btn에 담아놓은 상황을 가정한다 -자바스크립트는 내부에 위 사진과 같은 이벤트 핸들러 함수들을 가지고 있고 이벤트에 등록해 놓은 함수의 파라미터에 뿌려준다 *파라미터에 이벤트 핸들러 함수 전체가 들어 있기 때문에 모두 사용 가능하다 ex) 파라미터.target을 a라는 변수에 담고 alert(a.id);를 실행하면 id 값 btn이 출력된다 유저는 위 사진의 함수가 동작하는 상황이 발생했을 때 2가지 방법으로 유저가 지정한 함수를 실행하도록 할 수 있다 1. btn.addEventListener("이벤트 핸들러 함수", 실행하고 싶은 유저 함수); *지정한 변수에 이벤트 핸들러 함수가 동작했을 때 실행하고 싶은 유저 함수를 실행하..