2021.03.01 계획

안녕하세요! 벌써 2월이 끝나고 3월의 첫날이네요. 오늘은 하루종일 비가 와서 아무것도 하고싶지 않은 날입니다.. 점심먹고 낮잠을 자고 이제서야 시작을 합니다.

 

 

---

계획 List

● 공부

MyShop

- Review 다중 파일(이미지) 업로드 (JavaScript) ✔

- 카트(장바구니) 부분  ✔ (내일 다시)
- Order 주문취소 ✔ (내일 다시)
폴링 X
Vue 복습 응용 정리  ✔

 

 

● 이외

9시 기상 ✔

Tistory 계획 작성 ✔

 

---

● Review 다중 파일(이미지) 업로드 (JavaScript)

 

아이디어

사진 여러 장을 올리면 URL.createObjectURL 을 사용해서 for 문으로 파일 정보를 가져온 다음 각각 Button 돔과 img돔을 만들어서 Button 돔 안에 img 돔을 각각 다른 className으로 넣어 준 다음 버튼을 클릭하면 36번째 줄을 이용해 이미지돔과 실제 이미지가 들어있는 fileList 에서 삭제 해 줌

 

문제점

20번째 줄에서 문제가 발생하였다. 예를 들어 3개의 이미지가 있으면 모든 className 이 "cancel2"로(똑같이) 들어가는 것.

예전에 돔을 사용해서 쇼핑몰 상품 추가를 만들었을 때를 기억해보면 하나의 addEvent에 하나의 DOM을 생성해서 관리하였는데 여기서는 하나의 Event 안에서 for 문으로 여러 개의 DOM을 만들어서 똑같은 DOM으로 인식하는 건지..? 이유를 모르겠다.

 

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>    
    <script>
        const inputEl = document.querySelector('input')
 
        const fileList = []
 
        inputEl.addEventListener('change', (e) => {
 
            //$(".imgList").empty();
 
            for(var i = 0; i<e.target.files.length; i++){
 
                alert(i)
 
                fileList.push(e.target.files[i])
                
                var blobUrl = URL.createObjectURL(e.target.files[i])
                
                const buttonDOM = document.createElement('button')
                buttonDOM.className = "cancel" + i
                
                buttonDOM.id = 'cancelBtn'
 
                document.querySelector('.imgList').appendChild(buttonDOM)
 
                const imgDOM = document.createElement('img')
                imgDOM.className = "img"
                imgDOM.src = blobUrl
 
                document.querySelector('.cancel' + i).appendChild(imgDOM)
 
 
                var canelBtnEl = document.querySelector(".cancel" + i)
                var imgListEl = document.querySelector(".imgList")
 
                canelBtnEl.addEventListener('click', (e) => {
                    alert(canelBtnEl.className)
                })
            }
 
            console.log(fileList)
        })
 
        
        
    </script>

 

 

---

 

카트(장바구니) 부분 feat.(쿠키, 세션)

세션을 이용해서 비회원, 회원 카트를 구현하려고 했으나 구글링을 해도 괜찮은 정보를 찾지 못하였다.

쿠키와 세션에 대해서 찾아보니 쿠키, 세션 모두 서버에서 발급을 하지만 쿠키는 클라이언트(브라우저)가 Data를 가지고 있고 세션은 서버에서 관리를 한다는 정보를 얻을 수 있었다. 장바구니는 쿠키로 만들어야 될 것 같다.

 

 

아래와 같은 방법으로 쿠키를 발급할 수 있다.

Cookie cookie = new Cookie("cookieName", cookieValue);
 
myCookie.setMaxAge(//초단위 시간 설정);
myCookie.setPath("/"); // 경로 설정
response.addCookie(cookie);

 

아래와 같은 방법으로 쿠키를 가져 올 수 있다.

 

List<Cookie> cookies = request.getCookies();
 
for(int i = 0; i < myCookies.size; i++) {
    System.out.println(i + " : 쿠키 이름: " + cookies[i].getName());
    System.out.println(i + " : 쿠키 값: " + cookies[i].getValue());
}

 

 

아이디어

클라이언트가 접속을 하면 Interceptor 부분에서 쿠키 확인 및 발급을 해줌.

 

실행 결과

인터셉터에 Response로 쿠키 발급을 하지 않았는데 request.getCookies(); 를 통해 쿠키를 가져올 수 있었다. 사용자가 접속 시 자동으로 쿠키가 발급되는 것처럼 보인다. 그럼 Interceptor 부분에서 따로 발급해 줄 필요가 없어 보임.

 

쿠키

 

아이디어

CartController에서 회원, 비회원을 확인해서 처리해 주면 될듯하다.

 

회원 : 카트 테이블에 User 넣어줌

비회원 : 임시 카트 테이블에 쿠키 정보와 장바구니 목록들을 넣어줌

 

 

DB 아이디어

회원카트, 비회원카트 따로만들어서 비회원카트는 기간을 정해 삭제하면 될 듯.

 

 

 

DB, Controller 는 내일 만들어야겠다.

 

 

---

 

Order 주문취소

아이디어

Cascade on delete로 JPA 설정이 되어있을 경우 Order를 삭제하면 Orderinfo도 삭제되지만... 클라이언트가 n 번째 주문 n 번째 상품을 취소할 수 있기 때문에 OrderController, OrderinfoController 모두 취소 부분을 만들어줘야 할듯하다.

 

 

찾아보니 OneToMany 관계에서 One 쪽에 CascadeType.ALL 을 사용하면 Cascade 관계 설정 가능.(구글링)

(Many 쪽에도 설정해야 되는지 잘 몰라서 확실하지 않음)

One 쪽에는 웬만하면 하위 인스턴스를 생성하지 않는다고 배웠는데 모든 Cascade 관계를 One 쪽에 설정하면 불필요한 필드들이 너무 많이 생기지 않을까?

라는 생각을 하면서 구글링을 더 해보니 모두 One 쪽에 Cascade 설정을 했다.

 

그러면 Order 테이블에 List<Orderinfo> 를 만들어서 CascadeType.ALL 을 설정하면 될 것 같은데..

여기서 조금 혼란이 오기 시작했다.. Cascade가 필요한 모든 테이블은 One 쪽에서 Many의 테이블을 가지고 있어야 하는 건가..? New Order을 만들때도 무조건 List<Orderinfo>들을 생성자 주입해 줘야 하는 건가?

 

일단 해보자.

 

 

 

필드를 만들었으나 orderinfos를 만드는 과정에서 에러가 났다. JPA에 대한 공부와 이해가 더 필요하다.

 

 

---

 

Vue 복습 응용 정리

Vue.js 를 블로그 한 곳에 총정리 하려고 했으나 개념 1개씩 따로 포스팅하는 게 좋아 보인다. 오늘은 복습 및 응용 연습만 하도록 해보자.

 

 

설명 생략.

 

<!DOCTYPE html>
<html lang="ko">
<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 id="page1">
        <h1>오늘 계획List</h1>
 
        <!-- 입력 부분 -->
        <input v-model="todo"/>
        <button v-on:click="addTodo">계획 추가</button>
 
        <ul v-for="todoItem in todoItems">
            <li>{{ todoItem.title }}</li>
        </ul>
 
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: "#page1",
                data: {
                    todo: "",
                    todoItems: []
                },
                methods: {
                    addTodo: function(){
                        const todoItem = {
                            title: this.todo
                        }
                        this.todoItems.push(todoItem)
                        this.todo = ""
                    }
                }
            })
        </script>
    </div>
</body>
</html>

 

---

 

생각보다 많이 못 했다 오후 낮잠 자기 전까지는 거의 하지 않았다. 일단 시작하고 보는 실행력이 중요할 것 같다.

 

자기 전에 시간이 남으면 ReviewController 의 JSP 부분도 만들어 줘야겠다. 그리디 알고리즘 익히기까지.

 

 

 

" 괴로울 일이 없다 "

- 석가모니 -

 

youtu.be/WbF_d16ctio