Hyperledger Fabirc 1.4 설치하기 - (1)

Posted on February 17, 2020

하이퍼레저 패브릭 설치

OS : ubuntu-18.04.3

Install To-Do List

vim
gcc
make
node.js
git
python
pyhton-pip
curl
go
docker
docker-compose

‘vim’, ‘gcc’, ‘make’, ‘node.js’, ‘git’, ‘python’, ‘python-pip’, ‘curl’ 설치 필요

sudo apt-get install vim
sudo apt-get install gcc make nodejs git
sudo apt install python python-pip
sudo apt install curl

After Install Something

vim
gcc
make
node.js
git
python
pyhton-pip
curl
go
docker
docker-compose

웹 초보 개발자를 위한 VSCode 확장기능들

Posted on December 24, 2019

Korean Language Pack for Visual Studio Code

visual studio를 한글 버전으로 바꿔줍니다. 재부팅 필요

Beautify

어지럽게 정렬된 태그들을 정렬해 줍니다. 이 확장 프로그램은 키 설정이 필요합니다.

[기여] - [명령] 에 있는 두 가지 명령중 file 명령을 제외하고 selector 명령만을 키로 설정할 예정입니다. file 이 붙은 저 명령어는 file 전체의 구조를 바꿔버리기 때문에, 내가 원하지 않는 부분의 구조도 변경할 수 있기 때문입니다.

바로가기 키를 설정하기 위해 눌라야하는 입력 키 [ ctrl + k , s ] 이후 검색창에 HookyQR.beautify 검색 그러면 아래와 같은 자료가 나옵니다.

저는 커서를 올리니 좌측에 + 표시가 떠서 그 + 표시를 눌렀습니다. 이후 [ Ctrl + Alt + L ] 키를 등록해 주었습니다.

사용법

정렬할 부분 선택 → 이후 [Ctrl + Alt + L] 해주게 되면 짜잔하고 됩니다.

Live Server

html 소스를 동작시켜주는 역할을 합니다.

해당 버튼을 클릭하면 아래 사진과 같이 5500 포트를 사용하는 라이브 서버가 하나 열리게 됩니다. 파일을 변경해서 저장하면 변경내역을 웹상으로 보여주는 시각적 효과를 담당합니다.

[용어정리]-(1)

Posted on December 24, 2019

웹 표준, 크로스 브라우징, 웹 접근성

웹표준

‘웹 표준’ : 웹에서 사용되는 표준 기술이나 규칙들을 의미
이 표준 기술들을 기준으로 다양한 웹 브라우저 들이 만들어 지는데, 각자가 해석하는 바가 달라서 조금은 다르게 구동되는 브라우저가 생긴다.

크로스 브라우징

크로스 브라우징 (Cross Browsing) : 각각 다르게 구동되는 여러 브라우저 환경에 있어서 사용자들이 동일한 화면을 제공받게끔 개발을 해야하고, 이를 크로스 브라우징이라 한다.

IE ( Internet Exproler 는 표준을 지키지 않은 것들을 어느정도 있어서 화면에 보여지는 것이 조금 다를 수 있다.)

웹 접근성

웹 접근성 : 정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있도록 웹 콘텐츠를 제작하는 것.

ex) 청각 장애인을 위해 영상에 자막을 넣거나, 마우스를 사용할 수 없는 사람들을 위해 키보드를 통해서도 웹을 이용할 수 있게 하거나, 이미지에 대체 텍스트를 제공하는 방법들 모두 웹 접근성

[JavaScript] Local Storage 사용하기

Posted on December 23, 2019

원본 : 노마드코더 강의

본 자료는 노마드코더의 강의를 따라 실습하면서, 연습하는 글로 모든 연습 코드의 원작자는 니콜라스 선생님이 쓰신 코드를 사용해서 변형하고 연습했습니다.

먼저 구현 화면 부터 보겠습니다.

소스 코드

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Thorr JS</title>
    <link rel="stylesheet" href="./index.css"/>
</head>
<body>
    <div class="js-clock">
        <h1 class="js-title"></h1>
    </div>
    <form class="js-form form">
        <input type="text" placeholder="What is your name?" />
    </form>
    <h4 class="js-greetings greetings"></h4> 
    <script src="clock.js"></script>
    <script src="gretting.js"></script>
</body>
</html>

위의 내용을 보면 clock.js 때 작업 내역을 그대로 볼 수 있습니다.
추가적으로 들어간 부분은 Form 태그, 그리고 greetings 클래스를 가진 h4 태그 하나가 있습니다.
이 부분을 동작시켜 text 박스에 입력된 값을 localstorage에 저장하고, 이 값을 불러오는 화면을 구현 합니다.

gretting.js

const form = document.querySelector(".js-form"),
 input = document.querySelector("input"),
 greeting = document.querySelector(".js-greetings");

const SHOWING = "showing";

// 텍스트를 표현하는 함수
function writeText(text){
  form.classList.remove(SHOWING);
  greeting.classList.add(SHOWING);
  greeting.innerText = `Hello!! ${text}`
  
}

// 로컬 스토리지에 값을 저장하는 함수
function saveText(text) {
  localStorage.setItem("name", text)
}

// 로컬스토리지에 발생한 값을 감지하는 함수.
function handleSubmit(event){
  event.preventDefault(); // 기존의 새로고침 기능을 막기 위해 사용된 함수
  const currentValue = input.value;
  writeText(currentValue);
  saveText(currentValue);
}

// 입력하기 위해 텍스트 박스를 활성화 하는 함수
function askForText() {
  form.classList.add(SHOWING);
  form.addEventListener("submit", handleSubmit)
}

// 등록된 이름이 없다면 텍스트 박스를 띄워주고 있다면 글을 띄워주는 함수
function loadName(){
  const currentName = localStorage.getItem("name");
  if (currentName === null){
    askForText();
    // 1. 설정된 이름이 없다. 
    // 2. 물어보기 위한 질문 창을 열어준다. 
    // 3.값을 입력 받는다. 
    // 4. 저장한다. 
    // 5. 이벤트가 발생했으니 띄워준다.
  } else {
    writeText(currentName);
    // 1. 설정된 이름이 존재한다.
    // 2. 이벤트가 발생했으니 띄운다.
  }
}

// 메인함수
function init() { 
  loadName()
}

init();

이번 소스는 작성하면서 이해한 내용을 주석으로 작성했습니다.

git : https://github.com/thorr-lab/JS-STUDY

감사합니다.

[JavaScript]시계 기능 구현

Posted on December 20, 2019

원본 : 노마드코더 강의

본 자료는 노마드코더의 강의를 따라 실습하면서, 연습하는 글로 모든 연습 코드의 원작자는 니콜라스 선생님이 쓰신 코드를 사용해서 변형하고 연습했습니다.

구현된 모습

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Thorr JS</title>
    <link rel="stylesheet" href="./index.css"/>
</head>
<body>
    <div class="js-clock"> 
        <h1 class="js-title"></h1>
    </div>
    <script src="./clock.js"></script>
</body>
</html>

div 클래스 내부에 h1 클래스에 시계를 만들 예정입니다.

그래서 js 파일을 만들 때에도 컨테이너를 만들어서 들어갈 div 위치를 찾습니다.

이후, 시간 값이 표시될 위치에 클래스 이름을 통해 시간 값을 표시합니다.

(주의! 본 소스는 최종본이 아닙니다. 최종 소스로 가시려면 제일 아래에 있는 소스코드를 읽어보세요..)

clock.js

const clockContainer = document.querySelector(".js-clock"),
 clockTitle = clockContainer.querySelector(".js-title");

function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours}:${minutes}:${seconds}`
}

function init() {
    getTime();
}

init()

위의 코드대로 작성을 하게 되면, 처음 불러온 그 순간의 값만 표현됩니다. 이에 대해 자동으로 반복해주는 매크로 기능이 필요합니다. => setInterval 함수

setInterval?

setInterval 함수를 쓰는 방법은 간단합니다.

1	setInterval(함수명, 반복시간);

함수 명이라고 표현한 이유는 위의 코드에서 getTime()을 가지고 예시를 보여주자면 아래와 같이 작성되어야한다.

clock.js
1
2
3
4
5
6
7
function getTime() {
...
}

function init(){
setInterval(getTime, 1000);
}
함수명을 입력해야하기 때문에 getTime()이 아닌 getTime으로 입력하고, 1000은 ms 단위기 떄문에 1000ms = 1초 라고 외워두면 편합니다.

위와 같이 코드를 동작시키면, 매 초마다 동작을 합니다. 이를 동작 시킬 때 11:54:9 … 11:54:10 이런 식으로 표현이 됩니다.
이때 좀 더 보기 좋게 11:54:09 처럼 보여주기 위해 아래와 같은 코드를 작성할 수 있습니다.

clock.js

function getTime(){
    ...
    const seconds = addZeroToSec(date.getSeconds());
    ...
}

function addZeroToSec(seconds){
    if (seconds < 10){
        return `0${seconds}`;
    } else {
        return seconds;
    }
}

하지만 강의에서 보다 더 섹쉬한 코드를 보여주었습니다. (미쵸따..)

clock.js

function getTime(){
    ...
    clockTitle.innerText = `${years}-${month}-${day} ${dayText} ${hours}:${minutes}:${
        seconds < 10 ? `0${seconds}` : seconds
    }`;
}

저는 이 기능에서 연도, 월, 일, 요일, 시간 순으로 표현하고 싶어서 아래와 같이 소스 코드를 추가했습니다.

✨최종 코드

clock.js

const clockContainer = document.querySelector(".js-clock"),
 clockTitle = clockContainer.querySelector(".js-title");

function getTime(){
    const date = new Date();
    const years = date.getFullYear();
    const month = date.getMonth();
    const day = date.getDate();
    const dayText = textDay(date.getDay());
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${years}-${
        month < 10 ? `0${month}` : month
    }-${
        day < 10 ? `0${day}` : day
    } ${dayText} ${
        hours < 10 ? `0${hours}` : hours
    }:${
        minutes < 10 ? `0${minutes}` : minutes
    }:${
        seconds < 10 ? `0${seconds}` : seconds
    }`;
}

function textDay(day){
    if(day===0){
        return "(일)"
    } else if (day === 1){
        return "(월)"
    } else if (day === 2){
        return "(화)"
    } else if (day === 3){
        return "(수)"
    } else if (day === 4){
        return "(목)"
    } else if (day === 5){
        return "(금)"
    } else if (day === 6){
        return "(토)"
    } else {
        return " "
    }
}
function init() {
    setInterval(getTime,1000);
}

init()

git : https://github.com/thorr-lab/JS-STUDY

감사합니다.

[Hexo, Error] Fatal: in unpopulated submodule .deploy_git

Posted on December 20, 2019

Hexo Blog 배포시 발생할 수 있는 에러

이 에러가 발생한 배경을 보자면, 집 컴퓨터에서 배포, 밖에 나와서 내 노트북으로 받아와서 새로 배포하다가 발생한 문제입니다.

서로 다른 환경에서 배포를 하다보니 deploy 될 때 달라서 발생한 문제라고 생각됩니다.
해결방법은 간단합니다.

해결방법

1 2	$ rm -rf .deploy.git $ hexo g --d

감사합니다.

[Web] Web Server vs WAS

Posted on December 19, 2019

본 글은 아래 글을 보며 작성하였습니다.
출처 : https://gmlwjd9405.github.io/2018/10/27/webserver-vs-was.html

WAS = Web Application Server

Q: Web Server랑 동일한 것?

A: 다른 것

Web Server :

Web Server는 파일 경로의 이름을 받아 경로와 일치하는 FILE 을 반환한다.
이때 항상 동일한 페이지를 반환한다. 이를 Static Pages 라고 말함
html, css, javascript 파일과 같이 파일에 컴퓨터에 저장되어 있는 파일들을 의미

WAS:

DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해 만들어진 Application Server
동적인 contents를 반환하는 기능을 한다. 이러한 기능을 하는 페이지를 Dynamic Pages

그래서 Web Server?

하드웨어적 정의 : Web 서버가 설치되어있는 컴퓨터

소프트웨어적 정의 : 웹 브라우저로부터 HTTP 요청을 받아 정적인 컴퓨터를 제공하는 컴퓨터 프로그램

기능

HTTP 프로토콜을 기반으로 클라이언트의 요청을 서비스 하는 기능
- 정적 콘텐츠 제공
동적인 컨텐츠 제공을 위한 요청 전달
- 클라이언트의 요청 WAS에 전달, WAS가 처리한 결과를 클라이언트에 전달

예 :

Apache Server, Nginx, IIS 등..

WAS(Web Application Server)

HTTP를 통해 컴퓨터나 장치에 어플리케이션을 수행해주는 미들웨어(소프트웨어 엔진)

기능

WAS = Web Server + Web Container
프로그램 실행 환경 & DB 접속 기능 제공
여러 개의 트랜잭션 관리 기능
업무를 처리하는 비즈니스 로직 수행

Web Container, Servlet Container :

JSP, Servlet을 실행시킬 수 있는 소프트웨어

예 :

ex) Tomcat, JBoss, Jeus, Web Sphere

감사합니다.

[CentOS 8]CentOS8에서 최신버전의 Nodejs 설치하기

Posted on December 14, 2019

해당 내용은 아래의 링크 글을 참고해서 테스트를 진행하고 작성하였습니다.

출처 : pizzu 님의 velog 글, 링크(클릭시 이동)

centos에서 yum 으로 nodejs 설치시 0.10.x 버전으로 설치가 되는 것을 최신 버전으로 받기위한 방법이다.

1
2
3

$ yum install -y gcc-c++ make     #의존성 패키지 설치
$ curl -sL https://rpm.nodesource.com/setup_8.x | sudo -E bash - #nodejs 최신버전 저장소 설치
$ yum install nodejs # nodejs 설치

버전 확인

감사합니다.

[CentOS 8]Centos8에 VSCode 설치하기

Posted on December 14, 2019

원본 링크 : https://code.visualstudio.com/docs/setup/linux

VS Code를 어떻게 설치하느냐?

key & repository 설치, yum repo로 안정적으로 설치하기 위해서 하는 준비 단계

1
2

$ sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
$ sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'

여기서 부터는 두가지 방법이 있는데 둘 중 하나 선택해서 편한걸로 하시면 됩니다.

yum 으로 설치
1
2
yum check-update
sudo yum install code

dnf으로 설치

1 2	sudo dnf check-update sudo dnf install code

만약 dnf가 설치 되어 있지 않다면? (‘yum으로 까세요’라고 말씀드리고 싶지만 아래와 같이 하면 된다고 합니다.)
4. dnf 설치 -> 이후 3과정 다시 진행

wget http://springdale.math.ias.edu/data/puias/unsupported/7/x86_64/dnf-conf-0.6.4-2.sdl7.noarch.rpm
wget http://springdale.math.ias.edu/data/puias/unsupported/7/x86_64//dnf-0.6.4-2.sdl7.noarch.rpm
wget http://springdale.math.ias.edu/data/puias/unsupported/7/x86_64/python-dnf-0.6.4-2.sdl7.noarch.rpm
yum install python-dnf-0.6.4-2.sdl7.noarch.rpm  dnf-0.6.4-2.sdl7.noarch.rpm dnf-conf-0.6.4-2.sdl7.noarch.rpm

감사합니다.