IT정보뉴스

개발자가 입사 첫날 버그를 고칠 수 있어야 하는 이유

개발자가 입사 첫날 버그를 고칠 수 있어야 하는 이유회사에 새로운 직원들이 입사하면 업무를 가르치느라고 많은 노력이 들어간다. 특히 지식 산업인 소프트웨어 분야는 새로운 개발자가 입사를 하면 알려줘야 하는 것이 매우 많다. 회사마다 다르지만 신규 입사한 개발자가 개발에 투입되는 데는 짧게는 일주일부터 길게는 6개월까지 걸린다. 6개월은 내가 인터뷰 한 회사 중에 있었다. 알아야 할 지식과 법규가 많아서 6개월은 공부를 해야 개발에 투입된다고 한다.그러다 보니 입사 후 빨리 업무에 투입될 수 있는 동일직종 경력자를 선호하곤 한다. 이런 회사가 많을수록 개발자들은 이직 시 선택의 폭이 좁아지게 된다. 개발자들이 주로 같은 분야로만 옮겨 다니다 보니 이직도 어렵고 업계간 개발자 순환이 잘 안 된다.여기 가상의 A, B, C, D 회사가 있다.A사는 김부장이 개발 전반의 내용을 다 꿰뚫고 있어서 신규 개발자가 입사하면 김부장이 1주일 정도 교육을 해줘야 한다. 김부장은 다른 어떤 직원보다 개발 내용을 많이 알고 있어서 웬만한 이슈는 다 김부장을 통해야 해결이 된다. 개발자가 입사를 할 때마다 김부장이 교육을 하기 때문에 개발자들이 김부장에게 많이 의존하고 김부장은 회사의 경영진에게도 신망이 두텁다.B사는 개발자 입사 시 개발에 필요한 기본적인 제품에 대한 지식이나 기술을 교육 시키기 위해서 선배들이 돌아가면서 며칠 동안 교육을 해야 한다. 물론 교육을 받자마자 신규 개발자들이 개발을 제대로 하지는 못한다. 사수에게 꾸준히 개발 내용을 전수 받아야 한다.C사에서는 업무를 잘 알지 못하면 개발을 하기 어렵기 때문에 업무를 모두 파악하는데 6개월 이상이 걸리고 그때까지는 신규 개발자는 허드렛일 밖에 못한다. 고참이 10분이면 할 수 있는 일을 신규 개발자는 몇 시간이 걸리고 잘못될 위험성도 높아서 신규 개발자에게는 일을 제대로 시키지 못한다. 그러다 보니 신규 개발자가 많이 입사를 해도 고참들은 여전히 바쁘다.D사에서는 고참들이 기존 제품의 유지보수에 매달려 있어서 신규 개발자에게 업무를 제대로 전달하지 못한다. 그러다 보니 신규 프로젝트는 신규 개발자들이 담당하게 되었고 기존의 개발자들은 여전히 유지보수에 매달리고 있다.A~D사 모두 신규 개발자가 입사하마자 스스로 일할 수 있는 체계를 갖추고 있지 못하고 있다. 이런 구조의 회사는 작은 규모였을 때는 문제가 안보이지만 회사가 커질수록 문제가 급속도로 드러나서 개발 효율은 바닥을 치게 된다. 이런 회사에서는 기존의 고참 개발자들은 신규 개발자들의 무능함과 열정 부족을 탓하게 되고 신규 개발자들은 정보 공유 부족으로 개발하기 어려운 환경을 탓하게 된다.필자는 여러 회사에서 강연이나 세미나를 할 때 신규 개발자가 입사 후 개발에 투입되어서 버그를 고치는데 시간이 얼마나 걸리는지 물어본다. 그리고 그 과정에서 고참 개발자들이 얼마나 업무를 가르쳐 주기 위해서 시간을 투자해야 하는지 물어본다. 이 질문에 대한 대답을 통해서 그 회사의 개발체계와 개발 문화의 성숙함을 알 수 있다. 대부분의 회사가 일주일 이상 걸리고 몇 달까지 걸리는 회사도 있었다. 또한 많은 회사들이 사수/부사수 제도를 이용하여 고참들이 많은 시간을 투자하여 가르쳐주고 있다.내가 생각하는 가장 이상적인 답변은 고참 개발자들의 시간은 거의 투자하지 않고 신규 입사 개발자가 입사 첫날 또는 둘째 날까지 스스로 버그를 고치는 것이다. 고참들은 코드 리뷰를 해주는 정도면 충분하다. 이렇게 할 수 있는 회사는 자세히 물어보지 않아도 성숙한 개발 체계와 개발 문화를 갖추고 있다는 것을 알 수 있다. 불행히도 필자가 접한 우리나라의 수십 개의 회사 중에서 그런 회사는 없었다.미국에 취업을 해본 개발자들은 알겠지만, 개발자가 입사했을 때 선배들이 뭘 자세히 가르쳐주는 회사는 많지 않다. 이슈를 할당해주면 알아서 고쳐야 하고 개발 프로세스대로 코드 리뷰 등을 진행할 뿐이다. 물어보면 가르쳐주기는 하는데 먼저 나서서 가르쳐 주는 경우는 별로 없다. 회사는 학교가 아니기 때문이다.필자가 CEO로 있는 이우소프트에서도 신규 개발자에게는 이슈를 그냥 할당해주고 개발자는 하루 이틀 안에 이슈를 해결하고 코드리뷰를 진행한다. 물론 여기에 약간의 문제가 있다. 이제부터 어떻게 해야 이렇게 할 수 있고 문제가 무엇인지 얘기를 해보고자 한다. 그럼 시간 순서대로 따라가보자.-2주일 전 - 신규 개발자용 개발 PC를 준비한다.-1주일 전 - 신규 개발자가 입사하기 며칠 전에 PM이 미리 신규 개발자가 해결할 수 있을만한 쉬운 버그 몇 개를 할당 해 놓는다.-3일 전 - 신규 개발자용 개발 PC에 개발환경을 구축한다. 이미지 백업 받아 놓은 것을 이용해서 한번에 구축한다-입사 당일 9시 - PM이 개발자에게 이슈관리시스템 URL을 알려주고, 신규 입사자들이 봐야 하는 가이드가 적혀 있는 사이트 URL을 알려준다. (Wiki 등)-10시 - 가이드대로 소스코드관리시스템에서 소스코드를 내려 받아서 Build script를 이용해서 Full build를 수행한다.-11시 - Build가 진행되는 동안 PM이 알려준 이슈관리시스템의 URL에 접속해서 내가 할당 받은 버그(이슈)를 확인한다. 첫 번째로 고칠 버그를 선택한다-12시 - 식사-13시 - 개발 프로세스 문서를 통해서 기본적인 개발 프로세스를 확인한다.-14시 - 첫 번째 버그를 고친다. 첫 번째 버그는 간단한 버그라서 스펙/설계 문서 도움 없이 고칠 수 있다.-15시 - 소스코드를 commit하고 코드리뷰를 등록한다. 회사에 따라서 코드리뷰를 종료하고 commit하는 회사도 있다.-16시 - 리뷰어가 코드리뷰를 진행하고 Confirm을 한다.-17시 - 해당 버그 이슈가 close 된다.-이제 좀더 빠른 속도로 다른 버그들을 고쳐나간다.-개발자의 역량을 확인하고 좀더 어려운 버그와 신규 기능을 할당한다.이렇게 진행하기 위해서는 몇 가지 전제조건이 있다.-개발 시스템이 제대로 구축되어 있어야 한다. 이슈관리, 소스코드관리, 빌드 등이 잘 시스템화 되어 있어야 한다.-스펙, 설계, 개발 가이드, 개발 프로세스 등의 개발 정보가 Doc, Wiki, Issue 등에 문서로 충분히 기록되어 있어야 한다.-신규 입사자가 이와 같은 개발환경에 익숙해서 입사하자 마자 일을 할 수 있어야 한다.하지만 현실적으로 마지막 조건에 문제가 발생한다. 대학에서 소프트웨어를 전공한 개발자도 이슈관리시스템을 한번도 써보지 못하고 입사를 하는 경우가 대부분이다. 기껏해야 Subversion이나 Git의 기본기능을 써본 것이 개발 시스템을 써본 것의 전부인 경우가 많다. 그래서 회사에서 아무리 준비가 잘 되어 있다고 하더라도 입사 첫날 버그를 고치기는 어렵다. 그래서 기본적인 개발 프로세스와 개발 시스템에 대한 교육을 먼저 시키고 진행을 해야 한다. 이 때문에 하루, 이틀 지연이 될 뿐이지 그 이후에 개발을 하는 것은 별 문제가 없다.이런 환경에 개발을 한다면 본인도 자연스럽게 공유를 중심으로 한 개발 문화를 자연스럽게 익히고 대부분의 지식과 경험은 선배들이 남겨놓은 문서를 통해서 습득하게 된다. 그래서 선배 개발자들은 신규 개발자가 입사를 하면 시간을 더 빼앗기는 것이 아니라 귀찮았던 일을 덜어주게 되고 선배 개발자들은 더 어려운 일을 하게 되고 새로운 일을 할 수 있다. 물론 문서로 모든 지식이 공유되는 것은 아니고 선배에게 물어봐야 하는 시간이 상당히 줄어드는 것이다. 공유를 하고 후배 개발자들이 일을 하기 쉽게 만들어 놓는 것은 바로 자신이 앞으로 나아갈 수 있게 만드는 것과 같다.신입 개발자가 입사를 하면 아무 것도 가르쳐주지 말고 버그만 달랑 할당해보자. 그리고 무슨 일이 벌어지는지 보자. 선배를 귀찮게 하지 않고 스스로 첫날 버그를 해결하면 문제가 없는 것이고 2,3일 넘어가도 버그를 못 고치면 뭔가 문제가 있는 상황이다. 어떠한 문제 때문에 신입 개발자가 버그를 고치지 못하는지 잘 분석해보자. 거기에 회사의 만들어 나가야 할 개발체계, 개발문화가 있다.

최근 등록된 자바스크립트 소스

사진 설명
사진

TinyMCE Plugin - 이모티콘

tinymce에디터의 기본 이모티콘 플러그인이 너무 부실해서 하나 만들었습니다. pr_emoticons.zip  tinymce에디터의 플러그인 폴더 아래에 압축을 풀어 주시면 됩니다.제가 배포한 TinyMCE 에디터를 기준으로 설치 위치를 말씀드리면 아래의 위치입니다.modules/editor/skins/tinymce/js/tinymce/plugins/pr_emoticons 그 후 에디터 설정(editor.html)중 플러그인에 pr_emoticons를 추가하시고 툴바에도 pr_emoticons를 추가 해 주시면 됩니다. 기본 이모티콘 플러그인 아이콘과 동일한 아이콘을 사용합니다. 사용시 약간의 수고가 필요합니다. 메뉴탭에 사용할 이미지를 만들어야 하기 때문입니다. 폴더 설명img: 사용할 이모티콘을 넣는 폴더 입니다. 추가할 이모티콘이 있다면 폴더째 붙여넣기 하시면 됩니다. 지원하는 이미지 형식은 jpg, gif, png입니다.tab: 모달창에서 사용할 메뉴탭을 넣는 폴더입니다. 이미지 형식은 png, 35*35이하로 작업 하시면 됩니다. 예) 현재 img폴더 아래에는 기본 이모티콘이 있으며 onion폴더 아래에는 또다른 이모티콘 모음이 있습니다.그러므로 tab폴더에는 img_on.png, img_off.png, onion_on.png, onion_off.png가 있어야 합니다. 만약 img폴더 아래에 town폴더를 만들고 그 안에 이모티콘을 추가 한다면 tab폴더에 town_on.png, town_off.png를 작업해서 넣어주셔야 합니다. 

사진

FileManager4 TinyMCE v.6.2.0 - 파일 매니저 탐색기

http://test.albertoperipolli.com/filemanager4tinymce/NEW VERSION 9 RELEASED IN NEW SITE WWW.RESPONSIVEFILEMANAGER.COMThanks to all for suggestionsTHIS SITE IS NO LONGER FOLLOWEDFileManager4TinyMCE is a free open-source filemanager plugin for TinyMCE 4. It's possible to insert into tinymce textarea files link, images and videos from a server folder and upload from your computer.Now you can use also as normal filemanager, you can manage and select files.You can set a subfolder as root and change the configuration for every user, page or filemanager call. - See more at: http://test.albertoperipolli.com/filemanager4tinymce/#sthash.zNKkhfNk.dpufDownload link: http://github.com/2b3ez/FileManager4TinyMCE/archive/master.zipGithub repository: http://github.com/2b3ez/FileManager4TinyMCE If you like my work click on banners or give me a coffee INSTRUCTION********************************************************* ! FileManager for TinyMCE Version 6.2.0 ********************************************************* FileManager for TinyMCE is a tool make with jQuery library that offers a nice and elegant way to upload and insert files, images and videos with tinyMCE v.4.x. Now you can use also as normal filemanager, you can manage and select files. The script automatically create a thumbs of images for preview list. You can config if you want an automatic resizing of uploaded images. You can set a subfolder as root and change the configuration for every user, page or filemanager call. NEWS Version 6.2.0 - Improve quality of images resizing using PHP Image Magician Version 6.1.1 - Automatic compatibility with popup by pass the popup GET variable Version 6.1.0 - Compatibility with Internet Explorer and old browser - Fix delete bug - Improve security Version 6.0.1 - Improve Responsive design Version 6.0.0 - New amazing flat interface - Possibility to set subfolder as root - Ajax files and folders cancellation - Improve speed, code structure and image size optimization - If image is smaller than thumbnail the file manager show the image centered - TinyMCE link_list now is supported and plugin.min.js files aren't minimized [thanks to Pål Schroeder] - Fix bug in file selection on subfolder and Other bug fix - Mobile version with swipe event to show options DEMO: http://test.albertoperipolli.com/filemanager4tinymce/ Released under MIT license Creator : info@albertoperipolli.com - tr1pp0 Creator until version 1: mybeeez@gmail.com - b3ez ********************************************************* ! Installation ********************************************************* 1. Upload each folder plugins (images, link, media and filemanager) to tinymce plugins folder (lang file is optional) 2. open filemanager/config.php and set your configurations like base_url, upload_dir, type extensions allowed , max file size, permits… and other specifications. save file. 3. create folder where upload files and give write permits. 4. your work is finish!!! settings of tinymce should be like : (remember to add filemanager in plugins list) selector: "textarea", theme: "modern", width: 680, height: 300, subfolder:"", plugins: [ "advlist autolink link image lists charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code insertdatetime media nonbreaking", "table contextmenu directionality emoticons paste textcolor filemanager" ], image_advtab: true, toolbar: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect forecolor backcolor | link unlink anchor | image media | print preview code" }); P.S.: If you not view the preview images remember to set the thumbs folder in plugin/filemanager/thumbs with write permits. If you update from previous version delete the contents of thumbs folder. USING AS STAND-ALONE FILEMANAGER You can use normal popup, bootstrap modal, fancybox iframe , lightbox iframe to open the filemanager with this paths: Only open filemanager(type=0 and not set field_id): path to filemanager../filemanager/dialog.php?type=0&editor=mce_0&lang=eng&fldr= Select Image: (type=1 and set id of input text in field_id variable): path to filemanager../filemanager/dialog.php?type=1&editor=mce_0&lang=eng&fldr=&field_id=fieldID Select Video: (type=3 and set id of input text in field_id variable): path to filemanager../filemanager/dialog.php?type=3&editor=mce_0&lang=eng&fldr=&field_id=fieldID Select File: (type=2 and set id of input text in field_id variable): path to filemanager../filemanager/dialog.php?type=2&editor=mce_0&lang=eng&fldr=&field_id=fieldID If you want use popup add in the address &popup=1 In demo page i use fancybox with this configuration: $('.iframe-btn').fancybox({ 'width' : 900, 'height' : 600, 'type' : 'iframe', 'autoScale' : false }); and button have this code to open filemanager: Open Filemanager Remember to include fancybox file in head section: If you not use fancybox, you must change the function to close the windows after file selection in filemanager/js/include.js: function close_window() { parent.$.fancybox.close(); } SET SUBFOLDER AS ROOT You can set subfolder as root an change this parameter in tinymce init or in external-link through the subfolder variables. So you can have a root folder for every user or use. Remember to create subfolder in your source folder before :) In tinymce editor you must set the variable subfolder:"folder", while in external link you can add in get parameters &subfolder=folder Folder Example: root - folder1 - subfolder1 - subfolder2 - folder2 -subfolder3 User1 subfolder="" View: folder1 - subfolder1 - subfolder2 folder2 -subfolder3 User 2 subfolder="folder1" View: subfolder1 subfolder2 ********************************************************* ! Localization ********************************************************* - BGR [Stanislav Panev] - BRA [paulomanrique] - CZE [jlusticky] - ENG - FRA - GER [Oliver Beta] - HUN [Bende Roland] - ITA - NLD [johan12] - POL [Michell Hoduń] - POR [Sérgio Lima] - RUS [vasromand] ********************************************************* ! Old version news ********************************************************* Version 5: - Stand-alone use of filemanager, you can open and select files also dividing them according to the type (video, images and all files) Version 4: - Further simplify the installation steps - Now thumbs folder is inside the file manager script - Fix resizing bug, create folder possible bug - AUTOMATIC Realignment of THUMBS tree and images if you upload file from other client FTP or other method - Add loading animation while the image lightbox loading - Add possibility to config size width or/and height image limits - Add possibility to config automatic resizing and set only width or height size - white background in png thumbs - fallback upload for old browser - fix folder delete bug Version 3: - With this plugin you can also set automatic resizing of uploaded images. - Moreover you can set the permits to delete files, folder and create folder. - This version support advanced tab on image plugin - For preview img in files list the plugin NOW create a thumbnail image with low resolution!!! - Simplify the installation steps ********************************************************* ! Credits ********************************************************* Bootstrap => http://twitter.github.io/bootstrap/ Bootstrap Lightbox => http://jbutz.github.io/bootstrap-lightbox/ Dropzonejs => http://www.dropzonejs.com/ Fancybox => http://fancybox.net/ TouchSwipe => http://labs.rampinteractive.co.uk/touchSwipe/demos/ PHP Image Magician => http://phpimagemagician.jarrodoberto.com/ *********************************************************- See more at: http://test.albertoperipolli.com/filemanager4tinymce/#sthash.zNKkhfNk.dpuf

사진

PPT, PDF preview, gdocsViewer

ppt나 pdf 미리보기 기능을 구현하기 위해 검색 중 gdocsViewer.js를 찾아냈다-ppt와 pdf 뿐만 아니라 tiff, pps, doc, docx 까지 미리보기 기능을 제공한다-사용법 또한 간단하다-1. gdocsViewer.js 파일을 넣는다-1<script type="text/javascript" src="/resources/js/jquery.gdocsviewer.min.js"></script> 2. 다음을 스크립트에 추가한다-1 2 3 4$(document).ready(function() { $('a.embed').gdocsViewer({width: 480, height: 350}); $('#embedURL').gdocsViewer(); } 3. 사용한다-1<a href="www.snee.com/xml/xslt/sample.doc" class="embed" style="text-align : center; display : block;">PDF test georgetown.edu</a> jQuery plugin that automatically embeds the Google Docs Viewer for viewing pdf, doc, docx, ppt and tiff files linked to by anchor tags.The Google Docs Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This neatly bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.UsageAdd jQuery and the gDocsViewer plugin to the page.<head> <script type="text/javascript" src="jquery.min.js">script> <script type="text/javascript" src="jquery.gdocsviewer.min.js">script> head>Set some class name or id to the anchor tag for all URLs to files that you want to be displayed using the Google Docs Viewer. E.g. "embed"<a href="urltofile.pdf" class="embed">Download filea> <a href="urltofile.pdf" id="embedURL">Download filea>Initialize gDocsViewer and set it to process the URL with id or all URLs with the class name set in the previous step.$('a.embed').gdocsViewer(); $('#embedURL').gdocsViewer();CustomizationThe plugin offers two configuration options that set the width and height of the embedded document IFRAME. This can be set when the plugin is initialized. 1. $('a.embed').gdocsViewer({ width: 400, height: 500 });The plugin inserts a the IFRAME for the viewer inside an injected DIV. The DIV tags all carry the class name "gdocsviewer", which allow for styling all the gdocsViewer instances via CSS. If the anchor tag has the ID attribute defined, then the injected DIV tag is also set an ID attribute in the format of ID_of_Anchor + '-gdocsviewer'. See the demo source code for more details.DemoCheck out the live demonstration (http://www.jawish.org/blog/uploads/jquery.gdocsviewer_demo.html)LicenseThis script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.