삼바의 성장 블로그

여러 소스코드를 보다보면 변수를 네이밍하는 규칙이 각각 다른 것을 보실 수 있을겁니다. 아니면 혹은 "자바 클래스는 파스칼케이스로 작성해야지"라는 말을 들어보실 수도 있을 겁니다. 대표적인 네이밍 컨벤션을 알아봅시다. camelCase 주로 암묵적으로 camelCase 라고하면 단봉낙타 표기법(lowerCamelCase)을 이야기합니다. 각 단어의 첫문자를 대문자로 표기하지만, 변수의 첫 문자는 소문자로 적습니다. ex. className , backgroundColor PascalCase PascalCase 는 쌍봉낙타 표기법(UpperCamelCase)를 이야기합니다. 전체 변수의 첫 문자를 대문자로 표기하며, 각 단어의 첫문자 또한 대문자로 표기합니다. ex. EgovProgramManage , D..

스크립트단에서 에러를 찾거나 해결할 수 있도록 현대 브라우저들에서는 개발자 도구를 지원합니다. 그 중 크롬 개발자 도구를 어떻게 사용할 수 있는지 간단히 알아보고자 합니다. 실행방법 개발자 도구를 실행하는 방법은 주로 두 가지가 있습니다. 단축키 크롬 개발자 도구를 실행하는 단축키는 다음과 같습니다. (오토핫키를 쓰면 더 쉽습...) F12 Ctrl + Shift + i 메뉴를 통한 접근 크롬창 우측 상단의 Chrome 맞춤설정 및 제어 버튼을 누릅니다. 도구 더보기 > 개발자 도구 를 클릭합니다. Elements 브라우저에 렌더링된 DOM과 CSS를 조작할 수 있습니다. 좌측의 DOM 노드영역에서 DOM을 추가하거나 제거할 수 있으며, 우측 Styles 영역에서 실시간으로 스타일(css)에 대한 편집이..

국가공간정보포털에서 공간정보 데이터를 다운로드 받아 사용할 때, 좌표계가 맞지 않아 이격이 생기는 경우가 있습니다. 이를 해결하는 방법에 대해 알아보고자 합니다. 좌표계 현재 국토지리정보원의 공식 좌표계변환 관련 고시는 2003년 12월에 고시(제2003-497호)한 "국가좌표계수 고시"이지만, 이 고시에 나온 값들은 10개의 변수를 사용하는 Molodensky-Badekas모델을 위한 것으로 오픈소스들(Proj4 기반)에서 사용되는 Bursa-Wolf 모델(7개의 변수를 기준으로 함)에는 사용할 수 없어 2002년 고시된 값(제2002-433호)을 기준으로 변환하고 있습니다. 오래된 지리원 표준 * 보정된 서부원점(Bessel) - KLIS에서 서부지역에 사용중 EPSG:5173 +proj=tmerc ..

2019 회고록 철학과 출신 개발자인 삼바에게 개발 2년차인 2019년이 얼마나 빛나는 해였는지 그리고 스스로 얼마나 노력했던 한해였는지 회고록을 적어봅니다. 철학과 아마 철학과 출신이라는 타이틀이 개발 실력을 떠나서 이력서만 봤을 때, 가장 눈에띄는 글자일 것이고, 이에따라 이력서를 쳐다보지도 않고 우리는 철학과사람은 뽑을 생각이 없다는 답변까지 받아봤었습니다. 철학과 출신이라는 것이 개발을 하는데 큰 강점이 된다는 것을 증명해보이려 했습니다. 뭐가 차이일까? 2년차 개발자가 되면서 잘한다는 칭찬을 받기도 하고, 새로운 기술에 대한 관심또한 많아졌지만, 가슴아프게도 저에게 각인된 이야기는 "너는 당장은 잘할지 몰라도 안돼"라는 이야기였습니다. 저는 이러한 편견을 지금까지 공부한 것을 바탕으로 이겨내보려..

What is the difference between an element and a component in React?React에서 Element와 Component의 차이는 무엇입니까? 나의 답변Element는 React내에서 DOM node를 가리키는데 사용하곤 합니다.React내에서 Component는 function혹은 class이며, state를 가지고 있습니다. 추가학습ElementsElements는 React Application을 구성하는 블럭과 같습니다. Element는 immutable 하며, 우리가 화면에서 보게되는 것을 이야기합니다.Element는 바로 사용되지는 않으며, Component에서 리턴받아서 사용되곤 합니다.​xconst element = Hello, World!;Co..

What is the difference between the equality operators == and ===?동등연산자 ==와 ===의 차이는 무엇입니까? 나의 답변JS에서 ==와 ===의 차이점은 ===은 비교대상의 자료형(type)까지 비교한다는 점입니다. 추가 학습내용ECMAScript 표준에서는 7개의 자료형을 정의한다.BooleanNullUndefinedNumberStringSymbolObject ==와 ===의 차이점이 type까지 검사한다고 할 때, 쉽게 생각할 수 있는 오류는 기본타입(Primitive values)외의 타입에서 일어나기 쉽다.xvar a = [1, 2, 3]var b = [1, 2, 3]​console.log(a === b)// falseObject의 경우 생성할 ..

Openlayers Animation MarkeraddPulseIcon애니메이션 마커를 추가하는 함수를 addPulseIcon이라 명명하였습니다.function addPulseIcon(feature) { const duration = 3000 var start = +new Date() var listenerKey function animate(evt) { var vectorContext = evt.vectorContext var frameState = evt.frameState var flashGeom = feature.getGeometry().clone() var elapsed = frameState.time - start var elapsedRatio = elapsed / duration // 5 ~..

What are the advantages of using CSS preprocessors?CSS 전처리기를 사용할 때, 장점은 무엇입니까? 나의 답변CSS를 작성 할 때, 프로그래밍적 요소(변수, 함수, 상속)을 사용하여 도움을 주는 도구입니다. 추가 학습내용CSS preprocessor은 CSS를 좀더 촘촘하고 DRY 방법론에맞추어 개발할 수 있게 합니다.CSS preprocessor를 사용하여 유지보수가 쉽고 확장에 용이한 CSS를 만들 수 있게 됩니다. CSS preprocessor 장점재사용성: 공통 요소 혹은 반복적인 항목을 변수, 함수로 대체 가능합니다.시간적 비용 감소: 임의 함수 및 Built-in 함수로 인해 개발 시간적 비용을 절약할 수 있습니다.유지 관리: 중첩, 상속과 같은 요소로..

What is the purpose of cache busting and how can you achieve it?Cache busting의 목적은 무엇이고 어떻게 적용할 수 있습니까? 나의 답변브라우저에서 Cache를 남겨 변경하지 않은 소스에 대하여 다시 가져오지 않기 때문에 개발 중 코드를 변경하더라도 이가 적용되지 않는 경우가 있는데 이 때, 기존의 Cache를 없애고 변경한 코드를 반영하기 위한 행위를 Cache busting이라 한다.Cache busting을 위해서는 크롬의 개발자 도구를 활용하여 캐시 비우기 및 강력 새로고침을 하거나 수정되어야할 파일 이름에 버전정보를 넣는다. 추가 학습내용Cache busting은 방문자가 자주 수정되는 파일을 사용하는 경우 유용하다.Cache busti..

What is CSS BEM?CSS BEM은 무엇입니까? 나의 답변BEM(Block Element Modifier)은 CSS 아키텍쳐로 클래스명을 .block__element--modifier와 같은 형식으로 나타냅니다. 추가 학습내용CSS-in-JS의 scope문제를 해결하기 위한 대체 해결책다양한 CSS 구조를 개선시키기 위한 CSS 개발 방법론 예시Block문단 전체에 적용된 요소 혹은 요소를 담고 있는 컨테이너를 말합니다.Block의 이름은 그 블록의 목적으로 기술되어야 하며, 그 Block의 상태를 나타내지 않습니다.Block은 자신의 환경에 영향을 끼쳐서는 안됩니다. (Block의 positioning이나 margin 값과 같은 외부 기하학적 요소를 설정해서는 안됩니다.) → Block의 재사..