[Front-end🐈‍⬛] #39 시각화, git, Github

또상·2021년 12월 22일

front github

front-end

목록 보기

54/58

1. 정규표현식

문제를 몇 개 풀었는데, #38 에 이어서 정리했다.

2. 시각화

1. Chart.js

https://www.chartjs.org

chart.js, bootstrap 을 이용해서 데이터 시각화를 해보았다. cdn 으로 script를 가져와서 label, data, config 의 데이터와 옵션들을 수정해서 쉽게 표를 만들 수 있었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chartjs</title>

    <!-- chartjs cdn -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <canvas id="myChartOne"></canvas>
            </div>
        </div>
    </div>
    <script>
        const labels = [
            '1월',
            '2월',
            '3월',
            '4월',
            '5월',
            '6월',
        ];
      
        const data = {
        labels: labels,
        datasets: [{
            label: '매출액 현황(억)',
            backgroundColor: ['gold', 'pink', 'skyblue'], // rgba(255, 0, 0, 0.5), #ff0000
            borderColor: 'black',
            borderWidth: 5,
            hoverBorderWidth: 7,
            data: [1, 2, 5, 2, 2, 3, 4],
        }]
        };
      
        const config = {
            type: 'bar', // pie, bar, line, doughnut, polarArea
            data: data3,
            options: {
                plugins:{
                    title:{
                        display: true,
                        text: '매출액!!!!',
                        color: 'red',
                        position: 'bottom',
                        padding: {
                            top: 10,
                            bottom: 10
                        }
                    },
                    legend: {
                        display: true,
                        position:'right',
                        labels:{
                            color:'blue'
                        }
                    }
                }
            }
        };
    </script>
    <script>
        const myChartOne = new Chart(
            document.getElementById('myChartOne'),
            config
        );
    </script>
</body>
</html>

공공 데이터 포털에서 엑셀 파일을 csv로 뽑고 그걸 다시 json으로 변환해서 사용할 수 도 있다.

공공 데이터 포털 - https://www.data.go.kr
csv to json - https://curryyou.tistory.com/252

2. Canvas

간단하게 살펴보았다!! iOS에서 화면 잡는게 약간 이런 형태인데 html에도 있는 것이었다.

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        // 캔버스에서 어떻게 그릴지 렌더링 컨텍스트를 받아온다.
        const ctx = canvas.getContext('2d'); 

        // 실제로 그리는 함수
        function drawRect(ctx) {
            let x = 10,
            y = 10,
            w = 150,
            h = 100;
            ctx.fillStyle = 'green';
            ctx.fillRect(x, y, w, h);
        }

        function 삼각형(ctx) {
            ctx.beginPath();
            ctx.moveTo(75, 70);
            ctx.lineTo(100, 75);
            ctx.lineTo(100, 25);
            ctx.fillStyle = 'red';
            ctx.fill();
        }

        drawRect(ctx);
    </script>
</body>

3. D3

https://d3js.org
https://bl.ocks.org/mbostock/4063269

d3도 간단하게 살펴보았다.

동작과정
- Loading - 데이터 로딩
- Selecting-Binding - 코드 연동
- Transform - 그래프의 색상, 축 등 설정
- Transition - 클릭 등의 효과 지정
기본메서드
- d3.select : 태그 하나 선택
- d3.selectAll : 태그 전체 선택
- .data : 데이터 로딩
- .enter : 태그가 데이터에 비해 부족하면 나머지 반환
- .append : 새로운 태그 추가
- .exit : 종료
- .remove : 선택된 태그 제거

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div class="canvas"></div>
    <script>
        const canvas = d3.select('.canvas');

        const svg = canvas.append('svg')
                .attr('height', 1000)
                .attr('width', 1000);

        // x y 는 좌측 상단 기준 좌표.
        svg.append('text')
            .attr('x', 200)
            .attr('y', 200)
            .attr('fill', 'black')
            .text('hello world')
            .style('font-weight', 'bold')
            .style('font-style', '34px')

        svg.append('rect')
            // .attr('x', 10)
            // .attr('y', 10)
            .attr('width', 200)
            .attr('height', 200)
            .attr('fill', 'hotpink')

        svg.append('circle')
            .attr('r', 50)
            // cx, cy 는 원의 중심
            .attr('cx', 200)
            .attr('cy', 200)
            .attr('fill', 'pink')
        
        svg.append('line')
            .attr()
    </script>
</body>
</html>

4. disqus

https://disqus.com

disqus 를 이용해서 블로그에 댓글창을 만드는 것을 구현해 보았다. github.io 기술블로그 들어가면 많이 보이던 UI이던데 이걸 쓰신거였다는걸 알게 되었다. 깃헙 블로그처럼 페이지는 정적인데 댓글을 다는 것만 필요할 때 많이 사용한다고 한다.

1. 회원가입 후 Get Started!

2. I want to install Disqus on my site

우리는 html을 직접 만들어서 댓글창을 넣고 싶은거니까@

3. Create my site

웹사이트 이름과 카테고리를 채우고 생성한다.

4. 단계 진행

이 4단계를 진행해야하는데,

Select Plan 은 Basic으로

I don't see my platform listed, install manually with Universal Code

누르면 나오는 코드를 복사해서 html 하단에 붙여넣고 나머지 과정을 마무리한다! 실제로 사용할 레포는 아니었어서 댓글이 써지는 것만 확인하고 나머지 설정은 진행하지 않았다.

3. Git / Github

1. Git

git : 로컬 저장소 / 원격 저장소 로 나뉜다. git 이랑 github 은 다른 것!
4가지 필수 명령어 : git pull / push / commit / add

git init
# 저장소로 이동 후
touch README.md

git add README.md
git add . # 전체 add
git commit -m "first commit"

git ignore

# a comment - 이 줄은 무시한다.
# 확장자가 .a인 파일 무시
*.a
# 윗 줄에서 확장자가 .a인 파일은 무시하게 했지만 lib.a는 무시하지 않는다.
!lib.a
# 루트 디렉토리에 있는 TODO파일은 무시하고 subdir/TODO처럼 하위디렉토리에 있는 파일은 무시하지 않는다.
/TODO
# build/ 디렉토리에 있는 모든 파일은 무시한다.
build/
# `doc/notes.txt`같은 파일은 무시하고 doc/server/arch.txt같은 파일은 무시하지 않는다.
doc/*.txt
# `doc` 디렉토리 아래의 모든 .txt 파일을 무시한다.
doc/**/*.txt

git log # 커밋 기록 확인
git diff # 변경사항 확인

github

// push : 저장소에 올라감 
git remote add origin push할주소
git push -u origin main
git push origin branchname

// clone : 저장소에 있는 것을 처음 받아올 때
git clone 가져올주소 . #.을 해야 제일 상위 폴더가 안생김.
# clone 받고 권한도 받아야 한다. Manage access > Add people

// pull : 이미 클론된 저장소의 변경사항을 받아옴
git pull origin main # github에 업데이트된 것을 받아올때.

branch

// branch :  말 그대로 가지를 뻗음! 지금 코드와 같은 베이스에서 작업을 하지만 브랜치끼리 반영은 안됨.
git branch # branch 확인
git branch test # test branch 생성

// switch : 브랜치 변경 
git checkout test
git switch test # switch 브랜치를 옮기는 기능만 담당.
git switch -c new-dev # 새 브랜치 만들어서 옮김

// restore : 파일 내용 수정 복원 / add해서 스테이지에 올린 것 뺄 때 사용.
git checkout -- README.md
git restore README.md
# reset 대신 restore를 이용하면 수정사항 조작이 편하다.
git reset HEAD README.md
git restore --staged README.md

// merge : 개발이 끝나서 브랜치를 합침.
git checkout main
git merge test # test를 main에 merge.

기타

// amend : 최신 커밋에 새로운 커밋 추가
# 혼자 사용하는게 아닌 브랜치는 꼬일 수 있으니 주의!
git commit --amend

// stash : 커밋 못한 파일이 있는데 다른 브랜치에 체크아웃할 때 잠시 파일들을 치워두는 기능
git stash 
git stash --all # 저장소에서 관리하지 않는 파일까지 모두 치움
git stash pop # 다시 브랜치에 돌아와서 수행.

// reset : 옛날 커밋으로 브랜치를 되돌릴 때
git reset [mode] # hard, mixed, soft 를 많이 사용.
git reset --hard commit-id # 모든 변경사항을 버리고 commit id 시점으로 회귀
# mixed : 변경 사항은 로컬에 저장하고 커밋은 리셋, 변경내역이 unstage에 남음
# soft : 커밋을 삭제하고 모든 로컬 변경사항을 유지, 변경내역이 stage에 남음.

// revert : 이력을 남겨 변경사항을 되돌리고 커밋을 생성
# reset과 같은 기능을 하나, reset은 히스토리를 초기화해서 다른사람 히스토리에까지 영향을 주니 revert를 사용해 커밋을 새로 만든다.
git revert commit-id

// cherry-pick : 다른 브랜치에서 가져오고 싶은 커밋만 가져옴.
git cherry-pick commit-id

2. Pull request

다른 repository 를 fork 해와서 개발하고 pull request를 날리면 된다.

커밋은 코드가 추가되었는데 추가가 기능 단위일때
add 명령어를 알고는 있었는데, 소스트리나 파이참 쓰면서 add 안해도 뜨고, 파이참에서는 파일 생성할 때 add 하냐고 물어봐줘서 별로 신경 안썼는데 add와 commit의 적확한 차이를 알게 되었다.

4. threejs (특강)

threejs의 동작 원리는 renderer가 배경을 만들어서 보여주고, Scene 이라는 장판에 Geometry를 배치해 놓는 방식이다. 빛은 고정되어 있고 카메라를 움직여서 본다. 옷, 눈, 코, 입 같은것은 Geometry에 Material 로 붙인다. 그래서 각각의 요소를 만들어서 제어해주면 된다.

사진 출처 - 유준모 대표님의 필기