코딩하는 감자

요소과 화면에 출력되는 특성을 크게 두가지로 구분한다. 인라인(inline)요소와 블록(block)요소로 나눠진다. 먼저 인라인(inline)요소는 글자를 만들기 위한 요소들이고 블록(block)요소는 상자(레이아웃)를 만들기 위한 요소들이다. 대표적인 inline요소는 태그 이다. 이 태그는 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다. (요소가 수평으로 쌓인다.) 포함한 콘텐츠 크기만큼 상하좌우 크기가 자동으로 줄어든다. 또한 요소의 가로(width), 세로(height)의 너비를 지정하는 CSS속성을 사용하여도 반응이 없다. 요소의 외부 여백(margin)속성과 내부 여백(padding)속성은 사용 가능하다. Block요소는 대표적으로 태그가 있다. 블록요소는 요소가 수직으로 ..

HTML은 구조를 만드는 역할을 하므로, 각 태그(요소)가 어떤 역할을 하는지, 어떤 속성을 하는지만 기억해두면 된다. : 구분이라는 뜻을 가진 Division을 뜻하며 특별한 의미가 없는 구분을 위한 요소이다. ~ : 제목의 heading을 의미한다. (1이 가장 큰 글씨이며 6이 가장 작은 글씨이다.) : paragraph 를 뜻하며, 문장을 의미하는 요소이다. : 이미지 삽입 요소이다. (src와 alt는 필수 속성이다.) 이미지가 출력되지 않으면 alt의 글자가 출력된다. 이러한 상황을 "엑박(엑스박스)떴다." 라고 한다.) : Unordered List로 순서가 필요없는 목록의 집합이다. : List Item으로 목록 내의 각 항목이다. : Anchor을 뜻하며 속성인 href의 값의 하이퍼 링..

홈페이지 상단에 마우스를 갖다 대면 사이트맵들이 내려오는 방식으로 소스가 짜여져 있었는데 여기서 마우스를 갖다 댈 때 슬라이드 바가 올라갔다 내려갔다 무한 반복하는 현상이 일어났다. 이 현상을 해결하기 위해서 소스를 훝어보았다.이 부분은 제이쿼리를 사용하여 작성이 되어있었다. 왜 이런 문제가 생기는지 소스를 보며 생각해보았다. 이미지 위에 커서를 올리면 slide.down("fast"); 가 실행되며 사이트맵이 내려오고 이미지에 커서를 떼면 slide.up("fast")이 실행되며 사이트맵이 올라가는데 사이트맵이 내려왔을 때 커서를 떼고 기다리면 사이트맵이 올라갔다가 다시 내려오면서 반복한다. 이때 커서가 올라가있지도 않은데 사이트맵이 내려오는걸 보면 내려온 사이트맵도 이미지로 인식하여 무한반복 되는 것..

eXtensible Markup Language의 약어이다. W3C에서 여러 특수 목적의 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다. 1996년 제안된 언어로, 기존의 HTML과 달리 웹상에서 구조화된 문서를 전송가능하도록 설계되었다. 이게 무슨 뜻이냐면 예를 들어 HTML에서는 CPU 2.83GHz라는 데이터를 표기할 때 어디부터가 데이터 명이고 어디부터가 실제 데이터인지 표시할 수 있는 마땅한 방법이 없다. 이런 문제를 해결하기 위해 XML을 이용하면 어디부터 어디까지가 데이터 이름이고 어디부터 어디까지가 실제 데이터이며 어디부터 어디까지가 데이터 단위인지도 표현이 가능하다. 즉, 데이터에 의미를 부여하는 메타데이터를 기술할 수 있다. XML은 바로 이러한 목적으로 탄생했다. 위의..

jQuery는 HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다. 존 레식에 의해 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개되었다.MIT라이선스(소프트웨어 사용권)를 가진 자유 오픈 소프트웨어. 무지하게 쉽고 간편하다 'write less, do more.'가 모토로서 비프로그래머인 웹디자이너들도 어렵지 않게 이해할 수 있을 만큼 쉬운 편이다. DOM 구조와 CSS에 대한 지식만 있다면 애니메이션 같은 건 바로 이해가 가능할 정도다. jQuery는 Behavioral model(행동 모델)에 기초한 아키텍처를 따른다. 특히 jQuery는 메서드 체이닝을 통해 DOM 엘리먼트를 조작한다. jQuery의 기능DOM ..

이더리움은 2015년 7월 30일 Vitalik Buterin이 개발하였다. 비탈릭 부테린은 가상화폐인 비트코인에 사용된 핵심 기술인 블록체인에 화폐 거래 기록뿐 아니라 계약서 등의 추가 정보를 기록할 수 있다는 점에 착안하여, 전 세계 수많은 사용자들이 보유하고 있는 컴퓨팅 자원을 활용해 이더리움 가상머신(EVM)을 만들고, 이 플랫폼을 이용하여 SNS, 이메일, 전자투표 등 다양한 정보를 기록하는 시스템을 창안했다. 2015년 7월 30일 이더리움 서비스가 시작되었고 2016년 4월 이더리움 블록체인 기반의 The DAO 펀드를 구성하고 1.5억 달러에 해당하는 투자자금을 모았다. 하지만 2016년 6월 The DAO에 대한 해킹 사건이 발생했다. 이후 부득이 기존 이더리움에 대한 하드포크(Hard ..

사물인터넷(IoT)는 인터넷에 연결되어 그 정보를 활용하여 사물의 본연의 기능을 더 충실히 행하도록 하는 기술을 말하며, '인터넷을 기반으로 모든 사물을 연결하여 사람과 사물, 사물과 사물 간의 정보를 상호 소통하는 지능형 기술 및 서비스'라고 정의하고 있다. - 사물인터넷 4대 주요기술유무선통신, 네트워크 인프라서비스, 인터페이스보안(정보보안)센싱 - 사물인터넷 적용 분야헬스케어(건강 보조 도구, 혈당 측정, 운동량)홈케어(스마트 거울, 조명/온도/습도 자동제어)자동차(텔레매틱스, 무인자동차)산업(원격공장 자동화, 원격 시설물 관리)스마트시티(교통 관제, 스마트주차, 스마트 횡단보도)에너지(스마트 그리드, 중앙 전력 통제)안전(재해•재난 감지, 조기 대응)환경(날씨 및 온도 관리) - 사물인터넷 기반 ..

html 에디터 사용 중 에디터 도구 기능에 MD5와 SHA-256기능이 있었는데 무슨 용도이고 어떻게 사용하는 것인지 궁금하여 이 둘에 대해서 알아보게 되었다. MD5(Message Digest)와 SHA-256(Secure Hash Algorithm)은 암호화를 하는 알고리즘인데 그 중에서도 암호화는 가능하지만 복호화는 불가능한 단방향 알고리즘 이다. 이 알고리즘들을 해시(hash) 알고리즘 이라고 부른다. 먼저 MD5의 원문 입력란에 숫자 1을 입력해보았다. MD5 알고리즘으로 숫자 1을 암호화 한 결과값은 c4ca4238a0b923820dcc509a6f75849b 이 나왔다. 근데 1다음 숫자인 2를 암호화했을 때는 전혀 다른 값인 c81e728d9d4c2f636f067f89cc14862c 가 나..

비트코인을 채굴한다는 건 비트코인의 거래 내역을 기록한 블록을 생성하고 그 대가로 비트코인을 얻는 것이다. 채굴에 성공한 보상으로 지급되는 비트코인의 양은 21만 블록이 지날 때마다 절반으로 줄어들고 총 2100만개의 비트코인 생성되게 설계되어있다. 즉, 총 량이 2100만개에 수렴하도록 설계되어있는 것이다. 2032년이면 약 99%의 비트코인이 생성된다고 전문가들은 예측하고있다. 또한 2140년이면 100% 모두 채굴 된다고 한다. 아무리 100년 이상 먼 미래에 일어날 일이지만 총 발행량인 2100만개의 비트코인이 모두 생성될 것인데 그러면 '거래 내역을 기록하고 보상을 받는 채굴자가 사라진다는 소리인데, 거래가 이루어질 수 있나?' 라는 의문이 생겼다. 찾아본 결과 그 미래의 일은 아무도 알 수 없..

합의 알고리즘(consensus algorithm)이란 다수의 참여자들이 통일된 의사결정을 하기 위해 사용하는 알고리즘을 말한다. 합의 모델, 합의 방식, 합의 메커니즘 또는 합의 프로토콜이라고도 한다. 블록체인 시스템의 경우 네트워크에 참여하는 모든 참여자들이 동일한 데이터를 복사하여 분산 저장하기 때문에 원본과 사본의 구별이 없으며, 통일된 의사결정을 내릴 수 있는 권위 있는 중앙(center)이 존재하지 않는다. 이런 상황에서 합리적이고 효율적인 의사결정을 내릴 수 있는 다양한 알고리즘이 개발되었다. 작업증명작업증명(PoW, Proof of Work)이란 목표값 이하의 해시를 찾는 과정을 무수히 반복함으로써 해당 작업에 참여했음을 증명하는 방식의 알고리즘이다. 채굴을 통해 작업증명을 한다. 비트코인..

호이스팅(hoisting) = 끌어올리다. 상황에따라 변수의 선언과 할당을 분리해서 선언부분을 스코프의 가장 위쪽으로 끌어올리는 것이다. 실제 소스코드를 끌어올리는 것은 아니고 소스를 그런식으로 해석한다는 의미이다. 자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해둔다. 즉, 변수를 실행하기 전이지만 이런변수가 있구나 하고 기억해두기 때문에 선언한 것과 같은 효과가 있는 것이다. 전역 범위(global scope)에서는 스크립트 단위에서 최상단으로 끌어 올려진다. 함수 범위(function scope)에서는 해당 함수의 최상단으로 끌어 올려진다. var변수 선언과 함수선언문에서만 호이스팅이 일어나고 let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다. ..

0.1 + 0.2 = 0.30000000000000004 ??자바스크립트에서 실수의 연산 중 일부의 경우는 소수점이 오류가 난다. 사람은 10진수를 쓰지만 컴퓨터는 사람과 다르게 2진수를 사용한다. 그러므로 10진수를 2진수로 바꿔주어야 컴퓨터가 알아들을 수 있다. 2진수는 0과 1 두가지로만 표현하며 2진수와 10진수의 관계는 다음과 같다. *빨간색은 2진수8 (=2의3승) 1000 4 (=2의2승) 0100 2 (=2의1승) 0010 1 (=2의 0승) 00010.5 (=2의 -1승) 0.1000 0.25 (=2의 -2승) 0.0100 0.125 (=2의 -3승) 0.00100.0625 (=2의 -4승) 0.0001 컴퓨터는 위와 같이 2의 n승만 가지고 숫자를 조합하여 나타낸다. 숫자 3을 나타내고..

모든 HTTP 응답 코드는 5개의 클래스(분류)로 구분된다. 상태 코드의 첫 번째 숫자는 응답의 클래스를 정의한다. 마지막 두 자리는 클래스나 분류 역할을 하지 않는다. 첫자리에 대한 5가지 값들은 다음과 같다:1xx (정보): 요청을 받았으며 프로세스를 계속한다2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다웹 페이지 검색을 하면서 3자리 숫자가 뜨면서 페이지 로드가 되지 않는 경우가 종종 있었다. 가장 대표적으로 많이 뜨는 http 상태코드는 404 NOT FOUND 이다. ..

구문 에러(Syntax errors): 코드 상의 구문 에러로 대개 철자가 잘못되어 작동이 안되거나 중간에 프로그램이 중지된다. 물론 여기서 에러 메시지가 출력되므로 확인할 수 있다. 코드 편집기 툴을 사용하고 에러 메시지의 의미만 파악할 수 있다면, 충분히 고칠 수 있다.논리 에러(Logic errors): 구문은 올바르지만, 코드의 의미자체가 잘못된 경우이다. 즉 프로그램은 정상적으로 돌아가지만, 원하는 결과를 얻지 못하는 경우이다. 에러 메시지가 직접적으로 표시되지 않기 때문에, 일반적으로 구문에러보다 에러 수정이 힘들다. 에러의 종류에는 크게 두가지가 있다. 자주 일어나는 에러는 구문 에러가 대부분이다. 나는 에러 메시지가 뜨면 끝까지 읽지 않고 에러가 뜨기 전에 내가 뭘 고쳤었는지 생각하여 그 ..

데이터 백업(data backup)이라고 하며, 데이터를 미리 임시로 복제하여, 문제가 일어나도 데이터를 복구할 수 있도록 준비해 두는 것을 말한다. 데이터 백업을 수행한 파일은 백업 파일이라고 한다. 웹 페이지 개발을 하면서 나의 나쁜 습관 때문에 페이지 전체를 통채로 수정해야할 뻔 하였다. 내가 가지고 있던 치명적인 나쁜 습관은 일부분에 대한 수정 요청이나 추가 요청이 왔을 때 간단한 것들은 '이건 이 부분 조금만 건드리면 되겠네' 라고 생각하며 원본 파일을 백업 해놓지 않고 원본을 그냥 고쳐버리는 습관이다. 간단한 수정 문제라고 생각하여 몇가지만 고쳤을 뿐인데 원래 같으면 정상적으로 작동 했어야 하는 소스코드가 작동하지 않았다. 백업을 해놓지 않았는데 이러한 상황이 생기니깐 순간 머리가 백지가 되었..

개발 중 필요한 프로그램 설치 중 위와 같은 오류 메시지가 떴다. 여러번 반복 시도 해봐도 해결 되지 않았다. 일단 이 코드는 Windows 운영 시스템을 위해 Mozilla에서 개발한 Firefox와 관련된 dll 파일 유형이다. dll 확장자 유형은 평소에 시스템파일로 자주 봤던걸로 기억하지만 무엇인지 궁금하여 알아보았다. 파일 확장자 dll 유형은 Dynamic Link Library의 약자로 동적 링크 라이브러리라고 불린다. 이름과 같이 어느 파일을 실행할 때 같이 동작되는 동적인 라이브러리 라고 생각하면 될 것 같다. 이 오류메시지의 원인은 MSVCP140.dll 파일이 제 역할을 하지 못하는 상태이거나 존재하지 않을 때 뜨는 것 이었다. 이 파일이 내 컴퓨터에서 갑자기 에러를 발생시킨 의심할만..

JavaScript는 HTML과 CSS로 구성된 정적인 화면과 다르게 동적인 화면을 웹페이지에 구현하기 위해 사용하는 스크립트 언어이다. 자바 스크립트의 특징HTML 내장형태이고 클라이언트의 웹브라우저에서 해석되어 수행사용자의 이벤트에 따라 다양한 반응을 할 수 있음동적인 웹페이지의 작성이 가능자바보다 사용하기가 용이함서버의 부담을 줄일 수 있음 jQueryjQuery는 JavaScript 라이브러리라이브러리란 자주 사용하는 기능들을 모아 놓을 것을 말한다. HTML과 JavaScript 의 차이점HTML은 태그의 속성, 즉 정적인 기능만이 존재한다. 하지만 JavaScript의 경우 객체의 속성(정적 기능)과 객체의 메소드(동적 기능)로 구성이 된다.JavaScript = 객체의 속성(변수, 정적기능)..

CSSCascading Style Sheet로 반복되는 속성을 지정해 준다.웹 페이지의 전반적인 스타일을 지정해 주는 것으로 문서 전체의 일관성과 통일성을 가져온다. CSS 구조A { color:blue; } 에서 A는 지정자, color은 속성, blue는 값이다.지정자 : CSS를 적용할 범위를 지정할 때 사용한다.속성 : 글꼴 색(color), 글자크기(font-size) 등을 바꾸고 싶을 때 사용한다.값 : 속성 뒤에 바꾸고 싶은 색이나, 크기 등을 추가하여 사용한다.속성의 종류 - color(글자 색), font-size(글자 크기), font-family(글꼴), font-style(글꼴 스타일), font-weight(글꼴 두께), background-color(배경 색), backgroun..

태그(TAG)HTML기본태그 : 브라우저 상단에 제목을 표시, 사용자의 검색어가 TITLE 태그에 들어있으면 해당 검색어에 높은 순위를 부여한다. (웹 페이지를 대표할만할 제목을 간결하게 표현) : 문서의 문자 세트, 작성자, 날짜, 키워드 및 표현 방법과 같은 메타데이터를 설정할 때 사용, 한글의 경우 문자가 깨져서 보이는 경우가 있는데 깨짐 현상을 방지하기 위해 태그의 charset 속성을 반드시 지정해 주는 것이 좋다. ()속성 [ charset, name, http-equiv, content ] : 문서의 본문을 담고 있다. 속성 [ id class, title, bgcolor, background, text, link, vlink, alink ] : 글자를 꾸미는데 사용한다.속성 [ id cla..

인터넷 인터넷이란 TCP/IP (Transmission Control Protocol / Internet Protocol) 를 사용하는 전 세계에서 가장 큰 통신망이다. TCP/IP 전송 프로토콜인 TCP(전송 제어 프로토콜)와 패킷 통신 방식의 인터넷 흐름, 오류조절, 전송할 파일을 패킷들로 나누어 전송, 수신된 패킷을 원래의 메시지로 조립하는 역할을 한다. IP 는 패킷들이 목적지에 정확하게 도달하도록 하는 기능을 가지고 있으며 패킷 전달 여부를 보증하지 않고, 패킷을 보낸 순서와 받는 순서가 다를 수 있다. TCP는 IP위에서 동작하는 프로토콜로, 데이터 흐름, 오류조절, 전송할 파일을 패킷들로 나누어 전송, 수신된 패킷을 원래의 메시지로 조립하는 역할을 한다. 또한 데이터의 전달을 보증하고 보낸 ..