전체 글20 [javascript 알고리즘] 문자열 역순으로 뒤집기 문제: 문자열 역순으로 뒤집기문자열을 입력받아 역순으로 뒤집은 문자열을 반환하는 함수를 작성하세요.조건:내장 함수 reverse()를 사용하지 마세요공백도 그대로 유지되어야 합니다문자열 길이는 1 이상입니다function reverseString(str) { const answer = []; for (let i = 0; i 2025. 1. 11. Next.js 프로젝트에 Google Analytics 추가하고 버튼 클릭률 추적하기 Next.js로 만든 웹사이트나 애플리케이션에서 사용자 행동을 분석하기 위해 Google Analytics를 설정하고, 버튼 클릭률을 추적하는 방법을 알아보겠습니다.1. Google Analytics 설정하기1.1 기본 설정먼저 Google Analytics 계정을 만들고 데이터 스트림을 설정하여 측정 ID(G-XXXXXXXXXX)를 받아야 합니다. 그 후 Next.js 프로젝트에 다음과 같이 Google Analytics를 설정합니다.// components/GoogleAnalytics.jsimport Script from 'next/script'const GoogleAnalytics = ({ measurementId }) => { return ( {` .. 2025. 1. 11. 프론트엔드 개발자로 전환하며: 신입 프론트엔드 포트폴리오 사이트 제작기 포트폴리오 사이트 : https://zomins-portfolio.vercel.app/ 웹 퍼블리셔에서 프론트엔드 개발자로 전환하는 과정에서, 저는 한 가지 큰 도전과제에 직면했습니다. 바로 서류 전형에서 계속 고배를 마시고 있다는 점이었죠. 고민 끝에 저는 제 강점을 더 효과적으로 보여줄 수 있는 방법을 찾기로 했습니다.제가 가진 특별한 강점은 퍼블리셔 경험과 프론트엔드 개발 역량을 동시에 보유하고 있다는 것입니다. 하지만 기존 이력서만으로는 이 두 가지 역량을 충분히 전달하기 어려웠습니다. 그래서 포트폴리오 사이트를 직접 제작하기로 결심했습니다. 사이트의 주요 목표는 두 가지였습니다:퍼블리셔와 프론트엔드 개발자로서의 역량을 한눈에 보여주기프로젝트 브로셔로 더 많은 채용 담당자들의 방문을 유도하기특히 .. 2025. 1. 10. Next.js에서 여러 쿼리를 동시에 프리페칭하기 Next.js 애플리케이션에서 대시보드와 같이 여러 데이터를 한 번에 표시해야 하는 페이지를 구현할 때, 다수의 API 호출이 필요한 경우가 있습니다. 이런 상황에서 TanStack Query의 다중 프리페칭 기능을 활용하면 효율적으로 데이터를 로드할 수 있습니다.코드 설명// app/dashboard/page.tsximport { dehydrate, QueryClient } from '@tanstack/react-query'import { HydrationBoundary } from '@tanstack/react-query'export default async function DashboardPage() { const queryClient = new QueryClient() // 여러 쿼리 동시 프.. 2025. 1. 10. CORS(Cross-Origin Resource Sharing) 이해하기 CORS란?CORS(Cross-Origin Resource Sharing)는 우리의 웹 애플리케이션을 안전하게 지켜주는 보안 메커니즘입니다. 다른 출처(Origin)의 리소스를 안전하게 사용할 수 있도록 해주는 표준 메커니즘입니다.CORS 오류 발생 원인브라우저의 '동일 출처 정책' 때문에 발생하며, 다음과 같은 경우에 CORS 오류가 발생합니다:프로토콜이 다른 경우 (http vs https)도메인이 다른 경우 (example.com vs api.example.com)포트가 다른 경우 (3000 vs 8080)해결 방법서버 측 해결방법app.use((req, res, next) => { // 모든 도메인 허용 (개발 환경에서만 사용) res.header("Access-Control-Allow-Ori.. 2025. 1. 10. Next.js: 현대적인 React 웹 개발의 완벽한 프레임워크 Next.js 소개Next.js는 Vercel에서 개발한 React 기반의 풀스택 웹 프레임워크입니다. 2016년 첫 출시 이후 지속적인 발전을 거듭하며, 현재는 많은 기업들이 선택하는 프로덕션급 프레임워크로 자리잡았습니다.Next.js의 핵심 특징1. 서버 사이드 렌더링(SSR)과 정적 생성(SSG)Next.js는 페이지별로 렌더링 방식을 선택할 수 있는 유연성을 제공합니다. SSR을 통해 동적 데이터를 실시간으로 처리하거나, SSG를 통해 빌드 시점에 정적 페이지를 생성할 수 있습니다. 이는 SEO 최적화와 초기 로딩 성능 향상에 큰 도움이 됩니다.2. 파일 시스템 기반 라우팅복잡한 설정 없이 pages 디렉토리 내의 파일 구조를 기반으로 자동으로 라우팅이 구성됩니다. 동적 라우팅도 [id].js와 .. 2025. 1. 10. Redis 쉽게 알아보기 Redis가 뭔가요?Redis는 빠른 데이터 저장소예요. 컴퓨터의 메모리에 데이터를 저장해서 마치 시내버스처럼 빠르게 일을 처리할 수 있어요. 일반 데이터베이스가 시외버스라면, Redis는 시내버스인 셈이죠!Redis를 왜 쓰나요?1. 엄청 빨라요 - 메모리에 데이터를 저장해서 디스크에 저장하는 것보다 훨씬 빨라요 - 자주 쓰는 정보를 빠르게 가져올 수 있어요2. 다양한 것을 저장할 수 있어요 - 간단한 텍스트부터 복잡한 데이터까지 저장 가능해요 - 마치 레고처럼 원하는 형태로 데이터를 조립할 수 있어요3. 안전해요 - 데이터를 안전하게 보관할 수 있어요 - 실수로 데이터가 사라지는 것을 막아줘요Redis는 어디에 쓰이나요?1. 임시 저장소로 사용해요사용자 → Redis → 데이터베이스 자주 .. 2025. 1. 10. 자바스크립트로 알고리즘 문제 풀때 유용한 수학 공식 자바스크립트 알고리즘 문제 풀이에 자주 사용되는 수학 공식 모음알고리즘 문제를 풀 때 자주 활용되는 기본적인 수학 공식들을 JavaScript로 구현해보았습니다. 코딩 테스트나 알고리즘 학습에 도움이 되길 바랍니다.1. 최대공약수 (GCD)유클리드 호제법을 이용한 최대공약수 계산 방법입니다. 두 수의 최대공약수를 구하는 가장 효율적인 방법 중 하나입니다.function gcd(a, b) { return b === 0 ? a : gcd(b, a % b);}2. 최소공배수 (LCM)두 수의 최소공배수를 구하는 공식입니다. GCD를 활용하여 계산합니다.function lcm(a, b) { return (a * b) / gcd(a, b);}3. 소수 판별주어진 숫자가 소수인지 판별하는 함수입니다. 최.. 2025. 1. 10. 이전 1 2 다음
