전체 글

📌 svgr loader을 통해 컴포넌트로 사용 1. @svgr/webpack 설치 npm i -D @svgr/webpack 2. Next.js의 구성 파일(next.config.js)을 열고, 다음과 같이 설정해 줍니다. /** @type {import('next').NextConfig} */ const nextConfig = { webpack: (config) => { config.module.rules.push({ test: /\.svg$/i, use: ["@svgr/webpack"], }); return config; }, }; module.exports = nextConfig; 3. 이제 SVG 파일을 컴포넌트로 변환하여 사용할 수 있습니다. import MySVG from '../compone..

문제 설명 머쓱이는 친구들과 369게임을 하고 있습니다. 369게임은 1부터 숫자를 하나씩 대며 3, 6, 9가 들어가는 숫자는 숫자 대신 3, 6, 9의 개수만큼 박수를 치는 게임입니다. 머쓱이가 말해야하는 숫자 order가 매개변수로 주어질 때, 머쓱이가 쳐야할 박수 횟수를 return 하도록 solution 함수를 완성해보세요. 풀이 function solution(order) { const count = String(order).match(/[369]/g)?.length || 0; return count; } String(order)는 숫자를 문자열로 변환 ➡️ match() 메서드는 문자열에 정규식을 적용하여 일치하는 부분을 찾아 배열로 반환 정규식 /[369]/g를 사용하면 숫자에서 '3', ..

문제 정수가 담긴 배열 numbers와 문자열 direction가 매개변수로 주어집니다. 배열 numbers의 원소를 direction 방향으로 한 칸씩 회전시킨 배열을 return하도록 solution 함수를 완성해주세요. 풀이 function solution(numbers, direction) { const length = numbers.length; const rotated = [...numbers]; if( direction === "left" ){ const firstEl = rotated.shift() rotated.push(firstEl) }else if( direction === "right"){ const lastEl = rotated.pop() rotated.unshift(lastEl)..

📌 SEO란 무엇인가? 검색 엔진 최적화(SEO: Search Engine Optimization)는 검색엔진이 웹 페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여, 검색결과를 상위에 나올 수 있게 하는 행위. 🚀 검색엔진 최적화를 위한 작업 1. 메타 태그(Meta Tag) 태그 메타 태그는 웹페이지를 검색 엔진에 검색 했을 때 노출되는 제목으로 이해할 수 있습니다. 메타 태그는 단순히 검색 결과에만 노출되는 것이 아니라, 브라우저 탭 상에도 노출 되므로 중요도가 높습니다. 메타 태그가 적용된 모습은 브라우저 내의 개발자 도구를 통해 확인할 수 있고, 요소로 정의됩니다. 태그 Meta Description 이라고도 부르는데, 해당 웹페이지의 설명을 요약한 한 두 줄의 문장을 뜻합니다...

📌 meta 태그란? meta 태그는 HTML 문서에서 다양한 메타데이터(metadata)를 정의하기 위해 사용되는 태그입니다. 메타데이터는 문서에 대한 추가 정보를 제공하며, 브라우저나 검색 엔진 등이 문서를 해석하고 처리할 때 활용될 수 있습니다. 📌 meta 태그의 요소 meta 태그는 HTML 문서의

DOCTYPE은 "Document Type Declaration"의 약어로 HTML 문서의 버전 및 유형을 정의하는 선언문 입니다. HTML 문서의 첫 번째 줄에 위치하며, 웹 브라우저에게 해당 문서가 어떤 버전의 HTML이며 어떤 규격을 따르는지 알려줍니다. DOCTYPE 선언은 문서의 구조와 렌더링 방식에 영향을 줄 수 있습니다. 올바른 DOCTYPE을 사용하면 웹 브라우저는 해당 문서를 HTML5로 해석하고 적절한 렌더링 엔진을 선택하여 페이지를 표시할 수 있습니다. 🧐 DOCTYPE을 정확하게 지정하면? 브라우저 간의 일관된 동작을 유지 HTML 요소 및 기능을 올바르게 해석하여 웹 페이지의 호환성과 일관성을 향상 웹 표준 준수를 강조하고 검색 엔진 최적화(SEO)에도 도움 - HTML5의 DOC..

🧐 배포시 일부 이미지가 들어오지 않는 문제 프로젝트를 하던 도중에 localhost 주소 에서는 잘 들어오더 이미지가 배포시에는 들어오지 않는 문제가 발생했다. background: url(/public/assets/SignInBg.png) no-repeat; 해결방법 : process.env.PUBLIC_URL 환경 변수 사용 background: url(${process.env.PUBLIC_URL}/assets/SignInBg.png) no-repeat; 프로덕션 환경에서는 애플리케이션의 경로가 변경될 수 있기 때문에, 정적 파일의 경로를 하드코딩하는 것은 좋지 않습니다. 이를 해결하기 위해 process.env.PUBLIC_URL을 사용하는 것입니다. process.env.PUBLIC_URL은 애..

🧐 파이어베이스로 좋아요 기능 구현 1. 찜을 누르는순간 likedby 필드 가 생기고 "내가 로그인한 uid : Boolean" 형식으로 추가 됩니다 . 🔽 깃헙으로 로그인한 내 uid 2. meetups collection에서 likedBy 필드 중 현재 사용자가 좋아요를 누른 Meetup을 검색 const likedMeetupsQuery = query( collection(db, 'meetups'), where('likedBy.' + currentUser.uid, '==', true) ); 3. getDocs 함수를 사용하여 쿼리의 결과를 가져옵니다. const likedMeetupsSnapshot = await getDocs(likedMeetupsQuery); 4. 가져온 데이터의 배열에서 각 문..