Coin Push 프로젝트

CoinPush 다운로드

스택

코인 API : Cryptowatch

chrome extension

HTML, CSS, JS

사용법

각 값들을 입력 후 등록을 하면 20초마다 한번씩 실시간으로 확인해 순서대로 4초에 한개씩 알림이 울립니다.

따라서 권장 최대 알림은 4개이며, 만약 알림을 끄고싶으면 알림 리스트를 전부 삭제해야 합니다.

추후 알림 반복 시간 설정 업데이트 예정

상한 지정가와, 하한 지정가는 필수로 입력해야 하며 한개의 알림만 원한다면, 각각 원하지 않는 곳에 적절한 값을 넣어주시면 됩니다.

지정가의 퍼센트 설정은 현재 인풋창의 값에서 누적으로 퍼센트 계산이 되니 참고하시기 바랍니다.

로드맵

1.0

  • Push 설정
    — 거래소
    — 코인
    — 지정가 ( max, min )
    — 등록 버튼

  • 알림 설정 리스트
    — 추가, 삭제

  • 지정가 퍼센트 기능

1.1

  • 서버요청 쿨타임 설정 기능
  • 지정가 퍼센트 기능 보완
  • max or min disable

1.2

  • 디자인 개선

1.3

  • 코인 모니터링 시스템

2.0

  • 코인원, 업비트 API 추가

3.0

  • 거래기능 도입
  • 매수, 매도 버튼 추가

후기

이준호(SSsEnzo):

짧은 프로젝트로 유택님과 일을하게 되었는데

처음 만들어 보는 Chrome extension이라 정말 재밌게 했습니다.

다음번에 더 업그레이드 될 수 있게 새로운 프로젝트를 빨리 하고싶어 지네요.

다들 피쓰~

Github
블로그

정유택(takeU):

토이프로젝트로 약 일주일동안 열심히 만들었는데

기초적인 기능은 얼추 완성한 것 같고, 앞으로 이것저것 기능 추가하면서 다듬으면 좋을 듯 하다.

디자이너가 없어서 급하게 했지만, 일단 개발자의 눈에는 나름 이쁘다ㅋㅎ

시간이 될지 모르겠지만, 반응이 괜찮다면 더 빠르게 진행해봐야겠다.

또한 같이 만들고 싶다는 분이 많이 생기면, 오픈소스로 돌릴 생각도 있으니 메세지 주시면 좋을것 같습니다!

끝으로, 부족하지만 한번이라도 이용해주신 모든 분들께 감사드립니다!

Github

'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

티스토리 블로그 폰트 바꾸기

  1. 설정에서 HTML/CSS 편집 들어가기





  2. 구글 폰트에서 원하는 폰트를 찾아 @import방식으로 사용
    폰트를 다운받아 사용할 수도 있지만, 다운받지않고
    바로 폰트를 가져오는 방법이 더 편해서 원하는 폰트를 찾아 코드를 가져옴.
    예시로 이 블로그는 ‘Lato’ 폰트를 사용했음

  3. HTML/CSS 편집창에서 CSS 클릭후 최상단에 붙여넣기


  4. Ctrl + F 로 font-family를 검색해 원하는 폰트 이름을 삽입 후 저장
    검색이 안될때는 새로고침 후 검색
    폰트의 두께는 font-weight 속성으로 설정


끝!

6/159


'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21
  1. BlogIcon SONYLOVE 2017.04.07 17:02 신고

    Lato 폰트도 블로그에 잘 어울리네요.

    • BlogIcon takeu takeU 2017.04.07 17:07 신고

      감사합니다ㅎㅎ
      그냥쓰면 좀 두꺼워서 두께 300으로 주니까 예쁘네요

  2. BlogIcon 졸린 홍원 2017.09.16 19:07 신고

    덕분에 폰트 바꿨습니다ㅜㅜ감사합니다

Github 간편 사용 설명서

목차

  1. 새로운 repository 생성
  2. 1번 이후 변경 사항이 있을 때
  3. branch, merge 사용법
  4. 충돌 시 해결 방법
  5. 풀리퀘스트 보내기

1. 새로운 repository 생성

Github 페이지에서 새로운 repository 생성 후에 로컬에서 작업한 내용을 올리기 위한 명령어 순서

명령어 입력 순서

  1. git init
  2. git add .
  3. git commit -m “commit message”
  4. git remote add origin repostory주소
  5. git push -u origin master

1번으로 현재 작업중인 폴더에서 git을 사용할 수 있도록 해주고

2번으로 폴더 내의 모든 파일(.이 모든 파일을 의미)을 git의 staging area에 추가

3번으로 커밋과 동시에 -m으로 커밋 메세지 작성

4번으로 원격 저장소, 즉 github repository 주소를 origin 이라는 이름으로 등록

5번으로 origin이라는 원격 저장소에 master 브랜치에 푸시, 이때 -u를 쓴다면 다음번 부터 git push만 입력해도 origin의 master로 푸시가 된다.

2. 1번 이후에 새로운 변경 사항이 있을 때

1번 과정 이후에 변경 사항이 있어 push를 하고 싶을 때 순서

명령어 입력 순서

  1. git add .
  2. git commit -m “commit message”
  3. git push

과정은 1번과 같으나 init과 원격 저장소 등록을 할 필요가 없다

3. branch, merge 사용법

협업을 할 때 많이 쓰는 기능 branch, merge 이름 그대로 가지를 치고, 합치는 방법이다

명령어 입력 순서

  1. git branch 브랜치이름설정
  2. git checkout 브랜치이름
  3. git add .
  4. git commit -m “commit message”
  5. git push origin 브랜치이름

1번으로 새로운 브랜치를 생성(기존 브랜치는 master)

2번으로 생성한 브랜치로 이동

3번으로 모든 파일 추가

4번으로 커밋, 메세지 작성

5번으로 origin 저장소의 새로운 브랜치에 푸시

브랜치에 푸시까지 완료 한 뒤

  1. git checkout master
  2. git merge 브랜치이름

위의 과정으로 master에 새로운 브랜치를 merge할 수 있다

4. 충돌 시 해결 방법

pull이나 push를 했을 때 원격저장소의 내용과 로컬폴더내의 내용중 같은 라인에 다른 내용이 있다면 충돌 발생

터미널 로그에 충돌이 난 파일이 표시되니 직접 수정 후 다시 pull이나 push를 실행

가장 좋은 방법은 협업자들끼리 역할을 완전히 분담해 애초에 같은 코드를 건드리지 않는 것이지만, 어쩔 수 없이 그렇게 된다면 항상 작업 전에 pull을 습관화하면 충돌을 최소한으로 줄일 수 있을 것!

5. 풀 리퀘스트 보내기

오픈소스를 만들 때 가장 많이 쓰는 방법

내가 push한 내용을 repository의 마스터 권한을 가진 사람에게 pull 해달라고 요청하는것

우선 참여하고 싶은 repository에 들어가 오른쪽 상단의 fork로 나의 repository에 복사해옴

명령어 입력 순서

  1. git clone 원본repository주소
  2. git remote add 나의repo이름설정 나의repo주소
  3. git remote -v
  4. git pull origin
  5. git checkout -b 브랜치이름(이슈)설정 origin/master
  6. git push 나의repo이름 브랜치이름

1번으로 원본 repo의 코드들을 나의 로컬환경에 클론해온다.

2번으로 포크해온 나의 repo주소를 새로운 이름으로 추가해준다.

3번으로 현재 등록되어있는 원격저장소가 어떤게 있나 확인해본다. 아마 origin이라는 이름의 원본 repo주소와 새로 설정한 이름의 나의repo주소가 있을 것이다

4번으로 혹시 모를 코드변화가 있을 수 있으니 한번 pull해서 확인해준다

5번으로 원본repo에 이슈명이나 키워드로 브랜치를 생성하고 이동한다

모든 작업 후에 6번으로 나의 repo에 푸시한다

위의 과정 이후에 github에서 fork한 나의 repo에서 방금 푸시한 브랜치명을 선택 하면 옆에 Pull request 버튼이 생기고, 절차에 따라 누르면 풀리퀘스트가 진행된다.

여기서도 충돌이 발생할 수 있으니, 코드를 보며 적절히 수정해주면 된다.

마치며

멋사 강의 준비하면서 공부했는데 기초적인 방법은 익힌 것 같아 도움이 많이 되었다!

'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

Git, Github 10분만에 익히기

튜토리얼 링크
깃헙 명령어 모음

혼자 작업할 때 커밋하고, 푸시하고 정도의 명령어만 알고 있다가 협업할때 branchmerge니 헷갈렸는데 한번 스윽 해보고나니 그래도 당장 필요한 수준의 명령어정도는 익힐 수 있었고, 공유해도 좋을 것 같아 링크를 남김!

'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

데일리 후보란

대선후보들의 행선지를 쉽게 알아볼 수 있도록 타임라인에 표시 해놓은 웹사이트
데일리 후보 링크

후기

반년넘게 개발 공부하면서 제대로 프로젝트를 마쳐본적이 없는데, 우연히 멋사를 하면서 이런 기회가 생겨 중간합류해서 팀원들과 3일동안 같이 머리 싸매서 만들었다.

“정치”의 “정” 자도 모르지만 일단 프로젝트라길래 하고 싶었음.

이번 프로젝트에서 전반적인 프론트 작업을 맡아 했는데, 결과물을 막상 보니까 디자이너의 부재를 크게 실감했다..주륵

그래도 3일정도에 기능구현이나 전반적인 시스템자체는 다른분들이 맡아서 잘해주셔서 구현하려고 했던 기능들은 잘 돌아가는것 같아서 그건 그나마 다행인듯..ㅋㅎ

의견이 갈리는 부분에서 맞춰가고 각자 맡은 역할에서 열심히 코드짜고 합치는 과정 하나하나가 생각보다 더 재밌었던것 같고 기회가 되면 또 하고 싶다. 대형 프로젝트면 더 재미있을 듯 함!

셀프 피드백

  1. 디자이너가 있었으면 어땠을까
    확실히 지금보다 아름답고 정교한 결과물이 나오지 않았을까 생각해봄. 프로젝트 하기 전까지는 “디자이너가 뭐가 중요하겠어”라는 위험한 생각을 했는데 막상 해보니 부재가 아주 크게 느껴졌음.

  2. 깃허브를 좀 잘 다뤘으면 파일 관리가 더 쉽지 않았을까
    내가 혼자 할때의 명령어밖에 모르고 브랜치, 머지같은 협업할 때 필요한 명령어들을 제대로 사용할 줄을 모르니까 아주 고전적인 압축>파일전송으로 코드를 나눴는데 자괴감이..후~

  3. 페이지를 짜는 도중에 시안이 너무 많이 수정돼서 시간이 조금 더 걸렸다는 점?
    처음 설계할 때 조금더 정교하게 토의하면서 같이 작성했다면 더 좋은 결과물을 더 빨리 뽑아냈을 것 같다. 물론 이번 프로젝트는 짧은 기간에 결과물을 만들어 내야했기에 아쉬웠던점은 있지만, 시간에 대비해서는 양질의 기획서였던것 같다.

  4. 호스팅 방법을 좀 알아볼 필요가 있음
    직접 서버에 띄워본적도 없고 AWS도 쓸줄 모르는데 그냥 도메인 사서 AWS에 올리면 되지 하고 생각만 했는데 도메인사는 사이트도 엄청 많고, 찾아보니까 속도도 제각각이라하고.. 모르는부분들을 좀 찾아서 공부할 필요가 있을 것 같음

  5. CSS 공부
    해도해도 내가 원하는 포지션이 안나오는지 당최 이해할 수가 없다. 아주 스트레스 공부가 더 필요함을 다시 느낌 flex, media query 좀 자세히 알아야 할 것 같다

그래도 완성하고나니까 뿌듯하다 흐흐
가셔서 댓글한번씩만.. 쿠흠..


'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21
  1. 홍지환 2017.04.17 18:31 신고

    W😮W

  2. BlogIcon takeu takeU 2017.04.18 15:14 신고

    ㅋㅋㅋㅋㅋ아놔

  3. 홍지환 2017.04.19 23:15 신고

    휼륭합니다

1. home brew 설치

homebrew는 mac OS 에서 윈도우의 프로그램 추가/제거와 비슷한?기능을하는 패키지 관리자입니다( git과 ruby 기반 )

homebrew를 사용하면 각종 패키지들을 코드 한줄로 뚝딱 다운이 가능해요

  • 설치방법

터미널에 아래의 명령어를 붙여넣어주세요

1
ruby -"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
cs

설치후에 내 mac에 homebrew가 잘 깔렸나 확인하기 위해 아래 명령어를 입력 후 의사님이 진단하신대로 따라하시면 됩니다

1
brew doctor
cs

homebrew설치 끝! (참고 사이트 : https://brew.sh/index_ko.html )


2. vim 8.0 설치

mac에는 기본적으로 vim (7.3~7.4)이 설치되어있지만 작년말에 나온 8버전을 설치해보자! 그냥 귀찮거나 구버전이 좋다하면 안깔아도 됩니다

  • 설치방법

터미널에 아래 명령어를 차례로 입력합니다

1
2
brew install mercurial
brew install vim --with-override-system-vim

cs


두번째 줄 이후에 이미 설치되어 있다는 에러가 난다면

1
2
brew unlink vim
brew install vim --with-override-system-vim
cs

다시 하란대로 명령어를 입력하고 아래의 명령어로 vim의 버전을 확인했을때 8.0이 나오면 성공!~!

1
vim --v
cs


3. plugin (Vundle) 설치

vim 그 자체로는 단축키가 많은 그저 하드코딩해야하는 도구일 뿐이지만 플러그인으로 이런저런기능을 넣어주면 아주아주아주 좋아져요

vim의 플러그인 매니저는 Vundle로 다음과 같이 설치합니다

  • 설치방법

아래의 명령어를 입력해 Vundle 설치 ( git이 설치되어 있어야 함! )

1
git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim

cs



4. vimrc세팅

  • 설치방법

터미널에 아래 명령어를 입력합니다 ( vim으로 ~/.vimrc라는 파일을 열겠다는 명령어, 기존에 있던파일이 아니면 새로 만들어 열게됩니다)

1
vim ~/.vimrc
cs

내용( HTML,CSS 편집 기준으로 플러그인들을 넣었습니다 )

   

 set nocompatible              " be iMproved, required 

 filetype off                  " required


 set rtp+=~/.vim/bundle/Vundle.vim

 call vundle#begin()



 Plugin 'VundleVim/Vundle.vim'

 Plugin 'tpope/vim-fugitive'

 Plugin 'https://github.com/itchyny/lightline.vim'

 Plugin 'https://github.com/tpope/vim-surround'

 Plugin 'https://github.com/skammer/vim-css-color'

 Plugin 'https://github.com/Shutnik/jshint2.vim'

 Plugin 'git://git.wincent.com/command-t.git'

 Plugin 'rstacruz/sparkup', {'rtp': 'vim/'}

 Plugin 'mattn/emmet-vim'

 Plugin 'ascenator/L9', {'name': 'newL9'}

 Plugin 'scrooloose/nerdtree'

 

 call vundle#end()            " required

 filetype plugin indent on    " required


 imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab>")

 set autoindent

 set smartindent

 set tabstop=2

 set shiftwidth=2

 set nu

 colorscheme default

 set backspace=indent,eol,start

 syntax enable



위와 같이 작성 후 :w로 저장후 :PluginInstall로 플러그인들을 설치합니다.


5. 플러그인 종류 및 설명


플러그인 위의 두줄은 다른 플러그인을 사용하기 위한 필수 플러그인 입니다


  • emmet-vim은 html:5 를 입력 후 ctrl y 를 누른 뒤 ,를 누르면 html폼이 완성되는 플러그인 이지만


아래의 imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab>") 로 단축키를 탭키로 바꿔줬습니다


  • nerdtree는 디렉토리를 볼수있게 해주는 플러그인이며 :NERDTree로 실행할 수 있어요


다른 플러그인들은 저도 잘모르겠으니 알려주세요 하하 


set autoindent  " 자동 들여쓰기
set smartindent " 스마트한 들여쓰기

set tabstop=2 "탭 2칸

set shiftwidth=2 " 자동 들여쓰기 2칸
set number " 행번호 표시, set nu 도 가능

colorscheme default  "  vi 색상 테마 설정
set backspace=eol,start,indent "  줄의 끝, 시작, 들여쓰기에서 백스페이스시 이전줄로
syntax enable " 문법강조 on



끝! 안되시는 부분 댓글로 남겨주세요 끝까지 읽어주셔서 감사합니다


'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

+ Recent posts