💭 쿠키의 구성// 기본 쿠키 설정document.cookie = "username=John Doe";// 쿠키에 만료일을 추가document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT";// 도메인, 경로, 보안 설정document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/; domain=example.com; Secure; HttpOnly";ChatGPT가 알려준 cookie의 구성 모습입니다. cookie를 삽입할 때, 다양한 형태로 저장하게 되는데, 왜 이런 형태가 나왔는지를 알아보도록 하겠습니다. 💭 쿠키의 기본 규칙// 기..
🥠 Promise 코드 사용하기//promisefunction gogo() { console.log('start'); let pro = new Promise((resolve, reject) => { let success = false; if(success) { //성공 resolve('this is success'); } else { reject('fail'); } }); pro.then(resolve => { console.log(resolve); }) .catch(reject => { console.log( reject); }) ..
AXIOS으로 파일 보내기 axios로 파일을 보내기 위해서는 간단하게 알아야 할 것이 있다. FormData라는 객체이다. Object처럼 Key와 Value로 이루어져 있지만, 데이터를 넣는 방법은 append를 이용해야 한다. let formData = new FormData(); console.log(formData); formData.append('input', this.inputText); formData.append('inputFile', document.getElementById('input File ID').files[0]); 여기서 중요한 점은 FILE을 formData안에 append 한다는 부분이다. try { axios.post('http://localhost:3000/fileIn..
시작하기 전에 알아두면 좋은 기초지식 JavaScript - Object 만들기 2023.06.01 - [Web/JavaScript] - [JavaScript] Object 만들기 [JavaScript] Object 만들기 JavaScript, Object 만들기 Object 만들기 Object란, 하나의 변수 안에 여러 개의 값을 담는 것을 뜻 한다. 보통 Java에서 유명한 dataType은 String 혹은 int(number)가 있다. 이들은 각각 하나의 변수 안에 하나의 mollangpiu.tistory.com CallBack 함수 배우기 전 CallBack 함수를 알기 전에 JavaScript의 실행순서에 대해서 먼저 짚고 넘어가야 합니다. 또한 이를 온전히 사용하기 위해서는 JavaScrip..
화면 여기에 Button '버튼' 하나만 있는 화면이 있다. 저 화면을 누를 경우, JavaScript에서 Object를 생성할 것이고, 그 Object가 console창에 log를 남기게 된다. log의 내용은 다음과 같다. Object 변수에는 객체에 'a'에는 '몰라', 'b'에는 '피노키오'를 담았다. 그리고 test라는 Object를 또 하나를 생성하게 되는데, 여기에는 기존의 Object를 담게 된다. test는 Object의 변수에서 값을 가져왔기 때문에 Object의 내용과 일치하게 된다. 그리고 test에서 'a'의 키를 변경했을 때, Object의 변화를 알아보는 실험이다. 변경은 test 변수에서 했기 때문에 Object에서는 변화가 있어서는 안 된다. 그러나 Object 또한 tes..
Date function nowToday() { let today = new Date(); console.log(today); } 오늘 이 시간, 2023년 6월 5일에 글을 작성하였다. Date를 사용하는 방법은 위와 같다. Date 타입은 매우 특이하다. 날짜를 불러올 때 매우 뒤죽박죽이기에 귀찮은 함수 중 하나이다. let year = today.getFullYear(); // 년도 console.log(year); let month = today.getMonth() + 1; // 월 console.log(month); let date = today.getDate(); // 날짜 console.log(date); 여기서 특이한 부분, 월을 가져올 때는 +1을 해야 원하는 값을 불러올 수 있다. 이 ..
Object 길이 확인 방법 화면과 같이 obj 변수 안에 여러개의 key가 삽입된 경우라고 과정을 해보자. Object의 길이는 몇일까? 길이는 3개가 나온다. Object의 길이는 Object가 담고 있는 Key의 갯수를 의미한다. 따라서 이를 응용한다면 다음과 같다. Object가 담고 있는 Key 불러오기 length를 제외한다면, key의 목록이 나타나지 않을까? 그리고 그 생각은 정답이다. Object가 담고 있는 Key에 대한 목록을 볼 수 있는 것을 확인 할 수가 있다.
JavaScript, Object 만들기 Object 만들기 Object란, 하나의 변수 안에 여러 개의 값을 담는 것을 뜻 한다. 보통 Java에서 유명한 dataType은 String 혹은 int(number)가 있다. 이들은 각각 하나의 변수 안에 하나의 결괏값만 담고 있기에 가독성은 뛰어날 수는 있지만 변수명이 많아질수록 이들을 관리하는 것은 점차 힘들어짐과 동시에 데이터가 어디서 존재하는지 파악하기 조차 쉽지 않은 경우가 발생된다. 또한 데이터간의 그룹화가 존재할 수가 있는데, 기본 변수만으로 이를 표현하기란 변수명과 주석이 한계이므로 데이터의 공유 또한 문제가 생길 수가 있다. 이를 어느정도 최소화 할 수 있는 것이 Object이다. 보통 Key와 Value로 구성되어 있으며 변수 안에 Key..
문자열을 변경하는 Method 이다. 🗒️ 사용 방법 let str = '대상 문자열'; str.replace([변경 전 문자], [변경 후 문자]); replace는 첫 번째 문자만 변경한다. replace는 정규식을 사용할 수 있다. 전체 변경하기 let str ='12121212'; str.replaceAll('12', '34'); replaceAll은 변경 대상이 된 문자를 모두 변경할 수 있다. replaceAll은 InternetExpler에서는 사용되지 않는다. ⭐ 효율적인 전체 변경방법 let str = '몰랑몰랑 피우의 블로그'; console.log(str); console.log(str.replace('몰랑', '변경 된 ')); str = str.replace(/몰랑/g, '환영 합..
지도 배경 변경하기 카카오지도 맵 타일 변경하기, 감추기 카카오 지도를 불러왔다. 그러나 여기서 중요한 것은 서울시에 대한 저 하얀색 부분이며, 그 외는 중요하지가 않다. 그래서 저 지도를 어떻게하면 좋을까 생각하다가 만들어진 방법이다. 첫 번째 방법, 오버레이 적용 카카오지도에 오버레이 적용 카카오 지도에 오버레이 기능을 적용하여 만들었다. 지도 위에 커튼막을 세워서, 가려주는 기법이다. 보통 이런 가리는 용이 아니라서 그런지 지도의 확대, 축소 할 때마다 지도가 보이는 것을 알 수 있다. 해당 소스는 카카오지도 API SCRIPT만 제외하고 올린 소스이다. 오버레이 기능을 활용하고 싶다면 해당 소스를 이용하면 된다. 위 방법은 html의 div과 css방법을 사용해서 지도를 가리는 방법이다. 두 번째..
KAKAO지도, 지도 중심좌표 부드럽게 이동 kakao 지도 부드럽게 이동하기 지도 중심좌표 이동시키기 지도 중심좌표 부드럽게 이동시키기 카카오 지도 LIB 설명서 중, function panTo() { } 라는 함수가 있다. map.setCenter()와 다르게, map.panTo()는 특정 조건이 맞는다면 지도의 이동 애니메이션을 줄 수 있는 함수이다. 카카오 라이브러리가 제공하는 기능 panTo 함수는 움직임을 좋게 만드는 만큼 아쉬움이 있었다. 속도가 조금 더 느리다면, 뭔가 그럴듯한 Effect를 남길 것 같았다. var moveLatLon = new kakao.maps.LatLng(lat, lon); map.panTo(moveLatLon, { animate: { duration: 550 } }..
OpenLayer, 좌표계 변환하기 좌표 변환하기 바둑과 체스 그리고 그래프에는 좌표가 있다. 지도 또한 마찬가지로 부르는 명칭마다 다르지만, 위도하고 경도가 대표적이다. 문제는 어디서 사용하고 표시하느냐에 따라서 좌표 표기법이 달라진다. 우리나라 사람이 위도에 대해서 잘 모르지만, 남북 경계선인 38선은 알고 있다. 위도 38도 쯤에 위치한다고 해서 불러진 명칭이다. 이를 토대로 지도를 조금 관심 있다면 우리나라 위치는 위도 약 33 ~ 38 쯤에 위치한 것을 알 수 있다. 그러나 위의 사진에서는 어디에도 33 ~ 38에 대한 숫자는 없다. 이 이유는 좌표계가 다르기 때문이다. 좌표계 변환하는 방법 좌표 변환을 하기 위해서는 필요한 파일은 3가지다. ol에 대한 정보와, 좌표계정보를 담고 있는 js 파..
JavaScript, 현재 시간 가져오기 현재시간 가져오기 JAVASCRIPT에서 날짜로 불러오는 방법은 new Date(); 사용하면 된다. today : Wed Dec 07 2022 00:11:58 GMT+0900 (한국 표준시) Date(); 사용할 경우 결과는 다음과 같이 출력된다. 해당 데이터는 PC 시간 기준으로 결정이 된다. year : today.getFullYear(); // 현재 년도를 YYYY로 불러온다. month : today.getMonth()+1; // 현재 월을 M으로 불러온다. date : today.getDate(); //현재 날짜를 DATE로 불러온다. day : today.getDay(); //현재 요일을 불러온다. (일요일 0부터 시작한다.) 여기서 특이한 부분이 있..
Optional Operator mollang.first; // Null일 경우 Error 발생 mollang?.first;//Null일 경우 undefined 반환 JavaScript에서 Null일 경우 Error가 발생되어 JS의 동작이 원활하게 되지 않는 경우가 발생된다. 이를 해결하기 위해서는 객체를 호출할 때, 점 앞에 물음표를 넣기만 하면 된다. 만약, 값이 없을 경우 undefined 를 반환하므로 Error를 무시할 수 있다.
Jquery, Hover 기능 만들기 Hover 기능 특정 영역에 마우스를 올렸을 때 발생되는 Event를 Hover라고 부른다. 카테고리, 메뉴 혹은 마우스 올렸을 때 , 사용자에게 강조하기 위해 많이 사용하며 CSS 외에 Jquery를 통해서 Hover기능을 추가할 수도 있다. Hover 기능 사용하기 //Hover 추가하기 //마우스 올렸을 때 발생되는 이벤트 $(Hover대상).hover(function() { $(this).css('background', 'green'); }, //마우스가 영역 바깥으로 나갔을때 발생되는 이벤트 function() { $(this).css('background', 'white'); }) 만약 Hover대상에 마우스가 올려갔을 경우, 배경이 초록색으로 변한다. 그..