오늘은 puppeteer를 이용한 크롤링을 해봤다. 재미없을줄 알았는데 해보니까 신기하니 재밌더라고요 하하하 해보세요 님덜 퍼피티어 공식문서에 이거 만들어보라길래 냅따 만들었는데 뭔지 잘몰라요 ㅎㅎ 공식문서 보세용 const { join } = require("path"); /** * @type {import("puppeteer").Configuration} */ module.exports = { // Changes the cache location for Puppeteer. cacheDirectory: join(__dirname, ".cache", "puppeteer"), }; yarn add puppeteer를 터미널에 입력해서 puppeteer 다운 받아놓으시고요 기초가 부족한 프론트엔드 입문자라 ..

오늘은 카카오 맵 API 적용한걸 리뷰해보자. state.shops); //가게들에 대한 정보를 툴킷에서 가져옴 const router = useRouter(); const mapCenterRef = useRef({ 시군: "", 시도: "" }); //맵 센터에 대한 참조 if (shops[0]) { const { 시군, 시도 } = shops[0]; mapCenterRef.current = { 시군, 시도 }; //shops 라는 배열에 첫번째 요소가 있다면 } //그 시군과 시도 정보를 ref로 저장해둠 const [slide, setSlide] = useState(0); const [lat, setLat] = useState(0); const [lng, setLng] = useState(0); c..

pagenation을 파이어베이스를 이용해 구현해 보았다. "use client"; import React, { useEffect, useState } from "react"; import Image from "next/image"; import writeImage from "@/app/assets/images/icon/write_icon.png"; import userIcon from "../assets/images/icon/userIcon.png"; import { useQuery } from "@tanstack/react-query"; import { collection, getDocs, limit, orderBy, query, startAfter } from "firebase/firestore";..

심화플러스 주차에 만들었던 좋아요 기능을 리뷰 해보자 import React from "react"; import styled from "styled-components"; import HeartEmpty from "../../assets/images/HeartEmpty.png"; //좋아요가 눌린상태인지 여부에 import HeartFull from "../../assets/images/HeartFull.png"; //따른 이미지 두개 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; //CUD를 위한 useMutation import { addHeart, deleteHeart, getHeart } from "...

프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요. 답변 webpack , parcel등의 번들러를 사용하여 자바스크립트 와 CSS파일을 번들링 할때 최적화를 수행합니다. 코드 스플리팅 ,트리세이킹 , 미니파이케이션등을 통해 번들 크기를 최소화합니다. 이미지파일을 최적화 하여 파일크기를 줄입니다. 이미지 파일 포멧 , lazy loading ,이미지 스프라이트, 이미지 압축 을 통해 성능을 높입니다 useMemo , useCallback 과 같은 메모이 제이션을 통해 불필요한 랜더링 횟수를 줄입니다. 필요없는 리소스 로딩을 방지하고 ,CDN등을 통해 캐시에 저장된 데이터를 이용하여 정적파일의 로딩속도를 향상시킵니다. SSG , SSR등의 도입을 ..

쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요. 답변 쓰로틀링과 디바운싱은 이벤트 핸들링에 이용되는 기술입니다. 과도한 이벤트 발생을 처리하기위해 도입되었습니다. 쓰로틀링 일정주기 마다 이벤트가 발생하도록하는 기술입니다. 마우스스크롤과 같은 연속적인 이벤트는 지나치게 반복적으로 발생하기 때문에 발생하는 주기마다 한번씩 이벤트를 실행하도록 하여 성능저하를 방지합니다. 디바운싱 연이어 발생하는 이벤트중 마지막 이벤트만 실행시키는 방식입니다. 연속적으로 발생하는 이벤트중 마지막 이벤트만 실행시켜도 충분할경우에 사용합니다. 예를 들어 실시간 검색의 경우 검색창에 검색내용을 작성할때 마지막 타이핑 이후 이벤트가 실행하도록 하여서 서버부하를 줄여서 성능개선을 합니다. react 클래스형과 함수형의..