Dachae's DevLogs

Next.js Next.js는 React 기반의 웹 애플리케이션 개발을 위한 프레임워크입니다. React는 컴포넌트 기반 UI 라이브러리로 강력하지만, 실제 웹 애플리케이션을 만들기 위해서는 라우팅, 데이터 패칭, 서버 렌더링, SEO 최적화, 코드 분할 등의 여러 요소를 직접 구현해야 합니다.Next.js는 이러한 복잡한 기능들을 기본 제공하여, 개발자가 더 적은 설정과 코드로 더 강력한 웹 애플리케이션을 만들 수 있도록 도와줍니다. 1. Next.js란 무엇인가요?Next.js는 React 기반의 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 도와주는 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅, 이미지 최적화 등 React로는 직접 구현하기 복잡한 ..

xlsx 웹 애플리케이션에서 사용자가 직접 엑셀 파일을 업로드하고, 그 내용을 읽어온 뒤 수정하거나 다시 다운로드할 수 있다면 정말 유용합니다. 특히 보고서 처리, 데이터 검증, 간단한 데이터 편집 UI 등에 적합하죠. 라이브러리로는 가장 널리 쓰이는 xlsx를 사용합니다. 이 글에서는 Node.js 없이, 순수 React에서 엑셀 파일을 읽고, 수정하고, 다시 엑셀이나 CSV로 다운로드하는 과정을 소개합니다. 1. xlsx 라이브러리란?xlsx는 JavaScript에서 엑셀 파일을 읽고 쓰기 위해 만들어진 라이브러리입니다.브라우저, Node.js 환경 모두에서 사용할 수 있고, .xlsx, .xls, .csv 등 다양한 포맷을 지원합니다.공식 명칭은 "SheetJS"이며, xlsx는 그 중 핵심 모듈..

Canvas 태그 HTML에서 동적으로 그래픽을 그릴 수 있는 방법이 필요할 때 사용하는 핵심 도구가 바로 태그입니다. 이 태그는 간단해 보이지만, 자바스크립트와 함께 사용하면 2D 게임, 애니메이션, 실시간 데이터 시각화, 심지어 비디오 처리까지 매우 다양한 응용이 가능합니다.이 글에서는 태그의 기본 개념부터 시작해, 자바스크립트와 함께 사용하는 방식, 그리고 실제 예제까지 다뤄보겠습니다. 1. canvas 태그란?는 HTML5에서 도입된 태그로, 비트맵 기반 그래픽을 동적으로 그릴 수 있는 영역을 제공합니다. 자체적으로는 아무런 그래픽을 그리지 않으며, 반드시 JavaScript를 통해 내용을 렌더링해야 합니다. 위 코드는 폭 400px, 높이 300px짜리 캔버스를 만들어줍니다. 하지만 이 상..

크로스 브라우징(Cross-Browsing) 웹사이트는 다양한 사용자 환경에서 동일하게 동작해야 합니다. 하지만 브라우저마다 렌더링 방식과 지원하는 기능이 조금씩 다르기 때문에, 같은 코드라도 브라우저마다 레이아웃이 깨지거나 기능이 제대로 작동하지 않는 문제가 발생할 수 있습니다. 이를 해결하기 위한 전략이 바로 크로스 브라우징(Cross-Browsing)입니다.이 글에서는 크로스 브라우징의 개념부터, 주요 원인, 해결 방법까지 자세히 다룹니다. 1. 크로스 브라우징이란?크로스 브라우징(Cross-Browsing)은 웹사이트나 웹 애플리케이션이 다양한 브라우저 환경에서 일관된 동작과 UI를 보장하도록 개발하는 것을 의미합니다.대표적인 브라우저에는 다음과 같은 것들이 있습니다:Google ChromeMo..

세션 하이재킹(Session Hijacking) 웹 애플리케이션의 보안에서 세션은 사용자의 신뢰와 인증을 유지하는 핵심 요소입니다. 하지만 이 세션이 공격자에게 탈취된다면? 사용자는 모르게 로그인 정보가 털리고, 민감한 정보가 유출될 수 있습니다.이 글에서는 세션 하이재킹(Session Hijacking)의 개념과 종류, 방어 방법에 대해 깊이 있게 설명합니다. 1. 세션 하이재킹이란?세션(Session)은 사용자가 로그인 등 인증 과정을 완료한 뒤, 서버가 사용자를 식별하기 위해 유지하는 상태 정보입니다. 세션 하이재킹(Session Hijacking)은 공격자가 사용자의 세션을 가로채서, 그 세션을 도용하는 공격 기법을 의미합니다.즉, 인증된 사용자인 척하면서 웹 애플리케이션에 접근해 민감한 정보를..

하이브리드 앱(Hybrid App) 모바일 앱 개발 방식은 점점 다양해지고 있습니다. 완전한 네이티브 앱, 웹앱, 그리고 그 사이에서 양쪽의 장점을 결합한 하이브리드 앱(Hybrid App)이 대표적입니다.하이브리드 앱은 웹 기술(HTML, CSS, JavaScript)로 UI를 만들고, 이를 네이티브 앱 안에서 실행시키는 방식으로, 한 번의 코드로 여러 플랫폼에서 실행 가능한 장점이 있습니다.이 글에서는 하이브리드 앱의 정의, 동작 구조, 장단점, 주요 프레임워크, 그리고 다른 앱 방식과의 차이를 자세히 살펴봅니다. 1. 하이브리드 앱(Hybrid App)이란?하이브리드 앱은 웹 기술로 만든 콘텐츠를 네이티브 앱의 껍데기(WebView) 안에서 실행하는 앱입니다. 즉, 실제 앱의 핵심 UI는 웹 페이..

네이티브 앱(Native App) 모바일 앱 개발 방식에는 여러 가지가 있습니다. 그중에서도 가장 전통적이면서도 성능이 뛰어난 방식이 바로 네이티브 앱(Native App)입니다.iOS에서는 Swift 또는 Objective-C, Android에서는 Kotlin 또는 Java를 사용해 각 운영체제(OS)에 맞춰 개발하는 방식이죠.이 글에서는 네이티브 앱의 개념, 동작 구조, 장단점, 다른 앱 개발 방식(PWA, 하이브리드 앱 등)과의 비교를 통해 왜 기업이나 서비스에서 여전히 네이티브 앱을 선택하는지를 자세히 알아봅니다. 1. 네이티브 앱(Native App)이란?네이티브 앱은 특정 플랫폼(운영체제)에 맞게 직접 개발된 모바일 애플리케이션입니다.iOS용 앱은 Swift 또는 Objective-CAndr..

PWA(Progressive Web App) 현대 웹 개발에서는 앱처럼 동작하는 웹앱의 수요가 높아지고 있습니다. 특히 모바일 사용자의 비중이 커짐에 따라, 설치 없이도 빠르고 유연하게 접근할 수 있는 기술이 주목받고 있는데요, 그 대표주자가 바로 PWA(Progressive Web App)입니다.PWA는 사용자가 브라우저를 통해 접속한 웹사이트를 네이티브 앱처럼 설치하고, 오프라인에서도 동작하게 만들며, 푸시 알림과 같은 기능도 제공할 수 있습니다. 1. PWA(Progressive Web App)란?PWA(Progressive Web App)는 웹 기술로 만든 앱 같은 경험을 제공하는 웹 애플리케이션입니다. 쉽게 말해, 웹에서 동작하지만 네이티브 앱처럼 보이고 작동하는 웹앱입니다.사용자는 브라우저에..

웹앱(Web Application) 웹앱(Web Application)은 우리가 일상에서 자주 사용하는 웹 기반 서비스들의 핵심입니다. Gmail, Google Docs, Notion, 카카오톡 웹버전 등 모두 웹앱의 대표적인 예입니다. 이 글에서는 웹앱의 정의, 동작 방식, 웹사이트와의 차이, 아키텍처 구성, 개발 방식, 그리고 웹앱을 만들 때 주의할 점까지 체계적으로 정리합니다.웹 개발자라면 웹앱의 전체 흐름을 반드시 이해해야 하며, 백엔드와 프론트엔드의 협업 구조를 파악하는 데도 큰 도움이 됩니다. 1. 웹앱(Web Application)이란?웹앱은 웹 브라우저에서 동작하는 응용 프로그램입니다. 전통적인 데스크톱 애플리케이션과 달리, 웹앱은 설치 없이 인터넷만 있으면 어디서든 접근 가능합니다.요약..

SPA(Single Page Application) 전통적인 웹 애플리케이션은 사용자가 페이지를 이동할 때마다 서버로부터 새로운 HTML 문서를 받아와 전체 페이지를 새로 고침하는 방식으로 작동합니다. 하지만 이 방식은 사용자 경험 측면에서 다소 불편할 수 있습니다. 예를 들어, 페이지 전환 시마다 깜빡이거나, 동일한 레이아웃을 반복적으로 불러오는 비효율성이 존재합니다. 이를 해결하기 위해 등장한 것이 SPA(Single Page Application) 아키텍처입니다.SPA는 애플리케이션의 최초 로드 시 하나의 HTML 파일을 불러옵니다. 이후에는 사용자 상호작용에 따라 필요한 데이터만 비동기적으로 로딩하여 동적으로 뷰를 갱신합니다. 이로 인해 페이지 간 전환이 빠르고 부드럽게 이루어져, 네이티브 앱에 ..

객체(Object) 자바스크립트에서 가장 핵심적이면서도 유연한 자료형 중 하나가 바로 객체(Object)입니다. 객체는 데이터를 구조화하고, 기능(메서드)을 묶어서 하나의 단위로 관리할 수 있게 해줍니다. 이 글에서는 자바스크립트 객체의 기본 개념부터 객체 생성 방식, 프로퍼티 조작, 메서드 정의, 객체 간의 참조, 그리고 객체 지향 프로그래밍 관점에서의 활용까지 차근차근 설명하겠습니다. 1. 객체(Object)란?자바스크립트에서 객체는 키(key)와 값(value)의 쌍으로 이루어진 데이터 집합입니다. 키는 문자열 또는 심볼이 될 수 있고, 값은 어떤 자료형이든 가능합니다. 다른 언어나 자료구조에서는 '딕셔너리(Dictionary)' 또는 '맵(Map)'과 유사합니다.const user = { na..

Hash 자바스크립트로 알고리즘 문제를 풀다 보면 Object, Map, Set과 같은 해시 기반 자료구조를 자주 만나게 됩니다. 이들은 모두 내부적으로 해시 테이블(Hash Table) 구조를 기반으로 하며, 빠른 탐색, 삽입, 삭제(O(1)) 성능 덕분에 다양한 문제 해결에 활용됩니다.이 글에서는 자바스크립트에서 자주 쓰이는 세 가지 해시 구조(해시오브젝트(Object), 해시맵(Map), 해시셋(Set))의 개념과 차이점, 사용법, 그리고 알고리즘 문제 적용 예제를 함께 정리해보겠습니다. 1. 해시 구조란? 해시 테이블(Hash Table)은 데이터를 키(key)를 해시 함수로 변환하여 특정 위치에 저장하는 자료구조입니다. 이 방식 덕분에 특정 데이터를 매우 빠르게 찾을 수 있습니다.자바스크립트에..

[Lv. 1] 완주하지 못한 선수 https://school.programmers.co.kr/learn/courses/30/lessons/42576 문제설명수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.제한사항마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.completion의 길이는 participant의 길이보다 1 작습니다.참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니..

소셜 로그인 요즘 웹 서비스에서 소셜 로그인은 필수적인 기능이 되었습니다. 사용자는 구글이나 카카오 같은 계정으로 간편하게 로그인할 수 있고, 서비스는 복잡한 회원가입 과정을 줄일 수 있죠. 하지만 개발자 입장에서는 단순한 버튼 클릭만으로 끝나지 않습니다. OAuth 인증 흐름, 인가 코드 처리, 백엔드 연동, JWT 토큰 관리까지 고려할 요소가 많습니다.그리고 이런 흐름은 일반 로그인과도 대부분 유사합니다. 인증 요청, 응답 처리, 토큰 저장 및 상태 관리라는 구조는 동일하죠. 이 글에서는 프론트엔드 관점에서 소셜 로그인 구현의 전체 흐름을 정리하고, React로 구글 로그인을 어떻게 구현하는지 실습 코드와 함께 설명합니다. 1. 전체 구조 - 소셜 로그인 흐름 (간단 정리)프론트엔드사용자가 "구글..

useCallback React를 사용하다 보면 컴포넌트가 생각보다 자주 리렌더링되거나, 자식 컴포넌트가 의미 없이 반복해서 렌더링되는 문제를 경험하게 됩니다. 이럴 때 자주 등장하는 해결책이 바로 useCallback 훅입니다.useCallback 은 함수의 참조값을 유지해 불필요한 렌더링을 줄이는 데 도움을 주는 도구이지만, 언제 써야 효과가 있고, 언제 쓰지 말아야 하는지에 대한 명확한 기준 없이 무작정 사용하는 경우가 많습니다.이 글에서는 useCallback 의 기본 개념부터, 실제 사용 예제, 그리고 사용을 권장하는 상황과 피해야 할 상황까지 모두 정리합니다. 성능 최적화를 위해 useCallback 을 고민하고 있다면, 이 글이 그 판단에 확실한 기준을 줄 수 있을 거예요. 1. useCa..