html

국비 코딩 풀스택 수업 6일차

비루블 2022. 6. 28. 12:47

오전일과

marketcontent.html

join.html

-marketcontent.html

어제 혼자 하루종일 해도 안됬는데

역시 답지를 보니까 마음이 사르르 녹는다

먼저 직접 작성한 스크립트와 답지를 비교해보자

해결함(단순 url 주소 기입 실수) but 코드의 간편성을 봤을때는 오늘한 marketcontent가 났다.

 

<!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>
</head>
<body>
    <div class="container">
        <h3>게시판 내용</h3>
        <hr />

        <p>번호 : </p>
        <p>물품명 : </p>
        <p>내용 : </p>
        <p>가격 : </p>
        <p>수량 : </p>
        <p>등록일 : </p>
        <p>이미지 </p>
        <!-- 보드 실습에서는 p태그에 아이디를 부여하여 스크립트에서 넣었음 -->
        <!-- <img src="http://1.234.5.158:23000${tmp.img}" style="width:100%; height:120px" /> -->

        <button onclick="handleOrder()">주문하기</button>
    </div>

    <script src="./js/axios.min.js"></script>

    <script>

        const p = document.getElementsByTagName('p');
        console.log(typeof p, p.length, p);
        //p확인해보기
        
        async function mount() {
            const urlParams = new URL(window.location).searchParams;
            const no = urlParams.get('no');
            console.log(typeof (no), no);

            const url = `http://1.234.5.158:23000/item101/selectone.json?no=${no}`;
            const headers = {"Content-Type" : "application/json"};

            // 1. 백엔드로 호출 후에 결과값 받기
            const response = await axios.get(url, {headers:headers});/* 이거 먼뜻인지 모르겠음 */
            console.log(response.data);
            //2. 백엔드로 받은 결과확인

            if(response.data.status === 200){
                const result = response.data.result;
                p[0].innerHTML += result._id;
                p[1].innerHTML += result.name;
                p[2].innerHTML += result.content;
                p[3].innerHTML += result.price;
                // p[4].innerHTML += result.quantity;
                p[5].innerHTML += result.regdate;

                // p[6].innerHTML += `<img src="http://1.234.5.158:23000${result.img}"/>`;

                let img = document.createElement("img"); // img태그 생성
                img.src = `http://1.234.5.158:23000${result.img}`;
                img.width = 200;
                img.height = 100;
                p[6].append(img);
                //innerHTML보다는 위 코드를 만들어서 가상으로 하는 것이 훨씬 좋다.
                //<img src ="" style="width:200; height:100" /> 이것과 똑같은 말
                
                //select 박스 추가(수량 선택)
                let select = document.createElement("select");
                // i가 반복 1부터 재고 수량 까지 1씩 증가
                for(let i = 1; i<=result.quantity; i++){
                    let option = document.createElement('option');
                    option.text = i;
                    select.append(option);
                }
                p[4].append(select);
            }
        }
        mount();

        function handleOrder() {
            alert("주문하기 처리하기");
            //생략
        }
    </script>
</body>
</html>

위 코드는 내 파일에 없음(깔끔하게 가공해서 올린 것임)

marketcontent에서 배운 것.

1. 가져온 데이터 타입 확인하는 습관

 

2.(중요)
콜백 지옥 해결책 await을 배움(줄인 것 + 데이터를 기다리는 명령어 await axios)
await을 쓰려면 펑션앞에 async를 붙여야함

 

3. 이미지 넣기
innerHTML에 이미지 넣는 것 까지 했음.(중요)

let img = document.createElement("img"); // img태그 생성
img.src = `http://1.234.5.158:23000${result.img}`;
img.width = 200;
img.height = 100;
p[6].append(img);
innerHTML보다는 위 코드를 만들어서 가상으로 하는 것이 훨씬 좋다.
<img src ="" style="width:200; height:100" /> 이것과 똑같은 말
 

4.태그에 아이뒤를 부여하지 않고 innerHTML에서 배열이용으로 바로 넣어버림
(innerHTML보다는 img태그를 생성해서 가상으로 하는 것이 훨씬 좋다.)

<div class="container">
        <h3>게시판 내용</h3>
        <hr />

        <p>번호 : </p>
        <p>물품명 : </p>
        <p>내용 : </p>
        <p>가격 : </p>
        <p>수량 : </p>
        <p>등록일 : </p>
        <p>이미지 </p>
        <!-- 보드 실습에서는 p태그에 아이디를 부여하여 스크립트에서 넣었음 -->
        <!-- <img src="http://1.234.5.158:23000${tmp.img}" style="width:100%; height:120px" /> -->

        <button onclick="handleOrder()">주문하기</button>
   </div>
   
   
   
   
   
	<script>
   		const response = await axios.get(url, {headers:headers});/* 이거 먼뜻인지 모르겠음 */
        console.log(response.data);
        
        
        if(response.data.status === 200){
            const result = response.data.result;
            p[0].innerHTML += result._id;
            p[1].innerHTML += result.name;
            p[2].innerHTML += result.content;
            p[3].innerHTML += result.price;
            // p[4].innerHTML += result.quantity;
            p[5].innerHTML += result.regdate;

            // p[6].innerHTML += `<img src="http://1.234.5.158:23000${result.img}"/>`;

            let img = document.createElement("img"); // img태그 생성
            img.src = `http://1.234.5.158:23000${result.img}`;
            img.width = 200;
            img.height = 100;
            p[6].append(img);
            //innerHTML보다는 위 코드를 만들어서 가상으로 하는 것이 훨씬 좋다.
            //<img src ="" style="width:200; height:100" /> 이것과 똑같은 말

            //select 박스 추가(수량 선택)
            let select = document.createElement("select");
            // i가 반복 1부터 재고 수량 까지 1씩 증가
            for(let i = 1; i<=result.quantity; i++){
                let option = document.createElement('option');
                option.text = i;
                select.append(option);
            }
            p[4].append(select);
        }
    }
    mount();
	</script>

 


5. select 박스 추가(수량 선택)
옵션

//select 박스 추가(수량 선택)
let select = document.createElement("select");
// i가 반복 1부터 재고 수량 까지 1씩 증가
for(let i = 1; i<=result.quantity; i++){
    let option = document.createElement('option');
    option.text = i;
    select.append(option);
}
p[4].append(select)


주문하기(생략) 백엔드 서버x

 


-join1.html

<!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>회원가입</title>
    <link href="./css/join1.css" rel="stylesheet" />
</head>
<body>
    <div class = "container">
        <h3>회원가입</h3>
        <hr />
        <div class="row"><!-- 아이디 -->
            <label class="lbl">아이디</label> <!-- label에서 style이 안먹힘(인라인 형식) -->
            <input type="text" id="userid" placeholder="아이디" autofocus/>
            <label id="idcheck">중복확인</label>
        </div>
        
        <div class="row"><!-- 비밀번호 -->
            <label class="lbl">암호</label>
            <input type="password" id="userpw" placeholder="암호"/>
        </div>

        <div class="row"><!-- 비밀번호 확인 -->
            <label class="lbl">암호확인</label>
            <input type="password" id="userpw1" placeholder="암호확인"/>
        </div>

        <div class="row"><!-- 이름 -->
            <label class="lbl">이름</label>
            <input type="text" id="username" placeholder="이름"/>
        </div>

        <div class="row"><!-- 이메일 -->
            <label class="lbl">이메일</label>
            <input type="text" placeholder="이메일" id="useremail1"/>
            <label>@</label>
            <select id = "useremail2">
                <option value = "naver.com">naver.com</option>
                <option value = "gmail.com">gmail.com</option>
                <option value = "daum.com">daum.com</option>
            </select>
        </div>
        
        
        
        <div class = "row">
            <label class="lbl">나이</label>
            <input type="number" id="userage" placeholder="나이" />
        </div>
        
        <div style="margin-bottom: 15px;"></div>
        <hr />
        
        <div class = "row">
            <label class="lbl"></label>
            <!-- <input type="button" id="btn" value="회원가입" /> -->
            <!-- 위에꺼보다 아래꺼로 바로 함수로 가는게 좋음 -->
            <input type="button" onclick="handleInsert()" value="회원가입" />
        </div>

    </div>
    <script src="./js/axios.min.js"></script>
    <script>
        // 태그에서 userid인 것을 찾음
        const userid = document.getElementById('userid');
        const userpw = document.getElementById('userpw');
        const userpw1 = document.getElementById('userpw1');
        const username = document.getElementById('username');
        const useremail1 = document.getElementById('useremail1');
        const useremail2 = document.getElementById('useremail2');
        const userage = document.getElementById('userage');

        const idcheck = document.getElementById('idcheck');
        
        let idcheck1 = 0; // 아이디 중복확인용 임시 변수

        // 찾은 개체에 keyup이 반응하면 동작
        userid.addEventListener('keyup', async function(e){
            if(userid.value.length >=4){
                console.log(userid.value);
                const url = `http://1.234.5.158:23000/member101/idcheck.json?id=${userid.value}`;
                const headers = {"Content-Type" : "application/json"};
                //이미지 없으면 json으로 하면됨

                const response = await axios.get(url, {headers:headers});
                console.log(response.data);
                //백엔드에 aaaa, bbbb는 존재하는 아이디(결과1) cccc는 존재하지 않는 아이뒤(결과0)
                if(response.data.status === 200){
                    if(response.data.result === 1){
                        idcheck.innerHTML = 
                            `<font color="red">사용불가</font>`
                        idcheck1 = 0;
                    }
                    else {
                        idcheck.innerHTML = 
                            `<font color="green">사용가능</font>`
                        idcheck1 = 1; // 1일때만 유효성 검사 통과
                    }
                }
            }
            else{
                idcheck.innerHTML = '중복확인';
                idcheck1 = 0;
            }
        });

        async function handleInsert(){
            // 유효성 검사
            if(userid.value ===''){
                alert('아이디 입력하세요.');
                userid.foucus();
                return false; // 펑션 종료됨
            }

            if(idcheck1 != 1){
                alert('중복확인하세요.')
                userid.focus()
                return false;
            }

            const url = "http://1.234.5.158:23000/member101/insert.json"
            const headers = {"Content-Type" : "application/json"};
            const body = {
                id : userid.value,
                name : username.value,
                pw :  userpw.value,	
                email : useremail1.value + '@' + useremail2.value,	
                age : Number(userage.value),
            };
            const response = await axios.post(url, body, {headers});
            console.log(response.data);
            if(response.data.status ===200){
                alert('회원가입 되었습니다.')
            }
        }
    </script>
</body>
</html>

 

배운것

1. 나이 넣어보기 type=number

<div class = "row">
    <label class="lbl">나이</label>
    <input type="number" id="userage" placeholder="나이" />
</div>

 

2.
아이뒤가 데이터베이스에 중복인지 아닌지 체크

 

(자동으로 중복확인란이 바뀜)
4글자이상만 전달
response로 백엔드와 소통
백엔드에 aaaa, bbbb는 존재하는 아이디(결과1) cccc는 존재하지 않는 아이뒤(결과0)
결과를 토대로 1이 나오면 사용불가, 0이 나오면 사용가능

// 찾은 개체에 keyup이 반응하면 동작
userid.addEventListener('keyup', async function(e){
    if(userid.value.length >=4){
        console.log(userid.value);
        const url = `http://1.234.5.158:23000/member101/idcheck.json?id=${userid.value}`;
        const headers = {"Content-Type" : "application/json"};
        //이미지 없으면 json으로 하면됨

        const response = await axios.get(url, {headers:headers});
        console.log(response.data);
        //백엔드에 aaaa, bbbb는 존재하는 아이디(결과1) cccc는 존재하지 않는 아이뒤(결과0)
        if(response.data.status === 200){
            if(response.data.result === 1){
                idcheck.innerHTML = 
                    `<font color="red">사용불가</font>`
            }
            else {
                idcheck.innerHTML = 
                    `<font color="green">사용가능</font>`
            }
        }
    }
    else{
        idcheck.innerHTML = '중복확인';
    }
});

 

3. 회원가입 정보 서버로 업로드시키기

async function handleInsert(){
    const url = "http://1.234.5.158:23000/member101/insert.json"
    const headers = {"Content-Type" : "application/json"};
    const body = {
        id : userid.value,
        name : username.value,
        pw :  userpw.value,	
        email : useremail1.value + '@' + useremail2.value,	
        age : Number(userage.value),
    };
    const response = await axios.post(url, body, {headers});
    console.log(response.data);
    if(response.data.status ===200){
        alert('회원가입 되었습니다.')
    }
}

 

4.유효성 검사

백엔드 연동부분은 항상 마지막에 와야함.

let idcheck1 = 0; // 아이디 중복확인용 임시 변수

async function handleInsert(){
    // 유효성 검사
    if(userid.value ===''){
        alert('아이디 입력하세요.');
        userid.foucus();
        return false; // 펑션 종료됨
    }

    if(idcheck1 != 1){
        alert('중복확인하세요.')
        userid.focus()
        return false;
    }
}

 

 

 

 

 

오후일과

login1

main1

logout1

mypage1

 

 

-login1

<!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>로그인</title>
    <link href="./css/join1.css" rel="stylesheet" />
</head>
<body>
    <div class = "container">
        <h3>로그인</h3>
        <hr />
        <div class="row"><!-- 아이디 -->
            <label class="lbl">아이디</label> <!-- label에서 style이 안먹힘(인라인 형식) -->
            <input type="text" id="userid" placeholder="아이디" autofocus/>
        </div>
        
        <div class="row"><!-- 비밀번호 -->
            <label class="lbl">암호</label>
            <input type="password" id="userpw" placeholder="암호"/>
        </div>

        <div style="margin-bottom: 15px;"></div>
        <hr />
        
        <div class = "row">
            <label class="lbl"></label>
            <!-- <input type="button" id="btn" value="회원가입" /> -->
            <!-- 위에꺼보다 아래꺼로 바로 함수로 가는게 좋음 -->
            <input type="button" onclick="handleLogin()" value="로그인" />
        </div>

    </div>
    <script src="./js/axios.min.js"></script>
    <script>
        const userid = document.getElementById('userid');
        const userpw = document.getElementById('userpw');
        async function handleLogin() {
            //유효성 검사
            if(userid.value ===''){
                alert('아이디 입력하세요.');
                userid.focus();
                return false; // 펑션 종료됨
            }

            if(userpw.value ===''){
                alert('암호 입력하세요.');
                userpw.focus();
                return false; // 펑션 종료됨
            }
        

            //유효성 검사 후 백엔드 호출
            const url = "http://1.234.5.158:23000/member101/select.json";
            const headers = {"Content-Type" : "application/json"};
            const body = {
                id : userid.value,
                pw : userpw.value
            };
            console.log(body);
            const response = await axios.post(url, body, {headers});
            console.log(response.data);
            if(response.data.status === 200){
                alert('로그인 되었습니다.')
                sessionStorage.setItem("TOKEN", response.data.result);
                window.location.href = "main1.html";
            }
            if(response.data.status !== 200){
                alert('잠시만 기다려주세요.')
            }
            
        }
    </script>
</body>
</html>

회원가입 join1에서 뺄거 다 뺴고
로그인html에 스크립트 넣으면 됨.

 

크롬 어플리케이션 세션 스토리지 처음 배움.
크롬 어플리케이션 세션 스토리지에 로그인 정보 저장
토큰을 잃어버리면 강제로 로그아웃됨.

만들을때 sessionStorage.setItem("TOKEN", response.data.result);

가져올때 const token = sessionStorage.getItem("TOKEN");

 

 

 

-main1

<!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>메인</title>
    <link href="css/main1.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <header> <!-- div사용해도 되는데 알아보기 쉽게 header 아래도 마찬가지 -->
            <h3>header</h3>
        </header>
        <section><!-- 섹션 자체가 가로로 배치하기위한 것을 가지고 있어야함 -->
            <nav>
                <p>메뉴</p>
                <ul></ul>
            </nav>
            <article>
                <p>내용들</p>
                <table>
                    <!-- 테이블 만들기 -->
                </table>
            </article>
        </section>
        <footer>
            <h5>footer</h5>
        </footer>

    </div>
    <script>
        const token = sessionStorage.getItem("TOKEN");
        console.log(token);

        const ul = document.getElementsByTagName('ul');

        if(token === null){ // 로그인x
            ul[0].innerHTML =
                `<li><a href="login1.html">로그인</a></li>`+
                `<li><a href="join1.html">회원가입</a></li>`;
        }
        else{ // 로그인o
            ul[0].innerHTML =
                `<li><a href="mypage1.html">마이페이지</a></li>`+
                `<li><a href="logout1.html">로그아웃</a></li>`;
        }
    </script>
</body>
</html>

디자인은 쓰던거 들고왔음.

로그인후 메인으로 이동

로그인후 로그아웃 및 마이페이지 뜨게 만들어 줬음.
ul태그 생략하고 스크립트에서 짜기

-logout

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        if(confirm('로그아웃 할거요??')){
            sessionStorage.removeItem("TOKEN");
        }
        window.location.href="main1.html";
    </script>
</head>
<body>
    
</body>
</html>

 

수업 들으면서 가장 짧게 짜본 스크립트

짜잘한거 다 잘라낸 모습이다.

 

-mypage1 (admin 심화 실습)

<!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>
    <link href="./css/join1.css" rel="stylesheet" />

</head>
<body>
    <div class="container">
        <a href="mypage1.html?menu=0"><button>회원정보변경</button></a>
        <a href="mypage1.html?menu=1"><button>비밀번호변경</button></a>
        <a href="mypage1.html?menu=2"><button>회원탈퇴</button></a>
        <hr />
        <div id = "menu1" class="menu">
            <h3>회원정보변경</h3>
            <!-- 토큰, 이름, 나이 정보를 보내서 변경 -->
            <label class="lbl">이름</label>
            <input type="text" id="username" placeholder="이름" autofocus/>
            </br>
            <label class="lbl">나이</label>
            <input type="number" id="userage" placeholder="나이" autofocus/>
            <hr/>
            <button onclick="handleUpdate()">변경</button>
        </div>

        <div id = "menu2" class="menu">
            <h3>비밀번호변경</h3>
            <!-- 토큰, 현재비번, 바꿀 비번, 바꿀 비번 확인 -->
            <label class="lbl">현재비번</label>
            <input type="password" id="userpw" placeholder="현재비번" autofocus/>
            </br>
            <label class="lbl">바꿀비번</label>
            <input type="password" id="new_userpw" placeholder="바꿀비번" />
            </br>
            <label class="lbl">바꿀비번 확인</label>
            <input type="password" id="new_userpw1" placeholder="바꿀비번 확인"/> <!-- 오토포커스 하나만 -->
            <hr/>
            <button onclick="handleUpdatepw()">변경</button>
        </div>

        <div id = "menu3" class="menu">
            <h3>회원탈퇴</h3>
            <!-- 토큰, 현재비번 -->
            <label class="lbl">현재비번</label>
            <input type="password" id="userpw" placeholder="현재비번" autofocus/>
            <hr/>
            <button onclick="handleDelete()">회원탈퇴</button>
        </div>
    </div>


    <script src="./js/axios.min.js"></script>


    <script>
        const userid = document.getElementById('userid');
        const userpw = document.getElementById('userpw');
        const userpw1 = document.getElementById('userpw1');
        const new_userpw = document.getElementById('new_userpw');
        const new_userpw1 = document.getElementById('new_userpw1');
        const username = document.getElementById('username');
        const useremail1 = document.getElementById('useremail1');
        const useremail2 = document.getElementById('useremail2');
        const userage = document.getElementById('userage');
        const idcheck = document.getElementById('idcheck');



        console.log(window);
        const href = new URL(window.location);
        const urlParam = href.searchParams;
        const menu = urlParam.get("menu");
        const menus = document.getElementsByClassName("menu");

        for(let i=0; i<menus.length; i++) {
            console.log(i);
            menus[i].style.display = "none";
        }

        const idx = Number(menu); 
        menus[idx].style.display = "";

        

        


        // 회원정보수정
        async function handleUpdate(){
            const url = `http://1.234.5.158:23000/member101/update.json`;
            const headers = {
                "Content-Type":"application/json",
                "auth" : sessionStorage.getItem("TOKEN")
            };
            const body = {
                name : username.value, 
                age : Number(userage.value),
            };
            const response = await axios.put(url, body, {headers});
            if(response.data.status === 200){
                alert('변경되었습니다.')
            }
            else {
                alert('요청 실패되었습니다.')
            }
        }


        // 비밀번호변경
        async function handleUpdatepw(){
            //유효성 검사
            if(new_userpw.value !== new_userpw1.value){
                alert('변경할 비밀번호를 같게 입력해주세요');
                new_userpw.focus();
                return false; // 펑션 종료됨
            }
            const url = `http://1.234.5.158:23000/member101/updatepw.json`;
            const headers = {
                "Content-Type":"application/json",
                "auth" : sessionStorage.getItem("TOKEN")
            };
            const body = {
                pw : userpw.value,
                newpw : new_userpw.value //모르겠음
            };
            const response = await axios.put(url, body, {headers});
            if(response.data.status === 200){
                alert('변경되었습니다.')
            }
            else {
                alert('요청 실패되었습니다.')
            }
        }

        // 회원탈퇴
        async function handleDelete(){
            const url = `http://1.234.5.158:23000/member101/delete.json`;
            const headers = {
                "Content-Type":"application/json",
                "auth" : sessionStorage.getItem("TOKEN")
            };
            const body = {
                pw : userpw.value
            }
            console.log(body);
            const response = await axios.delete(url, {headers:headers, data:body});
            console.log(response.data.status);
            if(response.data.status === 200){
                alert('탈퇴 되었습니다.')
                sessionStorage.removeItem("TOKEN");
                window.location.href = "main1.html"
            }
            else {
                alert('요청 실패되었습니다.')
            }
        }


        // function handleUpdate(no){
        //     const url = `http://1.234.5.158:23000/member101/update.json?no=${no}`
        //     const headers = {
        //         "Content-Type" : "application/json",
        //         "auth" : sessionStorage.getItem("TOKEN")
        //     };
            // const body = {
            //     name : 실제입력값,
            //     age : 실제입력값
        //     };


        //     axios.put(url).then(function(response) {
        //         console.log(response);
        //         if(response.data.status === 200) {
        //             alert('수정 되었습니다.');
        //             // 백엔드의 삭제를 호출하고 성공 시
        //             window.location.href = "mypage1.html?menu=0";                }
        //     });
            
        // }



    </script>
</body>
</html>

굉장히 애 먹었음.

회원탈퇴가 안되서 비밀번호의 타입 문제인줄 알았으나,

 

내가 좀 편하게 회원가입후 로그인 하려고 바로 회원가입에 

sessionStorage.setItem("TOKEN", response.data.result);
window.location.href="main1.html"

존재하지도 않는 토큰을 받아오고 메인화면으로 나가는 바람에

마이페이지가 작동되지 않음.(신분증도 술집 입장한 격)

 

머리가 조금 띵했음.

 

admin과 달리 펑션마다 await axios를 사용했다.

'html' 카테고리의 다른 글

국비 코딩 풀스택 수업 5일차  (0) 2022.06.27
국비 코딩 수강전 준비  (0) 2022.06.24
국비 코딩 풀스택 수업 4일차  (0) 2022.06.24
국비 코딩 풀스택 수업 3일차  (0) 2022.06.23
국비 코딩 풀스택 수업 2일차  (0) 2022.06.22

'html'의 다른글

  • 현재글국비 코딩 풀스택 수업 6일차

관련글

댓글

티스토리툴바