React9 [React] 페이지네이션 구현하기(with. react-js-pagination) 회사에서 페이지네이션을 사용할 프로젝트가 생길 수도 있어서 연습 겸 만들어보았다! 🎇🎇 직접 구현해보려다가,, 라이브러리가 사용하기 정말 편하게 되어있어서 유혹을 떨치지 못하고,,,😌 그냥 라이브러리 사용해서 만들어보기로 했다. 직접 구현하는 건 11월 언젠간 해보는 걸로,,ㅎ 🤤 1. 일단 설치! 리액트 프로젝트에 각자 사용중인 패키지 매니저 명령어를 따라 페이지 네이션 라이브러리를 설치해준다. $ npm install react-js-pagination $ yarn add react-js-pagination 2. 필요한 state 및 변수, 함수 정의 (이름은 자유롭게 정하기) 1) 전체 데이터 관리하는 state 2) currentPage 관리 state ( 사용자가 가장 최근 클릭한 페이지) 3).. 2022. 11. 1. [React] React Folder Structures 🏹 리액트를 사용해서 코드를 작성할 때 폴더구조를 어떻게 잡는 게 좋을지 궁금해서 찾아보게 되었다. 기존에 나눠봤던 폴더구조는 기껏해야 api, components, style을 나누어 보았는데 좀 더 나은 폴더구조를 배워보고 싶었다. 그리고 회사에서 오픈소스를 분석할 일이 있어서 하고 있는데 큰 프로젝트다 보니 폴더가 구조화되어있어서 그냥 무턱대고 읽기보단 구조를 알고 보면 더 잘 읽힐 거 같아서 블로그에 유튜브 강의 내용, 정돈된 글을 찾아서 정리해두려고 한다. 📂Assets Folder - images, sounds, styling files.. : asset 폴더에는 이미지, 사운드파일, 공통되게 쓰이는 스타일 파일이 들어간다. 스타일 파일은 관련 컴포넌트나 페이지에 넣어줄 수도 있다. 이건 개발.. 2022. 6. 9. [React Query] 리액트 쿼리 적용(1) 출처: Codevolution - React Query Tutorial ch. 1~ 10 https://www.youtube.com/watch?v=VtWkSCZX0Ec&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2 회사에서 진행 중인 미니 프로젝트 코드를 작성하다가 전부터 궁금했던 리액트 state관리에 대해서 질문을 드렸다. Api요청에 대한 응답을 state에 넣어서 관리를 하면, Data fetch가 완료되지 않았을 때는 항상 빈 state인데 이럴 때마다 항상 useEffect나 조건문을 넣어서 해결하는 방법밖에 없는지 궁금했다. 이전에 혼자서 프로젝트를 만들어 볼 때는 보통 앞서 언급했던 방법으로 해결했었는데 매번 할 때마다 좀,, 뭔가 최선은 아닌 거 같아서 찝찝했는데.. 2022. 4. 25. [React] 소셜로그인 구현하기(with. Firebase) ✨ 버전 정보: "firebase": "^9.6.3" 0. 설치 npm install firebase 1. src 폴더에 config 폴더 생성 - auth.js - firebase-config.js 2. firebase 프로젝트 콘솔 설정에서 SDK 값 복사 -> firebase-config.js에 붙여 넣기 3. 필요한 항목 import 하기 //제공업체의 OAuth를 사용하기 위해 getAuth를 사용 import { getAuth } from "firebase/auth"; //파이어베이스를 한번 초기화 해주기위해서 사용함. import { initializeApp } from "firebase/app"; //구글 분석허용 import { getAnalytics } from "firebase/ana.. 2022. 1. 18. [React] 리액트에서 폰트어썸 사용하기 1. 터미널에 명령어 입력해서 폰트어썸을 프로젝트에 설치 yarn add @fortawesome/fontawesome-free yarn 또는 npm 사용 2. index.js 파일에 폰트어썸 import 해주기 import "@fortawesome/fontawesome-free/js/all.js"; 2022. 1. 4. [React] 리액트에서 map함수 사용하기 리액트에서 배열을 수정할 필요가 있을때 자바스크립트의 배열수정 함수인 push, pop 등은 사용하지 못한다. 위 함수들은 기존 배열을 그대로 가져다가 변경해주는 것이기 때문에 리액트가 어떤 항목이 바뀌었는지 인식하지 못하는 문제가 발 생할 수 있다. 리액트의 렌더링 기준은 예전 스테이트와 현재 스테이트가 달라졌을 때를 기준으로 한다. 대신 map함수를 사용할 수 있다. 어떻게 사용해야 하는지 간단한 예시를 들어서 기록하려고 한다. 1. 기본 사용방법 상황) state로 만들어둔 배열을 map함수를 사용해서 안에 하나씩 넣어서 화면에 출력 import "./App.css"; import React, { useState } from "react"; function App() { const [cookies,.. 2021. 11. 11. 이전 1 2 다음
