front-end12 [react] 리액트 pagination 구현(react-js-pagination) 9/23 클론코딩 팀프로젝트 중에 페이지 넘기는 방법을 무한스크롤에서 pajination으로 변경함 라이브러리 설치 npm install react-js-pagination 사용 1. 라이브러리 import import Pagination from 'react-js-pagination'; 2. parameter로 사용할 state 설정 const [page, setPage] = useState(1);//페이지 설정 const [items, setItems] = useState(18); //한페이지에 보여줄 데이터 갯수 const handlePageChange = page => {//페이지 바뀔때 함수 setPage(page); }; const length = props.product.length;//전체.. 2022. 9. 23. [개인프로젝트] 인스타그램 클론코딩 1. 프로젝트 소개 - 개발기간: 2022/05/04 ~ 2022/05/21 - 목적: 그동안 공부한 내용을 토대로 혼자서 웹페이지 구현해보기 2. 기술 스택 - 프론트엔드(html, css, 자바스크립트) - React, Sass, 부트스트랩 3. 구현 기능 1) 좋아요 버튼 클릭 시, 좋아요 수 증가 2) 게시물 더보기 기능 - 게시물이 2줄 이상일 때, 한줄로 줄임 - 더보기 버튼 클릭하면 전체 게시물 표시 3) 댓글 모두 보기 - 댓글 숨김 - 댓글 모구 보기 클릭하면 전체 댓글 표시 4) 댓글 게시 - input창에 입력한 후, 게시 버튼 클릭하면 댓글 게시 4. 과정 Day1 ~ Day7 1) 리액트 프로젝트 생성 - 터미널에 npm create-react-app 프로젝트명 입력 - App.j.. 2022. 5. 23. 220204 드림코딩 클론코딩 유튜브 사이트 따라 만들기2 2. CSS로 스타일링~ 1) html 에 link태그로 css와 연결해주기 - 프로젝트 전반적으로 사용할 색, 사이즈 등을 변수로 정리해서 사용 - :root{ }안에 정리, 변수는 --로 시작함 - * 모든태그, body, ul, button, button:focus(버튼이 선택되었을때)에 스타일 주기 - border-box는 padding이나 margin줬을때 그것이 포함되어서 사이즈가 결정됨 - body에는 폰트 스타일주기 - list-style을 하나하나 바꾸는게 아니라 ul태그 일괄적으로 - button도 일괄적으로 스타일 주기..ㅠ - button:focus - ul, button 처럼 여기저기 사용되는 태그들은 묶을 수 있으면 묶어서 한번에 스타일링하기 - outline속성은 border보.. 2022. 2. 5. 220204 드림코딩 클론코딩 유튜브 사이트 따라 만들기 처음엔 아예 손도 못대서 영상보고 따라하다가.. 이번이 3번째 시도임.. 틀린 부분 정리하자 오른쪽이 내가 친 코드고, 왼쪽이 강의보고 따라한 것 1. HTML 마크업 - 구조 - span태그에 클래스 이름 추가 player section info section>metadata클래스 1) hashtag class: div>ul>li구조가 아니라, ul>li구조 2) titleAndButton class: button태그에 클래스 이름 설정해주기 3) views클래스 안의 내용은 그냥 text이기 때문에 div말고 span태그 사용하면 됨 (div는 블록, span은 인라인요소다. 그래서 div는 문단을 그룹화하고, span은 글자들을 그룹화 한다.) info section>button 클래스 - span.. 2022. 2. 4. 이전 1 2 3 다음
