꾸숑의 IT 월드

C#에서 텍스트와 이미지를 동시에 출력하는 코드를 살펴보겠다. C#은 텍스트를 출력할 때도 이미지를 할 때도 짧은 코드만으로도 가능한 프로그램이다. C# 프로그램은 *****.csproj 파일과 Program.cs 파일이 필요한데 먼저 *****.csproj 파일을 보자. *****.csproj 파일은 별다른 수정없이 아래 코드를 그대로 사용하면 된다. Program.cs 파일은 System.Windows.Forms 파일과 System.Drawing파일을 using이란 명령어로 import 한다. 또 클래스를 이용해 전체 프레임 객체 fm, 텍스트 생성 객체인 lb, 그리고 이미지 객체인 pb를 생성한다. 각 객체에 점 연산자(.)를 이용해 "샘플"이란 텍스트와 "C#을 시작합시다."란 텍스트를 출력한다..

이번 시간에는 JS, Python, Java 3가지 언어에서 이미지 출력 코드를 비교해 보겠다. 3가지 언어의 이미지 출력 코드를 비교해 보고 각 언어의 난이도를 간단히 체험해 보자. 1. JS의 이미지 출력 코드 JS는 특별히 import나 lib의 추가 없이 html 코드안에 이미지의 경로만 지정하면 바로 이미지를 출력할 수 있다. 이미지 파일의 path를 정확히 기술해 줘야 이미지가 나타난다 위의 코드를 실행시키면 웹 브라우저 상에서 지정한 이미지가 출력된다. 2. Python의 이미지 출력 코드 Python은 아주 배우기 쉬운 언어의 대명사로 잘 알려져 있다. 그러나 텍스트 출력은 print("Hello World!") 단 한줄이면 끝나지만 이미지 출력은 이미지 관련 lib를 import 해야 이..

jQuery는 JS를 간단하게 사용할 수 있게 해 주는 유용한 라이브러리로서 jQuery를 사용하기 위해서는 jQuery파일을 불러오거나 jQuery CDN 검색해서 사용할 수 있게 하는 등 사전 작업이 필요하다. 이번 시간에는 jQuery를 사용하는 2가지 방법에 대해서 알아보겠다. 1. jQuery 파일 직접 불러와서 사용하기 jQuery 파일은 jQuery 공식 사이트(https://jquery.com/)에서 압축 파일로 다운 받을 수 있다. 파일의 압축을 풀어 폴더에 저장한 다음 다음과 같이 불러온다. 아래 코드는 버튼을 누르면 이미지가 사라지고 또 한번 버튼을 누르면 이미지가 다시 나타나는 간단한 프로그램이다. 이 프로그램을 jQuery를 이용해서 작성해 보았다. 태그 사이에 를 입력하고 태그 ..

인터넷 홈페이지를 제작할때 우리는 HTML과 CSS, 그리고 JS를 사용해 홈페이지를 제작한다. HTML이 홈페이지의 기본 뼈대를 이루고 그위에 CSS로 색깔이나 모양을 입히며 JS로 움직임을 주면 홈페이지가 완성된다. 이번 시간에는 HTML 문장 속에서 CSS를 어떻게 사용하는지 그 방법을 알아보고 좀더 쉽게 HTML과 CSS를 익히는 계기가 되기를 바란다. 먼저 HTML만을 이용하여 브라우저 화면에 글자를 써보자. 아래 그림이 HTML만을 이용하여 화면에 글자를 나타내는 전형적인 방법인데 태그를 이용하여 6개 과일의 이름을 화면에 나타냈다. 위의 코드를 실행시켜 보면 아래와 같이 6개 과일의 이름이 검은색으로 출력된다. 여기서 CSS를 사용하여 글자의 색을 바꾸는 코드를 짜 볼 것이다. CSS를 HT..

인터넷으로 인공지능을 학습할 수 있는 '티처블 머신'이라는 사이트를 소개하는 시간을 가져 보겠다. 이 사이트는 일반인들이 어렵게 생각할 수 있는 인공지능을 컴퓨터 화면에서 간단하게 학습하는 방법을 소개하고 핵심코드까지 추출할 수 있게 해 주는 아주 좋은 사이트이다. 시작하기 전에 먼저 무료 이미지 다운 사이트(픽사베이 등등)에 들어가서 3가지 종류의 동물 이미지를 각각 20~30장 정도를 다운받고 폴더를 따로 만들어서 저장해 둔다. https://teachablemachine.withgoogle.com/ 에 들어가자. 아래 화면이 티처블 머신 사이트의 메인 화면이다. '시작하기' 버튼을 클릭한다. 새 프로젝트 화면이 나오는데 3가지 종류의 AI 학습을 해 볼 수 있다. 이미지, 오디오, 포즈 중에서 원하..

앱인벤터2는 스크린 하나에 디자이너 에디터와 블록에디터 2개의 에디터가 같이 묶여 있기 때문에 스크린을 단순히 복사 이동 하는 것이 상당히 어렵다. 스크린을 생성하거나 삭제하는 것은 버튼 하나만 누르면 되는 반면 복사나 이동은 2개의 에디터를 한번에 처리해 줘야 하기 때문에 어려운 것이다. 이 시간에는 스크린을 복사하고 이동하는 방법에 대해 좀 심도있게 살펴보도록 하겠다. 아래 그림과 같이 '스크린2'가 빠지고 '스크린8'번이 '스크린2'의 역할을 하고 있는 앱이 있다고 가정해 보자. 이때는 '스크린8'번의 이름을 '스크린2'로 바꿔 주는 것이 좋을 것이다. 그런데 앱인벤터2 자체에서는 그러한 기능을 제공하지 않는다. 이때는 이 앱인벤터 aia 파일을 추출해서 aia 파일을 변환시켜주는 작업을 해 줘야 ..

성경암송을 잘하기 원하는 사람들이 많을 텐데 여기 성경암송에 아주 좋은 앱을 하나 소개한다. 바로 '허니비 성경 암송'앱이라는 것이다. '허니비 성경암송'앱은 꿀벌이 웅웅 거리듯이 성경 한 구절을 몇단락씩 나누어서 꿀벌이 웅웅 거리는 듯한 모습으로 외운다고 하여 붙여진 이름이다. 예를 들어 '너는 마음을 다하고/ 성품을 다하고/ 힘을 다하여/ 네 하나님 여호와를 사랑하라.(신 6:5)' 라는 말씀이 있으면 너는 마음을 다하고, 너는 마음을 다하고, 너는 마음을 다하고, 너는 마음을 다하고, 너는 마음을 다하고, 성품을 다하고, 성품을 다하고, 성품을 다하고, 성품을 다하고, 성품을 다하고, 너는 마음을 다하고 성품을 다하고, 너는 마음을 다하고 성품을 다하고, 너는 마음을 다하고 성품을 다하고, 너는 마..

kodular는 블록코딩을 사용하는 노코드 플랫폼으로 앱인벤터에서 파생된 아류들 중 하나이다. 2~3년 전만해도 앱인벤터에서 파생된 아류들 3~4개가 치열하게 경쟁을 했었지만 이제는 거의다 사라지고 kodular만 남아있는 상황이다. 필자도 앱인벤터에서 파생된 썬크블이란 플랫폼으로 앱을 개발하고 20개 정도를 구글 플레이 스토어에 출시하기도 했었지만 이제는 썬크블을 지원했던 구글에서 썬크블을 폐기하고 유료제품인 썬크블X라는 플랫폼으로 고객을 모집중에 있다. 이러저러한 연유로 현재 앱인벤터의 아류들 중에서는 kodular만 남아 있는데 kodular의 최고 장점은 광고를 게재할 수 있는 플랫폼이란 것이다. 앱인벤터는 학생들의 교육을 위해 개발된 플랫폼이기 때문에 광고를 게재할 수 없어 코딩 공부하는 학생들..

제이쿼리(jQuery)는 JS에서 자주 사용되는 기능을 함수나 객체로 모아 놓은 라이브러리 파일을 말한다. 제이쿼리를 이용하면 JS만으로 프로그래밍을 할 때 보다 훨씬 쉽고 빠르게 웹 프로그램을 제작할 수 있다. 이번 시간에는 제이쿼리가 무엇인지 간단한 예제를 통해 알아보고 JS만 사용할때와 제이쿼리를 같이 사용하면 코드가 얼마나 더 간결해 지는지 알아보자. 1.제이쿼리(jQuery)의 기능 1) DOM 요소들을 선택하는 제이쿼리 선택자 2) DOM 트리와 요소를 조작하는 제이쿼리 메소드 3) 웹 페이지에서 발생되는 이벤트를 처리하는 제이쿼리 이벤트 등으로 요약할 수 있다. DOM이라고 하면 어렵다고 생각할 수 있으나 Document Object Model이란 말로 웹에서 글자로 표현 하기 위한 모든 요..

저번 시간에는 타이니 DB에 대해서 설명했고 이번 시간에는 타이니 DB와 타이니 web DB의 차이에 대해서 알아보겠다. 타이니 DB는 앱인벤터 내에서 자체 제공하는 DB라서 별다른 저장소를 필요로 하지 않지만 타이니 webDB는 web이라는 말이 붙어 있어서 알겠지만 web 상에 저장소가 따로 있어야 한다. 사용하는 문법은 타이니 DB와 타이니 webDB가 서로 비슷하다. 그러나 한가지 중요한 차이점이 있는데 웹상에 데이터의 저장소가 따로 있느냐 없느냐의 차이이다. 앱인벤터의 타이니WebDB는 구글의 클라우드 DB를 이용한다. 따라서 타이니WebDB를 이용하려면 구글 클라우드에 사용자의 앱엔진 등록이 되어 있어야 한다. 2~3년 전에는 웹상에서 앱엔진 등록을 받아주었는데 요즘은 웹상에서 받아주지 않고 ..

VS code 에서 가끔 한글이 제대로 표시되지 않고 깨져 나타나는 경우가 있다. 대부분 2가지 경우인데 하나는 VS code 에디터 화면에서 한글이 깨져 보이는 경우와 실행을 하고 난 후에 터미널이나 결과창에서 한글이 깨져 나타나는 경우이다. 이것은 대부분 encoding에 대한 설정이 잘못되어 있기 때문에 나타나는 문제이므로 encoding 설정을 다시 해 주면 대부분 해결된다. 필자의 경우 VS code 에디터 화면 뿐만 아니라 실행을 한 결과창에서도 한글이 깨지는 경우가 발생했다. 먼저 encoding 문제를 해결하는 원리를 말하자면 기본 설정은 영어를 위주로 하는 'UTF-8' 방식을 기본으로 하고 부가적으로 한글이 입력된 부분이 있다면 그 부분만 인식해서 한글을 나타내 주는 'EUC-KR' 방..

앱인벤터2에서 제공하는 DB에는 4가지 종류가 있다. 그중 가장 쉽게 이용할 수 있는 타이니 DB에 대해 알아보자. 타이니 DB는 외부의 DB를 이용하는 것이 아니라 앱인벤터2에서 제공하는 자체 DB이기 때문에 사용법만 조금 익히면 누구나 쉽게 사용할 수 있다. 팔레트 뷰에서 '저장소' 항목을 클릭해 '타이니 DB'를 스마트폰 화면 가운데 가져가 둔다. 화면 가운데 가져다 두어야 '보이지 않은 컴포넌트'에 나타나지 화면 바깥에 가져다 두면 '보이지 않는 '컴포넌트'에는 나타나지 않으니 주의 해야 한다. 컴포넌트를 수평으로 배치하는 방법은 지난 시간에 했으므로 참고하기 바라고 이번시간에 이용할 것은 '텍스트 박스'이다. 첫번째 줄에는 '레이아웃' 안의 '수평배치' 컴포넌트를 가져가 두고 그 안에 '레이블'..

1. VS code 파이썬 상태 표시줄의 python(확장) 항목 이용법 VS code로 파이썬 프로그램을 작성할 때 어떤 lib를 pip로 import 시킨 상태임에도 불구하고 아래 그림처럼 에러가 표시되는 경우가 있다. 이럴때는 보통 파이썬 확장항목이 잘못 설정되어 있기 때문이다. 하단부의 파란색띠로 표시된 부분이 파이썬 상태 표시줄이다. 상태 표시줄에 'python(확장)' 항목이 없는 경우에는 이 상태 표시줄 위에 마우스를 가져다 두고 우클릭을 한다. 상태 표시줄에 나타낼 수 있는 여러 항목이 보이는데 이 중 'python(확장)'을 선택한다. 하단부에 '3.9.12(conda)'라고 표시된 부분이 새로 나타났다. 이 부분위에 마우스를 가져가서 클릭해 보자. 상단에 '인터프리트 선택' 메뉴창이 열..

이번 시간에는 앱인벤터를 사용하면서 어쩌면 가장 많이 사용하는 기능인 시계(clock)에 대해서 알아보도록 하겠다. 먼저 팔레트 뷰에 가서 센서항목을 클릭한 후 시계를 스마트폰 화면 가운데에 가져다 놓는다. 스마트폰 바깥에 시계를 놓으면 보이지 않는 컴포넌트 부분에 나타나지 않으므로 꼭 화면 가운데에 가져다 두어야 한다. 두개의 기능을 시험을 해 보기 위해서 두개의 시계가 필요하므로 두개를 가져다 둔다. 그리고 시계의 타이머 간격을 500으로 둔다. 0.5초를 의미한다. 1초는 좀 느리게 움직이는 감이 있고 0.5초 이하는 너무 빠른 느낌이 있다. 이번 강좌에서는 버튼을 클릭하면 공이 위로 움직이는 기능과 또 다른 버튼을 클릭하면 이미지 스프라이트의 그림이 변하는 기능을 구현해 보려고 한다. 팔레트의 '..

파이썬 웹 크롤링을 할때 매번 인터넷 브라우저 뜨면 코딩하는 입장에서 불편할 때가 있다. 이때 인터넷 브라우저를 잠시 뜨지 않게 하는 방법이 있다. 지금부터 그 방법을 알아보자. 일반적으로 웹 크롤링을 하는 코드이다. 위의 파이썬 파일을 실행 시키면 좌측에 인터넷 브라우저가 뜨면서 코딩 화면을 가리기 때문에 화면에서 무슨일이 일어나고 있는지 알 수 없어 불편한 측면이 있다. 이때 Options를 이용하면 인터넷 브라우저가 뜨는 것을 막고 화면에서 일어나는 상황을 볼 수 있게 해 준다. from selenium.webdriver.chrome.options import Options 로 chrome.options 에서 Options 라이브러리를 불러 온다. 또 options = webdriver.Chrome..

이번에는 파이썬 웹크롤링 방법2 시간으로 방법1과는 좀 다른 방식을 소개하겠다. 아직 '파이썬 웹 크롤링 방법 1'을 보지 않은 분들은 한번 읽어보고 와 주시기 바란다. 방법1이 추출한 이미지를 한장씩 따로 따로 저장하는 방법이라면 방법2는 추출한 이미지 전체의 주소 링크를 저장하고 이미지 추출이 끝나면 한꺼번에 이미지를 다운 받는 형식이다. 이미지를 다운 받기 위한 selenium 과 크롬 드라이버등은 이미 설치가 되어 있는 것으로 간주하고 시작하겠다. 아직 selenium 과 크롬 드라이버가 설치가 되지 않은 분은 '파이썬 웹 크롤링 방법 1'의 앞부분을 보고 설치해 주기 바란다. 1. 구글 검색창의 CSS 선택자 복사하기 import urllib.request import time from sele..

파이썬으로 웹 크롤링 하는 방법들은 많이 알려져 있는데 그 방법들이 중구난방이라 그 방법들을 따라 해서 이미지를 다운 받는 것이 쉽지만은 않다. 이번 시간에는 웹 크롤링하는 방법들을 단계별로 나누어서 처음 웹 크롤링을 하는 사람이라도 쉽게 따라 할 수 있도록 설명해 보겠다. 일단 컴퓨터에 최신 버전의 파이썬 프로그램이 설치되어 있고 vs code를 사용할 수 있는 환경이라고 가정한다. 두 프로그램이 설치되어 있지 않다면 설치하고 시작하기 바란다. 1.파이썬 웹 크롤링 파일 만들기 탐색기에 파이썬 웹 크롤링 파일을 저장할 폴더를 하나 만든다. 그리고 vs code 상단 메뉴바에서 '파일' -> '폴더 열기'를 선택하고 그 안에 파이썬 파일을 하나 만든다. 2. selenium 설치 selenium은 웹을 ..

replit에는 50개가 넘는 템플릿이 제공되지만 JS는 어떻게 실행할 수 있는지 알기가 어렵다. 한번 알기만 하면 쉽지만 처음 그 방법을 알기까지 꽤 많은 시행착오와 시간을 들여야 한다. 이번 포스트에서 그 시간을 아껴보자. https://replit.com/~에 접속해서 회원가입 하고 로그인 한다. 초기 화면이 열리면 '+' 표시가 있는 아이콘 중 아무것이나 클릭한다. 'Create a Repl' 창이 열리면 'HTML, CSS, JS' 부분을 클릭한다. Title부에 적당한 제목을 입력하고 엔터를 누르거나 '+ Create Repl' 버튼을 클릭한다. 'index.html, style.css, script.js' 파일이 있는데 'script.js' 파일이 JS 코드를 입력할 수 있는 파일이다. 'i..

일반 컴퓨터에서 리액트를 시작하기 위해서는 여러가지 인스톨하고 환경설정하고 등등 해야 할 것 들이 많다. 그러나 replit을 사용하면 인터넷 상에서 바로 리액트를 이용할 수 있어 아주 좋다. 인터넷에서 리액트를 사용하는 방법을 알아보자. 먼저 https://replit.com/~에 접속해서 회원가입 하고 로그인한다. 초기 화면에서 '+'가 보이는 아이콘중 아무것이나 클릭하면 시작한다. 3개의 '+ '아이콘중 아무것이나 눌러도 똑 같다. Create a Repl 창이 뜨면 검색창에 react를 입력하자. replit에서 제공하는 template이 50개가 넘으므로 스크롤을 내려서 찾기가 쉽지않다. React Javascript를 클릭한다. Title에 적당한 이름을 주고 엔터를 누르거나 아래 '+ Cre..

이번 시간에는 JS에서 리액트로 더 나아가기 위한 JS 문법을 몇가지 알아보기로 하자. 리액트에서 많이 쓰이는 4가지 문법을 위주로 설명한다. 1.object shorthand assignment 우리말로 하면 '단축 할당'정도로 번역되는 말인데 반복되는 변수에 대해서 하나를 생략해서 간단히 표기하는 방법이다. 자바에서나 파이썬에서는 this를 사용하는데 JS에서는 아예 반복되는 변수 하나를 생략해 버린다. name 변수와 age 변수에 값을 입력하고 그 값들을 객체로 만든 후 변수를 하나씩 출력해 보는 코드를 작성해 보자. person 객체를 생성하고 name과 age에 변수를 대입한다. 이때 자신의 객체 name과 age에 위에서 선언된 이름과 나이를 대입하는 것인데 자바나 파이썬에서는 자신의 객체라..

리액트는 JS의 프레임 워크(FW) 중 가장 많이 쓰이는 FW인데 이번 시간에는 리액트로 웹페이지에 글자를 넣고 박스를 그리는 것을 연습해 보자. IDE로는 거의 대부분의 언어를 에디팅할 수 할 수 있는 리플릿(Replit) 이라는 것을 사용할 것이다. 리플릿(Replit)은 사용자들이 브라우저를 사용하여 코드를 작성하고 앱과 웹사이트를 만들 수 있게 해 주는 웹 IDE이다. https://replit.com/~ 에 접속해서 회원 가입을 한 후 사용 할 수 있다. 처음 replit을 실행 시키면 나타나는 화면이다. '+Create'을 버튼을 눌러보자. Create a Repl 이란 창이 뜨는데 Templates에는 50가지가 넘는 Template의 목록이 나타난다. 검색창에 react를 입력해 보자. 가..

JS로 구구단을 출력하는 프로그램을 작성해 보자. 구구단은 이중 for 문을 이용해서 출력해야 하기 때문에 안쪽 for문에는 각 단별로 2~9를 곱한 수를 출력하게 하고 바깥 for 문에는 2~9단의 타이틀이 나타나게 하면 된다. 일단 이중 for문의 코드를 작성해 보자. 그런데 단순히 코드만 작성하다 보면 출력이 1열 종대로만 나열되는 이상한 형식으로 출력된다. 즉 다음과 같이 출력된다는 말이다. 우리가 원하는 형식은 각 단이 가로로 출력되는 형식이지 세로로 출력되는 형식이 아니다. 각단이 가로로 나열되게 하려면 어떻게 해야 할까? 2가지의 방법을 생각해 볼 수 있을 것인데 하나는 html에서 테이블을 이용해 원하는 만큼의 칸을 만든 후 각 칸 안에다 숫자를 입력하는 방법이 있을 것이고 또 하나의 방법..

JS에서 웹 브라우저 화면에 변수나 데이터를 출력하는 데에는 4가지의 방법이 있다. 1) document.write() 2) window.alert() 3) console.log() 4) innerHtml 등을 이용하는 방법이 그것이다. 하나 하나 예제를 보면서 설명해 보겠다. 1. document.write()를 사용하는 방법 document.wirte()은 JS에서 가장 쉽게 변수나 문자열을 출력하게 해 주는 메서드이다. ()속에 출력하고 싶은 변수나 문자를 입력하면 된다. 태그 사이에는 무엇을 하는 것인지에 대한 주제를 입력해서 현재 어떤 작업을 하는지 알 수 있게 한다. 태그 사이에 JS 코드가 들어간다. document.wirte() 메서드의 ()속에 출력내용이 변수 일 경우에는 " " 없이 변..

우리가 프로그램 언어를 배울때 제일 처음 해 보는 작업이 바로 "Hello, World!"를 출력해 보는 것이다. "Hello, World!"가 출력이 되면 비로소 환경설정을 비롯한 모든 조건 설정이 잘 되었고 이제야 본격적으로 프로그램 작업을 시작할 수 있다는 뜻이 된다. 이번시간에는 가장 많이 쓰이는 6개 언어별로 "Hello, World!"를 출력하는 코드를 살펴보고 코드길이나 언어별 난이도 등등을 확인해 보자. 1. C #include void main(){ print("Hello, World!"); return 0; } 2. C++ #include using namespace std; int main() { cout

프런트 엔드 개발의 3대장이라 하면 HTML, CSS, Java Script 세가지를 들 수 있는데 이중 Java Script는 HTML과 CSS로 만든 웹페이지에 동작을 주는 역할을 한다. 이번 시간에는 자바 스크립트의 역할을 간단하게 이해할 수 있도록 웹페이지에서 전구를 켜고 끄는 코드를 작성해 보자. 1. 먼저 인터넷에서 전구의 이미지를 다운받아 준비한다. 물론 켜진 것과 끄진 것 두개의 그림이 필요하다. 2. 컴퓨터에서 탐색기를 열고 빈 폴더에 다운받은 이미지 두개를 넣어둔다. 3. VS code를 열어서 준비해 둔 탐색기의 빈 폴더를 찾아간다. 폴더에 2개의 이미지만 들어있다. 4. '파일' 메뉴에서 '새 텍스트 파일'을 선택하고 코드를 입력한다. 코드를 입력했으면 ****.html로 저장한다...