Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS (v)
06. 미니프로젝트-2W (v)

08. SpringFramework , SrpingBoot
09. React JS [Front-end]
10. 중간프로젝트 (1M)
11. Linux 명령어
12. AWS 클라우드
13. DevOps - Docker
14. App - Android
15. 최종프로젝트 (1M)

JS(Java Script)

DOM & BOM

BOM(Browser Object Model)

location 객체

자바스크립트 페이지 이동 location.href = 주소

자바스크립트 새로고침 location.reload()

history 객체

기록이동 history.go(-1)
뒤로가기 history.back()
새로운기록추가 history.replaceState(저장할데이터,바꿀제목,바뀐주소)
페이지데이터 history.state

   <button type="button" onclick="location.href='index06_ok.html';">ok 이동하기</button>

   <button type="button" onclick="some()">기록변경하기</button>
   <script>
       function some(){
           // history.pushState(null,'','변경.html'); // 데이터, 이름 , URL주소 -- 브라우저의 기록을 추가
           // history.replaceState('','null','변경.html'); // 현재 브라우저의 기록을 변경

           history.replaceState('data',null,null);

           // 첫번째 매개변수의 값은 state라는 속성에서 확인이 가능

       }
       if(history.state=='data'){
               alert('사용자가 뒤로가기로 돌아옴을 감지할 수 있음')
       }
   </script>

navigator객체

함수	설명
appName()	브라우저의 이름을 얻어옴
geolocation.getCurrentPosition()	현재위치 정보를 얻어옴

   <script>
       // console.dir(navigator);
       var userAgent =navigator.userAgent.toLowerCase();

       // console.log(navigator);

       if(userAgent.indexOf('edg')!=-1){
           console.log('엣지를 통해서 접속함');
           
       }else if(userAgent.indexOf('firefox')!=-1){

           console.log('파이어 폭스를 통해서 접속함');
           
       }else if(userAgent.indexOf('chrome')!=-1){
           console.log('크롬을 통해서 접속함');
           
       }else if(userAgent.indexOf('mobile')!=-1){
           alert('모바일 환경으로 접속함')
       }

   </script>

   <script>

       function success(position){
           console.log("위도 : "+ position.coords.latitude);
           console.log("경도 : "+position.coords.longitude);
       }

       function fail(){
           alert('브라우저에서 위치정보를 허용해 주세요');
       }

       (function(){
           // console.dir(navigator.geolocation)
           //콜백함수 - 콜했을 떄, 결과를 백 받을수 있는 함수
           navigator.geolocation.getCurrentPosition(success,fail);
       })();
   </script>

서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각
브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송
쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용

   쿠키이름 : <input type="text" id="name">
   쿠키 값 : <input type="text" id="value">

   <button type="button" onclick="createCookie()">쿠키생성</button>
   <button type="button" onclick="getCookie()">쿠키확인</button>

   <script>
       var cookieName = document.getElementById('name');
       var cookieValue = document.getElementById('value');
       
       function createCookie(){

           // 시간 설정
           var date = new Date();
           date.setDate(date.getDate()+1);
           date.setHours(9);
           date.setMinutes(0);
           date.setSeconds(0);
           date.setMilliseconds(0);

           console.log(date);
           
           // 쿠키생성
           var cookie = cookieName.value+ "=" + cookieValue.value+";expires="+date.toUTCString();

           // console.log(cookie);
           
           document.cookie= cookie;
       }
       var find  = "찾을값";
       function getCookie(){
           var cookies = document.cookie.split(';');
           for(var i in cookies){
               console.log(cookies[i]);
               if(cookies[i].indexOf(find)!=-1){ // 찾을값이 존재함
                   var result = cookies[i].replace(find+"=",""); // 찾을값= 을 없앰
                   // alert(cookies[i].substr(cookies[i].indexOf("=")+1));
                   console.log(result);
               }
           }
       }
   </script>

Session

Session Storage는 브라우저의 저장소 중 하나로, 브라우저 탭이 열려있는 동안 데이터를 저장할 수 있는 방법
사용자가 브라우저 탭을 닫을 때까지 데이터가 유지

    <h3>localStorage와 sessionStorage가 있습니다</h3>

    <!-- 
    localStorage는 영구히 저장되는곳
    sessionStorage는 브라우저를 종료할 때까지 저장되는 곳
    두개의 사용방법은 같음
    -->


    <div class="list">
        <img src="1.jpg" alt="봄" width="300">
        <img src="2.jpg" alt="여름" width="300">
        <img src="3.jpg" alt="가을" width="300">
        <img src="4.jpg" alt="겨울" width="300">
    </div>

    <a href="index02_ok.html">최신정보확인하기</a>

    <script>
        var list = document.querySelector('.list');
        list.addEventListener('click',function(){
            if(event.target.tagName!="IMG") return;

            setStorage(event.target);
        })

        var arr = new Array(); // 빈 배열
        function setStorage(img){
            
            // img.src값을 저장
            // setItem - 저장
            // getItem - 얻기
            // removeItem - 삭제
            // clear - 전부삭제


            // 기존에 like스토리지가 있다면, 기존 like를 가져와서 사용
            if(sessionStorage.getItem('like') !=null) { // 기존 like가 있다는 의미
               arr = JSON.parse(sessionStorage.getItem('like'))
            }
            
            // 길이가 2이상이라면 배열의 값을 하나 지움
            // 앞에서 제거 - shift

            if(arr.length>=2){
                arr.shift();
            }

            arr.push(img.src);
            
            

            sessionStorage.setItem('like',JSON.stringify(arr));

        }
    </script>