전체 글 230

플러터 기본 - Form 위젯

Form 위젯TextField는 단순히 하나의 텍스트 입력을 다루는데 반해서, Form은 그 자체로 입력 필드를 가지고 있지 않지만, FormField 위젯들을 그룹화하여 관리하며, 복잡한 유효성 검사를 보다 쉽게 할 수 있는 위젯다른 위젯과 달리 Form 위젯은 자체적인 화면을 제공하지는 않으며, 사용자가 입력한 데이터의 유효성 검증, 데이터 관리 관련 기능을 제공한다.Form 위젯 내에서 TextFormField 위젯을 사용하여 각 데이터 입력을 받는 것이 일반적이다.Form 위젯 작성 방법은 다음과 같다.1. Form 위젯을 위한 GlobalKey를 만들어야 한다. GlobalKey는 FormState 전체에 엑세스하는데 사용되며, 이 객체는 폼 데이터의 유효성을 검사하고 저장하는데 사용된다.fin..

Flutter 2024.11.15

플러터 기본 2

Flutter 앱 개발에서 자주 사용되는 asset과 로컬 폰트 설정 방법assetasset은 앱 구성에 필요한 리소스 파일들을 의미한다. 예로 아이콘, 이미지, JSON 파일, 폰트 파일 등이 있다.이러한 리소스는 앱 빌드 시 내부에 포함되어야 하며, 이를 위해 pubspec.yaml 파일에 등록이 필요하다. Text 위젯에서 로컬 폰트 (fontFamily) 설정하기Flutter에서 Text 위젯의 fontfamily를 로컬 폰트로 설정하려면, asset으로 폰트를 등록한 후 사용해야 한다. 폰트 다운로드https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through grea..

Flutter 2024.11.07

플러터 기본기 - 위젯 사용법

기초적인 Flutter 화면을 구성하는 패턴'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme과 같은 속성 설정home : 속성을 주 페이지로 정의Scaffold :앱의 시각적 레이아웃에 대한 기본 구조 제공appBar 및 body와 같은 속성 설정레이아웃 요소 제공 (예 : AppBar, Drawer, BottomNavigationBar)각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 함body에 실제 화면 관련 위젯 정의import 'package:flutter/material.dart';void main() { runApp(MyApp());}// 상태 기반 UIclass MyApp extends St..

Flutter 2024.11.06

플러터 기본기 다지기

"Everything is a Widget" - Flutter의 핵심 철학Flutter는 React에서 영감을 받은 선언적 프로그래밍 방식을 채택하였다. 개발자는 원하는 UI 상태를 직접 선언하며, 프레임워크가 이를 효율적으로 렌더링한다. 명령형 UI어떠한 상태가 되도록 명령한다.ViewA a = ViewA();ViewB b = ViewB();a.setColor(red) // 빨간색이 되어라b.setColor(yello) // 노란색이 되어라a.add(b) // b는 a의 child가 되어라 선언형 UI어떠한 최종 상태를 선언한다.// 빨간색 A가 노란색 B를 child로 가지고 있다.return ViewA( color: red, child: ViewB( color: yello, ),); Flutt..

Flutter 2024.11.05

JWT - 서비스의 인증과 권한 부여

JWTJWT는 JSON Web Token의 약자로, 두 시스템 간의 정보를 안전하게 전송하기 위해 사용되는 토큰 기반 인증 방식이다. 예를 들어, 클라이언트와 서버 간의 인증 정보나 사용자 상태를 유지하고 싶을 때 JWT를 활용한다. JWT는 JSON 형태로 데이터를 저장하며, 그 데이터는 서명(약간의 암호화)되어 안전하게 교환된다. JWT의 구조JWT는 세 부분으로 구성된다.Header (헤더) : 토큰의 타입과 해싱 알고리즘 정보를 담고 있다. 보통 'alg' (알고리즘)와 'typ' (타입)이라는 두 가지 속성이 포함되며, 예를 들어, {"alg" : "HS256", "typ" : "JWT"} 형태이다.Payload (페이로드) : 주로 사용자 정보나 데이터(claims)를 포함하는 부분이다. 여기..

Spring boot 2024.11.04

API 설계 및 모범 사례

jar 파일 다운로드https://drive.usercontent.google.com/download?id=1Z1m6Zg17aCRwTe7StBCONFlwa5-54vev&export=download&authuser=0 API 명세https://blog.naver.com/devnote1/222613178127 스프링부트 JWT 블로그 가상 서버 셋팅하기jar 파일 다운로드 https://drive.google.com/file/d/1Z1m6Zg17aCRwTe7StBCONFlwa5-54vev/view?...blog.naver.com 실습 및 문제 해결(JWT 웹 토큰의 필요성 확인){ "code": 1, "msg": "목록보기완료", "data": [ { "id": 2, "usern..

Spring boot 2024.11.04

블로그 - 에러 페이지 만들기

스프링 부트의 에러 처리 메커니즘 이해 : 스프링 부트에서 제공하는 기본 에러 처리 방식과 커스터마이징 방법을 이해한다.Mustache 템플릿을 활용한 에러 페이지 구현 : 다양한 HTTP 상태 코드에 맞는 사용자 정의 에러 페이지를 Mustache 템플릿을 사용하여 구현한다. 스프링 부트는 기본적으로 BasicErrorController를 통해 애플리케이션에서 발생하는 에러를 처리한다. 이 컨트롤러는 /error 경로로 모든 에러를 매핑하며, 에러 발생 시 적절한 에러 페이지를 렌더링한다. 그러나 기본 제공되는 에러 페이지는 단순한 텍스트 형태로 제공되기 때문에, 추가적인 가공 작업이 필요 하다.  에러 페이지 매핑 설정 스프링 부트는 기본적으로 /error 경로를 통해 에러를 처리한다. applica..

Spring boot 2024.10.25

블로그 - 게시글 수정

BoardController - 게시글 수정하기 화면 요청// 게시글 수정 화면 요청 // board/{id}/update @GetMapping("/board/{id}/update-form") public String updateForm(@PathVariable(name = "id") Integer id, HttpServletRequest request) { // 1. 게시글 조회 Board board = boardNativeRepository.findById(id); // 2. 요청 속성에 조회한 게시글 속성 및 값 추가 request.setAttribute("board", board); // 뷰 리졸브 - 템플릿 반환 ..

Spring boot 2024.10.24