JavaScript의 변수 JavaScript의 변수 JavaScript에서 데이터를 다루기 위해서는 변수가 존재한다. 만약, Java를 배웠다면 int, char을 배웠을 것이다. 마찬가지로 JavaScript에도 변수가 존재하는데, 이는 var이다. var은 정수, 문자, 실수, true 등 모든 것을 담을 수 있는 편의를 제공한다. var은 숫자도 문자도 모두 표현할 수 있는 것을 확인할 수 있다. 여기서 주목할 점은, JavaScript는 문자와 숫자를 임의로 변경하므로 반대로 말하면 변수 타입이 불안정하게 저장된다는 뜻을 나타낸다. let과 const 그렇다면 정말로 var만 사용할까? 만약 이런 질문을 받는다면, No 다. var은 어디까지나 javascript의 입문 혹은 과거에 사용하던 변..
[JavaScript] JavaScript의 기초 JavaScript HTML과 같이 쓰는 친구로 객체 기반의 스트리트 언어이다. 정적인 HTML을 동적으로 변환시키고, 다양한 접근 방식으로 웹의 편의를 높여준다. Java와 언어와 유사하여, Java를 할 줄 안다면 반은 먹고 들어가는 언어이다.다만 Java와는 다르게 JavaScript는 자동으로 개발자의 편의를 지원하다 보니 차이가 존재할 수 있다는 것은 꼭 명심해야 한다. JavaScript 사용 방법 JavaScript는 보통 body 태그의 마지막에 위치한다. JavaScript가 종종 HTML문구를 불러오지 못하는 경우가 발생하는데, 이를 해결하기 위해서 body 끝부분에 안착시킨다. html을 실행할 경우, JavaScript에 작성된 글이..
[공유기] IP 포트 포워딩하는 방법 포트 포워딩하는 이유 외부에서 해당 pc나 서버 등 장비로 접속하기 위해서는 IP가 필요하다. 그러나 고정 IP의 경우 개수가 무한정이 아니라서 비용 문제가 발생한다. 이를 여러 개를 구입하는 경우도 있지만, 대부분은 한 개만 구입해서 공유기를 통해 여러 개로 나뉘어 사용한다. 이 방법을 사용하기 위해서는 공유기가 필요하다. 해당 방법에 사용된 공유기는 IP Time이다. 공유기 접속하기 공유기에서 포트 포워딩을 하기 위해서는 반드시 공유기에 접속해야 한다. 주소창에 192.168.0.1이라고 입력하면 웬만한 공유기는 접속 화면이 출력된다. 아이디, 비밀번호 분실 시 공유기를 초기화하지 않는 이상 비밀번호를 되찾을 수 없다.그러므로 무작정 초기화하지 말고 공유기를 껐..
[Linux, CentOS] 서버 SSH 접근환경 만들기 내부 서버 연결하기 전 기존 Naver Cloud를 사용하다가 계속해서 늘어나는 비용 문제로 인해 내부 개발서버를 사용하게 되었다. 이를 해결하기 위해서 SSH 연결이 필요했고, Linux 내에서 CentOS 연결방법에 대해 작성하게 되었다. CentOS와 IPTime을 사용한다. 현재의 IP를 구분 hostname -I 현재, 서버에 접근 가능한 IP를 hostname -I 명령어로 간단하게 확인할 수 있다. 이를 확인하는 이유는 기본(Default)은 IP가 수시로 변동되기 때문에 고정 ip를 해야 하는 과정에 있다. 그리고 연결과정에서 기존의 설정을 확인하기 위해 확인하는 명령어이며, 연결 과정에서 수시로 IP 체크하기 때문에 필수로 알아야 ..
[Java] Thread 활용하기 Thread Process(프로세스) 보다 더 작은 단위로, 한 개 이상의 스레드가 작동해야 프로세스가 작동된다. 한 프로세스 안의 복수 개의 스레드가 존재하여, 한 번의 실행으로 여러 개의 작업효과를 나타내기 위해 사용하는 기술이다. 예를 들면, 하나의 업무를 하기 위해 한 사람이 일하는 것과 여러 사람이 같은 일을 처리한다고 생각한다면 보통 여러 사람이 같이 일한다면 금방 끝날 것임을 누구나 쉽게 예측할 수 있다. 마찬가지로 스레드를 사용하고, 알아야 하는 이유는 스레드를 사용하여 작업시간의 단축에 의미를 갖는다. 그렇다면, Thread를 왜 사용할까? Java는 보통 한 개의 스레드, 프로세스만 사용한다. 한 개의 작업이 실행되는 동안, 다른 작업의 실행은 할 수 ..
[Android] 하이브리드 앱 디버깅하는 방법 하이브리드 앱이란? 웹의 반응형을 이용하여 앱의 기능과 섞어 만든 APK입니다. 순수하게 ANDROID로 구성된 것이 아니기에, URL만 알 수 있다면 PC로도 얼마든지 접근할 수 있습니다. 다만, 하이브리드 앱답게 PC에서의 접근을 막고 APK 설치 시 생성되는 KEY를 통해 APK를 구분하기에 사실상 웹이지만 웹의 개발자 도구를 사용할 수 없는 불편함이 존재합니다. 이번 글에는 이를 해결할 수 있는 방법을 공유하려 합니다. 다만, 아래와 같은 방법을 하기 위해서는 반드시 localhost가 아닌, 개발자 pc에서 접근이 허용된 url이 있어야 가능합니다. 크롬을 통해 하이브리드 앱 디버그 하기 1. PC와 핸드폰을 USB로 연결합니다. 2. chrome..
[MySql / MariaDB] 바이너리 용량 설정하기 1. 바이너리 타입 변경하기 DB의 저장 방식 중 하나인 바이너리는 종류가 여러 개가 있습니다. 그중, 서버와 요즘 사람들이 자주 사용하는 사진의 용량을 예상하여 크기를 정하는 방법입니다. ■ 자주 사용하는 바이너리 용량 이름 용량 TINYBLOB 256Byte BLOB 64KB MEDIUMBLOB 8MB LONGBLOB 4GB 만약 BLOB를 설정하였다면, 사용자들은 64KB 이상의 데이터를 넣을 수 없게 됩니다. 그러므로 바이너리 타입을 변경하여 용량을 바꾸는 방법이 되겠습니다. 2. DataBase의 저장될 용량 크기 변경 1번 방식을 했지만 저장이 안 되었다면, log 혹은 sql error에서 max_allowed_packet Error가 ..
JQuery, Filter 활용하기 filter 사용 예시 다양한 음식 사진들 중에서, filter를 황용하여 위의 목록에 따라서 해당되는 음식값만 골라내도록 하였다. filter는 말 그대로 필터링한다고 보면 된다. filter 대상의 값을 유, 무에 따라 true와 false로 구분된다. 체크하기 all ice-cream chocolate cake juice sandwich div 태그 안에 여러 img가 출력되었다. 위 경우는 연습에 해당되어 태그를 종류별로 정리를 하였지만 실제로는 뒤죽박죽 섞이는 바람에 사진의 정렬은 어렵다고 봐야 한다. 그러므로, 여기서 중요한 것은 a 태그의 class에 해당되는 image와 sandwich, juice 등 명칭을 바라보면 된다. filter의 활용 var f..
OpenLayer, 지도 클릭시 마커를 지도에 표시하기 이전 글 참조 2021.11.12 - [Web/JavaScript] - OpenLayer, 클릭시 좌표 가져오는 방법 OpenLayer, 클릭시 좌표 가져오는 방법 OpenLayer, 클릭시 좌표 가져오는 방법 클릭시 좌표 가져오는 방법 지도를 클릭시, 좌표를 가져오는 방법이다. 이동 var map = new ol.Map({ view: new ol.View({ zoom: 16, center: [ 126.97659.. mollangpiu.tistory.com 2021.11.09 - [Web/JavaScript] - OpenLayer, 마커 만들기 OpenLayer, 마커 만들기 OpenLayer, 마커 만들기 마커 만들기 기존 과정을 넘겨, 바로 Ma..
OpenLayer, 클릭시 좌표 가져오는 방법 클릭시 좌표 가져오는 방법 지도를 클릭시, 좌표를 가져오는 방법이다. 이동 var map = new ol.Map({ view: new ol.View({ zoom: 16, center: [ 126.97659953, 37.579220423 ], //포인트의 좌표를 리턴함 projection : 'EPSG:4326', }), target: 'js-map', layers: [ new ol.layer.Tile({ source : new ol.source.XYZ({ //vworld api 사용 url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png', //tileGrid: tileGrid }) }) ] }..
CSS, 지도 검색 목록 만들기 결과 이전 글을 모두 응용하여, 검색 버튼 누를 시, 목록이 출력되도록 설정하였다. CSS는 간단하게 적용하였다. 옵션 1 옵션 2 옵션 3 검색 닫기 소개 글 2021.11.10 - [Web/CSS] - CSS, 카카오 sample 지도, 목록 CSS, 카카오 sample 지도, 목록 CSS, 카카오 SAMPLE 지도 목록 내용 https://apis.map.kakao.com/web/sample/keywordList/ 본 내용은, 카카오 지도 API에서 제공하는 CSS 입니다. 문단제목 키워드로 장소검색하고 목록으로 표출.. mollangpiu.tistory.com 본문은 이전글, CSS 작업 내역에서 진행되었다. 작업은 소소하게, 지도 목록이 필요해서 간단하게 제작되었..
JavaScript, CSS의 @keyframes 제어하기 막대그래프 CSS를 통해서 막대그래프 하나를 만들어보았다. 이는 Youtube를 참조하였다. 그리고 데이터를 바탕으로 막대그래프의 크기가 변동될 수 있도록 하였다. 버튼 수치 변경 75% 보이기, 감추기 var cnt = 0; function view() { var graph = document.getElementById('graph'); if(cnt == 0) { graph.style.display ="block"; cnt++; } else { cnt--; graph.style.display = 'none'; } } 먼저, 버튼을 눌러서 그래프의 보이기 / 감추기를 만들었다. 기본적인 style을 이용해서, display의 block과 none..
CSS, 카카오 SAMPLE 지도 목록 내용 https://apis.map.kakao.com/web/sample/keywordList/ 본 내용은, 카카오 지도 API에서 제공하는 CSS 입니다. 문단제목 키워드 : 검색하기 카카오가 제공하는 지도 sample이 마음에 들어서 필요한 부분만 뜯어서 만들게 되었습니다. 지금 갖고 있는 지도 css에 적용하기에 매우 좋아보입니다.
OpenLayer, 마커 만들기 마커 만들기 기존 과정을 넘겨, 바로 Marker 생성으로 넘어가 보도록 한다. 2021.11.09 - [Web/JavaScript] - OpenLayer, 지도 이동하기 OpenLayer, 지도 이동하기 OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러.. mollangpiu.tistory.com 이전 글에서 코드를 추가하여 마커 기능을 추가하였다. 소스 공유 이동 앞서, 오픈레이어의 구조 중 제일 중요한 것을 꼽는다면, Layer가 되겠다. Layer는 OpenLaye..
OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러나 이를 활용하기 위해서는 조금 복잡한 과정을 겪는다. 그냥 된다면 매우 행운스럽겠지만, 안타깝게도 오픈 레이어를 노말로 사용할 확률은 매우 적기 때문이다. 지도를 이용하는 방법 오픈레이어 라이브러리를 가져온 오픈 레이어는 단순하다. 여기서, 이전 글을 살펴보았다면 좌표계의 설정이 안 된 OpenLayer인 것을 확인할 수 있다. 이를 확인하는 방법은, Map에 설정된 View의 설정에서 projection이 존재하는 여부에 따라 결정된다. 여기서는 존재하..