[인턴 일지] 회사에서의 첫 프로젝트

미국에 온지 벌써 3달이 다 되어간다. 그 간 많은 일들이 있었고 힘든 일도 많았다. 생활 면부터 회사 문제까지도...

무엇보다 주위에 내 사람들이 없다는 것이 가장 힘들었다. 하소연하고 들어줄 사람이 없다는 것이 느껴본 경험이 없어서 그런지 더욱 서럽기도 하였다.

하지만 이제 괜찮다...

직속상관이 문제가 있어서 회사에 한동안 없어서 일을 시킬 사람이 없었다. 나는 회사 웹사이트 관리로 인턴을 온 것이고 시킬 사람들이 없었다. 처음에는 sns와 마케팅을 했다. 포토샵을 하면서 포스터를 만들고 업로드를 하였다. 그런데 마케팅과 경영 지식이 없어서 잘 하는지는 몰랐지만 그냥 그렇게 있었다.

직속상관이 오고 나서부터 일이 생겼다. 하지만 그는 전공자가 아니다. 나는 사장이 전공자가 아닌 회사에서 단기로 개발을 한 적이 있다. 아는 형이 일하고 있는곳에서 모바일 어플리케이션을 개발을 도와주러 간적이 있었는데 그 사람들의 스트레스가 정말 장난이 아니었다. 사실 일을 모르기에 그렇게 시키는 것이지만 개발자들 입장에서는 복장이 터질 노릇이다. 그 사람들은 프런트엔드와 백엔드의 개념이 없다. 그냥 앞단만보고 다했구나라고 생각하고 혹은 정교한 백엔드와 다소 디자인이 떨어지는 앞단을보고 저평가를 하기가 일쑤이다. 이걸 잘 이해를 시키는 것도 능력이라 하겠다. 하지만 어떻게 설득을 시켜야 할지 잘 모르겠다. 그 사람들 입장에서 본다면 농땡이나 시간을 떼우고 있다가로 생각할 수도 있다. 나는 진짜 이 에러를 잡는데 3~4시간, 혹은 며칠 씩 머리를 싸매고 있는데 그 사람들이 보기엔 일에 진척이 없기 때문에 일을 안한다고 말을 하기 때문이다. 나도 에러 진짜 잡고싶다. 빨리 끝내고 싶다. 

얼마전 매장에서 직원이 물건을 훔치다가 걸렸다. 경찰이 왔고 이 사람의 신분을 확인하기 위해 면허증, SSN, 그리고 각종 개인 서류사본을 요구했고 회사측에서는 찾는데 시간이 오래걸렸다. 이것이 프로젝트의 발단이 되었다. 웹, 모바일에서 조회해 볼 수 있는 사이트 제작. 직원 검색을 하면 그 사람의 정보와 사진을 그 즉시 확인할 수 있는 프로젝트를 제안했따.

그런데 시간이 문제인 것이다. 여유롭게 버그 없이 잘 짜려고 3달을 불렀다. 왜냐하면 서버, 데이터베이스고 뭐고 아무것도 없는 백지상태인데다가 유지보수까지 생각하고 운영도중 기능 추가할 경우 데이터베이스를 잘 설계해놓고 코드 수정을 용이하게 하기 위해서 시간이 필요했다.

그리고 무엇보다 뛰어난 실력이 아니기 때문에 시행착오 시간까지 계산한 것이었다. 난 아직 졸업을 하지 않았고 상관이 있는 상태에서 일을 배우러 온 것이었다. 하지만 환경이 녹록치 않았고 혼자 해결할 수 밖에 없는 상황이다. 졸업 못해서 못한다는건 사실 핑계고 내가 못하는 부분은 내가 놀지않고 그 시간에 지식을 습득해야 하는 부분이다. 

프레임워크는 스프링으로 하고 서버는 EC2 데이터베이스는 RDS로 MySQL을 쓰기로 결정했다. 아무래도 프레임워크를 써야 시간이 매우 단축되고 안정적이기 때문이다. 일단 프런트엔드를 빨리 요구해서 앞단 디자인을 마쳤다.

디자인감각이 없어서 Bootstrap을 썼다. 부트스트랩을 쓰면 마치 내가 디자이너가 된 것같은 느낌을 받는다. 욕심이 생겨 색깔과 모양을 조금씩 바꾸는 순간 엉망이 되는 것은 비밀이다.

일단 직원들 apply form을 받았다. 이 대로 데이터베이스 설계를 해야한다.

일단 이것에 맞춰서 html form을 만들었다.

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="card card-wizard" id="wizardCard">
                    <form id="wizardForm" method="post" action="complete.do">
 
                        <div class="header text-center">
                            <h3 class="title">Beauty Master Employee Register</h3>
                            <p class="category">Enroll the employee</p>
                        </div>
 
                        <div class="content">
                            <ul class="nav">
                                <li><a href="#tab1" data-toggle="tab">First Tab</a></li>
                                <li><a href="#tab2" data-toggle="tab">Second Tab</a></li>
                                <li><a href="#tab3" data-toggle="tab">Third Tab</a></li>
                            </ul>
 
                            <div class="tab-content">
                                <div class="tab-pane" id="tab1">
                                    <div class="row">
                                        <div class="col-md-3 col-md-offset-1">
                                            <div class="form-group">
                                                <label class="control-label">First Name</label> <input
                                                    class="form-control" type="text" name="frst_nm"
                                                    id="frst_nm"
                                                    required="true" placeholder="ex: Mike" />
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="control-label">Middle Name</label> <input
                                                    class="form-control" type="text" name="mddl_nm"
                                                    placeholder="ex: John" />
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="control-label">Last Name</label> <input
                                                    class="form-control" type="text" name="last_nm"
                                                    id="last_nm"
                                                    required="true" placeholder="ex: Andrew" />
                                            </div>
                                        </div>
                                        
                                    </div>
 
                                    <div class="row">
                                        <div class="col-md-5 col-md-offset-1">
                                            <div class="form-group">
                                                <label class="control-label">Email<star>*</star></label> <input
                                                    class="form-control" type="text" name="email" email="true"
                                                    id="email"
                                                    required="true"
                                                    placeholder="ex: hello@creative-tim.com" />
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label class="control-label">SSN Number<star>*</star></label> <input
                                                    class="form-control" type="text" name="ssn_num"
                                                    id="ssn_num"
                                                    required="true" 
                                                    placeholder="111-111-111" />
                                            </div>
                                        </div>
                                        
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-9 col-md-offset-1">
                                            <div class="form-group">                                            
                                                <lable>Street:</lable>
                                                <input type="text" id="street-address" name="street_addrs" class="form-control">
                                                <lable>City:</lable>
                                                <input type="text" id="city" name="city" class="form-control">
                                                <lable>State:</lable>
                                                <input type="text" id="state" name="state" class="form-control">
                                                <lable>Zip code:</lable>
                                                <input type="text" id="zip" name="zipcode" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-3 col-md-offset-1">
                                            <div class="form-group">
                                                <label class="control-label">Cell Phone</label> 
                                                <input type="text" class="input-medium bfh-phone"
                                                name="cel_tel" required="true"
                                                id="cel_tel"
                                                data-format="+1 (ddd) ddd-dddd">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-3 col-md-offset-1">
                                            <div class="form-group">
                                                <label class="control-label">Position</label>                                               
    
                                          
                                                <select multiple data-title="Multiple Select" name="position" class="selectpicker" data-style="btn-info btn-fill btn-block" data-menu-style="dropdown-blue">
                                                    <option value="Casher">Casher</option>
                                                    <option value="Sales">Sales</option>
                                                    <option value="Warehouse">Warehouse</option>
                                                    <option value="Manager">Manager</option>
                                                    <option value="Non-store">Non-store</option>
                                                
                                                </select>
                                                   
                                            </div>
                                        </div>
                                    </div>
                                    
                            
                                    
                                    <button type="button" class="btn btn-primary" id="testBtn">TestBtn</button>                          
                                </div> <!-- end of tab1 -->
                                
                                
 
                                <div class="tab-pane" id="tab2">
                                    <h5 class="text-center">Please give us more details about
                                        your platform.</h5>
                                    <div class="row">
                                        <div class="col-md-5 col-md-offset-1">
                                            <div class="form-group">
                                                <label class="control-label">work_style</label>
 
                                                <!--     IMPORTANT! - the "bootstrap select picker" is not compatible with jquery.validation.js, that's why we use the "default select" inside this wizard. We will try to contact the guys who are responsibble for the "bootstrap select picker" to find a solution. Thank you for your patience.
                                                     -->
 
                                                <select class="form-control" name="work_style" required="true">
                                                    <option selected="" disabled="">- Select Type -</option>
                                                    <option value="Full Time">Full Time</option>
                                                    <option value="Part Time">Part Time</option>
                                                    <option value="Temporary">Temporary</option>
                                                    <option value="Seasonal">Seasonal</option>
                                                </select>
 
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label class="control-label">Location</label>
 
                                                <!--     IMPORTANT! - the "bootstrap select picker" is not compatible with jquery.validation.js, that's why we use the "default select" inside this wizard. We will try to contact the guys who are responsibble for the "bootstrap select picker" to find a solution. Thank you for your patience.
                                                     -->
 
                                                <select class="form-control" name="location" required="true">
                                                    <option selected="" disabled="">- Select Location -</option>
                                                    <option value="CampCreek">CampCreek</option>
                                                    <option value="Duluth">Duluth</option>
                                                    <option value="GreenBriar">GreenBriar</option>
                                                    <option value="HeadLand">HeadLand</option>
                                                    <option value="Morrow">Morrow</option>
                                                    <option value="OldNational">OldNational</option>
                                                    <option value="Riverdale">Riverdale</option>                                                    
                                                </select>
 
                                            </div>
                                        </div>
 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-4 col-md-offset-1">
                                            <div class="form-group">
                                                <label class="control-label">Related</label>
                                                <div class="switch"
                                                     data-on-label="YES"
                                                     data-off-label="NO">
                                                     <input type="hidden" name="related" value="0"/>
                                                     <input type="checkbox" name="related" value="1"/>                                                     
                                                </div>
                                        
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label">At least 18</label>
                                                <div class="switch"
                                                     data-on-label="YES"
                                                     data-off-label="NO">
                                                     <input type="hidden" name="adult_yn" value="0"/>
                                                     <input type="checkbox" name="adult_yn" value="1"/>                                                     
                                                </div>
                                        
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-5 col-md-offset-1">
                                            <div class="form-group">
                                                <label for="exampleTextarea">Skills And Experience</label>
                                                <textarea class="form-control" name="skills" id="skills" rows="3"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-5 col-md-offset-1">
                                            <div class="form-group">
                                               <label class="control-label">High School Completed</label>
                                                <div class="switch"
                                                     data-on-label="YES"
                                                     data-off-label="NO">
                                                     <input type="hidden" name="highschool" value="0"/>
                                                     <input type="checkbox" name="highschool" value="1"/>                                                     
                                                </div>                                             
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-3 col-md-offset-1">
                                            <div class="form-group">
                                                <label class="control-label">Education Style</label>                                               
    
                                                   <label class="radio">
                                                       <input type="radio" data-toggle="radio" name="edu_code" value="College" checked="">College
                                                   </label>
    
                                                   <label class="radio">
                                                   <input type="radio" data-toggle="radio" name="edu_code" value="University">University
                                                   </label>
                                               
                                                   <label class="radio">
                                                   <input type="radio" data-toggle="radio" name="edu_code" value="Business">Business
                                                   </label>
                                               
                                                   <label class="radio">
                                                   <input type="radio" data-toggle="radio" name="edu_code" value="Technical">Technical 
                                                   </label>
                                               
                                                   <label class="radio">
                                                   <input type="radio" data-toggle="radio" name="edu_code" value="Trade School">Trade School
                                                   </label>
                                                   
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-3 col-md-offset-1">
                                            <div class="form-group">
                                                <label class="control-label">School Name</label> <input
                                                    class="form-control" type="text" name="school_name"
                                                    placeholder="ex: XXX University, XXX college" />
                                            </div>
                                        </div>                                
                                        
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="control-label">Major</label> <input
                                                    class="form-control" type="text" name="major"
                                                    placeholder="ex: Advertising" />
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="control-label">Grade</label> <input
                                                    class="form-control" type="text" name="grade"
                                                    placeholder="ex: 3.0" />
                                            </div>
                                        </div>
                                        
                                    </div>                                                                    
                                </div>
 
                                <div class="tab-pane" id="tab3">                        
                                    <h5 class="text-center">Work Experience</h5>
 
                                    <div class="work-experience" id="work_experience1">                                    
                                        <div class="row">
                                            <div class="col-md-3 col-md-offset-1">
                                                <div class="form-group">
                                                    <label class="control-label">Employer Name</label> <input
                                                        class="form-control" type="text" name="emp_nm"
                                                        placeholder="ex: Mike" />
                                                </div>
                                            </div>
                                            
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="control-label">Business Type</label> <input
                                                        class="form-control" type="text" name="type"
                                                        placeholder="ex: Food Mart" />
                                                </div>
                                            </div>
                                            
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="control-label">Job Title</label> <input
                                                        class="form-control" type="text" name="job_title"
                                                        required="false" placeholder="ex: Manager" />
                                                </div>
                                            </div>
                                            
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-9 col-md-offset-1">
                                                <div class="form-group">                                            
                                                    <lable>Street:</lable>
                                                    <input type="text" id="street-address" name="w_street_addrs" class="form-control">
                                                    <lable>City:</lable>
                                                    <input type="text" id="city" name="w_city" class="form-control">
                                                    <lable>State:</lable>
                                                    <input type="text" id="state" name="w_state" class="form-control">                
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 col-md-offset-1">
                                                <div class="form-group">
                                                    <label class="control-label">Start Date</label>
                                                    <input type="text" class="form-control datepicker" name="start_dt" placeholder="Date Picker Here"/>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label">End Date</label>
                                                    <input type="text" class="form-control datepicker" name="end_dt" placeholder="Date Picker Here"/>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-5 col-md-offset-1">
                                                <div class="form-group">
                                                    <label for="exampleTextarea">Work Performed</label>
                                                    <textarea class="form-control" name="work" id="work_performed" rows="3"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-5 col-md-offset-1">
                                                <div class="form-group">
                                                    <label for="exampleTextarea">Reason for Leaving</label>
                                                    <textarea class="form-control" name="reason" id="reason_for_leaving" rows="3"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                                                            
<!--                                         <div class="buttons">
                                            <button class="c">Clone</button>
                                            <button class="r">Remove</button>
                                        </div> -->
                                    </div> <!-- end of work-experience -->
                                    
                                </div> <!-- end of tab3 -->
 
                            </div>
                        </div>
 
                        <div class="footer">
                            <button type="button"
                                class="btn btn-default btn-fill btn-wd btn-back pull-left">Back</button>
 
                            <button type="button" id="next_btn"
                                class="btn btn-info btn-fill btn-wd btn-next pull-right">Next</button>
                            <button type="button"
                                class="btn btn-info btn-fill btn-wd btn-finish pull-right"
                                onclick="onFinishWizard()">Finish</button>
 
                            <div class="clearfix"></div>
                        </div>
                    </form>
 
                </div>
            </div>
        </div>
 
    </div>
</div>

wizard form이라고 한 페이지에 탭으로 나누어서 등록하는 편한 form이 있다.

그리고 앞단에 주소를 입력하는 form은 미국 api를 썼다. 당연히 미국 주소니까. SmartyStreet API를 찾았다. 

주소를 친다면 ajax로 자동완성으로 실제 주소 목록들이 나와서 편하게 입력할 수 있고 주소만 치면 State (주) 와 City (도시) 까지 자동으로 입력되게 된다. 그리고 ZIPCODE를 잘못치게 되더라도 Verify를 하게되면 자동으로 맞춰진다. 

월 250건까지 무료이고 그 이후 plan을 쓰게되면 돈을 지불하는 형식이다. 굳이 돈을 쓰지 않으려면 초기 인원들을 정확한 값으로 DB에 insert를 해놓고 그 이후부터 api request를 하면 될 것으로 예상한다. 한달에 직원등록을 250회 할 수 있는 사이즈는 아니라고 판단했기 때문이다. 

회사는 Georgia주에 매장이 7개인데 인원들 도합해봐야 300을 넘지 않을 것이고 유동인구는 월 50% 미만으로 생각하기 때문에 free - tier에서도 충분히 사용가능할것으로 보인다.

써보니 매우 편리한 form이다. 한국에서 웹 개발을 할때 주소 api를 써본 기억이 하나 있긴하다. Daum api를 썼는데 그건 무료였던것 같다. 정말 간단하게 썼던 것으로 기억한다. 그냥 웹사이트 domain을 입력하고 key를 받아서 프로젝트에 붙이고 JS와 CSS그리고 html form만 붙이면 작동하는 형태이다. SmartyStreets도 마찬가지로 키를 받아야한다. 일단 local환경이므로 localhost로 받았는데 나중에 서버를 파게되면 public IP로 다시 발급받아야 할 것이다. 관리자 홈페이지라 굳이 돈 안쓰려면 IP 주소만으로도 운용가능한데 이건 상관한테 물어봐야할 것이다. 회사가 정말정말 돈을 안쓰려고한다. ㅋㅋㅋㅋ 진짜 어이없는 경우는 프로젝트에 필요한 템플릿이라든지 각종 라이센스의 돈을 지불하려고 하지 않는것이다...

정말 충격적이었다. 이 정도 프로그램에는 이만큼의 라이센스 비용이나 서버 운용비가 필요한데 이걸 인정을 안하려고 한다. 심각하게 무지하다. 그럼 아는 사람의 말을 들어야하는데 듣지도 않는다. 심지어 이전에 잠깐한 쇼핑몰 템플릿 라이센스도 내꺼 가지고있었는데 하도 안쓰려고 뻐팅겨서 내꺼 그냥 썼다....

세상에 회사 프로그램만드는데 직원 돈 쓰면서 개발하다니.....

나는 일을 할때 항상 주인의식을 가지고 하려고 한다. 내가 속해 있는 집단의 일은 나의 business다. 그래서 프로젝트를 맡은 것을 책임지고 싶다. 그래서 내것을 투자하더라도 하고 싶다. 

진짜 인턴이 끝날 때라도 내 노력과 정성을 알아줬으면 하지만 어차피 모를테니 기대하지 말아야겠다ㅎㅎ

갑자기 코드얘기하다가 왜이런이야기를 썼는지 모르겠지만 어쨌든 저 api는 유용하다!

그리고 스크립트단 validation 코드이다. 부분만 본다면,

 $().ready(function(){
 
          var $validator = $("#wizardForm").validate({
            rules: {
              email: {
                  required: true,
                  email: true,
                  minlength: 5
              },
              first_name: {
                  required: false,
                  minlength: 1
              },
              last_name: {
                  required: false,
                  minlength: 1
              },
          
            // and so on
            }
          });

저 폼 아이디가 wizardForm인데 필수 항목들을 설정하는 것이다. 더 필요하다면 name으로 잡아서 조건을 맞춰주면 된다.

그냥 NEXT를 누르게되면 이렇게 넘어가지 않게 된다.

멀티 셀렉 폼이다.

<select multiple data-title="Multiple Select" name="position" class="selectpicker" data-style="btn-info btn-fill btn-block" data-menu-style="dropdown-blue">	                                      	
	    <option value="Sales">Sales</option>
	    <option value="Warehouse">Warehouse</option>
	    <option value="Manager">Manager</option>
	    <option value="Non-store">Non-store</option>
</select>

이런식으로 폼이 만들어진다. 회사 직원 직책이 저렇게 5개로 apply form에 나와있어서 저렇게 만들었다. 그리고 데이터베이스 설계할 때는 저 이름들을 숫자 코드로 관리할 것이다. 
한 가지 아쉬운 것은 저게 static인 것이다. 유지보수 차원에서 셀렉폼은 dynamic하게 만드는 것이 효율적이다. 즉 폼에 있는 셀렉 옵션들을 데이터베이스에서 가져오는 형태로 만드는 것이 좋다. 그래야 내가 배포된 WAR파일을 건드리지 않고 DB만 수정해서 옵션들을 바로바로 바꿀 수 있기 때문이다. 근데 지금 시간이 촉박할 것같아서 일단 static으로 박아놓고 나중에 여유가 된다면.... 수정하려고 한다!


나머지 form들이다. apply form paper기반으로 만들었다.

라디오 박스와 DatePicker 뭐 이런 것들이다. 


혹시 저 form들의 소스가 필요하다면 댓글 남겨주시면 보내드리겠습니다.

      function onFinishWizard(){
          //here you can do something, sent the form to server via ajax and show a success message with swal
            alert("zz);")
          swal("Good job!", "You clicked the finish button!", "success");
          
          $("#wizardForm").submit();
      }









마지막으로 Finish 버튼을 눌렀을 때의 submit스크립트이다. 친절하게도 이쪽에 submit코드를 작성하면 된다고 까지 써져있다. 서브밋 때리고 컨트롤러에서 받아서 값을 뜯기만 하면 되겠다.

디자인을 좀더 수정하고... (이게 제일 자신없지만) 그리고 생각해보니 중요한 form하나가 빠져서 추가할 것이 있다.

좀 더 만들다가 다음번엔 데이터베이스를 설계하고... 참 설계한다고 하기도 창피하다. 세상에 어느회사가 신입한테 DB를 맡기는지 모르겠다. 예전에 현업 20년차 DBA강의를 들으러 간적이 있었는데 진짜 정말 멋있었다.
강의 중 20%밖에 이해하지 못했던 것으로 기억하지만 정말 많은 도움이 되었었다. 현업 개발자들도 많이 들으러 왔는데 모든 질문에 막힘 없이 대답하는 모습이 정말 인상깊었다. 나도 20년 후에는 저렇게 되고 싶다.
내가 하는것은 DBA분들이 보시면 그냥 코웃음 치면서 지나가실수도있지만.. 지금 데이터베이스가 필요하니 만들어보겠다..ㅠ

오늘도 잘 헤쳐나가야겠다......!!

.