study2 만들기

패키지 만들 때 앞에 있는 거 지우지 말기...

↑ 날 것 그대로의 데이터

http://localhost:8080/lang/literal/exam6/test1

Spring Boot와 기본 패키지

Spring Boot가 클래스를 인식하는 기본 범위는 Spring Boot를 실행시키는 App 클래스 패키지(및 하위패키지)에 한정한다.

App이 인식하는 바운더리는 study 아래에 있는 것들까지임
study2는 인식 못 함

해결책
다른 패키지를 인식하는 방법
@ComponentScan()
애노테이션을 이용하여 패키지를 설정하라!

자동으로 바꿔줌

http://localhost:8080/test/m1

http://localhost:8080/lang/literal/exam6/test1

다른 패키지를 추가하고 싶은

package com.eomcs.study;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@SpringBootApplication
@ComponentScan("com.eomcs.study2")
public class App {

  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }

  @RequestMapping("/hello")
  String hello() {
    return "Hello, java-lang-boot!";
  }

}

@ComponentScan(value="com.eomcs.study2")
@ComponentScan(basePackages="com.eomcs.study2")

@ComponentScan(basePackages={"com.eomcs.study2", "com.eomcs.study"})

package com.eomcs.study;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@SpringBootApplication
@ComponentScan(basePackages={"com.eomcs.study2", "com.eomcs.study"})
public class App {

  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }

  @RequestMapping("/hello")
  String hello() {
    return "Hello, java-lang-boot!";
  }

}

버튼에 type을 지정해주지 않아서 submit이 되어버림
action을 설정하지 않으면 현재 URL로 요청함
기본이 submit 타입
버튼이 소속되어 있는 form 안에 있는 모든 입력값에 대해서 서버에 요청할 때 보낸다
form 태그에 action이라는 이름으로 설정된 주소로 요청한다
form에 action이라는 속성이 없으면 현재 URL

자바스크립트 - com.eomcs.web.ex01

web에 있는 스프링 부트 실행하기

script 태그에 선언된 자바스크립트의 사용 범위
http://localhost:8080/javascript/ex01/exam06.html

script에 선언된 변수나 함수는 그 다음 script에서 사용할 수 있다.
이 변수는 window 객체에 등록된다.
이 함수는 window 객체에 등록된다.

아래 script 태그를 실행하기 전에는 아래 태그에서 선언한 변수나 함수를 사용할 수 없다.

이전 script 태그에서 정의한 모든 변수와 함수를 그대로 사용할 수 있다.

console.log(v1);
변수 앞에 객체를 지정하지 않으면 window 객체에서 찾는다.

f1("안녕하세요!");
함수 앞에 객체를 지정하지 않으면 window 객체에서 찾는다.

호이스팅은 script 태그 안에 있는 변수와 함수에 대해서만

자바스크립트를 실행하기 전까지는 오류가 있는지 모른다!
http://localhost:8080/javascript/ex01/exam07.html

f1()을 호출하기 전에는 이 함수에 오류가 있는지 모른다!
자바스크립트는 소스를 직접 실행하는 인터프리팅 방식으로 동작한다.
그래서 소스 코드에 오류가 있다하더라도 실행하기 전까지는 모른다!

호출할 때에 비로소 f1()의 코드를 실행한다. 그리고 코드에 오류가 있음을 알게 된다.

리터럴(literal) - 코드에서 값을 표현하는 방법
http://localhost:8080/javascript/ex02/exam01.html

자바스크립트에서는 문자열을 표현할 때 싱글 쿼테이션, 더블 쿼테이션 둘 다 가능

값의 타입 - typeof 연산자
http://localhost:8080/javascript/ex02/exam02.html

typeof null → 타입 object
null도 object 타입임을 기억하라! undefined와 다르다!

typeof NaN → 타입 number

console.log(typeof ((a) => {console.log(a)})); // arrow function

자바스크립트는 대소문자를 구분한다.

http://localhost:8080/javascript/ex02/exam04.html

자바스크립트는 변수를 선언하지 않고 바로 사용할 수 있다.

반드시 첫 번째 문장에 "use strict";

// strict 모드에서는 변수를 선언하지 않고 사용하면 실행 오류가 발생한다!
v3 = 100; // 실행 오류!
console.log(v3);

JSF 자바서버 페이스

https://sweetalert2.github.io/

Chart.js

three.js

https://threejs.org/examples/#webgl_animation_keyframes

var v4 = "홍길동", 
    v5 = "임꺽정", 
    v6 = "유관순";

변수 선언은 항상 script 태그를 실행할 때 제일 먼저 실행된다.

변수의 값을 지정하기 전에는 undefined이다.

http://localhost:8080/javascript/ex02/exam08.html

변수 - window 객체와 변수 선언

node.js에는 window 객체가 없다

"use strict"
window 객체

"use strict"

window.v2 = "오호라!"; // ==> var v2 = "오호라!"; 
console.log(v2);
객체에 저장된 값을 꺼낼 때는 다음의 문법을 사용할 수 있다.
=> 객체.변수명
=> 객체["변수명"]
=> 객체['변수명']

대괄호를 사용하면 공백이나 특수문자를 포함하는 변수를 만들 수 있다.

http://localhost:8080/javascript/ex02/exam11-2.html

현재 블록에서 못찾으면 바깥 블록에서 찾는다.

let 변수는 그 변수를 선언한 블록에서 나가면 제거된다.

http://localhost:8080/javascript/ex02/exam12.html

자바스크립트에서 로컬 변수는 함수 안에 선언된 변수를 말한다.

exam13.html

let v3 = true; // 현재의 블록에서만 사용할 수 있는 로컬 변수이다.

함수 안에 있는 함수를 가리킬 때 closure

var로 선언했을 때는 함수 소속

함수가 호출될 때 시작돼서 함수가 종료되면 사라진다.

함수 안에서 바깥에 있는 변수 쓰고 싶으면 앞에 window. 붙이면 됨

배열 생성 단계

51-자바스크립트 / 6 페이지

변수 - 배열
http://localhost:8080/javascript/ex02/exam16.html

객체를 만들 때도 단계가 있다.

빈 객체 생성 ⇒ Object()로 기본 변수와 함수를 준비 ⇒ Array()를 실행하여 배열에 필요한 변수나 함수를 추가

new → 빈 객체 생성
Object() 호출 → 기본 변수, 함수 추가 → toString(), valueOf()
Array() 호출 → 배열 관련 변수, 함수 추가 → .length, push()
④ 최종적으로 만들어진 객체의 '주소'가 변수에 들어간다.

자바스크립트 객체 생성

51-자바스크립트 / 7 페이지

new 생성자();
new → 빈 객체 생성
생성자 위에 연결된 생성자들이 있음
증조부 생성자 호출
조부 생성자 호출
부모 생성자 호출
자신 생성자 호출
생성자가 실제 연결된 조상들이 있을 거다

생성자 상속 관계
제일 꼭대기에 Object() 있음
변수나 함수를 추가
new C();로 만들어진 객체는 new B();로 만들어진 객체의 변수들 함수들을 다 갖고 있음
이게 자바하고 조금 다름

new 보면 바로 떠올려야 됨
var xhr = new XMLHttpRequest();

모든 자바스크립트 객체는 Object() 추가한 변수와 함수를 무조건 보유하고 있다. 루트 생성자가 Object()
Object() ← root constructor

배열에 대한 상세정보
처음에 배열을 출력할 당시의 상황
화살표를 누르면 현재 배열에 값이

javascript mdn 검색

https://developer.mozilla.org/en-US/docs/Web/JavaScript

Built-in objects (내장 객체)

Array 들어가보기

Array.prototype.메소드명

prototype에 있는 거

객체를 다루는 function을 메소드라고 한다.
객체에 소속돼서 그 객체의 값을 다루는 function을 메소드라고 한다.
메소드 대신 function이라고 해도 틀린 건 아님. 함수는 맞으니까

특정 객체에 소속되지 않고 글로벌 function은 function이라고 함
객체에 소속돼서 그 객체를 위해서 사용하는 건 method라고 함

.length : 배열 크기
모든 배열은 length 라는 변수가 반드시 있다.
Array 라는 함수가 추가한 변수가 length

자바와 다른 점이 있음

자바와 달리 배열 인덱스의 유효 범위를 넘어가도 예외는 발생하지 않는다.
자바스크립트는 undefined 라고 나옴

자바에서 인덱스는 숫자
자바스크립트에서 인덱스는 key
자바에서 map이 그럼
key, value

자바에서는 인덱스는 반드시 숫자
자바스크립트에서는 인덱스는 단순 변수
자바스크립트에서 배열은 인덱스가 key
자바는 key가 아니라 진짜 번호

자바에서는 배열 개수를 명확하게 지정하지만
자바스크립트는 지정 안 함

변수 - 배열의 크기와 length
http://localhost:8080/javascript/ex02/exam17.html

중간에 인덱스를 건너 뛰고 값을 넣을 수 있다.

자바스크립트에서 인덱스가 key 라는 게 여기서 증명됨

자바의 배열처럼 연속된 거라면 0, 1, 2, 3, 4, 5, 6, 7 다 나왔어야 됨

자바스크립트에서는 인덱스는 key(변수)일 뿐이다.

객체 안에 변수가 없을 때는 undefined
객체 안에 그런 key가 존재하지 않을 경우 undefined
객체에 그런 항목이 없으면 undefined
자바스크립트에서 배열 객체에서도 하나의 변수처럼 다뤄지므로 undefined

arr["8"] // undefined
obj.["v1"] // undefined

겉으로는 배열처럼 보이지만 자바스크립트 객체
해당 이름으로 저장된 값이 없으면 undefined

console.log(window.v1); // undefined
console.log(v1); // v1 is not defined

객체에 변수가 있냐 없냐를 따질 때는 undefined
앞에 객체를 지정하면 undefined

script 태그에 변수가 선언되어 있지 않으면, is not undefined
script 태그에 변수는 있지만 값을 설정하지 않았으면, undefined
객체에 변수가 없으면, undefined

프로퍼티, 메소드 ← 퉁쳐서 프로퍼티 하고 한다.

프로퍼티 : 객체에 소속된 변수
메서드 : 객체에 소속된 함수

객체에 값이 할당되지 않았다 = undefined

어떤 함수들이 추가되었는지 리스트로 보여주고 있음
Array라는 생성자의 상위생성자가 누구인지 보여주고 있음

더 이상 생성자가 없음
이게 최종 상태

이 객체를 마지막으로 초기화시킨 생성자는 누구다? Array

var arr = new Array()
arr.push("aaa")
인덱스 자동 증가
push는 순서대로

인덱스를 직접 지정해서 값을 넣는 경우는 임의 번호 사용 가능
length는 가장 마지막 인덱스 + 1

편한 거 사용하면 됨

var arr = [];

var arr = ["aaa", "bbb", true, 100, new Object(), function() {}];

이런 식으로 생성을 많이 함

for (i in obj)
객체도 가능
반복문의 대상이 객체일 경우, i 변수에 저장되는 것은 객체에 저장된 프로퍼티 이름이다.
Object() 생성자가 추가한 프로퍼티는 꺼낼 수 없다.
객체 생성 후 추가한 프로퍼티는 반복문으로 꺼낼 수 있다.

for (v of arr)는 값

일반 객체는 for...of 반복문을 사용할 수 없다.

destructuring 문법을 사용하여 key와 value를 분해하여 받는다.

// destructuring 문법을 사용하여 key와 value를 분해하여 받는다.
for (var [key, value] of obj2) {
    console.log(key, "=", value);
}

배열 개수보다 적은 변수를 선언하면 그 변수 개수만큼만 분해해서 받는다.

객체는 변수들의 묶음이다.
변수나 함수를 갖고 있는 덩어리

객체 구조 분해는 중괄호

객체의 프로퍼티 값을 받을 때는 중괄호

나머지 값을 별도의 객체에 담아서 받는다

0개의 댓글