조합 계산은 일상적인 프로그래밍 문제에서 자주 등장한다. 예를 들어. 여러 개의 아이템 중에서 일부를 고를 수 있는 경우나, 팀 구성, 경기 조합 등의 문제에서 자주 활용된다.이때 조합을 계산하는 가장 일반적인 방법은 팩토리얼을 이용하는 방법이다. 조합 계산의 기본 공식은 다음과 같다.하지만 팩토리얼을 이용해서 조합을 계산한 결과 특정 테스트 케이스에서는 작동이 되지 않는 문제가 발생하였다.이에 대한 원인은 큰 수를 다룰 때 부동소수점 오차와 오버플로우 문제로 인해 발생하는 것이었다. 🔥 문제 1 : 부동 소수점 오차 (Floating-point Precision Error)컴퓨터에서는 실수를 부동소수점 방식으로 저장한다. 부동 소수점 방식이란 실수를 일정한 자릿수로 근사하여 저장하는 방식이다.이는 ..
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..
Algorithm/개념정리 2025. 3. 10. 18:49
조합 계산은 일상적인 프로그래밍 문제에서 자주 등장한다. 예를 들어. 여러 개의 아이템 중에서 일부를 고를 수 있는 경우나, 팀 구성, 경기 조합 등의 문제에서 자주 활용된다.이때 조합을 계산하는 가장 일반적인 방법은 팩토리얼을 이용하는 방법이다. 조합 계산의 기본 공식은 다음과 같다.하지만 팩토리얼을 이용해서 조합을 계산한 결과 특정 테스트 케이스에서는 작동이 되지 않는 문제가 발생하였다.이에 대한 원인은 큰 수를 다룰 때 부동소수점 오차와 오버플로우 문제로 인해 발생하는 것이었다. 🔥 문제 1 : 부동 소수점 오차 (Floating-point Precision Error)컴퓨터에서는 실수를 부동소수점 방식으로 저장한다. 부동 소수점 방식이란 실수를 일정한 자릿수로 근사하여 저장하는 방식이다.이는 ..
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..