KDT 9주차 회고(230427~230503)

🎯 목표

💡 나는 최고의 프로그래머당!
💡 자바의 정석 많이 쉬었으니까 열심히 읽기
👊 빡공!

 

🖋️ 수업 내용

※ 요약 주의

📆 230427

• 🎈웹 프로그래밍(프엔)
  • CSS
    • font-family: 브라우저가 해당 폰트를 지원하지 않는 경우를 대비한 대체 글꼴
    • letter-spacing: 자간 조절
    • line-height: 줄간격 조절
    • text-decoration: 밑줄처럼 데코를 줄 수 있음
    • text-indent: 들여쓰기 조절
    • text-shadow: 텍스트의 그림자 지정. x y blur color 순서로 값을 지정해야함
    • direction: 텍스트의 입력방향을 지정 rtl(right to left, 오른쪽에서 왼쪽으로), ltr(left to right, 왼쪽에서 오른쪽으로)
    • text-transform: captialize(단어의 첫글자만 대문자로), uppercase(모두 대문자로), lowercase(모두 소문자로)
    • word-wrap: 블록태그에 텍스트를 입력하는 경우 텍스트가 길어지면 블록의 바깥으로 넘어갈 수 있는데 word-wrap속성에 break-word값을 입력하면 블록의 경계에서 텍스트가 끊긴다
    • height: auto;: 문서의 크기에 따라 블록요소의 세로길이가 유동적으로 바뀐다
    • box-sizing: border-box;: 박스 크기를 지정 시 padding border-width가 포함된다 margin은 포함되지 않아서 margin값을 주면 박스들이 떨어지게 된다 이는 calc()함수로 해결할 수 있다 박스들을 옆으로 나란히 두려면 float: left; 또는 display: flex;를 지정하면 된다
    • calc(a - b): a크기에서 페이지의 크기가 줄어들면 b만큼씩 줄여라(-)는 의미
    • border-radius: 테두리의 가생이를 둥글게함
    • list-style-position: 리스트의 디스크를 안쪽(inside) 바깥쪽(outside)로 옮길 수 있다
    • empty-cells: 빈 td를 보여줄지(show) 말지(hide) 지정
    • display: flex를 사용해 블록태그들을 옆으로 배치하려면 해당 블록태그들을 모두 감싸는 큰 블록이 있어야되고 거기에 속성을 정의한다
  • html
    • 문서의 레이아웃은 보통 div태그를 이용해 맹근다 ,. . 
• ☕️ Advanced Java
  • JOptionalPane: GUI를 이용해 사용자로부터 데이터 입력 받는 창 띄워줌.
    • showInputDialog(내용): 내용을 입력하면 창에 내용을 출력시킴
  • 10초를 카운트다운하는 동안만 입력을 받을 수 있는 프로그램을 작성한다면 입력받는 스레드, 카운트다운하는 스레드 하나 두개를 준비한다
  • do-while문: do를 일단 한 번 실행하고 조건이 거짓일 때까지 do문장을 실행한다 
    do {
    
    } while(조건)
  • 데몬 스레드: 일반 스레드의 작업을 돕는 보조적인 역할을 수행한다. 일반 스레드를 형성하는 것처럼 만들고 setDaemon(boolean on)의 on자리를 true로 지정하면 데몬스레드가 된다. 일반 스레드가 종료되면 데몬 스레드도 종료된다 
  • setDaemon은 start() 호출 전에 호출해야 한다.

 

📆 230428

• 🎈웹 프로그래밍(프엔)
  • html
    • href속성에 #을 입력하면 페이지 이동을 안한다는 의미
    • 시맨틱 태그: 웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그
      <header>, <footer>, <aside>, <section>, <article>, <nav>, <figure>, <figcaption>
  • css
    • display: inline;: 블록태그를 inline으로 바꿈. li태그에 적용하면 아래로 내려가던 리스트가 옆으로 이동함
    • position을 설정하면 레이아웃의 위치를 지정할 수 있다.
      static(default): 정적으로 배치된다
      relative: 정적인 위치를 기준으로 배치된다 (상하좌우값 지정)
      absolute: 컨테이너(부모)를 기준으로 배치된다 (상하좌우값 지정)
      fixed: 항상 같은 위치(부모 원점)에 배치되는데 스크롤해도 움직이지 않는다 (상하좌우값 지정)
    • 여러 블록이 겹쳐져 있을 때 마지막에 배치된 요소가 맨 위에 표시된다. 이러한 위치를 변경하려면 z-index값을 조정한다
      z-index값이 클수록 위로 표시되고 작을수록 아래에 표시된다
• ☕️ Advanced Java
  • Thread.yield(): 
  • Thread.stop()을 호출하면 스레드가 바로 멈춘다. 멈추면 사용하던 자원을 정리하지 못하고 해당 스레드가 종료되어 다른 스레드가 실행되는데 영향을 줄 수 있다. 즉, 교착상태가 될 수 있다. 그래서 해당 메서드는 비추천으로 되어 있
  • interrupt(): 스레드가 Interrupt()메서드를 만나면 InterruptedException 발생시킴
    
    1. interrupt()메서드와 sleep()메서드를 이용: 불필요한 일시정지를 사용하기 때문에 효율적이지 못함
       public void run() {
           try {
               while (true) {
                   Thread.sleep(1); 
               }
           } catch (InterruptedException e) { }
       }
    2. interrupt()메서드가 호출되었는지 여부를 검사한다
       • 방법1: Thread객체의 인스턴스 메서드인 isInterrupted()메서드 이용하기. isInterrupted()메서드는 interrupt()메서드가 호출되면 true를 반환한다
             public void run() {
                 while(true) {
                     if (this.isInterrupted()) {
                         break;
                     }
                 }
             }
       • 방법2: Thread클래스의 정적 메서드인 interrupted()메서드 이용하기. interrupted()메서드도 interrupt()메서드가 호출되면 true를 반환한다
             public void run() {
                 while(true) {
                     if (Thread.interrupted()) {
                         break;
                     }
                 }
             }

 

📆 230501

• 🎈웹 프로그래밍(프엔)
  • css
    • flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치, 저열ㄹ, 분산할 수 있는 방법을 제공하는 레이아웃 방식이다
    • flexbox는 부모 요소인 flex container와 복수의 자식요소인 flex item으로 구성된다 container나 item을 사용하려면 display: flex 속성을 줘야 한다
    • flex container
      • flex-direction: flex-container가 column(수직)방향인지 row(수평)방향인지 설정
      • flex-wrap: 
      • flex-flow: flex-direction flex-wrap 두 속성을 순서대로 축약
      • align-items: container에 여백이 존재할 때 flex item을 수직으로 어떻게 정렬할지를 정의
      • justify-content: container에 여백이 존재할 때 flex item을 수평으로 어떻게 정렬할지를 정의
    • flex item
      • flex-grow: 브라우저 크기에 맞춰 확장함
      • flex-shrink: 브라우저 크기에 맞춰 축소함
      • flex-basis: flex item의 기본 크기를 결정. 0(같은 크기로), auto(content의 크기에 따라 달라짐)
      • flex: flex-grow flex-shrink flex-basis 세 속성을 순서대로 축약 
    •  @media screen and (max-width: 최소 크기) {
          요소 {
              flex: 100%;
              flex-direction: column;
              height: auto;
          }
      }
  • 자바스크립트
    • 인터프리터 언어, 동적 타이핑(변수의 자료형을 입력하지 않아도 사용 가능), 제어문 사용 가능, 객체 기반, 함수형 프로그래밍, 프로토타입 기반
    • 구문
      • 고정값(리터럴)과 변수가 존재
      • 문자는 큰따옴표나 작은따옴표로 감싸서 표현
      • 변수는 var, let 상수처럼 값을 바꾸지 않는 변수는 const 키워드를 사용해 선언
      • 식별자는 숫자로 시작할 수 없고 대소문자를 구문
      • 주석: //(단일 문장), /* */(다중 문장)
    • 출력속성 및 메서드
      • innerHTML: 출력 내용 속에 HTML태그가 포함되어 있을 때 사용. 
      • innerText: 일반 텍스트 문자로 출력할 때 사용. html도 문자로 출력
      • (window.)document.write(내용): 기존 문서가 아닌 새로운 문서(새탭X)에 해당 내용 출력하기 때문에 잘 사용하지 않음
      • window.alert(내용): 문서에 해당 내용의 알림창을 띄움
      • console.log(내용): 소스의 콘솔에 해당 내용의 로그를 남김
    • <script>: 사용자 측 스크립트를 포함하는데 사용되는 태그
    • var vs let: 둘 다 변수를 선언.스크립트 안에 함수가 여러개로 나눠져 있을 때 let은 지역변수를, var는 전역변수를 의미한다 var를 사용하면 같은 변수명이 있어도 된다 let은 불가능. 겹치면 안되는 변수명을 선언할 때 let을 사용한다. let은 var보다 범위가 좁다(let은 제어문 밖에 사용할 수 없고 var는 제어문 밖에서도 사용 가능함)
    • window.함수(): window객체의 특정함수 호출. window는 브라우저가 갖고 있는 최상위 객체이기 때문에 생략이 가능
    • ⛔️ 에러: Uncaught TypeError: Cannot set properties of null (setting 'innerText'): 스크립트의 실행보다 body의 실행이 더 늦기 때문에 div를 찾을 수가 없음. 그래서 innerText를 null로 설정할 수 없다는 에러가 발생함 이 경우 스크립트를 body 하단에 위치시켜야함. 
      
    • 스크립트의 위치
      • 내부 스크립트는 head나 body의 내부에 배치할 수 있음
      • 인라인 스크립트: <input type="button" value="확인" onclice="f1() { // 함수 정의}" >
      • 외부 스크립트: 파일을 불러오는 식
    • 날짜 형식 바꾸기
      let today = new Date();
      let day1 = today.toLocaleString();
      let str = "오늘은 " + today + "<br>";
      str += "우리는 " + day1 + "<br>";
      document.querySelector("#res").innerHTML= str;
• ☕️ Advanced Java
  • 과제 풀이
  • Vector, Hashtable 등 예전부터 존재하던 Collection객체들은 내부에 동기화처리가 되어 있다. 그런데 새로 구성된 Collection들은 동기화 처리가 되어 있지 않다. 그래서 동기화가 필요한 프로그램에서 최근의 Collection들을 사용하려면 동기화 처리를 한 후에 사용해야 한다.
  • ArrayList를 동기화처리를 할 수 있게 하려면
    List<Integer> list = new ArrayList<>();
    List<Integer> syncList = Collections.synchronizedList(list);
  • File객체 만들기
    1. new File(String 파일 또는 폴더): 디렉토리와 디렉토리 사이 또는 디렉토리와 파일명 사이의 구분문자는 '\'를 사용하거나 '/'를 사용할 수 있다.
    2. new File(File parent, String child): parent디렉토리 안에 있는 child파일 정보를 갖는 파일 객체가 생성된다 
    3. new File(String parent, String child): parent디렉토리 안에 있는 child파일 정보를 갖는 파일 객체가 생성된다
  • File의 주요 메서드
    • String getName(): 파일명 반환
    • boolean isFile(): 파일인지(true) 아닌지(false) 반환
    • boolean isDirectory(): 폴더인지(true) 아닌지(false) 반환
    • boolean mkdir(): File객체의 경로 중 마지막 위치의 이름과 일치하는 디렉토리를 만든다. 성공적으로 만들어지면 true를 실패하면 false를 반환
    • boolean exists(): 해당 경로에 파일이나 폴더가 있으면 true를 없으면 false를 반환한다

 

📆 230502

• 쉬었음(아래는 복습)
• 🎈웹 프로그래밍(프엔)
  • javascript
    • 지역 변수: 함수 안에서 선언된 변수는 함수 안에서만 사용 가능하다. 때문에 다른 함수에서 똑같은 이름으로 선언이 가능하다. 지역 변수는 함수가 종료되면 자동적으로 소멸된다
    • 전역 변수: 함수 외부에서 선언된 변수. 웹 페이지 상의 모든 스크립트와 모든 함수는 전역 변수를 사용할 수 있다. 전역 변수는 사용자가 웹페이지를 닫으면 소멸된다

 

📆 230503

• 🎈웹 프로그래밍(프엔)
  • javascript
    • 특정 블록 내의 지역변수와 동일한 이름의 전역변수를 사용하고 싶을 때에는 window::를 붙인다
    • 함수 생성 방법
      1. function proc1() {}
      2. proc1 = function() {}
      3. proc1 = (매개변수 작성 가능) => {} // 람다: 화살표를 이용
    • 9*9 테이블을 스크립트에서 만들기
      

      proc1 = () => {
      	vtable = "<table border=1>"; // table 생성 시작 
          
      	for(let i = 1; i < 10; i++) { // tr 생성 시작
      		vtable += "<tr>";
              
      		for (let j = 1; j < 10; j++) { // td 생성 시작
      			vtable += "<td>" + i * j +"</td>";
      		} // td 생성 끝
              
      		vtable += "</tr>"; // tr 생성 끝
      	}
      	vtable += "</table>"; // table 생성 끝
      	document.querySelector("#result1").innerHTML = vtable;
      }

    • 객체 선언은 중괄호를 이용한다
      ex) myCar = { make: "현대", model: "아반떼", year: 2022 };
      객체의 각 속성에 접근하려면 myCar.make 등으로 입력하면 된다
      

      proc2 = () => {
      	myCar = {make: "현대", model: "아반떼", year: 2022};
      			
      	str = "자동차 회사: " + myCar.make + "<br>";
      	str += "자동차 모델: " + myCar.model + "<br>";
      	str += "자동차 연식: " + myCar.year + "<br>";
      
      	document.querySelector("#result2").innerHTML = str;
      }

       
    •  for ~ in: 해당 객체의 모든 열거 가능한 속성을 순회한다.
      

      proc2 = () => {
      	// 객체 선언: {}
      	myCar = {make: "현대", model: "아반떼", year: 2022};
      
      	str = "";
      	for (let x in myCar) { // x는 순서대로 make, model, year을 의미한다
      		str += "myCar[" + x + "]: " + myCar[x] + "<br>";
      //		str += `myCar[${x}]: ${myCar[x]} <br>`; 위 문장과 이 문장은 같은 의미이다
      				
      	} 
      	document.querySelector("#result2").innerHTML = str;
      }

    • break, continue
    • 배열: 하나 이상의 값을 가질 수 있는 특수 변수로, 배열울 구성하는 각각의 값을 배열 요소(element)라고 한다. 배열의 위치를 가리키는 숫자를 인덱스(index)라고 하며, 인덱스를 참조하여 값에 접근할 수 있다. 같은 배열 안의 요소 타입이 서로 다를 수 있다. 스크립트의 배열은 동적이기 때문에 주어진 인덱스보다 큰 인덱스에 값을 대입할 수 있다.
    • 배열 생성 방법
      1. 리터럴로 배열 생성: const fruits = ["apple", "banana", "peach"];
      2. Array객체로 배열 생성①:
         const fruits = new Array();
         fruits[0] = "Apple";
         fruits[1] = "Banana";
         fruits[2] = "Orange";
      3. Array객체로 배열 생성②: const fruits = new Array("apple", "banana", "orange");
    • const로 배열을 생성하면 각 요소의 값을 바꿀 수 있다. 그러나 같은 주소를 갖는 변수의 이름을 바꿀 수 없다. 

• ☕️ Advanced Java
  • 입출력,,, 자바의 정석 뿌숴

 

💭 기록

없음 매일 바쁨