담백한 웹 개발 이야기

들어가며 2019년 9월부터 회사 내부에서 사용하는 신규 서비스를 담당하게 되었습니다. 서비스는 회사 내부에서만 사용되기 때문에 정식 명칭을 사용하지 않고, 신규 서비스라는 명칭을 사용하겠습니다. 이직 후 신규 서비스를 혼자 담당하는 것은 처음이라 지금까지 서비스를 운영하면서 쌓았던 경험에 신규 서비스를 하면서 쌓은 경험을 더하여 공유하고자 이 글을 정리하게 되었습니다. 정리한 글은 지금까지 제가 경험했던 내용을 정리한 내용이라 정답이 아닐 수 있습니다. 하지만 신규 서비스를 개발할 예정이거나 하는 분들에게 소소한 정보가 되었으면 합니다. 이 글의 순서는 이렇게 정리했습니다. 글의 순서 꼼꼼하게 요구사항 분석 하기 구현 전에 구조 설계하기 코딩룰 정하기 의미 있었던 코딩 가이드라인 5가지 꼼꼼하게 요구사..

글의 목적 코드 리뷰를 받다보면 본인이 작성한 네이밍의 의미가 모호하다는 피드백을 받거나 로직이 이해하기 힘들다는 피드백을 받을 때가 있다. 동료들이 본인이 작성한 코드를 이해하지 못했을 때는 코드 작성 방법에 변경할 필요가 생긴 것이다. 이 부분을 개선하기 위해 이해하기 쉬운 코드 작성 방법을 리서치를 했다. 이 포스트는 리서치한 자료들을 정리한 포스트이다. 왜 코드는 이해하기 쉬워야 할까? 우리는 코드를 작성하는 시간보다 코드를 보고만 있는 시간을 대부분 차지한다. 우리에게는 시간은 유한하고 제한시간에 요구사항을 개발하는 게 하나의 목표이다. 그렇기 때문에 서비스를 운영하고 있는 내 자신 또는 동료가 코드를 이해하는 데 소비되는 시간을 최소화해야 한다. 코드를 완전히 이해한다는 것은 무엇을 의미할까?..

2019년 5월 19일에 구조 리펙토링 정리 관련 작업 중에 고민했던 내용들을 정리한 포스트입니다.글의 목적코드는 만들어진 목적과 역할이 있기 때문에 어울리는 자리가 있다. 어울리는 자리에 정확히 있으면 왜 그 자리에 있는 지 이해가 되고 유추가 가능하다. 그런데 막상 코드를 작성할 때 코드가 어떤 자리에 위치해야 하는 지 결정을 못해 유틸에 정의하는 경우를 많이 봤다. 코드의 명확한 위치를 정하는 기준에 대해서 알아보기 위해 작성한 글이다.코드의 위치코드의 위치를 정하는 기준은 변수/함수/클래스/컴포넌트/모듈 모두 동일한 기준으로 정의된다. 기본적으로 관계가 깊은 코드를 그룹핑하고 영향도에 따라 범위를 최소화하는 것이다. 특정 컴포넌트에만 사용될 때 특정한 컴포넌트에 사용되는 코드는 해당 컴포넌트에 정..

navigator.vibrate를 사용해서 진동의 발생 횟수나 진동 시간을 조정할 수 있습니다. 진동 세기는 기기의 진동 세기 설정 중 알람의 진동 세기와 동일하며 진동 세기는 변경할 수 없습니다. 브라우저 지원 범위 Chrome / Edge / Firefox / Opera / Android 에서 지원한다. Browser compatibility 코드 예제 데모 보기 Basic Vibrate Mouse Down / Up Long Press 공식 블로그 링크 자바스크립트로 기기의 진동 컨트롤하기 navigator.vibrate를 사용해서 진동의 발생 횟수나 진동 시간을 조정할 수 있습니다. 진동 세기는 기기의 ... blog.naver.com

경험정리에서는 10년간 20개 이상의 프로젝트에서 경험한 지식과 생각을 담았습니다. 서비스를 개발하면서 뭔가 명확한 기준을 세워서 개발하는 것을 좋아합니다. 내 스스로가 왜 이렇게 했는지 납득할 수 있어야 하고 동료들에게 왜 이렇게 했는지 설명하기 위해서 명확한 기준을 세우는 것을 중요하다고 생각합니다. 개발자로 있으면서 경험은 되게 중요합니다. 책이나 사이트의 글을 보고 지식을 쌓은 것은 단순히 정보에 불과합니다. 그 정보를 서비스에 적용하거나 동료들과 논의해서 새로운 정보를 만들어 본인의 경험을 만드는것이 더욱 좋습니다. 그리고 경험은 머리속에서만 있으면 기억에 의존하기때문에 잘못된 기억을 되집기도 합니다. 코딩을 하면서 문법이나 동작을 보고 이게 왜 이렇게 동작하는지 호기심이 생기곤합니다. 호기심은..

선행개발에서는 근 미래에 웹 표준이 될 기술을 담았습니다. 현업에서 프로젝트 업무에 집중해서 프로젝트 관련된 기술만 학습하게 되면 어느 순간 무료함이 찾아옵니다. 뭔가 발전이 없다고 느낄 때도 있죠. 하지만 그것은 프로젝트 초반과 다르게 익숙해지고 잘하고 있다는 것을 의미합니다. 그리고 프로젝트에 새로운 기술을 도입하고 싶은데 권한이 없어서 도입을 못 하거나 이미 포화 상태이거나 경험이 부족해서 도입을 못 할 때도 있습니다. 이런 시기에는 미래에 사용되는 기술을 학습해보는 것도 좋습니다. 발전하고 싶다는 마음도 충족할 수 있고 새로운 지식을 접하면서 꼬리를 물어가며 새로운 지식을 쌓을 수도 있습니다. 선행개발에 정리된 기술을 통해서 이러한 부분이 도움되었으면 합니다. 공식 블로그 링크 선행개발 소개 선행..

더넥스트웹리서치랩은 담백한 프런트엔드 기술 블로그를 운영하기 위해 노력합니다. 콘텐츠에는 근 미래에 웹 표준이 될 기술과 10년간 20개 이상의 프로젝트에서 경험한 프런트엔드 지식들을 담았습니다. 운영자 소개 조용구 | 프런트엔드 개발자 | Github 고등학생 시절 독학으로 시작해서 여러 번의 대회 수상으로 프런트엔드 개발자를 선택했습니다. 이후 현업에서 10년 차 동안 대기업에서 2번의 조기진급과 카카오에서 시니어로 인정받았습니다. ​ 독학으로 깊이 파고 문서로 정리하는 것을 좋아하고, 매끄러운 커뮤니케이션과 효율적인 개발로 생산성을 끌어올리는 것을 자주 고민합니다 :) 공식 기술블로그 링크 더넥스트웹리서치랩 : 네이버 블로그 담백한 FE 기술 블로그에서 지식 한 줌 담아 가세요! | 11년차 | 전..