본문 바로가기
반응형
Prettier, ESLint로 협업 강화하기 협업을 위한 도구 협업에 있어 개발 외적으로는 적극적인 소통과 정보 공유, 사내 지식 문서화 등의 문화가 있다. 그렇다면 개발 내적으로는 어떤 것들이 있을까? 개발자마다 프로젝트 폴더의 구조, 코딩 스타일이 조금씩 다를 것이다. 이것은 협업 시 한 프로젝트에서 각기 다른 스타일의 코딩을 한다는 것을 의미한다. 이렇게 할 경우 추후 유지보수를 하기에 까다롭고 다른 팀원이 투입되거나 인수인계 시 서로 다른 코드 스타일에 당황하거나 어려움을 겪을 수 있다. 따라서 코드의 문법, 안티 패턴 검사와 함께 일관된 코드 스타일을 제공(formatting)하고 규칙을 정해주는 도구를 사용하는게 좋다. Prettier와 ESLint가 이에 해당한다. Prettier 프리티어(prettier)는 코드 포매터이다. pret.. 2021. 12. 24.
5일간 야생에서 살아남기(feat.테오의 스프린트 1기) 스프린트란 단어를 처음 들었다. 정확히는 '구글 스프린트'라는 것인데 팀원들이 한데 모여 서로의 솔루션에 대해 이야기 하고 하나를 정하여 프로토타입을 제작, 테스트를 하는 5일짜리 과정이다. 쉽게 말해 기획부터 실행까지 단 5일 만에 해결하는 프로젝트 수행법인 것이다. 전 구글 수석디자이너이자 ⟪스프린트⟫의 저자인 제이크 냅은 스프린트를 '최소의 시간으로 최상의 결과를 얻도록 조정된 최적의 프로세스'라고 소개한다. 우연한 계기로 마음이 맞는 팀원끼리 스프린트라는 것을 시작하고 좋은 기억으로 잘 마무리했다. 그 과정에서 느낀점, 경험들을 잊고 싶지않아서 회고글을 쓰게 되었다. 테오! 저도 참여 할게요 요즘 벨로그 트렌딩에 혜성처럼 등장한 분이 계신다. teo라는 아이디를 가진 시니어 프론트엔드 개발자이다... 2021. 12. 19.
깃허브 파일 대소문자 구분 이슈 최근 마음이 맞는 사람끼리 모여 5일동안 프로젝트 협업을 진행하게 되었다. 깃허브로 협업하는 것이 처음이라서 깃허브만 보더라도 시간이 상당히 소요가 됐다. 그 중 나를 너무나 힘들게 했던 파일의 대소문자 구분 이슈는 정말..많은 것을 느끼게 해주었다. 나는 리액트 프로젝트를 진행할 때 컴포넌트, 페이지의 '파일'은 소문자로 하는 것이 습관이다. 그렇게 협업이란 것을 망각한 채 내 습관대로 했다가 크게 고생했다..깃허브가 파일 대소문자만 변경하면 구분하지 못한다는 것을 이제야 알게 되었다. 정확히는 기본값으로 구분을 하지 않게 설정이 되어있다. 따라서 다음과 같이 입력하면 대소문자 구분을 해주게 된다. git config core.ignorecase false 깃은 한번 꼬이면 정말 너무너무 힘든 것 같다.. 2021. 12. 16.
터미널에서 'code' 명령어가 안될 때 해결 방법 터미널에서 VS Code 바로 열기 VS Code에서 cmd + shift + p로 명령 팔레트를 열고, code라고 검색 후 설치해주면 터미널에서 code . 명령어로 해당 경로의 VS Code를 바로 열 수 있다. 그렇게 잘 사용해오다가 맥북 M1으로 교체하고 난 후 적용해보니 아래와 같이 설치가 되지 않았다. 맥북 M1 이슈인듯 한데 계속 사용하다보니 자잘한 버그가 많다. 해결 방법은 간단하다. 먼저 code 명령을 제거한 후 설치를 진행하면 정상 작동한다. I found a fix. I simply uninstalled the code command from PATH in vscode and reinstalled. i.e open the command pallete, search "uninstal.. 2021. 12. 15.
CSS 접근성과 기본 설정에 대한 고찰 나는 개인적으로 CSS는 처음 설정을 어떻게 해야 할지가 항상 고민이었다. 그 이유는 사용자 에이전트 스타일시트(user agent stylesheet)때문이었다. 이게 은근 프로젝트를 진행할 때 신경쓰이고 피곤한 부분이었다. '기본 속성을 가지는 요소를 처음부터 초기화를 해야하나?' '요소, 클래스에 스타일을 적용할 때마다 초기화를 할까?' 1번의 경우엔 사용하지 않는 요소까지 초기화를 한단 생각에 찝찝했고, 2번의 경우엔 초기화 하는 것을 놓치거나 그때 그때 적용하다보니 '이게 유지보수에 과연 좋은 방법일까'란 생각이 들었다. 그렇게 시간이 흐르다가 좋은 CSS 초기설정 코드를 보게 되었다. 해당 코드는 최소한의 기본적인 초기설정과 접근성까지 신경을 써서 작성한 코드였다. 많은 경험 속에 나온 코드라.. 2021. 12. 12.
프론트엔드 개발자, 디자이너의 협업과 태도 빠르면 이번달, 다음달부터 디자이너와 협업이 시작될 것 같다. 나는 항상 디자이너와 협업을 어떻게 하는지 궁금해했다. 프론트엔드 개발자는 디자이너, 백엔드 개발자와 의사소통을 할 상황이 많다는 것을 자주 보았다. 특히 '디자이너와 협업은 어떤식으로 진행이 될까?'라는 궁금증이 컸다. 하얀 백지인 상태에서 디자이너와 협업할 상황에 직면하게 되면 우왕좌왕 할 것이 뻔하기 때문에..😵 주말을 활용해 프론트엔드 개발자는 디자이너와 어떻게 협업을 하는지, 그리고 가져야할 태도에 대해서도 알아봤다. 현업에서는 디자이너, UX 디자이너가 대략적인 프로토타입 버전을 개발팀에 전달 해준다 디자인에서는 담을 수 없는 반응형, 에러처리, 로딩상태 등은 개발팀에서 피드백을 많이 준다 적극적으로 빠진 부분이 무엇인지, 어떻게 .. 2021. 12. 11.
배포 자동화? CI/CD가 무엇일까? 회사에서 프론트엔드 개발 환경에 대해 고민하고 구축해볼 기회가 생겼다. 그러던 중에 팀원들 전체에 도움이 될 수 있는 배포 자동화, CI/CD에 대해 공부하게 되었다. 해당 개념에 대해 알아보고 이해하는 시간을 가져보자. 어쩌다 배포 자동화, CI/CD가 생기게 된 것일까? 반복되고 지루한 절차들은 자동화를 하고 싶다. 보통 배포하는 과정은 고정적이고 변경된 코드를 적용하기 위한 잦은 배포는 생각보다 시간을 많이 소비할 수 있다. 즉 개발자의 리소스가 비효율적으로 활용되기 때문에 배포 자동화 시스템이 필요하다. 배포 자동화 시스템에서의 CI/CD CI(Continuous Integration, 지속적 통합) CI/CD의 'CI'는 개발자를 위한 자동화 프로세스인 지속적 통합(Continuous Integ.. 2021. 12. 9.
반응형

티스토리툴바