[Concepts] 프로그래밍 언어의 개요[Concepts] 프로그래밍 언어의 개요

Posted at 2019. 6. 26. 20:21 | Posted in Computer Concepts




출처 : IT CookBook, 컴퓨터 사이언스






 프로그래밍 언어의 개념



컴퓨터를 움직이게 하려면 명령을 내려야 한다.

프로그래밍 언어는 인간이 컴퓨터와 의사소통할 수 있도록 컴퓨터에 내리는 명령으로 프로그램을 처리하도록 기술한 언어를 말한다.


프로그램은 인스트럭션(Instruction)이라는 명령어로 쓰여 있고, 컴퓨터는 인스트럭션을 논리적 순서(문제를 푸는 방법)에 따라 수행한다. 하지만 2장에서 살펴본 것처럼 컴퓨터는 0이나 1로 된 2진수 형태의 기계어만 처리할 수 있으므로 인스트럭션 역시 기계어로 쓰여 있어 인간이 이해하기 힘들다. 이 문제를 해결하기 위해 인간도 쓰기 쉽고 컴퓨터도 기계어로 해석 할 수 있는 프로그래밍 언어(Programming Language)를 개발하여 사용하게 되었다.








■ 저급 언어와 고급 언어



프로그래밍 언어는 기계어와 유사한 저급 언어와 인간이 쓰는 자연 언어와 유사한 고급 언어로 나뉜다.




#01. 저급 언어


저급언어란 컴퓨터 내부 표현에 가까운 언어로 기계어와 어셈블리어로 나눌 수 있다.

기계어는 0과 1로 작성하고, 어셈블리어는 기계어를 인간이 이해하기 쉽도록 기호홀 표현하여 작성한다.



◎ 기계어 ( Machine Language) 


기계어는 0과 1로 된 2진수 형태의 언어이다.

인간이 이해하기 어려울 뿐만 아니라 하드웨어 주소 체계에 따라 배열이 달라져 컴퓨터 끼리 호환되지 않는 문제가 있어 지금은 거의 사용되지 않는다.



◎ 어셈블리어 ( Assembly Language )


어셈블리어는 기계어 명령을 알기 쉬운 기호로 표시하기 떄문에 기계어는 물론 사용하고자 하는 컴퓨터 내부 구성과도 관계가 깊다.

예를 들어 LDA A라는 어셈블리어 코드는 메모리 A번지에 있는 내용을 누산기 accumulator에 저장하라는 의미로, 기계어 010100000000100에 해당한다.

다음은 A ∨ B 수식을 ( A' ∧ B' )형태로 치환해 계사한 어셈블리어의 예이다.



  LDA A 

 // A번지에 있는 데이터 값을 로드한다.

  CMA

 // 위의 값을 보수( A' )로 바꾼다.

  STA TMP

 // 위의 값을 임시 저장소에 저장한다. 

  LDA B

 // B번지에 있는 데이터 값을 로드한다.

  CMA

 // 위의 값을 보수( B' )로 바꾼다.

  AND TMP

 // AND( A' ∧ B' ) 계산을 수행한다.

  CMA

 // 계산 결과를 보수화하여 ( A ∨ B ) 결과 값을 얻는다.



어셈블리어는 기계어에 비해 간편하게 쓸 수 있지만 기계어인 0과 1의 집합을 문자나 기호로 바꾼 것에 불과하므로 하드웨어 구조에 익수한 사람이 아니면 쓰기 어렵다.

그럼에도 불구하고 주기억 장치, 레지스터, 마으코르포르세서, 입출력 포트 같은 컴퓨터의 하드웨어 장치를 직접 제어할 때는 매우 유용하다.




#02. 고급언어



사용자의 요구 수준이 높아지고 컴퓨터 기술이 발달하면서 다양한 고급 언어가 개발되었다.

고급 언어는 하드웨어의 기술적 요소를 구체적으로 몰라도 쉽게 작성하고 수정할 수 있다.


고급언어의 특징은 다음과 같다.


일상 언어에서 사용하는 표현을 그대로 가져다 쓸 수 있다.

예를 들어 +는 덧셈, -뺄셈으로 상요한느 등 일반적으로 사용하는 단어나 표현을 그대로 쓴다.


기계어나 어셈블리어를 쓰려면 기억장치에 데이터를 읽거나 쓸 때 기억 장소의 주소를 정확히 알아야 한다.

이에 비해 고급 언어는 번지 대신 변수 이름으로 기억 장소에 접근하므로 사용자가 기억 장소의 주소를 일일이 기억할 필요가 없다.


명령어 하나로 다수의 동작을 지시한다.

예를 들어 X = Y + Z × W 명령어는 Z와 W를 먼저 곱하고 그 결과를 Y에 더해 X에 대입하라는 뜻이다.

이처럼 하나의 명령어로 다수의 연산을 실행한다.


다음 그림은 고급 언어로 작성한 프로그램을 실행하는 과정이다. 프로그래머는 먼저 고급 언어와 같은 프로그래밍 언어를 이용해 원시 코드를 작성한다. 그 다음 번역기(컴파일러)가 원시 코드를 목적 코드로 번역한다. 여기서 목적 코드는 긱어로 된 프로그램으로 컴퓨터가 바로 실행할 수 있는 상태의 프로그램 코드이다. 목적 코드는 메모리로 옮겨져 실행되고 결과물을 계산해 낸다.




※ 프로그램 작성과 실행과정





종류에 따라 다르지만 고급 언어는 다음과 같은 형식적인 규칙이 있다. 이를 프로그래밍 언어의 문법 구조(Syntax)라 한다.


어떤 구조와 순서가 있다.

특별한 기호를 사용한다.

언어에 따라서는 마침표( . )나 세미콜론( ; ) 등을 사용한다.


대표적인 고급 언어로는 C언어를 비롯해 포트란(FORTRAN), 코볼(COBOL), 파스칼(PASCAL), C++, 자바(JAVA), 스몰토크(SMALLTALK) 등이 있다.





#03. 프로그래밍 언어의 발전


나라마다 사용하는 언어가 다르듯 프로그래밍 언어도 수백 종 이상이 개발되어 사용되고 있다. 언제 개발되었고 어떻게 발전되어 왔는지 살펴보자.



① 1950년대 언어


이전까지 기계어로 작성하던 프로그램을 1950년대 초에 처음으로 어셈블리어로 작성하였다.

어셈블리어는 기계어인 0과 1을 인간이 이해하기 쉬운 코드로 바꾸어 기계어보다 작성하기 쉬웠지만, 하드웨어 위주의 언어라는 제약이 따랐다.

그러던 중 과학 분야의 복잡한 계산을 수행하기 위해 포트란(FORTRAN, FORmula TRANslator)이 개발되었다.

포트란은 프로그래밍 언어가 발전하는데 새로운 이정표를 세웠다.



② 1960년대 언어


포트란을 발전시킨 과학기술용 고급 언어가 잇따라 개발되었고, 사무 처리용 고급 언어도 개발되었다.

대표적인 사무 처리용 언어가 코볼(COBOL, COmmon Business Oriented Language)이다.

코볼은 미국 국방성이 후원하여 컴퓨터 제품 간의 호환성 문제를 해결하기 위해 개발한 것으로, 수차례의 수정과 보완을 거쳐 사무 처리용 언어로 확고히 자리를 잡았다.

포트란 같은 과학기술용 언어는 프로그램을 수학적 푝법을 사용하여 작성하는데 반해, 코볼은 영어에 가까운 구문을 사용하기 때문에 작성하기도 편하고 이해하기 쉽다는 장점이 있다.

1960년대 포트란과 코볼의 장점을 살린 하이브리드 형태인 PL/I(Programming Language One)이 등장해 관심을 크게 끌었지만, 오늘날에는 코볼에 비해 사용 빈도가 낮은 편이다.



③ 1970년대 언어


하드웨어 가격이 떨어지고 소프트웨어가 복잡해지면서 프로그래밍 언어 역시 소프트웨어 중심으로 비중이 옮겨가기 시작했다.

소프트웨어의 복잡성과 관리가 중요한 쟁점으로 떠오르면서 더 강력하고 새로운 개념의 언어가 필요해졌다.

이렇게 개발된 언어가 C언어와 파스칼(PASCAL)이다.


C언어는 원래 시스템 소프트웨어를 개발하는 언어였지만 다양한 종류의 컴퓨터에 이식할 수 있다는 점 때문에 현재까지도 여러 분야에 두루 사용되고 있다. 실제로 수많은 워드프로세서, 스프레드시트, 그래픽 프로그램, 게임 등이 C언어로 제작되었다.

유닉스 운영체제가 등장하면서 C언어의 인기가 날로 높아졌는데 이것은 비트 연산과 같은 저급 언어 기능을 갖추고 있어 빠르고 효율적이기 때문이다.

물론 이후 등장한 언어에 비해 배우기가 어렵고 보고서 작성이나 데이터 파일 조작이 많은 업무에는 부적합하다는 단점이 있다.


파스칼은 프랑스 수학자인 파스칼(Pascal)의 이름에서 따온 언어로, 1969년에 스위스 취리히 공과대학의 니클라우스 위스(Niklaus Wirth) 교수가 개발했다.

파스칼은 당시 유행한 구조적 프로그래밍에 적합한 언어이기도 했고, 쉽게 배울 수 있는 것은 물론 이공계 및 과학계 종사자가 주로 사용하는 그래픽 처리 기능 또한 뛰어나 많은 사람에게 주목을 받았다.

하지만 대화식 입출력이나 사무 처리 분야에 응용하기엔느 부족했고, C언어에 비해 사용자를 크게 늘리지 못하면서 1990년대 중반 이후에는 인기가 시들해졌다.



④ 1980년대 언어


본격적으로 컴퓨터 하드웨어 가격이 떨어지면서 개인용 컴퓨터와 중앙 컴퓨터가 연결된 단말 시스템을 이용한 분산 처리 개념이 확산되었다.

이러한 이유로 학생들과 컴퓨터 초보자들도 쉽게 배울 수 있는 교육용 언어가 필요해졌고 이때 등장한 언어가 베이직(BASIC)이다.

베이직은 쉽게 배울 수 있고 중앙 컴퓨터와 연결된 단말 시스템에서 처리하는 시분할 시스템(Time Sharing System)운영 에 적합한 기능을 가지고 있어 많은 인기를 끌었다.

다만 비교적인 측면이 있어 소프트웨어 규모가 커질 수록 관리하기 번잡해지고 운영이나 유지가 많이 어렵다는 단점이 있었다.

이후 이러한 단점을 개선한 퀵 베이직(Quick Basic)과 비주얼 베이직(Visual Basic) 등이 등장했고 지금까지도 널리 사용되고 있다.



⑤ 1990년대 언어


객체 지향 언어가 본격적으로 등장했다.

특히 GUI(Graphical User Interface) 환경의 프로그래밍을 위한 여러 클래스의 라이브러리가 등장하면서 객체 지향 언어의 장점이 크게 부각되었다.

이러한 추세에 맞춰 C++, 자바(JAVA), 비주얼 베이직(Visual Basic)등의 객체 지향 언어가 등장했다.

이들 언어은 기존의 객체 개념을 업그레이드하고 GUI 개념을 강화하는 방향으로 더욱 발전해 나갔다.


비주얼 베이직은 베이직과 퀵 베이직을 개선하여 객체 지향 개념을 보강한 언어이다.

GUI 기능을 내세워 사용자가 쉽게 사용할 수 있어 지금까지 많이 활용된다.



⑥ 2000년대 이후 언어


2000년대에 접어들면서 사용자는 더욱 간편하고 쉬운 방법으르 프로그래밍하길 원했고 이미 개발된 프로그램을 쉽게 가져다 쓸 수 있는 소프트웨어가 나오길 기다렸다.

강화된 기능의 웹과 저렴해진 하드웨어는 이러한 사용자 요구를 만족시킬 방법을 찾아냈다.


먼저 파워빌더(PowerBuilder), 델파이(Delphi), 각종 쿼리(Query) 전용 언어 등 소위 4세대라 불리는 언어가 등장했다.

4세대 언언느 특정 상황에 맞춤식으로 사용할 수 있고, 종래의 고급 언어보다 사용하기가 쉽다.

또한 사용자에게 강화된 텍스트 환경이나 시각 환경을 제공한다.


객체 지향 프로그래밍 기법이 발전하면서 소프트웨어 모듈을 컴포넌트화하여 필요할 때마다 사용할 수 있도록 하는 소프트웨어 컴포넌트 기술도 빠르게 발전했다. 이 기술은 소프트웨어를 전자 부품처럼 통일된 인터페이스로 제작함으로써 소프트웨어(Software Factory)을 만들 수 있도록 도왔다.

소프트웨어 컴포너트는 차세대 소프트웨어 기술의 핵심 분야로 인식되면서 소프트웨어 생산성 향상을 위한 필 수 기술로 대두 되었다.


이 시기에는 객체 지향 기술과 웹이 결합하여 다양한 정보를 제공하는 기법이 발전했다.

XML(eXtensible Markup Language)과 VRML(Virutal Realiry Modeling Language) 등 각종 웹 프로그래밍 언어가 등장했다.

XML은 HTML의 한계를 극복할고 만든 언어로 다른 시스템 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고받을 수 있도록 한다.

VRML은 인터넷이나 로컬 시스템에서 3차원 개체나 세계를 표현하기 위한 파일 형식이다.

XML과 VRML은 기존 객체 지향 언어와 결합하여 인터넷에서 텍스트, 이미지, 애니메이션, 사운드 등을 비롯한 가상현실(Virtual Reality) 까지 구현할 수 있는 기술로 발전하고 있다.


최근에는 5세대 언어라 불리는 인공지능 기능을 이요해 자연 언어(Natural Language)로 직접 처리하는 기법에 대한 연구가 활발히 진행되고 있다.

음성인식 시스템이나 자동 번역 시스템 등도 이러한 기법의 일부라 할 수 있다.






※ 프로그램 작성과 실행과정









Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Puppeteer] Puppeteer와 Cheerio를 활용한 데이터 스크랩핑[Puppeteer] Puppeteer와 Cheerio를 활용한 데이터 스크랩핑

Posted at 2019. 6. 20. 21:10 | Posted in Node.js/Puppeteer




■ 퍼펫티어를 이용한 유튜브 채널 스크랩핑




유튜브 API가 제대로 동작하지 않게 되었다.


cheerio-httpcli 모듈로 YouTube 페이지의 데이터를 스크래핑 하려 해보았지만.


유튜브의 경우 cheerio-httpcli를 통한 단순한 데이터 스크랩핑을 해보니


많은 수의 json형태의 데이터를 가져오기에


포기하던 차에 puppeteer를 활용해 보기로 했고


결과는 어느정도 만족할 수 있는 수준이었다.






위와 같이 유튜브 특정 채널의 업로드 영상을 가져와 보려고 한다.




# 소스코드

 puppeteer_ra_om_musiq.js

const puppeteer = require( "puppeteer" );

const cheerio = require( "cheerio" );


puppeteer.launch( { headless : true } ).then(async browser => {


const page = await browser.newPage();

await page.goto( "https://www.youtube.com/user/RaOmMusiq/videos/", { waitUntil : "networkidle2" } );

        // YouTube 페이지의 <ytd-grid-renderer> 태그 안의 내용을 가져온다.

const html = await page.$eval( "ytd-grid-renderer", e => e.outerHTML );


        // console.log(html);


const datacheerio.loadhtml );

data( "a.ytd-grid-video-renderer" ).each( function( key, val ) {


               // substring을 사용하여 불필요한 값을 잘라낸다. 

var videoId = data( val ).attr( "href" ).substring( 9, 20 );

var videoTitle = data( val ).text();

console.log( "VIDEO ID = ", videoId );

console.log( "VIDEO TITLE = ", videoTitle );

});

});





# 출력결과




위와같이 필요로 하는 YouTube 영상의 아이디 값 타이틀 제목을 얻어오는 모습을 확인 할 수 있다.






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Concept] DNS(Domain Name System) 이란?[Concept] DNS(Domain Name System) 이란?

Posted at 2019. 6. 20. 16:46 | Posted in Computer Concepts




참고 : https://support.google.com/a/answer/48090?hl=ko

참고 : https://aws.amazon.com/ko/route53/what-is-dns/





■ DNS(Domain Name System)의 기본사항




-. DNS는 도메인 이름 시스템을 의미하며, 기본적으로 웹에서 도멘인을 정리하고 확인하는 전화번호부와 같은 역할을 한다.

-. 스마트폰이나 노트북부터 대규모 소매 웹 사이트 콘텐츠를 서비스 하는 서버에 이르기까지 인터넷상의 모든 컴퓨터는

   숫자를 사용하여 서로를 찾고 통시하는데 이러한 숫자를 IP주소라고 한다.

-. 웹 브라우저를 열고 웹 사이트로 이동할 때는 긴 숫자를 기억해 입력할 필요없이 wickedmiso.com 같은 도메인 이름을 입력해 원하는 웹 사이트로 갈 수 있다.

-. "Acme Pizza"와 같은 이름이 전화번호부를 통해 전화번호로 변환되는 것처럼, "www.google.com"과 같은 웹 주소는 웹 주소는

  DNS를 통해 "74.125.19.147"과 같이 사이트(이 경우 Google 홈페이지)를 호스팅하는 컴퓨터의 실제 IP주소로 변환된다.





■ DNS SERVER의 역할









① 사용자가 웹 브라우저를 열어 주소 표시줄에 www.domain.com 을 입려가호 Enter키를 누른다.


② www.domain.com에 대한 요청은 일반적으로 케이블 인터넷 공급업체, DSL 광대역 공급업체 또는 기업 네트워크 같은 인터넷 서비스 제공업체()


③ ISP의 DNS 해석기는 www.domain.com에 대한 요청을 DNS 루트 이름 서버에 전달한다.


④ ISP의 DNS 해석기는 www.domain.com에 대한 요청을 이번에는 .com 도메인의 TLD 이름 서버 중 하나에 다시 전달한다.

 

⑤ ISP의 DNS 해석기는 DNS 네임 서버 하나를 선택해  www.domain.com에 대한 요청을 해당 이름 서버에 전달한다.


⑥ DNS 네임 서버는 domain.com 호스팅 영역에서 www.domain.com 레코드를 찾아 웹 서버의 IP 주소(예 : 120.0.0.1)에 연관된 값을 받고

   이 IP 주소를 DNS 해석기로 변환한다.


⑦ ISP의 DNS 해석기는 마침내 사용자에게 필요한 IP주소를 확보하게 된다. 해석기는 이 값을 웹 브라워로 반환한다.

   또한, DNS 해석기는 다음에 누군가가 example.com을 탐색할 때 좀 더 빠르게 응답할 수 있도록 사용자가 지정하는 일정 기간동안

   domain.com의 IP주소를 캐싱(저장)한다.(자세한 내용은 TTL(Time to Live)을 참조)


⑧ 웹 브라우저는 DNS 해석기로 부터 얻은 IP 주소로 www.domain.com에 대한 요청을 전송한다.

    여기서 콘텐츠가 있는 곳으로, 예를 들어 웹 사이트 엔드포인트로 구성된 웹 서버이다.


⑨ 120.0.0.1에 있는 웹 서버 또는 그 밖의 리소스 www.domain.com의 웹 페이지를 웹 브라우저로 반환하고, 웹 브라워는 이 페이지를 표시한다.










■ DNS의 종류





# MX 레코드(Mail Exchanger Record)


-. 메일 교환(MX) 레코드는 도메인 이메일을 도메인의 사용자 계정을 호스팅하는 서버로 전송한다.




# TXT 레코드(Text Record)


-. TXT 레코드는 도메인 외부 소스에 다양한 목적으로 사용될 수 있는 텍스트 정보를 제공하는 DNS 레코드이다.

-. 레코드 값은 사람이나 컴퓨터가 읽을 수 있는 텍스트가 될 수 있다.




# CNAME 레코드(Canonical Name Record)


-. CNAME 레코드 즉 정규 이름 레코드는 다른 페이지에 정규 도메인 이름앞에 별칭 이름을 지어 연결한다.

-. 예를들어 www.wickedmiso.com을 wickedmiso.com 혹은 blog.wickedmiso.com 으로 연결할 수 있다.




# A 레코드(Address Mapping Records)


-. A 레코드는 주소 레코드 혹은 호스트 레코드라고 한다.

-. 도메인 서비스를 호스팅하는 컴퓨터의 실제 IP주소에 도메인을 연결한다.




# NS 레코드(Name Server Records)


-. 네임 서버 레코드는 도메인에 대해 어떤 서버가 DNS 정보를 전달할지 결정한다.

-. 일반적으로 도메인에 기본 및 보조 네임서버 레코드가 있다.




# TTL(Time To Live)


-. TTL은 다음 레코드 변경사항이 적용될 때까지 걸리는 시간(초)을 결정하는 DNS 레코드 값이다.

-. MX레코드, CNAME 레코드 등 도메인의 각 DNS 레코드에는 TTL 값이 포함된다.

-. 레코드의 현재 TTL은 변경사항이 적용될 때까지 걸리는 시간을 결정한다.

  예를 들어 TTL값이 86,400초인데 레코드는 변경사항은 적용될 때까지 24시간이 소요된다.



※ 레코드 설정을 단축하는 방법

  · 레코드의 TTL을 변경하면 향후 변경사항이 적용되는 시간에 영향을 준다.

  · 인터넷사의 서버가 레코드의 업데이트 사항을 매시간 확인하도록 TTL값을 3600으로 설정하는 것이 좋다.

  · 단축된 TTL은 이전 기간이 만료된 후에만 효력을 발생한다.

  · 이렇게 하면 향후 레코드를 업데이트할  경우 변경사항이 적용될 때까지 한시간이 소요된다.

  · 변경사항을 신속하게 되돌릴 필요에 대비하는 등 다음 변경사항이 더욱 빠르게 적용되도록

    TTL을 300초(5분)와 같이 더 짧게 설정할 수도 있다.

  · MX레코드가 올바르게 구성되면 TTL값을 86400으로 설정하는 것이 좋다. 이렇게 하면 인터넷상의

   서버에서 24시간 마다 확인하여 MX 레코드를 업데이트 하게 된다.





# URL(Uniform Resource Locator)


-. URL은 인터넷 리소스의 웹 주소로, 특정 웹 사이트를 방문하기 위해 브라우저에 입력하는 주소이다.








■ DNS 구성 예시



-. DNS 설정시 실제 도메인 이름이 아닌 @기호를 사용하여 도메인 이름을 표시한다.



※ Google Cloud 서비스와 함께 사용된ㄴ 도메인의 샘플 DNS 설정

이름 / 호스트 / 별칭 

레코드 유형

우선순위

예) 값 / 응답 / 목적지

공백 또는 @

A

NA

 216.239.32.21

공백 또는 @

A

NA

 216.239.32.21

공백 또는 @

A

NA

 216.239.32.21

공백 또는 @

A

NA

 216.239.32.21

공백 또는 @

MX

1

 ASPMX.L.GOOGLE.COM.

공백 또는 @

MX

5

 ALT1.ASPMX.L.GOOGLE.COM.

공백 또는 @

MX

5

 ATL2.ASPMX.L.GOOGLE.COM.

공백 또는 @

MX

10

 ASPMX2.GOOGLEMAIL.COM.

공백 또는 @

MX

10

 ASPMX3.GOOGLEEMAIL.COM.

공백 또는 @

CNAME

NA

 ghs.googlehostedcom.

공백 또는 @

TXT

NA

 google-site

 verification=6tTalLzrBXBO4Gy9700TAbpg2QTKzGYEuZ_Ls69jle8

공백 또는 @

TXT

NA

 v=spf1 include:_spf.google.com ~all

www

CNAME

NA

 ghs.googlehosted.com.









Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Concepts] 컴퓨터의 구성[Concepts] 컴퓨터의 구성

Posted at 2019. 6. 19. 12:31 | Posted in Computer Concepts




출처 : IT CookBook, 컴퓨터 사이언스






■ 컴퓨터의 구성




-. 컴퓨터란 전자회를 이용하여 입력된 데이터를 자동으로 처리한 후 결과를 즉시 출력하거나 이후에 사용할 수 있도록 저장하여 관리하는 기계이다.

-. 컴퓨터는 종류나 크기 또는 성능에 상관없이 하드웨어와 소프트웨어로 구성된다.

-. 하드웨어는 컴퓨터를 구성하는 기계적 장치를 말하고, 소프트웨어는 하드웨어의 동작을 지시하는 명령어 집합인 프로그램을 말한다.







#01. 하드웨어


-. 하드웨어는 모니터, 하드디스크, 프린터 같은 컴퓨터와 관련된 모든 물리적 장치로 입력 기능, 출력기능, 기억 기능, 처리(연산)기능, 저장 기능을 담당한다.

-. 이에 따라 하드웨어는 입력장치, 출력장치, 중앙처리장치, 기억장치로 구분할 수 있다.




① 입력장치


 · 입력장치는 외부로부터 문자, 소리, 그림 영상 등의 데이터를 전달받는 장치이다.

 · 키보드, 마우스, 스캐너등이 대표적이다.



② 출력장치


 · 출력장치는 수행된 결과를 문서나 그림 형태로 사용자에게 전달하는 장치이다.

 · 모니터와 프린터가 대표적이다.



③ 중앙처리장치


 · 중앙처리장치(CPU, Contral Processing Unit)은 프로세서(Processor)라고도 불리는데,

  입력된 데이터를 연산하여 결과를 얻기 위한 장치로 컴퓨터에서 가장 핵심적인 역할을 한다.

 · 중앙처리장치의 내부는 제어장치(Control Unit)와 연산장치(ALU, Arithmetic Logic Unit)로 구성된다.

 · 제어장치는 중앙처리장치와 기억장치 사이에서 프로그램 명령과 데이터 입출력을 제어하고 연산장치는 산술연산과 논리연산을 수행한다.

 · 산술연산 : 수치데이터를 대상으로 하는 덧셈, 뺄셈, 곱셈, 나눗셈을 말한다.

 · 논리연산 : 2진 데이터 0과 1을 대상으로 하는 논리합(OR), 논리곱(AND), 부정(NOT), 배타적 논리합(XOR) 등을 말한다.



④ 기억장치


 · 기억장치는 입출력 데이터와 연산 처리 결과를 저장하는 장치로 주기억장치(Main Memory)와 보조기억장치(Secondary Memory)로 나눌 수 있다.

 · 주기억 장치에는 RAM(Random Access Memory)와 ROM(Read Only Memory)이 있다.

 · 보조기억장치에는 하드디스크, CD-ROM, DVD 플래시 메모리(Flash Memory)등이 있다.











※ 컴퓨터의 5대 장치


위의 설명에서 입력장치, 출력장치, 기억장치, 연산장치, 제어장치를 5개를 말한다.









#02. 소프트웨어


-. 소프트웨어는 하드웨어를 구성하는 각 장치에의 동작을 제어하는 명령어의 집합으로 프로그램이라고도 부른다.

-. 컴퓨터 사용자는 소프트웨어를 통해 하드웨어를 제어하기 때문에 소프트웨어가 없으면 컴퓨터를 사용하기 힘들다.

   물론 하드웨어적으로 컴퓨터를 제어하도록 설계할 수 도 있짐만 그럴 경우 하드웨어가 복잡해지고 개발 비용도 많이든다.

   이에 비해 소프트웨어는 컴퓨터를 매우 정교하게 제어할 수 있고 융통성까지 뛰어나기 때문에 하드웨어로 컴퓨터를 제어한느 것보다 훨씬 편리하다.

-. 소프트웨어는 시스템 소프트웨어와 응용 소프트웨어로 나뉜다.




① 시스템 소프트웨어(System Software)


 · 시스템 소프트웨어는 운영체제, 컴파일러(Compiler), 어셈블러(Assember), 각종 유틸리티(Utility) 등과 같이 컴퓨터 시스템을 운영한느 데 필요한 프로그램을 말한다.

 · 사용자가 하드웨어를 쉽고 편리하게 사용 할 수 있도록 돕는 역할을 한다.



② 응용 소프트웨어(application Software)


 응용 소프트웨어는 문서 작성, 그림 편집, 동영상 제작, 인터넷 검색 같은 특정 업무를 할 때 사용하는 프로그램을 말한다.




※ 시스템 소프트웨어와 응용소프트웨어의 비교

구분

시스템 소프트웨어

응용 소프트웨어

개념

 · 컴퓨터 시스템을 쉽고 편리하게 사용할 수 있도록

  도와주는 소프트웨어

 · 사용자가 특정 업무를 수행하기 위해 사용하는 소프트웨어

종류

 · 운영체제, 컴파일러, 어셈블러, 유틸리티, 장치 드라이버 등

 · 워드프로세서, 스프레드시트, 웹 브라우저, 회계 처리 프로그램

 · 윈도우, 유닉스, 리눅스 등

 · MS Office, 아래한글, 포토샵, Visual C++ 등









Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작

Posted at 2019. 6. 18. 14:47 | Posted in JavaScript & jQuery/jQuery


※ 참고


해당 예제는 jQuery Mobile의 HTML TABLE을 반응형으로 바꿔 모바일 화면에 맞게 출력할 수 도 있게 해주는 예제이다.

그렇기에 해당 예제는 jQuery.mobile.css 파일이 반드시 필요하기에. 사전에 제작중인 사이트에서 사용할 경우 CSS의 충돌은 염두해 두어야 할것이다.






■ 모바일 화면 크기에 맞는 테이블 레이아웃 변경





실제 사이트를 제작하고 운영하는 단계에서


요즘 반드시 고려하게 되는것이,


디바이스 화면에 맞추어 화면을 변화시키는 것이고,


그중 가장 귀찮게 하는것이 바로 HTML TABLE일 것이다.


컴퓨터와 모바일 디바이스에서의 보여주어야 하는 정보를 어떻게 처리해야 할지 상당히 귀찮고.


피곤한데, 이 고민을 jQuery Mobile을 사용하면 어느정도 덜어 낼 수 있다.




# HTML 소스 코드

 table_reaction.html

<html>

<head>

<title>:: 빅데이터 분석결과 ::</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>

<link rel="stylesheet" href="./custom_table.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

</script>

</head>

<body>

<div data-role="content">

<h2>걸그룹 개인 브랜드 2019년 6월 빅데이터 분석결과</h2>

<table data-role="table" class="ui-responsive">

<thead>

<tr>

<th>순위</th><th>그룹명</th><th>이름</th><th>참여지수</th>

<th>미디어지수</th><th>소통지수</th><th>커뮤니티지수</th><th>총합</th>

</tr>

</thead>

<tbody>

<tr>

<td>2</td><td>레드벨벳</td><td>아이린</td><td>186,886</td>

<td>700,986</td><td>655,633</td><td>295,489</td><td>1,838,995</td>

</tr>

<tr>

<td>3</td><td>블랙핑크</td><td>지수</td><td>296,098</td>

<td>336,852</td><td>699,946</td><td>488,412</td><td>1,821,308</td>

</tr>

<tr>

<td>8</td><td>트와이스</td><td>나연</td><td>184,853</td>

<td>289,526</td><td>530,781</td><td>222,033</td><td>1,248,732</td>

</tr>

<tr>

<td>29</td><td>러블리즈</td><td>정예인</td><td>95,033</td>

<td>400,325</td><td>99,946</td><td>318,187</td><td>913,491</td>

</tr>

<tr>

<td>32</td><td>EXID</td><td>하니</td><td>290,677</td>

<td>169,911</td><td>303,396</td><td>135,080</td><td>899,063</td>

</tr>

<tr>

<td>36</td><td>트와이스</td><td>사나</td><td>179,119</td>

<td>182,508</td><td>255,687</td><td>242,732</td><td>860,046</td>

</tr>

<tr>

<td>41</td><td>레드벨벳</td><td>웬디</td><td>115,885</td>

<td>151,444</td><td>317,304</td><td>218,490</td><td>803,124</td>

</tr>

<tr>

<td>52</td><td>오마이걸</td><td>유아</td><td>283,587</td>

<td>184,294</td><td>137,143</td><td>141,610</td><td>746,634</td>

</tr>

<tr>

<td>53</td><td>모모랜드</td><td>연우</td><td>462,914</td>

<td>180,397</td><td>274,933</td><td>125,720</td><td>717,525</td>

</tr>

<tr>

<td>90</td><td>트와이스</td><td>미나</td><td>107,567</td>

<td>101,775</td><td>108,571</td><td>165,970</td><td>483,883</td>

</tr>

<tr>

<td>96</td><td>우주소녀</td><td>성소</td><td>252,931</td>

<td>57,348</td><td>93,477</td><td>50,066</td><td>453,722</td>

</tr>

<tr>

<td>98</td><td>다이아</td><td>정채연</td><td>211,648</td>

<td>108,572</td><td>81,186</td><td>46,940</td><td>448,345</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>




TABLE에 data-role="table" 속성을 추가하면


thead의 제목 필드값이 tbody의 td 값들 앞에 붙여지게 되지만.


그것은 jQuery.mobile.css 에서 노출을 막아주고 있기에


화면 사이즈의 변화에 따라서만 노출되게 된다.




# CSS 디자인

 custom_table.css

/* 화면 사이즈 조절 */

@media screen and (min-width:36em) {

/* 화면의 사이즈가 560px 이상일 경우 table의 텍스트를 가운데 정렬 한다.*/

.ui-responsive th, .ui-responsive td {

text-align:center;

}

}


/* 테이블 디자인 */

table {

width:100%;

text-align:center;

border-collapse:collapse;

}


th {

background:linear-gradient(#333333 0%, #444444 100%);

color:#FFFFFF;

font-weight:bold;

height:60px;

font-size:20px;

}

td {

height:40px;

}


/* 홀수행 백그루안드 색상 */

tr:nth-child(even) td {

background:#EEEEEE;

}


/* 짝수행 백그루안드 색상 */

tr:nth-child(odd) td {

background:#FDFDFD;

}




코드의 준비가 끝났다면


브라우저를 통해 해당 HTML 코드를 불러와 보자.




# 출력결과01 - 풀 사이즈






처음 풀 사이즈로 본 화면은 평소 컴퓨터를 할때 자주 접하게 되는


HTML TABLE과 다른 부분을 찾아볼 수 없다.


그럼 이제 해당 화면이의 가로 넓이 사이즈를 줄여 나가 보자.






# 출력결과 - 모바일 사이즈





그럼 위와같이 모바일 화면에 맞게 새로 정의된 TABLE의 내용을 확인 할 수 있다.








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] Serial Port를 이용한 Arduino 이벤트 실행[Node.js] Serial Port를 이용한 Arduino 이벤트 실행

Posted at 2019. 6. 13. 18:54 | Posted in Node.js




참고 : https://kocoafab.cc/tutorial/view/501

참고 : https://kocoafab.cc/tutorial/view/504






■ 직렬 포트(Serial Port)란?




직렬포트란 한번에 한 비트씩 수신하는 방식의 포트를 말한다.

질렬 포트는 PC에서 직렬 방식으로 주변 장치와 연결할때 사용하는 포트이다.

마우스나 키보드, 모뎀등이 시리얼 포트로 연결해서 사용한다.

직렬 포트는 구조가 단순하여 사용하기 편리한 장점이 있다.

단점으로는 한 선로에 1비트씩 보내기 때문에 전송속도가 낮고 1개의 포트로 주변 기기 1개만 연결된다는 단점이 있다.









■ Node.js 에서 아두이노 연결하기



먼저 테스트에 앞서 아두이노 장비를 준비하고 컴퓨터에 연결하자.




컴퓨터 장치관리자에 들어가면 위와같이 아두이노 장비가 추가된 것을 확인 할 수 있다.






# 모듈설치

 npm install serialport




# 소스코드

 serialport_check.js

const serialPort = require("serialport");


serialPort.list(function(err, ports) {

ports.forEach(function(port) {


console.log("###################################################");

console.log("comName : ", port.comName);

console.log("---------------------------------------------------");

console.log("pnpId : ", port.pnpId);

console.log("---------------------------------------------------");

console.log("manufacturer : ", port.manufacturer);

console.log("###################################################");

});

});




# 출력결과

C:\> node serialport_check.js



그럼 위와같은 화면이 나온다면 윈도우즈에서 node.js 의 설치가 마무리 되었다.










■ 아두이노에 입력값 전달하여, 자동 키보드 입력 하기




# 아두이노 소스코드

 physical_key_input.ino

#include <Keyboard.h>


void setup() {

  Serial.begin(9600);

}


void loop() {

   

if(Serial.available() > 0) {

   

Keyboard.begin();

/* 받을 문자열의 길이를 100으로 지정한다 */

char temp[100];

/* 문자열을 잘라 넣는다. */

byte leng = Serial.readBytes(temp, 20);

 

digitalWrite(13, HIGH);      /* 받은 문자값을 출력할 동안 불을 켜둔다. */

delay(1000);                   /* 값이 입력되기 전까지 딜레이를 10초 준다. */


/* 자른 문자열의 갯수만큼 반복문을돌려 키보드로 입력 신호를 전달한다. */

for(int num = 0; num < leng; num++) {

Keyboard.print(temp[num]);

delay(200);

}

           

digitalWrite(13, LOW);      /* 문자값이 출력도리 동안 켜둔 불을 끈다 */

Keyboard.end();

Serial.end();

}

}




# 노드.js 소스코드

 serialport_arduino.js

const SerialPort = require("serialport");

const sp = new SerialPort("COM9", { baudRate:9600, autoOpen:false });


function timeDelay(timeout) {

return new Promise((resolve) => {

setTimeout(resolve, timeout);

});

}


sp.open(function() {

timeDelay(5000);

sp.on("error", function(error) {

console.log("Error : ", error.message);

});


sp.write("Hello SAAK", function(error) {

if(error) {

return console.log("Error on write : ", error.message);

} else {

console.log("메세지가 정상적으로 입력되었습니다.");

}

});

});




# 출력결과











Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] QR CODE 스캐너 제작 - jsQR 사용[JavaScript] QR CODE 스캐너 제작 - jsQR 사용

Posted at 2019. 6. 13. 14:28 | Posted in JavaScript & jQuery/JavaScript




GitHub : https://github.com/cozmo/jsQR





■ 자바스크립트로 QR코드 스캔하고 데이터 읽기





인터넷에 많이 돌아다니는 자료들로 손쉽게 QR코드를 제작할 수 있지만.


보통 이렇게 생산한 QR코드를 읽어어오는 리더기를 제작하는것과 관련된 것은


잘 정리된 포스트를 발견하기 힘들었다.



그렇게 여러가지 방법을 찾다가.


jsQR이란 모듈을을 발견하였고,


이번에 jsQR을 이용하여


제작한 QR코드를 스캔하려하는 예제를 정리해 본다.








#01. jsQR 다운받기



먼저 https://github.com/cozmo/jsQR 페이지에 접속하여 jsQR-master.zip 파일을 을 다운받도록 하자.






다운받은 jsQR-master.zip 파일의 압축을 해제하면


안에 docs 라는 디렉토리가 존재할 것이다.






docs 디렉토리 내에는


index.html 파일과 jsQR.js 파일이 존재하는데


실질적으로 여기서 사용하게 될 파일은 이 jsQR.js 하나이다.








#02. 소스 코드 작성



그냥 index.html을 바로 사용해도 되지만.


아래 코드는 필자가 현재 사용하려고 하는 프로젝트의 성격에 맞게 index.html변경한 코드이다.



<html>

<head>

<meta charset="utf-8">

<title>:: jsQR 테스트 ::</title>

// 다운받은 jsQR.js 를 사용한다.

<script type="text/javascript" src="./jsQR.js"></script>

<style type="text/css">

main {

width:100%;

height:100%;

text-align:center;

}

main > div {

float:left;

width:1%;

height:98%;

}

main > div:first-child {

width:49%;

}

main > div:last-child {

background-color:#D3D3D3;

width:49%;

}


div#output {

background-color:#BDBEBD;

padding-left:10px;

padding-right:10px;

padding-top:10px;

padding-bottom:10px;

}

div#frame {

border:2px solid #005666;

background-color:#FFFFFF;

margin-left:10px;

margin-right:10px;

padding-left:8px;

padding-right:8px;

padding-top:8px;

padding-bottom:8px;

}

div#outputLayer {

text-align:left;

}

canvas {

width:100%;

}

</style>

</head>

<body>

<main>

<div id="test">

<h1>QR 코드 리더</h1>

<div id="output">

<div id="outputMessage">

QR코드를 카메라에 노출시켜 주세요

</div>

    <div id="outputLayer" hidden>

    <span id="outputData"></span>

    </div>

</div>

</div>

<div>&nbsp;</div>

<div>

<h1>스캔</h1>

<div id="frame">

<div id="loadingMessage">

🎥 비디오 스트림에 액세스 할 수 없습니다<br/>웹캠이 활성화되어 있는지 확인하십시오

</div>

<canvas id="canvas"></canvas>

</div>

</div>

</main>

</body>

</html>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

var video = document.createElement("video");

var canvasElementdocument.getElementById("canvas");

var canvas = canvasElement.getContext("2d");

var loadingMessagedocument.getElementById("loadingMessage");

var outputContainerdocument.getElementById("output");

var outputMessagedocument.getElementById("outputMessage");

var outputDatadocument.getElementById("outputData");

function drawLine(begin, end, color) {

canvas.beginPath();

canvas.moveTo(begin.x, begin.y);

canvas.lineTo(end.x, end.y);

canvas.lineWidth = 4;

canvas.strokeStyle = color;

canvas.stroke();

                }

    

        // 카메라 사용시

navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {

              video.srcObject = stream;

              video.setAttribute("playsinline", true);      // iOS 사용시 전체 화면을 사용하지 않음을 전달

          video.play();

              requestAnimationFrame(tick);

});


function tick() {

loadingMessage.innerText = "⌛ 스캔 기능을 활성화 중입니다."

if(video.readyState === video.HAVE_ENOUGH_DATA) {

              loadingMessage.hidden = true;

              canvasElement.hidden = false;

              outputContainer.hidden = false;

       

              // 읽어들이는 비디오 화면의 크기

              canvasElement.heightvideo.videoHeight;

                canvasElement.widthvideo.videoWidth;

       

              canvas.drawImage(video, 0, 0, canvasElement.widthcanvasElement.height);

              var imageDatacanvas.getImageData(0, 0, canvasElement.widthcanvasElement.height);


              var code = jsQR(imageData.dataimageData.widthimageData.height, {


                                    inversionAttempts : "dontInvert",

              });

       

                              // QR코드 인식에 성공한 경우

                              if(code) {

            

                                     // 인식한 QR코드의 영역을 감싸는 사용자에게 보여지는 테두리 생성

                                    drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF0000");

                                    drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF0000");

                                    drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF0000");

                                    drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF0000");


                                    outputMessage.hidden = true;

                                    outputData.parentElement.hidden = false;

         

                                    // QR코드 메시지 출력

                                    outputData.innerHTMLcode.data;

         

                                    // return을 써서 함수를 빠져나가면 QR코드 프로그램이 종료된다.

                                    // return;

                              }

       

                              // QR코드 인식에 실패한 경우 

                              else {


                                    outputMessage.hidden = false;

                                    outputData.parentElement.hidden = true;

                              }

                      }

     

            requestAnimationFrame(tick);

}

});

</script>










#03. QR코드 인식 테스트




먼저 작성한 코드를 브라우저를 통해 실행시켜보자.


해당 기능을 사용할려면 반드시 카메라를 사용할 수 있는 디바이스에서 테스트 해야 한다.






그럼 위와같이 화면이 나타날텐데


먼 브라우저카메라 사용을 허용해 주면


사용이 가능해 질 것이다.






필자가 사용하는 FireFox 브라우저에서는


상단에 카메라를 사용중이라는 버튼이 나타나고,


캔버스(canvas) 영역에 카메라에 비치는 화면이 출력된다.


그럼 인식시킬 QR코드를 화면에 비춰보자.






미리 준비하 QR코드를 화면에 비추어 보았다.


위와 같이 QR코드에 저장된 내용을 읽어들이는 것을 확인 할 수 있다.









  1. 스마일맨
    포스트 글 잘 봤습니다
    한가지 궁금한건 해당 포스트는 pc버전인지요?
    모바일 웹 버전에서도 가능한건지 문의 드립니다
  2. 스마일
    소중한 답변 감사합니다
    블로그 보고 따라 해봤는데 핸드폰 카메라는 안 켜져서 여쭈어 봤습니다 ^^
  3. 갓제로
    저는 navigator.mediaDevices.getUserMedia가 없다고 뜨네요ㅜㅜ
  4. 이용삼
    아이폰에서도 컴퓨터 크롬에서도 삼성핸드폰에서도 비디오 스트림에 엑세스 할수 없다고 하는데요?
  5. 이용삼
    혹시 이것도 https에서만 되는거 아닌가요?
    • 비트박
      2019.11.01 14:24 [Edit/Del]
      예 맞습니다. https에서만 동작을 하는데.
      cafe24 호스팅 같은 경우에는 임의로 https들 붙여서 실행해도 되더군요

      그리고 참고로 아이폰-크롬에서는 동작 하지 않습니다.
  6. pasta
    안녕하세요 혹시 qr코드말고 바코드를 읽을수 있는방법은없을까요?

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] Google Spread Sheet 수정 및 삭제하기[Node.js] Google Spread Sheet 수정 및 삭제하기

Posted at 2019. 6. 11. 19:27 | Posted in Node.js/Google Spread Sheet




■ 구글 스프레드 시트의 데이터 수정하기




그동안의 데이터에서 내용을 읽어오거나, 입력하는것을 해보았다면


이제 마무리 단계로 수정을 진행해 보려고 한다.


아래와 같이 스프레드 시트를 만들고 그 데이터를 변경해 보자.




# 스프레드 시트





위 스프레드 시트에서는 D2, D4의 영역에 DASONI 라고 적힌 부분이 있다.


이 부분을 한글 DASONI로 변경하려 한다.



# 소스 코드

 

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

doc.getCells(

  1

, {

  "max-row" : 6 // Cell의 최대 열(row)의 갯수( 필수 )

, "max-col" : 5      // Cell의 최대 행(column)의 갯수( 필수 )

, "return-empty" : true

}

, function(err, cells) {

                        // 해당 셀(Cell)을 지정한뒤, 변경사항을 수정하고 저장한다.

                        // 셀(Cell)을 수정하면 바로 저장을 해주어야 한다.


cells[8].value = "다소니";          // 해당 셀(Cell)의 값을 변경한다.

cells[8].save();                        // 해당 셀(Cell)의 변경사항을 저장한다.

cells[18].value = "다소니";         // 해당 셀(Cell)의 값을 변경한다.

cells[18].save();                       // 해당 셀(Cell)의 변경사항을 저장한다.

}

);

});




수정할 clees[8], clees[18]은 전체 셀(Cell)에서 몇번째 셀인지를 나타낸다.


꼭 값을 넣고 save( )를 해주어야 한다.



# 출력 결과




위와같이 영문명 DASONI에서 한글명 다소니로 변경된 것을 확인 할 수 있다.







■ 데이터 한번에 수정하기




이번에는 수정할 영역을 찾아서 검색하는 것을 만들려고 한다.




# 스프레드 시트





# 소스 코드

 

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {


doc.getCells(

  1

, {

  "max-row" : 8

, "max-col" : 4

, "return-empty" : true


}

, function(err, cells) {

let black = new Array("김재경", "고우리", "오승아", "조현영");

for(var num = 0; cells.length > num; num++) {

if(black.indexOf(cells[num].value) >= 0) {

var unit = num + 3;      // 해당 셀에서 3칸 옆의 셀을 선택

cells[unit].value = "★";

cells[unit].save();

}

}

}

);

});




# 출력 결과









■ 구글 스프레드 시트의 데이터 삭제하기





# 스프레드 시




# 소스 코

 

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {


doc.getCells(

  1

, {

  "min-row" : 2     // min-row를 2로 지정하여 필터 키값부분은 제외한 셀값을 가져온다.

, "max-row" : 11

, "max-col" : 1

, "return-empty" : true


}

, function(err, cells) {

let computer = new Array("APPLE", "LG", "HUAWEI", "HEWLETT PACKARD");

for(var num = 0; cells.length > num; num++) {

if(computer.indexOf(cells[num].value) >= 0) {

// console.log(cells[num].value);

cells[num].del();

}

}

}

);

});





# 출력 결과










※ 참고 - getRow( )를 이용하여 수정 및 삭제를 하려 한경우




필자는 아래 코드처럼 getCell이 아닌 getRow를 이용한 방법이 되지 않을까 싶어 테스트 해보았지만


결과는 에러만 날뿐이었다.


아무래도 getRow를 이용한 방법은 되지 않는것 같으니 참고 바란다.



 

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

doc.getRows(

  1

, {

  "offset" : 1

, "limit" : 7

}

, function(err, rows) {

// console.log(rows);

let black = new Array("김재경", "고우리", "오승아", "조현영");

for(var num = 0; rows.length > num; num++) {

if(black.indexOf(rows[num].이름) >= 0) {

console.log(rows[num].이름);

rows[num].블랙 = "★";

rows[num].블랙.save();

}

}

}

);

});










Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] Google Spread Sheet에 데이터 입력하기[Node.js] Google Spread Sheet에 데이터 입력하기

Posted at 2019. 6. 11. 17:51 | Posted in Node.js/Google Spread Sheet





■ 구글 스프레드 시트에 데이터 입력하기





google-spreadsheet 모듈을 사용해 데이터를 입력할 경우에는 


단순히 마구잡이로 데이터를 넣는 것이 아니라.


양식에 맞게 설정을 잡아 주어야 데이터의 입력이 가능하다.


아래와 같이 스프레드 시트에 필터 or (Key)로 사용할 값을 1열에 작성하여 준다.




# 스프레드 시트






위와같이 스프레드 시트의 A1, B1열에 


필터로 쓰일 값을 생성해 두었다.


필자는 코드에 주석을 제외하고는 한글을 사용하는것을 별로 좋아하지는 않지만.


실제적으로 실무등에서는 한글로 된 키값이 많을 것이라 판단되고.


다행 google-spreadsheet 모듈을 한글을 키값으로 사용하는것에 아무런 문제가 있지는 않았다.


그럼 이제 아래 코드와 같이 작성하여 데이터를 입력해 보자.



# 소스 코드

 

const googleSpreadsheet =require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

let rowData = { 명칭 : "크루즈", 제조사 : "쉐보레" };

doc.addRow(

         1 // 첫번째 시트

rowData // 입력할 데이터

, function(err) { // 콜백 데이터

console.log(err);

}

);

});




필터의 키 명에 대응되는 값을 입력해 주고


실행해 보면 아래와 같이 필터 바로 아래 (Row)에


입력한 값이 들어가는 모습을 확인 할 수 있다.







위처럼 한 (Row)에 데이터를 삽입하는 것을 해보았다.


그렇지만 실제로 사용하게 된다면


반복문을 통해 한번에 많은 데이터를 입력하게 될것이고.


아래 그 내용을 간단히 정리해 두었다.









■ 한번에 여러개의 데이터 입력하기




# 소스 코드

 

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

let carDatas = new Array();

carDatas[0] = { 명칭 : "아반떼", 제조사 : "현대" }

carDatas[1] = { 명칭 : "K3", 제조사 : "기아" }

carDatas[2] = { 명칭 : "SM3", 제조사 : "르노삼성" }

carDatas[3] = { 명칭 : "골프", 제조사 : "폭스바겐" }

carDatas[4] = { 명칭 : "포커스", 제조사 : "포드" }

carDatas[5] = { 명칭 : "프리우스", 제조사 : "토요타" }

carDatas[6] = { 명칭 : "시빅", 제조사 : "혼다" }

for(let carType of carDatas) {


doc.addRow(

               1         // 첫번째 시트

carType // 입력할 데이터

, function(err) { // 콜백 데이터

console.log(err);

}

);

}

});





# 출력 결과




※ 소스 코드 배열의 차종과, 스프레드 시트의 차종 정렬이 다르다.

   이 부분은 어떻게 해야 하는지 확인 후 해당 포스팅 수정 예정이다.






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] Google Spread Sheet의 데이터 가져오기[Node.js] Google Spread Sheet의 데이터 가져오기

Posted at 2019. 6. 10. 18:07 | Posted in Node.js/Google Spread Sheet




노드.js의 google-spreadsheet 모듈로 스프레드 시트의 데이터를 읽는 방법은.


크게 getRows( )와 getCells( ) 를 이용하는 방법이 존재한다.


개인적인 생각으로는 단순히 데이터를 읽어들이는것은 getRows( )가 편하지만


셀(Cell)을 수정하거나 삭제하는경우의 수는 getCells( )를 사용할 수 밖에 없기 때문에.


두 방법 모두 같이 사용하는 방법을 알아두는것이 좋다.










■ 열(Row)을 기준으로 구글 스프레드 시트의 데이터 읽어오기




# 스프레드 시트





# 소스 코드

 google_sheets_read_getrows.js

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

doc.getRows(

  1 // 시작할 시트의 인덱스(인덱스는 1부터 시작함)

, {

  "offset" : 1    // 시작할 행의 갯수

, "limit" : 5    // 한번에 읽을 최대 행의 갯수 ( 최상위 1번 열은 포함하지 않는다. )

               , "orderby" : "나이"          // 정렬 기준 최상위 1번 열(row)의 제목(Key값)을 기준으로 한다.

               , "reverse" : true             // true : 내림차순, false : 오름차순(기본값)


                          // 연산자를 통해 검색 기준을 생성한다.

         // 예) 제목(Key값) > 조건 and 제목(Key값) < 조건

               , "query" : "나이 >= 20 and 나이 < 30"

}

, function(err, rows) {

// console.log(rows);

for(var num = 0; rows.lengthnumnum++) {


console.log( rows[num].활동명 + " / " + rows[num].별명 );

}

}

);

});





# 출력 결과

 node google_sheets_read_getrows.js





위와같이 getRows( )를 통해서 데이터를 읽어오는 것을 해 보았다.


query 속성을 통해 검색 값에 제한을 줄 수 있다는 것이 매우 장점이지만.


아쉽게도 getRows( )를 통해서 가져온 (Cell)의 데이터를 수정할 수는 없다.


getRows( )는 조회용으로만 사용하는것을 추천한다.










■ 셀(Cell)을 기준으로 구글 스프레드 시트의 데이터 읽어오기





# 스프레드 시트






# 소스 코드

 google_sheets_read.js

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

doc.getCells(

  1 // 시작할 시트의 인덱스(인덱스는 1부터 시작함)

, {

  // min-row와 min-col은 지정하지 않으면 기본값이 1로 지정되어

  // 첫번째(A1)셀부터 값을 읽어들인다. 

  "min-row" : 1 // Cell의 최소 가로 범위

, "min-col" : 1 // Cell의 최소 세로 범위

  // max-row와 max-col은 필수적으로 기입해 주는것이 좋다

  // return-empty 설정이 true인경우 무한루프에 빠질 수 있다.

, "max-row" : 3 // Cell의 최대 가로 범위(필수)

, "max-col" : 3      // Cell의 최대 세로 범위(필수)

  // return-empty이 false인 경우 빈 셀을 포함하지 않는다. 

  // true이면 빈 셀을 포함하기에 반드시 max-row, max-col을 설정해야 한다.

, "return-empty" : true

}

, function(err, cells) {


for(var num = 0; cells.lengthnumnum++) {


console.log( cells[num].value );

}

}

);

});





# 출력 결과

 node google_sheets_read.js




위와같이 getCells( )를 사용하는 방법을 알아보았다.


위에서 한번 설명했듯이 생성한 데이터의 수정을 위해서는 getCells( )를


사용할 수 밖에 없기 때문에, 사용방법을 꼭 숙지해 두는것이 좋다.





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기