reactjs4 reactJS npm publish 오픈 소스는 누가 만드는 걸까? 오픈 소스에 기여하는 경험을 기업의 채용 조건으로 내건 회사들을 심심치 않게 볼 수 있다. 오픈 소스는 누가 만드는 걸까? 필자의 경우, 기업에서 개발 생태계를 위해 배포하는 오픈 소스들도 존재하고 프로젝트를 위해 사내에서 혹은 개인이 private하게 관리하는 library도 존재한다고 생각한다. 오픈소스를 배포하고 잘 관리되고 있는 오픈소스를 공부하게 되면 개발 생태계의 선순환에 앞장 서며, 본인의 실력향상 또한 기대될 것이라 본다.(어마무시한 기업에서의 헤드헌팅은 덤일 수도 있다.) ReactJS의 cra(create react app)으로 npm에 배포하는 방법 1. 우선 cra로 프로젝트 생성을 한다. npx create-react-app [프로젝트 이름] cd .. 2022. 3. 13. reactJS 이벤트 핸들러 이름 명명 React 공식 문서 상에서 on, handle에 대해 명시해놓은 글을 발췌하였습니다. 이벤트 핸들러의 가장 기본적은 접두사는 on vs handle 1. props on의 경우 props에 사용합니다. - 기본 제공되는 이벤트 핸들러 규칙과 일치합니다. 2. Function handle의 경우 실제 동작하는 함수의 접두사로 사용합니다. 3. 특정 목적이 필요한 경우(선택적) example) Form 태그에 Submit 이벤트 핸들러 props: onFormSubmit(on + 명사 + 동사) function: handleFormSubmit(handle + 명사 + 동사) cf. props 주의할 점(이벤트 버블링) 아래와 같이 props 전체를 넘겼을 때, button의 onClick이벤트를 실행시키면.. 2022. 3. 10. reactJS 배열의 index를 Key로 사용하는 것을 지양하는 이유? React 공식문서에서 권장하지 않는 사항이라고 한다. 전제는 항목의 순서가 바뀔 수 있는 경우에서이다. 항목 값이 변수로 사용되고 key 값을 index로 나타낸다면, 항목 값이 변경된다(생성, 수정, 삭제) -> 해당하는 component가 re-render가 된다 -> React에서 동일한 Key일 경우 동일한 Dom element를 보여준다 솔루션이 있을까? 1. unique한 key값을 사용한다. - 자체 생성 - shortid - uuid 2. React 공식 문서에 있는 Robin Pokorny의 말을 인용하면 아래의 세 가지 조건을 만족하면 해당 항목 값을 사용해도 된다고 한다. 1. the list and items are static–they are not computed and do .. 2022. 3. 9. reactJS 클립 보드 복사 사이드 프로젝트를 하면서 클립보드 복사하는 방법에 대해 정리해보게 된다. 데이터를 복사하는 방법은 아래 두 가지로 정리된다. 1. execCommand API 2. Clipboard API 먼저 1의 방법은 select() 함수를 사용해 form tag(input, textarea) 안의 내용을 복사하는 방법이다. form tag를 임의로 생성하여 복사 후 지우는 방법 const handleCopy = () => { const tempFormEl = document.createElement('textarea'); // input, textarea tempFormEl.value = 'copied text!'; document.body.appendChild(tempFormEl); tempFormEl.sele.. 2022. 3. 8. 이전 1 다음 반응형
