반응형

분류 전체보기 103

[JavaScript] Array.find()

Array의 find 메서드에 대해 알아보겠습니다. 메서드의 이름처럼 특성 요소를 찾을때 사용합니다. 기본 구조는 아래와 같습니다. Array.find(callback[, thisArg]) callback 함수와 callback의 this로 사용할 객체를 받습니다. thisArg는 생략 가능합니다. callback 함수는 아래와 같은 매개변수를 받습니다. - element: callback 함수에서 처리할 현재 요소. - index: callback 함수에서 처리할 현재 요소의 인덱스. - array: find 메서드를 호출한 배열 find 함수는 간단합니다. 배열의 모든 요소를 순회하며 callback 함수를 호출합니다. 만약 callback 함수가 true를 반환하게 되면 순회를 멈추고 true를 반..

JavaScript 2020.06.05

[JavaScript] Array.reduce()

기본 구조는 아래와 같습니다. Array.reduce(callback[, initialValue]) callback 함수와 initailValue 매개변수를 받습니다. initialValue는 생략가능하며, 생략한다면 배열의 첫번째 값으로 초기화 됩니다. 이러한 규칙으로 인하여 initialValue를 제공하지 않는다면 첫번째 배열 값을 건너뛰어 실행되고, initialValue를 제공하면 첫번째 배열 값도 포함하여 실행됩니다. 아래는 실제로 테스트해본 결과입니다. callback함수는 네 개의 매개변수를 갖습니다. accumulator: reduce 매서드의 핵심입니다. 번역하면 누산기 정도로 말할 수 있습니다. 콜백의 반환값을 누적합니다. current value: 처리할 현재 요소의 값입니다. cu..

JavaScript 2020.06.03

[Git-TF] Clone

현재 다니고 있는 회사에서는 소스 코드 관리 시스템으로 TFS(Team Foundation Server)를 사용하고 있습니다. 요즘엔 git이 대세라고는하지만, 오래전부터 사용하고 있는 소스 관리 시스템이고 소스관리뿐만 아니라 버그, 이슈, 결함등 솔루션에 대한 전반적인 관리 기능까지 포함하고 있어 쉽게 git으로 옮길 것 같진 않습니다. 그래서 저는 TFS 환경에서 git을 사용할 수 있는 git tf를 사용해보고 있습니다. git tf는 아래 링크에서 다운받을 수 있습니다. Git-TF Git-TF is a set of cross-platform, command line tools that facilitate sharing of changes between TFS and Git. www.microso..

Tool 2020.05.28

[JavaScript] 이벤트 생성 및 트리거 하기

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

JavaScript 2020.05.25

[HTML/CSS] OS 상관없이 같은 모양 버튼 만들기

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 */ ..

HTML&CSS 2020.05.08

코드리뷰에 관한 정리

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

Thinking 2020.04.29

Waterfall X Sprint 회고

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

Thinking 2020.04.28

GPD Pocket 1세대 모델 실제 개발 업무 후기

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

Thinking 2020.04.27

[JavaScript] IE에서 Event.path / Event.composed 사용을 위한 Polyfill

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..

JavaScript 2020.04.27
반응형