취미로 하는 개발

Flutter로 앱을 개발하다 보면 상태관리(State Management)는 반드시 고려해야 하는 요소이다. 앱에서는 로그인 상태, 장바구니 수량, API 응답 데이터, 좋아요 여부, 테마 설정처럼 실행 중 계속 변경되는 데이터를 지속적으로 관리해야 한다. 이러한 상태를 어떻게 관리하느냐에 따라 코드 구조, 유지보수성, 개발 생산성이 크게 달라진다. Flutter에서는 이를 위해 다양한 상태관리 방식을 제공하며, 대표적으로 Provider, Riverpod, Bloc, GetX 등이 많이 사용된다. 그중 GetX는 비교적 적은 코드로 상태관리와 라우팅, 의존성 관리까지 처리할 수 있어 빠른 개발에 강점을 가진 라이브러리로 많이 활용되고 있다. GetX란?GetX 는 Flutter에서 사용하는 상태관..

Flutter란?Flutter는 Flutter에서 개발한 크로스플랫폼 UI 프레임워크이다.한 번 코드를 작성하면 Android, iOS, Web, Windows, macOS까지 여러 플랫폼에서 실행할 수 있고, Dart 라는 언어를 사용해서 구현한다.[ Flutter 구조 ]Flutter├─ Dart 언어├─ Widget(UI)├─ Rendering Engine(Skia)└─ 플랫폼(Android/iOS/Web 등) Flutter 설치하기먼저 Flutter를 설치하기 위해서는 Git과 VS Code가 설치되어 있어야 한다. 먼저 해야할 일은 VS Code에 Flutter 확장 프로그램을 추가해야한다.마켓 플레이스 페이지에서 설치를 진행한다. VS Code에서 Control + shift + P 를 클릭..

useState란?useState는 컴포넌트 내부 상태(state)를 관리하기 위한 Hook이다.상태(state)란 다음과 같은 데이터를 의미한다.시간이 지나면서 변경되는 값값이 변경되면 화면(UI)도 함께 업데이트됨useState는 값이 변경되면 화면도 함께 업데이트되도록 만드는 React의 상태 관리 기능이다. useState 기본 사용법useState의 기본 사용법은 함수형 컴포넌트 내부에서 상태를 선언하고, 해당 상태를 변경하는 함수를 함께 사용하는 구조이다. useState를 호출하면 배열 형태로 값이 반환되며, 첫 번째 요소는 현재 상태 값이고 두 번째 요소는 상태를 변경하는 함수이다. 초기값은 useState(초기값) 형태로 전달한다. 이후 상태를 변경할 때는 직접 값을 수정하는 것이 아니..

Vim을 처음 접하면 “왜 아무것도 입력되지 않는 것인가?”라는 당황스러운 상황을 마주하게 된다. 일반적인 에디터와 달리 Vim은 실행하자마자 바로 글을 입력할 수 있는 구조가 아니라, ‘모드’라는 개념을 기반으로 동작하기 때문이다. 이 차이를 이해하지 못하면 키를 눌러도 반응이 없는 것처럼 느껴지고, 오히려 더 복잡하고 어렵게 느껴질 수 있다. 하지만 Vim의 핵심은 생각보다 단순하다. 입력 모드와 명령 모드라는 기본 개념만 이해하고, 자주 사용하는 최소한의 명령어 몇 가지만 익히면 Git 커밋 메시지 작성, 서버 환경에서의 파일 수정, CLI 기반 작업 등 다양한 개발 상황에서 막힘 없이 사용할 수 있게 된다. 결국 Vim은 어려운 도구가 아니라, 사용 방식이 조금 다를 뿐인 효율적인 에디터이다. [..

Google Search Console TXT 인증 오류 해결 방법Google Search Console에서 도메인을 인증하려고 할 때 아래와 같은 오류가 발생하는 경우가 있다.확인 방법:도메인 이름 공급업체실패 이유:도메인의 TXT 레코드에서 인증 토큰을 찾을 수 없습니다. 변경된 DNS가 표시되는 데는 시간이 소요될 수 있습니다. 몇 시간 정도 기다린 후 Search Console에서 속성을 다시 열어 보세요. 인증에 다시 실패하면 다른 DNS TXT 레코드를 추가해 보시기 바랍니다. 이 오류는 Search Console이 도메인 DNS에 등록된 TXT 레코드를 아직 찾지 못했을 때 발생하는 일반적인 현상이다. 아래는 이 오류가 발생하는 이유와 해결 방법이다. TXT 레코드가 루트 도메인에 추가..

회원가입과 로그인 기능을 구현하다 보면 한 번쯤 고민하게 되는 문제가 있다.이메일은 대소문자를 구분해야 할까? 결론부터 말하면, 프론트엔드에서는 이메일을 항상 소문자로 통일해서 처리하는 것이 실무적으로 가장 안전한 선택이다. 이 글에서는 그 이유와 프론트엔드에서의 올바른 처리 방법을 정리해보겠다. 이메일 대소문자에 대한 이론적 기준이메일 주소는 RFC 표준에 따라 @ 기호를 기준으로 두 부분으로 나뉜다. 앞부분인 local-part는 이론적으로 대소문자를 구분할 수 있도록 정의되어 있으며, 뒷부분인 domain-part는 대소문자를 구분하지 않는 것이 원칙이다. 즉, 표준 문서만 놓고 보면 이메일 주소의 구조상 대소문자 구분 가능성이 일부 존재한다. 이러한 규칙에 따르면 Test@Example.co..

구글 관리 콘솔 도구 상자란?구글 관리 콘솔 도구 상자(Google Admin Toolbox)는 Google에서 제공하는 네트워크·DNS·메일·도메인 관련 문제를 진단하기 위한 공식 기술 도구 모음이다. 개발자나 서버 관리자가 DNS 오류, 메일 전송 문제, SPF/DKIM/DMARC 설정, 도메인 소유권 문제 등을 해결할 때 아주 자주 사용하는 툴이다. DIG, DNS 상태를 확인하는 도구DIG는 Google DNS 서버(8.8.8.8)를 기준으로 도메인의 DNS 정보를 실시간으로 조회할 수 있는 도구이다. DNS 관련 문제를 해결할 때 가장 많이 사용되는 핵심 도구이다. DIG로 확인할 수 있는 정보A / AAAA 레코드CNAME 레코드TXT 레코드MX 레코드NS, SOA 정보DNS 전파 여부 ..

2025년 12월, React 생태계에 큰 영향을 미치는 중대 보안 취약점이 공개되었다. 특히 React Server Components(RSC)를 사용하는 프로젝트에서 인증 없이 원격 코드 실행(Remote Code Execution, RCE)이 가능해질 수 있는 치명적인 문제였다. React 팀은 즉시 패치를 배포했고, 전 세계 개발자들에게 빠른 업데이트를 권고하고 있다. 이 글에서는 해당 취약점의 원인, 영향 범위, 해결 방법을 쉽게 이해할 수 있도록 정리해보았다. RSC에서 어떤 취약점이 발생했나?문제는 RSC가 서버와 클라이언트 사이에서 데이터를 교환할 때 사용하는 “Flight 프로토콜”의 페이로드 검증 부족이 원인이었다.그 결과 인증 없이도 공격자가 서버에 악의적인 요청을 보낼 수 있고..

Presigned URL을 사용하는 이유일반적인 파일 업로드 방식은 프론트에서 백엔드로 파일을 보내고, 백엔드가 다시 S3로 업로드하는 구조라서 파일이 클수록 서버 부하가 커지고, 다중 파일 업로드에서는 백엔드가 모든 스트림을 처리해야 해 비효율적이다. 반면 Presigned URL 방식은 프론트가 백엔드에 업로드용 URL 생성만 요청하고, 백엔드는 이를 반환한 뒤 파일 데이터는 전혀 받지 않으며, 프론트가 해당 URL로 직접 S3에 업로드하기 때문에 백엔드 부하 없이 더 빠르고 안정적인 업로드가 가능해진다.일반적인 업로드 방식Presigned URL1. 프론트가 백엔드로 파일 전송2. 백엔드가 S3로 파일 어볼드3. 업로드 성공 후 URL 반환1. 프론트가 백엔드에 업로드 URL 생성 요청2. 백엔드가..

프론트엔드 개발을 하다 보면 수많은 내장 함수를 마주하게 된다.그중에서도 업무에서 자주 쓰이고, 꼭 알아두면 유용한 함수 10가지를 정리해보았다.이 함수들은 React, Vue, 바닐라 JS 어디에서든 자주 등장한다. console.log()가장 기본적이지만, 가장 많이 쓰이는 함수이다.디버깅을 하거나 값이 제대로 들어왔는지 확인할 때 사용한다.console.log('현재 상태:', state); 코드 중간중간에 로그를 찍어두면 문제를 찾기 훨씬 쉽다. document.querySelector()HTML 요소를 선택할 때 사용하는 함수이다.CSS 선택자 문법을 그대로 쓸 수 있어서 직관적이다.const button = document.querySelector('#submitBtn');button.ad..