안경잡이개발자

728x90
반응형

  지금까지 강의를 잘 따라오신 여러분들은 다음과 같이 완성된 프로젝트를 확인할 수 있게 될 거예요.


※ 완성된 프로젝트 ※



※ 복습하기 ※


  프로젝트를 완성해 나가면서 배웠던 큼직한 요소들에 대해서 복습을 해봅시다!


1) React 및 파이어베이스 호스팅


  본 강좌의 핵심이었던 React 개발 및 파이어베이스 호스팅에 대해서 잊으시면 안 돼요. React에서 다루는 각 데이터를 파이어베이스에 저장하고 관리했으며 파이어베이스 호스팅 서비스를 이용해 웹 사이트를 운영할 수 있었어요.



2) 플라스크(Flask) API 서버 구축


  이후에 우리는 AWS EC2를 이용하여 플라스크에 워드 클라우드 API를 달아서 구동시켰습니다. 프리 티어를 이용해 무료로 서버를 구축하고, 이에 웹 서버를 올리는 방식으로 효과적으로 API를 구축했답니다.



3) 클라우드 플레어(Cloud Flare) HTTPS 서비스


  이후에는 도메인 주소를 생성하고, 클라우드 플레어 서비스를 이용해서 우리의 API 서버에 HTTPS를 입히는 과정을 거쳤어요.



4) 파이어베이스(Firebase)


  파이어베이스(Firebase)의 데이터베이스 서비스를 활용하는 방법에 대해서도 공부하는 시간을 가졌습니다.



5) 안드로이드 스튜디오(Android Studio)


  우리는 최종적으로 만들어진 웹을 앱 형태로 배포하기 위하여 안드로이드 스튜디오를 이용해 웹 앱을 개발하고, APK 파일을 추출했어요.



728x90
반응형

Comment +1

728x90
반응형

  이번 시간에는 Node.js Express리액트(React) 클라이언트 서비스와 연동하는 방법에 대해서 알아보도록 하겠습니다. 우리는 이미 클라이언트(Client) 파트를 구축하여 개발하고 있는 상태이므로 이어서 서버(Server) 모듈을 개발하여 클라이언트와 연동시키면 됩니다. 다시 말해 Node.js Express를 이용해 서버 API를 개발해서 고객 관리 시스템의 백 엔드를 구축할 수 있는 것입니다.


  따라서 가장 먼저 우리의 프로젝트 루트 폴더에서 client라는 이름의 폴더를 생성합니다. 그리고 기존에 존재했던 모든 소스코드를 이 client 폴더 안으로 넣으시면 됩니다. 그러면 다음과 같이 루트 폴더와 client 폴더가 구성됩니다.




  이후에 Node.js Express 서버를 개발하기 전에 환경 설정을 진행해주도록 하겠습니다. 이를 위해 루트 폴더에 package.json을 생성합니다. package.json 파일에서는 client 폴더에서 클라이언트 모듈을 실행하고, 루트 폴더에서는 서버 모듈을 실행하도록 명시해주도록 하겠습니다.


▶ package.json


{
"name": "management",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4"
},
"devDependencies": {
"concurrently": "^4.0.1"
}
}


  이제 루트 폴더에 클라이언트와 동일한 형태의 .gitignore 파일을 위치시킵니다. 이 .gitignore 파일이 없으면 우리가 설치한 노드 모듈 또한 모두 깃 허브(Git Hub)에 올라가기 때문에 비효율적입니다. 이후에 루트 폴더를 기준으로 nodemon을 설치합니다.


▶ npm install -g nodemon

▶ yarn


  이제 서버 모듈 개발을 위해 루트 폴더에 server.js 파일을 생성합니다.


▶ server.js


const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/hello', (req, res) => {
res.send({ message: 'Hello Express!' });
});

app.listen(port, () => console.log(`Listening on port ${port}`));


  이후에 node server.js 명령어로 서버를 구동시킬 수 있습니다.



※ GET 방식의 API 테스트하기 ※



728x90
반응형

Comment +1

728x90
반응형

  리액트(React) 개발에 있어서 가장 효과적인 통합 개발 환경(IDE) 중 하나는 바로 비주얼 스튜디오 코드(Visual Studio Code)입니다. 일단 지난 시간에 만들었던 리액트 프로젝트를 실행(Start) 시켜주세요. 기본적으로 서버가 구동 중인 상태에서 소스코드를 수정하면 알아서, 수정된 내역에 맞게 다시 컴파일이 이루어지면서 실제 웹 서비스에 반영된다는 특징이 있습니다.



  이제 이 상태에서 비주얼 스튜디오 코드를 설치해서 프로젝트 소스코드를 비주얼 스튜디오로 열어 보도록 하겠습니다. 혹시 비주얼 스튜디오 코드가 설치되어 있지 않으신 분은 다음의 사이트에서 설치를 진행하시면 됩니다.


  ▶ 비주얼 스튜디오 코드(Visual Studio Code) 사이트: https://code.visualstudio.com/


  접속 이후에는 자신의 운영체제에 맞는 응용 프로그램으로 설치를 진행할 수 있습니다. 설치를 하실 때에는 기본 설정으로 설치를 진행해주셔도 별다른 어려움 없이 따라오실 수 있습니다.



  설치 이후에는 비주얼 스튜디오 코드를 실행해주세요. 이후에 [File] - [Open Folder] 자신의 리액트 프로젝트를 열어주세요.



  기본적으로 리액트(React)는 App.js라는 이름으로 메인 자바스크립트를 관리할 수 있습니다. 실제로 HTML 문서에서 <body> 태그에 해당하는 내용은 이 App.js가 채우게 됩니다. 따라서 한 번 이 App.js를 수정해 봅시다.



  저는 다음과 같이 내용을 대략 아무렇게나 바꾸어 보도록 하겠습니다.



  이후에 저장(Ctrl + S)을 해주시면 자동으로 소스코드가 컴파일 되어 다음과 같이 웹 사이트에서 수정 내역을 확인할 수 있습니다.



728x90
반응형

Comment +0

728x90
반응형

  이번 시간에는 소스코드를 수정해서 Git 저장소에 반영하는 방법에 대해서 알아보도록 하겠습니다. 이전 강좌에서는 깃 허브(Git Hub)에서 하나의 저장소를 생성하여, 초기 프로젝트 구성을 올리는 방법에 대해서 알아보았습니다.


  소스코드를 수정해서 Git 저장소에 반영하는 방법도 이전 시간에 배웠던 내용과 거의 동일하다고 보시면 됩니다. 일반적으로 소스코드를 수정하는 것은 두 가지 사례로 나뉘게 됩니다.


① 해당 프로젝트에 소속된 사람이 아닌 경우


  만약 우리가 특정한 커뮤니티(Community)의 구성원이 아니라서 스스로 커밋을 하여 저장소에 적용할 권한이 없다면, 소스코드를 수정하는 것에 제약이 있습니다. 이런 경우 PR(Pull Request)를 작성하여 오픈소스에 기여할 수 있습니다.


  이 경우는 우리가 큰 오픈소스 프로젝트의 구성원으로 참여하고 싶을 때 사용하는 방법입니다. PR에 수정 사항 등을 담아서 전송하면, 해당 오픈소스의 관리자가 이를 허용했을 때 실제로 오픈소스에 반영이 될 수 있습니다.


② 해당 프로젝트에 소속된 사람인 경우


  자신이 해당 프로젝트에 대한 권한을 가지고 있으므로 그냥 커밋(Commit)하고 푸시(Push)해서 저장소에 수정 내역을 반영하면 됩니다.


※ 소스코드 수정하여 Git 저장소에 반영하기 ※


  우리는 초보자이므로, ②번 케이스를 따라서 우리가 만든 깃 저장소에 수정된 내역을 반영하는 방법에 대해서 알아보도록 하겠습니다.


  


  저는 위와 같이 이전에 실습을 위해 만들었던 깃 허브 저장소를 확인해보겠습니다.


  


  깃 허브 주소가 https://github.com/ndb796/Git-Study입니다.


  


  실습을 위해 특정한 폴더를 생성하여 그 폴더로 클론(Clone)을 받아보겠습니다. 말 그대로 프로젝트 폴더를 다운로드 받겠다는 소리입니다.



  그러면 위와 같이 다운로드가 완료됩니다.



  이제 소스코드를 수정해보겠습니다. 위와 같이 하나의 파일을 만들어서 add() 함수를 작성해 볼게요.



  이후에 git add 명령어를 이용해 우리가 수정한 파일을 Staging Area에 올릴 수 있습니다. git status 명령어를 입력하면 현재 프로젝트의 상태를 확인할 수 있습니다. 새로운 파일(New File)로 하나의 소스코드가 등록된 것을 확인할 수 있습니다.



  Staging Area에 올린 파일을 다시 내리고자 한다면 git reset 명령어를 이용할 수 있습니다. 이후에 git status로 상태를 확인해 보면 my_module.py 파일이 제외된 것을 확인할 수 있습니다. 더불어 커밋할 파일은 없다는 메시지가 출력됩니다.



  아무튼 실습을 위해 일단 작성된 파일을 커밋해보도록 합시다. 커밋 이후에는 성공적으로 하나의 커밋이 완료되었다는 메시지가 출력됩니다. 이제 이를 git push 명령어로 깃 허브의 저장소로 변경된 내역을 반영할 수 있습니다.



  성공적으로 반영이 완료되었습니다. Git Hub 주소로 가보시면 이를 확인할 수 있어요.



  이제 한 번 하나의 함수를 더 추가해 보겠습니다.



  단순히 함수를 추가한 이후에 git status 명령어를 입력해 보시면 수정만 이루어진 파일이 존재한다는 메시지가 출력됩니다.



  특정 파일에 대해서 수정한 내역을 무시하고, 다시 저장소에 기록된 내용으로 되돌리고자 할 때는 git checkout -- 명령어를 이용할 수 있습니다.



  git checkout 명령어를 이용한 이후에 다시 파일을 확인해 보시면 위와 같이 소스코드가 원래 상태로 돌아온 것을 확인할 수 있습니다.



  저는 다시 sub() 함수를 추가하여 커밋을 진행해보도록 하겠습니다.



  git add . 명령어로 프로젝트에서 변경된 모든 소스코드를 Staging Area에 올렸습니다. 이후에 git push 명령어로 소스코드를 실제 Git Hub 저장소에 반영한 것을 확인할 수 있습니다.



728x90
반응형

Comment +0

728x90
반응형

  기본적으로 깃(Git) 프로젝트에 담겨 있는 데이터들은 파일 시스템 상에서의 스냅샷(Snapshot)이라고 볼 수 있습니다. 실제로 프로젝트를 커밋(Commit)하여 적용할 때의 순간을 중요시한다는 특징이 있습니다. 파일 자체를 저장하기보다 수정 내역 자체를 저장합니다.


  Git의 동작 원리를 바르게 이해하기 위해서는 Git 프로젝트의 세 가지 구성요소에 대해서 이해할 필요가 있습니다.


  - Working Directory: 작업할 파일이 있는 디렉토리입니다.

  - Staging Area: 커밋(Commit)을 수행할 파일들이 올라가는 영역입니다.

  - Git Directory: Git 프로젝트의 메타 데이터와 데이터 정보가 저장되는 디렉토리입니다.


  깃 프로젝트는 위와 같은 구성요소를 통해 동작하게 됩니다. 그렇다면 실제로 소스코드를 수정하는 등의 작업을 해서 커밋(Commit)하고, 다시 저장소에 있는 수정 내역을 자신의 컴퓨터로 옮기는 과정들은 어떻게 이루어지게 되는 걸까요?


  아래 첨부 파일은 제가 간단히 그려 본 Git의 기본적인 동작 과정입니다.


Git 동작 과정.xml



  이전 시간에 실습을 통해서 간단히 다루어 본 내용입니다. 원격지에 있는 저장소(Remote Repository)에서 맨 처음에 클론(Clone)을 받으면, 자신의 컴퓨터에 해당 프로젝트가 통째로 다운로드가 된다고 말씀 드렸습니다.


  이후에 자신이 수정한 내역을 다시 원격지 저장소까지 반영하려면 git add, git commit, git push의 과정을 거쳐야 합니다. 이후에 다시 저장소로부터 수정된 내역을 받을 때에는 git fetch를 수행합니다. 다만, 이러한 과정에서 내가 수정한 내역이 원격지 저장소에 있는 내역과 다를 수 있기 때문에 git merge를 수행하여 자신의 컴퓨터에 있는 소스코드를 원격지 저장소와 맞추는 것입니다.


  더불어 git fetch와 git merge를 한 번에 사용하는 명령어인 git pull를 사용할 수도 있습니다.


※ 저장소(Repository)에 대해서 ※


  저장소(Repo)실제 소스코드가 담겨 있으면서 커밋(Commit) 내역 등의 모든 작업 이력이 담겨 있는 공간을 의미합니다. 실제로 프로젝트의 메타 데이터를 포함해 각종 데이터는 .git 폴더에 담기게 됩니다. 실제로 이 폴더를 열어 보면 각종 데이터와 해시 값 등이 담겨 있습니다.


  어떠한 파일을 Commit 하게 되면 각 작업들을 분류하기 위해 내부적으로 해당 작업에 대한 해시(Hash) 값을 이용하는 것입니다. 일반적으로 해시 값은 충돌이 발생하지 않기 때문에 정확히 커밋 내역들을 관리할 수 있습니다.

728x90
반응형

Comment +0

728x90
반응형

  소스코드는 다음과 같습니다.


import urllib.request
from bs4 import BeautifulSoup


def main():

    for i in range(0, 10):

        url = "http://sports.donga.com/Enter?p=" + str((i * 20) + 1) + "&c=02"
        soup = BeautifulSoup(urllib.request.urlopen(url).read(), "html.parser")

        spans = soup.find_all("span", class_="tit")
        for j in range(0, 20):
            print((i * 20) + j + 1, "번째 글:", spans[j + 3].get_text())

if __name__ == "__main__":
    main()


  또한 혹은 특정한 뉴스 기사 목록 페이지에서, 각 뉴스 기사 상세 페이지의 링크를 얻고 싶다면 다음과 같이 할 수 있습니다.


import urllib.request
from bs4 import BeautifulSoup


def main():

    url = "http://sports.donga.com/Enter?p=1&c=02"
    soup = BeautifulSoup(urllib.request.urlopen(url).read(), "html.parser")

    spans = soup.find_all("span", class_="tit")
    for i in range(0, 20):
        print(spans[i + 3].find("a")["href"])

if __name__ == "__main__":
    main()


728x90
반응형

Comment +0

728x90
반응형

  인텔리J (IntelliJ)자바(Java) 통합 개발 환경 중에서 가장 많이 사용되고 있는 것 중 하나입니다. 기본적으로 인텔리J는 유료 제품이지만 학생에 한해서 학생 인증을 수행하면 이를 무료로 이용할 수 있습니다. 이번 시간에는 학생 인증을 통해 무료로 설치하는 방법에 대해 알아보도록 하겠습니다. 현재 저도 대학생이라서 인텔리J를 무료로 사용할 수 있습니다.


1. 인텔리J 학생 인증 공식 사이트 접속: https://www.jetbrains.com/student/



  위와 같이 학생 라이선스 인증 사이트에 들어가서 등록 버튼을 누릅니다. 이후에 다음과 같이 자신의 정보와 '학교 이메일 주소'를 입력합니다. 일반적인 대학교는 웹 메일을 신청하면, 웹 메일 주소를 하나씩 할당해주는 방식을 사용할 것이므로 메일이 없으신 분은 자신의 학교에 요청을 하시면 됩니다.


2. 본인의 학생 정보 기입하기



3. 이메일 주소에서 인증 수행하기


  이후에 인증 메일이 도착하면 인증을 진행하면 됩니다.



4. 추가 이메일 인증 수행하기


  첫 번째 인증이 수행되면 다시 제대로 회원가입을 수행하기 위해서 활성화(Activate) 관련 이메일이 추가적으로 도착합니다. 여기에서 교육 라이선스(Educational License) 활성화를 진행해주시면 됩니다.



5. 회원가입 수행하기


  이제 본인이 사용할 계정 정보로 회원가입을 진행하시면 됩니다.



6. 인텔리J 소프트웨어 다운로드 사이트 접속https://www.jetbrains.com/idea/


  이제 인텔리J 소프트웨어를 설치해주시면 됩니다.



7. 설치 프로그램 다운로드


  학생은 기본적으로 인텔리J 얼티메이트(Ultimate) 버전을 무료로 이용할 수 있기 때문에 다음과 같이 얼티메이트 버전으로 다운로드를 진행해주시면 됩니다.



8. 인텔리J 설치 이후에 인증 및 실행


  인텔리J를 설치하고, 처음 실행하시면 초기 환경을 세팅하고 결과적으로 라이선스 인증을 하라는 메시지가 나옵니다. 그 때 계정 정보를 입력하고 인증하여 실행하시면 됩니다.




728x90
반응형

Comment +0

728x90
반응형

CNN(Convolution Neural Network)을 통해 배우는 이미지 인식 인공지능 기술

1. 인공지능 기술 및 CNN의 개요

나동빈


인공지능: 컴퓨터가 인간의 지능을 흉내내도록 하는 기술


  최근의 인공지능 기술은 경험주의에 기반하고 있습니다. 사람이 컴퓨터에게 별도의 지식을 제공하지 않아도 컴퓨터가 데이터로부터 지식을 직접 학습할 수 있다고 보는 관점입니다. 오직 컴퓨터가 데이터라는 경험만을 이용하여 수식(Function)을 찾아냅니다. 실제로 이러한 접근 방법이 최근 딥 러닝(Deep Learning) 기술까지 이어졌습니다.


  현재 인공지능은 데이터로부터 스스로 학습하는 단계까지는 왔다고 말할 수 있지만 초월적인 지능으로 새로운 발견을 하는 단계가 되기까지는 한참 멀었다고 보는 것이 일반적입니다.


※ 머신러닝 인공지능의 분류 ※


1) 지도학습(Supervised Learning): 학습 데이터가 정답 정보인 레이블(Label)을 가지고 있도록 하는 학습 방법입니다.

→ 딥 러닝이 대표적인 예시이며, 우리가 공부하게 될 CNN도 지도학습에 속합니다.


2) 비지도학습(Unsupervised Learning): 학습 데이터가 레이블을 가지고 있지 않도록 하는 학습 방법입니다. 데이터 자체에 들어있는 고유한 특징을 스스로 찾아냅니다.

→ 대표적인 기술로는 비슷한 데이터끼리 묶는 클러스터링(Clustering)이 있습니다.

→ 레이블이 없다는 점에서 지도학습보다 더 난이도가 높은 경우가 많습니다.


3) 준지도학습(Semi-Supervised Learning): 학습 데이터가 어느 정도만의 레이블을 가지고 있도록 하는 학습 방법입니다.


4) 강화학습(Reinforcement Learning): 학습의 정답 유무를 출력하기까지 시간이 필요한 학습 방법입니다. 주로 게임(Game) 인공지능으로 활용됩니다.

→ 바둑(Go) 인공지능과 같은 게임 인공지능이 대표적인 예시이며 전략적인 상황에서 활용도가 높습니다.


※ 컴퓨터 비전(Computer Vision) ※


  컴퓨터 비전 기술은 컴퓨터의 시각(Vision) 요소에 관련한 기술을 연구하는 분야입니다. 증강현실, 문자 인식, 패턴 인식, 얼굴 인식, 이미지 복구, 가상현실 등의 세부 분야가 있습니다. 우리가 공부하게 될 CNN도 대표적인 컴퓨터 비전 분야의 기술입니다.


※ 머신러닝 데이터의 분류 ※


  머신러닝은 인공지능 알고리즘 중 하나이며 대표적인 경험주의적 철학이 반영된 알고리즘입니다. 이러한 머신러닝에서 사용되는 데이터는 다음과 같이 세 가지로 분류될 수 있습니다.


· 훈련 데이터: 모델의 학습을 위해 사용하는 데이터입니다. 예를 들어 특정한 이미지가 주어졌을 때 미리 그 이미지가 '말'에 해당하는지, '소'에 해당하는지 등의 정답 데이터를 준비해놓고 학습을 진행합니다.


· 검증 데이터: 모델의 검증을 위해 사용하는 데이터입니다. 학습이 잘 되었는지 판단하기 위한 중요한 척도가 됩니다.


· 테스트 데이터: 주로 현재 가지고 있지 않은 데이터로 실제로 인공지능 소프트웨어를 운영하면서 만나게 될 데이터를 의미합니다.


  일반적으로 전체 데이터훈련 데이터와 검증 데이터로 나누어서 먼저 훈련을 시키고, 나중에 검증을 하는 방식으로 데이터를 활용합니다. 일반적으로 학습 모델을 표현하고자 할 때는 '신경망 모델(Neural Network Model)'을 이용해 표현합니다. 여러 개의 노드(Node)가 서로 연결되어 있는 그래프 형태로 표현합니다. 대부분의 딥 러닝 알고리즘은 신경망 모델을 이용해 표현됩니다.


※ 학습 모델의 평가 ※


  일반적으로 모델을 평가할 때는 해결하고자 하는 문제에 따라서 다른 모델 평가 방식을 적용할 수 있습니다. 가장 많이 사용되는 평가 방식은 다음과 같습니다.


· 회귀 문제{y - f(x)}^2의 합으로 모델을 평가합니다. f(x)는 각 데이터에 대한 모델의 예측 값을 의미합니다. y는 실제 정답 값을 의미하는데, 제곱을 해주는 이유는 모델이 예측한 값이 얼마나 실제 정답과 거리가 있는지를 양수로 표현하기 위해서입니다.


· 정확도: 전체 테스트 데이터의 개수가 N개 일 때, 정답을 맞힌 테스트 데이터의 개수가 K개라면 K/N이 정확도가 됩니다.


※ CNN(Convolution Neural Network) ※


  일반적인 신경망 기술로는 해결하기 어려운 문제인 '이미지' 문제를 해결하기에 적합한 인공지능 알고리즘입니다. CNN은 1989년 LeCun의 필기체 인식 알고리즘으로 처음 등장하여 2000년대부터 본격적으로 관심을 받아 지속적으로 개선이 이루어지고 있습니다.

728x90
반응형

Comment +0