사람

기업

게시물

프론트엔드 개발
2019-04-10
이주은  UI 개발자 @교보문고
Front-end, React.js, jQuery
안녕하세요, 잘 구워진 6년차 프론트엔드 개발자가 FA시장에 나왔습니다. 회사와 핏을 맞추는데 있어서 도움이 될만한 정보들을 적어봅니다. // ====== 1. 주요 경력은 프론트엔드에 집중되어 있습니다.
 제 성향 역시 눈에 바로 보이는 프론트엔드를 좋아합니다.
 작업을 하다 보면 반드시 백엔드를 만지는 경우가 있고, 루비나 노드를 다룰 줄 알지만 기왕이면 프론트 작업을 좋아합니다. HTML/CSS도 직접 짜는걸 선호하며 아주 아주 능숙합니다.
 -- 2. 개발 경력의 시작은 Ruby on Rails로 시작하여 5년간 서버와 프론트 모두를 작업했고, 그 와중에 프론트쪽 React.js로 넘어가 4년 정도 경험을 쌓았습니다. 커머스쪽 웹 서비스 하나, 부동산쪽 웹 서비스 하나, 부동산쪽 React Native 앱 하나, 가상화폐 거래소 하나를 만들어봤습니다. 또한 막판에는 Node.js 백엔드에 React 프론트로 서비스 하나를 만들었습니다. 위 서비스들은 Github 컨트리뷰션 기준으로 1등 혹은 2등 정도의 메인 개발자였습니다. -- 3. 백엔드와의 조합
 초기에는 Ruby on Rails로 백엔드 만들고, 프론트도 함께 만들다가, 중간에 프로젝트를 완전히 분리하여 서버와 웹은 API로만 통신하게 만들었고, 이후 React 관련 프로젝트는 모두 API 통신으로 만들었습니다. 외부 회사와 협업하며 팀내 API 문서를 직접 만들기도 했습니다. 사실 이 연차 개발자가 이걸 못하는건 좀 이상한거죠. ORM 위주로 써봐서, 쿼리 짜는 부분은 솔직히 초보적인 수준입니다.
 -- 4. 리눅스 얼마나 쓰실줄 아나요? 
대단히 능숙한건 물론 아니지만, AWS EC2 인스턴스 셋업해주면 SSH로 접속하여 기초적인 nginx 설정하고 PM2나 기타 등등을 무리 없이 세팅하여 제가 작업한 리액트 프로젝트 서버 셋업은 혼자 끝낼 수 있습니다. 또한 쉘 스크립트를 길게 짜서 개발/테스트/프로덕션 별 환경변수 받아다가 알아서 branch별 git 클론 해오고, 타임스탬프 박아서 바로 롤백할 수 있게 하고, 빌드 하고, 서빙 하고.. 휘황찬란한 디플로이 성공 메시지 띄우고 슬랙 알림 메시지 쏴주고 이 정도는 아무 도움 없이 직접 합니다. 쉘스크립트가 구리긴 한데 나름의 조잡한 매력이 있더라구요. 흑마술 쓰는 느낌.
 -- 5. 웹 표준과 웹 접근성 
이게 뭐 매우 철지난 키워드는 맞습니다. 이젠 뭐 이렇게 쓰든 저렇게 쓰든 요새는 W3C 벨리데이터 돌려가면서 체크하는 일은 거의 없죠. 싱글 페이지 앱이 뜨면서 지저분해진 부분도 분명 있고. 하지만 가급적이면 지키려고 합니다.
 -- 6. 오픈소스 / 라이브러리
 직접 만들고 메인테인중인 프로젝트는 없지만 오픈소스 프로젝트 땡겨다 쓰는건 잘 합니다. React.js와 자바스크립트 진영이 흔히 그렇듯 버전별 변동이 심해서, 어떤 라이브러리의 어떤 베타 버전에 이런 버그가 있어서 이 버전을 쓴다던가, 간단한건 고쳐 쓴다던가 이런건 익숙합니다. 소위 말해 안에서 어떻게 굴러가는지도 모르면서 블랙박스 상태로 그냥 쓰는 개똥같은 행동은 하지 않습니다.
 -- 7. 웹 퍼블리싱
 SCSS에 능숙하며, SMACSS + OOCSS 방법론을 좋아합니다. CSS 내에서 id 셀렉터는 사용하지 않으며, important 구문은 가능하면 쓰지 않는걸 선호합니다. 네스팅은 5단계 이상 들어가지 않으며 recess 순서로 요소를 정렬합니다. auto prefixer로 브라우저별 지원을 해줍니다만, 대부분의 서비스가 IE10부터 지원하는 요즘에는 중요도가 많이 떨어졌네요. CSS 안에서 오타를 낸다거나 들여쓰기를 대충하고, 요소 순서를 섞어놓는 등 대충 짜는걸 혐오합니다. 코드는 모두 scss-lint로 엄격하게 린팅하여 커밋하고 있습니다. 네 문법 나치가 여기에 있습니다.
 
픽셀 맞추는것과 외관 꾸미는것을 매우 좋아해서, 굳이 시키지 않아도 이 부분은 충실하게 만족할 때 까지 퀄리티를 뽑아냅니다. 또한 작업 속도가 대단히 빨라서 어지간한 디자인 시안 한 페이지는 반나절 안에 끝냅니다. 일단은 아직 저보다 마크업이 빠른 사람은 본 적이 없습니다.
 -- 8. React.js
 React + Redux 조합으로 초창기때부터 4년간 작업해왔으며 프로젝트 하나를 바닥부터 끝까지 직접 만들 수 있습니다. 처음 독학으로 React를 배울때는 너무 힘들어서 위염으로 병원 신세를 진 적도 있지만, 지금은 아주 능숙하게 다루고 있습니다. React 프로젝트에선 React보단 Redux나 기타 미들웨어 짜맞추는게 피곤한 편인데, 거기 시달릴 단계는 넘어간듯 합니다. Redux store는 코딩 편의성을 위해 DUCKS 구조로 만들고, 한 파일당 300줄이 넘지 않도록 억제하고 있습니다. 코드에 보일러플레이트가 많아지는건 참 싫어합니다만 좀 더 나은 방법이 있나 계속 알아보는 중입니다. 알잖아요, 스토어 하나 추가하면 파일 5개나 건드려야 하는거. 일단 제 답은 아직까진 DUCKS 구조인것 같습니다.

 Webpack + Babel 이쪽 덩어리도 아주 크죠. 빌드 과정이라던가, 배포라던가.. 많이 해봐서 무리 없이 해낼 수 있습니다. 얼리어답터의 마음으로 Parcel도 써봤으나 레퍼런스가 부족하고 많은 라이브러리에서 지원하지 않아 아직 Webpack을 대체하기엔 시기상조인것 같습니다. 
 Jest / Enzyme을 이용해 프론트엔드 테스트 환경을 처음부터 끝까지 직접 구축해봤지만 들이는 시간 대비 효용이 크지 않다고 생각합니다. 일반적인 코드 짜는 시간의 4배 정도를 테스트 코드 짜는데 사용해야 했습니다. HOC가 들어가게 되면 또 배로 어려워집니다. dive 하고 또 뭐 하고.. 게다가 React가 최근 버전에서 Enzyme 쪽에서 store를 땡겨 쓰기 어렵게 만드는 빅엿을 먹인지라 이쪽은 여러모로 피곤한 상태입니다. 테스트 환경을 잘 구축한 팀이 있으면 이런 부분을 어떻게 극복했는지 좀 배워보고 싶긴 합니다.
 -- 9. Node.js 
최근에 노드로 간단한 어드민 프로젝트 하나를 만들어냈습니다. 여기서 React는 mount 등이 배제된 간단한 탬플릿 엔진으로만 사용했습니다. Babel을 이용하여 import/export를 사용할 수 있게 하여 최신 ES6 문법을 모두 사용할 수 있었습니다. 저는 Ruby on Rails를 이용하여 백엔드를 작업하는게 좀 더 능숙합니다만, 루비 개발자들은 다들 노드로 넘어가고 싶어 하죠. 이번 기회에 간단한 쿼리문 날리거나 CRUD 구축하는 경험을 쌓았고, 이후 더 발전시킬 여지가 있습니다.
 -- 10. D3.js 
서비스 통계 화면이나 차트 꾸미는걸 좋아합니다. D3가 워낙에 거대하고 복잡한 편이라, 한껍데기 더 씌운 C3.js나 Billboard.js를 사용하고 있습니다. 사실 이거 가지고도 어지간한 대시보드는 다 만들 수 있으니까. // ====== 개발 성향 1. 문법 나치
 ESlint, scss-lint 등을 빡쎄게 사용합니다. ESlint는 많이들 사용하는 AirBnb 탬플릿을 조금씩 조절해가며 쓰고 있고, SCSS도 짤없습니다. 에디팅 할 때 뿐만 아니라 커밋할 때 자동으로 검사/수정을 돌려서 모든 팀원이 동일한 문법으로 커밋되게 합니다. -- 2. CLI 선호
 git은 터미널에서 CLI 명령어 직접 쳐서 사용합니다. 소스트리를 쓰는건 좀 복잡하더군요. 제 브랜치에서 좀 더럽게 커밋한 다음, 막판에 git rebase -i 하여 정리한 다음 푸시하고, 풀 리퀘스트 보내는 식으로 합니다. 함께 작업하는 깃 플로우 위에 css1, css2 이런 커밋명으로 도배하는건 예의가 아니라고 생각해서요. -- 3. 디자인/기획
 짧게나마 디자이너와 기획자 스탯을 찍고 개발을 시작해서, 시키는거 받아서 그대로 하지 않고 적극적으로 의견을 개진하는 편입니다. 재플린으로 디자인 시안을 전달받으면 검토해보고 이미지 용량이나 사이즈, 컬러에 대해 피드백을 주고받고 작업합니다. 디자인은 디자이너의 몫이지만 최적화는 프론트엔드 개발자가 책임지고 해내야 할 부분입니다. 자기가 작업한 웹 사이트에 4mb짜리 이미지 파일이 올라가 있고 이러면 수치스러워해야 합니다. -- 4. 폰트 
웹에 사용되는 폰트를 직접 만들어서 썼습니다. 스포카는 노토산스와 라토를 합쳐서 폰트를 만들었지만, 저는 제 선호에 따라 노토산스와 오픈산스를 섞어 폰트를 만들어 썼습니다. 서브셋으로 용량을 줄여서 개발 150kb 내외로 굵기 두개 정도 해서 서비스합니다. 가끔 종류별로 4메가짜리 웹폰트 파일 3개 올려둔 웹페이지 보면 안쓰럽습니다.. -- 5. 개발을 하다 보면 “왜 안되지?” 하다가 “왜 되지?” 하는 순간이 있습니다. 기능만 작동하면 되는거지- 하고 넘어가지 않고 끝까지 파내서 원인을 알아내는 편입니다. 경험상 그냥 넘어간 부분은 나중에도 //반드시// 문제가 되더라구요. // ====== 개발 외적인 관심사 1. 저는 유별나게 차를 좋아하지 않는다고 생각하지만 차가 저를 좋아하는것 같습니다. 2주에 한번씩 손세차 하고 있구요. 가끔 차 안에서 잔 적도 있네요. 월급의 절반이 차로 들어가는 카푸어입니다. -- 2. DIY를 아주 좋아해서 집에 해외 직수입 공구통이 종류별로 허리 높이까지 쌓여있습니다. 야밤에 치킨을 시켜놓고 잭으로 차 들어올리고, 폐차장에서 사온 범퍼나 펜더를 갈아 끼우곤 합니다. -- 3. UI/UX에 대단히 민감합니다. 왕년에 8년 넘게 블로그에 전자제품이나 서비스의 UX 까는 글을 올렸는데, 일 방문자가 20만명일 때도 있었습니다. (내가 왕년에… 영락없는 꼰대군요) -- 4. 카메라도 좋아합니다. 휴학중 2년간 행사사진 촬영을 업으로 한 적이 있으며, SLR클럽 펜탁스동에는 제가 플래시로 작업한 펜탁스 렌즈와 바디 계보표가 아직 공지사항으로 등록되어 있습니다. 뭐든 정리해서 표로 만드는걸 좋아합니다. -- 5. 커뮤니티를 사랑합니다. 대학생때는 회원수 100만명대의 다음 GTA 게임 카페를 운영한 적이 있고, 이에 대한 운영 노하우를 적어 책으로 낸 적도 있습니다. 플러스로 SLR클럽, 뽐뿌, 클리앙에서 네임드였습니다. -- 6. 술을 좋아하지만 체질상 잘 마시진 못합니다. 소주파는 아니고 양주/사케/고량주 파. 집에서 대형 프로젝터로 영화를 보면서 버니니 한병씩 마시는걸 좋아합니다. 글렌모렌지 시그넷, 패트론 아네호, 코스트코표 보드카에 오렌지주스 섞어서 스크류드라이버 .. -- 7. 1년 전부터 흡연을 하게 되어 이젠 골초가 되었습니다. 학연 지연 흡연이라면서요. // ====== 좋아하는 회사 - 수평적 분위기의 회사 - 개발자가 기획/디자인에 대해 의견 제시하는게 당연한 회사 - 맥으로 일할 수 있는 회사 꺼리는 회사 - 윈도우로 개발해야 하는 회사 - 일베 분위기의 회사 - 업무용 물품 사주는걸 꺼려하는 회사 --- 2014년에 비슷한 글을 쓸땐 앞에서 끌어줄 선배 개발자가 있었으면 했는데, 2019년이 된 지금은 그런 꿀같은걸 바라기보다는 제가 끌어줘야 할 순간이 오네요. 당장 뽑아 투입하여 뭔가 찍어내고 싶은 분들은 손 빠르고 능숙한 제게 노크하세요. 회사의 교체 가능한 부품 보단, 한사람 투입으로 모든게 확 바뀔 수 있는 전략무기로 사용해주세요.
2019-03-22
이준혁  프론트엔드 개발자 @라인
Javascript (ES6/ES7), React.js, Front-end

블로그 글

채용 정보

프로젝트

HLOG - 개인 페이지
 
2019년 7월 | 진행중 
포트폴리오 , 글 작성 할 개인 웹구현
강휘  웹 개발자 
420RP · Java 상위 2%
직스엔닥스 웹사이트
2019년 5월 | 진행중 
직스엔닥스 웹 페이지 리뉴얼
김성남  풀스택 개발자 @직스엔닥스
React hooks, React.js, HTML&CSS3
MyBrary
2019년 6월 - 2019년 7월 
알라딘 API를 이용해서 책 정보들을 확인이 가능하고 또한 독서 일기를 작성하고 회원들끼리 서로 공유할 수 있습니다.
김두현  한양사이버대학교 컴퓨터공학과
aws-ec2, React.js, Styled-components