소셜 로그인이란? 웹페이지를 보다 보면 네이버 로그인, 카카오 로그인, 구글 로그인 등 사용하는 웹 페이지에 맞게 일일이 양식을 입력하지 않아도 간편하게 로그인할 수 있게 도와주는 기능이다. 취준생 때 이미 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..
코멘트란? 다들 알고있는 댓글기능입니다. CRUD연습하기 아주 좋은것같아 예제로 선택하였습니다. 우선 테스트케이스를 준비해봅시다. comment.test.js describe("show Test", () => { const comment = [ { id: 1, userName: "zmf1111", content: "1", }, { id: 2, userName: "zmf1111", content: "2", }, { id: 3, userName: "zmf1111", content: "3", }, ]; it("should add comment", () => { const inputWord = "4"; const expected = [ { id: 1, userName: "zmf1111", content: "1"..
이미지 확대기능이란? 말 그대로 이미지에 마우스 커서를 올려놓았을때 해당 부분을 확대해서 보여주는것입니다. 쇼핑몰같은 사이트에서 많이 사용되는 기술입니다. PZoomImage.js import React from 'react' import ZoomImage from '../components/ZoomImage' const PZoomImage = () => { return ( ) } export default PZoomImage zoomRate : 몇배만큼 확대할지 넘겨주는 props width, height: 이미지의 크기 ZoomImage.js import React, { useCallback, useRef, useState } from "react"; import styled, { css } from..
서치박스란? 서치박스는 인풋창 클릭 시 dropdown으로 아이템이 리스트형태로 나오며 input에 타이핑을하여 아이템을 쉽게 찾을 수 있게 만들어주는 기법(?) 이다. sarch.test.js describe("show Test", () => { it("should show first", () => { const datas = ["first", "second", "third", "four", "five"]; const inputWord = "first"; const expected = ["first"]; expect(searchWords(datas, inputWord)).toEqual(expected); }); it("should show firstWords f", () => { const datas ..
무한 스크롤이란? 무한 스크롤이란 뿌려주는 데이터가 너무 많아서 렌더링되는 양이 너무 많아 성능이 저하되는것을 막기위해 첫 스크롤 화면에는 적은양의 데이터만 렌더되게끔 만들어주고 사용자가 스크롤의 하단에 근접했을때 다음 데이터를 뿌려주는 기법(?) 중에 하나이다. InfiniteScrollPage.js import { useEffect, useState } from "react"; import "../App.css"; import InfiniteScroll from "../components/InfiniteScroll"; function PInfiniteScroll() { const [datas, setDatas] = useState([]); const [scrollOptions, setScrollOpt..
