211226 [일요일] 초조해지지말자 (시작,매일꾸준히 올리겠습니다.)

[궁극적인 이유 코딩을 왜 하려고 하는가? ]

1. 나는 왜 코딩을 배우려고 하는가? 코딩을 배워서 웹 서비스를 만들어보고 싶다.

2. 웹 개발 프로젝트를 시작하라 - 최소한의 기능만 포함 EX ) 일기장 만들다던가 주식을 크롤링해서 보여준다던가

3.JAVA + 동적인 웹 페이지를 보여주는 자바스크립트를 공부하자

4. 미리 작성된 코드들을 활용하자 EX ) 부트스트랩 , BULMA + 자바스크립트를 추가하면 MBTI 사이트도 만들어 볼 수 있다

5. 막혔을 때 구글링을 하라 EX ) 에러 메시지를 구글 검색창에서 검색해본다

6. 취업하고 싶은 회사 공고를 본다 EX) 무슨 기술을 쓰는지 스프링을 쓰는지 본다.(난 자바 스프링 쪽으로 취업하고 싶다)

 

출처 : https://www.youtube.com/watch?v=erFhR4CO5Js 보고 정리해보았다. 

 

내가 생각하는 코딩 실력을 느는 방법 

1. 새벽에 코딩을 계속해보자 한글도 쓰다 보면 외워지듯이 코딩도 계속 치다 보면 외워진다.

 

 

[이번 주 TO DO LIST]

Java TCP(생각하고, 표현하고, 코딩하기)  

JavaScript 예습 하기 - 뉴 렉처  

MVC 패턴 정리하기 

스터디그룹 만들기 ( 열정적인 사람을 찾아내기 힘들다..(목숨 걸고 할 사람)..)

JAVA Servlet - 뉴 렉처 

 

 

[오늘 할 것]

 

뉴 렉처 자바스크립트 25강 ~ 30강 노드 공부 필기 정리해서 올리기

자바 TCP 데이터를 이동하라 ( 변수 VS 배열의 관계 )

자바 TCP 데이터를 이동하라 ( 실습 )

MVC 패턴 1,2 파악하기

22시 스터디 회의 - 노드 , MVC1,2에 대해서 

 

[문제 발견 / 접근 / 해결]

 

[오늘의 키워드]

HTML의 Section 이란? HTML 문서에 포함된 독립적인 세션

배열은 객체로 취급한다. 연속적인 메모리 구조이다.

배열은 객체 이므로 new를 통해 객체 생성 int를 담을 수 있는 메모리 공간 3개 생성

배열의 단점은? 서로 다른 데이터 타입 저장 불가 내가 생각하는 해결방법은? 클래스 또는 컬렉션으로?

2차원 배열은 행과 열로 구성된다. 행을 우선적으로 기억공간에 만들어진다.

가변 길이 각 층을 다르게 구성할 수 있다.

2차원 배열 출력 또는 삽입은 이중 for문 이용한다. 열은 각 행 개수만큼 반복문을 돌린다.

노드는 HTML 문서에서 HTML DOM 노드에 접근하는 방법이 있다. 즉 노드를 선택해야 한다.

 

1. getElementsByTagName()

2. 노드 간의 관계를 이용하여 접근한다.

 

queryselector 중요하다. 단 하나의 엘리먼트(태그의 요소)를 찾는 경우 사용한다.

 

노드들의 계보 

DOM 요소 변경 document.getElementById("name").innerHTML="값";

노드와 엘리먼트의 차이점

cildren 과 childNodes 차이점

Node 의 종류 

객체들의 타입 종류

DOM 이란?

노드란?

노드는 추상인터페이스이다.

MVC패턴2  VIEW JSP 영역 눈에 보이는것  JSP란? HTML문서내에서 JAVA언어를 사용한다.

자바언어는 HTML 안에서 <% 자바소스 %> 로 쓰인다.

 

Controller 제어 영역에서는 서블릿을 쓴다.

 

model 영역은 데이터관련 DAO , DTO 등이 쓰인다.

 

라이브러리 와 프레임워크의 차이점 

 

 

 

[오늘의 계획]

1. 자바 배열  

2. JavaScript 노드

3. 점심은 간단하게 에너지바 

4. 카페 가서 공부하기 (~19시)

5. 22시 스터디 회의 스터디 회의 - 노드 , MVC1,2에 대해서 

6. 27일 새벽 코딩 

 

[오늘의 공부]

필기 내용 + 공부 과정 올릴 예정 

첫 장인데.. 커피마시다가 흘렸습니다 이해좀요..

배열의 주소를 x참조변수에 대입하면 같은 저장공간을 가리키게 된다. *(매우중요)

 

package array;

public class TPC04 {
	
	public static void main(String[] args) {
		
		// 4. 데이터를 이동하라 ! (변수 vs 배열의 관계)
		int a , b , c , d , e, f, g, h, i;
		a = 10;
		b = 20;
		c = 30;
		d = 40;
		e = 50;
		f = 60;
		// a+b+c=? 메서드 처리 -> hap()
		
		// 다른 클래스로 이동하려면 합리적으로 어떻게 해야할가 ?
		hap(a,b,c); // 메소드 호출 
		hap(a,b,c,d,e,f); // 메소드 호출 
		
		// 담을 바구니가 필요 
		int[] arr = arr = new int[3]; // 
		
		arr[0] = a;
		arr[1] = b;
		arr[2] = c;
		
		System.out.println(arr.length); // 배열의 길이 
	
		hap1(arr); // 주소를 넘긴다. 
	}
	
	// 상당히 많은 자료형을 넘겨줘야한다... 효율적인 방법이 없을까 ? 
	
	public static void hap(int a,int b,int c) {
		int sum = a + b + c;
		System.out.println(sum); // 60
		
	}
	public static void hap(int a,int b,int c,int d,int e,int f) {
		int sum = a + b + c;
		System.out.println(sum); // 60
	}
	
	// arr 배열을 받아서 가져올수있다.
	public static void hap1(int[] arr) {
		// 반복문 활용 - for , while문 
		int sum = 0;
		for(int i = 0; i < arr.length; i++) {
			sum += arr[i];
		}
		System.out.println("합계 : " + sum); // 60
	}
	// 위에 있는 메소드는 복잡해 보이고 , 아래 메소드는 간결해 보인다.
	// 배열을 만들어서 이동시키는게 배열의 궁국적인 장점이다 !! 
	
}

 

 

package array;

public class TPC05 {
	
	public static void main(String[] args) {
		
		int[] a = new int[3]; // 3개 만듬 int 여러개인 구조
		
		a[0] = 10;
		a[1] = 20;
		a[2] = 30;
		int sum = 0;
		
		// 반복문을 이용해서 값을 구할수 있다.
		for(int i = 0; i < a.length; i++) {
			sum+= a[i];
		}
		System.out.println(sum);
	
		// 총 9개의 정수형 변수를 만들어라 -> 2차원 구조
		// 행과열을 가지고 있다. 3행3열의 총 9개 원소를 가지고 있다.
		
		int[][] b = new int[3][3];
		
		// 1동 선택해서 3층 
		b[0][0] = 1;
		b[0][1] = 2;
		b[0][2] = 3;
		
		// 2동 선택해서 3층 
		b[1][0] = 1;
		b[1][1] = 2;
		b[1][2] = 3;
		
		// 2동 선택해서 3층 
		b[2][0] = 1;
		b[2][1] = 2;
		b[2][2] = 3;

		// 출력
		for(int i = 0; i < b.length; i++	) {
			for(int j = 0; j < b[i].length; j++ ) { // 각동의 길이만큼 돌리면 된다. 
				System.out.print(b[i][j] + "\t");
			}
			System.out.println();
		}
		// 1	2	3	
		// 1	2	3	
		// 1	2	3
		
		// 가변 길이 배열 (길이가 다른 배열)
		// *
		// **
		// ***
		// **** 출력해보자
		int[][] arr = new int[4][];
		arr[0] = new int[1];
		arr[1] = new int[2];
		arr[2] = new int[3];
		arr[3] = new int[4];
		
		for(int i = 0; i < arr.length; i++) {
			for(int j = 0; j < arr[i].length; j++) {
				arr[i][j] = '*';
				System.out.print((char)arr[i][j]);
			}
			System.out.println();	
		}
	}
}

 

자바스크립트

 

 

 

 

 

 

오늘의 핵심 키워드.. 노드란 무엇인가?

 

노드는 HTML 문서에서 HTML DOM 노드에 접근하는 방법이 있다. 즉 노드를 선택해야 한다.

공통분모들을 기능적으로 하나로 추상화 집중화된 영역으로 사용한다. 

 

1. getElementsByTagName()

2. 노드 간의 관계를 이용하여 접근한다.

 

queryselector 중요하다. 단 하나의 엘리먼트(태그의 요소)를 찾는 경우 사용한다.

 

 

 

 

 

 

[질문할 것] 

출력 결과

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="javascript1-dom.js"></script>
  </head>
  <body>
    <section id="section5">
      <h1>EX5 : 엘리먼트 노드의 속성 변경</h1>
      <div>
        <input class="src-input" list="img-list" />
        <datalist id="img-list">
          <option value="img1.jpg">img1</option>
          <option value="img2.jpg">img2</option>
          <option value="img3.jpg">img3</option>
        </datalist>
        <select calss="img-select">
          <option value="img1.jpg">img1</option>
          <option value="img2.jpg">img2</option>
          <option value="img3.jpg">img3</option>
        </select>
        <input class="change-button" type="button" value="변경하기" />
      </div>
      <div>
        <img class="img" src="images/img1.jpg" />
      </div>
    </section>
    <hr />

    <section id="section4">
      <h1>EX4 : childeNodes를 이용한 노드 선택</h1>
      <div class="box">
        <input />
        <input />
      </div>
    </section>
    <hr />

    <section id="section3">
      <h1>EX3 : Selectors API Level1</h1>
      <div>
        <input name="x" type="text" value="0" dir="rt1" />
        <!-- dir="rt1" : 오른쪽부터 쓰이도록 함-->
        +
        <input class="txt-y" type="text" value="0" dir="rt1" />
        <!--기본값 0-->
        <input class="btn-add" type="button" value="=" />
        <input class="txt-sum" type="text" value="0" readonly dir="rt1" />
      </div>
    </section>
    <hr />

    <section id="section2">
      <h1>EX2 : 엘리먼트 선택방법 개선하기</h1>
      <div>
        <input class="txt-x" type="text" value="0" dir="rt1" />
        <!-- dir="rt1" : 오른쪽부터 쓰이도록 함-->
        +
        <input class="txt-y" type="text" value="0" dir="rt1" />

        <!--기본값 0-->
        <input class="btn-add" type="button" value="=" />
        <input class="txt-sum" type="text" value="0" readonly dir="rt1" />
      </div>
    </section>
    <hr />

    <section>
      <h1>EX1 : 계산기 프로그램</h1>
      <div>
        <input id="txt-x" type="text" value="0" dir="rt1" />
        <!-- dir="rt1" : 오른쪽부터 쓰이도록 함-->
        +
        <input id="txt-y" type="text" value="0" dir="rt1" />

        <!--기본값 0-->
        <input id="btn-add" type="button" value="=" />
        <input id="txt-sum" type="text" value="0" readonly dir="rt1" />
      </div>
    </section>
    <hr />
  </body>
</html>

 

// EX5 : 엘리먼트 노드의 속성 변경
window.addEventListener("load", function () {
  var section = document.querySelector("#section5"); // 아이디 #으로 찾아간다.
  var srcInput = section.querySelector(".src-input"); // src를 입력받기 위한 input
  var imgSelect = section.querySelector(".img-select"); // src를 입력받기 위한 input
  var changeButton = section.querySelector(".change-button"); // src를 입력받기 위한 input
  var img = section.querySelector(".img"); // src를 입력받기 위한 input

  // 버튼클릭시
  changeButton.onclick = function () {
    img.src = "images/" + srcInput.value; // 경로입력을 받아줘야함
    //img.src = "images/"+imgSelect.value;
  };
});

// EX4 : childeNodes를 이용한 노드 선택
window.addEventListener("load", function () {
  var section4 = document.querySelector("#section4"); // 아이디 #으로 찾아간다.
  var box = section4.querySelector(".box"); // class는 . 으로 찾아간다.

  // 계보를 이용하여 접근해보기
  //var input1 = box.childNodes[0]; // childNodes 자식들 가지고있는 0번째 자식
  //var input2 = box.childNodes[1]; // 2번째 자식

  // 빈공간
  var input1 = box.children[0];
  var input1 = box.children[0];

  // 페이지가 열리자마자 첫번째 박스 hello , 두번째 박스 okay
  input1.value = "hello";
  input2.value = "okay";
});

// EX3 : Selectors API Level1. (query)
window.addEventListener("load", function () {
  var section3 = document.getElementById("section3"); // 아이디 찾기

  var txtX = section3.querySelector("input[name='x']"); // input 타입에 name 속성 값이 x
  // 검색하는 이름이 하나이면 queryselector
  // querySelector(css selector)
  // id 검색 # , class 검색 .
  // name 검색 타입[태그명='값']
  var txtY = section3.querySelector(".txt-y");
  var btnAdd = section3.querySelector(".btn-add");
  var txtSum = section3.querySelector(".txt-sum");

  btnAdd.onclick = function () {
    var x = parseInt(txtX.value);
    var y = parseInt(txtY.value);
    txtSum.value = x + y;
  };
});

// EX2 : 계산기 프로그램
window.addEventListener("load", function () {
  var txtX = document.getElementById("txt-x");
  var txtY = document.getElementById("txt-y");
  var btnAdd = document.getElementById("btn-add");
  var txtSum = document.getElementById("txt-sum");

  btnAdd.onclick = function () {
    var x = parseInt(txtX.value);
    var y = parseInt(txtY.value);
    txtSum.value = x + y;
  };
});

/*
  var inputs = section2.getElementsByTagName("input"); // input를 찾음
 
  단점 어느 클래스인지 모른다.
  var txtX = inputs[0];
  var txtY = inputs[1];
  var btnAdd = inputs[2];
  var txtSum = inputs[3];
  */
// Elements : 배열 Element : 배열아님
window.addEventListener("load", function () {
  var txtX = section2.getElementsByClassName("txt-x")[0]; // 이 범주 세션안에서만 이름을 찾는다.
  var txtY = section2.getElementsByClassName("txt-y")[0];
  var btnAdd = section2.getElementsByClassName("btn-add")[0];
  var txtSum = section2.getElementsByClassName("txt-sum")[0];
  // jquery select 기법

  btnAdd.onclick = function () {
    var x = parseInt(txtX.value);
    var y = parseInt(txtY.value);

    txtSum.value = x + y;
  };
});

// EX1 : 계산기 프로그램
window.addEventListener("load", function () {
  var txtX = document.getElementById("txt-x");
  var txtY = document.getElementById("txt-y");
  var btnAdd = document.getElementById("btn-add");
  var txtSum = document.getElementById("txt-sum");

  btnAdd.onclick = function () {
    var x = parseInt(txtX.value);
    var y = parseInt(txtY.value);

    txtSum.value = x + y;
  };
});

 

MVC패턴2

 

MVC 참고 사이트 출처

https://hsp1116.tistory.com/9

JSP 모델1과 모델2, 그리고 MVC 패턴

 

https://chrismare.tistory.com/entry/MVC-%ED%8C%A8%ED%84%B4Model1-Model2

MVC 패턴(Model1, Model2)

 

 

서블릿이란 ?

 

https://mangkyu.tistory.com/14

[JSP] 서블릿(Servlet)이란?

 

 

질문할 것

 

 

 

반성 

오늘부터 꾸준히 매일 올리겠습니다.