투두리스트란? 말 그대로 투두리스트이다. 다만 우리가 개발 공부를 할 때 TodoList를 투두리스트는 개발의 기본인 CRUD를 전부 구현해야 하기 때문에 공부용 예제 및 연습으로 많이 사용한다. 우선 styled-components를 이용해서 UI부터 구현해보자. TodoList.js import React, { useState } from "react"; import styled from "styled-components"; const TodoListContainer = styled.div` display: flex; flex-direction: column; width: 30rem; margin: 10rem auto; height: 50rem; border: 1px solid black; h2 { ..
공공 데이터 포털 open API 이란? 아무래도 아직 백엔드 공부를 못해서 혼자 프로젝트를 할 때 모든 정보를 클라이언트에 담아서 해야하는 불편함이 있다. 아무리 토이프로젝트지만 API를 활용하고 싶어서 구글에 open API를 검색해봤는데 꽤나 쓸만한 open API를 갖고있는 사이트가 있었다. 공공 데이터 포털 이라는 사이트다. 정말 갖가지 open API가 다 있었다. 앞으로 꽤나 자주 이용하게 될 것 같다. 우선 유행이 지나긴 했지만 만만한게 코로나 확진수에 대한 api를 제공해준다는게 눈에 들어와 한번 사용해봤다. 그러나.. 테스트 하던 도중 잘 되다가.. 알고보니 일일 요청 횟수라는게 있었다.. 그래서 우선 하다 말았지만.. 리팩토링도 못하게 되었다.. 우선 부끄럽지만.. 대충 짠 코드다. ..
소셜 로그인이란? 웹페이지를 보다 보면 네이버 로그인, 카카오 로그인, 구글 로그인 등 사용하는 웹 페이지에 맞게 일일이 양식을 입력하지 않아도 간편하게 로그인할 수 있게 도와주는 기능이다. 취준생 때 이미 firebase를 이용해서 로그인을 구현해봤지만 이번에는 firebase를 제외하고 네이버, 카카오톡에서 지원해주는 open API를 이용해서 구현해보았다. Login import React, { useContext, useEffect, useState } from "react"; import styled from "styled-components"; import { useNavigate } from "react-router-dom"; import { UserContext } from "../data..
무한 스크롤이란? 무한 스크롤이란 뿌려주는 데이터가 너무 많아서 렌더링되는 양이 너무 많아 성능이 저하되는것을 막기위해 첫 스크롤 화면에는 적은양의 데이터만 렌더되게끔 만들어주고 사용자가 스크롤의 하단에 근접했을때 다음 데이터를 뿌려주는 기법(?) 중에 하나이다. InfiniteScrollPage.js import { useEffect, useState } from "react"; import "../App.css"; import InfiniteScroll from "../components/InfiniteScroll"; function PInfiniteScroll() { const [datas, setDatas] = useState([]); const [scrollOptions, setScrollOpt..