본문 바로가기

분류 전체보기

 (265)
[react] swiperjs 사용법 https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 터미널에 npm i swiper 작성하여 설치하기 사이트-Installation 부분 참고 참고로 아래꺼를 props로 값 넣어줘야 자유롭게 각 슬라이더img width 적용됨 slidesPerView='auto'
[react] styled components 사용법 https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com 1. 설치하기 vscode 의 터미널에 npm i styled-components 작성하여 설치 2. 확장 프로그램 설치 vscode 확장 프로그램에 styled 치면 나오는 vscode-styled-components 설치 3. 사용되는 App.js에 컴포넌트 태그 넣기 ▼ 아래에선 import './App.css'; import Style from './components/Styl..
[react] mockaroo 사이트 이용 방법 (Json dummy data 만들기) https://mockaroo.com/ Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel Mock your back-end API and start coding your UI today. It's hard to put together a meaningful UI prototype without making real requests to an API. By making real requests, you'll uncover problems with application flow, timing, and API design early, improvi mockaroo.com 기존 옵션을 이용하여 JSON 파일을 만들 수..
[react] react router 사이트 이용 방법 https://reactrouter.com/ Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com React에서 페이지 전환 기능을 구현하기 위해서는 외부 라이브러리에 의존해야 한다. 페이지 전환을 위해 주로 react-router를 이용한다. Start the Tutorial 참고하기 설치 방법 (v6버전) - ..
[react] Axios (axios-http.com)사이트 이용 https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com Axios: 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리(사이트이용) - React 애플리케이션에서 API를 사용하는 방법으로는 크게 Axios(Promise 기반 HTTP 클라이언트) 와 Fetch API(Javascript 내장 Web API)가 있다. (* Web API:클라이언트 측에서..
[react] 컴포넌트 만들기 (props 사용) 컴포넌트는 클래스 컴포넌트, 함수 컴포넌트가 있다. 초기에는 클래스 컴포넌트를 주로 사용하였으나 사용하기 불편하다는 의견이 많이 나와서, 이후에는 함수 컴포넌트를 개선해서 주로 사용하게 되었다. 함수 컴포넌트 개선 과정에서 개발된 것이 훅HOOK이란 것인데, 현재 거의 훅을 사용한다. 함수 컴포넌트 function Welcome(props){ return 안녕하세요, {props.name} ; } ->Welcome이름을 가진 함수는 props객체를 받아서 인사말이 담긴 리액트 엘리먼트를 return한다.(리액트 컴포넌트) 클래스 컴포넌트 class Welcome extends React.Component{ render(){ return 안녕하세요, {this.props.name}; } } ->리액트의 모..
[react] 기본 용어 및 사용법 * React UI를 만들기 위한 JavaScript 라이브러리 (라이브러리 : 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것) * 리액트 엘리먼트 Element 요소, 성분 / 리액트 앱을 구성하는 요소 / 자바스크립트 객체 형태로 존재 DOM 엘리먼트의 가상 표현, react 앱의 가장 작은 단위로 화면에 표시할 내용을 기술한다. 브라우저 DOM 엘리먼트와 달리, react 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM은 react 엘리먼트와 일치하도록 화면이 보여질 수 있게 DOM을 업데이트 한다. 엘리먼트는 “컴포넌트(Component)“라는 널리 알려진 개념과 혼동되기 쉽다. 일반적으로 엘리먼트는 직접 ..
[react] 리액트 아이콘(react-icons 사이트) 이용방법 https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 1. 터미널 아래에 작성해 설치를 한다. npm install react-icons --save 2. 작성하는 문서 ..

티스토리툴바