[AWS] Amazon Web Service를 서버 생성하기[AWS] Amazon Web Service를 서버 생성하기

Posted at 2018. 9. 25. 14:15 | Posted in AWS
반응형




■ 아마존 웹 서비스를 이용하여 가상 서버 호스팅 생성하기




01. AWS(https://aws.amazon.com/ko/)에 접속하고 우측 상단의 가입 완료 버튼을 클릭한다.




02. 로그인 페이지가 열리면 AWS 계정 새로 만들기 버튼을 클릭한다.




03. 이제 AWS 계정을 생성한다.

 ① 아이디로 사용할 이메일 주소를 기입한다.

 ② 암호 입력

 ③ 암호 확인 입력

 ④ AWS 계정 이름 입력

 ⑤ (필수) 동의하고 계정 만들기 버튼 클릭




04. 연락처 정보를 입력해야하는데 영문으로 입력을 해야 한다.

 ① 계정 유형을 선택하는데 해당 포스팅은 개인 테스트용이이게 개인을 선택했다.

 ② 이름을 입력한다.

 ③ 전화번호를 입력한다.

 ④ 국가 선택에서 대한민국을 선택한다.

 ⑤ 영문주소를 입력해야 하는데, 네이버 or 다음과 같은 포탈 사이트에서 영문주소 라고 검색하면 손쉽게 확인 할 수 있다.

 ⑥ 구 / 군 / 시를 입력한다.

 ⑦ 시 / 도 를 입력한다.

 ⑧ 우편번호를 입력한다.

 ⑨ AWS 고객 동의 사항에 체크한다.

 ⑩ 계정을 만들고 계속 진행 버튼을 클릭한다.




05. 결제 정보를 입력한다.

 ① 신용 / 직불 카드 번호 입력

 ② 카드 만료일 선택

 ③ 카드 소유자 이름 입력

 ④ 보안 전송 버튼 클릭




06. 전화 번호 확인

 ① 대한민국 (+82)를 선택한다.

 ② 전화번호 / 휴대폰 번호를 입력한다.

 ③ 보안 확인 문자를 입력한다.

 ④ 지금 전화하기를 클릭한다.




07. 입력한 번호로 전화가 오면 화면에 나타난 번호를 입력한다.




08. 인증이 완료되면 계속 버튼을 클릭하여 작업을 계속 진행한다.




09. 지원 플랜 선택에서 기본 플랜의 무료 버튼을 클릭한다.




10. 이렇게 아이디 생성이 완료되었다.

    콘솔에 로그인 버튼을 클릭하여 생성한 계정으로 로그인 해보자.




11. 위에서 생성한 AWS 계정의 이메일 주소를 입력한다.

 ① 생성한 AWS 계정의 이메일 주소를 입력한다.

 ② 다음 버튼을 클릭한다.




12. 생성한 계정의 패스워드를 입력한다,

 ① 비밀번호를 입력한다.

 ② 로그인 버튼을 클릭하여 AWS에 접속한다.




13. AWS 서비스 페이지에 접근이 되었다면 가상 서버를 이용하여 구축을 클릭한다.




14. 언어 지원 팝업창이 뜨면 한국어를 선택한다.

 ① 한국어를 선택한다.

 ② Save 버튼을 클릭한다.




15. 시작하기 버튼을 클릭한다.




16. 인스턴스 생성 페이지로 들어왔다면 이제 호스팅할 서버를 선택한다.

 ① 호스팅 서버의 플랫폼을 선택한다. Linux / Unix와 Windows 중에서 선택할 수 있다.

 ② 블루 프린트에서 앱 + OS와 OS중에 하나를 선택한다.

 ③ 사용할 운영체제 OS를 선택한다.




17. 사용할 요금제를 선택한다.

 ① 사용할 요금제를 선택한다.

 ② 사용할 가상 서버 호스팅의 이름을 지정한다.

 ③ 생성 버튼을 클릭해서 가상 서버 호스팅을 생성한다.




18. 그럼 아마존 Lightsail 페이지로 접근이 되는데.

    위에서 생성한 인스턴스가 활성화 되기를 좀 기다린뒤

    아래와 같이 활성화되면 클릭하여 준다.




19. 그럼 이제 SSH를 사용하여 연결을 클릭하여 정상적으로 설치가 완료되었는지 확인해 보자.




20. 위와같은 창이 뜬다면 정상적으로 서버세팅이 완료된 것이다.






참고 : [Ubuntu] Ubuntu에 APM 세팅하기




반응형
저작자표시

'AWS' 카테고리의 다른 글

[AWS] Amazon Linux AMI 버전 - APM 세팅 하기  (0) 2020.03.27
[AWS] Amazon Linux 2 버전 - APM 세팅 하기  (0) 2019.10.04
[AWS] 가상 컴퓨터 환경(EC2) 생성 및 SSH 접속  (0) 2019.07.05
//

[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기

Posted at 2018. 9. 17. 11:07 | Posted in JavaScript & jQuery/jQuery
반응형





참고① http://dolgo.net/php/questions/113

참고② http://www.nextree.co.kr/p10155





■ data() 메서드를 통해 엘리먼트를 변수처럼 사용하기




자바스크립트 상에서 PHP, JSP등의 코드를 포함하여 쓰는것은 그렇게 좋은 코딩방법이라고 하기 힘들다.

필자도 그래서 <script> 상에서 <?=?>(PHP의 경우), <%=%>(JSP)의 경우를 사용하는것을 최대한 자제하고.

PHP의 경우

<input type="hidden" name="print" value="<?=$변수명?>"/>

JSP의 경우

<input type="hidden" name="print" value="<%=변수명%>"/>


위와같이 hidden 타입에 필요한 값을 담아서 사용해왔었다.


# 소스코드

<html>
<head>
<title>:: HIDDEN 데이터 가져오기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        alert(
              "이름 : " + jQuery(".memberName").eq(0).val()
            + "\n출생 : " + jQuery(".memberBirth").eq(0).val()
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="hidden" class="memberName" value="안지현"/>
                <input type="hidden" class="memberBirth" value="1997-10-13"/>
                01
            </td>
            <td>안지현</td>
            <td>넥센 히어로즈</td>
        </tr>
        <tr>
            <td>02</td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr>
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과




하지만 최근 jQuery의 data( ) 메소드에대해 알게 되어서 이렇게 정리하게 되었다.





#01. data() 메서드를 통한 데이터 읽어오기




# 소스코드

<html>
<head>
<title>:: jQuery DATA 가져오기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        alert(
              "이름 : " + jQuery("tbody > tr").eq(1).data("member_name")
            + "\n출생 : " + jQuery("tbody > tr").eq(1).data("member_birth")
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <td>01</td>
        <td>안지현</td>
        <td>넥센 히어로즈</td>
        <!-- data-member_name 과같이 중간에 대문자가 들어가는 카멜 표기법은 사용할 수 없다. -->
        <tr
            data-member_name = "조연주"
            data-member_birth = "1999-06-04"
        >
            <td>
                02
            </td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr>
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과



위와 같이 data-* 로 선언한 값들을 손쉽게 가져올 수 있는 것을 확인 할 수 있다.


사실 어떻게 쓰든 사용자에게만 보여주지 않을뿐으로,


사용하는 목적은 type="hidden"과 data-*의 방식은 크게 다를 것이 없겠지만.


type="hidden" form 태그를 통해 데이터를 submit 하는 방식으로 전송할때 hidden으로 선언한 데이터를 전송할 수 있다는 것에서


이점이 있을 것이고,


data-*는 클라이언트 페이지에서 스크립트와 AJAX를 통해 다룰 데이터를 삽입하면 유용할 것이고,


반복문등을 통한 다수의 게시글 리스트등을 뿌려주는곳에서 데이터의 삽입이 조금더 편하게 제작이 가능할 것으로 보이기 때문에


위에 적은 각각의 장점을 용도에 맞게 사용하려 한다.








#02. data() 메서드를 통한 데이터 변경하기




# 소스코드

<html>
<head>
<title>:: jQuery DATA 변경하기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("tbody > tr").eq(2).data("member_name", "박기량");
        jQuery("tbody > tr").eq(2).data("member_birth", "1991-02-18");

        alert(
              "이름 : " + jQuery("tbody > tr").eq(2).data("member_name")
            + "\n출생 : " + jQuery("tbody > tr").eq(2).data("member_birth")
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <td>01</td>
        <td>안지현</td>
        <td>넥센 히어로즈</td>
        <tr>
            <td>02</td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr
            data-member_name = "치어리더"
            data-member_birth = "0000-00-00"
        >
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과







반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 퍼센트 게이지를 나타내는 Progress Bar  (0) 2018.10.25
[jQuery] jQuery Ajax 전송  (0) 2018.09.28
[jQuery] jQuery 셀렉터 정리  (0) 2018.09.10
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기  (1) 2018.08.20
[jQuery] 커스텀 팝업창 오픈하기  (0) 2018.08.14
//

[PHP] 변수 or 배열의 정보를 표기하는 함수[PHP] 변수 or 배열의 정보를 표기하는 함수

Posted at 2018. 9. 17. 09:58 | Posted in PHP
반응형




■ 변수나 배열의 값을 문자열로 출력해주는 함수





#01. 변수 or 배열의 값을 사람이 읽기 편하게 출력하는 print_r



# 소스코드

<?php
    $varable = array(
          "본명" => "미나토자키 사나"
        , "출생" => "1996년 12월 29일 오사카 부 오사카시 텐노지 구"
        , "나이" => 21
        , "국적" => "일본"
        , "취미" => "바디미스트 & 향수 모으기, 쇼핑, 먹기"
        , "특기" => "서예, 한국어"
        , "좌우명" => "언제나 앞만보고!!"
    );

    echo "<pre>";
    print_r($varable);
    echo "</pre>";
?>



# 출력결과






#02. 변수 or 배열 값의 속성정보까지 표기하는 var_dump



# 소스코드

<?php
    $varable = array(
          "본명" => "손승완"
        , "출생" => "1994년 02월 21일 서울특별시 성북구"
        , "나이" => 24
        , "국적" => "대한민국"
        , "취미" => "베이킹, 영수증 모으기"
        , "특기" => "춤?"
    );

    echo "<pre>";
    var_dump($varable);
    echo "</pre>";
?>



# 출력결과





#03. 변수 or 배열 처리가능한 문장열로 출력하는 var_export



# 소스코드

<?php
    $varable = array(
          "본명" => "유정안"
        , "출생" => "1999년 01월 22일 서울특별시 중구"
        , "나이" => 19
        , "국적" => "대한민국"
        , "취미" => "영화감상, 쇼핑"
        , "특기" => "영어회화, 발레"
    );

    echo "<pre>";
    var_export($varable);
    echo "</pre>";
?>



# 출력결과






반응형
저작자표시

'PHP' 카테고리의 다른 글

[PHP] 배열인지 아닌지를 확인하는 is_array() 함수  (0) 2019.02.21
[PHP] DB 입력 or 출력시 따옴표(') 처리하기  (0) 2018.10.02
[PHP] mcrypt 방식 OpenSSL 방식으로 대체하기  (0) 2018.08.30
cURL 연결 함수  (0) 2018.08.30
[PHP] 문장 / 문자열의 의 대소문자를 변환해주는 함수  (0) 2018.08.30
//

[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation

Posted at 2018. 9. 13. 13:10 | Posted in JavaScript & jQuery/JavaScript
반응형






■ 지오로케이션


-. 지오로케이션은 현재 위치를 찾는 기능이다.
-. 데스크톱의 웹 브라우저를 사용하면 사용자의 IP주소를 사용해서 현재 위치를 찾을 수 있다.
   (현재 데스크톱에서는 인터넷 익스플로러를 제외한 다른 브라우저에서만 사용 가능)
-. GPS가 포함된 스마트폰과 태블릿 PC에서는 GPS를 사용해서 현재 위치를 찾을 수 있다.



 ※ Position 객체의 구조




객체

설명

:: 1단계 객체 ::

 position

 · timestamp, coords 프로퍼티를 가지는 자바스크립트 객체이다.

:: 2단계 객체 ::

 timestamp

 · 위치를 수집한 시간을 표현하는 숫자

 coords

 · 현재의 위치를 정의하는 객체

:: 3단계 객체 ::

 heading

 · 장치가 움직이는 방향을 나타내는 숫자.

 · 이 값은 정북(똑바른 북쪽)에서 벗어난 각을 나타낸다.

 · 0도는 정북향을 나타내며 방향은 시계방향(동쪽은 90도이고, 서쪽은 270도)이다.

 · speed 값이 0이면 heading 값은 NaN이 된다.

 · 장치에서 haeading 정보를 제공할 수 없을 때 이 값은 null 이된다.

 altitude

 · 고도, 해수면을 기준으로 미터 단위

 · null일 수도 있다.

 latitude

 · 위도, 소수점을 포함하는 숫자. (X)

 accuracy

 · 미터로 위도와 경도의 정확도를 나타내는 숫자

 longitude

 · 경도, 소수점을 포함하는 숫자 (Y)

 speed

 · 장치의 속도를 나타내며, 초당 미처 값을 숫자로 나타낸다.

 · 이 값은 null 일 수 도 있다.

 altitudeAccuracy

 · 미터로 고도의 정확도를 나태내는 숫자

 · null일 수도 있다.





# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 지오로케이션 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        // Geolocation 객체를 사용
        if(navigator.geolocation) {
            
            navigator.geolocation.getCurrentPosition(function(position) {
                
                // 위치를 가져오는데 성공할 경우
                jQuery.each(position.coords, function(key, item) {
                    jQuery("<h3></h3>").html("● " + key + " : " + item).appendTo("body");
                });
            }, function(error) {
                
                // 위치를 가져오는데 실패한 경우
                consol.log(error.message);
            });
        } else {
            consol.log("Geolocation을 지원하지 않는 브라우저 입니다.");
        }
    });
</script>
</head>
<body></body>
</html>




# 출력결과











■ 지오로케이션 + 다음 지도 API 연동하기




# 소스코드

<html>
<head>
<title>:: GEOLOCATION + Daum Map API ::</title>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=라이브러리키"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        function getLocation(position) {

            var latitud = position.coords.latitude;
            var longitude = position.coords.longitude;
        
            var mapContainer = document.getElementById("map")    // 지도를 표시할 DIV
            var mapOption = {
                  center : new daum.maps.LatLng(latitud, longitude)    // 지도의 중심좌표
                , level : 3    // 지도의 확대레벨
            };
            
            // 지도를 생성
            var map = new daum.maps.Map(mapContainer, mapOption);

            // 마커가 표시될 위치
            var markerPosition = new daum.maps.LatLng(latitud, longitude);

            // 마커를 생성
            var marker = new daum.maps.Marker({ position:markerPosition });

            marker.setMap(map);
        }

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getLocation, function(error) {
                consol.log(error.message);    
            });
        } else {
            consol.log("Geolocation을 지원하지 않는 브라우저 입니다.");
        }
    });
</script>
</head>
<body>
    <div id="map" style="width:800px;height:400px;"></div>
</body>
</html>




# 출력결과






반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] email 형식 검사하기  (0) 2018.09.27
[JavaScript] Audio 객체를 이용한 음악 재생  (0) 2018.09.27
[JavaScript] 저장소 사용하기  (0) 2018.09.07
[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
//

티스토리툴바