# TIL: 2025-04-30 강사님, 저 연휴동안 공부하라고 이런 예제주셨죠

heeezni·2025년 5월 5일

DDL form태그 다차원배열 배열 상수 이스케이프 문자열처리 이중반복문 이차원배열 제약조건

TIL : 오늘은 뭘 배웠을까?

목록 보기

8/27

1. 다차원배열

배운 내용

배열 안에 또 배열 대입

    let fruit = ["복숭아","망고","사과"]; //선언과 동시에 값 할당, 암시적으로 new Array() 선언과 같음
    let car = ["BMW", "BENZ", "AUDI"];
    let food = ["김치볶음밥", "된장찌개", "쌀국수"];

    let box = []; //값을 할당하지 않은 채로 선언한 배열
    box.push(fruit);
    box.push(car);
    box.push(food);

push() 함수는 배열 맨 뒤에 원하는 요소를 추가
(push, 뒤에서 밀어 넣기)

for(let a=0; a<box.length; a++){
        for(let i=0; i<box[a].length; i++){
        document.writeln(box[a][i]);
        }
        document.write("<br>");
    }

반복문으로 브라우저에 출력하면

box[0]에는 fruit 배열이
box[1]에는 car 배열이
box[3]에는 food 배열이 가지런히 정리^_^

ex) 망고를 표현하고 싶으면 box[0][1]이라고 표현하면 됨

롤러코스터 예제

마우스로 화면을 찍으면 빨간 점이 생기고 #aside에는 마우스의 좌표 출력, 롤러코스터 출발 버튼 누르면 찍은 점 따라 롤러코스터가 이동함

<head>
    <title>롤러코스터예제</title>
    <style>
        body{margin: 0px;} /* 기본적으로 살아있는 마진 값 없애기. 퍼블리싱 분야의 기초 */
        #wrapper{
            width: 100%;
            height: 800px;
            text-align: center;
        }
        #content{
            width: 90%;
            height: 100%;
            background-image: url(../../images/놀이공원/놀이공원배경.jpg);
            background-size: 100% 800px; 
            /* 배경 크기 강제지정 */
            float: left;
            position: relative;
        }
        #aside{
            width: 10%;
            height: 100%;
            float: left;
            background-color: skyblue;
        }
        button{
            width: 300px;
            height: 50px;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
    <script>
        let img; //모든 영역에서의 접근 위해
        let content;
        let aside;
        let posArray=[]; //배열의 길이를 알 수 없기 때문에, 빈(empty) 배열 선언
                        //JS의 배열은 Java의 List와 흡사. 고무줄처럼 크기가 늘어난다
        let index=0; // 전체 이차원배열의 어떤 층으 접근할 지를 결정하는 변수
        let flag=false; //처음에 멈춰있어라

        function createHero(){
            img=document.createElement("img");
            img.src="../../images/놀이공원/롤러코스터.png"
            img.style.width=80+"px";
            img.style.position="absolute";
            img.style.left=100+"px";
            img.style.top=270+"px";
            // img.style.transform="scaleX(-1)" //음수값은 x축 방향의 flip 

            content.appendChild(img);
        }

        function createDot(x,y){ //이 함수 호출하려면 값 2개 전달
            //span 태그를 생성하여, 점으로 표현하고 content 부착
            let span=document.createElement("span");
            span.style.background="red";
            span.style.borderRadius="50%"
            span.style.display="inline-block"; //inline의 공존 능력+block의 질량 가능
            span.style.width=5+"px";
            span.style.height=5+"px";
            span.style.position="absolute"; //content 부모를 기준
            //span.style.left=마우스 x좌표+"px";
            //span.style.top=마우스 y좌표+"px";
            span.style.left=x+"px";
            span.style.top=y+"px";

            content.appendChild(span);
        }

        function insertDot(x,y){ //이차원 배열은 곧 메모리상의 데이터베이스와 같다
                            // 개념적으로는 테이블로 생각해도 무관
            //x축과 y축을 담는 조그만 일차원 배열 상자를 생성
            let pos=[x,y];
            posArray.push(pos);
        }

        function move(){ //롤러코스터 움직이기
            //데이터베이스에 쌓여있는 순서대로
            if (flag){
                if(index>=posArray.length){index=0;}//배열의 끝을 만나게 되면 다시 처음으로 되돌리자

            img.style.left= posArray[index][0]+"px"
            img.style.top= posArray[index][1]+"px"
            index++;
            }   
        }

        function init(){
            content=document.getElementById("content");
            aside=document.getElementById("aside");
            createHero(); //주인공 등장

            content.addEventListener("mousedown", function(){ //content에 이벤트 연결
                let x=event.clientX;
                let y=event.clientY; //지역변수 죽기 전에 x,y를 매개변수로 전달
                createDot(x,y); //점 만들기
                insertDot(x,y); //데이터 베이스 정보를 쌓자
                
                aside.innerHTML=aside.innerHTML+"x="+x+" y="+y+"<br>";
            });
        }

        addEventListener("load",function(){
            init();
            document.querySelector("button").addEventListener("click", function(){
                flag=true;
            });
            setInterval("move()",100); //움직이는 게 있으면 무조건   
        });
    </script>
</head>
<body>
    <div id="wrapper">
        <div id="content"></div> <!-- 롤러코스터 배경 -->
        <div id="aside"></div> <!-- 좌표누적 -->
        <button>롤러코스터 출발</button>
    </div>
</body>

순서

addEventListener load주기 + init()호출 + 움직이는 요소가 있으므로 setInterval 호출
init()함수 정의, 여기에 content랑 aside 변수 선언 및 할당 (다른 곳에도 쓰일 수 있으니 전역변수로 뺴놓기)
createHero()함수 정의 (롤러코스터 이미지 동적으로 생성)
롤러코스터 이미지를 배경 위에 원하는 좌표대로 움직이게 하려면 반드시 absolute 포지션으로 지정 (자동으로 부모요소 #content에게는 relative주기) + content에 img appendChild(부착)
클릭할 때마다 점 생성해야하니 content에 addEventListener mousedown (마우스 누른 곳에 실행) 이벤트 연결 + event함수로 마우스 좌표 참조 + createDot()함수와 insertDot()함수 준비 (매개변수도 2개 필요함)
createDot()함수 정의 span 태그(HTML 구조적으로 의미는 없지만 스타일이나 동적 기능을 부여할 때 사용)를 사용하여 마우스 클릭 위치에 작은 빨간색 점을 생성 + 마우스 클릭 시의 X,Y 좌표에 맞춰 점의 위치 출력설정 + content에 span(==빨간 점)부착
★배열관련 부분★
insertDot()함수 정의 (x축과 y축을 담는 일차원 배열 상자를 생성) + posArray.push(pos); posArray라는 빈 배열 상자에 밀어넣기
★배열관련 부분★
setInterval에 호출될 move()함수 정의 (롤러코스터 움직이게 하는 함수)

function move(){ 
    if (flag){ //버튼 누르면 움직이게 flag조건 걸어두기
        if(index>=posArray.length){index=0;} 
      //배열 순회가 끝나면 index 값을 다시 0으로 초기화해서, 
      //롤러코스터가 처음 위치로 돌아가도록

        img.style.left= posArray[index][0]+"px" //x 좌표 이동
        img.style.top= posArray[index][1]+"px" //y 좌표 이동
        index++; //index는 점찍은 순서대로 이동할 수 있도록 하는 
      			//순서를 추적하는 변수
        }   
}

자동 호출 자리에 가서 move()함수 호출 + 버튼에 click 이벤트 연결 해서 클릭 시 flag=true;로 바꿀 수 있게 설정

내가 놓친 부분

span.style.display = "inline-block";

span 태그는 기본적으로 인라인 요소이지만, 크기나 위치를 제어하기 위해서는 블록처럼 동작해야 할 때가 있어 display: inline-block;사용

inline 요소는 기본적으로 다른 요소와 한 줄에 배치됨. 그래서 너비(width)나 높이(height)를 설정할 수 없고, 크기 조정이 불가능
block 요소는 한 줄을 차지하고, 크기와 위치 조정이 가능

→ inline-block은 이 두 특성을 결합한 형태로, 요소가 한 줄에 배치되면서도 너비와 높이를 설정하고, 정렬 및 위치 지정이 가능!

이차원배열에서 index는 순서대로 가게 하기 위한 변수

img.style.left= posArray[index][0]+"px" //x 좌표 이동
img.style.top= posArray[index][1]+"px" //y 좌표 이동
index++;

let pos=[x,y];
posArray.push(pos); 했으니까
posArray[i][0] (i번 째 pos의 첫 번째 값)은 x좌표
posArray[i][1] (i번 째 pos의 두 번째 값)은 y좌표

2. 이차원배열+이중반복문

게임맵 만들기 - 배열이용해 object 배치

<head>
    <title>게임맵 만들기</title>
    <style>
        #stage{
            width: 100%;
            height: 800px;
            margin: auto;
            background-image: url(../../images/gamemap/BG.png);
            background-image: 1200px 1000px;
            position: relative;
        }
    </style>
    <script>
        let stage; //제어 대상이므로 미리미리 전역변수 빼놓기
        //stage에 올려질 물체의 좌표를 결정할 표(이차원배열)선언
        const tree=1; //앞으로 나무는 1의 값을 갖는다. (고정할 거라서 상수 const)
        const brick=2; //벽돌은 2다.
        const box=3; //박스는 3이다.
        let map=[
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0],
            [3,0,0,0,0,1,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0],
            [0,0,1,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,3,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        ];

        function createObject(){ //게임에 등장할 객체들을 화면에 생성 및 부착하기 위한 함수
           for(let i=0; i<map.length; i++){ //층수 만큼
                for(let a=0; a<map[i].length; a++){ //호수 만큼
                        if(map[i][a]!=0){ //map의 각 요소에서 추출된 값이 0이 아니면
                        let img=document.createElement("img");
                        let src; //어떤 이미지를 보여줄 지를 결정하는 변수

                        //조건 판단 대상이 여러개이고 대상이 단순한 문자,숫자, 논리값인 경우
                        //코드를 짧게 사용하려면 switch문
                        switch(map[i][a]){
                            case tree:src="../../images/gamemap/Tree.png";break;
                            case brick:src="../../images/gamemap/StoneBlock.png";break;
                            case box:src="../../images/gamemap/Crate.png";break;
                        }

                        img.src=src;
                        img.style.width=70+"px";
                        img.style.height=70+"px";
                        img.style.position="absolute";
                        img.style.left=(a*50)+"px"; //호수*50
                        img.style.top=(i*50)+"px"; //층수*50
                        // 맵을 배열로 나눠서 Object를 배치
                        stage.appendChild(img);
                        }
                }
            }                    
        }

        function init(){
            stage=document.getElementById("stage");
            createObject();
        }

        addEventListener("load",function(){
            init();

        });
    </script>
</head>
<body>
    <div id="stage"></div>
</body>

핵심 포인트

화면을 커다란 이차원 배열이라고 생각해보고 object를 배치해보기
map 배열은 16행 24열짜리 2차원 배열
한 배열 칸 = 50px × 50px 크기의 사각형으로 보자
이차원배열과 switch문을 함께 사용 (break; 필수)
'0이 아니면 이미지를 붙여라' : for문 + if문으로 표현
이미지의 src : switch문으로 표현
const: 숫자를 가진 변수(상수)

let → 값이 바뀔 수 있는 변수
const → 절대 바뀌면 안 되는 값에 사용 (주로 설정값, 상수, 고정값)

★회원관리 프로그램★

<head>
    <title>초고난도 회원관리 프로그램</title>
    <style>
        #wrapper{
            width: 1006px;
            height: 603px;
            margin: auto;
            border: 3px solid gray;
            border-radius: 3px;
            background-color: pink;
        }
        #aside1{
            width: 200px;
            height: 100%;
            background-color: pink;
            float: left;
            border-right: 3px solid gray;
            text-align: center;
        }
        #section{
            width: 600px;
            height: 100%;
            float: left;
        }
        #header{
            width: 600px;
            height: 50px;
            background-color: rgb(240, 121, 141);
            border-bottom: 3px solid gray;
            text-align: center;
        }
        #content{
            width: 600px;
            height: 550px;
            background-color: rgb(248, 223, 232);
            overflow: scroll;

        }
        #aside2{
            width: 200px;
            height: 100%;
            background-color: pink;
            float: left;
            border-left: 3px solid gray;
            text-align: center;
        }
        form input{
            height: 35px;
            margin: 2px;
            border: 2px solid gray;
            border-radius: 3px;
        }
        input[type=button]:hover{
            background-color: salmon;
        }
        table{
            border-collapse: collapse; 
            /* 두겹으로 겹치는 테이블의 기본 경계를 허문다 */
        }
    </style>
  
    <script>
        let memberArray=[]; //비어있는 1차원 배열을 선언하자
        let content; //회원목록이 table 출력될 영역
        let currentIndex; //현재 내가 선택한 층

        //변수명이 같지 않아도 전달이 됩니다. getDetail() 함수에서의 매개변수 이름은 index일 수 있고, 
        // onClick 이벤트에서 사용하는 변수 이름은 i일 수 있습니다. 
        // 중요한 점은, 괄호 안에 전달되는 값이 함수에서 매개변수로 받아들여진다는 것입니다.
        function getDetail(index){ // 사원 1명에 대한 자세한 정보 가져와서 우측 영역에 출력하자
            currentIndex=index; // 현재 내가 몇 층을 보고 있는 지 다른 함수에서도 알게 하기 위해 전역변수로 빼자
            //넘어온 index는 층수이므로, memberArray 배열에 접근할 수 있다
            form2.empno.value=memberArray[index][0]
            form2.ename.value=memberArray[index][1]
            form2.sal.value=memberArray[index][2]
            form2.comm.value=memberArray[index][3]
        }

        function edit(){ //선택한 층에 있는 사원의 정보를 변경하여 테이블 갱신 처리
            //현재 이차원 배열인 memberArray의 수정하고 싶은 사원을 접근해보자
            //접근하려면 층 즉, currentIndex가 필요함
            memberArray[currentIndex][0]=form2.empno.value; //오른쪽 폼의 사원번호 반영
            memberArray[currentIndex][1]=form2.ename.value; //오른쪽 폼의 사원이름
            memberArray[currentIndex][2]=form2.sal.value; //오른쪽 폼의 급여 반영
            memberArray[currentIndex][3]=form2.comm.value; //오른쪽 폼의 커미션 반영

            printTable();

        }
        function del(){ //사원 한 명 삭제 (이차원 배열의 몇 층을 제거할 지 결정짓는다)
            //memberArray.splice(몇 층,1)
            memberArray.splice(currentIndex,1)
      		form2.reset(); // 삭제 후 폼 초기화
            printTable(); //테이블 갱신
        }
        
        function printTable(){
            let tag="<table border='1px' width='100%'>";
            tag=tag+"<tr align='center'>";
                tag=tag+"<td>No</td>";
                tag=tag+"<td>EMPNO</td>";
                tag=tag+"<td>ENAME</td>";
                tag=tag+"<td>SAL</td>";
                tag=tag+"<td>COMM</td>";
            tag=tag+"</tr>";

            //실제 데이터가 출력될 tr영역 (★★완전중요)
            for(let i=0; i<memberArray.length; i++){ //이차원 배열은 층수와 같으니, 층수만큼 반복시킨다
                tag=tag+"<tr align='center' onClick=\"getDetail("+i+")\" onMouseOver=\"this.style.background= 'pink'\" onMouseOut=\"this.style.background=''\">";
                // 하이라이트 효과    
                    tag=tag+"<td>"+(1+i)+"</td>";
                    // tag=tag+"<td>"+memberArray[i][0]+"</td>";
                    // tag=tag+"<td>"+memberArray[i][1]+"</td>";
                    // tag=tag+"<td>"+memberArray[i][2]+"</td>";
                    // tag=tag+"<td>"+memberArray[i][3]+"</td>"; //for문 돌리기 가능
                    for(let a=0; a<memberArray[i].length; a++){
                        tag=tag+"<td>"+memberArray[i][a]+"</td>";
                    }
                tag=tag+"</tr>";
            }
            //통계출력 (td를 5개 통합)
            tag=tag+"<tr>";
            tag=tag+"<td colspan='5' align='right'>사원수 총 "+ memberArray.length+"명</td>";
            tag=tag+"</tr>";

            tag=tag+"</table>";
            content.innerHTML=tag; //모아진 태그를 한꺼번에 출력하자
        }
        
        function regist(){ //메모리 상의 데이터베이스()=이차원배열)에 사원 한 명 등록하기
            //사원 한 명은 하나의 일차원배열에 담을 수 있으므로, 일차원 배열 생성하자
            let member=[];
            member.push(form1.empno.value); //사원번호의 값을 0번째에 등록 ★
            member.push(form1.ename.value);
            member.push(form1.sal.value);
            member.push(form1.comm.value);

            //방금 생성된 사원 1명의 정보를 담는 member배열을
            //memberArray라는 배열에 추가하자 (memberArray는 비로소 이차열 배열됨)
            memberArray.push(member);
            // alert("가입을 축하합니다");
            form1.reset(); //등록 초기화 (기존 입력했던 데이터를 다시 지운다)  
  						//reset은 form에만 사용가능
        }

        function init(){
            content=document.getElementById("content");
        }

        addEventListener("load", function(){
            init();
            printTable();

            //★ 문서로드 시 커서를 좌측 상단 입력 최상단에 올려놓아주는 배려
            form1.empno.focus(); 

            //등록버튼에 클릭이벤트 연결
            let bt_regist=document.querySelector("#aside1 input[type='button']");
            bt_regist.addEventListener("click",function(){
                regist(); //회원 등록
                printTable(); //회원 출력
            });
            form2.bt_edit.addEventListener("click", function(){
                if(confirm("정보를 수정하시겠어요?")){
                    if(currentIndex==undefined){
                        alert("먼저 수정할 사원을 선택하세요.")
                    }else{
                        edit();
                    }
                }
            });
            form2.bt_del.addEventListener("click", function(){
                if(confirm("삭제하시겠어요?")){ //true 나오면 삭제
                    if(currentIndex==undefined){
                        alert("먼저 삭제하실 사원을 선택하세요.");
                    }else{
                        del(); //회원 삭제 버튼
                    }
                }
            });
    });
    </script>
</head>
<body>
    <div id="wrapper">
        <div id="aside1">
                    <!-- 입력양식 구성
            form태그는 말 그대로 양식
            제출양식을 작성하기 위한 태그이며 눈에 보이지 않음
            주 용도는 전송범위 설정 -->
            <form name="form1">
                <input type="text" name="empno" placeholder="사원번호 입력">
                <input type="text" name="ename" placeholder="사원명 입력">
                <input type="text" name="sal" placeholder="급여 입력">
                <input type="text" name="comm" placeholder="커미션">
                <input type="button" value="사원등록">
            </form> <!-- name은 전송기능 가능 -->
        </div>

        <div id="section">
            <div id="header"></div>
            <div id="content"></div>
        </div>
      
        <div id="aside2">
            <form name="form2">
                <input type="text" name="empno" placeholder="사원번호">
                <input type="text" name="ename" placeholder="사원명">
                <input type="text" name="sal" placeholder="급여">
                <input type="text" name="comm" placeholder="커미션">
                <input type="button" name="bt_edit" value="사원수정">
                <input type="button" name="bt_del" value="사원삭제">
            </form>
        </div>
    </div>
</body>

순서

div #wrapper, #aside1(form1), #aside2(form2), #section(#header, #content) 준비 + style sheet 주기
(border 두께만큼 하드코딩으로 px넓혀야하는 문제 좀 더 알아보기)
load이벤트 주기 + init()함수 정의 (content 변수 선언+전역변수로 빼주기) + printTable()함수 정의
printTable()함수로 테이블 동적 생성

★주목할 부분★
//실제 데이터 출력될 영역
for(let i=0; i<memberArray.length; i++){ //층 (한 라인 전부)
 tag=tag+"<tr align='center' onClick=\"getDetail("+i+")\" onMouseOver=\"this.style.background= 'pink'\" onMouseOut=\"this.style.background=''\">"; // 하이라이트 효과 
    tag=tag+"<td>"+(1+i)+"</td>";
        for(let a=0; a<memberArray[i].length; a++){ //호수(각 컬럼)
           tag=tag+"<td>"+memberArray[i][a]+"</td>";
        }
 tag=tag+"</tr>";
}

regist() 함수 정의 :
push로 member배열 생성하고, 그 배열을 memberArray에 넣어 이차원 배열 생성
#aside1 input[type='button']에 click이벤트 연결 + regist(), printTable() 호출
getDetail()함수(사원 1명에 대한 정보 가져와서 우측 영역에 출력) 정의
printTable()에서 getDetail(i)를 호출하면서 매개변수를 가져오게함,
그 매개변수는 index고 전역변수로 빼서 currentIndex라는 전역 변수에 저장되어,
이후에 그 사원을 수정하거나 삭제할 때 참고가능!

사용자가 테이블의 특정 행을 클릭하면, 그 층(index)을 전달해서 어떤 사원을 선택했는지 알려줘야 하기 때문에 (층만 가져오면 나머지는 다 알 수 있음)
이 index를 getDetail(index) 함수에 전달해서, 해당 사원의 정보를 form2에 표시하고, currentIndex에 저장
변수명이 같지 않아도 전달가능. getDetail() 함수에서의 매개변수 이름은 index일 수 있고, onClick 이벤트에서 사용하는 변수 이름은 i일 수 있음.
edit(), del() 함수 정의하고 해당 버튼에 이벤트 준 후 호출하기 + 업데이트된 테이블 원하면 각 함수에 printTable()다시 호출해야함

<참고>
splice(시작할 인덱스, 삭제할 요소의 수)

`<form>`태그 더 알아보기

<form> 입력 양식 전체를 감싸는 태그
<name> <form>의 이름서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용
form 요소 사용시 주의사항:
<form></form> 태그 사이에는 다른 <form> 태그가 삽입이 안되며,
<form>의 이름 속성은 한 페이지에서 중복하여 사용하면 안 된다.

form 태그 및 input 태그 양식 및 종류 정리 참고!
https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC#%ED%8F%BCform_%EC%96%91%EC%8B%9D

3. 이스케이프 문자열 처리

배운 내용

    document.write("또리가 나에게 말했다. \"안녕!\" ");
    // \ (역슬래시) 로 자르기

화면출력: 또리가 나에게 말했다 "안녕!"

이스케이프 문자열(Escape Sequence) :
문자열 내에서 특수 문자를 표현하기 위해 사용하는 문자열 대부분 역슬래시 \ 와 함께 사용

핵심 포인트

자르고 싶은 곳에 가서 자르기!
뒤에 있는"하나는 \밖으로 나와있어야함
앞 뒤 둘다 \" 사용
문자열 내부에 따옴표를 포함하고 싶을 때 사용
(이미 ""가 있는데 또 ""를 쓰고 싶을 때)

4. Oracle

배운 내용

<Oracle의 데이터 딕셔너리 뷰 명명 규칙>

현재 접속한 사용자 계정이 일반계정일 경우 :
(가장 자주 사용됨)USER_
현재 접속한 계정이 관리자인 경우 (sys) :
DBA_ 뷰와 V$ 뷰도 조회 가능
DDL 중 제거하는 명령어는 DROP

DELETE와의 차이
: drop은 존재 자체를 삭제 ,
delete는 존재는 하지만 내용만 삭제
(그리고 DML임)

제약조건
UNIQUE 레코드는 유일한 것만 받아들이겠다

NOT NULL null을 허용하지 않겠다

CHECK 지정된 값만 허용하겠다

DEFAULT 아무런 값을 넣지 않으면 기본으로 값을 자동지정하겠다

CREATE TABLE MEMBER(
ID VARCHAR2(20) UNIQUE,
NAME VARCHAR2(30) NOT NULL,
GENDER VARCHAR2(6),
REGDATE DATE DEFAULT SYSDATE,
CONSTRAINT CHK_MEMBER CHECK (GENDER='남' OR GENDER='여'
);

INSERT INTO MEMBER(ID,GENDER) VALUES('ADAMS', '남');
ERROR at line 1:
ORA-01400: cannot insert NULL into ("JS"."MEMBER"."NAME") 에러남

느낀 점

충격적인 회원관리 프로그램 코드짜기.. 배열이 정말 많이 쓰인다는 걸 알 수 있긴 했는데 코드 짜면서 정신 나갈뻔 했다. 그래도 뭐부터 짤 지 순서잡고 다시 흐름 살펴보니 조금 알 것 같기도... 할 때쯤 이상한 코드들 하나씩 툭 튀어나와서 또 멘붕
나는 속기사 학원온 게 아니니까 강사님 코드를 따라치는 게 중요한게 아니라는 걸 명심할 것.. 왜 이 코드가 필요한지 이해하고 적재적소에 쓸 줄 알아야하니까 무턱대고 코드짜려고 덤비지 말고 큰 순서를 짜보는 습관을 들여야겠다. 종이에 쓰면서 짜보는 것도 좋은 방법인 것 같다. 아무튼 이것저것 활용해보면서 잘 맞는 방법을 찾으면 되지 뭐~
연휴동안 일정이 있어서..^^(노느라) 늦은 회고작성했는데 회고록 덕분에 강제 복습할 동기부여가 생겨서 좋다. 나는 강제성이 없으면 안되는 인간인걸 누구보다 잘 알기에...★
자바 강의도 39강 남았는데 ^^ 할 수 있겠지!

heeezni

아이들의 가능성을 믿었던 마음 그대로, 이제는 나의 가능성을 믿고 나아가는 중입니다.🌱

이전 포스트

# TIL: 2025-04-29 하나가 끝나면 또 하나가 나타나고..✨

다음 포스트

# TIL: 2025-04-30 강사님, 저 연휴동안 공부하라고 이런 예제주셨죠

TIL : 오늘은 뭘 배웠을까?

1. 다차원배열

배운 내용

롤러코스터 예제

순서

내가 놓친 부분

2. 이차원배열+이중반복문

게임맵 만들기 - 배열이용해 object 배치

핵심 포인트

★회원관리 프로그램★

순서

`<form>`태그 더 알아보기

3. 이스케이프 문자열 처리

배운 내용

핵심 포인트

4. Oracle

배운 내용

느낀 점

# TIL: 2025-04-29 하나가 끝나면 또 하나가 나타나고..✨

# TIL: 2025-05-07 객체지향프로그래밍의 시작

0개의 댓글

# TIL: 2025-04-30 강사님, 저 연휴동안 공부하라고 이런 예제주셨죠

TIL : 오늘은 뭘 배웠을까?

1. 다차원배열

배운 내용

롤러코스터 예제

순서

내가 놓친 부분

2. 이차원배열+이중반복문

게임맵 만들기 - 배열이용해 object 배치

핵심 포인트

★회원관리 프로그램★

순서

<form>태그 더 알아보기

3. 이스케이프 문자열 처리

배운 내용

핵심 포인트

4. Oracle

배운 내용

느낀 점

# TIL: 2025-04-29 하나가 끝나면 또 하나가 나타나고..✨

# TIL: 2025-05-07 객체지향프로그래밍의 시작

0개의 댓글

`<form>`태그 더 알아보기