프론트엔드/React35 NPM vs YARN 1. 특징NPM- Node Package Manager- 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자.- 단 몇 줄의 command로 패키지들을 설치하여 사용할 수 있다. (ex. axios, react-router-dom 등)- 많은 패키지들이 존재한다.- npm이 없었을 때는, 필요로 하는 기능을 추가하기 위해 직접 작성하거나 github을 통해 다운로드하여 사용했다. 이런 불편함을 해소하기 위해 등장했다. - 저장소의 취약한 보안 이슈, 의존 패키지의 버저닝 이슈가 있다.- 패키지가 많아짐에 따라 빌드 성능이 떨어진다. YARN- Yet Another Resource Negotiator- 2016년 페이스북에서 개발한 패키지 관리자.- npm과 같은 기능을 수행하지.. 2023. 7. 1. 5. 컴포넌트(Component) 23.03.10 ver 1. 참고 도서 & 자료 리액트를 다루는 기술(초판 9쇄 22.06.30) http://aladin.kr/p/NMeIK 리액트를 다루는 기술 리액트 베스트셀러 1위, 리액트를 다루는 기술 개정판. 리액트 16.8 버전에 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. 이에 맞춰 책에 사용된 주요 예시 www.aladin.co.kr 2. 컴포넌트의 기능 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 준다. 라이플사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있다. 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다. 컴포넌트를 선언하는 방식 리액트 공.. 2023. 3. 10. JSX 문법 최종 수정 : 24.06.01JSX란?자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다. HTML과 비슷하지만 완전히 똑같지는 않다. 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며, 용도도 다르고 문법도 조금씩 차이가 난다. # JSX의 장점■ 보기 쉽고 익숙하다JSX를 사용하는 주된 이유HTML 코드를 작성하는 것과 비슷하여, 가독성이 높고 작성하기도 쉽다.■ 더욱 높은 활용도JSX에서는 div나 span 같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JS.. 2023. 3. 7. onSubmit / onClick / onChange 230125 ver. 문득 비슷한 것 같으면서도 정확히 무슨 차이인지 몰라서 찾아봤다. 그저 느낌만으로 사용해왔는데, 정리함으로써 조금 정리됐다. onSubmit 과 onClick 공통점 - 자바스크립트를 호출하기 위해 사용되는 EventHandler onSubmit - form 태그 내부에서만 사용 가능 - form이 submit(제출)될 때 발생하는 이벤트 - form안에 있는 것을 validate(검증) 한 후에 return이 true, false 일 경우에 호출되는 역할을 하는 이벤트핸들러 - 기본적으로 호출될 때, 새로고침 효과가 발생한다. - e.preventDefault(); 를 작성하면 새로고침이 되지 않도록 할 수 있다. onClick - form 태그와 무관하게 사용 가능, 즉 외부에서.. 2023. 1. 25. import cn from {classnames} 참고 링크 https://github.com/JedWatson/classnames TodoList 를 만들다가 cn 이 뭔지 궁금해졌다. classnames은 리액트 라이브러리 중 하나이다. 조건부로 classNames를 결합할 수 있는 자비스크립트의 유틸리티 설치방법은 아래와 같다. // npm npm i classnames // Bower bower i classnames // or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`) yarn add classnames 2023. 1. 25. 이전 1 ··· 4 5 6 7 다음