# TIL: 2025-04-23 드디어 아는 게 나왔다!

1. Javascript 제어문

배운 내용

• 제어문 : 실행부 제어하는 방법
  ├── 조건문 (if, switch) : 특정 라인 건너뛰기
  └── 반복문 (for, while, do-while) : 특정 라인에 머물기

핵심 포인트

• 어떤 방식으로 실행문을 제어할 지 잘 판단하여
  조건문/반복문 선택해야함

추가로 알게 된 것

• document.write()함수 (요즘 거의 사용하지 않음)
  말 그대로 괄호 안에 들어가있는 것을 페이지에 "쓰는(출력하는)" 함수
• 요즘은 DOM 조작 (document.createElement, innerHTML, appendChild 등)이나 프레임워크(React, Vue 등) 사용

---

2. 조건문

배운 내용

• 조건이 참일 때만 지정한 영역 실행
• if문 : 판단대상이 단일한 조건일 때
• if~else문 : 판단대상이 2가지만으로 분류될 때 (+삼항연산자)
• else if문 : 판단대상이 다중적일 때
• switch~case문 : else if 와 목적이 동일

핵심 포인트

• if~else문 vs 삼항연산자
  if else 는 긴 코드 블럭 작성
  삼항연산자는 가능은 하지만, 주로 한 줄 데이터 작성

  조건문은 조건에 따른 '로직'을 다루지만
  삼항연산자는 조건에 다른 '데이터'의 선택을 하므로,
  조건문이 훨씬 더 많은 것을 처리가능

• switch~case문이 else~if문을 완전히 대체할 수는 없음
  case에 올 수 있는 코드는 오직 문자, 숫자, 논리값 같은 상수

let bd=prompt("혈액형을 입력하세요");

    switch(bd){ //소괄호 안에 올 수 있는 데이터 : 문자, 숫자, 논리값
        case "A": document.write("세심함");
            break; //break는 else~if문에서의 else 역할 : 조건에 해당하지 않는 이외의 경우
        case "B": document.write("왕고집");
            break;
        case "AB": document.write("엉뚱한 매력");
            break;
        case "O": document.write("사교적");
            break;
        default: document.write("혈액형을 다시 입력해주세요") //case에 지정된 조건 외의 모든 경우를 통틀어서. else if문의 제일 마지막
    }

조건문으로 키보드제어

배경은 움직이고 (앞으로 가는 효과), 방향키를 누를 때 비행기 조작

    <style>
        #stage{
            width: 1000px;
            height: 576px;
            margin: auto;
            background-image: url(../../images/plane/bg.jpg);
            background-position: 0px 0px; 
            /* 배경이 x축 방향, y축 방향으로 이동 */
            position: relative; 
            /* 자식요소에 포지션 지정되었으므로 */
            overflow: hidden;
        }
    </style>
    <script>
        let stage;
        let bgX=0; //배경의 x축 값을 누적시킬 전역변수
        let img; //init()에 두면 지역변수 이기 때문에 다른 함수블럭에서 접근 불가
        // 모든 함수블럭에서 접근할 수 있게 전역변수로 빼기
        let x=300;
        let y=200;

        // js로 css의 배경 제어하기
        function bgEffect(){
            // 현재 stage div에 적용된 배경 이미지의 포지션 left값을 감소시키기
            // document.getElementById("stage"); stage를 Load와 동시에 전역변수에 받아놓았으므로
            // 중복작성할 필요없다.
            bgX-=10;
            stage.style.backgroundPosition=bgX+"px 0px";

        }
                    
        function init(){
            // 지금까지는 이미지를 body태그에 직접 작성해서 존재시켰으나,
            // 이제는 자바스크립트에서 동적(runtime 프로그램 가동되는 동안)으로 
            // 이미지를 생성하여 화면에 부착하기
            
            img=document.createElement("img"); // <img>태그 작성과 동일
            img.src="../../images/plane/plane.png";
            img.style.width="45px"; // 프로그래밍으로 css제어
            img.style.position="absolute"; // 부모를 기준으로 한 위치
            img.style.left=300+"px"; // x쪽으로 300px
            img.style.top=200+"px"; // y쪽으로 200px
            
            // 생성된 이미지를 어느 부모 밑에 부착할 지를 결정
            stage=document.getElementById("stage");
            stage.appendChild(img); //대입된 이미지를 자식으로 부착
            
            //사람대신 컴퓨터(js)가 우리가 정의해놓은 함수를 호출하는 기능
            // 이용하여 자동 배경효과구현
            setInterval(bgEffect, 50); // 1/1000초 단위까지 표현가능
            //딱 한 번만 반복하게 - init()에 넣기
        }
        function move(){
            // 사용자가 키보드를 누를 때마다, 개발자는 해당 키에 대한 아스키 코드를 얻어와
            // 어떤 키를 눌렀는지 분석하여 좌측 키면 left값 감소, 우측 키면 left 증가
            // 위쪽 키면 top값 감소, 아래쪽 키면 top값 증가
            // 따라서 키에 대한 조건판단 경우의 수 총 4가지 - else if문 사용

            // console.log(event); // event객체는 이미 자바스크립트 내부적으로 자동생성되는 객체
            // 사용자가 일으킨 모든 이벤트 정보가 들어있음 (아스키코드 보여줌)
            let key=event.keyCode;
            
            // <조건문 1번>
            // if(key==37){
            //     console.log("당신이 누른 키는 좌측키입니다");
            //     x-=10;
               
            // } else if(key==39){
            //     console.log("당신이 누른 키는 우측키입니다");
            //     // 전역변수 img의 left값을 증가시켜보기
            //     x+=10;
                
            // } else if(key==38){
            //     console.log("당신이 누른 키는 상단키입니다");
            //     y-=10;
                
            // } else if(key==40){
            //     console.log("당신이 누른 키는 하단키입니다");
            //     y+=10;
            // }
            
            // <조건문 2번>
            // if(key==37) x-=10;
            // else if(key==39) x+=10;
            // else if(key==38) y-=10;
            // else if(key==40) y+=10;
                                 
            //     img.style.left=x+"px";
            //     img.style.top=y+"px"; 
            
            //<조건문 3번>
            switch(key){
                case 37: moveLeft();
                break;
                case 39: moveRight();
                break;
                case 38: moveUp();
                break;
                case 40: moveDown();
                break;
            }
        }
            function moveRight(){
                x+=10;
                img.style.left=x+"px";
            }
            function moveLeft(){
                x-=10;
                img.style.left=x+"px";
            }
            function moveUp(){
                y-=10;
                img.style.top=y+"px";
            }
            function moveDown(){
                y+=10;
                img.style.top=y+"px";
            }

    </script>

<body onload="init()" onkeydown="move()">
    <!--onload=" "안에는 문서 로드가 완료되면 호출할 함수 -->
    <div id="stage"></div>
</body>

---

3. 반복문

배운 내용

• 조건이 참인 동안 반복 실행
• for문 : 시작과 끝을 수치로 알고있을 경우
  (반복횟수를 알고있을 때 사용)

  for (초기화식(시작값); 조건식; 증감식){
  실행문
  }

(내일 배울 부분)

• while문 : 범위로 표현
  (반복횟수를 알 수 없을 때 사용)
• do-while문

핵심 포인트

• 반복문은 <br>태그나 <b></b>태그 등의 HTML태그를 출력/반영함
• 렌더링(rendering) : 브라우저가 그 태그를 해석하고 실제로 줄바꿈/굵게 표현하는 것 (HTML을 동적으로 생성)

    for(let i=2; i<=10; i+=2){
        document.write(i);
        document.write("<b>나<b>"); //<b>태그 굵은 글씨
        document.write("<br>");
    }

---

4. SQL 집계함수, 서브쿼리

<emp와 dept 테이블로 예제 연습하기>

배운 내용

집계함수

• count(*)

사원수 출력 select count(*) from emp;

참고) 부서번호가 20인 사원수 출력
select count(case when deptno=20 then 1 end) from emp;
참고) 부서번호 중복을 제거한 부서번호 개수 출력
select count(distinct deptno) from emp;

• sum( )

사원 급여의 합 select sum(sal) from emp;

• max( ), min( )

최대 급여 출력 select **max(sal)** from emp;
최소 급여 출력 select **min(sal)** from emp;

• avg( )

사원 급여의 평균 select avg(sal) from emp;

• 별칭 붙이기 as~

select avg(sal) **as 급여합** from emp;

• 종류별로 그룹화 group by~

select deptno from emp **group by deptno**;

※group by에 명시된 컬럼만이 select의 절에 올 수 있음※

select ename, deptno from emp group by deptno;
// 이름은 14종류, deptno그룹은 3개 
-> 모순이기 때문에 error

그룹화 된 걸 대상으로는 where 대신 having 씀

서브쿼리(Sub Query)

• 쿼리문 안에 쿼리문

20번 부서의 평균보다 높은 급여를 받는 사원의 이름, 급여 출력
select ename, sal from emp where sal > (select avg(sal) from emp);

커미션의 합보다 많은 급여를 받는 사원의 이름과 급여 출력
select ename, sal from emp where sal > (select sum(comm) from emp);

헷갈렸던 부분

• order by sal desc limit 1 offset 1
  2번째로 급여가 높은 행 1개 가져오기

ORDER BY sal DESC   
// 급여(sal)를 내림차순 정렬 (가장 높은 값이 위로)
LIMIT 1 
// 1개 행만 선택
OFFSET 1 
// 정렬된 결과 중 첫 번째 행을 건너뜀 (두 번째 행부터 시작)

• order by hiredate desc limit 1 offset 2
  3번째로 최근 입사일인 행 1개 가져오기

극악의 10번 서브쿼리 문제

• 최대 커미션을 받는 사원 / 의 매니저가 근무하는 / 부서명, 위치, 부서번호를 출력하세요

select dname, loc, deptno from dept where deptno=
(select deptno from emp where empno=
(select mgr from emp where comm=(select max(comm) from emp where comm is not null)));

→ comm is not null 붙여줘야 진짜 comm값 있는 사람 중에서 정렬
~한 사원의 매니저 : empno 와 mgr을 같다고 봐야함

핵심 포인트

• 쿼리문은 끊어서 생각하기
• 그 다음 공통된 컬럼을 기준으로 연결해보기

느낀 점

자바스크립트 코드 짤 때나 sql문 짤 때나 머릿 속으로 표를 그려서(도식화) 생각해보면 조금 나은 것 같다! 내 머릿 속에 그림을 그리자 떼굴떼굴

---

5. Javascript 단계적 처리

    img.src = "../images/fruit/banana.png"; //원래 이랬던 걸

    let fileName;                             // 1단계: 변수 선언
    fileName = "banana.png";                  // 2단계: 파일 이름 할당
    fileName = "../images/fruit/" + fileName; // 3단계: 경로 결합
    img.src = fileName;                       // 4단계: 최종 경로 할당
    //이렇게 나눠서 씀

이렇게 하는 이유

• 가독성: 코드를 더 쉽게 읽고 이해할 수 있음

• 디버깅: 각 단계에서 오류를 추적하고 수정하기 쉬움

• 유연성: 나중에 코드 확장이나 수정이 용이

• 재사용성: 코드의 특정 부분만 쉽게 변경 가능

• 유지보수성: 장기적으로 코드 관리가 더 쉬움

느낀점

이렇게 나눠쓰면 코드가 길어지고, 간단한 작업엔 비효율적으로 보일 수 있지만,
코드가 어떻게 돌아가는 지 이해하기 쉽고, 어떤 부분에서 에러가 나는지도 찾기 쉽기 때문에 나같은 개린이(?)에게는 좋은 방식인 듯 하다.
내 수준에서는 아직 효율성보다는 가독성이 더 중요하니까... 옆에 앉은 전공자들은 한 줄로 끝낸다고 조급해하지말자! 나는 나만의 속도로 간다..!

결론: 지금은 연습 단계니까 단계적으로 써보고 구조를 이해하는 것이 급선무!