Others/Open Source 4

Facebook - Recoil 오픈소스 기여하기

최근 뜨고 있는 상태 관리 툴인 Recoil을 공부하다가 공식문서에서 번역이 안된 페이지가 있었습니다. 오픈소스에 관심이 많은 저는 페이스북에서 만든 Recoil에 한번 기여하고 싶은 욕심이 생겼습니다. 기여한 순서는 이렇습니다. 1. 파파고와 구글 번역기, 해당 훅을 직접 사용하며 번역하였습니다. 2. recoil 레파지토리를 fork를 받았습니다. 3. 번역한 내용을 md 파일을 제작한 후 Pull requests를 보냈습니다. 4. 페이스북 깃허브 봇이 아래와 같이 코멘트를 달았습니다. 요약하면 이렇습니다. "pull request를 하기 위해서는 CLA(Contributor License Agreement) 권한이 필요하니 링크에 접속하여 서명을 해라" 서명을 하게 되면 초록색으로 CLA Sign..

Others/Open Source 2022.03.09

easy-media-calc 제작 후기

https://www.npmjs.com/package/@hellojh/easy-media-calc @hellojh/easy-media-calc 반응형 스타일링을 calc를 반복적으로 사용하게 되면 가독성이 떨어집니다. www.npmjs.com 회사 퍼블리셔분들이 리액트 반응형 퍼블리싱을 할 때 "calc(100vw * (---/428))"가 반복적으로 사용되는 것을 보았습니다. 반복을 줄이고자 js파일을 만들어 자주 사용되는 스타일링 코드를 함축시켰습니다. 두 개의 인자를 받고 그 인자들을 calc형태로 뿌려주는 형태로, 코드는 어렵지 않습니다. function Width(elPx, totalPx){ return (`width:calc(100vw*(${elPx}/${totalPx}));`); } 누군가 ..

Others/Open Source 2022.01.03

npm-react-inicis 후기

https://www.npmjs.com/package/@hellojh/react-inicis @hellojh/react-inicis 이니시스 홈페이지에는 React.js로 만들어진 개발 가이드가 없기 때문에 직접 만들어 구현하였습니다. www.npmjs.com 회사 프로젝트에서 이니시스 결제가 있을 때면 팀원들은 제 코드를 그대로 사용했습니다. 단순 한두 줄의 코드가 아니라 모바일 분기 처리까지 합하여 거의 300줄이 되어갔습니다. 똑같은 코드, 똑같은 작업... 이런한것들이 비효율적이라고 생각하여 라이브러리를 만들게 되었습니다. 만들기 전 몇 가지 계획을 세웠습니다. * 확장성 좋게 만들기 컴포넌트를 제공하기보다는 실행 조건을 추가하고 싶었습니다. * 쓰기 쉽게 만들기 다수의 개발자가 사용하기 때문에 ..

Others/Open Source 2021.12.27

npm 만들고 배포하기 (React 컴포넌트)

오늘은 자신만의 라이브러리 npm(node package manager)을 만들어보겠습니다. 우선 npm사이트 회원가입이 후 이메일 인증을 해주세요. https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com 1. react파일을 생성하고..

Others/Open Source 2021.12.04