시맨틱 웹 (Semantic Web)

인터넷 사용자는 원하는 정보를 얻기위해 검색엔진을 이용한다.

검색엔진은 봇을 이용해 웹사이트의 정보를 수집한다.

그리고 이용자가 검색할 만한 키워드를 예상하여 키워드에 대응되는 인덱스를 만들어 둔다.

 

인덱스 생성 시 사용되는 정보는 결국 HTML코드이다.

즉, 검색엔진은 HTML코드로 의미를 파악해야하는데 이때 시맨틱 요소를 해석한다.

 

검색엔진은 <h1>요소 내의 콘텐츠를 웹 문서의 주요 제목으로 인식하고 인덱스에 포함할 확률이 높다.

즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠를 명확히 설명하는 역할을 한다.

 

시맨틱 웹이란 웹페이지들에 메타데이터를 부여하여 의미와 관련성을 가지는 데이터베이스로 구축하려는 것을 의미한다.

 

 

HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.

non-semantic div, span 등이 존재. 콘텐츠와 상관이 없음.
semantic form, table, img 등이 있으며, 콘텐츠의 의미를 담고있다.

 

HTML5에서  추가된 시맨틱 태그

태그 의미
header 헤더를 의미한다.
nav 내비게이션을 의미한다.
aside 사이드에 위치한 공간을 의미한다.
section 본문의 여러 내용을 포함하는 공간을 의미한다.
article 본문의 주 내용이 들어가는 공간을 의미한다.
footer 푸터를 의미한다.

 

 

출처

https://poiemaweb.com/html5-semantic-web

 

Semantic Web | PoiemaWeb

검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

poiemaweb.com

 

'개발 > 웹' 카테고리의 다른 글

[HTML] 4. HTML 기본 태그  (0) 2019.12.24
[HTML] 2. HTML5 기본 문법  (0) 2019.12.18
[HTML] 1. 프런트엔드 개발자 학습 방향  (0) 2019.12.17

1.HTML5

HTML (Hyper Text Markup Language)

웹페이지 기술용 언어.

내용과 구조를 담당. 태그를 통해 구조화한다.

 

2014년 10월 28일 차세대 웹 표준으로 기능이 추가됨.

멀티미디어-플래시같은 플러그인 없이 비디오, 오디오 기능을 지원.

그래픽-SVG, 캔버스를 사용한 2차원 그래픽, CSS, WebGL을 이용한 3차원 그래픽 지원.

통신-서버와의 소켓 통신 지원으로 서버와의 양방향 통신 가능.

디바이스 접근-카메라, 동작센서 등의 하드웨어 기능 제어 가능.

오프라인 및 저장소-오프라인 상태에서도 애플리케이션을 동작시킬 수 있음. 플랫폼으로서 사용 가능.

시맨틱 태그-의미를 가진 태그를 도입해 콘텐츠의 의미를 설명할 수 있게 됨.

CSS3- 지원.

 

2. Hello HTML5

  • HTML5 문서는 <!DOCTYPE html>으로 시작해 문서형식을 지정한다.
  • HTML코드는 <html>과 </html>사이에 기술한다.
  • <head>와 </head> 사이에는 타이틀, 외부 파일 참조, 메타데이터의 설정 등이 위치.
  • 브라우저에 출력되는 요소는 <body>와 </body>사이에 위치한다.
<!DOCTYPE html>
<html>
	<head>
    	<mete charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
    	<h1>Hello World</h1>
        <p>안녕하세요</p>
    </body>
</html>

 

3. HTML5의 기본 문법

3.1 요소(Element)

시작태그와 종료태그, 그리고 그 사이에 위치한 콘텐츠로 구성된다.

태그는 대소문자를 구분하지 않지만 소문자를 추천.

 

3.1.1 요소의 중첩 (Nested Element)

요소는 중첩될 수 있다.

중첩 시 들여쓰기를 한다. 가독성을 위해.

 

3.1.2 빈 요소 (Empty Element)

콘텐츠를 가질 수 없는 요소를 빈 요소라고 한다.

빈 요소는 콘텐츠 없이 어트리뷰트만을 가진다.

예를 들면 br, hr, img, input, link, meta 등..

 

3.2 어트리뷰트 (Attribute)

어트리뷰트란 요소의 성질, 특징을 정의하는 면세이다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보를 제공한다. 오트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.

 

3.2.1 글로벌 어트리뷰트 (HTML Global Attribute)

글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다. 몇몇 요소는 적용되지 않을 수 있지만, 대체로 모든 요소에 사용할 수 있다.

 

id - 식별자를 element에 지정한다. 중복 지정 불가능.

class - 스타일 시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.

hidden - css의 hidden과 다르게 의미상으로도 브라우저에 노출되지 않게 한다.

lang - 지정된 요소의 언어를 지정한다. 검색엔진이 크롤링 시 언어를 인식할 수 있게 한다.

style - 요소에 인라인 스타일을 지정한다.

tabindex - 사용자가 키보드로 페이지 요소 이동시 순서를 지정.

title - 요소에 관한 제목을 지정한다.

 

3.3 주석 (Comments)

주석은 주로 개발자에게 코드를 설명하기 위해 사용된다. 브라우저에 출력되지 않는다.

HTML에서 주석은 <!-- -->를 사용하여 표시하고 내부에 주석을 작성한다.

 

출처

https://poiemaweb.com/html5-syntax

 

HTML5 Introduction & Syntax | PoiemaWeb

HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의　내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.　HTML5는 HTML의 최신 버전으로 아래와 같은 기능들이 추가되었다.

poiemaweb.com

 

'개발 > 웹' 카테고리의 다른 글

[HTML] 4. HTML 기본 태그  (0) 2019.12.24
[HTML] 3. 시맨틱 웹  (0) 2019.12.19
[HTML] 1. 프런트엔드 개발자 학습 방향  (0) 2019.12.17

프런트엔드 개발자가 하는일

애플리케이션을 사용하는 사람이 애플리케이션과 소통하기 위한 창구를 사용하기 좋게 구현한다.

 

서버의 데이터를 가져와 UI에 표현하기도 하고, 사용자가 입력한 정보를 서버에 전송해주기도 함.

디자이너와 백엔드 개발자와 협업.

 

프런트엔드 개발에 필요한 기술

HTML, CSS, js (DOM, event, ajax, node.js)

크로스 브라우징, HTTP

툴-git, webpack, babel, npm, eslint

Angular, React, Vue.js, TypeScript, jQuery

TDD

알고리즘/자료구조.

 

학습해야할 내용이 많음. 순서가 있음.

 

자바스크립트에대한 이해가 중요.

 

초심자가 경험하는 3가지 어려움

1.책이나 수업의 내용을 못알아들음. 주변 개발자의 말을 못알아들음.

배경지식의 부족으로 나타남. 컴퓨터 지식, 용어에 대한 이해, 기본 상식.

 

2. 어떻게 만들어야 할 지 감이 오지 않음.

문제 해결능력 부족. 컴퓨터 사고, 알고리즘/자료구조, 경험.

해결과제의 명확한 이해->복잡한 문제를 단순한 문제로 분해 -> 자료 정리 및 구분 -> 해야할 일 정리

 

3. 어떻게 만들어야 할 지는 알겠지만, 실제로 구현은 하지 못함.

구글링한 코드를 분석할 수 없다.

이해와 연습이 필요.

 

효율적인 프로그래밍 학습 방법

->그런 것 없음.

의식적인 연습을 꾸준히 하는 만큼 성장.

단순 반복과 다름.

 

라이브 코딩은 지식 습득이 아님. 단순 코드 타이핑은 실력이 늘지 않는다.

쉬운 것만 반복하는 것도 연습이 아님.

자신의 능력을 조금 넘는 문제에 도전하는 것이 필요.

시행착오를 통해 성장.

시도->실패->재도전-> ... -> 성장

베이스 지식부터 습득.

너무 얉은 공부도, 너무 깊은 학습도 비효율적.

 

주위 동료의 피드백에 겸손하고 적극적으로 반응하여 교정.

 

마음가짐

서두르지 말 것.

실패를 두려워하지 말 것.

학습한 것을 기록.

프로는 기본기가 탄탄해야함

자신의 일을 좋아해야함.

호기심을 갖을 것.

꾸준히 평생.

 

https://poiemaweb.com/Front-end

 

Front End | PoiemaWeb

 

poiemaweb.com

 

'개발 > 웹' 카테고리의 다른 글

[HTML] 4. HTML 기본 태그  (0) 2019.12.24
[HTML] 3. 시맨틱 웹  (0) 2019.12.19
[HTML] 2. HTML5 기본 문법  (0) 2019.12.18

https://m.blog.naver.com/PostView.nhn?blogId=itperson&logNo=220840607398&proxyReferer=https%3A%2F%2Fwww.google.com%2F

 

MVC, MVP, MVVM 디자인패턴 이해하기

지금도 수 많은 디자인 패턴이 생겼다가 사라져 갔고 앞으로도 계속 그럴 것이지만 가장 많이 언급되는 이 ...

blog.naver.com

 

'개발' 카테고리의 다른 글

객체지향 설계 기법  (0) 2021.04.25
소프트웨어의 두 가지 가치 - 행위와 구조  (3) 2020.11.08
테스트 페이지  (0) 2020.02.16
REST  (0) 2019.08.12

REST란?

REST는 인터넷 상의 시스템간의 상호 운용성을 제공하는 방법 중 하나. 즉 호환성을 위한 아키텍쳐.

상호운용성(Interoperability, 相互運用性)이란 하나의 시스템이 동일 또는 이기종의 다른 시스템과 아무런 제약이 없이 서로 호환되어 사용할 수 있는 성질을 말한다.

 

REST는 HTTP기반으로 필요한 자원에 접근하는 방식을 정해놓은 네트워크 아키텍쳐.

여기서 자원이란, 데이터베이스는 물론, 이미지/동영상/문서와 같은 파일, 서비스(이메일 전송, 푸쉬메시지 등) 등을 모두 포함.

 

REST는 HTTP의 주요 저자 중 한사람인 로이 필딩의 2000년 박사학위 논문에서 처음 소개가 되었음.

 

REST의 제약조건

아래의 조건을 준수하는 웹서비스를 RESTful하다고 한다.

  • 클라이언트-서버 구조
    클라이언트와 서버가 각각의 역할 구분. -> (상호 의존성이 줄어듭니다.)
    서버는 API를 제공, API요청 시 비즈니스 로직 처리와 데이터 저장을 책임진다.
    클라이언트는 사용자 인증, 상태(세션, 로그인 정보)관리와 서버 리소스 요청을 책임진다.
  • 무상태
    HTTP는 stateless 프로토콜이므로 REST도 stateless.
    REST서버는 작업을 위한 상태정보(세션, 쿠키)를 관리하지 않는다. -> (구현이 단순해진다)
    서버는 각각의 요청을 독립적인 요청으로 인식하고 처리한다. -> (서버의 처리에 일관성이 생기고, 서비스 자유도가 높아진다.)
  • 캐시 처리 가능
    HTTP가 가진 강력한 특징 중 하나인 캐싱 기능을 적용할 수 있다.->(응답시간, 성능이 향상된다)
    대량의 요청을 효율적으로 처리하기 위해 캐시가 필요.
  • 계층화
    서버는 여러개의 레이어로 구성될 수 있다.
    API서버는 순수 비즈니스 로직을 수행하고, 그 앞단에 보안, 로드밸런싱, 암호화, 사용자 인증 등을 추가하여 유연성을 높일 수 있다.
  • 인터페이스 일관성
    자원에 대한 조작을 통일되고 한정적인 인터페이스로 수행한다.
    HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.

REST API란?

REST기반으로 서비스 API를 구현한 것을 REST API라고 한다.

 

OpenAPI(공개된 API: 구글맵, 공공데이터 등), 마이크로 서비스(하나의 큰 애플리케이션을 여러 개의 작은 애플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍쳐) 등을 제공하는 대부분의 업체는 REST API를 제공한다.

 

-REST API 특징

REST 기반으로 시스템을 분산하여 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있다.

REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있다.

 

 

REST 주요 구성요소

REST 주요 구성요소는 리소스, 메소드, 메시지 3가지 입니다.

  • 리소스: 접근할 대상. URI를 통해 식별.
  • 메소드: 리소스에 대한 행위, 표준 HTTP 메소드에 따라 자원에 접근(Create, Read, Update Delete)
  • 메시지: HTTP 헤더와 바디에 포함된 메시지는 메시지를 처리하기위한 정보를 포함한다.

즉, REST는 어떤 자원(리소스)에 어떤 행위(메소드)를 어떻게(메시지)할지 HTTP기반으로 정해놓은 아키텍쳐이다.

 

 

 

출처:

http://tech.devgear.co.kr/delphi_news/433404

 

개발자 기술자료 - [REST API] REST API 이해하기

이 글에서는 REST 아키텍처를 소개합니다. REST는? REST(Representational State Transfer)는 인터넷 상의 컴퓨터 시스템간 상호 운용성을 제공하는 방법 중 하나입니다. REST는 HTTP 기반으로 필요한 자원에 접근하는 방식을 정해놓은 네트워크 아키텍처입니다. 여기서 자원이란, 저장된 데이터(DBMS 등)는 물론, 이미지/동영상/문서(PDF 등)와 같은 파일, 서비스(이메일 전송, 푸쉬 메시지 ...

tech.devgear.co.kr

https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

 

[Network] REST란? REST API란? RESTful이란? - Heee's Development Blog

Step by step goes a long way.

gmlwjd9405.github.io

https://m.blog.naver.com/itperson/220844559492

 

REST API 이해하기

RESTREST (REpresentational State Transfer) 는 웹의 창시자(HTTP) 중 한 사람인 Roy F...

blog.naver.com

 

'개발' 카테고리의 다른 글

객체지향 설계 기법  (0) 2021.04.25
소프트웨어의 두 가지 가치 - 행위와 구조  (3) 2020.11.08
테스트 페이지  (0) 2020.02.16
MVC, MVP, MVVM  (0) 2019.08.18

import io를 하고

sbuf = io.BytesIO(imgByte)를 하면 (여기서 imgByte는 jpg이미지의 bytes였음.)

byte 이미지 데이터가 stream이 된다.

 

통신을 통해 받은 이미지를

wxPython을 사용해서 GUI에 bitmap으로 출력해주기 위해 스트림으로 바꿈.

wx.BitmapFromImage(wx.ImageFromStream( sbuf ))

스트림을 이미지로 바꾸고 이미지를 비트맵으로 바꿔주었음.

'개발 > 개발하다가 알게된 것' 카테고리의 다른 글

[안드로이드] 테이블 레이아웃 내부 요소를 너비에 맞추기  (0) 2020.02.17
[안드로이드] getFragmentManager() deprecated  (0) 2020.02.12
[안드로이드] 비밀번호 입력에 보이기/숨기기 토글 기능 추가하기  (0) 2020.02.11
[안드로이드] firebase 앱을 실행하여 설치확인 문제  (2) 2020.02.11
서버 소켓 bind시 INADDR_ANY와 localhost  (0) 2019.04.17

INADDR_ANY는 어떤 주소로든 접속하게 해준다.

 

처음에 python으로 서버를 만들때 localhost를 서버 address에 넣었는데 외부에서 연결이 되지않아 당황했다.

C코드 서버를 보니 INADDR_ANY로 바인딩하는 것을 보고, 어떤 주소에서든 접속하려면 localhost로 설정하는게 아니라 INADDR_ANY로 설정해야함을 알게되었다.

 

python의 소켓 모듈을 사용해서 서버를 만들 때, INADDR_ANY로 설정하려면 bind할 때 empty string을 address부분에 넣어주면 된다.

 

예) server_socket.bind(('', PORT))

'개발 > 개발하다가 알게된 것' 카테고리의 다른 글

[안드로이드] 테이블 레이아웃 내부 요소를 너비에 맞추기  (0) 2020.02.17
[안드로이드] getFragmentManager() deprecated  (0) 2020.02.12
[안드로이드] 비밀번호 입력에 보이기/숨기기 토글 기능 추가하기  (0) 2020.02.11
[안드로이드] firebase 앱을 실행하여 설치확인 문제  (2) 2020.02.11
python3 byte형 이미지 데이터를 Stream으로 바꾸기  (0) 2019.04.18

+ Recent posts

티스토리툴바