분류 전체보기

[Lv1]  모의고사function solution(answers) { const user1 = [1, 2, 3, 4, 5]; const user2 = [2, 1, 2, 3, 2, 4, 2, 5]; const user3 = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]; const answer = [0, 0, 0]; const result=[]; for (let i = 0; i 단순하게, 정답배열과 각 user1,2,3의 배열을 순회하면서 각 index의 정답이 일치하는지 확인하면서 정답개수를 카운트해준뒤, 가장 정답을 맞춘 유저를 정답갯수와 비교해 answer 배열에 push해준다. 🛠 Refactoringfunction solution(answers)..

SSR와 CSR의 SEO CSR (React.js) CSR(ClientSide Rendering)의 경우 초기에 빈 html 문서를 전달하기 때문에, 봇이 데이터를 수집하기 어렵기때문에 SEO에 불리하다.   SSR(Next.js)하지만, SSR(ServerSide Rendering)은 클라이언트가 요청한 페이지를 서버에서 동적으로 생성해 브라우저에 보내는 방식으로, 이미 서버쪽에서 만들어진 완성된 html을 검색엔진들이 크롤링이 가능하기때문에 검색에 유리해진다. SEO 진단✅ SSR의 장점인 SEO 성능 최적화 작업하기 전, SEO checkup을 해보았다.https://pagespeed.web.dev/analysis/https-balanco-vercel-app/hxv2uh2yl9?form_factor..

[Lv1] 폰켓몬function solution(nums) { const map=new Map(); //폰켓몬 종류 구하기 for(const num of nums){ map.set(num,map.get(num)+1||1) } const type=map.size return Math.min(type,Math.floor(nums.length/2));}최대한 다양한 종류의 폰켓몬을 가져가길 원하고, nums/2만큼의 폰켓몬을 가져갈 수 있기 때문에 폰켓몬 종류의 수와 nums/2중 최소값을 리턴해주면 된다.   🛠 Refactorfunction solution(nums) { //폰켓몬 종류 구하기 const set=new Set(nums); c..

이와같이, 채팅을 입력했을때 수동으로 스크롤을 해줘야하는 불편함이 있었다. "use client";import { useEffect, useRef } from "react";function MessageList({ messageList }) { const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } }, [messageList]); return ( {messageList.map((message) => { return ( 메시지 ); ..

채팅 입력창에 이모지 아이콘을 누르면, 이모티콘 키보드가 나와 이모지를 입력할 수 있게 구현하고 싶었다.  emoji-picker-react const [showPicker, setShowPicker] = useState(false); const [message, setMessage] = useState("");const onEmojiClick = (event, emojiObject) => { setMessage((prevMessage) => prevMessage + emojiObject.emoji); setShowPicker(false); }; return ( setMessage(e.target.value)} > ..

max-width로 반응형 CSS//tailwind.config.tsmodule.exports = { theme: { screens: { 'sm-max': { 'max': '639px' }, // 모바일 (최대 639px) 'md-max': { 'max': '767px' }, // 작은 태블릿 (최대 767px) 'lg-max': { 'max': '1023px' }, // 큰 태블릿 (최대 1023px) 'xl-max': { 'max': '1279px' }, // 데스크탑 (최대 1279px) '2xl-max': { 'max': '1535px' } // 큰 데스크탑 (최대 1535px) }, },데스크탑 first로 개..

기본 Layoutimport Footer from "@/components/Footer";import Header from "@/components/Header";function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} );}export default RootLayout; Error나 Loading 중일때, children에 해당하는 content가 없으면, 저렇게 footer가 뷰포트 중간으로 올라와버리는 문제가 발생한다.  Flex-grow 사용import Footer from "@/components/Footer";..

DebounceDebounce는 과도한 요청으로 발생할 수 있는 성능 저하 문제를 개선할 수 있는 방법 중 하나다.input창에 연속적으로 값을 입력할때, 이벤트 변경이 발생하고 그때마다 네트워크 요청이 발생하게 되는데, 이런 경우에 지속적인 요청으로 인해 네트워크 용량과 백엔드 등 과부하가 발생할 수 있으므로 성능면에서 좋지 못하다.(유료 API을 사용할경우엔 비용면으로도 문제가발생한다..🫠) 👉🏻 Debounce를 사용해, 연속적으로 발생하는 이벤트 중 마지막 이벤트(검색할 키워드) 만을 기점으로 네트워크 요청을 보내, 사용자 입력과 같은 빈번한 이벤트를 처리할때 사용한다.  useDebounce : 사용자 정의 Hookimport { useState, useEffect } ..