블로그 이미지
잡다한 취미 생활 및 일상에 대한 소소한 이야기를 적어나가는 블로그입니다.
붉은kkk

공지사항

최근에 올라온 글

최근에 달린 댓글

글 보관함

calendar

1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

[OPEN JDK 설치] JAVA 시작 #1

2020. 8. 1. 14:34 | Posted by 붉은kkk

오라클의 JAVA JDK가 유료화된다는 얘기가 있어서, 무료인 OPEN JDK를 사용하려고 합니다.

JDK란 JAVA Development Kit의 약자로 자바의 핵심 플랫폼 구성요소입니다.

JDK에는 개발을 위해 필요한 도구들이 포함되어 있습니다.

JAVAC는 자바의 컴파일러입니다.

... 상세한 내용들은 생략하고 이번 시간엔 OPEN JDK의 설치에 목적을 두겠습니다.

 

https://openjdk.java.net/

 

OpenJDK

Download and install the open-source JDK for most popular Linux distributions. Oracle's free, GPL-licensed, production-ready OpenJDK JDK 14 binaries are at jdk.java.net/14; Oracle's commercially-licensed JDK 14 binaries for Linux, macOS, and Windows, bas

openjdk.java.net

#1. OPENJDK에 접속해 주세요

#2. Download를 선택해주세요

#3. 본인의 운영체제에 맞는 파일을 선택해서 다운로드 받아주세요

- 전 Windows/x64 선택

- 다운로드가 완료되면 원하는 폴더에 copy해서 압축을 풀어주시면 됩니다.

 

jdk-14.0.2가 새로 받은 openjdk입니다.

 

#4. 환경변수 설정

"제어판 - 시스템 - 고급 - 환경 변수"로 들어가서 시스템 변수에 새로만들기를 해주세요.

변수이름 : JAVA_HOME

변수 값 : 설치된 폴더 선택

 

그 다음에는 "Path"에 "%JAVA_HOME%\bin" 을 추가 해 주세요.

변수 설정은 모두 끝이 났습니다. 

방금 한 Path 주가는, 어떤 폴더에서 실행해도 실행이 될 수 있게 설정을 해 준거랍니다.

 

#마지막

- 명령 프롬프트에서 javac를 실행한 모습입니다.

 

OPENJDK의 설치가 끝나서 이제 자바로 프로그래밍을 하고 실행할 수 있는 환경이 구성되었습니다.

 

그럼 즐거운 프로그래밍 생활 되세요.

지난 포스트에 이어, 마무리까지의 과정에 대해 설명하겠습니다.

아마존에 가입하여 계정을 생성한 뒤, #1포스팅 과정들을 따라 지나오면 인트턴스를 만들 수 있는 단계까지 오게 됩니다.

"인스턴스 시작" 버튼을 눌러주세요

단계1에서는 사용할 서버를 선택해 주면됩니다.

저는 프리티어 사용 가능한 우분투 서버를 선택했습니다. (파이썬 사용 가능)  

 

이제 쭉 Next Next~~~

 

단계 7까지 지나오면 마지막으로 "시작하기" 버튼을 눌러주시면 됩니다.

 

키 페어를 설정해 주세요

새로운 키 페어를 생성하고, 키 페어 이름을 입력 후 다운로드 해 주시면 됩니다.

자, 끝이 보이네요.

연결을 눌러보면 인스턴스 연결 방법에 대한 설명이 나온답니다.

cmd 환경에서 인스턴스 연결을 하면 서버에 연결됨을 확인할 수 있어요.

더보기

1. Cmd창은 관리자 모드로 실행해서 들어가주세요.

2. 윈도우의 경우 서버에 접속 불가할 경우가 있을 수 있습니다. 

   (해결 방안 : 다운로드 받은 키페어의 보안 설정을 변경해주세요)

서버 접속에 문제가 있는 경우 키페어의 보안 설정을 상기 이미지처럼 변경 해 주시면 됩니다.

 

연결 후, 서버에서 파이썬을 실행한 화면이에요.

잘 동작함을 확인할 수 있습니다.

 

^^ 드디어 서버에서 파이썬이 실행되는 것을 확인했습니다.

 

이제, 멋진 서비스를 만들어서 제공하는 일만 남았네요.

 

그럼 오늘도 즐거운 프로그래밍 생활 되세요.

[Google Icon Font 삽입하기]

2020. 8. 1. 13:33 | Posted by 붉은kkk

https://materializecss.com/

 

Documentation - Materialize

 

materializecss.com

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

구글 Icon Font 삽입은 위 예제에 나온 것처럼, html 문서의 head내에 link로 처리하면 됩니다.

^^ 요즘은 문서들이 보기 쉽게 나와있어서 보고 활용하기 편한것 같네요.

 

그럼 오늘도 즐거운 프로그래밍 생활 되세요.

'프로그래밍 > HTML' 카테고리의 다른 글

[2. HTML Menu 정렬] 상단 Menu 항목 정렬 방법  (0) 2020.05.14

웹서비스를 구축할 때 처음 입문자들에게 가장 막막한 부분이 웹서버를 구축하는 부분일거에요.

저는 여기서 많이 헤맸거든요.

파이썬에 관심을 가지고 공부를 시작할 무렵 "Flask로 웹 서버 만들기, Django로 웹 서버 만들기" 

라는 것들이 종종 보여서 서버도 손쉽게 만들 수 있는 거라고 착각아닌 착각을 한 적이 있었어요.

사실 맞는 말이긴 하지만, 튜토리얼 및 예제들은 대부분 로컬에서 구동하는 방법에 대한 내용들이 

대부분이었던것 같습니다.  (로컬에서의 예제>>서버에서의 예제)

 

첫번째는 로컬에서 서비스가 어떻게 구동되는지 테스트해보는게 맞지만,

그 이후 실제 서버를 구축하고 서비스를 제공하는 방법에 대해서는 내용이 심히 부족했습니다.

(제가 잘 못찾아서 그랬던것도 있어요.)

 

그럼 어떻게 서버를 구축하는지 알아볼까요?

 

이번 포스팅에서는 아마존 웹서비스를 통한 웹서버 구축을 알아보도록 하겠습니다.

 

1. AWS 주소

https://aws.amazon.com/ko/

 

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

피트니스 글로벌 인터랙티브 피트니스 플랫폼이 어떻게 AWS를 사용하여 사업을 성장시키고 회원에게 더 나은 서비스를 제공하는지 알아보십시오. 자세히 알아보기  홈 피트니스의 혁신 2012년에

aws.amazon.com

- 가입을 해 주세요

가입 완료^^

 

2. 프리 티어(1년 동안 무료로 사용가능)

- 프리 티어로 서버를 구축하세요.

결제 정보도 기재가 필요하며, 프리 티어를 사용하더라도 무료로 제공되는 사용량을 초과하는 경우,

초과분에 대한 비용이 청구됩니다. !! 꼭 참고하세요 !!

 

계정을 만드는것만으로는 비용 청구가 되지 않으니 이 부분도 참고하세요^^

 

저는 EC2를 사용하여 가상 머신을 구축할 거에요.

인스턴스를 만들면 이제 끝입니다.

 

인스턴스를 만들고 실제 사용하는건 다음 포스팅에서 설명할게요.

리액트를 사용해서 기초 웹 서비스를 만들어 볼거에요.

 

우선 React App을 쉽게 만들어주는 곳을 찾아가서 시작해야겠죠?

아래 링크로 와서 설명대로 시작하면 됩니다.

 

Create React App

https://create-react-app.dev/docs/getting-started/#creating-an-app

 

 

 

Create React App · Set up a modern web app by running one command.

Create React App is an officially supported way to create single-page React

create-react-app.dev

npx create-react-app my-app

윈도우 환경에서는
cmd로 명령프롬프트를 뛰운다음 위 명령어를 입력하면 되요.

명령어대로 입력하면 자동으로 설치가 됩니다.

...

시간이 조금 지나면 설치가 완료 됩니다.

설치는 이렇게 마무리가 되었는데, 아직 뭘 해야될지 몰라서

공부를 하고 프로젝트를 만들고 난 뒤 이후 포스팅을 계속 하도록 할게요.

 

그럼 오늘도 즐거운 블로그 & 프로그래밍 생활 되세요.

JSP로 웹사이트 게시판을 만들려고 하던 도중 JAVA의 유료화 소식을 알게 되었습니다.

ㅠㅠ 눈물을 머금고 다른 방법을 찾아야 겠다는 생각을 하게 되었고, 

친숙한 파이썬으로 눈을 돌리게 되었습니다.

 

제가 선택한 조합은요?

"파이썬 + 장고" 

로 선택하였습니다.

 

그럼 이제 시작해 볼까요.

 

1. 파이썬에 장고를 설치해 주세요.

Cmd창에서 (제 환경이 window여서 window기준으로 설명드립니다.)

pip install django

2. 장고를 설치한 다음 프로젝트를 만들어 줍니다.

django-admin startproject todoSubject

딱봐도, 따로 설명 안드려도 되겠죠?^^;

3. 이제 실행해 볼까요.

python manage.py runserver

(장고가 생성한 폴더에 가면 파일이 만들어져 있답니다.)

 

장고가 실행되었습니다. 

Starting develpment server at http://127.0.0.1:8000/

접속해 보세요^^

 

4. 실행결과

!!! 성공적으로 수행이 완료된것을 볼 수 있습니다.

 

이제 만들고 싶은 서비스를 만들어 보는 일들만 남았네요.

 

전 게시판부터 다양한 프로젝트까지 만들면서 연습해보고 내용을 포스팅 할 예정입니다.

 

그럼 오늘도 즐거운 파이썬 생활 되세요.

 

웹사이트를 만들게 되면 기본적으로 보이는 구조는 유사하게 구성이됩니다.

이번 포스팅엔 Header 부분이라고 칭할 수 있는 웹사이트의 상단에 위치한 Menu항목을 나타내고 정렬하는 방법에

대해 설명하겠습니다.

HTML & CSS & JAVASCRIPT를 공부하면서, 저는 정렬하는 부분이 가장 헷갈리고 약간의 짜증이 수반되는 영역이더라구요.

그래서 언제든 참조할 수 있도록 한번 정리를 해두고 두고두고 필요할때 볼 생각이에요.

 

 

결과물

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 메뉴 정렬 test </title>
    </head>
<style>
body{
    margin:0;
    padding:0;
    background:#ccc;
}

.nav ul {
    list-style: none;
    background:#663366;
    text-align: center;
    padding:0;
    margin:0;
}

.nav li {
    display: inline-block;
}

.nav a {
    text-decoration: none;
    color:#fff;
    width:100px;
    display: block;
    padding: 15px;
    font-size: 17px;
    font-family: sans-serif;
}

.nav a:hover {
    background: #000;
    transition: 0.4s;
}


</style>


<body>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Tutorial</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

div class="nav"로 묶고

style에서 "nav.ul, nav.li, nav.a, nav.a:hover" 에 대한 내용을 정리했습니다.

 

 

'프로그래밍 > HTML' 카테고리의 다른 글

[Google Icon Font 삽입하기]  (0) 2020.08.01

'Chart.js'는 자바스크립트로 다양한 차트를 표현할 때 사용하면 좋은 라이브러리 입니다.

저는 아래와 같은 Radar Chart와 Polar Chart가 맘에 들어서 활용해보고 싶어졌어요.

... 실제 코드는 다음 포스팅에 남기도록 할게요.

어느새 출근 시간이 다가와서, 오늘의 포스팅은 여기서 마무리를 하고 다음 포스팅에 상세한 내용을 기재하도록 하겠습니다.

 

 

 


Chart.js is available under the MIT license.