Sweet Developer

낭만적인 개발자가 되고 싶은 1인

[sweetloper-blog]

나만의 블로그

텀블러를 이용하여 블로그를 시작하였지만 나의 글과 내가 스터디 한 모든 부분을 한 곳에 집중 시키기에는 텀블러를 이용하기에는 부족한 것 같다. 글을 작성 할 때에도 나에게는 불편한 점이 많은 것 같다. 그래서 나는 깃허브에 블로그 작성하기로 했다. 앞으로의 글은 전부 깃허브 블로그가 완성 된 후 이전하도록 하겠다.

[sweetloper-blog]

변수 / 함수 이름 표기법

대표적으로 4가지 표기법이 있다.

> 카멜 표기법 : 처음 시작은 소문자로 시작하며, 여러 단어가 이어질 때는 각 단어의 앞글자를 대문자로 사용한다. 낙타의 등에 있는 혹과 같다고 하여 카멜(Camel) 표기법이라고 부른다. 예) superStar

> 파스칼 표기법 : 처음 시작을 대문자로 시작하며, 여러 단어가 이어질 때 각 단어의 앞글자를 대문자로 사용한다. 예) SuperStar

> 헝가리안 표기법 : 접두어에 자료형을 붙이는 방법으로 개발 툴(visual studio, eclipse, ... 등) 중에 예전에 나왔던 오래된 버전에서 자료형 구분이 어려웠을 때 많이 사용하였다. 요새는 개발 툴이 좋아져서 필요가 없어졌다. 예) strName

> 스네이크 표기법 : 단어와 단어 사이를 언더바로 넣어서 표기하는 방법이다. 예) super_start

여러가지 표기법이 있지만 각 언어별 특징에 따라 잘 조합하여 사용하면 된다.

나의 경우 C#의 경우 클래스와 함수를 파스칼 표기법으로 변수를 카멜 표기법으로 개발하였고, Java, javascript, python 의 경우 클래스만 파스칼 표기법, 함수와 변수는 카멜 표기법으로 개발하였다.

[sweetloper-blog]

URI, URL, URN

종종 URI와 URL를 헷갈려 하는 경우가 있다. 그래서 조사를 해봤다.

URL : Uniform Resource Locator(파일 식별자) 로 네트워크 상에 자원이 어딨는지 알려주기 위한 규약이다.

URI : Uniform Resource Identifier(통합 자원 식별자) 로 인터넷에 있는 자원을 나타내는 유일한 주소이다.

URN : Uniform Resource Name(통합 자원 이름) 로 자원의 이름 자체를 지시하는 것으로 영속성을 지닌다.

크게 보면 URI = URL + URN 이다.

URN은 접근 할 일이 드문 것 같고, URL과 URI를 구분해서 보자면 다음 예를 보면 알 수 있다.

예를 들어 home.com 이라는 도메인이 있고 해당 도메인에 test라는 폴더에 test.txt 라는 파일이 있다고 치면 사용자는 http://www.home.com/test/test.txt 로 접근할 것이다. 이는 URL이면서 URI이다. 해당 자원의 정확한 위치 정보를 포함 하고 있기 떄문이다. 그러나 최근 홈페이지 주소 역시 보안, 디자인, 유지보수 상으로 정확한 위치 정보를 포함 하지 않는 경우가 많다. 하여 http://www.home.com/test/test 로 접근 할 수 있는데 이는 test.txt에 똑같이 접근 할 수 있게 된다. 이 경우는 URL은 될 수 없으며, URI 이다. 왜냐하면 정확한 위치 정보를 포함하고 있지 않기 때문이다.

결론으로 URI가 제일 큰 의미이고, 정확한 자원의 위치가 아닐 경우는 URI로 보면 된다.

[sweetloper-blog]

전류, 전압, 저항 관계

이번에 컴퓨터를 이동하다가 멀티탭을 보면서 궁금한 점이 생겨서 찾아보았다.

예전에 대학교 다닐때 분명 배웠는데 딱히 신경을 쓰지 않아서 잊어버렸던 거 같다.

전압는 기호가 V(Volt), 단위는 V(볼트)

전류은 기호가 I(Current), 단위는 A(암페어)

저항은 기호가 R(Resistance), 단위는 Ω(옴)

옴(Ohm)의 법칙에 따라 전류의 세기(A) = 전압(V) / 전기 저항(Ω) 이라고 한다.

요즘 멀티탭에 멀티탭을 꽂아 문어발식으로 꽂는 경우가 많은데, 찾아 본 결과로는 이렇게 멀티탭에 멀티탭을 꽂아도 문제는 없다고 한다. 단 멀티탭에서 허용하는 용량을 벗어 날 경우 케이블에 과부하가 발생하고, 과열되어 합선 및 누전의 사고가 발생 할 수 있다고 한다.

전력 계산 공식 W(Watt) = V X A

그렇다면 멀티탭에서 허용하는 용량은 어떻게 계산하느냐?

멀티탭에 보면 정격 16A 250V~ 등의 표시가 있다. 전력 계산 방법에 따라 16 x 250 = 4000W 가 허용 범위 인 것이다. 허용 범위대로 사용하면 4000W 만큼 사용 할 수 있는 것이지만, 간혹 멀티탭에 주의 사항으로 사용 용량 권장 사항이 있는데 이를 따르는 게 좋다.

다른 복잡한 부분들이 많을 것이다. 하지만 내가 필요한 것은 하나의 멀티탭에 멀티탭을 연결하고 그렇게 나뉘어진 멀티탭을 이용하여 얼마만큼 전력을 사용 할 수 있는지가 궁금했다. 내가 찾아 본 결과로는 멀티탭에 멀티탭을 이어 사용한다고 허용 용량이 줄거나 하지는 않는다는 것이다. 결국 각 멀티탭에서 허용하는 용량을 넘어서 사용만 하지 않으면 멀티탭을 여러개 이어서 사용 해도 된다고 한다.

단, 찾다가 보니 멀티탭에 개별 차단 스위치가 있는 멀티탭이 있는데 이 멀티탭은 업체마다 다르지만 보통 5A ~ 10A 미만이라고 한다. 결국은 멀티탭 전체가 16A 이더라도 4000W 를 사용하는 전자기기를 꽂으면 문제가 된다는 것이다. 이 개별 스위치가 있는 멀티탭은 1구 당 5A라면 220V를 사용 시 1100W 이하의 전자기기를 꽂아야 하는 것이므로 잘 보고 사용 하여야 한다.

결론은 멀티탭에서 허용하는 용량을 잘 보고 꽂아 사용하여야 하며, 사용 용량이 높은 전자기기는 멀티탭이 아닌 벽 콘센트에 바로 꽂아 사용해야 한다.

[sweetloper-blog]

Git 저장소 복사

이번에 Git 서버를 이동하면서 사용한 방법을 설명하고자 한다.

bonobo git server 를 사용 중 해당 서버의 위치를 이동 할 일이 있어 bare repository 파일들만 복사를 해봤는데 git command가 일부 정상적으로 동작 하지 않아 원격 저장소를 clone 하여 이동한 bonobo git server에 push 하여 처리 하였다.

git 저장소 복사는 2단계로 진행하였다.

git clone --bare x.git

git push --mirror y.git

x.git은 기존 서버의 저장소이며, y.git 이동한 서버의 저장소이다.

설명을 간단히 하자면 x.git 저장소 자체를 복사 해와서 y.git 저장소에 매핑한다. 

 git 관련하여 간단하게 몇 가지 설명하면 아래와 같다.

git에는 bare-repository와 nonbare-repository가 있다.

bare-repository : 실제 프로젝트 코드가 아닌 이력과 변경 사항이 존재하는 원격 저장소 이다.

nonbare-repository : 실제 프로젝트 코드가 존재하는 로컬 저장소이다.

commit 등 자신의 변경 사항이 반영되는 곳이 로컬 저장소이고, 이를 push하면 원격 저장소에 반영된다.

그래서 사용자가 파일을 수정하여 원격 저장소까지 반영되는 과정을 보면 다음과 같다.

작업파일 -> 스테이지 영역(index) -> Local Storage -> Remote Storage

작업을 한 후 git add로 스테이지 영역에 반영하고, git commit으로 로컬 저장소에 반영 후 git push로 원격 저장소에 반영한다.

HEAD에 대해서는 여러 사이트를 봤지만 서로 설명이 달라 좀 더 정리 후에 작성 하도록 하겠다.  

[sweetloper-blog]

BEM

웹 프로그램을 개발하면서 어려웠던 부분 중 한 가지가 어떻게 코드를 좀 더 직관적으로 코딩하여 다른 사람들과 공유할 수 있을까 였다. 그 중 CSS의 Naming Convention을 정하고자 검색하던 중 여러가지 방법론이 있었다. OOCSS, SMACSS, BEM 등 그 중에 BEM이 가장 맘에 들었고 이를 개발하고 있는 웹 프로그램에 적용 중에 있다.

BEM은 Block, Element, Modifier의 약어로 Yandex 사람들이 고안해 낸 작명법이다. CSS 클래스들을 좀 더 투명하고 다른 개발자들에게 의미를 잘 전달 될 수 있도록 하기 위해 만들었다고 한다.

.block {} .block__element {} .block--modifier {}

사용법은 여러 사이트에서 친절히 잘 설명하고 있고, 나는 다음과 같이 적용하였다.

프로필 정보를 보여주는 화면에서 비공개 정보와 공개 정보가 있고, 이 중에 관리자는 비공개 정보를 좀 더 강조하였다.

.profile { border-style: dashed; } .profile__public { font-size: 11px; } .profile__private { font-size: 10px; } .profile__private--admin {color: red;}

여기서 Block, Element, Modifier를 설명하자면, profile이 Block이 되고, public, private이 Element, admin이 Modifier가 된다. 코드를 보면 알 수 있듯이 Element는 언더스코어(_) 2개, Modifier는 하이픈(-) 2개이다.

Element, Modifier에 언더스코어나 하이픈이 두 개인 이유는 블럭 이름 자체가 하이픈 구분자로 사용 될 수 있기 때문이라고 한다.

.site-search {} /* Block */ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */

BEM 방법론에서는 ID를 사용 할수 없고, 오직 클래스 명에만 활용 할 수 있다고 한다. 여러가지 방법론들이 여러가지 규칙들이 있겠지만, 모든 프로그램 개발들이 그런 규칙을 모두 지킨다고 생각지 않는다. 필요에 따라 규칙이 깨질 수도 있고, 다른 좋은 점을 가져와 사용 할 수도 있다고 본다. 각자 필요한 부분을 잘 사용하길 바란다.

[sweetloper-blog]

Web Crawler

유투브에서 방송을 보다가 Web Crawler(웹 크롤러)를 사용하는 것을 보고 궁금해서 찾아보았다.

Web Crawler라는 것이 무엇이냐? 위키에서 정의하기로는 조직적, 자동화된 방법으로 월드 와이드 웹을 탐색하는 컴퓨터 프로그램이라고 한다. 하는 일은 여러 웹 사이트에서 데이터를 수집하는 것 이라고 한다.

Web Crawler에는 Crawling, Scraping, Parsing 이라는 용어가 존재하며, Scraping 후 Parsing를 처리하는 과정을 Crawling이라고 한다.

Web Crawler가 결국은 여러 사이트에서 데이터를 수집하는 것인데, 네이버의 뉴스를 예로 들면 네이버로 부터 데이터를 요청하고, 받은 데이터 중 필요한 부분을 추출하여 해당 정보들을 저장하는 순서가 될 것이다.

그래서 이 과정을 정리하면 이렇게 볼 수 있다.

Scraping은 데이터를 어떻게 가져올 것인가?

Parsing은 데이터를 어떻게 추출 할 것인가?

이렇게 Crawling 과정을 알아 보았다.

Web Crawler가 사용되는 한가지 예를들면, 우리가 인터넷에서 어떤 제품의 최저가를 찾고자 할 때, 최저가를 알려주는 사이트에서 검색을 하게 되면 이 사이트는 여러 사이트에서 검색하여 찾은 최저가를 수집하여 정리하여 보여준다.

구현 방법에는 파이썬 또는 루비를 이용하여 구현 하는 방법이 많은 것 같다.

다음에 기회가 된다면 데이터를 수집해야 하는 사이트를 구현 할 때 Web Crawler를 적용해보고 싶다.

[sweetloper-blog]

SCM 선택

구글에 SCM를 검색하면 공급망 관리가 가장 먼저 나오는데 내가 이야기 하고자 하는 것은 공급망 관리가 아닌 소스 코드 관리(source cod management, SCM)를 말하고 자한다.

SCM은 흔히 소스 제어, 변경 관리, 버전 제어라고 한다. 소스 코드 관리를 위해 여러 소프트웨어를 사용하는데 그 중에 CVS, SVN, GIT 등 여러가지가 있다.

처음 회사에 들어가서 소스 관리를 위해 위 소프트웨어를 사용 해본 적이 없다. 개발한 소스들을 회사 서버에 관리 하였고, 개발 이력 관리를 위해 압축 파일 내에 version.txt 파일을 작성하여 날짜, 수정 내용, 수정자 등의 정보를 작성하여 해당 날짜로 압축하여 관리하였다. 나는 아직 이렇게 하는 회사가 있을 거라 생각하며 틀렸다고 생각하지는 않지만 효율적이지 못하다고 생각한다. 그리고 제일 중요한 한 가지 나는 다시는 해당 방법으로 소스 관리를 하지 않을 것이다.

그 뒤에 SVN을 사용한 후 GIT을 사용하여 소스 관리를 하였다. SVN 이나 GIT에 대한 사용법은 인터넷에 무수히 많고, 해당 정보들로 사용법을 배웠다. 두 가지 소프트웨어를 사용 해 본 결과 GIT을 추천한다.

여러 브랜치를 생성하고 관리 할 때나 소스 병합 할 때나 여러면에서 좋다고 생각한다. 그리고 GitHub 같은 전세계적으로 프로젝트 협업을 지원하는 웹 호스팅 서비스도 있다. 

나는 GIT를 사용 할 때 좀 더 쉽게 쓸 수 있게 GUI로 제공하는 SourceTree를 사용하였다. 

위 이미지는 SourceTree를 실행하면 나오는 화면이다. 한글로도 되어 있고, 무료이기 때문에 사용하고 있다. 해당 소프트웨어를 쓰기전에는 TortoiseGit를 사용하였는데 SourceTree를 쓰면서 신세계 같았다. 

협업을 위해 Git Server로는 Bonobo Git Server를 사용하였고, 소스 충돌이 발생 하였을 때는 KDiff3 를 이용하여 해결하였다.

[sweetloper-blog]

관심사

지금까지는 C, C++, C#, Java, Python 등의 언어로 프로젝트를 진행 하였습니다.

현재는 웹 프로그램 개발를 진행 중에 있고, 그 중 프론트 엔드 개발을 하고 있습니다. 웹 프로그램 개발을 시작한지 몇 개월이 되지 않아 많은 부분에서 부족하여 계속 공부하고 있습니다.

이전 프로젝트에서 프론트 엔드 개발만 하였기에 이번에는 백 엔드 개발도 하고자 합니다. 

전체적인 관심사를 Word Cloud로 만들어 보았습니다.

https://www.wordclouds.com/  사이트에서 Word Cloud 를 만들었습니다.

간략히 설명하자만 아래와 같습니다.

React.js, Angular2 의 경우 이전 프로젝트에서 사용하였고, 앞으로 진행 할 프로젝트는 Vue.js 2.0 를 사용하여 개발하고자 합니다.

백 엔드 개발을 위해 Node.js, Mongoose를 사용할 예정이고 Express, Hapi, Koa 중 하나의 프레임워크를 사용할 예정입니다.

[sweetloper-blog]

블로그 시작

안녕하세요

지금까지 개발을 해오면서 나만의 블로그 하나 없다는 게 아쉬웠고,

다른 사람들과 지식을 공유하고 싶어서 블로그를 시작하게 되었습니다.

한 단계 한 단계 성장 할 수 있게 잘못된 부분은 개선 할 수 있게 알려주세요.

잘 부탁드립니다.