코드로 대화하기

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

안녕하세요 오늘은 Git 커밋 메시지에 대하여 적어보려고 합니다. 프로젝트를 진행하다 보면 여러 사람들과 협업해야 할 때가 있는데요. 커밋 메시지를 보며 버전 관리와 동료들이 무엇을 했는지 등 한눈에 알 수 있습니다. 추가로 다음과 같은 효과들이 있습니다. * 더 좋은 커밋 로그 가독성 * 더 나은 협업과 리뷰 프로세스 * 더 쉬운 코드 유지보수 회사마다 커밋 메시지의 규칙은 다르겠지만, 이번에 소개해드릴 내용은 보편적으로 사용하는 규칙입니다. 커밋 규칙 (): // 제목 // 본문 // 푸터 커밋 메시지의 기본적인 구조입니다. 제목은 필수이고, 본문과 푸터는 선택사항입니다. 제목과 본문은 아래와 같은 규칙이 있습니다. 제목과 본문을 한 줄 띄워 분리 제목은 영문 기준 50글자로 제한 제목 첫 글자는 대..

Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch. git merge를 하다가 에러가 발생하였습니다. 왜 merge를 할 건지 commit 메시지를 남기라고 합니다. i를 누른다. (입력 모드로 넘어갑니다.) merge에 대한 메시지를 입력한다. esc를 누른다. :wq를 입력. (esc와 :를 누르면 마지막행 모드가 됩니다. "wq는 저장 후 종료한다"라는 뜻입니다.) enter를 누른다. 참고 : https://stackoverflow.com/questions/19085807/please-enter-a-commit..

Stage 올리기 // 개별 git add // 전부 git add * Commit // 메시지와 함께 커밋 git commit -m "" // add와 메시지를 동시에 커밋 git commit -am "" Push git push Branch // 브랜치 확인 git branch // 원격 브랜치 확인 git branch -r // 모든 브랜치 확인 git branch -a // 새로운 브랜치 생성 git branch // 브랜치 변경 git checkout Merge // 병합할 브랜치에서 해야 한다. git merge Log & Status // 깃 로그 확인 git log // 깃 상태 확인 git status

Mac 환경입니다. react에서 https 설정 후 npm start 실행하면 ERR_SSL_PROTOCOL_ERROR 가 나올 때가 있습니다. package.json에 아래와 같이 설정하면 해결됩니다. "start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",

mac에서 npm install시 오류가 날때가 있습니다. 아래 2개 커맨드를 차례로 실행시키시면 됩니다. sudo rm -rf /Library/Developer/CommandLineTools xcode-select --install 설치가 잘 되었는지 확인해봅니다. xcode-select --print-path 아래와 같이 Path가 나오면 다시 npm install 을 수행하면 됩니다. /Library/Developer/CommandLineTools * 참고 https://jojoldu.tistory.com/566

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}));`); } 누군가 ..

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

오늘은 자신만의 라이브러리 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파일을 생성하고..

포트번호 cmd 창에서 아래 코드를 입력하면 현재 활성화되어있는 포트 번호가 나옵니다. netstat -ano 포트 번호를 삭제하려면 pid 이용하면 됩니다. taskkill /f /pid 0000 아이피 아이피를 확인하려면 cmd 창에 아래 코드를 입력하면 됩니다. ipconfig "IPv4 주소"라는 것이 있는데 localhost 대신 사용 가능합니다.