Next.js를 이용한 프로젝트를 진행하면서 지도 서비스를 기반으로 한 기능을 구현하기로 하였다. 따라서 간편하게 이용할 수 있는 Map API를 찾아보는 중, 그중에서도 Google Map, Naver Map, Kakao Map의 선택지가 있었다. 그중에서도 Kakao Map API를 이용하기로 결정하였다. 우선 작년 채용 플랫폼 프로젝트를 진행하면서 Kakao Map API를 발급받은 키가 이미 있었기 때문에 이번 프로젝트에서도 자연스럽게 Kakao Map API를 이용하기로 결정하였다. 따라서 이번 포스팅에서는 Next.js에서 Kakao Map API를 이용해 렌더링하는 방법을 자세히 알아보고자 한다. 01. API Key 발급Kakao Map API를 이용하기 위해서는 먼저 kakao deve..
추가적으로 업데이트 예정 🎯 Q1. React 는 왜 등장했으며, 기존의 어떤 문제를 어떻게 해결해주는가?React는 UI의 복잡성 증가와 상태 관리의 어려움을 해결하기 위해 등장하였다.전통적인 DOM 조작 방식은 느리고 코드가 복잡하며, 데이터와 UI의 동기화가 어려웠다.하지만 React는 컴포넌트 기반 설계와 Virtual DOM을 통해 효율적이고 선언적인 UI 개발을 가능하게 하였다. 🎯 Q2. React 는 라이브러리인가? 프레임워크인가? 둘의 차이점 및 React 에 대해 간략히 설명하세요.React는 라이브러리이다.라이브러리: 특정 기능을 수행하며, 개발자가 필요한 부분을 선택해 사용프레임워크: 구조와 규칙을 제공하며, 개발자가 프레임워크의 방식 따라 개발React는 UI 구축에만 초점을..
Next.js로 프로젝트를 진행하며 지도 기반 기능을 구현하기 위해 Map API를 활용하는 기획을 세웠다. 이 과정에서 Next.js의 컴포넌트를 사용해 외부 스크립트를 로드해야 했고, 특히 strategy 속성을 알게 되었다. strategy 속성은 스크립트 로드 시점과 방식을 세부적으로 제어할 수 있는 강력한 도구로, 성능 최적화와 사용자 경험 개선에 중요한 역할을 하였다. 이에 컴포넌트와 strategy 속성의 활용법을 체계적으로 정리하고 공유하기 위해 이 글을 작성하게 되었다. 01. ScriptNext.js에서 는 페이지 로딩 성능을 최적화하면서 외부 스크립트를 효율적으로 로드할 수 있도록 돕는 컴포넌트이다.기본적으로 스크립트를 로드할 시점을 제어하며, 다양한 로드 전약을 통해 성능을 향..
현대 웹 환경에서 사용자들은 페이지 로딩이 느리거나, 화면 전환이 매끄럽지 않다면 사용자는 몇 초만에 웹페이지를 이탈할 가능성이 높아진다. 실제로 Google에 따르면 로딩 시간이 1초에서 3초로 증가할 경우 이탈률이 32% 증가한다고 한다. 이처럼 성능은 사용자 경험을 좌우하는 요소이며, 성공적인 웹 서비스를 구축하는데 필수적인 요소이다. 성능 최적화를 위해서는 무엇이 중요한지 명확히 이해해야 한다. 단순히 코드를 최적화하거나 이미지를 압축하는 것만으로는 충분하지 않다. 현대 웹에서는 “핵심 웹 지표”를 기반으로 사용자 경험을 측정하고 개선하는 접근이 필요하다. 이 지표들은 페이지 로드 속도부터 사용자 인터페이스와의 상호작용 속도까지 다양한 요소를 표괄하며 서비스의 성능을 데이터로 이해하고 최적화 방향..
JavaScript를 이용해 코딩테스트를 풀다 보면 문자열을 배열로 변환해야 하는 경우가 존재한다.예를 들어 'javascript'라는 문자열을 ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']로 변환하는 것처럼이다.이 과정에서 사용할 수 있는 방법은 크게 3가지가 있다. 이번 포스팅에서는 문자열을 배열로 변환하는 방법을 알아보고 코딩테스트를 풀 때 어떤 방법이 가장 효율적인지에 대해 알아보고자 한다. 01. 문자열에서 배열 변환하는 방법 3가지1️⃣ split 메서드'string'.split(''); 2️⃣ 스프레드 연산자[...'string']; 3️⃣ Array.from 메서드Array.from('string'); 02. 3가지 방법 속도 비교 : 스프레..
Next.js 프로젝트를 생성할 때마다 개발 환경 초기 세팅을 다시 찾아보는 것이 귀찮아서, 이번 포스팅에서는 해당 과정을 정리해 보았다. 이 포스팅에서는 Next.js(v.15.0.3), TypeScript, 그리고 eslint(airbnb)를 기준으로 설정 방법을 다룬다. 01. Next.js 설치먼저 아래 명령어(create-next-app)을 통해 Next.js 초기 세팅을 한다.npx create-next-app@latest 설치 조건은 아래와 같이 선택하였다.프로젝트 이름 설정TypeScript 사용 여부 선택 → 해당 프로젝트에서는 TypeScript를 사용하려 하였으므로 Yes 선택ESLint 적용할지 여부 → 문법 틀린 부분 지적해주는 Linter 적용하기 위해 Yes 선택Tailwin..
01. Middlewaremiddleware는 페이지를 렌더링하기 전에 서버 측에서 실행되는 함수이다.즉, 요청이 완료되기 전에 코드를 실행할 수 있게 해주며, 그런 다음 요청에 따라 응답을 수정할 수 있다.미들웨어는 캐시된 콘텐츠와 라우트가 일치하기 전에 실행되며, 자세한 내용은 아래 Matching Paths와 Matcher에서 다룬다. 미들웨어에서는 Request 객체와 Response 객체에 접근할 수 있으며, 이를 활용해 요청 정보를 받아와 부가적인 처리를 하고 응답 객체에 무언가를 추가하거나 응답을 변경할 수 있다. 미들웨어는 다음과 같은 상황에서 사용할 수 있다.페이지 렌더링 전에 인증을 확인하거나 요청을 확인할 때요청 데이터를 사전에 처리하거나 특정 API 요청을 수행하거나 캐시를 관리할 ..
에러 핸들링은 단순히 에러 메시지를 출력하는 것을 넘어, 에러가 발생했을 때 이를 어떻게 처리할 지에 대한 구체적인 전략을 포함한다.특히, React에서 제공하는 에러 바운더리는 컴포넌트 트리 내에서 발생한 에러를 감지하고 이를 효과적으로 처리할 수 있는 방법을 제공한다. 이번 포스팅에서는 Next.js에서 에러 핸들링을 구현하는 방법과 에러 바운더리를 활용해 에러 처리를 효율적으로 관리하는 방법을 알아보고자 한다. 01. Error Handling에러는 크게 두 가지로 나뉜다.예상 가능한 에러 (Expected Errors) : 정산적인 동작 중에 발생할 수 있는 에러예상하지 못한 예외 (Uncaught Exceptions) : 예기치 않은 에러로, 일반적으로 어플리케이션의 버그로 간주 # 1. 예상..
01. Server Actions란?Server Actions는 Next.js 13에서 도입된 새로운 기능으로, 서버에서 직접 실행되는 비동기 함수이다.기존에는 데이터 가져오기(fetching)와 데이터 변경(mutation)을 위해 API 라우트를 설정하고, 클라이언트 컴포넌트에서 이를 호출하는 방식이 일반적이었다. 이 방식에서 클라이언트가 서버로 데이터를 요청할 때마다 별도의 네트워크 통신이 발생하고 API 요청 및 응답 처리를 위한 추가 코드가 필요했다.정리하자면,기존에는 서버 컴포넌트에서 fetching(데이터 읽기) 작업만 수행할 수 있었고, 데이터 변경 작업은 클라이언트 컴포넌트에서 처리해야 했다.만약 데이터를 변경하려면, 클라이언트 컴포넌트에서 API 요청을 만들어 서버로 데이터를 전송한 뒤..
Next.js에서는 기능, 페이지 등 상황에 따라 CSR, SSR, SSG 등 데이터를 어떤 방법으로 가져올 지를 선택하는 것이 중요하다.리액트는 CSR을 기본으로 데이터를 패칭하였다. 이는 페이지 로드 시 초기 HTML은 빈 상태로 제공되고, 브라우저에서 JS가 로드된 후 클라이언트에서 데이터를 가져와 렌더링한다. 하지만 이 방식은 서버에서 HTML이 미리 렌더링되지 않기 때문에 SEO에 불리할 수 있다. 또한 네트워크 요청 이후 화면에 데이터가 표시되기 때문에 초기 로딩이 느릴 수 있다. 반면 Next.js는 CSR, SSR, SSG 등 다양한 렌더링 방식을 제공한다. 따라서 SEO가 중요하고 초기 로딩 성능이 중요한 경우 SSR이나 SSG를, 실시간 데이터가 필요한 경우에는 CSR 등 상황에 따라 ..
Front-End/Next.js 2024. 11. 27. 15:05
Next.js를 이용한 프로젝트를 진행하면서 지도 서비스를 기반으로 한 기능을 구현하기로 하였다. 따라서 간편하게 이용할 수 있는 Map API를 찾아보는 중, 그중에서도 Google Map, Naver Map, Kakao Map의 선택지가 있었다. 그중에서도 Kakao Map API를 이용하기로 결정하였다. 우선 작년 채용 플랫폼 프로젝트를 진행하면서 Kakao Map API를 발급받은 키가 이미 있었기 때문에 이번 프로젝트에서도 자연스럽게 Kakao Map API를 이용하기로 결정하였다. 따라서 이번 포스팅에서는 Next.js에서 Kakao Map API를 이용해 렌더링하는 방법을 자세히 알아보고자 한다. 01. API Key 발급Kakao Map API를 이용하기 위해서는 먼저 kakao deve..
Front-End/기술 면접 2024. 11. 26. 21:21
추가적으로 업데이트 예정 🎯 Q1. React 는 왜 등장했으며, 기존의 어떤 문제를 어떻게 해결해주는가?React는 UI의 복잡성 증가와 상태 관리의 어려움을 해결하기 위해 등장하였다.전통적인 DOM 조작 방식은 느리고 코드가 복잡하며, 데이터와 UI의 동기화가 어려웠다.하지만 React는 컴포넌트 기반 설계와 Virtual DOM을 통해 효율적이고 선언적인 UI 개발을 가능하게 하였다. 🎯 Q2. React 는 라이브러리인가? 프레임워크인가? 둘의 차이점 및 React 에 대해 간략히 설명하세요.React는 라이브러리이다.라이브러리: 특정 기능을 수행하며, 개발자가 필요한 부분을 선택해 사용프레임워크: 구조와 규칙을 제공하며, 개발자가 프레임워크의 방식 따라 개발React는 UI 구축에만 초점을..
Front-End/Next.js 2024. 11. 25. 21:32
Next.js로 프로젝트를 진행하며 지도 기반 기능을 구현하기 위해 Map API를 활용하는 기획을 세웠다. 이 과정에서 Next.js의 컴포넌트를 사용해 외부 스크립트를 로드해야 했고, 특히 strategy 속성을 알게 되었다. strategy 속성은 스크립트 로드 시점과 방식을 세부적으로 제어할 수 있는 강력한 도구로, 성능 최적화와 사용자 경험 개선에 중요한 역할을 하였다. 이에 컴포넌트와 strategy 속성의 활용법을 체계적으로 정리하고 공유하기 위해 이 글을 작성하게 되었다. 01. ScriptNext.js에서 는 페이지 로딩 성능을 최적화하면서 외부 스크립트를 효율적으로 로드할 수 있도록 돕는 컴포넌트이다.기본적으로 스크립트를 로드할 시점을 제어하며, 다양한 로드 전약을 통해 성능을 향..
Front-End 2024. 11. 24. 20:23
현대 웹 환경에서 사용자들은 페이지 로딩이 느리거나, 화면 전환이 매끄럽지 않다면 사용자는 몇 초만에 웹페이지를 이탈할 가능성이 높아진다. 실제로 Google에 따르면 로딩 시간이 1초에서 3초로 증가할 경우 이탈률이 32% 증가한다고 한다. 이처럼 성능은 사용자 경험을 좌우하는 요소이며, 성공적인 웹 서비스를 구축하는데 필수적인 요소이다. 성능 최적화를 위해서는 무엇이 중요한지 명확히 이해해야 한다. 단순히 코드를 최적화하거나 이미지를 압축하는 것만으로는 충분하지 않다. 현대 웹에서는 “핵심 웹 지표”를 기반으로 사용자 경험을 측정하고 개선하는 접근이 필요하다. 이 지표들은 페이지 로드 속도부터 사용자 인터페이스와의 상호작용 속도까지 다양한 요소를 표괄하며 서비스의 성능을 데이터로 이해하고 최적화 방향..
Front-End/JavaScript 2024. 11. 23. 22:25
JavaScript를 이용해 코딩테스트를 풀다 보면 문자열을 배열로 변환해야 하는 경우가 존재한다.예를 들어 'javascript'라는 문자열을 ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']로 변환하는 것처럼이다.이 과정에서 사용할 수 있는 방법은 크게 3가지가 있다. 이번 포스팅에서는 문자열을 배열로 변환하는 방법을 알아보고 코딩테스트를 풀 때 어떤 방법이 가장 효율적인지에 대해 알아보고자 한다. 01. 문자열에서 배열 변환하는 방법 3가지1️⃣ split 메서드'string'.split(''); 2️⃣ 스프레드 연산자[...'string']; 3️⃣ Array.from 메서드Array.from('string'); 02. 3가지 방법 속도 비교 : 스프레..
Front-End/Next.js 2024. 11. 22. 20:51
Next.js 프로젝트를 생성할 때마다 개발 환경 초기 세팅을 다시 찾아보는 것이 귀찮아서, 이번 포스팅에서는 해당 과정을 정리해 보았다. 이 포스팅에서는 Next.js(v.15.0.3), TypeScript, 그리고 eslint(airbnb)를 기준으로 설정 방법을 다룬다. 01. Next.js 설치먼저 아래 명령어(create-next-app)을 통해 Next.js 초기 세팅을 한다.npx create-next-app@latest 설치 조건은 아래와 같이 선택하였다.프로젝트 이름 설정TypeScript 사용 여부 선택 → 해당 프로젝트에서는 TypeScript를 사용하려 하였으므로 Yes 선택ESLint 적용할지 여부 → 문법 틀린 부분 지적해주는 Linter 적용하기 위해 Yes 선택Tailwin..
Front-End/Next.js 2024. 11. 21. 15:16
01. Middlewaremiddleware는 페이지를 렌더링하기 전에 서버 측에서 실행되는 함수이다.즉, 요청이 완료되기 전에 코드를 실행할 수 있게 해주며, 그런 다음 요청에 따라 응답을 수정할 수 있다.미들웨어는 캐시된 콘텐츠와 라우트가 일치하기 전에 실행되며, 자세한 내용은 아래 Matching Paths와 Matcher에서 다룬다. 미들웨어에서는 Request 객체와 Response 객체에 접근할 수 있으며, 이를 활용해 요청 정보를 받아와 부가적인 처리를 하고 응답 객체에 무언가를 추가하거나 응답을 변경할 수 있다. 미들웨어는 다음과 같은 상황에서 사용할 수 있다.페이지 렌더링 전에 인증을 확인하거나 요청을 확인할 때요청 데이터를 사전에 처리하거나 특정 API 요청을 수행하거나 캐시를 관리할 ..
Front-End/Next.js 2024. 11. 20. 15:34
에러 핸들링은 단순히 에러 메시지를 출력하는 것을 넘어, 에러가 발생했을 때 이를 어떻게 처리할 지에 대한 구체적인 전략을 포함한다.특히, React에서 제공하는 에러 바운더리는 컴포넌트 트리 내에서 발생한 에러를 감지하고 이를 효과적으로 처리할 수 있는 방법을 제공한다. 이번 포스팅에서는 Next.js에서 에러 핸들링을 구현하는 방법과 에러 바운더리를 활용해 에러 처리를 효율적으로 관리하는 방법을 알아보고자 한다. 01. Error Handling에러는 크게 두 가지로 나뉜다.예상 가능한 에러 (Expected Errors) : 정산적인 동작 중에 발생할 수 있는 에러예상하지 못한 예외 (Uncaught Exceptions) : 예기치 않은 에러로, 일반적으로 어플리케이션의 버그로 간주 # 1. 예상..
Front-End/Next.js 2024. 11. 19. 16:32
01. Server Actions란?Server Actions는 Next.js 13에서 도입된 새로운 기능으로, 서버에서 직접 실행되는 비동기 함수이다.기존에는 데이터 가져오기(fetching)와 데이터 변경(mutation)을 위해 API 라우트를 설정하고, 클라이언트 컴포넌트에서 이를 호출하는 방식이 일반적이었다. 이 방식에서 클라이언트가 서버로 데이터를 요청할 때마다 별도의 네트워크 통신이 발생하고 API 요청 및 응답 처리를 위한 추가 코드가 필요했다.정리하자면,기존에는 서버 컴포넌트에서 fetching(데이터 읽기) 작업만 수행할 수 있었고, 데이터 변경 작업은 클라이언트 컴포넌트에서 처리해야 했다.만약 데이터를 변경하려면, 클라이언트 컴포넌트에서 API 요청을 만들어 서버로 데이터를 전송한 뒤..
Front-End/Next.js 2024. 11. 18. 22:00
Next.js에서는 기능, 페이지 등 상황에 따라 CSR, SSR, SSG 등 데이터를 어떤 방법으로 가져올 지를 선택하는 것이 중요하다.리액트는 CSR을 기본으로 데이터를 패칭하였다. 이는 페이지 로드 시 초기 HTML은 빈 상태로 제공되고, 브라우저에서 JS가 로드된 후 클라이언트에서 데이터를 가져와 렌더링한다. 하지만 이 방식은 서버에서 HTML이 미리 렌더링되지 않기 때문에 SEO에 불리할 수 있다. 또한 네트워크 요청 이후 화면에 데이터가 표시되기 때문에 초기 로딩이 느릴 수 있다. 반면 Next.js는 CSR, SSR, SSG 등 다양한 렌더링 방식을 제공한다. 따라서 SEO가 중요하고 초기 로딩 성능이 중요한 경우 SSR이나 SSG를, 실시간 데이터가 필요한 경우에는 CSR 등 상황에 따라 ..