Hello Jay's Programming World!

오늘은 이벤트 생성하여 트리거 하는 방법에 대해 알아보도록 하겠습니다. 일반적으로 이벤트는 브라우저가 알아서 처리를 해주는 구조입니다. 예를 들어, 개발자가 Div에 Click 이벤트를 추가했다면, 브라우저가 해당 Div가 Click 된 것을 감지하여 Click 이벤트 핸들러를 호출해주는 구조입니다. 그렇다면, 실제로 Click이 발생하지 않았지만, 이벤트 핸들러를 호출하고 싶다면 어떻게 해야할까요? 그 방법에 대해 알아보겠습니다. 제가 JSFiddle을 이용해 샘플을 만들어보았습니다. Div와 Button이 하나씩 있습니다. Div에는 Click 이벤트를 등록해 놓았고, Div가 Click되면 'Clicked Div!'라는 메세지를 포함한 Alert창이 출력됩니다. Button에는 onclick으로 o..

HTML에 버튼을 생성하면 OS 환경에 따라 다른 모양의 버튼이 만들어집니다. 왼쪽 버튼은 button 태그를 이용하였고, 오른쪽 버튼은 input 태그를 이용하여 만들었습니다. 같은 태그를 사용해서 만들었는데, 아래와 같이 OS에 따라 다른 것을 확인할 수 있습니다. MacOS Windows iOS Android 그럼 같은 모양으로 만들기 위해 CSS를 사용해보도록 하겠습니다. 먼저 같은 모양으로 만들기 위해 appearance: none CSS를 이용했습니다. Firefox와 Safari 그리고 Chrome에서도 동작하도록 했습니다. 아래와 같이요. -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ ..

코드리뷰란?한 명 또는 여러 명의 개발자가 본인이 만들지 않은 코드의 내용을 점검하고, 피드백을 주는 과정. 단순히 문제를 파악하는데 그치지 않고 코드에 대한 책임이 그 코드를 만든 사람 혼자에게 있지 않고 우리 모두에게 있다는 문화는 만드는데 있다. 왜 해야할까?소프트웨어의 품질 유지개발자의 작업 내용을 이해다른 사람의 잘 만들어진 소스를 보면서 배울 기회를 얻음.누구에게 리뷰를 부탁해야할까?Senior내 코드를 점검 및 피드백 받을 수 있는 기회.JuniorSenior의 코드를 리뷰하면서 배울 기회를 얻음. 언제 해야할까?실리콘 밸리의 큰 회사들(구글, 페이스북)은 코드리뷰 요청이 오면 업무의 최우선순위로 조정되어 즉시 응답하도록 하는 것이 원칙이라고 함.토스팀의 경우, [월 ~ 수]: 기존 개발 업..

제가 근무하는 회사는 전통적인 Waterfall 방식의 개발을 하고 있습니다. 요구사항 - 설계 - 구현 - 테스트 PM(Project Manager)이 요구사항을 정의하고 개발자는 요구사항을 바탕으로 설계와 구현을 합니다. 구현이 마무리되면 테스터는 요구사항에 맞게 구현이 제대로 되었는지 테스트를 합니다. 이러한 전통적인 Waterfall 방식은 몇 가지 단점이 있습니다. 제가 실제 업무에서 느낀 단점은 크게 두 가지입니다. 첫 째, PM이 생각한 결과물과 실제 결과물이 다른 문제. 구현 막바지에 실제 결과물을 확인하면 PM이 초기에 생각한 결과물과 비슷하지만 다른 결과물이 나올 때가 있습니다. 아무리 요구사항 리뷰와 설계 리뷰를 한다고 해도 한 사람이 ‘요구사항-설계-구현-테스트’ 모든 부분을 담당하..

오늘은 GPD Pocket의 실제 업무에서의 사용후기를 적어보려고 합니다. 사실 GPD Pocket을 실 업무용으로 구입하시는 분은 없겠지만, 이 글을 통해 어느정도 GPD Pocket의 성능을 알 수 있으면 좋을 것 같습니다. 원래 저도 GPD Pocket으로 개발을 하지 않았습니다. GPD Pocket의 경우, 이동성은 좋지만 화면은 작고 해상도가 높기 때문에 장시간 사용시 쉽게 눈이 피로해지는 느낌을 받게 됩니다. 그래서 간단한 작업 위주로 사용을 하고 있습니다. 특히, 회사 업무는 회사에서 지급받은 맥북을 이용해서 하고 있었습니다. 그러다 급하게 C#으로 윈도우 프로그램을 개발해야하는 상황이 생겼고, 맥북은 맥북답게 쓰고 싶어 GPD Pocket을 이용한 개발에 도전하게 되었습니다. 먼저 개발 환..

Event.composedPath는 이벤트의 Path를 반환해줍니다. 그래서 이벤트가 어떤 흐름으로 도달했는지 알 수 있습니다. caniuse.com에서 검색해보면 알 수 있지만, Event.composedPath() API는 IE에서 사용할 수 없습니다. https://caniuse.com/#search=composedPath Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is..

마우스 이벤트를 이용하여 개발을 하다보면 마우스 왼쪽 클릭인지 오른쪽 클릭인지 구분해서 개발해야할 때가 있습니다. 일반적으로 mousedown 이벤트를 추가하면 왼쪽 클릭을 해도 호출되고 오른쪽 클릭을 해도 호출이 되기 때문입니다. 오른쪽 클릭의 경우엔 mousedown 이벤트도 호출되고 메뉴바까지 나오게 됩니다.그렇다면, 마우스 왼쪽 클릭인지 오른쪽 클릭인지 판단하기 위해서는 어떻게 해야할까요? 아래 JSFiddle 샘플을 준비했습니다. 빨간색 Div를 왼쪽 마우스로 클릭하면 "Right mouse button was not clicked" 라는 alert이 뜨고 오른쪽 마우스로 클릭하면 "Right mouse button clicked" 라는 alert 창이 뜨는 것을 확인할 수 있습니다. mouse..

JavaScript은 여러가지 특징을 가지고 있는 언어이지만 그 중 하나를 말하라고 하면 함수가 일급(first-class)객체라는 것이 아닐까 생각합니다. 함수가 일급 객체로 취급 받아 변수에 대입하거나 매개변수로 전달할 수 있습니다. 그리고 JavaScript의 경우 var 키워드를 이용하여 변수를 선언하는데, 이 var 키워드로 생성된 변수는 타입에 상관없이 대입이 가능합니다. 아래 소스를 보면 a라는 변수는 처음에는 정수형으로 선언되었는데, 문자열로 대입되었다가 함수로 대입되었다가 실수로 대입되었다가 객체로 그리고 배열로 대입되며 그때 그때 다른 type 변수로 사용되고 있습니다. var a = 1; a = 'string'; a = function() { console.log('Function')..

VSCode로 개발을 할 때 라인 번호를 이용하여 라인으로 이동하는 단축키 입니다. Ctrl + g

배열에 데이터를 넣다보면 정렬이 필요할 때가 있습니다. JavaScript에서는 편리하게 정렬할 수 있도록 정렬 매서드를 지원합니다. JavaScript가 제공하는 sort 매서드를 한 번 사용해볼까요? 아래 배열에 sort 매서드를 사용해보도록 하겠습니다. var array = [1, 3, 10, 100, 2]; array.sort(); 결과는 어떨까요? JSFiddle을 이용해서 확인해보겠습니다. 결과는 어떤가요? OriginalArray: 1,3,10,100,2 SortedArray: 1,10,100,2,3 1, 2, 3, 10, 100으로 정렬될 줄 알았는데, 1, 10, 100, 2, 3으로 정렬이 되는 것을 확인할 수 있습니다. Array의 Sort 매서드는 기본적으로 유니코드 코드 포인트를 ..