본문 바로가기
728x90
반응형

Coding With Jina154

[React Bootstarp] 리액트부트스트랩 시작하기 ★ 설치방법은 여기로! => https://coding-with-jina.tistory.com/159 [React Bootstarp] 리액트 부트스트랩 설치하기 1. 먼저 새 프로젝트 하나를 생성해주기 2. 구글에 react bootstrap 이라고 검색해서 나오는 사이트에 들어간다(https://react-bootstrap.github.io/) 3. 사이트 가운데 있는 Get started 클릭 4. 가운데 npm i.. coding-with-jina.tistory.com 1. 리액트부트스트랩(https://react-bootstrap.netlify.app/components/buttons/#buttons) 사이트 오른쪽 검색창에 찾고자하는 태그를 검색하기 2. 검색한 태그 중에서 마음에 드는 디자인의.. 2022. 5. 18.
[React Bootstarp] 리액트 부트스트랩 설치하기 1. 먼저 새 프로젝트 하나를 생성해주기 2. 구글에 react bootstrap 이라고 검색해서 나오는 사이트에 들어간다(https://react-bootstrap.github.io/) 3. 사이트 가운데 있는 Get started 클릭 4. 가운데 npm install react-bootstrap bootstrap 이거 복사해서 npm install react-bootstrap bootstrap 5. 새로 만든 프로젝트 터미널에 복붙하고 엔터! 6. 부트스트랩 복붙한 사이트에서 좀더 스크롤을 내리면 css 관련 소스도 복사 - 이 단계를 안하면 css 안따라옴 - 둘 중 하나 복사해서 첫번째꺼는 app.js 맨 위에 두번째꺼는 index.html 파일의 태그 안에 복붙 7. 설치 끝! ★ 부트스트랩 .. 2022. 5. 18.
[React] 클릭시 등장하는 UI 만들기 - component 1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인 import React, **{ useState }** from 'react'; 2. UI가 보임/안보임 정보를 useState로 저장 let [modal, setModal] = useState(false); 3. 삼항연산자 if문을 이용해 state가 true 일때 UI를 보여줌 { modal === true ? : null } 4. function App 아래에 component를 만들어준다. function Modal(){ return( 글제목 발행일자 상세내용 ) } 5. 버튼을 만들고 onClick를 만들어서 ()⇒{setModal(true)}로 해주면 클릭시에 UI가 나타남 여기서 true 가 아니고 !modal로.. 2022. 5. 12.
[React] 리액트 좋아요 개별 클릭수 카운트하기 - 배열 copy 이용 ※ 요약정리 1) 좋아요 useState 배열로 만들어주고 → let [좋아요, 좋아요변경] = [0,0,0] 2) onClick 에서 ( )⇒{ ① 좋아요배열복사해서 → let copy = [...좋아요]; ② 카피된 배열에 카운트를 더하고 → copy[i] = copy[i]+1; ③ 다시 좋아요변경 함수를 이용해 좋아요 배열에 넣어준다. → 좋아요변경(copy); } 3) 카운트 할 곳에 {좋아요[i]} 넣어주면 끝 1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인 import React, **{ useState }** from 'react'; 2. function App 안에 각각의 좋아요를 카운트할 useState 배열 생성 여기서 좋아요 배열의 갯수는 글제목의 배열.. 2022. 5. 12.
[React] 글 리스트 반복해서 만들기 - map( ) 함수/ 컴포넌트 반복 ※ 사용하는 기본 map 문법 여기서 반복할데이터는 보통 배열명을 뜻한다. let 반복할 데이터 = ['사자', '호랑이', '토끼']; {반복할데이터.map(()⇒{ retrun(HTML)})} 1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인 import React, { useState } from 'react'; 2. function App 안에 반복해서 나열할 리스트의 내용을 useState 배열로 작성 function App() { **let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);** return( )})} ) } 3. return 안에 map 을 사용하여 반복될 html 작성 function App() { le.. 2022. 5. 5.
[Bootstrap] 부트스트랩 설치 시작하기 및 사용법(CDN방식) 1) 부트스트랩이란? - 프론트엔드 컴포넌트 라이브러리 - 메뉴, 대문, 폼, 버튼 등의 HTML CSS를 복붙식으로 개발할 수 있게 도와줌 - 빠른 웹개발이 가능 ​ ​ 2) 설치방법 CDN 방식으로 빠르게 Bootstrap을 설치하는 방법 ① 부트스트랩 홈페이지로 들어간다. https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com ​ ​ ② Get started 클릭! ​ ​ ​ ③ 오른쪽 상단에서 필요한 버전을 선택 ​ ​ ​ ④ 중간 쯤에 Starter template 이라는 부분에 있는 코드를 HTML 파일에 전부 복사붙여넣기 ​ ​ ​ ⑤ 완성 ​ ​ 3).. 2022. 1. 18.
728x90
반응형

티스토리툴바