쏘니의 개발블로그

코볼트 RC카 아이와 함께 배우는 코딩 RC카 체험기!

곰돌이쿤 — Thu, 3 Jul 2025 14:50:49 +0900

안녕하세요! 요즘 아이 코딩 교육에 관심이 많아서 코볼트 RC카를 체험해보게 되었어요. 마이크로비트를 활용한 코딩 RC카라고 해서 정말 기대가 컸는데, 직접 사용해보니 기대 이상이었답니다!

개봉기 & 구성품 소개

택배로 받은 코볼트 RC카 박스를 열어보니 정말 깔끔하게 포장되어 있더라구요.

구성품 확인

코볼트 RC카 본체 1대
USB 충전 케이블
사용 설명서
추가 액세서리 (별도 주문한 마이크로비트 v2.21)

박스를 열자마자 블랙과 블루 컬러 조합의 세련된 디자인이 눈에 띄었어요. 플라스틱 재질이지만 전혀 저렴해 보이지 않고, 마이크로비트가 딱 맞게 들어가는 설계가 인상적이었습니다.

앞쪽에 있는 초음파 센서 2개가 마치 귀여운 눈처럼 생겨서 아이가 보자마자 "로봇 같다!"며 좋아했어요.

RC카 조립 방식 및 리모컨 조작법

조립 과정

조립은 정말 간단했어요!

마이크로비트 장착: RC카 상단에 있는 슬롯에 마이크로비트를 꽂기만 하면 됩니다.
배터리 삽입: 18650 리튬 배터리를 본체 하단에 넣어주세요.
전원 켜기: 측면의 전원 스위치를 ON으로 돌리면 준비 완료!

정말 3분도 안 걸리는 간단한 과정이에요. 별도의 나사나 복잡한 조립이 필요 없어서 아이도 쉽게 할 수 있었답니다.

리모컨 조작법

코딩 RC카인 코볼트는 일반 RC카와 달리 프로그래밍으로 움직입니다.

MakeCode 에디터 사용법:

마이크로비트 MakeCode 웹사이트 접속
확장 URL 추가: https://github.com/LLY16888/Microbit_Car
코볼트 전용 블록들이 나타남
원하는 동작을 블록으로 조합
마이크로비트에 다운로드

처음에는 단순한 전진, 후진, 좌회전, 우회전부터 시작했는데 반응이 정말 빨랐어요!

실제로 코딩 RC카 코볼트가 움직이는 모습을 보니 정말 신기했어요. 150RPM 기어드 모터 덕분에 생각보다 속도감도 있고 파워풀하더라구요.

실내 주행 테스트: 거실에서 테스트해봤는데 카펫 위에서도 부드럽게 잘 굴러갔어요. 특히 자율주행 모드로 설정하니 테이블 다리나 소파 같은 장애물을 스스로 피해가는 모습이 정말 똑똑해 보였답니다.

야외 주행 테스트: 베란다에서도 테스트해봤는데 실내보다 더 시원하게 달리더라구요. 바닥이 매끄러워서 더 빠른 속도로 움직일 수 있었어요.

주행 중에 아이가 가장 신기해했던 건 초음파 센서로 장애물을 감지하는 기능이었어요. 벽 앞에서 자동으로 멈추고 방향을 바꾸는 모습을 보고 "진짜 스스로 생각하는 것 같다"며 감탄했답니다.

자율주행 도전기

제일 재미있었던 건 역시 자율주행 기능이었어요. 초음파 센서로 장애물을 감지해서 피해가는 코드를 직접 만들어봤는데, 처음엔 벽에 계속 부딪히더라구요.

몇 번 수정하다 보니 점점 똑똑해지는 느낌이었어요. 거실 테이블 다리들 사이를 스르륵 피해가는 모습을 보니까 정말 신기했답니다.

아이와 함께 "만약 여기서 멈추면 어떻게 할까?" "벽이 너무 가까우면 어떻게 판단할까?" 이런 것들을 생각해보면서 코딩하는 재미를 알아가는 것 같아서 뿌듯했어요.

레고 호환성 체험

코딩 RC카 코볼트의 가장 큰 장점 중 하나가 바로 레고 호환성이에요!

집에 있던 레고 블록들을 위에 붙여서 나만의 RC카를 만들어봤는데 정말 재미있었어요. 레고 테크닉 부품들을 활용해서 굴삭기 모양으로 꾸며보니 완전 멋있더라구요.

아이가 직접 레고로 작은 집을 만들어서 RC카 위에 올려놓고 "이사가는 차"라고 하면서 가지고 놀더라구요. 이런 창의적인 놀이가 가능한 게 정말 좋은 것 같아요.

⚡ 충전과 배터리 관리

USB 충전이 정말 편리해요! 별도 충전기 없이 핸드폰 충전기 그대로 사용할 수 있어서 좋았어요.

완충하는데 약 2시간 정도 걸리고, 한 번 충전하면 1시간 이상 연속으로 사용할 수 있었어요. 아이와 충분히 놀기에는 부족함이 없는 시간이었답니다.

배터리 잔량도 마이크로비트 화면에 표시되어서 언제 충전해야 할지 미리 알 수 있어서 좋았어요.

교육적 효과

단순히 코딩 RC카로 놀기만 하는 게 아니라 정말 많은 걸 배울 수 있어요.

논리적 사고력: 어떤 순서로 명령을 내려야 원하는 대로 움직일지 생각하게 되더라구요.

문제해결능력: 원하는 대로 안 움직일 때 어디가 문제인지 찾아서 수정하는 과정이 정말 교육적이에요.

창의성: 레고와 결합해서 다양한 모양으로 꾸미고, 새로운 미션을 만들어볼 수 있어요.

과학적 호기심: 초음파 센서가 어떻게 작동하는지, 모터는 어떻게 바퀴를 돌리는지 자연스럽게 관심을 갖게 되더라구요.

다양한 활용 방법

코볼트 코딩 RC카는 정말 다양하게 활용할 수 있어요.

미션 만들기: 집 안에 장애물 코스를 만들어서 통과하는 미션을 만들어봤어요.

경주 게임: 친구들과 함께 누가 더 빠르고 정확하게 목표점에 도착하는지 경쟁해볼 수 있어요.

춤추는 로봇: 음악에 맞춰 좌우로 움직이는 댄스 패턴을 프로그래밍해봤는데 정말 재미있었어요.

탐험 로봇: 집 안 곳곳을 돌아다니면서 사진을 찍는다는 설정으로 놀아봤어요.

확장성과 업그레이드

파이썬 위키도 제공되고, MakeCode뿐만 아니라 파이썬으로도 프로그래밍할 수 있다는 점이 정말 마음에 들어요.

나중에 아이가 더 커서 복잡한 프로그래밍을 배우고 싶어할 때도 계속 사용할 수 있을 것 같아요. 단순한 장난감이 아니라 성장하는 교육 도구라는 느낌이에요.

추가 센서나 액세서리도 구매할 수 있어서 더 다양한 기능을 추가해볼 수 있다는 점도 좋았어요.

총평

아이와 함께 주말 내내 정말 재미있게 가지고 놀았어요. 처음엔 단순한 RC카 정도로 생각했는데, 직접 코딩해서 움직이는 걸 보니까 성취감이 정말 크더라구요.

코딩을 전혀 모르는 상태에서 시작해도 MakeCode 블록 코딩이 직관적이라 금방 익힐 수 있었어요. 아이보다 제가 더 빠졌다는 게 함정이긴 하지만요!

앞으로 더 복잡한 미션들도 만들어보고 싶고, 레고랑 결합해서 더 멋진 모양으로도 만들어보고 싶어요.

코딩 교육용 교구를 찾고 계신다면 정말 추천드려요! 마이크로비트와 함께 구매하면 바로 시작할 수 있으니 참고하세요.

코볼트 RC카 덕분에 아이가 코딩에 대한 관심이 생겼고, 무엇보다 함께 문제를 해결해나가는 과정이 정말 의미 있는 시간이었어요.

#코볼트RC카 #코딩RC카 #교육용RC카 #RC카 #마이크로비트 #마이크로비트RC카 #ICBANQ

본 포스팅은 아이씨뱅큐로부터 제품을 제공받아 직접 체험 후 작성한 솔직한 후기입니다.

aws ec2 ubuntu 서버 생성 및 mysql 설치 그리고 java 17 설치

곰돌이쿤 — Mon, 9 Sep 2024 16:49:28 +0900

1. launch instance 로 ec2 생성

2. ubuntu 로 서버 이미지 생성

3. security group
처음 생성하는 경우 security group 생성, 이전에 만든 적 있으면 이전에 만든 security group 생성

해당 security group 에서 inbound 편집을 추후 해줘야 합니다.
ex ) 3306 port 추가 및 ssh 접속시 ip 허용
anywhere 로 추가하면 어떤 ip 에서도 접속 가능

4. key pair 생성

key 파일이 없으면 신규로 생성. 앞으로 해당 파일로 접속해야해서 분실하면 안됩니다.

Ubuntu EC2 인스턴스에 MySQL 8.0을 설치

1. EC2 인스턴스에 접속

먼저 EC2 인스턴스에 SSH로 접속합니다. 로컬에서 다음 명령어를 사용하여 SSH 접속합니다:

ssh -i /path/to/your-key.pem ubuntu@your-ec2-public-ip

2. Ubuntu 패키지 업데이트

MySQL을 설치하기 전에, 패키지 목록을 업데이트합니다.

sudo apt update

3. MySQL 8.0 설치

MySQL 8.0은 Ubuntu의 기본 패키지 저장소에서 제공됩니다. 다음 명령어로 MySQL 8.0을 설치할 수 있습니다.

sudo apt install mysql-server -y

4. MySQL 서비스 시작

MySQL 서버가 설치되면, MySQL 서버를 시작합니다.

sudo systemctl start mysql

MySQL 서버가 부팅 시 자동으로 시작되도록 설정하려면 다음 명령어를 사용합니다.

sudo systemctl enable mysql

5. MySQL 기본 설정 및 보안

MySQL을 설치하면 보안 관련 기본 설정을 진행할 수 있습니다. 이를 위해 mysql_secure_installation 스크립트를 실행합니다.

sudo mysql_secure_installation

이 명령어는 다음과 같은 작업을 수행합니다:

• 루트 사용자 비밀번호 설정.

• 익명 사용자 삭제.

• 원격 루트 로그인 비활성화.

• 테스트 데이터베이스 삭제.

• 보안 설정 재로드.

6. MySQL 루트 사용자 비밀번호 설정

MySQL이 설치되면 루트 사용자의 비밀번호를 설정해야 합니다. 먼저 MySQL에 접속합니다.

sudo mysql

MySQL 프롬프트에서 다음 명령어를 사용하여 루트 사용자 비밀번호를 설정합니다.

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'YourNewPassword';

이후 MySQL 프롬프트에서 빠져나갑니다.

EXIT;

7. MySQL 접속 테스트

설정한 비밀번호를 사용하여 MySQL에 접속할 수 있습니다.

mysql -u root -p

비밀번호를 입력한 후 MySQL 프롬프트로 접속할 수 있습니다.

8. 방화벽 및 보안 그룹 설정 (필요한 경우)

MySQL의 기본 포트인 3306을 외부에서 접근할 수 있도록 EC2 인스턴스의 보안 그룹에서 3306 포트를 허용해야 합니다.

1. AWS 콘솔에서 EC2 인스턴스의 보안 그룹으로 이동합니다.

2. **인바운드 규칙 (Inbound Rules)**에서 MySQL/Aurora 또는 TCP 포트 3306을 추가합니다.

• Source는 허용할 IP 주소를 설정합니다 (예: 0.0.0.0/0은 모든 IP에서 접근 가능, 보안을 위해 특정 IP만 허용하는 것이 좋습니다).

9. MySQL 외부 접속 허용 (선택 사항)

기본적으로 MySQL은 외부 접속을 허용하지 않습니다. 외부에서 MySQL에 접속하려면 MySQL 설정 파일을 수정해야 합니다.

sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

설정 파일에서 bind-address 항목을 찾은 후, 127.0.0.1을 EC2 인스턴스의 공인 IP로 변경하거나 모든 IP에서 접속 가능하게 하려면 0.0.0.0으로 변경합니다.

bind-address = 0.0.0.0

파일을 저장하고 MySQL 서버를 재시작합니다.

sudo systemctl restart mysql

java 설치

설치 확인

1. Ubuntu 패키지 목록 업데이트

먼저, 패키지 목록을 업데이트합니다. 최신 패키지를 설치할 수 있도록 항상 먼저 업데이트하는 것이 좋습니다.

sudo apt update

2. Java 17 설치

Java 17은 Ubuntu의 기본 패키지 저장소에서 설치할 수 있습니다.

sudo apt install openjdk-17-jdk -y

이 명령어는 OpenJDK 17 JDK(Java Development Kit)를 설치합니다.

3. Java 설치 확인

Java 17이 정상적으로 설치되었는지 확인하려면 다음 명령어를 사용합니다.

java -version

출력 결과는 다음과 유사하게 나타날 것입니다:

openjdk version "17.0.x" 
OpenJDK Runtime Environment (build 17.0.x+xx)
OpenJDK 64-Bit Server VM (build 17.0.x+xx, mixed mode)

spring boot 예외처리 핸들러 @ControolerAdvice

곰돌이쿤 — Thu, 22 Aug 2024 13:40:52 +0900

Spring Boot에서 예외 처리 및 전역 예외 핸들러를 구현하는 코드를 통해, 다양한 예외 상황에서 일관된 응답을 제공하는 방법을 학습할 수 있습니다.

@ControllerAdvice를 사용하여 전역 예외 처리기를 구현하고, 다양한 예외에 대해 적절한 응답을 반환하는 방법을 살펴보겠습니다.

1. 기본 예외 처리 설정

Spring Boot에서는 기본적으로 예외가 발생하면 HTTP 상태 코드와 함께 오류 메시지를 반환합니다. 하지만 이 기본 방식은 사용자 경험(UX)을 향상시키기 위해 커스터마이징이 필요할 수 있습니다.

2. 전역 예외 처리 클래스 생성

@ControllerAdvice를 사용하여 전역 예외 처리기를 생성합니다. 이 클래스는 애플리케이션 전반에서 발생하는 예외를 한 곳에서 처리하고, 일관된 방식으로 응답을 반환할 수 있게 합니다.

package com.example.demo.exception;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.context.request.WebRequest;

import java.util.HashMap;
import java.util.Map;

@ControllerAdvice
@RestController
public class GlobalExceptionHandler {

    // 1. 기본적인 예외 처리
    @ExceptionHandler(Exception.class)
    public final ResponseEntity<Object> handleAllExceptions(Exception ex, WebRequest request) {
        Map<String, Object> response = new HashMap<>();
        response.put("message", ex.getMessage());
        response.put("details", request.getDescription(false));
        return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
    }

    // 2. 특정 예외 처리 (예: NullPointerException)
    @ExceptionHandler(NullPointerException.class)
    public final ResponseEntity<Object> handleNullPointerException(NullPointerException ex, WebRequest request) {
        Map<String, Object> response = new HashMap<>();
        response.put("message", "Null value encountered!");
        response.put("details", request.getDescription(false));
        return new ResponseEntity<>(response, HttpStatus.BAD_REQUEST);
    }

    // 3. 유효성 검사 실패 예외 처리 (예: MethodArgumentNotValidException)
    @ExceptionHandler(MethodArgumentNotValidException.class)
    @ResponseStatus(HttpStatus.BAD_REQUEST)
    public final Map<String, String> handleValidationExceptions(MethodArgumentNotValidException ex) {
        Map<String, String> errors = new HashMap<>();
        ex.getBindingResult().getFieldErrors().forEach(error -> 
            errors.put(error.getField(), error.getDefaultMessage()));
        return errors;
    }

    // 4. 사용자 정의 예외 처리
    @ExceptionHandler(ResourceNotFoundException.class)
    public final ResponseEntity<Object> handleResourceNotFoundException(ResourceNotFoundException ex, WebRequest request) {
        Map<String, Object> response = new HashMap<>();
        response.put("message", ex.getMessage());
        response.put("details", request.getDescription(false));
        return new ResponseEntity<>(response, HttpStatus.NOT_FOUND);
    }
}

3. 사용자 정의 예외 클래스 생성

필요에 따라 사용자 정의 예외를 만들어 사용할 수 있습니다. 예를 들어, 리소스를 찾을 수 없을 때 발생시키는 예외를 만들 수 있습니다.

src/main/java/com/example/demo/exception/ResourceNotFoundException.java

package com.example.demo.exception;

import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.ResponseStatus;

@ResponseStatus(value = HttpStatus.NOT_FOUND)
public class ResourceNotFoundException extends RuntimeException {

    public ResourceNotFoundException(String message) {
        super(message);
    }
}

어노테이션을 사용하는 경우:

• 예외 클래스에 @ResponseStatus 어노테이션을 추가하면, 해당 예외가 발생할 때 Spring이 자동으로 지정된 HTTP 상태 코드를 반환합니다.

• 예를 들어, @ResponseStatus(HttpStatus.NOT_FOUND)를 사용하면, 이 예외가 발생할 때 자동으로 404 Not Found 상태 코드가 반환됩니다.

어노테이션을 사용하지 않는 경우:

• @ResponseStatus 어노테이션을 사용하지 않으면, 예외 처리 클래스에서 ResponseEntity를 사용해 상태 코드를 명시적으로 설정할 수 있습니다. 이렇게 하면 예외 상황에 대해 더 유연한 처리가 가능합니다.

4. 예외 발생 시나리오

다음은 리소스를 찾지 못했을 때 ResourceNotFoundException을 발생시키는 서비스 코드의 예입니다.

src/main/java/com/example/demo/service/PostService.java

package com.example.demo.service;

import com.example.demo.entity.Post;
import com.example.demo.exception.ResourceNotFoundException;
import com.example.demo.repository.PostRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Optional;

@Service
public class PostService {

    @Autowired
    private PostRepository postRepository;

    public Post getPostById(Long id) {
        Optional<Post> post = postRepository.findById(id);
        if (!post.isPresent()) {
            throw new ResourceNotFoundException("Post not found with id: " + id);
        }
        return post.get();
    }

    // 기타 CRUD 메서드들...
}

5. 컨트롤러에서의 사용 예시

컨트롤러에서 서비스 메서드를 호출할 때, 예외가 발생하면 GlobalExceptionHandler가 이를 처리하여 일관된 응답을 반환합니다.

src/main/java/com/example/demo/controller/PostController.java

package com.example.demo.controller;

import com.example.demo.entity.Post;
import com.example.demo.service.PostService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/posts")
public class PostController {

    @Autowired
    private PostService postService;

    // GET /api/posts/{id} - Get a post by id
    @GetMapping("/{id}")
    public ResponseEntity<Post> getPostById(@PathVariable Long id) {
        Post post = postService.getPostById(id);
        return ResponseEntity.ok(post);
    }

    // 기타 CRUD 엔드포인트들...
}

vue lifecycle 라이프사이클 정리

곰돌이쿤 — Sun, 18 Aug 2024 23:37:20 +0900

Vue.js의 생성주기(lifecycle)는 Vue 인스턴스가 생성되어 DOM에 렌더링되고, 데이터가 변경되어 업데이트되는 과정에서 호출되는 일련의 메서드들입니다. 이 생성주기 훅들을 활용하면, 컴포넌트의 특정 단계에서 로직을 실행할 수 있습니다.

Vue 2와 Vue 3 모두 유사한 생성주기를 가지지만, Vue 3에서는 Composition API가 도입되면서 라이프사이클 훅이 약간 다른 형태로 사용됩니다. 여기서는 Options API와 Composition API 두 가지 스타일 모두에서 생성주기를 어떻게 활용하는지 설명하겠습니다.

1. Vue 인스턴스의 생명주기 (Options API 기준)

Vue 컴포넌트는 다음과 같은 주요 생명주기 단계를 거칩니다:

1) Before Create (beforeCreate)

• 설명: Vue 인스턴스가 초기화되기 전, data와 methods가 정의되기 전에 호출됩니다.

• 용도: 초기화 전에 실행할 코드를 작성할 수 있지만, data나 methods에 접근할 수 없습니다.

beforeCreate() {
  console.log('beforeCreate: 데이터와 메서드가 정의되기 전입니다.');
}

2) Created (created)

• 설명: Vue 인스턴스가 생성된 후, data와 methods가 초기화된 상태에서 호출됩니다. 이 시점에서 인스턴스는 반응형 상태입니다.

• 용도: API 호출, 초기 데이터 설정 등의 작업을 할 수 있습니다. 하지만 DOM에 접근할 수 없습니다.

created() {
  console.log('created: 인스턴스가 생성되고 data와 methods가 초기화되었습니다.');
}

3) Before Mount (beforeMount)

• 설명: 템플릿이 렌더링되기 전에 호출됩니다. DOM에 접근할 수 있지만, 아직 Vue가 DOM에 연결되지 않은 상태입니다.

• 용도: 렌더링 전에 DOM에 대해 작업할 필요가 있을 때 사용할 수 있습니다.

beforeMount() {
  console.log('beforeMount: 템플릿이 렌더링되기 전입니다.');
}

4) Mounted (mounted)

• 설명: Vue 인스턴스가 DOM에 마운트된 후 호출됩니다. 이 시점에서 템플릿은 DOM에 반영되었으며, 컴포넌트가 화면에 나타납니다.

• 용도: 컴포넌트가 DOM에 연결된 후 초기화 작업을 하거나, 외부 라이브러리를 초기화할 때 사용할 수 있습니다.

mounted() {
  console.log('mounted: 인스턴스가 DOM에 마운트되었습니다.');
}

5) Before Update (beforeUpdate)

• 설명: 반응형 데이터가 변경되어 DOM이 업데이트되기 직전에 호출됩니다.

• 용도: 데이터가 변경되었지만 DOM에 반영되기 전에 작업을 수행할 수 있습니다.

beforeUpdate() {
  console.log('beforeUpdate: 데이터가 변경되었고 DOM이 업데이트되기 전입니다.');
}

6) Updated (updated)

• 설명: 데이터가 변경되어 DOM이 다시 렌더링된 후 호출됩니다.

• 용도: 데이터 변경에 따른 DOM 작업을 수행할 수 있습니다.

updated() {
  console.log('updated: 데이터가 변경되고 DOM이 업데이트되었습니다.');
}

7) Before Destroy (beforeDestroy)

• 설명: Vue 인스턴스가 파괴되기 전에 호출됩니다.

• 용도: 인스턴스가 파괴되기 전에 정리 작업을 수행할 수 있습니다. 이벤트 리스너 해제, 타이머 제거 등이 필요할 때 사용합니다.

beforeDestroy() {
  console.log('beforeDestroy: 인스턴스가 파괴되기 전입니다.');
}

8) Destroyed (destroyed)

• 설명: Vue 인스턴스가 파괴된 후 호출됩니다. 인스턴스의 모든 바인딩과 이벤트 리스너가 해제됩니다.

• 용도: 인스턴스 파괴 후의 작업을 수행할 수 있습니다.

destroyed() {
  console.log('destroyed: 인스턴스가 파괴되었습니다.');
}

2. Vue 3에서의 Composition API 생성주기

Vue 3에서는 Composition API가 도입되면서 라이프사이클 훅도 setup 함수 내에서 사용할 수 있도록 변경되었습니다. 각 훅은 Vue 2의 Options API에서와 동일한 시점에 호출되지만, 이름이 조금씩 다릅니다.

• onBeforeMount: beforeMount와 동일한 타이밍에 호출됩니다.

• onMounted: mounted와 동일한 타이밍에 호출됩니다.

• onBeforeUpdate: beforeUpdate와 동일한 타이밍에 호출됩니다.

• onUpdated: updated와 동일한 타이밍에 호출됩니다.

• onBeforeUnmount: beforeDestroy와 동일한 타이밍에 호출됩니다.

• onUnmounted: destroyed와 동일한 타이밍에 호출됩니다.

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('mounted: 컴포넌트가 마운트되었습니다.');
    });

    onBeforeUnmount(() => {
      console.log('beforeUnmount: 컴포넌트가 파괴되기 전입니다.');
    });
  }
};

3. 생성주기 훅의 활용 예시

API 호출

• created 또는 onMounted에서 초기 데이터를 가져오기 위해 API를 호출할 수 있습니다.

created() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      this.data = data;
    });
}

// Composition API 방식
onMounted(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      state.data = data;
    });
});

DOM 초기화

• 외부 라이브러리나 플러그인을 초기화하기 위해 mounted나 onMounted를 사용할 수 있습니다.

mounted() {
  this.$nextTick(() => {
    this.initializePlugin();
  });
}

// Composition API 방식
onMounted(() => {
  nextTick(() => {
    initializePlugin();
  });
});

4. 결론

Vue의 생명주기는 컴포넌트의 생성, 렌더링, 업데이트, 파괴 과정에서 특정 시점에 코드 실행을 가능하게 합니다. Options API에서는 메서드 형태로 각 훅을 정의하며, Composition API에서는 setup 함수 내부에서 훅을 호출하는 방식으로 관리합니다. 이 생성주기 훅들은 컴포넌트의 초기화, DOM 접근, 외부 자원 관리, 데이터 업데이트 등에 중요한 역할을 합니다.

생성주기 문서

https://ko.vuejs.org/guide/essentials/lifecycle.html

vue to-do 리스트 구현 7 - composition api 비교

곰돌이쿤 — Sun, 18 Aug 2024 15:43:57 +0900

1. Option API와 Composition API 비교 설명

• Option API:

• 전통적인 Vue.js 방식으로, 컴포넌트의 로직을 data, methods, computed, watch 등으로 구분합니다.

• 코드의 구조가 명확하게 나누어져 있어, 이해하기 쉬운 것이 장점입니다.

• 큰 컴포넌트에서는 로직이 흩어져 있어 관리가 어려워질 수 있습니다.

• Composition API:

• Vue 3에서 도입된 새로운 방식으로, 함수형 프로그래밍 스타일에 가까운 접근법입니다.

• 관련 로직을 setup 함수 내에서 함께 정의할 수 있어, 큰 컴포넌트에서도 관련 로직을 그룹화하여 관리할 수 있습니다.

• ref, computed, watch, onMounted 등의 기능을 활용하여 상태와 라이프사이클을 관리합니다.

• 코드 재사용성이 높아지며, 특히 큰 프로젝트에서 유리합니다.

Composition API를 사용하여 post 게시판을 구현하면서 기존의 Option API 방식과 비교할 수 있었습니다. Composition API는 보다 유연하고 코드 재사용성을 높이는 데 유리하며, Vuex와의 결합도 자연스럽습니다. 이를 통해 학생들이 Vue의 두 가지 API 스타일을 이해하고, 필요에 따라 적절히 선택할 수 있도록 도울 수 있습니다.

todoList 를 postList 로 동일한 코드로 composition api 로 변형 해보았습니다.

PostList.vue

<template>
    <v-container>
      <v-row>
        <v-col>
          <h1>Vue.js Post Board</h1>
          <AddPost @add-post="addPost" />
          <v-list>
            <v-list-item
              v-for="(post, index) in posts"
              :key="index"
              @click="navigateToDetail(index)"
            >
              <template v-slot:prepend>
                <v-checkbox
                  v-model="post.completed"
                  @click.stop="togglePostStatus(index, !post.completed)"
                  hide-details
                />
              </template>
              
              <v-list-item-title>{{ post.text }}</v-list-item-title>
              
              <template v-slot:append>
                <v-btn icon="mdi-delete" size="small" @click.stop="removePost(index)">
                </v-btn>
              </template>
            </v-list-item>
          </v-list>
        </v-col>
      </v-row>
    </v-container>
  </template>
  
  <script>
  import { computed, onMounted } from 'vue';
  import { useRouter } from 'vue-router';  // useRouter를 import
  import { useStore } from 'vuex';
  import AddPost from './AddPost.vue';
  
  export default {
    name: 'PostList',
    components: { AddPost },
    setup() {
      const store = useStore();
      const router = useRouter();
  
      const posts = computed(() => store.getters.posts);
      const addPost = (postText) => store.dispatch('addPost', postText);
      const removePost = (index) => store.dispatch('removePost', index);
      const togglePostStatus = (index, completed) =>
        store.dispatch('togglePostStatus', { index, completed });
  
      const navigateToDetail = (index) => {
        // Navigate to post detail page
        router.push({ name: 'PostDetail', params: { id: index } });
      };
  
      onMounted(() => {
        store.dispatch('loadPosts');
      });
  
      return {
        posts,
        addPost,
        removePost,
        togglePostStatus,
        navigateToDetail,
      };
    },
  };
  </script>

AddPost.vue

<template>
    <v-text-field
      v-model="newPost"
      label="Add a new post"
      @keyup.enter="submitPost"
      outlined
      dense
    />
    <v-btn color="primary" @click="submitPost">Add</v-btn>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'AddPost',
    emits: ['add-post'],  // 커스텀 이벤트를 정의합니다.
    setup(props, { emit }) {
      const newPost = ref('');
  
      const submitPost = () => {
        if (newPost.value.trim()) {
          emit('add-post', newPost.value);
          newPost.value = '';
        }
      };
  
      return {
        newPost,
        submitPost,
      };
    },
  };
  </script>

PostDetail.vue

<template>
    <v-container>
      <h2>Post Detail</h2>
      <v-card>
        <v-card-text>
          <p>ID: {{ id }}</p>
          <p v-if="post">Text: {{ post.text }}</p>
          <p v-else>Post not found</p>
        </v-card-text>
      </v-card>
      <v-btn @click="$router.push('/post')">Back</v-btn>
    </v-container>
  </template>
  
  <script>
  import { computed } from 'vue';
  import { useStore } from 'vuex';
  import { useRoute } from 'vue-router';
  
  export default {
    setup() {
      const store = useStore();
      const route = useRoute();
  
      const id = computed(() => route.params.id);
      const post = computed(() => store.getters['posts'][id.value]);
  
      return {
        id,
        post,
      };
    },
  };
  </script>

이전에 만들었던 todo List 와 비교하면서 보면 이해가 빠를 겁니다.

2. Composition API 구성 요소

1) setup 함수

setup 함수는 Composition API의 핵심으로, 컴포넌트가 생성될 때 호출됩니다. 이 함수 내에서 상태 관리, 메서드 정의, 라이프사이클 훅 등을 설정할 수 있습니다.

• 리턴값: setup 함수에서 반환하는 객체는 템플릿에서 사용됩니다. 이 함수에서 정의한 모든 데이터와 메서드는 setup의 반환 객체를 통해 템플릿에서 접근 가능합니다.

2) useStore와 useRouter

• useStore: Vuex의 스토어에 접근하기 위해 사용됩니다. store 객체를 반환하며, 이를 통해 상태 관리와 관련된 모든 작업을 수행할 수 있습니다.

• useRouter: Vue Router에서 제공하는 훅으로, 현재 라우터 인스턴스에 접근하여 라우팅을 처리할 수 있습니다. 예를 들어, 페이지 이동을 위해 router.push를 사용할 수 있습니다.

3) computed

computed 속성은 반응형 데이터를 정의할 때 사용됩니다. 여기서 posts는 Vuex 스토어에서 가져온 할 일 목록으로, computed로 선언하여 Vue의 반응형 시스템과 연결됩니다.

4) onMounted

onMounted는 Vue의 라이프사이클 훅 중 하나로, 컴포넌트가 DOM에 마운트된 직후 호출됩니다. 이 훅을 사용하여 컴포넌트가 초기화될 때 필요한 작업을 수행할 수 있습니다. 예를 들어, 이 코드에서는 컴포넌트가 마운트될 때 loadPosts 액션을 디스패치하여 로컬 스토리지에서 데이터를 불러옵니다.

3. 구현된 기능 설명

• Post 목록 가져오기 (posts): posts는 Vuex의 getters.posts를 computed로 받아와, 템플릿에서 렌더링됩니다.

• Post 추가하기 (addPost): 사용자가 새로운 포스트를 추가하면, 해당 텍스트가 Vuex 액션을 통해 posts 상태에 추가됩니다.

• Post 상태 토글 (togglePostStatus): 체크박스를 클릭하여 포스트의 완료 상태를 토글할 수 있습니다. 이 상태는 v-model과 store.dispatch를 통해 Vuex와 동기화됩니다.

• Post 삭제하기 (removePost): 삭제 버튼을 클릭하면 해당 포스트가 삭제됩니다. 이 작업 역시 Vuex 액션을 통해 처리됩니다.

• Post 상세보기 페이지로 이동 (navigateToDetail): 포스트 항목을 클릭하면 해당 포스트의 상세 페이지로 라우팅됩니다. router.push를 통해 PostDetail 페이지로 이동하며, id 파라미터를 전달합니다.

4. Composition API와 Options API 비교

• 유연성: Composition API는 로직과 상태 관리를 한 곳에 모아서 정의할 수 있으므로, 관련된 코드를 쉽게 그룹화하고 재사용할 수 있습니다.

• 재사용성: Composition API는 함수로 로직을 캡슐화하여 재사용할 수 있어, 복잡한 컴포넌트에서 더 나은 코드 조직화를 제공합니다.

• 명확성: setup 함수 안에서 모든 로직을 관리하므로, 상태와 메서드가 어디에서 정의되고 어떻게 사용되는지 명확히 알 수 있습니다.

이전 블로그
vuex 를 이용한 todo list 작성
https://juntcom.tistory.com/323

vue 가이드 - option, composition api
https://ko.vuejs.org/guide/introduction.html

Vuetify 문서 레퍼런스 가이드

곰돌이쿤 — Sat, 17 Aug 2024 21:18:13 +0900

Vuetify는 Material Design 가이드를 따르는 Vue.js UI 라이브러리로, 다양한 사전 제작된 컴포넌트와 유틸리티를 제공하여 반응형이고 미적으로 우수한 인터페이스를 빠르게 개발할 수 있도록 도와줍니다. 아래는 Vuetify를 효과적으로 사용하는 데 필요한 주요 개념과 문서에 대한 가이드입니다.

Vuetify 시작하기

• 설치

• 공식 설치 가이드: Vuetify 설치

vue add vuetify

npm install vuetify

설치 후 main.js 파일에서 Vuetify를 설정합니다:

import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';

createApp(App)
  .use(vuetify)
  .mount('#app');

스타일링 및 레이아웃

Vuetify는 Material Design의 레이아웃 시스템을 따릅니다. v-container, v-row, v-col을 사용하여 반응형 레이아웃을 쉽게 구성할 수 있습니다.

• v-container: 레이아웃의 기본 컨테이너로, 내부에 v-row와 v-col을 포함합니다.

• v-row: 수평 행을 생성하며, 여러 v-col을 포함할 수 있습니다.

• v-col: 열을 생성하며, 그리드 시스템에서 비율에 따라 폭을 차지합니다.

<v-container>
  <v-row>
    <v-col cols="12" md="8">Main content</v-col>
    <v-col cols="12" md="4">Sidebar</v-col>
  </v-row>
</v-container>

텍스트 크기 및 타이포그래피

• Vuetify는 text-h1에서 text-h6까지 다양한 텍스트 스타일과 크기를 제공하며, 이러한 클래스들을 사용해 쉽게 텍스트 스타일을 적용할 수 있습니다.

• 문서: 텍스트 및 타이포그래피

<v-typography variant="h1">This is a headline</v-typography>
<v-typography variant="body-1">This is body text</v-typography>

컬러 팔레트

• Vuetify는 Material Design을 기반으로 한 색상 팔레트를 포함하고 있어, 애플리케이션 전반에 걸쳐 일관된 색상 테마를 쉽게 적용할 수 있습니다.

• 문서: Material Colors

아이콘 폰트

• Vuetify는 다양한 아이콘 폰트를 지원하며, Material Design Icons(MDI)와 쉽게 통합할 수 있습니다.

• 아이콘 검색 및 사용: Vuetify 아이콘 폰트

• MDI 전체 라이브러리 보기: MDI 아이콘 라이브러리

테마 커스터마이징

• Vuetify에서 애플리케이션의 테마를 커스터마이징할 수 있습니다. 테마 값은 myCustomLightTheme 객체를 수정하여 변경할 수 있습니다.

• 문서: 테마 설정

const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
      },
    },
  },
});

컬러 속성

• Vuetify의 컬러 속성을 사용하여 Material Design의 색상 시스템으로 컴포넌트를 스타일링할 수 있습니다.

• 문서: 컬러 속성

간격(Spacing) 유틸리티

• Vuetify는 마진과 패딩을 쉽게 관리할 수 있는 간격 유틸리티를 제공합니다.

• 문서: 간격 유틸리티

그리드 시스템 (Col 속성)

• Vuetify의 그리드 시스템은 Flexbox를 기반으로 하며, 강력한 레이아웃 시스템을 제공합니다.

• 문서: 그리드 및 Col 속성

컴포넌트

텍스트 필드

• 텍스트 필드는 사용자로부터 텍스트 입력을 받기 위한 주요 폼 요소입니다.

• 문서: 텍스트 필드

<v-form>
  <v-text-field label="Name" v-model="name"></v-text-field>
  <v-select :items="['Option 1', 'Option 2']" label="Select an option"></v-select>
  <v-checkbox label="Accept Terms" v-model="accepted"></v-checkbox>
</v-form>

라디오 버튼

• 라디오 버튼은 목록에서 하나의 옵션을 선택할 때 사용됩니다.

• 문서: 라디오 버튼

다이얼로그(Dialog)

• 다이얼로그는 중요한 정보나 사용자의 결정을 요청하는 모달 창입니다.

• 예시: 다이얼로그 사용법

<v-dialog v-model="dialog">
  <v-card>
    <v-card-title>Dialog Title</v-card-title>
    <v-card-text>
      This is a dialog content.
    </v-card-text>
    <v-card-actions>
      <v-btn @click="dialog = false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

데이터 테이블

• 데이터 테이블은 구조화된 데이터를 표 형식으로 표시하는 데 사용되며, 정렬, 페이징, 검색 등의 기능을 제공합니다.

• 문서: 데이터 테이블

<v-data-table :headers="headers" :items="items" :search="search">
  <template v-slot:top>
    <v-text-field v-model="search" label="Search"></v-text-field>
  </template>
</v-data-table>

카드

• 카드는 다양한 유형의 콘텐츠를 표시하는 데 유용한 유연한 컨테이너입니다.

• 예시: 카드 사용법

<v-card>
  <v-card-title>Card Title</v-card-title>
  <v-card-subtitle>Card Subtitle</v-card-subtitle>
  <v-card-text>
    This is some text within a card.
  </v-card-text>
  <v-card-actions>
    <v-btn text>Action</v-btn>
  </v-card-actions>
</v-card>

셀렉트 입력

• 셀렉트 입력은 목록에서 옵션을 선택할 수 있도록 합니다.

• 문서: 셀렉트 입력

내비게이션 드로어

• 내비게이션 드로어는 사이드 메뉴를 제공하며, 토글로 표시하거나 숨길 수 있습니다.

• 문서: 내비게이션 드로어

리스트

• 리스트는 관련된 콘텐츠를 그룹화하여 표시하는 데 사용됩니다.

• 문서: 리스트

칩

• 칩은 복잡한 엔티티를 컴팩트한 형태로 표현하는 작은 컴포넌트입니다.

• 예시: 칩 사용법

• API 문서: v-chip API

vue vuex 란

곰돌이쿤 — Sat, 17 Aug 2024 12:51:11 +0900

Vuex는 Vue.js 애플리케이션에서 상태 관리를 중앙 집중화할 수 있도록 도와주는 공식적인 상태 관리 패턴 및 라이브러리입니다.

Vuex를 사용하면 애플리케이션의 상태를 중앙에서 관리하고, 이를 다양한 컴포넌트들이 공유할 수 있습니다.

Vuex는 특히 규모가 큰 애플리케이션에서 컴포넌트 간의 상태 관리를 단순화하고, 일관된 상태 관리를 가능하게 합니다.

Vuex의 주요 개념

1. State (상태)

• state는 애플리케이션의 중앙에서 관리되는 상태를 정의합니다. Vue 컴포넌트의 data와 유사하지만, 여러 컴포넌트가 공유할 수 있는 중앙 집중식 상태입니다.

const store = createStore({
  state: {
    todos: []
  },
});

2. Mutations (변이)

• mutations는 상태를 변경하는 메서드입니다. 상태를 변경할 때는 반드시 mutations를 통해 변경해야 합니다. 이는 Vuex의 핵심 개념 중 하나로, 상태 변이를 추적하고 디버깅을 쉽게 만들어줍니다.

mutations: {
  setTodos(state, todos) {
    state.todos = todos;
  },
  addTodo(state, todo) {
    state.todos.push(todo);
  },
  removeTodo(state, index) {
    state.todos.splice(index, 1);
  },
  updateTodoStatus(state, { index, completed }) {
    state.todos[index].completed = completed;
  }
}

3. Actions (액션)

• actions는 mutations와 유사하지만, 비동기 작업을 처리할 수 있습니다. 액션은 mutations를 커밋하여 상태를 변경합니다. 예를 들어, API 호출 후 응답 데이터를 상태에 반영하는 작업을 actions에서 처리합니다.

actions: {
  loadTodos({ commit }) {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      commit('setTodos', JSON.parse(savedTodos));
    }
  },
  saveTodos({ state }) {
    localStorage.setItem('todos', JSON.stringify(state.todos));
  },
  addTodo({ commit, dispatch }, todoText) {
    const newTodo = { text: todoText, completed: false };
    commit('addTodo', newTodo);
    dispatch('saveTodos');
  },
  removeTodo({ commit, dispatch }, index) {
    commit('removeTodo', index);
    dispatch('saveTodos');
  },
  toggleTodoStatus({ commit, dispatch }, payload) {
    commit('updateTodoStatus', payload);
    dispatch('saveTodos');
  }
}

4. Getters (게터)

• getters는 상태에서 값을 가져올 때 사용됩니다. Vue 컴포넌트에서 computed 속성과 유사하게 동작합니다. 상태를 가공하거나 필터링하여 반환할 수 있습니다.

getters: {
  todos(state) {
    return state.todos;
  }
}

5. Store (스토어)

• Vuex store는 Vuex의 중심입니다. 상태(state), 변이(mutations), 액션(actions), 게터(getters) 등을 포함하여 애플리케이션의 전체 상태를 관리합니다. 컴포넌트는 이 스토어를 통해 중앙 상태에 접근하고, 변경할 수 있습니다.

import { createStore } from 'vuex';

const store = createStore({
  state: {
    todos: []
  },
  mutations: { /* 변이들 */ },
  actions: { /* 액션들 */ },
  getters: { /* 게터들 */ }
});

export default store;

Vuex의 사용 예시

다음은 Vuex를 활용하여 To-Do 리스트 애플리케이션의 상태를 관리하는 방법에 대한 예시입니다.

1. 상태 정의 및 초기화

todos 배열을 상태로 정의하고, 로컬 스토리지에서 저장된 할 일 목록을 불러와 todos에 저장합니다.

state: {
  todos: []
}

2. 상태 업데이트

사용자가 새로운 할 일을 추가하거나, 할 일의 상태를 변경하면 Vuex의 mutations를 통해 상태가 업데이트됩니다.

mutations: {
  addTodo(state, todo) {
    state.todos.push(todo);
  },
  updateTodoStatus(state, { index, completed }) {
    state.todos[index].completed = completed;
  }
}

3. 액션을 통한 상태 관리

actions를 통해 비동기 작업과 상태 변이를 처리합니다. 예를 들어, 로컬 스토리지에 할 일 목록을 저장하는 작업은 actions에서 처리됩니다.

actions: {
  saveTodos({ state }) {
    localStorage.setItem('todos', JSON.stringify(state.todos));
  }
}

4. 컴포넌트에서 Vuex 상태 접근

컴포넌트에서는 mapGetters, mapActions를 사용하여 Vuex 상태와 메서드를 간단히 연결할 수 있습니다.

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['todos'])
  },
  methods: {
    ...mapActions(['addTodo', 'toggleTodoStatus', 'removeTodo'])
  }
}
</script>

요약

• 중앙 집중화된 상태 관리: Vuex를 사용하면 상태를 중앙에서 관리하여 컴포넌트 간의 상태 공유와 변경을 쉽게 추적할 수 있습니다.

• 예측 가능한 상태 관리: 모든 상태 변경은 mutations를 통해 이루어지므로, 상태 변경을 쉽게 예측하고 디버깅할 수 있습니다.

• 비동기 작업 관리: 비동기 작업은 actions를 통해 관리되어, 복잡한 비동기 로직도 쉽게 처리할 수 있습니다.

• Vue 컴포넌트와의 통합: mapGetters와 mapActions를 통해 Vue 컴포넌트와 Vuex 상태 및 메서드를 간단히 연결할 수 있습니다.

Vuex는 규모가 큰 애플리케이션에서 특히 유용하며, 상태를 일관되게 유지하고 컴포넌트 간의 상태 관리 복잡성을 줄여줍니다.

vue to-do 리스트 구현 6 - vuex 구현

곰돌이쿤 — Sat, 17 Aug 2024 12:45:55 +0900

Vuex를 사용하여 To-Do 리스트 애플리케이션을 리팩토링하는 방법을 설명하겠습니다.

Vuex는 Vue.js 애플리케이션에서 상태 관리를 중앙에서 처리할 수 있도록 도와주는 라이브러리입니다.

이 예제에서는 Vuex를 사용하여 할 일 목록(todos)을 중앙에서 관리하고, 컴포넌트들이 Vuex 스토어를 통해 상태를 접근하고 수정하도록 하겠습니다.

1. Vuex 설치

먼저 Vuex를 설치해야 합니다.

npm install vuex@next

2. Vuex 스토어 설정 (store/index.js)

src/store/index.js 파일을 생성하고, Vuex 스토어를 설정합니다.

import { createStore } from 'vuex'

const store = createStore({
  state: {
    todos: []
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos;
    },
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    removeTodo(state, index) {
      if (index >= 0 && index < state.todos.length) {
        state.todos.splice(index, 1);
      }
    },
    updateTodoStatus(state, { index, completed }) {
      if (index >= 0 && index < state.todos.length) {
        state.todos[index].completed = completed;
      }
    }
  },
  actions: {
    loadTodos({ commit }) {
      const savedTodos = localStorage.getItem('todos');
      if (savedTodos) {
        commit('setTodos', JSON.parse(savedTodos));
      }
    },
    saveTodos({ state }) {
      localStorage.setItem('todos', JSON.stringify(state.todos));
    },
    addTodo({ commit, dispatch }, todoText) {
      const newTodo = { text: todoText, completed: false };
      commit('addTodo', newTodo);
      dispatch('saveTodos');
    },
    removeTodo({ commit, dispatch }, index) {
      commit('removeTodo', index);
      dispatch('saveTodos');
    },
    toggleTodoStatus({ commit, dispatch }, payload) {
      const { index, completed } = payload;
      console.log('toggleTodoStatus', index, completed);
      commit('updateTodoStatus', { index, completed });
      dispatch('saveTodos');
    }
  },
  getters: {
    todos(state) {
      return state.todos;
    }
  }
});

export default store;

3. Vue 애플리케이션에 Vuex 추가 (main.js)

main.js 파일에서 Vuex 스토어를 Vue 애플리케이션에 추가합니다.

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import router from './router'  // Vue Router를 추가
import store from './store'  // Vuex 스토어를 가져옵니다.


loadFonts()

createApp(App)
  .use(vuetify)
  .use(router)  // Vue Router 사용
  .use(store)  // Vuex 스토어를 사용합니다.
  .mount('#app')

4. ToDoList.vue 컴포넌트 수정

이제 ToDoList.vue 컴포넌트를 수정하여 Vuex 스토어에서 상태를 가져오고, 할 일을 추가 및 삭제하는 기능을 구현합니다.

<template>
  <v-container>
    <v-row>
      <v-col>
        <h1>Vue.js To-Do App</h1>
        <AddTodo @add-todo="addTodo" />
        <v-list>
          <v-list-item
            v-for="(todo, index) in todos"
            :key="index"
            @click="$router.push({ name: 'ToDoDetail', params: { id: index } })"
          >
            <template v-slot:prepend>
              <v-checkbox
                v-model="todo.completed"
                @click.stop="toggleTodoStatus({ index, completed: !todo.completed })"
                hide-details
              />
            </template>
            
            <v-list-item-title>{{ todo.text }}</v-list-item-title>
            
            <template v-slot:append>
              <v-btn icon="mdi-delete" size="small" @click.stop="removeTodo(index)">
              </v-btn>
            </template>
          </v-list-item>
        </v-list>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import AddTodo from './AddTodo.vue'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'ToDoList',
  components: { AddTodo },
  computed: {
    ...mapGetters(['todos'])  // Vuex에서 todos 상태를 가져옵니다.
  },
  methods: {
    ...mapActions(['addTodo', 'removeTodo', 'toggleTodoStatus']),  // Vuex 액션들을 가져옵니다.
  },
  created() {
    this.$store.dispatch('loadTodos')  // Vuex 스토어에서 할 일을 로드합니다.
  }
}
</script>

5. TodoDetail.vue 컴포넌트 수정

TodoDetail.vue에서 Vuex 상태를 사용하도록 수정합니다.

<template>
    <v-container>
      <h2>To-Do Detail</h2>
      <v-card>
        <v-card-text>
          <p>ID: {{ id }}</p>
          <p v-if="todo">Text: {{ todo.text }}</p>
          <p v-else>Todo not found</p>
        </v-card-text>
      </v-card>
      <v-btn @click="$router.push('/')">Back</v-btn>
    </v-container>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  
  export default {
    props: {
      id: {
        type: String,
        required: true
      }
    },
    computed: {
      ...mapGetters(['todos']),
      todo() {
        return this.todos[this.id]
      }
    }
  }
  </script>

1. Vuex 상태 관리:

• state: todos 배열을 중앙에서 관리합니다.

• mutations: 상태를 직접적으로 변경하는 로직을 포함합니다(addTodo, removeTodo, updateTodoStatus).

• actions: 비동기 작업이나 여러 변형을 처리하고, 상태를 변경하는 메서드를 포함합니다(loadTodos, saveTodos 등).

2. ToDoList.vue 컴포넌트:

• computed: mapGetters를 통해 Vuex에서 todos 상태를 가져옵니다.

• methods: mapActions를 통해 Vuex 액션을 사용하여 할 일을 추가, 삭제, 상태를 변경하고, 로컬 스토리지와 동기화합니다.

• created: 컴포넌트가 생성될 때 loadTodos 액션을 호출하여 로컬 스토리지에서 저장된 할 일 목록을 불러옵니다.

이전 블로그

vue to-do 리스트 구현 5 - router 구현

https://juntcom.tistory.com/321

Vue Router란?

곰돌이쿤 — Sat, 17 Aug 2024 11:52:48 +0900

Vue Router란?

Vue Router는 Vue.js 애플리케이션에서 라우팅을 관리하는 공식 라이브러리입니다.

라우팅이란 사용자가 특정 URL을 요청했을 때, 그 URL에 맞는 페이지나 컴포넌트를 제공하는 기능을 말합니다.

Vue Router를 사용하면 단일 페이지 애플리케이션(SPA)에서 페이지 간 네비게이션을 쉽게 구현할 수 있습니다.

주요 개념과 기능

1. 라우터(Router)

Vue Router는 createRouter 함수를 사용하여 라우터 인스턴스를 생성합니다. 이 라우터 인스턴스는 애플리케이션의 경로(라우트)와 해당 경로에 연결된 컴포넌트들을 정의하는 곳입니다.

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

위 코드에서 routes는 경로와 그 경로에 연결된 컴포넌트들의 배열입니다. 이 배열은 경로와 해당 경로에 접근할 때 표시할 컴포넌트를 매핑합니다.

2. 라우트(Route)

라우트는 URL과 해당 URL에서 렌더링할 컴포넌트를 매핑하는 객체입니다. 예를 들어, /about 경로에 접근하면 About 컴포넌트가 렌더링됩니다.

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

3. 라우터 히스토리 모드(History Mode)

Vue Router는 기본적으로 Hash 모드와 HTML5 History 모드를 지원합니다.

• Hash 모드: URL에 #을 포함하여 경로를 구분합니다. 예: http://example.com/#/about. 브라우저에서 URL의 해시 부분은 서버로 전달되지 않기 때문에, 서버 측에서 추가 설정이 필요 없습니다.

• HTML5 History 모드: URL에 해시(#) 없이 깔끔한 경로를 제공합니다. 예: http://example.com/about. 이 모드를 사용할 경우 서버 측 설정을 통해 모든 경로를 index.html로 리디렉션하도록 해야 합니다.

const router = createRouter({
  history: createWebHistory(), // HTML5 History 모드
  routes
})

4. 라우터 뷰(Router View)

router-view는 현재 활성화된 경로에 맞는 컴포넌트를 표시하는 Vue의 내장 컴포넌트입니다. 애플리케이션에서 이 컴포넌트를 어디에 두느냐에 따라, 해당 위치에 라우터에 의해 결정된 컴포넌트가 렌더링됩니다.

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

5. 라우터 링크(Router Link)

router-link는 다른 페이지나 컴포넌트로 네비게이션할 수 있는 링크를 만드는 Vue의 내장 컴포넌트입니다. 이를 사용하면 HTML의 <a> 태그처럼 작동하지만, SPA 특성상 페이지 전체를 다시 로드하지 않고도 URL을 변경할 수 있습니다.

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

6. 동적 라우트 매칭(Dynamic Route Matching)

동적 라우트 매칭은 URL 경로의 일부를 변수로 처리하여, 다양한 URL 패턴에 대해 하나의 컴포넌트를 사용할 수 있게 합니다. 예를 들어, 블로그 포스트 페이지를 생각해 볼 수 있습니다.

const routes = [
  { path: '/posts/:id', component: PostDetail }
]

여기서 :id는 동적 세그먼트로, 실제로는 posts/1, posts/2 등의 URL이 이 경로와 매칭됩니다. 이 id는 props나 this.$route.params를 통해 컴포넌트에서 접근할 수 있습니다.

7. 네비게이션 가드(Navigation Guards)

네비게이션 가드는 특정 경로에 접근하기 전에 실행되는 함수로, 라우팅을 허용할지, 막을지, 또는 리다이렉트할지를 결정합니다. 이를 통해 인증이 필요한 페이지에 대한 접근을 제어할 수 있습니다.

• 전역 가드: 모든 경로 변경에 대해 적용됩니다.

• 라우트별 가드: 특정 라우트에만 적용됩니다.

• 컴포넌트 내 가드: 컴포넌트 내에서 정의되고, 해당 컴포넌트가 활성화될 때 적용됩니다.

router.beforeEach((to, from, next) => {
  if (to.path === '/protected' && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

8. 중첩된 라우트(Nested Routes)

Vue Router는 중첩된 라우트를 지원합니다. 이는 라우트가 중첩된 컴포넌트를 렌더링할 수 있도록 해줍니다.

const routes = [
  { 
    path: '/user/:id', 
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

이 경우, UserProfile이나 UserPosts 컴포넌트는 User 컴포넌트의 내부에 렌더링됩니다.

결론

Vue Router는 Vue.js 애플리케이션에서 페이지 간 이동을 관리하고, URL을 통해 상태를 관리할 수 있는 강력한 도구입니다. 이를 통해 SPA에서의 복잡한 네비게이션 구조를 간편하게 관리할 수 있으며, 사용자 경험을 향상시키는 데 매우 유용합니다. Vue Router를 잘 이해하고 사용하면, Vue.js 애플리케이션의 네비게이션과 상태 관리를 훨씬 더 효율적으로 수행할 수 있습니다.

vue to-do 리스트 구현 5 - router 구현

곰돌이쿤 — Sat, 17 Aug 2024 11:28:10 +0900

Vue Router는 Vue.js 애플리케이션에서 라우팅을 관리하는 공식 라이브러리입니다.

라우팅이란 사용자가 특정 URL을 요청했을 때, 그 URL에 맞는 페이지나 컴포넌트를 제공하는 기능을 말합니다.

Vue Router를 사용하면 단일 페이지 애플리케이션(SPA)에서 페이지 간 네비게이션을 쉽게 구현할 수 있습니다.

1. Vue Router 설치

먼저 Vue Router를 프로젝트에 설치해야 합니다.

npm install vue-router@next

이 명령어는 Vue 3용 Vue Router를 설치합니다. 설치가 완료되면 Vue Router를 프로젝트에 추가할 수 있습니다.

2. 라우터 설정 (router/index.js)

프로젝트의 src 디렉토리 아래에 router 폴더를 만들고, 그 안에 index.js 파일을 생성합니다. 이 파일에서 라우터를 설정합니다.

import { createRouter, createWebHistory } from 'vue-router'
import ToDoList from '../components/ToDoList.vue'
import TodoDetail from '../components/TodoDetail.vue'

const routes = [
  { path: '/', name: 'Home', component: ToDoList },
  { path: '/todo/:id', name: 'TodoDetail', component: TodoDetail, props: true }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

• createRouter: Vue 3에서 라우터를 생성하는 함수입니다.

• createWebHistory: HTML5의 history 모드를 사용하는 함수로, 브라우저의 URL을 깔끔하게 유지합니다.

• routes: 경로와 그에 연결된 컴포넌트를 정의하는 배열입니다.

• props: true: 라우트 파라미터를 컴포넌트의 props로 전달할 때 사용합니다.

3. 라우터를 Vue 애플리케이션에 추가 (main.js)

이제 main.js 파일에서 Vue 애플리케이션에 라우터를 추가해야 합니다.

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import router from './router'  // Vue Router를 가져옵니다.

loadFonts()

createApp(App)
  .use(vuetify)
  .use(router)  // Vue Router를 사용합니다.
  .mount('#app')

여기서 router를 Vue 애플리케이션에 use하여 라우터를 활성화합니다.

4. App.vue에서 라우터 뷰 설정

App.vue 파일에서 router-view 컴포넌트를 사용하여 현재 라우터에 맞는 컴포넌트를 렌더링할 수 있도록 설정합니다.

<template>
  <v-app>
    <v-container>
      <router-view />  <!-- 라우터가 렌더링할 컴포넌트가 여기에 표시됩니다. -->
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'App',
}
</script>

• router-view: Vue Router에서 제공하는 컴포넌트로, 현재 라우트에 맞는 컴포넌트를 렌더링합니다.

5. 페이지 컴포넌트 작성

각 라우트에 연결된 컴포넌트를 작성합니다. 예를 들어, ToDoList.vue와 TodoDetail.vue 파일을 작성합니다.

ToDoList.vue

<template>
  <v-container>
    <v-row>
      <v-col>
        <h1>Vue.js To-Do App</h1>
        <AddTodo @add-todo="addTodo" />
        <v-list>
          <v-list-item
            v-for="(todo, index) in todos"
            :key="index"
            @click="$router.push({ name: 'ToDoDetail', params: { id: index } })"
          >
            <template v-slot:prepend>
              <v-checkbox
                v-model="todo.completed"
                @change="saveTodos"
                hide-details
              />
            </template>
            
            <v-list-item-title>{{ todo.text }}</v-list-item-title>
            
            <template v-slot:append>
              <v-btn icon="mdi-delete" size="small" @click.stop="removeTodo(index)">
              </v-btn>
            </template>
          </v-list-item>
        </v-list>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import AddTodo from './AddTodo.vue'

export default {
  name: 'ToDoList',
  components: { AddTodo },
  data() {
    return {
      todos: []
    }
  },
  mounted() {
    const savedTodos = localStorage.getItem('todos')
    if (savedTodos) {
      this.todos = JSON.parse(savedTodos)
    }
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push({ text: newTodo, completed: false })
      this.saveTodos()
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
      this.saveTodos()
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos))
    }
  }
}
</script>

• $router.push: 사용자가 클릭할 때 특정 라우트로 이동합니다.

• params: { id: index }: 라우트 파라미터로 id를 전달합니다.

ToDoDetail.vue

<template>
  <v-container>
    <h2>To-Do Detail</h2>
    <v-card>
      <v-card-text>
        <p>ID: {{ id }}</p>
      </v-card-text>
    </v-card>
    <v-btn @click="$router.push('/')">Back</v-btn>
  </v-container>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  }
}
</script>

• props: { id }: 라우트 파라미터로 전달된 id를 컴포넌트에서 사용합니다.

이전 블로그
vue to-do 리스트 구현 4 - vuetify 적용

https://juntcom.tistory.com/319

AWS DMS 를 통한 EC2 -> RDS 데이터 마이그레이션

곰돌이쿤 — Fri, 16 Aug 2024 21:53:28 +0900

1. AWS DMS 설정 준비

1. RDS 인스턴스 생성

• 이미 RDS 인스턴스가 생성되어 있다면 이 단계를 건너뛰세요.

• RDS에서 MySQL 인스턴스를 생성합니다. 인스턴스 생성 과정에서 적절한 VPC, 서브넷, 보안 그룹 설정을 확인해야 합니다.

2. IAM 역할 생성

• AWS DMS에 필요한 IAM 역할을 생성해야 합니다.

• 필요한 권한은 AmazonDMSVPCManagementRole, AmazonDMSCloudWatchLogsRole, AmazonDMSRedshiftS3Role입니다.

2. AWS DMS 구성

1. Replication Instance 생성

• AWS Management Console에서 DMS 서비스로 이동합니다.

• Replication Instances에서 새로운 레플리케이션 인스턴스를 생성합니다. -

Replication instances를 선택한 후 Create replication instance를 클릭합니다.

복제 인스턴스 세부 정보를 입력합니다:

• 인스턴스 식별자: dms-replication-instance

• 인스턴스 클래스: 요구 사항에 맞는 인스턴스 유형 선택

• 할당된 저장소: 요구 사항에 맞는 스토리지 크기 선택

• VPC: EC2와 RDS가 있는 VPC 선택

• EC2와 RDS가 있는 동일한 VPC에 레플리케이션 인스턴스를 배치하고, 퍼블릭 액세스 여부를 선택합니다.

2. Endpoint 생성

• DMS 콘솔에서 Endpoints로 이동하여 두 개의 엔드포인트를 생성합니다.

Source Endpoint (EC2 MySQL)

• Endpoint type: Source

• Engine type: MySQL

• Server name: EC2 인스턴스의 퍼블릭 IP 주소 또는 도메인

• Port: MySQL 기본 포트 (3306)

• Username: MySQL 사용자 이름

• Password: MySQL 비밀번호

• Database name: MySQL 데이터베이스 이름 (특정 데이터베이스만 마이그레이션하려면)

Target Endpoint (RDS MySQL)

• Endpoint type: Target

• Engine type: MySQL

• Server name: RDS 인스턴스의 엔드포인트 (콘솔에서 확인 가능)

• Port: MySQL 기본 포트 (3306)

• Username: RDS MySQL 사용자 이름

• Password: RDS MySQL 비밀번호

• Database name: MySQL 데이터베이스 이름

3. Migration Task 생성

• Database migration tasks에서 새 마이그레이션 태스크를 생성합니다.

• Source와 Target Endpoint를 설정합니다.

• Migration type을 Migrate existing data 또는 Migrate existing data and replicate ongoing changes로 선택합니다.

• Migrate existing data: 기존 데이터만 마이그레이션합니다.

• Migrate existing data and replicate ongoing changes: 기존 데이터 마이그레이션과 동시에 변경 사항을 실시간으로 복제합니다.

• 테이블 매핑 설정에서 모든 스키마와 테이블을 포함하도록 설정합니다 (% 사용).

• 태스크 설정에서 데이터 검증, LOB 모드 등의 옵션을 설정할 수 있습니다.

4. Migration Task 시작

• 태스크를 생성한 후 Start 버튼을 눌러 태스크를 실행합니다.

• 콘솔에서 태스크 진행 상태를 모니터링할 수 있습니다.

Table mappings 섹션에서 테이블 매핑을 설정

시스템 테이블을 제외하려면 다음과 같이 설정하시면 됩니다:

1. Schema:

• mysql, information_schema, performance_schema, sys 등 시스템 데이터베이스를 제외하려면 각각의 스키마 이름을 Schema 필드에 입력합니다.

2. Source name:

• 각 스키마에 대해 시스템 테이블이 위치한 스키마 이름을 입력합니다. 예를 들어, mysql 스키마를 제외하려면 mysql을 입력합니다.

3. Source table name:

• 테이블 이름을 제외하려면, %를 사용하여 모든 테이블을 선택할 수 있습니다.

4. Action:

• Exclude로 설정합니다.

db 데이터베이스만 가져오도록 DMS 테이블 매핑 규칙을 설정하려면, 다음과 같이 설정할 수 있습니다.

1. Schema 필드: db 입력

2. Source table name: % (모든 테이블을 의미)

3. Action: Include

위 설정으로 DMS가 db 데이터베이스의 모든 테이블을 포함하여 마이그레이션하도록 구성됩니다. 다른 데이터베이스는 이 설정으로 제외됩니다.

db 라는 네임스페이스의 db 만 가져옵니다.

{
  "rules": [
    {
      "rule-type": "selection",
      "rule-id": "1",
      "rule-name": "include-db",
      "object-locator": {
        "schema-name": "db",
        "table-name": "%"
      },
      "rule-action": "include",
      "filters": []
    }
  ]
}

Mysql 타임존 수정 방법

1. MySQL 파라미터 그룹 수정

RDS의 MySQL 인스턴스에서 타임존을 변경하려면 먼저 파라미터 그룹에서 time_zone 파라미터를 수정해야 합니다.

1. 파라미터 그룹 생성 또는 수정:

• AWS Management Console에 로그인한 후, RDS 콘솔로 이동합니다.

• 왼쪽 탐색 창에서 **“Parameter groups”**를 클릭합니다.

• 새로운 파라미터 그룹을 생성하거나 기존의 파라미터 그룹을 수정합니다.

• 파라미터 그룹에서 time_zone 파라미터를 찾습니다.

• time_zone 파라미터 값을 원하는 타임존으로 설정합니다 (예: Asia/Seoul, UTC, Europe/London 등).

2. 파라미터 그룹 적용:

• RDS 인스턴스에 해당 파라미터 그룹을 적용합니다.

• 파라미터 그룹을 적용한 후에는 RDS 인스턴스를 재부팅해야 새로운 타임존이 적용됩니다

2. RDS 인스턴스에 파라미터 그룹 적용

1. RDS 인스턴스 수정:

• RDS 콘솔에서 타임존을 변경할 RDS 인스턴스를 선택한 후 **“Modify”**를 클릭합니다.

• DB parameter group에서 새로 생성한 파라미터 그룹을 선택합니다.

• 인스턴스를 수정한 후, **“Apply immediately”**를 선택하여 변경 사항을 즉시 적용합니다.

2. 재부팅 필요:

• 파라미터 그룹이 적용된 후, RDS 인스턴스를 재부팅해야 변경된 타임존이 적용됩니다.

vue to-do 리스트 구현 4 - vuetify 적용

곰돌이쿤 — Fri, 16 Aug 2024 15:51:45 +0900

Vuetify는 Vue.js 기반의 Material Design 컴포넌트 프레임워크로, 반응형 UI를 쉽게 만들 수 있습니다.

기존의 To-Do 리스트 애플리케이션에 Vuetify를 적용하여 스타일을 개선하고, Vuetify의 컴포넌트를 활용하여 UI를 향상시켜보겠습니다.

1. Vuetify 설치

먼저 Vuetify를 프로젝트에 설치합니다.

1. 터미널에서 Vuetify 설치:

vue add vuetify

vue add vuetify 를 할 경우 4가지 선택지가 나오는데
vuetify2 를 할 것인지, 그리고 vue-cli 를 할 것인지에 대한 선택지가 나오는데
vuetify3 및 vite 라는 빌드툴을 사용하기로 했습니다. (최신버젼이기 때문)

Vuetify 3 + Vite의 장점

A. 빠른 빌드 속도:

• Vite는 빌드 도구로서 매우 빠른 속도를 자랑합니다. 특히 개발 중에 실시간으로 코드 변경 사항을 반영하는 속도가 빠르기 때문에, 대규모 프로젝트에서 매우 유용합니다.

• Vite는 기본적으로 ES 모듈을 기반으로 작동하므로, 빌드 과정이 간소화되고 빠릅니다.

B. 최신 기능:

• Vuetify 3는 Vuetify의 최신 버전으로, 최신 Vue.js 기능들을 활용할 수 있습니다. 특히, Composition API와 함께 사용할 때 더욱 강력한 기능을 제공합니다.

• Vuetify 3은 새로운 디자인 시스템과 개선된 컴포넌트 구조를 제공하여 UI 개발에 더 나은 경험을 제공합니다.

C. 미래 지향적:

• Vite와 Vuetify 3은 모두 Vue.js 커뮤니티에서 적극적으로 지원하는 최신 도구들입니다. 이를 사용하면 최신 기술을 습득하고 미래의 프로젝트에서 활용할 준비를 할 수 있습니다.

Vuetify 3 + Vite의 단점 및 고려사항

A. 호환성 문제:

• Preview 단계: Vuetify 3은 아직 preview 단계이므로, 일부 기능이 불안정할 수 있으며, 공식적으로 모든 기능이 완전히 지원되지 않을 수 있습니다.

• 플러그인 호환성: Vuetify 3과 Vite를 사용하면, 기존의 일부 Vue.js 플러그인 또는 Vuetify 2에서 사용하던 플러그인들이 호환되지 않을 수 있습니다.

B. 러닝 커브:

• Vite는 Webpack과는 다른 접근 방식을 취하기 때문에, 기존에 Webpack에 익숙한 개발자라면 Vite의 설정과 동작 방식에 적응하는 데 약간의 시간이 걸릴 수 있습니다.

C. 안정성:

• Vite와 Vuetify 3의 조합은 최신 기술 스택이기 때문에, 프로젝트에 사용하기 전에 충분한 테스트가 필요할 수 있습니다. 대규모 프로젝트나 프로덕션 환경에서 사용할 때는 사전 검토가 중요합니다.

2. 프로젝트 실행:

설치가 완료된 후, 프로젝트를 다시 실행하여 Vuetify가 정상적으로 적용되었는지 확인합니다.

npm run dev

1). App.vue에서 Vuetify 레이아웃 적용

Vuetify의 기본 레이아웃 컴포넌트인 v-app, v-container, v-row, v-col 등을 사용하여 레이아웃을 설정합니다.

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <h1 class="text-center">Vue.js To-Do App</h1>
          <AddTodo @add-todo="addTodo" />
          <ToDoList :todos="todos" @remove-todo="removeTodo" @save-todos="saveTodos" />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
import AddTodo from './components/AddTodo.vue';
import ToDoList from './components/ToDoList.vue';

export default {
  name: 'App',
  components: {
    AddTodo,
    ToDoList
  },
  data() {
    return {
      todos: []
    };
  },
  mounted() {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      this.todos = JSON.parse(savedTodos);
    }
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push({ text: newTodo, completed: false });
      this.saveTodos();
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
      this.saveTodos();
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    }
  }
};
</script>

<style>
.text-center {
  text-align: center;
}
</style>

3. AddTodo.vue에 Vuetify 컴포넌트 적용

AddTodo.vue 컴포넌트에서 Vuetify의 입력 및 버튼 컴포넌트를 사용합니다.

<template>
    <v-row class="mb-3">
      <v-col>
        <v-text-field
          v-model="newTodo"
          label="Add a new to-do"
          outlined
          dense
          @keyup.enter="submitTodo"
        />
      </v-col>
      <v-col cols="auto">
        <v-btn color="primary" @click="submitTodo">Add</v-btn>
      </v-col>
    </v-row>
  </template>
  
  <script>
  export default {
    name: 'AddTodo',
    data() {
      return {
        newTodo: ''
      };
    },
    methods: {
      submitTodo() {
        if (this.newTodo.trim()) {
          this.$emit('add-todo', this.newTodo);
          this.newTodo = '';
        }
      }
    }
  };
  </script>

4. TodoList.vue에 Vuetify 컴포넌트 적용

TodoList.vue 컴포넌트에서도 Vuetify의 리스트, 체크박스, 버튼 컴포넌트를 사용합니다.

<template>
  <v-list>
    <v-list-item
      v-for="(todo, index) in todos"
      :key="index"
      :class="{ 'completed': todo.completed }"
    >
      <v-row align="center" no-gutters>
        <v-col cols="auto" class="mr-3">
          <v-checkbox
            v-model="todo.completed"
            @change="saveTodos"
            hide-details
          />
        </v-col>
        <v-col>
          <v-list-item-content>
            <v-list-item-title>{{ todo.text }}</v-list-item-title>
          </v-list-item-content>
        </v-col>
        <v-col cols="auto">
          <v-btn icon small @click="removeTodo(index)">
            <v-icon>mdi-delete</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    todos: {
      type: Array,
      required: true
    }
  },
  methods: {
    removeTodo(index) {
      this.$emit('remove-todo', index);
    },
    saveTodos() {
      this.$emit('save-todos');
    }
  }
};
</script>

<style scoped>
.completed .v-list-item__title {
  text-decoration: line-through;
  color: grey;
}
</style>

전체 코드 요약

App.vue

• Vuetify의 레이아웃 컴포넌트(v-app, v-container, v-row, v-col)을 사용하여 구조를 만듭니다.

AddTodo.vue

• Vuetify의 v-text-field와 v-btn을 사용하여 입력 필드와 버튼을 구현합니다.

TodoList.vue

• Vuetify의 v-list, v-checkbox, v-btn, v-icon을 사용하여 할 일 리스트와 삭제 버튼을 구현합니다.

이전 블로그

vue to-do 리스트 구현 3 - 컴포넌트 분리 및 emit 실습
https://juntcom.tistory.com/318

vue to-do 리스트 구현 3 - 컴포넌트 분리 및 emit 실습

곰돌이쿤 — Fri, 16 Aug 2024 14:10:59 +0900

To-Do 리스트 애플리케이션에서 add 컴포넌트와 list 컴포넌트를 분리하는 작업을 하겠습니다.
컴포넌트를 분리하면 코드의 모듈화가 가능해지고, 각 컴포넌트가 자신의 역할에만 집중할 수 있게 됩니다.

이 과정에서 Vue.js의 컴포넌트 간 데이터 전달(props와 events)을 이해하는 데도 도움이 됩니다.

1. AddTodo.vue 컴포넌트 생성

1. AddTodo.vue 파일 생성:

• src/components 디렉토리 안에 AddTodo.vue 파일을 생성합니다.

2. AddTodo.vue 초기 코드 작성:

• 이 컴포넌트는 새로운 할 일을 입력하고 추가하는 역할을 합니다.

<template>
  <div>
    <input v-model="newTodo" placeholder="Add a new to-do" @keyup.enter="submitTodo" />
    <button @click="submitTodo">Add</button>
  </div>
</template>

<script>
export default {
  name: 'AddTodo',
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    submitTodo() {
      if (this.newTodo.trim()) {
        this.$emit('add-todo', this.newTodo);
        this.newTodo = ''; // 입력 필드 초기화
      }
    }
  }
};
</script>

3. 기능 설명:

• newTodo라는 로컬 데이터 속성을 가지고 있으며, 사용자가 할 일 텍스트를 입력합니다.

• 사용자가 Enter 키를 누르거나 “Add” 버튼을 클릭하면 submitTodo 메서드가 호출됩니다.

• submitTodo 메서드는 add-todo 이벤트를 상위 컴포넌트로 발송(emit)하여 입력된 할 일을 전달합니다.

2. TodoList.vue 컴포넌트 생성

1. TodoList.vue 파일 생성:

• src/components 디렉토리 안에 TodoList.vue 파일을 생성합니다.

2. TodoList.vue 초기 코드 작성:

• 이 컴포넌트는 할 일 리스트를 렌더링하고, 할 일 항목을 삭제하는 역할을 합니다.

<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      <input type="checkbox" v-model="todo.completed" @change="saveTodos" />
      <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
      <button @click="removeTodo(index)">Delete</button>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ToDoList',
  props: {
    todos: {
      type: Array,
      required: true
    }
  },
  methods: {
    removeTodo(index) {
      this.$emit('remove-todo', index);
    },
    saveTodos() {
      this.$emit('save-todos');
    }
  }
};
</script>

<style>
.completed {
  text-decoration: line-through;
  color: grey;
}
</style>

3. 기능 설명:

• todos 배열을 props로 받아와서 리스트를 렌더링합니다.

• 각 할 일 항목의 체크박스 상태를 변경하면 saveTodos 메서드가 호출되어, 상위 컴포넌트로 상태 저장 이벤트(save-todos)를 발송합니다.

• “Delete” 버튼을 클릭하면 해당 항목을 삭제하기 위한 remove-todo 이벤트를 발송합니다.

3. App.vue 파일 수정

1. AddTodo와 TodoList 컴포넌트 가져오기:

• App.vue 파일에서 새로 생성한 두 컴포넌트를 가져오고, 이를 사용해 To-Do 리스트를 완성합니다.

<template>
  <h1>Vue.js To-Do App</h1>
  <add-todo @add-todo="addTodo" />
  <to-do-list :todos="todos" @remove-todo="removeTodo" @save-todos="saveTodos" />
</template>

<script>
import AddTodo from './components/AddTodo.vue';
import ToDoList from './components/ToDoList.vue';


export default {
  name: 'App',
  components: {
    AddTodo,
    ToDoList
  },
  data() {
    return {
      todos: []
    };
  },
  mounted() {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      this.todos = JSON.parse(savedTodos);
    }
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push({ text: newTodo, completed: false });
      this.saveTodos();
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
      this.saveTodos();
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 기능 설명:

• AddTodo 컴포넌트에서 발송된 add-todo 이벤트를 받아 addTodo 메서드를 호출합니다.

• TodoList 컴포넌트에서 발송된 remove-todo와 save-todos 이벤트를 처리하여 할 일 리스트를 관리하고 로컬 스토리지에 저장합니다.

• 로컬 스토리지에서 할 일 목록을 불러오고, 이를 todos 배열에 저장합니다.

요약

1. AddTodo.vue: 사용자가 할 일을 입력하고 추가하는 기능을 담당하는 컴포넌트.

2. TodoList.vue: 할 일 목록을 렌더링하고, 항목을 삭제하거나 완료 상태를 관리하는 컴포넌트.

3. App.vue: 상위 컴포넌트로서, AddTodo와 TodoList 컴포넌트를 포함하고, 할 일 데이터를 중앙에서 관리하는 역할을 수행.

이전블로그
로컬스토리지 통한 to-do list 구현
https://juntcom.tistory.com/317

vuejs to-do 리스트 구현 2 - 로컬스토리지

곰돌이쿤 — Fri, 16 Aug 2024 12:26:37 +0900

To-Do 리스트 항목을 로컬 스토리지에 저장하고, 페이지 새로고침 후에도 할 일 목록이 유지되도록 기능을 추가하겠습니다.

이를 위해 ToDoList.vue 컴포넌트의 코드를 수정할 것입니다.

수정된 ToDoList.vue 코드

<template>
  <div>
    <h2>To-Do List</h2>
    <input v-model="newTodo" placeholder="Add a new to-do" @keyup.enter="addTodo" />
    <button @click="addTodo">Add</button>

    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed" @change="saveTodos" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ToDoList',
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  mounted() {
    // 컴포넌트가 마운트될 때 로컬 스토리지에서 할 일 목록을 불러옵니다.
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      this.todos = JSON.parse(savedTodos);
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo, completed: false });
        this.newTodo = '';
        this.saveTodos(); // 새로운 할 일 추가 후 로컬 스토리지에 저장
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
      this.saveTodos(); // 할 일 삭제 후 로컬 스토리지에 저장
    },
    saveTodos() {
      // 현재 할 일 목록을 로컬 스토리지에 저장합니다.
      localStorage.setItem('todos', JSON.stringify(this.todos));
    }
  }
};
</script>

<style>
.completed {
  text-decoration: line-through;
  color: grey;
}
</style>

코드 설명

1. 로컬 스토리지에서 할 일 목록 불러오기:

• mounted() 훅에서 컴포넌트가 마운트될 때 localStorage.getItem('todos')를 통해 로컬 스토리지에 저장된 할 일 목록을 불러옵니다.

• 만약 저장된 할 일 목록이 있으면, 이를 JSON으로 파싱하여 todos 배열에 할당합니다.

2. 할 일 목록 저장:

• addTodo와 removeTodo 메소드가 실행될 때, saveTodos() 메소드를 호출하여 현재 todos 배열을 로컬 스토리지에 저장합니다.

• saveTodos() 메소드는 localStorage.setItem('todos', JSON.stringify(this.todos))를 통해 todos 배열을 문자열로 변환하여 로컬 스토리지에 저장합니다.

3. 할 일 완료 상태 변경 시 저장:

• 할 일의 체크박스를 클릭하여 완료 상태를 변경할 때도 saveTodos() 메소드를 호출하여 변경된 상태를 로컬 스토리지에 저장합니다.

개발자도구 > Application > Local storage > 도메인 > todos 에 데이터가 쌓인 걸 볼 수 있습니다.

로컬스토리지란

로컬 스토리지는 웹 브라우저에서 제공하는 클라이언트 측 저장소입니다. 이를 통해 웹 애플리케이션은 사용자의 데이터를 클라이언트(브라우저) 측에 영구적으로 저장할 수 있습니다. 로컬 스토리지에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 유지됩니다.

로컬 스토리지의 특징

1. 키-값(Key-Value) 쌍으로 저장:

• 로컬 스토리지는 데이터를 키-값 쌍으로 저장합니다. 즉, 데이터에 접근할 때 특정 키를 사용하여 해당 값을 가져오거나 수정할 수 있습니다.

2. 영구 저장:

• 로컬 스토리지에 저장된 데이터는 사용자가 명시적으로 삭제하지 않는 한 영구적으로 저장됩니다. 쿠키와 달리 만료 시간이 없으며, 브라우저를 닫거나 컴퓨터를 재부팅해도 유지됩니다.

3. 도메인 별 저장:

• 로컬 스토리지는 도메인 단위로 데이터를 저장합니다. 이는 특정 웹사이트에서 저장된 데이터가 다른 도메인에서는 접근할 수 없음을 의미합니다.

4. 5MB 정도의 용량 제한:

• 대부분의 브라우저에서는 로컬 스토리지에 약 5MB 정도의 데이터를 저장할 수 있습니다. 이는 비교적 큰 용량으로, 텍스트 기반 데이터나 간단한 설정 값을 저장하는 데 충분합니다.

5. 동기적 접근:

• 로컬 스토리지는 동기적으로 동작합니다. 즉, 데이터를 저장하거나 불러올 때 해당 작업이 즉시 처리되며, 결과가 바로 반환됩니다.

로컬 스토리지 사용 방법

로컬 스토리지는 JavaScript를 통해 접근할 수 있으며, 다음과 같은 메서드를 사용합니다:

1. 데이터 저장:

• localStorage.setItem(key, value)

• 예:

localStorage.setItem('username', 'JohnDoe');

2. 데이터 가져오기:

• localStorage.getItem(key)

• 예:

const username = localStorage.getItem('username');
console.log(username); // 'JohnDoe'

3. 데이터 삭제:

• 특정 데이터 삭제: localStorage.removeItem(key)

• 모든 데이터 삭제: localStorage.clear()

• 예:

localStorage.removeItem('username');
localStorage.clear(); // 모든 데이터 삭제

4. 저장된 데이터 개수 확인:

• localStorage.length

• 예:

const length = localStorage.length;
console.log(length);

로컬 스토리지의 활용 사례

• 사용자 설정 저장:

• 예를 들어, 웹사이트의 테마 설정이나 글꼴 크기 등의 개인 설정을 로컬 스토리지에 저장하여, 사용자가 브라우저를 닫았다가 다시 열어도 같은 설정을 유지할 수 있습니다.

• 간단한 데이터 캐싱:

• 네트워크 요청 결과를 로컬 스토리지에 저장하여, 동일한 데이터를 다시 요청할 필요 없이 빠르게 접근할 수 있습니다.

• 폼 데이터 임시 저장:

• 사용자가 폼을 작성하는 중에 브라우저를 닫거나 페이지를 떠났다가 돌아오더라도, 작성된 내용을 잃지 않도록 로컬 스토리지에 임시로 저장할 수 있습니다.

로컬 스토리지의 한계

• 보안 문제: 로컬 스토리지는 클라이언트 측에 저장되므로, 악의적인 사용자가 쉽게 접근할 수 있습니다. 따라서 민감한 정보(예: 비밀번호, 개인 정보)를 저장하는 데는 적합하지 않습니다.

• 용량 제한: 로컬 스토리지는 보통 5MB 정도의 용량 제한이 있습니다. 이 때문에 대용량 데이터를 저장하는 데는 적합하지 않습니다.

• 브라우저 호환성: 대부분의 현대 브라우저는 로컬 스토리지를 지원하지만, 매우 오래된 브라우저에서는 지원되지 않을 수 있습니다.

이전 블로그

vuejs 로 to-do 리스트 구현 1

https://juntcom.tistory.com/316

vuejs 로 to-do 리스트 구현 1

곰돌이쿤 — Fri, 16 Aug 2024 12:09:28 +0900

To-Do 리스트를 구현하기 위해 새로운 컴포넌트를 만드는 방법을 단계별로 설명드리겠습니다.

이 설명을 따라 새로운 컴포넌트를 만들고 App.vue에서 이를 사용해 To-Do 리스트를 구현할 수 있습니다.

1. 새로운 컴포넌트 생성

1. ToDoList.vue 파일 생성:

• src/components 디렉토리 안에 ToDoList.vue 파일을 생성합니다.

2. ToDoList.vue 초기 코드 작성:

• 아래 코드를 ToDoList.vue 파일에 추가합니다.

• 이 코드는 To-Do 리스트 항목을 추가하고, 리스트를 렌더링하는 기본적인 구조입니다.

<template>
  <div>
    <h2>To-Do List</h2>
    <input v-model="newTodo" placeholder="Add a new to-do" @keyup.enter="addTodo" />
    <button @click="addTodo">Add</button>
    
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ToDoList',
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo, completed: false });
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

<style>
.completed {
  text-decoration: line-through;
  color: grey;
}
</style>

2. App.vue 파일 수정

1. ToDoList 컴포넌트 가져오기:

• App.vue 파일에서 ToDoList.vue 컴포넌트를 가져오고, 등록합니다.

<template>
  <div id="app">
    <h1>Vue.js To-Do App</h1>
    <ToDoList />
  </div>
</template>

<script>
import ToDoList from './components/ToDoList.vue';

export default {
  name: 'App',
  components: {
    ToDoList
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 컴포넌트 실행 및 테스트:

• 프로젝트를 실행하여 ToDoList.vue 컴포넌트가 정상적으로 렌더링되고, 할 일 항목을 추가, 삭제할 수 있는지 확인합니다.

3. 스타일 및 추가 기능

1. 스타일 개선:

• ToDoList.vue 파일에 추가 스타일을 적용하여 UI를 더 예쁘게 꾸밀 수 있습니다.

• 예를 들어, 인풋 필드, 버튼, 리스트 항목 등에 스타일을 적용할 수 있습니다.

2. 추가 기능 구현:

• 할 일 목록을 로컬 스토리지에 저장하여 새로고침 후에도 유지되도록 하거나, 완료된 항목을 숨기거나 필터링하는 기능을 추가할 수 있습니다.

이전 블로그

Vue.js 프로젝트 설정 - vue cli 시작하기

https://juntcom.tistory.com/284

vuejs 개발시 참고할 레퍼런스 모음

곰돌이쿤 — Fri, 16 Aug 2024 11:28:53 +0900

Vue.js로 개발할 때 유용한 레퍼런스와 리소스를 정리해드리겠습니다. 이들은 Vue.js의 기본 개념부터 심화된 주제, 그리고 개발 도구와 관련된 다양한 정보들을 포함합니다.

공식 문서 및 가이드

1. Vue.js 공식 문서:

• Vue.js 공식 문서

• Vue.js의 모든 기능과 개념에 대한 공식 가이드입니다. 기초부터 고급 주제까지 잘 정리되어 있습니다.

2. Vue.js 스타일 가이드:

• Vue.js 공식 스타일 가이드

• Vue.js 프로젝트에서 일관된 코딩 스타일을 유지하기 위한 권장사항이 담긴 가이드입니다.

3. Vue.js API 레퍼런스:

• Vue.js API 레퍼런스

• Vue.js의 모든 API와 관련된 설명을 제공합니다. 특정 기능이나 메서드를 찾을 때 유용합니다.

4. Vue.js 3 공식 문서:

• Vue 3 공식 문서

• Vue.js 3의 새로운 기능들과 변경된 사항들을 포함한 공식 가이드입니다.

튜토리얼 및 학습 리소스

1. Vue Mastery:

• Vue Mastery

• Vue.js 공식 학습 파트너로, 초급부터 고급까지 다양한 튜토리얼 동영상을 제공합니다. 일부 강의는 무료로 제공됩니다.

2. Vue School:

• Vue School

• Vue.js 학습을 위한 온라인 교육 플랫폼으로, 심화된 Vue.js 주제들을 다루는 동영상 강의를 제공합니다.

3. Scrimba: Learn Vue.js for free:

• Scrimba: Learn Vue.js

• 무료로 제공되는 Vue.js 강의 시리즈로, 인터랙티브한 코딩 환경에서 학습할 수 있습니다.

4. Laracasts Vue.js 시리즈:

• Laracasts Vue.js 시리즈

• Vue.js와 관련된 강좌를 제공하는 사이트로, 특히 Laravel과 함께 사용하는 방법을 다룹니다. 일부는 무료로 제공됩니다.

유용한 도구와 라이브러리

1. Vue CLI:

• Vue CLI

• Vue.js 프로젝트 생성을 위한 강력한 CLI 도구입니다. 다양한 설정을 자동으로 처리해주며, 플러그인 시스템을 통해 확장이 가능합니다.

2. Vue Router:

• Vue Router 공식 문서

• Vue.js에서 SPA(Single Page Application)의 라우팅을 담당하는 라이브러리로, 공식 문서를 통해 설정과 사용법을 자세히 배울 수 있습니다.

3. Vuex:

• Vuex 공식 문서

• Vue.js에서 상태 관리를 위한 중앙 집중식 저장소 역할을 하는 라이브러리입니다. 특히 대규모 애플리케이션에서 유용합니다.

4. Axios:

• Axios 공식 문서

• Vue.js와 함께 자주 사용되는 HTTP 클라이언트 라이브러리로, API 통신을 쉽게 처리할 수 있습니다.

5. Vuetify:

• Vuetify 공식 문서

• Vue.js 기반의 Material Design 컴포넌트 프레임워크로, 아름답고 반응형인 UI를 쉽게 구축할 수 있습니다.

6. Quasar Framework:

• Quasar Framework 공식 문서

• Vue.js 기반의 강력한 프레임워크로, 웹, 모바일, 데스크탑 애플리케이션을 한 번에 개발할 수 있는 도구를 제공합니다.

커뮤니티 및 포럼

1. Vue.js 공식 포럼:

• Vue.js 공식 포럼

• Vue.js 커뮤니티가 활발하게 활동하는 공식 포럼입니다. 질문과 답변, 다양한 토론이 이루어집니다.

2. Stack Overflow:

• Stack Overflow Vue.js 태그

• Vue.js 관련 질문과 답변을 찾을 수 있는 커뮤니티입니다. 개발 중 발생하는 문제를 해결할 때 유용합니다.

3. Reddit:

• Reddit Vue.js 커뮤니티

• Vue.js 관련 토론과 정보 공유가 활발히 이루어지는 Reddit 커뮤니티입니다.

4. Discord Vue.js 커뮤니티:

• Vue Land (Discord 서버)

• Vue.js 개발자들이 실시간으로 소통할 수 있는 공식 Discord 커뮤니티입니다.

추가 리소스

1. Awesome Vue:

• Awesome Vue

• Vue.js 관련 리소스와 라이브러리를 모아놓은 깃허브 리포지토리입니다. 다양한 플러그인, 튜토리얼, 프로젝트 예제를 찾을 수 있습니다.

2. Vue.js Examples:

• Vue.js Examples

• 다양한 Vue.js 애플리케이션 예제와 코드를 제공하는 사이트입니다. 실제 프로젝트에 응용할 수 있는 샘플 코드들이 많습니다.

vue 개발 시작 환경설정

곰돌이쿤 — Fri, 16 Aug 2024 11:04:04 +0900

1. Visual Studio Code 설치

먼저, Visual Studio Code를 설치합니다. VS Code는 무료로 제공되며, 다양한 운영 체제(Windows, macOS, Linux)에서 사용할 수 있습니다.

• 설치 방법: 공식 웹사이트에서 운영 체제에 맞는 설치 파일을 다운로드한 후, 설치 프로그램을 실행하여 설치합니다.

2. Node.js 설치

Vue CLI와 관련된 도구들을 사용하려면 Node.js가 설치되어 있어야 합니다. Node.js 설치 시 npm(Node Package Manager)이 함께 설치됩니다.

• 설치 방법:

1. Node.js 공식 웹사이트에서 최신 LTS(Long Term Support) 버전을 다운로드합니다.

2. 설치 프로그램을 실행하여 Node.js와 npm을 설치합니다.

3. 설치 완료 후, 터미널에서 Node.js와 npm의 버전을 확인합니다.

node -v
npm -v

3. Vue CLI 설치

Vue.js 프로젝트를 쉽게 생성하고 관리하기 위해 Vue CLI(Command Line Interface)를 설치합니다.

• 설치 방법:

1. 터미널을 열고 다음 명령어를 입력하여 Vue CLI를 전역으로 설치합니다.

npm install -g @vue/cli

2. 설치가 완료되면, Vue CLI의 버전을 확인합니다.

vue --version

4. Visual Studio Code 플러그인 설치

vue 라는 플러그인 설치. 그 외에 다른 확장도구 설치해도 무방

5. Debugger for Chrome:
https://chromewebstore.google.com/search/vue?hl=ko

브라우저에서 vue 개발을 도와주는 디버그 툴을 설치해주셔야 합니다.

flutter 디자인 패턴 모음

곰돌이쿤 — Sun, 28 Jul 2024 17:23:03 +0900

Flutter는 다양한 디자인 패턴을 사용하여 애플리케이션 개발을 더욱 구조적이고 유지보수가 쉽게 만들 수 있습니다. 주요 패턴들을 정리해보겠습니다.

1. Provider 패턴

• 설명: Flutter 애플리케이션에서 상태 관리를 간단하고 효율적으로 수행하기 위해 사용됩니다. InheritedWidget을 기반으로 하여, 상위 위젯 트리에서 상태를 하위 위젯 트리에 전달할 수 있습니다.

• 사용법: provider 패키지를 사용하여 구현합니다.

• 예제:

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Consumer<Counter>(
                builder: (context, counter, _) {
                  return Text(
                    '${counter.count}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<Counter>(context, listen: false).increment();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

2. BLoC (Business Logic Component) 패턴

• 설명: BLoC 패턴은 비즈니스 로직을 UI에서 분리하여 유지보수성과 테스트 용이성을 높입니다. 이벤트와 상태 스트림을 사용하여 비동기 데이터 흐름을 관리합니다.

• 사용법: flutter_bloc 패키지를 사용하여 구현합니다.

• 예제:

class CounterEvent {}

class CounterState {
  final int counter;
  CounterState(this.counter);
}

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(0));

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield CounterState(state.counter + 1);
    }
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BLoC Example')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text(
              '${state.counter}',
              style: Theme.of(context).textTheme.headline4,
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          BlocProvider.of<CounterBloc>(context).add(IncrementEvent());
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

3. Redux 패턴

• 설명: 상태 관리 라이브러리로, 애플리케이션의 상태를 하나의 중앙 저장소에서 관리합니다. 액션을 통해 상태를 업데이트하고 리듀서를 통해 새로운 상태를 반환합니다.

• 사용법: flutter_redux 패키지를 사용하여 구현합니다.

• 예제:

// State
class AppState {
  final int counter;
  AppState(this.counter);
}

// Actions
class IncrementAction {}

// Reducer
AppState counterReducer(AppState state, action) {
  if (action is IncrementAction) {
    return AppState(state.counter + 1);
  }
  return state;
}

// Store
final store = Store<AppState>(
  counterReducer,
  initialState: AppState(0),
);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreProvider<AppState>(
      store: store,
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Redux Example')),
      body: Center(
        child: StoreConnector<AppState, String>(
          converter: (store) => store.state.counter.toString(),
          builder: (context, counter) {
            return Text(
              counter,
              style: Theme.of(context).textTheme.headline4,
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          StoreProvider.of<AppState>(context).dispatch(IncrementAction());
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

4. MVVM (Model-View-ViewModel) 패턴

• 설명: 애플리케이션의 UI를 모델과 분리하여 유지보수성과 테스트 용이성을 높입니다. ViewModel은 모델 데이터를 처리하고 이를 뷰에 바인딩합니다.

• 사용법: provider와 ChangeNotifier를 사용하여 구현합니다.

• 예제:

class CounterViewModel extends ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterViewModel(),
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MVVM Example')),
      body: Center(
        child: Consumer<CounterViewModel>(
          builder: (context, viewModel, _) {
            return Text(
              '${viewModel.counter}',
              style: Theme.of(context).textTheme.headline4,
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<CounterViewModel>(context, listen: false).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

참고 자료

• Flutter Documentation - Provider

• Flutter Documentation - BLoC

• Redux in Flutter

• MVVM in Flutter

flutter future 키워드 및 aysnc await 를 통한 비동기처리

곰돌이쿤 — Sun, 28 Jul 2024 16:25:35 +0900

Dart의 Future와 async/await는 비동기 프로그래밍을 지원하는 핵심 개념입니다.

이들 개념을 사용하면 비동기 작업을 더 쉽게 작성하고 관리할 수 있습니다.

Future

Future는 비동기 작업의 결과를 나타내는 객체입니다. 이 객체는 작업이 완료되었을 때 결과를 제공하거나 오류를 전달합니다. Future는 JavaScript의 Promise와 유사합니다.

Future 사용 예제

1. Future 생성

Future 사용 예제

1. Future 생성

Future<String> fetchUserOrder() {
  // 2초 후에 'Order Complete' 반환
  return Future.delayed(Duration(seconds: 2), () => 'Order Complete');
}

2. then() 사용

void main() {
  fetchUserOrder().then((order) {
    print(order); // 'Order Complete' 출력
  }).catchError((error) {
    print('Error: $error');
  });
}

async 및 await

async와 await 키워드는 비동기 코드를 더 읽기 쉽게 작성할 수 있도록 도와줍니다. async 함수는 Future를 반환하며, await 키워드는 Future가 완료될 때까지 기다린 후 결과를 반환합니다.

async 및 await 사용 예제

1. async 함수 정의

Future<void> fetchUserOrder() async {
  try {
    String order = await Future.delayed(Duration(seconds: 2), () => 'Order Complete');
    print(order); // 'Order Complete' 출력
  } catch (e) {
    print('Error: $e');
  }
}

2. async 함수 호출

void main() {
  fetchUserOrder();
  print('Fetching user order...'); // 먼저 출력됨
}

자세한 설명

1. Future

• 비동기 작업을 표현: Future는 비동기 작업의 완료(성공/실패)를 표현합니다.

• 메서드:

• then: Future가 완료될 때 호출될 콜백을 등록합니다.

• catchError: Future가 실패할 때 호출될 콜백을 등록합니다.

• whenComplete: Future가 완료되면 성공 여부와 상관없이 호출될 콜백을 등록합니다.

2. async

• 함수를 비동기로 표시: 함수에 async를 붙이면 해당 함수는 Future를 반환합니다.

• 비동기 코드 작성: async 키워드를 사용하면 코드가 비동기로 실행되며, 함수는 즉시 Future를 반환합니다.

3. await

• Future가 완료될 때까지 기다림: await 키워드를 사용하면 Future가 완료될 때까지 기다리고, 완료 후 결과를 반환합니다.

• try-catch와 함께 사용: 비동기 작업에서 발생하는 오류를 처리하기 위해 try-catch 블록과 함께 사용할 수 있습니다.

참고

https://dart-ko.dev/codelabs/async-await

API란 무엇인가?

곰돌이쿤 — Sat, 27 Jul 2024 14:49:51 +0900

API(Application Programming Interface)는 소프트웨어 애플리케이션 간의 상호 작용을 가능하게 하는 인터페이스입니다.

API는 다양한 기능을 다른 프로그램에서 사용할 수 있도록 정의된 규칙 및 도구의 집합을 제공합니다.

주요 개념

1. 인터페이스: API는 소프트웨어 구성 요소가 서로 상호작용할 수 있도록 하는 인터페이스입니다. 이 인터페이스는 명령, 함수, 프로토콜 등으로 구성될 수 있습니다.

2. 표준화: API는 특정 작업을 수행하기 위한 표준화된 방법을 제공합니다. 이를 통해 다양한 소프트웨어가 일관된 방식으로 상호작용할 수 있습니다.

3. 재사용성: 개발자는 API를 사용하여 기존 기능을 재사용할 수 있습니다. 새로운 애플리케이션을 개발할 때 처음부터 모든 기능을 구현할 필요 없이, API를 통해 필요한 기능을 빠르게 통합할 수 있습니다.

종류

1. 웹 API: 웹 서비스 상호작용을 위한 API로, HTTP 프로토콜을 사용하여 데이터를 주고받습니다.

RESTful API와 SOAP API가 대표적입니다.

• RESTful API: REST(Representational State Transfer) 아키텍처 스타일을 따르는 API로, 자원을 URL로 표현하고 HTTP 메서드(GET, POST, PUT, DELETE 등)를 통해 조작합니다.

• SOAP API: SOAP(Simple Object Access Protocol)를 사용하는 API로, XML 형식을 통해 메시지를 교환합니다.

2. 라이브러리 API: 소프트웨어 라이브러리에서 제공하는 API로, 특정 프로그래밍 언어로 작성된 함수와 절차를 사용하여 기능을 구현합니다.

3. 운영 체제 API: 운영 체제가 제공하는 API로, 애플리케이션이 운영 체제의 기능을 사용할 수 있도록 합니다. 예를 들어, 파일 시스템 접근, 프로세스 관리 등이 있습니다.

예시

1. Google Maps API: 개발자가 Google Maps 서비스를 자신의 애플리케이션에 통합할 수 있도록 하는 API입니다. 경로 찾기, 장소 정보 제공, 지도 표시 등의 기능을 제공합니다.

GET https://maps.googleapis.com/maps/api/geocode/json?address=Seattle&key=YOUR_API_KEY

2. Twitter API: Twitter 플랫폼의 데이터를 접근하고 조작할 수 있게 해주는 API입니다. 트윗 작성, 사용자 정보 가져오기, 트윗 검색 등의 기능을 제공합니다.

GET https://api.twitter.com/2/tweets?ids=1453489038376136711&tweet.fields=created_at&expansions=author_id&user.fields=username

API 사용의 장점

1. 빠른 개발: 기존의 기능을 재사용함으로써 개발 속도를 높일 수 있습니다.

2. 유지보수 용이: 중앙화된 API를 통해 기능 업데이트와 유지보수가 용이합니다.

3. 호환성: 다양한 시스템 간의 호환성을 보장합니다.

참고 자료

• RESTful API란 무엇인가?

flutter firestore 시작하기 - firebase 데이터베이스

곰돌이쿤 — Thu, 25 Jul 2024 21:59:45 +0900

Firestore를 사용하여 To-Do 앱을 만드는 방법을 설명하겠습니다. 이 예제에서는 Firebase Firestore를 사용하여 할 일 데이터를 저장하고, 읽고, 업데이트하고, 삭제하는 기능을 구현합니다.

1. firebase 내 데이터베이스 만들기

위와 같이 firestore 를 생성해줍니다.

1. 프로젝트 설정

pubspec.yaml 파일 업데이트

최신 Firebase 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: 
  firebase_auth: 
  cloud_firestore:

2. Firebase 설정

google-services.json 파일을 다운로드하여 android/app 디렉토리에 복사합니다. Firebase 콘솔에서 프로젝트를 설정하고 앱을 등록한 후 이 파일을 받을 수 있습니다.

android/build.gradle 파일 업데이트

buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:8.0.0'
        classpath 'com.google.gms:google-services:4.4.2'
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

android/app/build.gradle 파일 업데이트

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

android {
    compileSdkVersion 34

    defaultConfig {
        applicationId "com.example.flutter_todo"
        minSdkVersion 21
        targetSdkVersion 34
        versionCode 1
        versionName "1.0"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.2.2')
}

apply plugin: 'com.google.gms.google-services'

3. Firebase 초기화

main.dart

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'screens/todo_list_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Todo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TodoListScreen(),
    );
  }
}

4. Firestore 데이터 모델

models/todo.dart

class Todo {
  final String id;
  final String title;
  final bool isDone;

  Todo({
    required this.id,
    required this.title,
    this.isDone = false,
  });

  factory Todo.fromMap(Map<String, dynamic> data, String documentId) {
    return Todo(
      id: documentId,
      title: data['title'] ?? '',
      isDone: data['isDone'] ?? false,
    );
  }

  Map<String, dynamic> toMap() {
    return {
      'title': title,
      'isDone': isDone,
    };
  }
}

5. Firestore 서비스

services/firestore_service.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import '../models/todo.dart';

class FirestoreService {
  final FirebaseFirestore _db = FirebaseFirestore.instance;

  Stream<List<Todo>> getTodos() {
    return _db.collection('todos').snapshots().map((snapshot) =>
        snapshot.docs.map((doc) => Todo.fromMap(doc.data(), doc.id)).toList());
  }

  Future<void> addTodo(Todo todo) {
    return _db.collection('todos').add(todo.toMap());
  }

  Future<void> updateTodo(Todo todo) {
    return _db.collection('todos').doc(todo.id).update(todo.toMap());
  }

  Future<void> deleteTodo(String id) {
    return _db.collection('todos').doc(id).delete();
  }
}

6. 프로바이더 설정

providers/todo_provider.dart

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import '../models/todo.dart';
import '../services/firestore_service.dart';

class TodoProvider with ChangeNotifier {
  final FirestoreService _firestoreService = FirestoreService();

  late Stream<List<Todo>> _todos;
  Stream<List<Todo>> get todos => _todos;

  TodoProvider() {
    _todos = _firestoreService.getTodos();
  }

  Future<void> addTodo(Todo todo) async {
    await _firestoreService.addTodo(todo);
  }

  Future<void> updateTodo(Todo todo) async {
    await _firestoreService.updateTodo(todo);
  }

  Future<void> deleteTodo(String id) async {
    await _firestoreService.deleteTodo(id);
  }
}

7. UI 작성

screens/todo_list_screen.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/todo.dart';
import '../providers/todo_provider.dart';
import 'edit_todo_screen.dart';

class TodoListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('To-Do List'),
      ),
      body: StreamBuilder<List<Todo>>(
        stream: Provider.of<TodoProvider>(context).todos,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(child: CircularProgressIndicator());
          }
          final todos = snapshot.data!;
          return ListView.builder(
            itemCount: todos.length,
            itemBuilder: (ctx, i) => ListTile(
              title: Text(todos[i].title),
              trailing: Checkbox(
                value: todos[i].isDone,
                onChanged: (value) {
                  Provider.of<TodoProvider>(context, listen: false).updateTodo(
                    Todo(
                      id: todos[i].id,
                      title: todos[i].title,
                      isDone: value!,
                    ),
                  );
                },
              ),
              onLongPress: () {
                Provider.of<TodoProvider>(context, listen: false)
                    .deleteTodo(todos[i].id);
              },
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => EditTodoScreen(todo: todos[i]),
                  ),
                );
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (ctx) {
              TextEditingController controller = TextEditingController();
              return AlertDialog(
                title: Text('Add Todo'),
                content: TextField(
                  controller: controller,
                  decoration: InputDecoration(labelText: 'Title'),
                ),
                actions: [
                  TextButton(
                    onPressed: () {
                      if (controller.text.isNotEmpty) {
                        final newTodo = Todo(
                          id: '',
                          title: controller.text,
                        );
                        Provider.of<TodoProvider>(context, listen: false)
                            .addTodo(newTodo);
                        Navigator.of(ctx).pop();
                      }
                    },
                    child: Text('Add'),
                  ),
                ],
              );
            },
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

screens/edit_todo_screen.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/todo.dart';
import '../providers/todo_provider.dart';

class EditTodoScreen extends StatelessWidget {
  final Todo todo;

  EditTodoScreen({required this.todo});

  @override
  Widget build(BuildContext context) {
    TextEditingController titleController = TextEditingController(text: todo.title);

    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Todo'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: titleController,
              decoration: InputDecoration(labelText: 'Title'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (titleController.text.isNotEmpty) {
                  final updatedTodo = Todo(
                    id: todo.id,
                    title: titleController.text,
                    isDone: todo.isDone,
                  );
                  Provider.of<TodoProvider>(context, listen: false)
                      .updateTodo(updatedTodo);
                  Navigator.of(context).pop();
                }
              },
              child: Text('Update'),
            ),
          ],
        ),
      ),
    );
  }
}

요약

1. Firestore 데이터 모델(Todo)을 정의합니다.

2. Firestore 서비스(FirestoreService)를 작성하여 Firestore와 상호작용합니다.

3. 프로바이더(TodoProvider)를 작성하여 상태 관리를 합니다.

4. UI를 작성하여 할 일 목록을 표시하고 추가, 수정, 삭제 기능을 구현합니다.

5. Firebase를 초기화하고 앱을 실행합니다.

이제 Firestore를 사용하여 할 일 데이터를 관리하는 간단한 To-Do 앱이 완성되었습니다. 필요에 따라 추가 기능을 구현하거나 UI를 개선할 수 있습니다.

flutter SQLite 데이터베이스 저장

곰돌이쿤 — Thu, 25 Jul 2024 01:15:34 +0900

SQLite를 사용하여 To-Do 데이터를 저장하는 방법을 설명하겠습니다. Flutter 프로젝트에서 SQLite를 사용하기 위해 sqflite 패키지를 사용합니다. 이 패키지를 사용하여 데이터베이스를 생성하고, 할 일 데이터를 저장하고, 읽고, 업데이트하고, 삭제할 수 있습니다.

프로젝트 설정

1. pubspec.yaml 파일에 sqflite와 path 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^2.0.0+4
  path: ^1.8.0

디렉토리 및 파일 구조

lib/
  main.dart
  models/
    todo.dart
  screens/
    todo_list_screen.dart
    edit_todo_screen.dart
  services/
    database_helper.dart
  providers/
    todo_provider.dart

1. 모델 정의

models/todo.dartㅣㅇve

class Todo {
  String id;
  String title;
  bool isDone;

  Todo({
    required this.id,
    required this.title,
    this.isDone = false,
  });

  // 데이터베이스에서 읽은 데이터를 객체로 변환
  factory Todo.fromMap(Map<String, dynamic> json) => new Todo(
    id: json["id"],
    title: json["title"],
    isDone: json["isDone"] == 1,
  );

  // 객체 데이터를 데이터베이스에 저장할 수 있는 형태로 변환
  Map<String, dynamic> toMap() => {
    "id": id,
    "title": title,
    "isDone": isDone ? 1 : 0,
  };
  
}

2. 데이터베이스 헬퍼 클래스 작성

services/database_helper.dart

import 'dart:async';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import '../models/todo.dart';

class DatabaseHelper {
  static final DatabaseHelper _instance = DatabaseHelper._internal();
  factory DatabaseHelper() => _instance;

  static Database? _database;

  DatabaseHelper._internal();

  Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await _initDatabase();
    return _database!;
  }

  Future<Database> _initDatabase() async {
    String path = join(await getDatabasesPath(), 'todo_database.db');
    return await openDatabase(
      path,
      version: 1,
      onCreate: _onCreate,
    );
  }

  Future _onCreate(Database db, int version) async {
    await db.execute('''
      CREATE TABLE todos(
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT,
        isDone INTEGER
      )
    ''');
  }

  Future<List<Todo>> getTodos() async {
    final db = await database;
    var res = await db.query('todos');
    List<Todo> list =
        res.isNotEmpty ? res.map((c) => Todo.fromMap(c)).toList() : [];
    return list;
  }

  Future<int> insertTodo(Todo todo) async {
    final db = await database;
    return await db.insert('todos', todo.toMap());
  }

  Future<int> updateTodo(Todo todo) async {
    final db = await database;
    return await db.update(
      'todos',
      todo.toMap(),
      where: 'id = ?',
      whereArgs: [todo.id],
    );
  }

  Future<int> deleteTodo(int id) async {
    final db = await database;
    return await db.delete(
      'todos',
      where: 'id = ?',
      whereArgs: [id],
    );
  }
}

3. 프로바이더 설정

providers/todo_provider.dart

import 'package:flutter/material.dart';
import '../models/todo.dart';
import '../services/database_helper.dart';

class TodoProvider with ChangeNotifier {
  List<Todo> _todos = [];

  List<Todo> get todos => _todos;

  Future<void> loadTodos() async {
    _todos = await DatabaseHelper().getTodos();
    notifyListeners();
  }

  Future<void> addTodo(Todo todo) async {
    await DatabaseHelper().insertTodo(todo);
    await loadTodos();
  }

  Future<void> updateTodo(Todo todo) async {
    await DatabaseHelper().updateTodo(todo);
    await loadTodos();
  }

  Future<void> removeTodo(int id) async {
    await DatabaseHelper().deleteTodo(id);
    await loadTodos();
  }
}

4. UI 작성

screens/todo_list_screen.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/todo.dart';
import '../providers/todo_provider.dart';
import 'edit_todo_screen.dart';

class TodoListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('To-Do List'),
      ),
      body: FutureBuilder(
        future: Provider.of<TodoProvider>(context, listen: false).loadTodos(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }
          return Consumer<TodoProvider>(
            builder: (context, todoProvider, child) {
              return ListView.builder(
                itemCount: todoProvider.todos.length,
                itemBuilder: (ctx, i) => ListTile(
                  title: Text(todoProvider.todos[i].title),
                  trailing: Checkbox(
                    value: todoProvider.todos[i].isDone,
                    onChanged: (_) {
                      todoProvider.updateTodo(
                        Todo(
                          id: todoProvider.todos[i].id,
                          title: todoProvider.todos[i].title,
                          isDone: !todoProvider.todos[i].isDone,
                        ),
                      );
                    },
                  ),
                  onLongPress: () {
                    todoProvider.removeTodo(todoProvider.todos[i].id!);
                  },
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => EditTodoScreen(todo: todoProvider.todos[i]),
                      ),
                    );
                  },
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (ctx) {
              TextEditingController controller = TextEditingController();
              return AlertDialog(
                title: Text('Add Todo'),
                content: TextField(
                  controller: controller,
                  decoration: InputDecoration(labelText: 'Title'),
                ),
                actions: [
                  TextButton(
                    onPressed: () {
                      if (controller.text.isNotEmpty) {
                        final newTodo = Todo(
                          title: controller.text,
                        );
                        Provider.of<TodoProvider>(context, listen: false).addTodo(newTodo);
                        Navigator.of(ctx).pop();
                      }
                    },
                    child: Text('Add'),
                  ),
                ],
              );
            },
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

screens/edit_todo_screen.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/todo.dart';
import '../providers/todo_provider.dart';

class EditTodoScreen extends StatelessWidget {
  final Todo todo;

  EditTodoScreen({required this.todo});

  @override
  Widget build(BuildContext context) {
    TextEditingController titleController = TextEditingController(text: todo.title);

    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Todo'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: titleController,
              decoration: InputDecoration(labelText: 'Title'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (titleController.text.isNotEmpty) {
                  final updatedTodo = Todo(
                    id: todo.id,
                    title: titleController.text,
                    isDone: todo.isDone,
                  );
                  Provider.of<TodoProvider>(context, listen: false).updateTodo(updatedTodo);
                  Navigator.of(context).pop();
                }
              },
              child: Text('Update'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 메인 파일 설정

main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'screens/todo_list_screen.dart';
import 'providers/todo_provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => TodoProvider()),
      ],
      child: MaterialApp(
        title: 'To-Do App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: TodoListScreen(),
      ),
    );
  }
}

요약

1. `sqflite`와 `path` 패키지를 사용하여 SQLite 데이터베이스를 설정합니다.

2. 데이터 모델(`Todo`)을 정의합니다.

3. 데이터베이스 헬퍼 클래스(`DatabaseHelper`)를 작성하여 CRUD 작업을 수행합니다.

4. 프로바이더(`TodoProvider`)를 설정하여 데이터베이스와 UI 간의 상태를 관리합니다.

5. UI를 작성하여 할 일 목록을 표시하고, 할 일을 추가, 수정, 삭제할 수 있는 기능을 제공합니다.

6. 메인 파일에서 MultiProvider를 설정하여 앱을 실행합니다.

flutter에서 바텀 네비게이션 바(Bottom Navigation Bar)

곰돌이쿤 — Wed, 24 Jul 2024 17:14:20 +0900

Flutter에서 바텀 네비게이션 바(Bottom Navigation Bar)는 주로 앱의 주요 네비게이션을 제공하는 데 사용됩니다. 사용자에게 앱의 주요 섹션을 탐색할 수 있는 인터페이스를 제공합니다. 아래는 바텀 네비게이션 바에 대한 주요 특징과 예제들을 정리한 것입니다.

주요 특징

1. 사용 용도:

• 앱의 주요 섹션 간 빠른 네비게이션을 제공.

• 일반적으로 3~5개의 탭을 포함.

• 각 탭에는 아이콘과 선택적으로 텍스트 레이블을 포함할 수 있음.

2. 구성 요소:

• items: 네비게이션 항목 목록으로, 각각 BottomNavigationBarItem 객체를 포함.

• currentIndex: 현재 선택된 탭의 인덱스.

• onTap: 사용자가 탭을 선택할 때 호출되는 콜백 함수.

• type: 네비게이션 바의 타입(fixed 또는 shifting).

예제 코드

아래는 Flutter에서 바텀 네비게이션 바를 구현하는 기본적인 예제입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Profile Page'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

주요 속성

1. items:

• BottomNavigationBarItem 객체의 리스트로, 각 항목은 아이콘과 텍스트 레이블을 가짐.

• 예제:

items: const <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
    label: 'Home',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.search),
    label: 'Search',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.person),
    label: 'Profile',
  ),
],

2. currentIndex:

• 현재 선택된 탭의 인덱스를 나타냄.

• 예제:

currentIndex: _selectedIndex,

3. onTap:

• 사용자가 탭을 선택할 때 호출되는 콜백 함수.

• 예제:

onTap: _onItemTapped,

4. type:

• 네비게이션 바의 타입을 설정. BottomNavigationBarType.fixed 또는 BottomNavigationBarType.shifting을 사용.

• 예제:

type: BottomNavigationBarType.fixed,

참고 자료

• Flutter Documentation - BottomNavigationBar

• Flutter Cookbook - BottomNavigationBar

flutter 주요 버튼 위젯 모음

곰돌이쿤 — Wed, 24 Jul 2024 16:48:48 +0900

Flutter에서는 다양한 버튼 위젯을 제공하여 사용자가 다양한 상호작용을 할 수 있도록 지원합니다. 각 버튼 위젯은 고유한 스타일과 기능을 가지고 있어 다양한 사용 사례에 적합합니다. 주요 버튼 위젯과 그 특징을 정리해보겠습니다.

주요 버튼 위젯

1. ElevatedButton

• 설명: 이전의 RaisedButton에 해당하며, 입체감을 제공하는 기본 버튼입니다.

• 특징:

• 사용자가 버튼을 누를 때 시각적인 효과를 제공

• 스타일을 통해 색상, 모양 등을 커스터마이징 가능

• 예제:

ElevatedButton(
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
  child: Text('Elevated Button'),
);

2. TextButton

• 설명: 이전의 FlatButton에 해당하며, 배경 없이 텍스트로만 구성된 버튼입니다.

• 특징:

• 버튼을 누를 때 배경 색상이 변경됨

• 간단한 텍스트 버튼을 구현할 때 사용

• 예제:

TextButton(
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
  child: Text('Text Button'),
);

3. OutlinedButton

• 설명: 외곽선이 있는 버튼으로, 이전의 OutlineButton에 해당합니다.

• 특징:

• 버튼을 누를 때 외곽선 색상이 변경됨

• 기본 버튼에 외곽선을 추가하여 강조할 때 사용

• 예제:

OutlinedButton(
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
  child: Text('Outlined Button'),
);

4. IconButton

• 설명: 아이콘을 포함하는 버튼으로, 아이콘만으로 구성됩니다.

• 특징:

• 아이콘을 클릭할 때 사용

• 버튼에 텍스트 대신 아이콘을 사용하여 직관적인 인터페이스 제공

• 예제:

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
);

5. FloatingActionButton

• 설명: 둥근 모양의 떠 있는 버튼으로, 일반적으로 주요 동작을 나타냅니다.

• 특징:

• 화면 위에 떠 있는 듯한 시각적 효과

• 주로 주요 액션 버튼으로 사용

• 예제:

FloatingActionButton(
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
  child: Icon(Icons.add),
);

버튼 스타일링

Flutter의 버튼 위젯들은 스타일링 옵션을 제공하여 다양한 커스터마이징이 가능합니다. 예를 들어, ElevatedButton의 스타일을 설정하는 방법은 다음과 같습니다:

ElevatedButton(
  onPressed: () {},
  child: Text('Styled Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // 배경 색상
    onPrimary: Colors.white, // 텍스트 색상
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    textStyle: TextStyle(fontSize: 20),
  ),
);

flutter 입력 위젯 모음

곰돌이쿤 — Wed, 24 Jul 2024 16:45:58 +0900

Flutter에서는 다양한 입력 위젯을 제공하여 사용자의 입력을 처리할 수 있습니다.

주요 입력 위젯과 그 특징을 정리해보겠습니다.

주요 입력 위젯

1. TextField

• 설명: 텍스트 입력 필드로, 사용자가 텍스트를 입력할 수 있도록 합니다.

• 특징:

• 기본 텍스트 입력

• 다수의 속성을 통해 입력 형식, 스타일 등을 제어 가능

• controller를 통해 입력된 텍스트를 관리

• 예제:

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Enter your name',
  ),
);

2. TextFormField

• 설명: Form과 함께 사용되는 텍스트 입력 필드로, 폼 유효성 검사를 지원합니다.

• 특징:

• TextField와 유사하지만 폼 유효성 검사 기능이 추가됨

• validator를 통해 유효성 검사 로직 구현 가능

• 예제:

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Enter your email',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
);

3. Checkbox

• 설명: 체크박스 위젯으로, 사용자가 옵션을 선택하거나 해제할 수 있습니다.

• 특징:

• value와 onChanged를 통해 상태 관리

• 예제:

Checkbox(
  value: true,
  onChanged: (bool? newValue) {
    // Handle change
  },
);

4. Radio

• 설명: 라디오 버튼 위젯으로, 그룹 내에서 하나의 옵션을 선택할 수 있습니다.

• 특징:

• 여러 라디오 버튼이 같은 그룹에 속할 수 있음

• value와 groupValue, onChanged를 통해 상태 관리

• 예제:

Radio<int>(
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? newValue) {
    // Handle change
  },
);

5. Switch

• 설명: 스위치 위젯으로, 이진 상태를 나타내는 토글 버튼입니다.

• 특징:

• value와 onChanged를 통해 상태 관리

• 예제:

Switch(
  value: true,
  onChanged: (bool newValue) {
    // Handle change
  },
);

6. Slider

• 설명: 슬라이더 위젯으로, 사용자가 값을 선택할 수 있도록 합니다.

• 특징:

• 최소 및 최대 값 설정 가능

• value와 onChanged를 통해 상태 관리

• 예제:

Slider(
  value: 50,
  min: 0,
  max: 100,
  onChanged: (double newValue) {
    // Handle change
  },
);

7. DropdownButton

• 설명: 드롭다운 버튼 위젯으로, 사용자가 목록에서 하나의 옵션을 선택할 수 있습니다.

• 특징:

• items와 onChanged를 통해 상태 관리

• 예제:

DropdownButton<String>(
  value: selectedValue,
  items: <String>['One', 'Two', 'Three'].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    // Handle change
  },
);

참고 자료

• Flutter Documentation - TextField

• Flutter Documentation - TextFormField

• Flutter Documentation - Checkbox

• Flutter Documentation - Radio

• Flutter Documentation - Switch

• Flutter Documentation - Slider

• Flutter Documentation - DropdownButton

flutter 레이아웃 위젯 모음

곰돌이쿤 — Wed, 24 Jul 2024 16:38:46 +0900

Flutter에서는 다양한 레이아웃 위젯을 제공하여 UI 요소들을 배치하고 정렬할 수 있습니다. 레이아웃 위젯은 화면의 구조를 정의하고, 자식 위젯들을 어떻게 배치할지 결정하는 데 사용됩니다. 주요 레이아웃 위젯과 그 설명을 아래에 정리했습니다.

주요 레이아웃 위젯

1. Container

• 설명: 단일 자식을 포함할 수 있는 상자 위젯. 패딩, 마진, 경계선, 색상 등을 설정할 수 있습니다.

• 예제:

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
  ),
  child: Text('Hello, Container!'),
);

2. Row

• 설명: 자식 위젯들을 가로로 나란히 배치합니다.

• 예제:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
);

3. Column

• 설명: 자식 위젯들을 세로로 나란히 배치합니다.

• 예제:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('First Line'),
    Text('Second Line'),
    Text('Third Line'),
  ],
);

4. Stack

• 설명: 자식 위젯들을 겹쳐서 배치합니다.

• 예제:

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
  ],
);

5. Expanded

• 설명: Flex 위젯(Row, Column) 내에서 남은 공간을 차지하도록 자식 위젯을 확장합니다.

• 예제:

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
);

6. SizedBox

• 설명: 특정 크기의 상자를 생성합니다.

• 예제:

SizedBox(
  width: 100,
  height: 100,
  child: Container(
    color: Colors.blue,
  ),
);

7. Padding

• 설명: 자식 위젯 주위에 패딩을 추가합니다.

• 예제:

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Padded Text'),
);

8. Align

• 설명: 자식 위젯을 부모 위젯 내에서 정렬합니다.

• 예제:

Align(
  alignment: Alignment.center,
  child: Text('Centered Text'),
);

9. Center

• 설명: 자식 위젯을 중앙에 배치합니다.

• 예제:

Center(
  child: Text('Centered Text'),
);

참고 자료

• Flutter Documentation - Layout Widgets

• Flutter Widget Catalog

flutter state 개념 및 정리

곰돌이쿤 — Wed, 24 Jul 2024 16:28:00 +0900

Flutter에서 State는 위젯의 상태를 관리하는 데 사용됩니다. State는 두 가지 주요 유형으로 나뉩니다: StatelessWidget과 StatefulWidget. 이 두 가지는 서로 다른 방식으로 위젯의 상태를 처리합니다.

1. StatelessWidget

StatelessWidget은 변경되지 않는 상태를 가지는 위젯입니다. 즉, 한 번 생성되면 상태가 변하지 않습니다. 이러한 위젯은 상태를 가지지 않고, 빌드 시 제공된 데이터로만 렌더링됩니다.

예제

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String title;

  MyStatelessWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('Hello, $title!'),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: MyStatelessWidget(title: 'Stateless Widget')));

2. StatefulWidget

StatefulWidget은 변경 가능한 상태를 가지는 위젯입니다.

StatefulWidget은 자체적으로 상태를 관리하며, 상태가 변경될 때마다 다시 빌드됩니다.

StatefulWidget은 두 개의 클래스가 함께 작동합니다:

StatefulWidget 클래스와 State 클래스.

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: MyStatefulWidget()));

StatefulWidget의 동작 방식

1. createState():

• StatefulWidget은 createState 메서드를 통해 State 객체를 생성합니다. 이 객체는 위젯의 상태를 관리합니다.

2. State 객체:

• State 객체는 위젯의 상태를 포함하며, 상태가 변경될 때 setState 메서드를 호출하여 UI를 업데이트합니다.

• setState는 상태를 변경하고, 변경된 상태를 기반으로 위젯을 다시 빌드합니다.

3. initState():

• initState는 State 객체가 처음 생성될 때 호출되며, 초기화 작업을 수행합니다.

4. dispose():

• dispose는 State 객체가 소멸될 때 호출되며, 리소스를 정리하는 작업을 수행합니다.

State의 생명주기

• initState(): State 객체가 처음 생성될 때 호출됩니다.

• build(): 상태가 변경될 때마다 호출되어 위젯을 다시 빌드합니다.

• didUpdateWidget(): 위젯이 업데이트될 때 호출됩니다.

• dispose(): State 객체가 소멸될 때 호출됩니다.

예제

아래는 위젯의 상태를 변경하여 UI를 업데이트하는 예제입니다.

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Button pressed $_count times',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: CounterWidget()));

참고 자료

• Flutter Documentation - State

• Flutter Documentation - StatefulWidget

• Flutter Documentation - StatelessWidget

flutter controller 로 위젯 및 상태 제어

곰돌이쿤 — Wed, 24 Jul 2024 15:55:17 +0900

Flutter에서 Controller는 다양한 위젯과 함께 사용되어 위젯의 상태나 동작을 제어하는 데 사용됩니다.

특히 스크롤, 페이지, 텍스트 입력 등을 다룰 때 유용합니다.

아래는 일반적으로 Controller가 사용되는 주요 위젯과 그 역할을 설명합니다.

1. ScrollController

사용 위젯: ListView, GridView, SingleChildScrollView 등

역할:

• 스크롤 위치를 제어하고 모니터링합니다.

• 특정 위치로 스크롤하거나, 사용자가 스크롤할 때 발생하는 이벤트를 처리할 수 있습니다.

예제:

ListView.builder(
  controller: ScrollController(),
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
);

class _ScrollControllerExampleState extends State<ScrollControllerExample> {
  final ScrollController _scrollController = ScrollController();
  double _scrollPosition = 0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      setState(() {
        _scrollPosition = _scrollController.position.pixels;
      });
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Position: $_scrollPosition'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(title: Text('Item $index'));
        },
      ),
    );
  }
}

2. PageController

사용 위젯: PageView, TabBarView 등

역할:

• 페이지 뷰어의 현재 페이지를 제어하고 모니터링합니다.

• 특정 페이지로 이동하거나, 페이지 변화 이벤트를 처리할 수 있습니다.

예제:

PageView(
  controller: PageController(initialPage: 0),
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
  ],
);

class _PageControllerExampleState extends State<PageControllerExample> {
  final PageController _pageController = PageController(initialPage: 0);
  int _currentPage = 0;

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void _onPageChanged(int page) {
    setState(() {
      _currentPage = page;
    });
  }

  void _nextPage() {
    _pageController.nextPage(duration: Duration(milliseconds: 300), curve: Curves.easeIn);
  }

  void _previousPage() {
    _pageController.previousPage(duration: Duration(milliseconds: 300), curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page View Example')),
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _pageController,
              onPageChanged: _onPageChanged,
              children: <Widget>[
                Container(color: Colors.red),
                Container(color: Colors.green),
                Container(color: Colors.blue),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_back),
                onPressed: _previousPage,
              ),
              Text('Page $_currentPage'),
              IconButton(
                icon: Icon(Icons.arrow_forward),
                onPressed: _nextPage,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

3. TextEditingController

사용 위젯: TextField, TextFormField

역할:

• 텍스트 입력 필드의 값을 제어하고 모니터링합니다.

• 초기 값을 설정하거나, 텍스트 변화 이벤트를 처리할 수 있습니다.

예제:

TextField(
  controller: TextEditingController(),
  decoration: InputDecoration(labelText: 'Enter text'),
);

class _TextEditingControllerExampleState extends State<TextEditingControllerExample> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _printLatestValue() {
    print('Second text field: ${_controller.text}');
  }

  @override
  void initState() {
    super.initState();
    _controller.addListener(_printLatestValue);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TextEditingController Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter text'),
            ),
            ElevatedButton(
              onPressed: () {
                print('First text field: ${_controller.text}');
              },
              child: Text('Print Text'),
            ),
          ],
        ),
      ),
    );
  }
}

4. AnimationController

사용 위젯: 다양한 애니메이션 위젯

역할:

• 애니메이션을 제어하고 모니터링합니다.

• 애니메이션의 시작, 중지, 반복 등을 제어할 수 있습니다.

예제:

AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
);

class _AnimationControllerExampleState extends State<AnimationControllerExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimationController Example')),
      body: Center(
        child: FadeTransition(
          opacity: _controller,
          child: FlutterLogo(size: 100.0),
        ),
      ),
    );
  }
}

5. TabController

사용 위젯: TabBar, TabBarView

역할:

• 탭 바의 현재 탭을 제어하고 모니터링합니다.

• 탭 변경을 제어하거나, 탭 변화 이벤트를 처리할 수 있습니다.

예제:

TabController(
  length: 3,
  vsync: this,
);

class _TabControllerExampleState extends State<TabControllerExample> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabController Example'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(icon: Icon(Icons.directions_car), text: 'Car'),
            Tab(icon: Icon(Icons.directions_transit), text: 'Transit'),
            Tab(icon: Icon(Icons.directions_bike), text: 'Bike'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Car Tab')),
          Center(child: Text('Transit Tab')),
          Center(child: Text('Bike Tab')),
        ],
      ),
    );
  }
}

요약

• ScrollController: 스크롤 위치를 제어 (ListView, GridView 등)

• PageController: 페이지 뷰어의 현재 페이지를 제어 (PageView, TabBarView)

• TextEditingController: 텍스트 입력 필드의 값을 제어 (TextField, TextFormField)

• AnimationController: 애니메이션을 제어 (애니메이션 관련 위젯)

• TabController: 탭 바의 현재 탭을 제어 (TabBar, TabBarView)

참고 자료

• ScrollController 문서

• PageController 문서

• TextEditingController 문서

• AnimationController 문서

• TabController 문서

flutter photo gallery 사용하기

곰돌이쿤 — Wed, 24 Jul 2024 15:27:22 +0900

Flutter에서 Photo Gallery는 사용자가 여러 이미지를 탐색할 수 있게 해주는 기능을 의미합니다.

사용자는 이미지를 확대하거나 축소할 수 있고, 스와이프하여 다음 이미지로 넘어갈 수 있으며, 이미지에 대한 메타데이터를 볼 수도 있습니다.

Flutter에서 Photo Gallery를 구현하기 위해 다양한 위젯과 패키지를 사용할 수 있으며, 그 중 photo_view 패키지가 많이 사용됩니다.

Photo Gallery의 주요 구성 요소

1. 이미지 데이터 소스: 이미지를 저장하거나 가져오는 곳입니다. 로컬 디렉토리, 원격 서버, 또는 데이터베이스 등이 될 수 있습니다.

2. 이미지 로딩 및 캐싱: 대량의 이미지를 부드럽게 처리하기 위해 효율적인 로딩 및 캐싱 메커니즘이 필요합니다. cached_network_image 패키지와 같은 도구를 사용할 수 있습니다.

3. 이미지 표시: 이미지를 화면에 표시하기 위해 Flutter의 다양한 위젯을 사용합니다. 특히 photo_view 패키지는 이미지 확대/축소, 드래그, 회전 등의 기능을 제공합니다.

4. UI 및 사용자 상호작용: 사용자가 이미지를 탐색하고 상호작용할 수 있는 UI를 설계합니다. 예를 들어, 스와이프를 통한 이미지 전환, 버튼을 통한 이미지 삭제 등입니다.

주요 패키지

• photo_view: 이미지를 확대/축소하고 드래그할 수 있는 기능을 제공하는 패키지입니다.

• cached_network_image: 네트워크 이미지를 로드하고 캐시하는 기능을 제공하는 패키지입니다.

예제 코드

아래는 photo_view 패키지를 사용하여 Photo Gallery를 구현하는 예제 코드입니다.

PhotoViewPage.dart

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoViewPage extends StatefulWidget {
  final List<String> imagePaths;
  final int currentIndex;

  PhotoViewPage({required this.imagePaths, required this.currentIndex});

  @override
  _PhotoViewPageState createState() => _PhotoViewPageState();
}

class _PhotoViewPageState extends State<PhotoViewPage> {
  late PageController _controller;
  late int currentPageIndex;

  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: widget.currentIndex);
    currentPageIndex = widget.currentIndex;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PhotoViewGallery.builder(
            itemCount: widget.imagePaths.length,
            pageController: _controller,
            onPageChanged: (index) {
              setState(() {
                currentPageIndex = index;
              });
            },
            builder: (context, index) {
              return PhotoViewGalleryPageOptions(
                imageProvider: NetworkImage(widget.imagePaths[index]),
                maxScale: PhotoViewComputedScale.covered * 3,
                minScale: PhotoViewComputedScale.contained,
              );
            },
            loadingBuilder: (context, event) {
              return Center(
                child: CircularProgressIndicator(
                  strokeWidth: 2,
                ),
              );
            },
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              margin: const EdgeInsets.only(left: 25, top: 25),
              child: IconButton(
                onPressed: () => Navigator.of(context).pop(),
                icon: const Icon(
                  Icons.close,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              margin: const EdgeInsets.only(bottom: 20),
              child: Text(
                '${currentPageIndex + 1} / ${widget.imagePaths.length}',
                style: const TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

사용법

위 코드를 사용하기 위해 pubspec.yaml 파일에 photo_view 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.13.0 # 최신 버전을 확인하세요

Main.dart

import 'package:flutter/material.dart';
import 'photo_view_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GalleryPage(),
    );
  }
}

class GalleryPage extends StatelessWidget {
  final List<String> imagePaths = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gallery')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PhotoViewPage(
                  imagePaths: imagePaths,
                  currentIndex: 0,
                ),
              ),
            );
          },
          child: Text('Open PhotoView Gallery'),
        ),
      ),
    );
  }
}

참고 자료

• photo_view 패키지 공식 문서

• cached_network_image 패키지 공식 문서

결론

Flutter에서 Photo Gallery를 구현하는 것은 photo_view와 같은 패키지를 사용하면 매우 간단합니다. 이 패키지를 사용하면 사용자에게 고급 이미지 뷰어 기능을 제공할 수 있으며, 다양한 소스에서 이미지를 로드하고 캐시할 수 있습니다. 이로 인해 사용자 경험이 향상됩니다.

flutter StatelessWidget 와 StatefulWidget 차이 및 설명

곰돌이쿤 — Wed, 24 Jul 2024 11:27:41 +0900

Flutter에서 UI를 구성하는 주요 요소인 StatelessWidget과 StatefulWidget에 대해 설명하고, 이들이 상태(state)를 어떻게 관리하는지 정리해 보겠습니다.

1. StatelessWidget

**StatelessWidget**은 불변의 상태를 가지며, 빌드할 때마다 동일한 UI를 렌더링합니다. 상태가 변하지 않기 때문에 한 번 빌드된 후에는 UI가 변경되지 않습니다. 이는 주로 정적인 UI 요소를 렌더링할 때 사용됩니다.

• 특징:

• 상태가 변하지 않음.

• 생성자에서 필요한 값을 받아 빌드 메서드에서 UI를 렌더링.

• 상태를 가지지 않는 간단한 위젯에 적합.

• 예제:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String title;

  MyStatelessWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Text('This is a stateless widget'),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyStatelessWidget(title: 'Stateless Example'),
  ));
}

2. StatefulWidget

**StatefulWidget**은 동적인 상태를 가지며, 상태가 변할 때마다 UI를 재빌드할 수 있습니다. 상태는 위젯 자체가 아닌 State 객체에서 관리됩니다. State 객체는 StatefulWidget과 연결되어 있으며, 상태 변경 시 setState 메서드를 호출하여 UI를 업데이트합니다.

• 특징:

• 상태가 변할 수 있음.

• State 객체에서 상태를 관리.

• UI가 상태에 따라 동적으로 변경될 필요가 있는 경우 사용.

• 예제:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  final String title;

  MyStatefulWidget({required this.title});

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyStatefulWidget(title: 'Stateful Example'),
  ));
}

3. State

State 클래스는 StatefulWidget과 연결된 상태를 정의합니다. State 객체는 StatefulWidget의 생명주기 동안 유지되며, 상태가 변경될 때마다 setState 메서드를 호출하여 UI를 재빌드합니다.

• 생명주기:

• initState(): 처음으로 상태를 초기화할 때 호출.

• didChangeDependencies(): 종속성 또는 상위 객체가 변경될 때 호출.

• build(): UI를 렌더링할 때 호출.

• setState(): 상태를 변경하고 UI를 재빌드할 때 호출.

• dispose(): 위젯이 소멸될 때 호출.

• 예제 (위에서 사용한 예제에 포함됨):

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    // 초기화 작업 수행
  }

  @override
  void dispose() {
    // 정리 작업 수행
    super.dispose();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

요약

• StatelessWidget: 불변의 상태를 가지며, 정적인 UI를 렌더링하는 데 사용됩니다.

• StatefulWidget: 동적인 상태를 가지며, 상태 변경에 따라 UI를 재빌드할 수 있습니다.

• State: StatefulWidget과 연결된 상태를 관리하며, 상태 변경 시 UI를 업데이트합니다.

flutter firebase 를 이용한 이메일 로그인 구현

곰돌이쿤 — Tue, 23 Jul 2024 20:53:29 +0900

1. Firebase 프로젝트 설정

1.1 Firebase 콘솔에서 프로젝트 생성

1. Firebase 콘솔에 접속하여 새 프로젝트를 만듭니다.

2. 프로젝트 이름을 입력하고, 필요한 설정을 완료합니다.

1.2 앱에 Firebase 추가

1. Firebase 프로젝트의 대시보드에서 Android 또는 iOS 앱을 추가합니다.

firebase cli 를 먼저 설치를 해줍니다.

https://firebase.google.com/docs/cli?hl=ko&authuser=0&_gl=1*i16l2u*_ga*MTY1Njg1OTM5My4xNzIxNzEyMzA2*_ga_CW55HF8NVT*MTcyMTcxNjg4NS4yLjEuMTcyMTcxNzYxMi4zNy4wLjA.#windows-standalone-binary

각 os 에 맞는 방식을 클릭 후 그대로 따라합니다.

firebase cli 를 설치했다면

firebase login

으로 구글 계정 로그인 하면 됩니다.

그 후 로그인이 잘 되었는지 확인하기 위해 프로젝트 리스트를 조회합니다.

firebase projects:list

그 후 아래 명령러를 그대로 실행해 줍니다.

flutterfire ~~

flutterfire configure --project=todo-프로젝트아이디

명령어를 치면 아래와 같이 나오고 원하는 os 선택 후 설치 진행합니다.

해당 명령어가 잘 실행된다면 콘솔에는 아래와 같이 앱을 등록했다는 로그가 남습니다.

그리고 파이어베이스 대시보드로 이동하면 등록된 앱이 뜨게 됩니다.

해당 작업이 완료되면
lib 폴더에 firebase_options.dart 가 생성된다고 하는데, 필자는 뜨지 않아서 새로 수동으로 만들어주었습니다. 아래 적었습니다.

안드로이드 에 firebase 권한 추가

google-services.json 파일을 다운 후
android > app > 경로에 google-services.json 을 넣어줍니다.

프로젝트에 firebase sdk 추가

settings.gradle 의 plugins 내부에 아래 코드를 넣어줍니다. 가이드에는 루트프로젝트의 build.gradle 라고 나옴.

settings.gradle 에 수정

id "com.google.gms.google-services" version "4.3.15" apply false

해당 과정에서 혹시 kotlin 버젼 이슈가 있다면 (아래 와 같이 버젼 이슈)

integ.client.measurement_api_measurement_api.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.9.0, expected version is 1.7.1.

버젼을 settings.gradle 에서 올려주면 됩니다.

id "org.jetbrains.kotlin.android" version "1.9.0" apply false

추가로 프로젝트내 build.gradle 에 firebae 라이브러리 추가

android > app > build.gradle

dependencies {
    implementation platform('com.google.firebase:firebase-bom:33.1.2')
    implementation 'com.google.firebase:firebase-analytics'
}

여기까지 추가 후 실행이 되면 firebase 사용준비는 완료되었습니다.

Authentication 시작

firebase 를 이용한 회원가입 및 로그인 기능을 두기 위해서는 firebase 에서 authentication 을 시작해주어야 합니다.

Authentication 설정: 좌측 메뉴에서 Authentication을 클릭합니다.

Sign-in Method: 상단 탭에서 Sign-in method를 선택합니다. (로그인 방법 클릭)

Email/Password: 이메일/비밀번호 인증이 활성화되어 있는지 확인합니다

활성화되지 않았다면 활성화합니다.

firebase_options.dart 수동생성

lib 폴더에 firebase_options.dart 파일을 생성합니다.

// lib/firebase_options.dart

import 'package:firebase_core/firebase_core.dart';

class DefaultFirebaseOptions {
  static FirebaseOptions get currentPlatform {
    return const FirebaseOptions(
      apiKey: 'AIzaSyBbHR~~~~~~~~~~~~~',
      appId: '1:508050~~~~:android:7201919812b~~~~~~',
      messagingSenderId: '50805~~~~~~',
      projectId: 'todo-~~~~',
    );
  }
}

각 값에 맞는 값은 프로젝트 내 앱 설정에서 확인합니다.

google-services.json 파일안에 해당 값들이 존재 합니다.

회원가입 페이지
register_page.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'login_page.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<void> _register() async {
    try {
      UserCredential userCredential = await _auth.createUserWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Successfully registered!')),
      );
      // 회원가입 후 원하는 페이지로 이동
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => LoginPage()),
      );
    } on FirebaseAuthException catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Failed to register: ${e.message}')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Register')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _register,
              child: Text('Register'),
            ),
          ],
        ),
      ),
    );
  }
}

회원가입이 완료되면 로그인 페이지로 리다이렉트 하게 했습니다.

로그인 페이지

login_page.dart

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future<void> _login() async {
    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      // 로그인 성공 시 처리
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => TodoListScreen()), // ListPage로 이동
      );
    } on FirebaseAuthException catch (e) {
      String message;
      switch (e.code) {
        case 'user-not-found':
          message = 'No user found for that email.';
          break;
        case 'wrong-password':
          message = 'Wrong password provided for that user.';
          break;
        default:
          message = 'An error occurred. Please try again.';
      }
      // 에러 메시지를 스낵바로 출력
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(message)),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('An error occurred. Please try again.')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

main 메소드
firebase 메소드를 추가해줍니다.

void main() async{

  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(
      child: MyApp(),
    ),
  );
}

flutter todo-app 만들기

곰돌이쿤 — Tue, 23 Jul 2024 10:42:19 +0900

이 앱은 “할 일 목록 (To-Do List)” 앱으로, 기본적인 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 포함할 것입니다.

샘플 앱: To-Do List

1. 프로젝트 생성

Flutter 프로젝트를 생성합니다.

flutter create todo_app
cd todo_app

2. 주요 패키지 추가

pubspec.yaml 파일에 필요한 패키지를 추가합니다. 이 예제에서는 provider를 상태 관리를 위해 사용합니다.

dev_dependencies:
  flutter_test:
    sdk: flutter
  provider:
  uuid:

이후 flutter pub get 명령어를 실행해 패키지를 설치합니다.

3. 모델 정의

할 일 항목의 모델 클래스를 정의합니다.

// lib/models/todo.dart
class Todo {
  String id;
  String title;
  bool isDone;

  Todo({
    required this.id,
    required this.title,
    this.isDone = false,
  });
}

4. 상태 관리 설정

할 일 목록을 관리하는 ChangeNotifier 클래스를 정의합니다.

import 'package:flutter/foundation.dart';
import '../model/todo.dart';

// 할 일 목록을 관리하는 ChangeNotifier 클래스
class TodoProvider with ChangeNotifier {
  List<Todo> _todos = [];

  List<Todo> get todos => _todos;

  // 할 일 항목을 추가하는 메서드
  void addTodo(Todo todo) {
    _todos.add(todo);
    notifyListeners();
  }

  // 할 일 항목의 완료 상태를 토글하는 메서드
  void toggleTodoStatus(String id) {
    final index = _todos.indexWhere((todo) => todo.id == id);
    if (index != -1) {
      _todos[index].isDone = !_todos[index].isDone;
      notifyListeners();
    }
  }

  // 할 일 항목을 제거하는 메서드
  void removeTodo(String id) {
    _todos.removeWhere((todo) => todo.id == id);
    notifyListeners();
  }
// 업데이트
  void updateTodo(Todo updatedTodo) {
    final index = _todos.indexWhere((todo) => todo.id == updatedTodo.id);
    if (index != -1) {
      _todos[index] = updatedTodo;
      notifyListeners();
    }
  }
}

참고 if 문에 -1 확인 이유

f 문을 사용하여 index가 -1이 아닌지 확인하는 이유는 indexWhere 메서드가 일치하는 항목을 찾지 못할 때 -1을 반환하기 때문입니다. index가 -1이면 _todos[index]는 유효하지 않으며, 이 경우 배열에 접근하려고 하면 오류가 발생합니다. 따라서 if 문은 안전한 코드를 작성하는 데 중요합니다.

그럼에도 불구하고, indexWhere가 항상 올바른 값을 반환한다고 확신할 수 있다면 이 조건문을 생략할 수 있지만, 이는 코드의 안정성과 유연성을 감소시킬 수 있습니다. 일반적으로는 if 문을 포함하는 것이 좋습니다.

5. 메인 파일 설정

프로바이더를 설정하고 메인 파일을 구성합니다.

import 'package:flutter/material.dart';
import 'package:flutter_todo/screen/todo_list_screen.dart';
import 'package:provider/provider.dart';
import 'package:flutter_todo/providers/todo_provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        // TodoProvider를 ChangeNotifierProvider로 제공
        ChangeNotifierProvider(create: (_) => TodoProvider()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To-Do App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TodoListScreen(),
    );
  }
}

6. UI 작성

할 일 목록 화면을 작성합니다.

// lib/screens/todo_list_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_todo/screen/todo_edit_screen.dart';
import 'package:provider/provider.dart';
import 'package:uuid/uuid.dart';

import '../model/todo.dart';
import '../providers/todo_provider.dart';

class TodoListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final todoProvider = Provider.of<TodoProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('To-Do List'),
      ),
      body: ListView.builder(
        itemCount: todoProvider.todos.length, // 할 일 목록의 개수
        itemBuilder: (ctx, i) => ListTile(
          title: Text(todoProvider.todos[i].title), // 할 일 제목
          trailing: Checkbox(
            value: todoProvider.todos[i].isDone, // 완료 상태
            onChanged: (_) {
              todoProvider.toggleTodoStatus(todoProvider.todos[i].id); // 완료 상태 토글
            },
          ),
          onTap: () {
            // 수정 페이지로 이동
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => EditTodoScreen(todo: todoProvider.todos[i]),
              ),
            );
          },
          onLongPress: () {
            todoProvider.removeTodo(todoProvider.todos[i].id); // 할 일 항목 제거
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (ctx) {
              TextEditingController controller = TextEditingController();
              return AlertDialog(
                title: Text('Add Todo'),
                content: TextField(
                  controller: controller,
                  decoration: InputDecoration(labelText: 'Title'),
                ),
                actions: [
                  TextButton(
                    onPressed: () {
                      if (controller.text.isNotEmpty) {
                        final newTodo = Todo(
                          id: Uuid().v4(),
                          title: controller.text,
                        );
                        todoProvider.addTodo(newTodo);
                        Navigator.of(ctx).pop();
                      }
                    },
                    child: Text('Add'),
                  ),
                ],
              );
            },
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

7. 수정 페이지 생성

새로운 파일 edit_todo_screen.dart를 생성합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../model/todo.dart';
import '../providers/todo_provider.dart';

class EditTodoScreen extends StatelessWidget {
  final Todo todo;

  EditTodoScreen({required this.todo});

  @override
  Widget build(BuildContext context) {
    TextEditingController titleController = TextEditingController(text: todo.title);

    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Todo'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: titleController,
              decoration: InputDecoration(labelText: 'Title'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (titleController.text.isNotEmpty) {
                  final updatedTodo = Todo(
                    id: todo.id,
                    title: titleController.text,
                    isDone: todo.isDone,
                  );
                  Provider.of<TodoProvider>(context, listen: false).updateTodo(updatedTodo);
                  Navigator.of(context).pop();
                }
              },
              child: Text('Update'),
            ),
          ],
        ),
      ),
    );
  }
}

flutter scrollview pagination 예제 및 정리

곰돌이쿤 — Mon, 22 Jul 2024 22:34:38 +0900

Flutter에서 스크롤 뷰를 사용한 페이지네이션은 앱이 많은 양의 데이터를 표시할 때 유용한 패턴입니다.

이 패턴은 사용자가 스크롤할 때 새로운 데이터를 동적으로 로드하여 사용자 경험을 향상시킵니다.

이를 구현하는 데 필요한 주요 단계와 예제를 정리해보겠습니다.

주요 개념

1. ScrollController: 스크롤 위치를 추적하고 스크롤 이벤트를 처리합니다.

2. ListView.builder: 동적으로 리스트 아이템을 생성하여 성능을 최적화합니다.

3. HTTP 요청: 데이터를 페이징하여 서버에서 가져옵니다.

4. 상태 관리: 현재 페이지, 로딩 상태, 데이터 리스트 등을 관리합니다.

단계별 구현

1. 프로젝트 설정:

• 필요한 패키지 추가: http, provider (옵션)

2. ScrollController 설정:

• 스크롤 이벤트를 감지하고, 사용자가 리스트 끝에 도달하면 새로운 데이터를 로드합니다.

3. ListView.builder 사용**:

• 리스트 아이템을 동적으로 생성하여 메모리 사용을 최적화합니다.

4. 데이터 로드:

• 서버에서 데이터를 페이징하여 가져옵니다.

5. 상태 관리:

• StatefulWidget 또는 상태 관리 패키지(예: provider)를 사용하여 현재 페이지, 로딩 상태, 데이터 리스트 등을 관리합니다.

코드 예제

아래는 위 개념을 바탕으로 한 간단한 코드 예제입니다.

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController();
  List _data = [];
  int _page = 1;
  bool _isLoading = false;
  bool _hasMoreData = true;

  @override
  void initState() {
    super.initState();
    _fetchData();
    _scrollController.addListener(() {
      if (_scrollController.position.extentAfter < 300 && !_isLoading && _hasMoreData) {
        _fetchData();
      }
    });
  }

  Future<void> _fetchData() async {
    setState(() {
      _isLoading = true;
    });

    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums?_page=$_page&_limit=10'));
    if (response.statusCode == 200) {
      List newData = json.decode(response.body);
      setState(() {
        _data.addAll(newData);
        _isLoading = false;
        if (newData.length < 10) {
          _hasMoreData = false;
        } else {
          _page++;
        }
      });
    } else {
      setState(() {
        _isLoading = false;
        _hasMoreData = false;
      });
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pagination Example'),
      ),
      body: _data.isEmpty && _isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              controller: _scrollController,
              itemCount: _data.length + (_hasMoreData ? 1 : 0),
              itemBuilder: (context, index) {
                if (index == _data.length) {
                  return Center(child: CircularProgressIndicator());
                }
                return ListTile(
                  title: Text('Item ${_data[index]['id']}'),
                  subtitle: Text(_data[index]['title']),
                );
              },
            ),
    );
  }
}

주요 포인트

1. ScrollController 설정:

• 스크롤 이벤트를 감지하고, 사용자가 리스트 끝에 도달하면 _fetchData 함수를 호출하여 다음 페이지 데이터를 로드합니다.

2. ListView.builder:

• itemCount를 설정하여 로딩 중인 상태 표시를 위한 추가 아이템을 처리합니다.

• itemBuilder에서 로딩 인디케이터를 표시하여 더 많은 데이터를 로드 중임을 사용자에게 알립니다.

3. 데이터 로드 및 상태 관리:

• 데이터를 로드하는 동안 _isLoading 상태를 업데이트하여 UI에서 로딩 인디케이터를 표시합니다.

• 새로운 데이터를 가져와서 _data 리스트에 추가하고, 페이지 수를 증가시킵니다.

• 더 이상 가져올 데이터가 없을 경우 _hasMoreData를 false로 설정합니다.

다른 예제(실습)

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>  {

  final _url = 'https://jsonplaceholder.typicode.com/albums';
  int _page = 1;
  final int _limit = 20;
  bool _hasNextPage = true; // 다음 페이지가 있는지 여부
  bool _isFirstLoadRunning = false; // 첫번째 페이지 로딩중
  bool _isLoadMoreRunning = false; // 다음페이지 로딩중
  List _albumList = [];
  late ScrollController _controller;

  @override
  void initState() {
    super.initState();
    initLoad();
    _controller = ScrollController()..addListener(_nextLoad);
  }


  void initLoad() async {
    setState(() {
      _isFirstLoadRunning = true;
    });
    try {
      final res = await http.get(Uri.parse("$_url?_page=$_page&_limit=$_limit"));
      setState(() {
        _albumList = jsonDecode(res.body);
      });

    } catch(e) {
      print(e.toString());
    }

    setState(() {
      _isFirstLoadRunning = false;
    });
  }

  void _nextLoad() async {
    print("nextLoad");
    if(_hasNextPage && !_isFirstLoadRunning && !_isLoadMoreRunning
      && _controller.position.extentAfter < 100) {
      setState(() {
        _isLoadMoreRunning = true;
      });
      _page += 1;
      try {
        final res = await http.get(Uri.parse("$_url?_page=$_page&_list=$_limit"));
        final List fetchedAlbums = json.decode(res.body);
        if(fetchedAlbums.isNotEmpty) {
          setState(() {
            _albumList.addAll(fetchedAlbums);
          });
        } else { // 데이터가 비어있는 경우
          setState(() {
            _hasNextPage = false;
          });
        }
      } catch(e) {
        print(e.toString());
      }

      setState(() {
        _isLoadMoreRunning = false;
      });

    }
  }

  // 페이지 종료 시 종료해 주는 기능
  @override
  void dispose() {
    super.dispose();
    _controller.removeListener(_nextLoad);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("test title"),
        ),
        body: _isFirstLoadRunning
        ? const Center(
          child: CircularProgressIndicator(),
        )
        : Column(
          children: [
            Expanded(
                child: ListView.builder(
                  controller: _controller,
                  itemCount: _albumList.length,
                  itemBuilder: (context, index) => Card(
                    margin: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
                    child: ListTile(
                      title: Text(_albumList[index]["id"].toString()),
                      subtitle: Text(_albumList[index]["title"]),
                    ),
                  )
                )
            ),
            if (_isLoadMoreRunning == true)
              Container(
                padding: const EdgeInsets.all(30),
                child: const Center(
                  child: CircularProgressIndicator(),
                )
              ),
            if (_hasNextPage == false)
              Container(
                  padding: const EdgeInsets.all(20),
                  child: const Center(
                    child: Text(
                      "No more data to be fetched",
                      style: TextStyle(
                        color: Colors.white
                      )
                    ),
                  )
              )
          ],
        )
    );
  }
}

참고 자료

• Flutter Documentation - ListView

• Flutter Documentation - ScrollController

• Flutter HTTP Package

flutter mvvm 패턴 정리 및 예제

곰돌이쿤 — Mon, 22 Jul 2024 21:19:55 +0900

MVVM(Model-View-ViewModel) 패턴은 UI와 비즈니스 로직을 분리하는 소프트웨어 아키텍처 패턴입니다. Flutter에서 MVVM 패턴을 사용하면 코드의 가독성과 유지보수성을 높이고, 테스트 용이성을 개선할 수 있습니다.

구성 요소

1. Model

• 데이터 구조와 비즈니스 로직을 포함합니다.

• 데이터 소스(예: 데이터베이스, API)와 상호작용합니다.

2. View

• 사용자 인터페이스를 담당합니다.

• 사용자 입력을 받습니다.

• ViewModel에서 제공하는 데이터를 표시합니다.

3. ViewModel

• View와 Model 간의 중개자 역할을 합니다.

• Model에서 데이터를 가져와서 View에 전달합니다.

• 사용자 입력을 처리하고, Model을 업데이트합니다.

• ChangeNotifier를 상속받아 데이터 변경 시 View에 알립니다.

MVVM 패턴의 장점

1. 유지보수성 향상: UI와 비즈니스 로직이 분리되어 코드를 더 쉽게 관리할 수 있습니다.

2. 재사용성: ViewModel과 Model은 특정 UI에 의존하지 않으므로 재사용이 가능합니다.

3. 테스트 용이성: UI와 독립적으로 ViewModel과 Model을 테스트할 수 있습니다.

4. 유연성: 다양한 플랫폼과 프레임워크에서 사용 가능합니다.

Flutter에서 MVVM 패턴 구현 예제

1. Model

Model 클래스는 데이터를 정의하고, 데이터와 상호작용하는 로직을 포함합니다.

class User {
  String username;
  String email;

  User({required this.username, required this.email});
}

2. ViewModel

ViewModel 클래스는 ChangeNotifier를 상속받아 상태 변화를 알립니다. View와 Model 간의 데이터 처리를 담당합니다.

import 'package:flutter/material.dart';
import 'model/user.dart';

class UserViewModel extends ChangeNotifier {
  User _user = User(username: '', email: '');

  String get username => _user.username;
  String get email => _user.email;

  void setUsername(String username) {
    _user.username = username;
    notifyListeners();
  }

  void setEmail(String email) {
    _user.email = email;
    notifyListeners();
  }
}

3. View

View 클래스는 사용자 인터페이스를 정의하고, ViewModel과 상호작용합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'viewmodel/user_viewmodel.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MVVM Example')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              onChanged: (value) {
                context.read<UserViewModel>().setUsername(value);
              },
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              onChanged: (value) {
                context.read<UserViewModel>().setEmail(value);
              },
              decoration: InputDecoration(labelText: 'Email'),
            ),
            SizedBox(height: 20),
            Consumer<UserViewModel>(
              builder: (context, viewModel, child) {
                return Column(
                  children: [
                    Text('Username: ${viewModel.username}'),
                    Text('Email: ${viewModel.email}'),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => UserViewModel(),
      child: MaterialApp(home: MyHomePage()),
    ),
  );
}

요약

• Model: 데이터 구조와 비즈니스 로직을 정의합니다.

• View: 사용자 인터페이스를 담당하며, 사용자 입력을 처리합니다.

• ViewModel: Model과 View 간의 중개자로서, 데이터를 처리하고 View에 전달합니다.

다른예시(실습)

파일목록
datasource
- datasource.dart

repository

- album_datasource_repository.dart

viewModel

- album_view_model.dart

view

- album_mvvm_view.dart

datasource.dart

import 'dart:convert';

import 'package:http/http.dart' as http;
import 'package:flutter_lecture/model/album.dart';

class Datasource {

  Future<List<Album>> getAlbumList() async {
    final response = await http
        .get(Uri.parse("https://jsonplaceholder.typicode.com/albums"));

    return jsonDecode(response.body)
        .map<Album>((json) => Album.fromJson(json))
        .toList();
  }

}

album_datasource_repository.dart

import 'package:flutter_lecture/datasource/datasource.dart';

import '../model/album.dart';

class AlbumDatasourceRepository {
  final Datasource _datasource = Datasource();


  Future<List<Album>> getAlbumList() {
    return _datasource.getAlbumList();
  }
}

album_view_model.dart


import 'package:flutter/cupertino.dart';
import 'package:flutter_lecture/repository/album_datasource_repository.dart';

import '../model/album.dart';

class AlbumViewModel with ChangeNotifier {
  late final AlbumDatasourceRepository _albumRepository;
  List<Album> _albumList = List.empty(growable: true);
  List<Album> get albumList => _albumList;



  AlbumViewModel() {
    _albumRepository = AlbumDatasourceRepository();
    _getAlbumList();
  }

  Future<void> _getAlbumList() async{
    _albumList = await _albumRepository.getAlbumList();
    notifyListeners();
  }

}

album_mvvm_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_lecture/model/albums.dart';
import 'package:flutter_lecture/bloc/album_bloc.dart';
import 'package:flutter_lecture/viewModel/album_view_model.dart';
import 'package:provider/provider.dart';

import '../model/album.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<Album> albumList;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AlbumViewModel>(
        create: ((context) => AlbumViewModel()),
        child: Scaffold(
          appBar: AppBar(
            title: const Text("test title"),
          ),
          body: Consumer<AlbumViewModel>(
            builder: (context, provider, child) {
                albumList = provider.albumList;
                return ListView.builder(
                  itemCount: albumList.length,
                  itemBuilder: (context, index) {
                    return Container(
                      padding: const EdgeInsets.all(10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("ID: ${albumList[index].id.toString()}"),
                          Text("Title: ${albumList[index].title}" )
                        ],
                      ),
                    );
                  }
                );
              },
          ),
        ),
    );
  }
}

참고 자료

• Flutter 공식 문서

• MVVM 패턴

이 패턴을 사용하면 Flutter 애플리케이션의 구조를 더 명확하게 만들고, 유지보수와 테스트를 더 쉽게 할 수 있습니다.

flutter form 제출 및 라우터 이동

곰돌이쿤 — Mon, 22 Jul 2024 18:41:05 +0900

Flutter에서 Form 데이터를 저장하고 성공 페이지로 이동하는 과정은 다음과 같습니다.

이를 위해 Form, TextFormField, Navigator 등을 사용합니다.

단계별 설명

1. Form 생성: 사용자로부터 입력을 받을 Form을 생성합니다.

2. Form 데이터 저장: 사용자가 입력한 데이터를 저장합니다.

3. 성공 페이지로 이동: 데이터가 성공적으로 저장되면 성공 페이지로 이동합니다.

전체 코드 예제

1. main.dart 파일

main.dart 파일에서는 초기 화면을 설정하고, 라우트를 정의합니다.

import 'package:flutter/material.dart';
import 'form_page.dart';
import 'success_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(),
        '/success': (context) => SuccessPage(),
      },
    );
  }
}

2. form_page.dart 파일

form_page.dart 파일에서는 Form을 정의하고, 데이터를 저장한 후 성공 페이지로 이동합니다.

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _key = GlobalKey<FormState>();
  late String _username, _email;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Form Page"),
      ),
      body: Container(
        padding: const EdgeInsets.all(15),
        child: Form(
          key: _key,
          child: Column(
            children: [
              usernameInput(),
              const SizedBox(height: 15),
              emailInput(),
              const SizedBox(height: 15),
              submitButton()
            ],
          ),
        ),
      ),
    );
  }

  Widget usernameInput() {
    return TextFormField(
      autofocus: true,
      validator: (val) {
        if (val == null || val.isEmpty) {
          return 'The input is empty';
        } else {
          return null;
        }
      },
      onSaved: (username) => _username = username ?? '',
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        hintText: 'Input your username',
        labelText: 'username',
        labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget emailInput() {
    return TextFormField(
      autofocus: true,
      validator: (val) {
        if (val == null || val.isEmpty) {
          return 'The input is empty';
        } else {
          return null;
        }
      },
      onSaved: (email) => _email = email ?? '',
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        hintText: 'Input your email address',
        labelText: 'email address',
        labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget submitButton() {
    return ElevatedButton(
      onPressed: () {
        if (_key.currentState!.validate()) {
          _key.currentState!.save();
          Navigator.pushNamed(
            context,
            '/success',
            arguments: {'username': _username, 'email': _email},
          );
        }
      },
      child: Container(
        padding: const EdgeInsets.all(15),
        child: const Text('Submit'),
      ),
    );
  }
}

3. success_page.dart 파일

success_page.dart 파일에서는 성공적으로 데이터를 저장한 후 이동하는 페이지를 정의합니다.

import 'package:flutter/material.dart';

class SuccessPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Map<String, String> args =
        ModalRoute.of(context)!.settings.arguments as Map<String, String>;

    return Scaffold(
      appBar: AppBar(
        title: const Text("Success Page"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Username: ${args['username']}"),
            Text("Email: ${args['email']}"),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('Back to Home'),
            ),
          ],
        ),
      ),
    );
  }
}

주요 단계 설명

1. Form 위젯 사용: Form 위젯을 사용하여 사용자 입력을 받습니다. GlobalKey<FormState>를 사용하여 Form의 상태를 관리합니다.

2. Validator 및 onSaved 사용: TextFormField 위젯의 validator 속성을 사용하여 입력 검증을 수행하고, onSaved 속성을 사용하여 데이터를 저장합니다.

3. Navigator 사용: Navigator.pushNamed를 사용하여 성공 페이지로 이동합니다. 이때 arguments를 사용하여 입력된 데이터를 성공 페이지로 전달합니다.

4. 성공 페이지에서 데이터 표시: 성공 페이지에서 ModalRoute.of(context)!.settings.arguments를 사용하여 전달된 데이터를 받아 표시합니다.

요약

이 과정은 Flutter에서 Form 데이터를 저장하고, 성공 페이지로 이동하는 일반적인 방법을 설명합니다. 이를 통해 사용자로부터 입력을 받고, 입력된 데이터를 다음 페이지로 전달하여 표시할 수 있습니다.

flutter webview 사용방법

곰돌이쿤 — Mon, 22 Jul 2024 17:21:24 +0900

Flutter에서 WebView를 사용하는 방법을 정리하겠습니다.

WebView는 애플리케이션 내에서 웹 콘텐츠를 표시할 수 있게 해주는 위젯입니다. 이를 통해 Flutter 앱에서 웹 페이지를 렌더링할 수 있습니다.

1. WebView 패키지 추가

먼저 webview_flutter 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  webview_flutter: ^4.0.0  # 최신 버전 확인 필요

1.2 플랫폼별 설정

iOS (ios/Runner/Info.plist):

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Android (android/app/build.gradle):

android {
    defaultConfig {
        minSdkVersion 19
    }
}

2. 기본 사용법

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView Example')),
      body: WebViewWidget(controller: controller),
    );
  }
}

3. 주요 기능

3.1 JavaScript 활성화/비활성화

controller.setJavaScriptMode(JavaScriptMode.unrestricted);

3.2 로딩 프로그레스 모니터링

NavigationDelegate(
  onProgress: (int progress) {
    print('WebView is loading (progress : $progress%)');
  },
)

3.3 페이지 로딩 이벤트

NavigationDelegate(
  onPageStarted: (String url) { print('Page started loading: $url'); },
  onPageFinished: (String url) { print('Page finished loading: $url'); },
)

3.4 에러 처리

NavigationDelegate(
  onWebResourceError: (WebResourceError error) {
    print('Error: ${error.description}');
  },
)

3.5 쿠키 관리

final cookieManager = WebViewCookieManager();
await cookieManager.setCookie(WebViewCookie(name: 'foo', value: 'bar', domain: 'example.com'));

4. 고급 기능

4.1 JavaScript과 Flutter 간 통신

controller.addJavaScriptChannel(
  'Toaster',
  onMessageReceived: (JavaScriptMessage message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message.message)),
    );
  },
);

4.2 사용자 지정 사용자 에이전트

controller.setUserAgent('My Custom User Agent');

NavigationDelegate 예시

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  const WebViewExample({Key? key}) : super(key: key);

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // 웹 페이지 로딩 진행률 업데이트
            print('WebView is loading (progress : $progress%)');
          },
          onPageStarted: (String url) {
            // 페이지 로딩 시작
            print('Page started loading: $url');
          },
          onPageFinished: (String url) {
            // 페이지 로딩 완료
            print('Page finished loading: $url');
          },
          onWebResourceError: (WebResourceError error) {
            // 웹 리소스 로딩 중 오류 발생
            print('Error: ${error.description}');
          },
          onNavigationRequest: (NavigationRequest request) {
            // 특정 도메인으로의 이동을 막고 싶을 때 사용
            if (request.url.startsWith('https://www.youtube.com/')) {
              print('Blocking navigation to ${request.url}');
              return NavigationDecision.prevent;
            }
            print('Allowing navigation to ${request.url}');
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView Example'),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

NavigationDelegate는 WebViewController를 설정할 때 setNavigationDelegate 메서드를 통해 설정합니다. 일반적으로 WebViewController를 초기화하는 부분에 넣습니다. 주로 initState 메서드 내에서 이루어집니다.

다음은 NavigationDelegate를 올바르게 설정하는 방법을 보여주는 예제입니다:

WebView NavigationDelegate 예제

Click to open code

이 예제에서 주목해야 할 점들은 다음과 같습니다:

NavigationDelegate는 WebViewController의 setNavigationDelegate 메서드를 통해 설정됩니다.
initState 메서드 내에서 WebViewController를 초기화하고 설정합니다.
NavigationDelegate는 여러 콜백 함수를 포함할 수 있습니다:
- onProgress: 페이지 로딩 진행률을 추적합니다.
- onPageStarted: 페이지 로딩이 시작될 때 호출됩니다.
- onPageFinished: 페이지 로딩이 완료될 때 호출됩니다.
- onWebResourceError: 웹 리소스 로딩 중 오류가 발생했을 때 호출됩니다.
- onNavigationRequest: 새로운 URL로 이동하기 전에 호출됩니다. 여기서 특정 URL로의 이동을 차단할 수 있습니다.
각 콜백 함수 내에서 원하는 로직을 구현할 수 있습니다. 예를 들어, 로딩 진행률을 UI에 표시하거나, 특정 URL로의 이동을 차단하는 등의 작업을 수행할 수 있습니다.

이렇게 설정된 NavigationDelegate는 WebView의 다양한 이벤트를 처리하고 사용자 경험을 향상시키는 데 도움이 됩니다. 특정 요구사항에 따라 각 콜백 함수의 내용을 커스터마이즈할 수 있습니다.

5. 보안 고려사항

HTTPS 사용을 권장합니다.
신뢰할 수 있는 웹사이트만 로드하세요.
필요한 경우에만 JavaScript를 활성화하세요.

6. 성능 최적화

웹뷰는 네이티브 위젯보다 성능이 떨어질 수 있으므로 필요한 경우에만 사용하세요.
복잡한 웹 콘텐츠를 로드할 때는 로딩 인디케이터를 표시하세요.

7. 사용자 경험 개선

뒤로 가기 기능 구현
새로고침 버튼 추가
로딩 진행률 표시

8. 플랫폼별 고려사항

iOS와 Android에서 웹뷰의 동작이 약간 다를 수 있으므로 두 플랫폼에서 모두 테스트하세요.
플랫폼별 특정 기능이 필요한 경우 조건부 코드를 사용하세요.

flutter local notifications - 알림

곰돌이쿤 — Mon, 22 Jul 2024 15:52:11 +0900

Flutter에서 로컬 알림(Local Notifications)을 사용하면 앱이 백그라운드에 있거나 사용자가 앱을 사용하고 있지 않은 경우에도 사용자에게 알림을 보낼 수 있습니다. 이를 위해 flutter_local_notifications 패키지를 사용할 수 있습니다. 이 패키지는 Android와 iOS 모두에서 로컬 알림을 지원합니다.

1. 패키지 설치

먼저 pubspec.yaml 파일에 flutter_local_notifications 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_local_notifications: ^12.0.3

그런 다음 flutter pub get 명령을 실행하여 패키지를 설치합니다.

2. Android 설정

Android에서 로컬 알림을 사용하려면 AndroidManifest.xml 파일에 필요한 권한과 리시버(receiver)를 추가해야 합니다.

android/app/src/main/AndroidManifest.xml 파일을 다음과 같이 수정합니다:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_app">

    <!-- 알림 관련 권한 -->
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

    <application
        android:label="flutter_lecture"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

        <!-- 알림 관련 서비스 -->
        <receiver
            android:name="com.dexterous.flutterlocalnotifications.receivers.NotificationBroadcastReceiver"
            android:exported="true"/>
        <receiver
            android:name="com.dexterous.flutterlocalnotifications.receivers.ActionReceiver"
            android:exported="true"/>
        <receiver
            android:name="com.dexterous.flutterlocalnotifications.receivers.DismissedReceiver"
            android:exported="true"/>
        <receiver
            android:name="com.dexterous.flutterlocalnotifications.receivers.ScheduledNotificationBootReceiver"
            android:permission="android.permission.RECEIVE_BOOT_COMPLETED"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED"/>
                <action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
            </intent-filter>
        </receiver>

        <!-- 기타 설정들 -->
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize"
            android:showWhenLocked="true"
            android:turnScreenOn="true">
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"/>
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2"/>
    </application>

    <!-- 패키지 가시성 설정 -->
    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT"/>
            <data android:mimeType="text/plain"/>
        </intent>
    </queries>
</manifest>

3. iOS 설정

iOS에서 로컬 알림을 사용하려면 추가적인 설정이 필요합니다.

ios/Runner/Info.plist 파일을 다음과 같이 수정합니다:

<key>UIBackgroundModes</key>
<array>
    <string>fetch</string>
    <string>remote-notification</string>
</array>

4. FlutterLocalNotification 클래스

Flutter에서 로컬 알림을 관리할 클래스를 정의합니다. 이 클래스는 알림을 초기화하고, 알림 권한을 요청하며, 알림을 보내는 기능을 포함합니다.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class FlutterLocalNotification {
  FlutterLocalNotification._();

  static final FlutterLocalNotificationsPlugin flutterLocalNotificationPlugin = FlutterLocalNotificationsPlugin();

  static Future<void> init() async {
    const AndroidInitializationSettings androidInitializationSettings =
        AndroidInitializationSettings('@mipmap/ic_launcher');

    const DarwinInitializationSettings iosInitializationSettings =
        DarwinInitializationSettings(
            requestAlertPermission: false,
            requestBadgePermission: false,
            requestSoundPermission: false
        );

    final InitializationSettings initializationSettings = InitializationSettings(
      android: androidInitializationSettings,
      iOS: iosInitializationSettings,
    );

    await flutterLocalNotificationPlugin.initialize(
      initializationSettings,
      onSelectNotification: (String? payload) async {
        // 알림을 클릭했을 때의 동작 정의
      },
    );
  }

  static void requestNotificationPermission() {
    flutterLocalNotificationPlugin
        .resolvePlatformSpecificImplementation<IOSFlutterLocalNotificationsPlugin>()
        ?.requestPermissions(alert: true, badge: true, sound: true);
  }

  static Future<void> showNotification() async {
    const AndroidNotificationDetails androidNotificationDetails =
        AndroidNotificationDetails(
            'channel id',
            'channel name',
            channelDescription: 'channel description',
            importance: Importance.max,
            priority: Priority.high,
            showWhen: false
        );

    const NotificationDetails notificationDetails = NotificationDetails(
      android: androidNotificationDetails,
      iOS: DarwinNotificationDetails(badgeNumber: 1),
    );

    await flutterLocalNotificationPlugin.show(
      0,
      'test title',
      'test body',
      notificationDetails,
    );
  }
}

5. main.dart 파일

앱을 초기화하고 로컬 알림을 설정하는 코드를 추가합니다.

import 'package:flutter/material.dart';
import 'package:flutter_lecture/notification.dart'; // 경로를 실제 경로로 변경하세요.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FlutterLocalNotification.init();  // 플러그인 초기화
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    initializeNotifications();
  }

  Future<void> initializeNotifications() async {
    await FlutterLocalNotification.init();
    Future.delayed(
      const Duration(seconds: 3),
      () => FlutterLocalNotification.requestNotificationPermission()
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("알림 목록"),
      ),
      body: Center(
        child: TextButton(
          onPressed: () => FlutterLocalNotification.showNotification(),
          child: const Text("알림보내기")
        )
      ),
    );
  }
}

6. 프로젝트 정리 및 빌드

마지막으로, 프로젝트를 정리하고 다시 빌드합니다.

flutter clean
flutter pub get
flutter run

flutter get_it 패턴

곰돌이쿤 — Mon, 22 Jul 2024 13:45:04 +0900

get_it 패턴은 Flutter 애플리케이션에서 의존성 주입(Dependency Injection)을 간단하고 효율적으로 관리하기 위해 사용되는 패턴입니다. get_it 패키지는 서비스 로케이터(Service Locator) 패턴을 구현하여, 애플리케이션의 상태와 서비스를 전역적으로 접근할 수 있게 합니다.

주요 개념

1. 서비스 로케이터(Service Locator):

• 의존성 주입의 한 형태로, 애플리케이션의 다양한 부분에서 공통된 서비스를 쉽게 가져올 수 있게 합니다.

• 서비스 로케이터를 통해 인스턴스를 전역적으로 관리하고 재사용할 수 있습니다.

2. 의존성 주입(Dependency Injection):

• 클래스 간의 의존성을 주입하여 코드의 재사용성과 테스트 용이성을 높입니다.

• 객체를 직접 생성하는 대신, 필요한 의존성을 외부에서 주입합니다.

주요 기능

• 등록 및 해제:

• 서비스를 등록하고 필요 시 해제할 수 있습니다.

• 싱글톤 및 팩토리:

• 싱글톤 인스턴스와 팩토리 인스턴스를 지원합니다.

• 전역 접근:

• 애플리케이션 어디서나 서비스에 접근할 수 있습니다.

예제

간단한 예제를 통해 get_it 패턴을 사용하는 방법을 살펴보겠습니다.

1. 패키지 추가

pubspec.yaml 파일에 get_it 패키지를 추가합니다.

get_it

2. 서비스 클래스 정의

class CounterService {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }

  void decrement() {
    _count--;
  }
}

3. 서비스 등록

애플리케이션의 초기화 단계에서 서비스를 등록합니다.

import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'counter_service.dart';

void setupLocator() {
  GetIt.I.registerLazySingleton(() => CounterService());
}

void main() {
  setupLocator();
  runApp(MyApp());
}

4. 서비스 사용

애플리케이션의 다양한 부분에서 서비스를 사용합니다.

import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'counter_service.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  final CounterService _counterService = GetIt.I<CounterService>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Get It Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter: ${_counterService.count}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FloatingActionButton(
                  onPressed: _counterService.increment,
                  child: Icon(Icons.add),
                ),
                SizedBox(width: 20),
                FloatingActionButton(
                  onPressed: _counterService.decrement,
                  child: Icon(Icons.remove),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

1. 서비스 등록:

• GetIt.I.registerLazySingleton(() => CounterService());를 사용하여 서비스를 등록합니다. 이는 싱글톤 인스턴스를 생성합니다.

• registerFactory를 사용하면 요청할 때마다 새로운 인스턴스를 생성합니다.

2. 서비스 사용:

• GetIt.I<CounterService>()를 사용하여 등록된 서비스를 가져옵니다.

• 이를 통해 애플리케이션의 어디서나 동일한 서비스 인스턴스를 사용할 수 있습니다.

다른 예시 (실습)

파일구성

locator 패키지

- locator.dart

service 패키지
- album_service.dart

view 패키지
- album_getit_view.dart
메인 메소드
- locator 메소드 호출

album_service.dart

import 'dart:convert';

import '../model/album.dart';
import 'package:http/http.dart' as http;

abstract class AlbumService {
  Future<List<Album>> fetchAlbums();
}


class AlbumServiceImplementation implements AlbumService {
  @override
  Future<List<Album>> fetchAlbums() async {
    final reponse = await http.get(
        Uri.parse("https://jsonplaceholder.typicode.com/albums")
    );
    final List<Album> result = jsonDecode(reponse.body)
        .map<Album>((json) => Album.fromJson(json))
        .toList();

    return result;
  }
  
}

locator.dart

import 'package:flutter_lecture/service/album_service.dart';
import 'package:get_it/get_it.dart';

GetIt locator = GetIt.instance;

initLocator() {
  locator.registerLazySingleton<AlbumService>(() => AlbumServiceImplementation());

}

album_getit_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_lecture/locator/locator.dart';
import 'package:flutter_lecture/model/albums.dart';
import 'package:flutter_lecture/bloc/album_bloc.dart';
import 'package:flutter_lecture/service/album_service.dart';

import '../model/album.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final AlbumService _service = locator<AlbumService>();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("test title"),
      ),
      body: FutureBuilder(
        future: _service.fetchAlbums(),
        builder: (context, snapshot) {
          if(snapshot.hasData) {
            List<Album>? list = snapshot.data;
            return ListView.builder(
                itemCount: list?.length,
                itemBuilder: (context, index) {
                  return Container(
                    padding: const EdgeInsets.all(10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("ID: ${list?[index].id.toString()}"),
                        Text("Title: ${list?[index].title}" )
                      ],
                    ),
                  );
                }
            );
          } else if(snapshot.hasError){
            return Center(
              child: Text(snapshot.error.toString()),
            );
          } else {
            return const Center(
              child: CircularProgressIndicator(
                strokeWidth: 2,
              ),
            );
          }
        },
      ),
    );
  }
}

메인 메소드 :

void main() {
  initLocator();
  runApp(const MyApp());
}

장점

• 간단함:

• 의존성 주입을 간단하게 구현할 수 있습니다.

• 유연성:

• 다양한 유형의 서비스 인스턴스를 등록하고 관리할 수 있습니다.

• 테스트 용이성:

• 의존성을 쉽게 주입할 수 있어 단위 테스트를 쉽게 작성할 수 있습니다.

참고 문서

• Get It 패키지 문서

• Flutter 공식 의존성 주입 가이드

이 정보를 통해 Flutter 애플리케이션에서 get_it 패턴을 사용하여 의존성 주입을 효율적으로 관리할 수 있습니다. get_it 패턴을 활용하면 코드의 구조를 개선하고 유지보수성을 높일 수 있습니다.

flutter provider 패턴

곰돌이쿤 — Mon, 22 Jul 2024 13:18:51 +0900

Provider 패턴은 Flutter 애플리케이션에서 상태 관리를 효율적으로 수행하기 위해 사용되는 패턴입니다. 이 패턴은 InheritedWidget을 기반으로 하며, 상태를 위젯 트리에서 쉽게 공유하고 관리할 수 있게 도와줍니다. Provider 패턴은 Flutter의 공식 상태 관리 솔루션 중 하나로, 단순하고 강력한 상태 관리 방법을 제공합니다.

주요 개념

1. Provider:

• 상태를 제공하는 역할을 합니다. Provider는 다양한 유형이 있으며, ChangeNotifierProvider, Provider, FutureProvider, StreamProvider 등이 있습니다.

2. ChangeNotifier:

• 상태 변경을 알리기 위해 사용되는 클래스입니다. ChangeNotifier를 상속받아 상태를 관리하고, notifyListeners()를 호출하여 리스너들에게 상태 변경을 알립니다.

3. Consumer:

• Provider에서 제공하는 상태를 구독하고, 상태가 변경될 때마다 UI를 업데이트하는 역할을 합니다.

Provider의 유형

1. ChangeNotifierProvider:

• ChangeNotifier를 사용하여 상태를 제공하고 관리합니다.

2. Provider:

• 기본적인 상태 제공자로, 변경되지 않는 데이터를 제공할 때 사용합니다.

3. FutureProvider:

• 비동기 작업의 결과를 제공하는 Provider입니다.

4. StreamProvider:

• 스트림 데이터를 제공하는 Provider입니다.

예제: ChangeNotifierProvider 사용

간단한 카운터 애플리케이션을 Provider 패턴으로 구현한 예제를 살펴보겠습니다.

dependencies 에 추가

provider:

모델 클래스

import 'package:flutter/foundation.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

메인 애플리케이션

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart'; // Counter 모델 클래스 가져오기

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Counter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter: ${counter.count}',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: counter.increment,
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: counter.decrement,
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

주요 구성 요소

1. Counter 모델 클래스:

• ChangeNotifier를 상속받아 상태를 관리합니다.

• increment와 decrement 메서드를 통해 상태를 변경하고, notifyListeners()를 호출하여 리스너에게 상태 변경을 알립니다.

2. MultiProvider:

• 여러 Provider를 동시에 제공할 때 사용합니다. 이 예제에서는 ChangeNotifierProvider를 사용하여 Counter 상태를 제공합니다.

3. Provider.of(context):

• 현재 컨텍스트에서 Provider가 제공하는 상태를 구독합니다. 여기서는 Counter 상태를 구독하여 카운터 값을 업데이트합니다.

4. FloatingActionButton:

• onPressed 콜백에서 counter.increment와 counter.decrement를 호출하여 카운터 값을 증가 및 감소시킵니다.

다른 예시(실습)

필요 파일
provider 패키지
- album_provider.dart
model 패키지
- album.dart

view 패키지

- album_provider_view.dart

album.dart

class Album {
  int? userId;
  int? id;
  String? title;

  Album({this.userId, this.id, this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
    );
  }
}

album_provider.dart

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:http/http.dart' as http;

import '../model/album.dart';

class AlbumProvider with ChangeNotifier {
  final List<Album> _albumList = List.empty(growable: true);

  List<Album> getAlbumList() {
    _fetchAlbums();
    return _albumList;
  }

  void _fetchAlbums() async {
    final response = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/albums"));
    final List<Album> result = jsonDecode(response.body)
        .map<Album>((json) => Album.fromJson(json))
        .toList();
    _albumList.clear();
    _albumList.addAll(result);
    notifyListeners();
  }
}

album_provider_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_lecture/provider/album_provider.dart';
import 'package:provider/provider.dart';

import '../model/album.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  late List<Album> albumList;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AlbumProvider>(
      create: ((context) => AlbumProvider()),
      child: Scaffold(
        appBar: AppBar(
          title: const Text("test title"),
        ),
        body: Consumer<AlbumProvider>(
          builder: (context, provider, child) {
            albumList = provider.getAlbumList();
            return ListView.builder(
                itemCount: albumList.length,
                itemBuilder: (context, index) {
                  return Container(
                    padding: const EdgeInsets.all(10),
                    child: Text("${albumList[index].id} : ${albumList[index].title}"),
                  );
                }
            );
          },
        ),
      ),
    );
  }
}

Provider 패턴의 장점

1. 단순성:

• Provider 패턴은 Flutter의 상태 관리 솔루션 중 가장 단순하면서도 강력한 패턴입니다.

2. 유연성:

• 다양한 유형의 Provider를 제공하여 다양한 상태 관리 요구를 충족할 수 있습니다.

3. 성능 최적화:

• Provider는 효율적으로 상태를 구독하고 업데이트하여 성능을 최적화합니다.

4. 재사용성:

• 상태와 비즈니스 로직을 별도의 클래스로 분리하여 재사용성을 높입니다.

참고 문서

• Provider 패키지 문서

• Flutter 공식 상태 관리 문서

이 정보를 통해 Flutter 애플리케이션에서 Provider 패턴을 효과적으로 사용하여 상태 관리를 수행할 수 있습니다. Provider 패턴을 활용하면 코드의 구조를 개선하고 유지보수성을 높일 수 있습니다.

flutter bloc 패턴 적용

곰돌이쿤 — Mon, 22 Jul 2024 12:02:46 +0900

BLoC(Business Logic Component) 패턴은 Flutter 애플리케이션에서 비즈니스 로직을 UI 코드와 분리하는 데 사용되는 설계 패턴입니다.

이 패턴은 Stream과 Sink를 활용하여 데이터의 흐름을 관리하고, 상태 관리를 효율적으로 수행할 수 있게 합니다.

BLoC 패턴은 Flutter의 공식 상태 관리 솔루션 중 하나로, 재사용성과 테스트 가능성을 높이는 데 기여합니다.

주요 개념

1. BLoC (Business Logic Component):

• 비즈니스 로직을 담당하는 컴포넌트입니다. Stream을 통해 UI에 데이터를 전달하고, Sink를 통해 UI로부터 이벤트를 받습니다.

2. Stream:

• 비동기 데이터의 흐름을 나타내는 Dart의 클래스입니다. BLoC 패턴에서는 상태 변경을 UI로 전달하는 데 사용됩니다.

3. Sink:

• 데이터를 Stream에 전달하는 입력 통로입니다. BLoC 패턴에서는 UI에서 발생한 이벤트를 BLoC로 전달하는 데 사용됩니다.

4. Event:

• UI에서 발생하는 사용자 상호작용을 나타냅니다. 버튼 클릭, 폼 입력 등 다양한 이벤트가 포함됩니다.

5. State:

• UI에서 표시할 데이터를 나타냅니다. BLoC는 상태를 관리하고 Stream을 통해 UI로 전달합니다.

BLoC 패턴의 구성 요소

1. Event 클래스:

• 사용자가 수행하는 동작을 정의합니다.

2. State 클래스:

• 애플리케이션의 상태를 정의합니다.

3. BLoC 클래스:

• 이벤트를 처리하고 상태를 관리하는 로직을 포함합니다.

예제

간단한 카운터 애플리케이션을 BLoC 패턴으로 구현한 예제를 살펴보겠습니다.

Event 클래스

abstract class CounterEvent {}

class Increment extends CounterEvent {}

class Decrement extends CounterEvent {}

State 클래스

class CounterState {
  final int count;

  CounterState(this.count);
}

BLoC 클래스

import 'dart:async';

class CounterBloc {
  final _stateController = StreamController<CounterState>();
  StreamSink<CounterState> get _inCounter => _stateController.sink;
  Stream<CounterState> get counter => _stateController.stream;

  final _eventController = StreamController<CounterEvent>();
  Sink<CounterEvent> get counterEventSink => _eventController.sink;

  CounterBloc() {
    _eventController.stream.listen(_mapEventToState);
  }

  void _mapEventToState(CounterEvent event) {
    if (event is Increment) {
      _inCounter.add(CounterState(_stateController.stream.value.count + 1));
    } else if (event is Decrement) {
      _inCounter.add(CounterState(_stateController.stream.value.count - 1));
    }
  }

  void dispose() {
    _stateController.close();
    _eventController.close();
  }
}

UI 코드

import 'package:flutter/material.dart';
import 'counter_bloc.dart'; // BLoC 파일을 가져옴

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  final CounterBloc _bloc = CounterBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BLoC Counter Example'),
      ),
      body: Center(
        child: StreamBuilder<CounterState>(
          stream: _bloc.counter,
          initialData: CounterState(0),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return CircularProgressIndicator();
            }
            return Text(
              'Counter: ${snapshot.data.count}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              _bloc.counterEventSink.add(Increment());
            },
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              _bloc.counterEventSink.add(Decrement());
            },
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

예시(실습)

패키지 추가

rxdart:
http:

model 부터 생성해줍니다.

class Album {
  int? userId;
  int? id;
  String? title;

  Album({this.userId, this.id, this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
    );
  }
}

import './album.dart';

class Albums {
  late List<Album> albums;

  Albums({required this.albums});

  Albums.fromJSON(List<dynamic> json) {
    albums = List<Album>.empty(growable: true);
    for (dynamic val in json) {
      albums.add(Album.fromJson(val));
    }
  }
}

provider 를 생성해줍니다.

import 'dart:convert';

import 'package:http/http.dart' show Client;
import 'package:flutter_lecture/model/albums.dart';


class AlbumApiProvider {
  Client client = Client();
  
  Future<Albums> fetchAlbumList() async {
    final response = await client
        .get(Uri.parse("https://jsonplaceholder.typicode.com/albums"));

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return Albums.fromJSON(data);
    } else {
      throw Exception("Failed");
    }
  }
}

repository 를 생성합니다.

import 'package:flutter_lecture/data_provider/api_provider.dart';
import 'package:flutter_lecture/model/albums.dart';

class AlbumRepository {

  final AlbumApiProvider _albumApiProvider = AlbumApiProvider();

  Future<Albums> fetchAllAlbums() async => _albumApiProvider.fetchAlbumList();
  
}

bloc 파일을 만들어줍니다.

import 'package:flutter_lecture/repository/ablum_repository.dart';
import 'package:rxdart/rxdart.dart';

import '../model/albums.dart';

class AlbumBloc {
  final AlbumRepository _albumRepository = AlbumRepository();
  final PublishSubject<Albums> _albumFetcher = PublishSubject<Albums>();

  Stream<Albums> get allAlbums => _albumFetcher.stream;

  Future<void> fetchAllAlbums() async {
    Albums albums = await _albumRepository.fetchAllAlbums();
    _albumFetcher.sink.add(albums);
  }

  dispose() {
    _albumFetcher.close();
  }
}

bloc 파일을 적용할 view 파일을 마지막으로 만들어줍니다.

import 'package:flutter/material.dart';
import 'package:flutter_lecture/model/albums.dart';
import 'package:flutter_lecture/bloc/album_bloc.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final AlbumBloc _albumBloc = AlbumBloc();


  @override
  void initState() {
    _albumBloc.fetchAllAlbums();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("test title"),
      ),
      body: StreamBuilder<Albums>(
        stream: _albumBloc.allAlbums,
        builder: (context, snapshot) {
          if(snapshot.hasData) {
            Albums? albumList = snapshot.data;
            return ListView.builder(
              itemCount: albumList?.albums.length,
              itemBuilder: (context, index) {
                return Container(
                  padding: const EdgeInsets.all(10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("ID: ${albumList?.albums[index].id.toString()}"),
                      Text("Title: ${albumList?.albums[index].title}" )
                    ],
                  ),
                );
              }
            );
          } else if(snapshot.hasError){
              return Center(
                child: Text(snapshot.error.toString()),
              );

          } else {
            return const Center(
              child: CircularProgressIndicator(
                strokeWidth: 2,
              ),
            );
          }
        },
      ),
    );
  }
}

BLoC 패턴의 장점

1. UI와 비즈니스 로직의 분리:

• UI 코드와 비즈니스 로직을 명확히 분리하여 코드의 가독성과 유지보수성을 높입니다.

2. 재사용성과 테스트 용이성:

• BLoC 컴포넌트는 독립적으로 동작하므로 다른 프로젝트나 화면에서 재사용할 수 있습니다. 또한, 비즈니스 로직이 UI와 분리되어 있어 단위 테스트가 용이합니다.

3. 비동기 데이터 처리:

• Stream과 Sink를 사용하여 비동기 데이터 처리를 효과적으로 관리할 수 있습니다.

참고 문서

• Bloc 패턴 공식 문서

• Flutter의 상태 관리

• Dart의 Stream 클래스 문서

이 정보를 통해 Flutter 애플리케이션에서 BLoC 패턴을 효과적으로 사용하여 상태 관리를 수행할 수 있습니다. BLoC 패턴을 활용하면 코드의 구조를 개선하고 유지보수성을 높일 수 있습니다.

flutter 리프레쉬 인디케이터

곰돌이쿤 — Mon, 22 Jul 2024 10:23:12 +0900

RefreshIndicator

RefreshIndicator는 Flutter에서 사용자가 목록을 끌어 당겨서 새로 고침(pull-to-refresh) 동작을 수행할 수 있게 하는 위젯입니다. 주로 스크롤 가능한 목록에서 사용되며, 사용자에게 데이터를 새로 고치는 기능을 제공합니다.

주요 속성

child: RefreshIndicator가 감싸는 스크롤 가능한 위젯입니다. 일반적으로 ListView와 같은 위젯이 사용됩니다.
onRefresh: 새로 고침 동작이 발생할 때 호출되는 콜백 함수입니다. 이 함수는 Future<void>를 반환하여 비동기 작업을 수행할 수 있습니다.
color: 인디케이터의 색상을 지정합니다.
backgroundColor: 인디케이터의 배경색을 지정합니다.
displacement: 인디케이터가 표시될 때 위쪽에서 떨어진 거리입니다.
strokeWidth: 인디케이터의 선 두께입니다.

사용 예제

아래는 RefreshIndicator를 사용하여 목록을 새로 고침하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('RefreshIndicator Example'),
        ),
        body: RefreshIndicatorExample(),
      ),
    );
  }
}

class RefreshIndicatorExample extends StatefulWidget {
  @override
  _RefreshIndicatorExampleState createState() => _RefreshIndicatorExampleState();
}

class _RefreshIndicatorExampleState extends State<RefreshIndicatorExample> {
  final List<String> _items = List.generate(20, (index) => 'Item ${index + 1}');

  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 2)); // 2초 동안 대기

    setState(() {
      _items.shuffle(); // 아이템을 섞어서 목록을 새로 고침
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_items[index]),
          );
        },
      ),
    );
  }
}

주요 포인트

RefreshIndicator 사용:
- RefreshIndicator 위젯은 스크롤 가능한 위젯을 감싸서 사용합니다.
- onRefresh 콜백은 데이터를 새로 고침하는 로직을 포함해야 하며, Future<void>를 반환해야 합니다.
데이터 새로 고침:
- onRefresh 콜백 내에서 비동기 작업을 수행하여 데이터를 새로 고칩니다.
- 비동기 작업이 완료되면 setState를 호출하여 UI를 업데이트합니다.
UI 업데이트:
- setState를 사용하여 데이터 변경 사항을 반영하고 UI를 업데이트합니다.

추가 예제: 커스텀 인디케이터

기본적인 사용 예제 외에도 RefreshIndicator의 속성을 사용하여 커스텀 인디케이터를 만들 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom RefreshIndicator Example'),
        ),
        body: CustomRefreshIndicatorExample(),
      ),
    );
  }
}

class CustomRefreshIndicatorExample extends StatefulWidget {
  @override
  _CustomRefreshIndicatorExampleState createState() => _CustomRefreshIndicatorExampleState();
}

class _CustomRefreshIndicatorExampleState extends State<CustomRefreshIndicatorExample> {
  final List<String> _items = List.generate(20, (index) => 'Item ${index + 1}');

  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      _items.shuffle();
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      color: Colors.white,
      backgroundColor: Colors.blue,
      displacement: 40,
      strokeWidth: 3,
      child: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_items[index]),
          );
        },
      ),
    );
  }
}

dio 를 이용한 데이터 가져오기 예시 (실습)

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

import 'product.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Dio dio = Dio();

  Future<List<Product>> getProductData() async {
    try {
      print("데이터 가져오기 시작");
      var response = await dio.get("https://dummyjson.com/products");
      List<Product> products = (response.data['products'] as List)
          .map<Product>((json) => Product.fromJson(json))
          .toList();
      print("데이터 가져오기 완료");
      return products;
    } catch (e) {
      print("오류 발생: $e");
      return []; // 에러 발생 시 빈 리스트 반환
    }
  }

  Future<void> refreshData() async {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("제품 목록"),
      ),
      body: RefreshIndicator(
        onRefresh: refreshData,
        child: FutureBuilder<List<Product>>(
          future: getProductData(),
          builder: (BuildContext context, AsyncSnapshot<List<Product>> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('오류 발생: ${snapshot.error}'));
            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return const Center(child: Text('데이터가 없습니다'));
            } else {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (BuildContext context, int index) {
                  var data = snapshot.data![index];
                  return Container(
                    padding: const EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      border: Border.all(width: 1, color: Colors.black12),
                    ),
                    child: Text("${data.title} (${data.description})"),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}

결론

RefreshIndicator는 Flutter에서 사용자가 목록을 끌어 당겨서 새로 고침 동작을 수행할 수 있게 하는 유용한 위젯입니다. 이 위젯을 사용하면 사용자 경험을 향상시키고, 데이터 업데이트를 쉽게 처리할 수 있습니다. RefreshIndicator를 사용하여 간단한 pull-to-refresh 기능을 구현하고, 다양한 속성을 통해 커스터마이징할 수 있습니다.

참고 문서

RefreshIndicator 클래스 문서

dart 반복문 정리

곰돌이쿤 — Sun, 21 Jul 2024 21:46:03 +0900

Dart의 반복문은 특정 조건이 참일 때까지 또는 특정 횟수만큼 코드를 반복 실행하는 데 사용됩니다. Dart에서 사용할 수 있는 주요 반복문에는 for 문, for-in 문, while 문, do-while 문이 있습니다. 각 반복문과 그 사용법에 대해 설명하겠습니다.

1. for 문

for 문은 반복 횟수가 명확할 때 주로 사용됩니다. 초기화, 조건 검사, 증감식을 한 줄에 작성할 수 있습니다.

void main() {
  // 0부터 4까지 출력
  for (int i = 0; i < 5; i++) {
    print(i);
  }
}

2. for-in 문

for-in 문은 컬렉션(리스트, 셋 등)의 요소를 하나씩 순회할 때 사용됩니다.

void main() {
  var numbers = [1, 2, 3, 4, 5];

  // 각 요소를 출력
  for (var number in numbers) {
    print(number);
  }
}

3. while 문

while 문은 조건이 참인 동안 코드를 반복 실행합니다. 조건이 거짓이 되면 반복을 종료합니다.

void main() {
  int i = 0;

  // i가 5보다 작을 때까지 반복
  while (i < 5) {
    print(i);
    i++;
  }
}

4. do-while 문

do-while 문은 조건을 검사하기 전에 코드를 먼저 한 번 실행한 후, 조건이 참인 동안 반복 실행합니다.

void main() {
  int i = 0;

  // 최소 한 번은 실행 후, i가 5보다 작을 때까지 반복
  do {
    print(i);
    i++;
  } while (i < 5);
}

5. 중첩 반복문

반복문을 중첩하여 사용할 수 있습니다. 이 경우 외부 반복문이 한 번 반복될 때마다 내부 반복문이 완전히 실행됩니다.

void main() {
  // 구구단 출력
  for (int i = 1; i <= 9; i++) {
    for (int j = 1; j <= 9; j++) {
      print('$i * $j = ${i * j}');
    }
  }
}

6. 반복문 제어문

반복문 내에서 반복의 흐름을 제어하기 위해 break와 continue를 사용할 수 있습니다.

break

break 문은 반복문을 즉시 종료합니다.

void main() {
  for (int i = 0; i < 5; i++) {
    if (i == 3) {
      break; // 반복문 종료
    }
    print(i);
  }
}

continue

continue 문은 현재 반복 주기의 나머지 부분을 건너뛰고 다음 반복 주기로 넘어갑니다.

void main() {
  for (int i = 0; i < 5; i++) {
    if (i == 3) {
      continue; // 다음 반복 주기로 건너뜀
    }
    print(i);
  }
}

요약

• for 문: 초기화, 조건 검사, 증감식을 한 줄에 작성하여 반복.

• for-in 문: 컬렉션의 요소를 순회.

• while 문: 조건이 참인 동안 반복.

• do-while 문: 최소 한 번 실행 후 조건이 참인 동안 반복.

• 중첩 반복문: 반복문 내에 다른 반복문을 포함하여 사용.

• break: 반복문을 즉시 종료.

• continue: 현재 반복 주기를 건너뛰고 다음 주기로 넘어감.

dart 조건문 정리

곰돌이쿤 — Sun, 21 Jul 2024 21:38:27 +0900

Dart의 조건문은 프로그램의 흐름을 제어하고 특정 조건에 따라 다른 코드를 실행하는 데 사용됩니다.

주요 조건문에는 if, else if, else, switch 문이 있습니다. 각 조건문과 그 사용법에 대해 설명하겠습니다.

1. if 문

if 문은 주어진 조건이 true일 때 코드를 실행합니다.

void main() {
  int number = 10;

  if (number > 5) {
    print('Number is greater than 5');
  }
}

2. if-else 문

if-else 문은 if 조건이 false일 때 else 블록의 코드를 실행합니다.

void main() {
  int number = 3;

  if (number > 5) {
    print('Number is greater than 5');
  } else {
    print('Number is not greater than 5');
  }
}

3. else if 문

else if 문은 여러 조건을 검사할 때 사용됩니다. 첫 번째 if 조건이 false일 때, 그 다음 else if 조건을 검사합니다.

void main() {
  int number = 7;

  if (number > 10) {
    print('Number is greater than 10');
  } else if (number > 5) {
    print('Number is greater than 5 but less than or equal to 10');
  } else {
    print('Number is 5 or less');
  }
}

4. 중첩 if 문

if 문은 다른 if 문 안에 중첩될 수 있습니다. 이는 복잡한 조건을 검사할 때 유용합니다.

void main() {
  int number = 8;

  if (number > 5) {
    if (number < 10) {
      print('Number is between 5 and 10');
    } else {
      print('Number is 10 or greater');
    }
  } else {
    print('Number is 5 or less');
  }
}

5. 삼항 연산자

삼항 연산자는 간단한 if-else 문을 한 줄로 표현할 수 있습니다.

void main() {
  int number = 4;
  String result = number > 5 ? 'Number is greater than 5' : 'Number is not greater than 5';
  print(result);
}

6. switch 문

switch 문은 하나의 변수에 대한 여러 조건을 검사할 때 사용됩니다. 각 조건은 case 키워드로 표시됩니다.

void main() {
  String grade = 'B';

  switch (grade) {
    case 'A':
      print('Excellent!');
      break;
    case 'B':
      print('Good!');
      break;
    case 'C':
      print('Fair');
      break;
    case 'D':
      print('Poor');
      break;
    default:
      print('Invalid grade');
  }
}

7. switch 문에서 fall-through 방지

Dart에서는 case 블록이 끝나면 break 문을 사용하여 switch 문을 종료해야 합니다. 그렇지 않으면 다음 case 블록으로 넘어가는 fall-through가 발생하지 않습니다.

void main() {
  int number = 2;

  switch (number) {
    case 1:
      print('One');
      break;
    case 2:
      print('Two');
      break;
    case 3:
      print('Three');
      break;
    default:
      print('Other number');
  }
}

요약

• if 문: 조건이 참일 때 코드 실행.

• if-else 문: 조건이 참이면 if 블록, 거짓이면 else 블록 실행.

• else if 문: 여러 조건 검사.

• 중첩 if 문: 복잡한 조건 검사.

• 삼항 연산자: 간단한 if-else 문을 한 줄로 표현.

• switch 문: 하나의 변수에 대한 여러 조건 검사.

dart collection 설명 및 예시

곰돌이쿤 — Sun, 21 Jul 2024 16:35:42 +0900

Dart의 컬렉션(Collection)은 여러 요소를 관리하고 조작할 수 있는 데이터 구조를 제공합니다.

주요 컬렉션 타입으로는 리스트(List), 셋(Set), 맵(Map)이 있습니다.

각각의 컬렉션은 다양한 용도로 사용될 수 있으며, Dart는 이러한 컬렉션을 쉽게 사용할 수 있도록 다양한 메서드와 연산자를 제공합니다.

1. List

리스트(List)는 순서가 있는 요소의 집합으로, 배열과 유사합니다. 요소의 순서를 유지하며, 동일한 값을 중복해서 가질 수 있습니다.

생성 및 초기화

void main() {
  // 빈 리스트 생성
  List<int> numbers = [];

  // 초기값을 가지는 리스트 생성
  List<String> fruits = ['Apple', 'Banana', 'Orange'];

  // 리스트에 요소 추가
  numbers.add(1);
  numbers.add(2);
  numbers.add(3);

  // 인덱스를 사용하여 요소 접근
  print(fruits[0]); // Apple

  // 리스트 길이
  print(fruits.length); // 3
}

주요 메서드

void main() {
  List<String> fruits = ['Apple', 'Banana', 'Orange'];

  // 요소 추가
  fruits.add('Grape');

  // 여러 요소 추가
  fruits.addAll(['Mango', 'Pineapple']);

  // 요소 제거
  fruits.remove('Banana');

  // 인덱스로 요소 제거
  fruits.removeAt(1);

  // 조건에 맞는 모든 요소 제거
  fruits.removeWhere((fruit) => fruit.startsWith('A'));

  // 요소 포함 여부 확인
  print(fruits.contains('Orange')); // true

  // 요소의 인덱스 찾기
  print(fruits.indexOf('Mango')); // 2
}

2. Set

셋(Set)은 순서가 없는 고유한 요소의 집합입니다. 동일한 값을 중복해서 가질 수 없습니다.

생성 및 초기화

void main() {
  // 빈 셋 생성
  Set<int> numbers = {};

  // 초기값을 가지는 셋 생성
  Set<String> fruits = {'Apple', 'Banana', 'Orange'};

  // 셋에 요소 추가
  numbers.add(1);
  numbers.add(2);
  numbers.add(3);

  // 요소 추가 (중복된 요소는 추가되지 않음)
  fruits.add('Apple');

  // 셋 길이
  print(fruits.length); // 3
}

주요 메서드

void main() {
  Set<String> fruits = {'Apple', 'Banana', 'Orange'};

  // 요소 추가
  fruits.add('Grape');

  // 여러 요소 추가
  fruits.addAll({'Mango', 'Pineapple'});

  // 요소 제거
  fruits.remove('Banana');

  // 조건에 맞는 모든 요소 제거
  fruits.removeWhere((fruit) => fruit.startsWith('A'));

  // 요소 포함 여부 확인
  print(fruits.contains('Orange')); // true
}

3. Map

맵(Map)은 키-값 쌍으로 이루어진 컬렉션입니다. 각 키는 고유하며, 키를 통해 값에 접근할 수 있습니다.

생성 및 초기화

void main() {
  // 빈 맵 생성
  Map<String, int> ages = {};

  // 초기값을 가지는 맵 생성
  Map<String, int> scores = {
    'Alice': 90,
    'Bob': 85,
    'Charlie': 95,
  };

  // 맵에 요소 추가
  ages['John'] = 25;
  ages['Doe'] = 30;

  // 키를 사용하여 값 접근
  print(scores['Alice']); // 90

  // 맵 길이
  print(scores.length); // 3
}

주요 메서드

void main() {
  Map<String, int> scores = {
    'Alice': 90,
    'Bob': 85,
    'Charlie': 95,
  };

  // 요소 추가
  scores['David'] = 88;

  // 요소 제거
  scores.remove('Bob');

  // 모든 키 가져오기
  print(scores.keys); // (Alice, Charlie, David)

  // 모든 값 가져오기
  print(scores.values); // (90, 95, 88)

  // 특정 키의 값 업데이트
  scores.update('Alice', (value) => 92);

  // 키 포함 여부 확인
  print(scores.containsKey('Charlie')); // true

  // 값 포함 여부 확인
  print(scores.containsValue(88)); // true
}

결론

Dart의 컬렉션은 데이터를 저장하고 조작하는 데 매우 유용한 도구입니다. 리스트(List)는 순서가 있는 요소의 집합을 다루며, 셋(Set)은 고유한 요소의 집합을 다루고, 맵(Map)은 키-값 쌍을 다룹니다. 이러한 컬렉션을 사용하여 데이터를 효율적으로 관리하고 처리할 수 있습니다.

참고 문서

• Dart List 클래스 문서

• Dart Set 클래스 문서

• Dart Map 클래스 문서

• Dart Language Tour - Collections

dart 연산자

곰돌이쿤 — Sun, 21 Jul 2024 16:16:04 +0900

Dart에서는 다양한 연산자를 제공하여 변수와 값에 대해 다양한 작업을 수행할 수 있습니다.

연산자는 크게 다음과 같은 범주로 나눌 수 있습니다

1. 산술 연산자

2. 증감 연산자

3. 관계 연산자

4. 논리 연산자

5. 비트 연산자

6. 할당 연산자

7. 조건 연산자

8. 형 변환 연산자

9. 기타 연산자

1. 산술 연산자

산술 연산자는 기본적인 산술 계산을 수행합니다.

• + (덧셈)

• - (뺄셈)

• * (곱셈)

• / (나눗셈)

• ~/ (몫 연산)

• % (나머지 연산)

void main() {
  int a = 10;
  int b = 3;

  print(a + b); // 13
  print(a - b); // 7
  print(a * b); // 30
  print(a / b); // 3.3333333333333335
  print(a ~/ b); // 3
  print(a % b); // 1
}

2. 증감 연산자

증감 연산자는 변수의 값을 증가시키거나 감소시킵니다.

• ++a (전위 증가)

• a++ (후위 증가)

• --a (전위 감소)

• a-- (후위 감소)

void main() {
  int a = 10;

  print(++a); // 11
  print(a++); // 11
  print(a); // 12
  print(--a); // 11
  print(a--); // 11
  print(a); // 10
}

3. 관계 연산자

관계 연산자는 두 피연산자 간의 관계를 비교합니다. 결과는 boolean 값입니다.

• == (같다)

• != (같지 않다)

• > (크다)

• < (작다)

• >= (크거나 같다)

• <= (작거나 같다)

void main() {
  int a = 10;
  int b = 3;

  print(a == b); // false
  print(a != b); // true
  print(a > b); // true
  print(a < b); // false
  print(a >= b); // true
  print(a <= b); // false
}

4. 논리 연산자

논리 연산자는 boolean 값에 대해 논리 연산을 수행합니다.

• && (그리고)

• || (또는)

• ! (부정)

void main() {
  bool a = true;
  bool b = false;

  print(a && b); // false
  print(a || b); // true
  print(!a); // false
  print(!b); // true
}

5. 비트 연산자

비트 연산자는 비트 수준에서 연산을 수행합니다.

• & (AND)

• | (OR)

• ^ (XOR)

• ~ (NOT)

• << (왼쪽 시프트)

• >> (오른쪽 시프트)

void main() {
  int a = 10; // 1010
  int b = 3; // 0011

  print(a & b); // 2 (0010)
  print(a | b); // 11 (1011)
  print(a ^ b); // 9 (1001)
  print(~a); // -11 (2의 보수)
  print(a << 1); // 20 (10100)
  print(a >> 1); // 5 (0101)
}

6. 할당 연산자

할당 연산자는 변수에 값을 할당하거나 특정 연산을 수행한 후 할당합니다.

• = (할당)

• += (더한 후 할당)

• -= (뺀 후 할당)

• *= (곱한 후 할당)

• /= (나눈 후 할당)

• ~/= (몫을 구한 후 할당)

• %= (나머지를 구한 후 할당)

void main() {
  int a = 10;
  int b = 3;

  a += b; // a = a + b
  print(a); // 13

  a -= b; // a = a - b
  print(a); // 10

  a *= b; // a = a * b
  print(a); // 30

  a /= b; // a = a / b
  print(a); // 10.0

  a ~/= b; // a = a ~/ b
  print(a); // 3

  a %= b; // a = a % b
  print(a); // 0
}

7. 조건 연산자

조건 연산자는 특정 조건에 따라 값을 선택합니다.

• condition ? expr1 : expr2 (삼항 연산자)

• ?? (널 병합 연산자)

void main() {
  int a = 10;
  int b = 3;

  var result = a > b ? 'a가 크다' : 'b가 크다';
  print(result); // a가 크다

  String? name;
  String userName = name ?? 'Guest';
  print(userName); // Guest
}

8. 형 변환 연산자

형 변환 연산자는 객체의 타입을 변환하거나 확인합니다.

• as (형 변환)

• is (타입 검사)

• is! (타입 검사 - 부정)

void main() {
  dynamic a = 10;

  // 타입 검사
  if (a is int) {
    print('a는 int 타입입니다.');
  }

  // 타입 검사 - 부정
  if (a is! String) {
    print('a는 String 타입이 아닙니다.');
  }

  // 형 변환
  var b = a as int;
  print(b); // 10
}

9. 기타 연산자

• [] (리스트 및 맵 접근 연산자)

• . (멤버 접근 연산자)

• ?. (널 안전 멤버 접근 연산자)

• .. (계단식 표기법)

void main() {
  List<int> numbers = [1, 2, 3];
  Map<String, int> ages = {'John': 25, 'Doe': 30};

  // 리스트 및 맵 접근
  print(numbers[0]); // 1
  print(ages['John']); // 25

  // 멤버 접근
  String text = 'Hello';
  print(text.length); // 5

  // 널 안전 멤버 접근
  String? nullableText;
  print(nullableText?.length); // null

  // 계단식 표기법
  var buffer = StringBuffer()
    ..write('Hello')
    ..write(' ')
    ..write('World');
  print(buffer.toString()); // Hello World
}

결론

Dart 연산자는 다양한 작업을 수행할 수 있도록 돕는 중요한 도구입니다. 연산자의 올바른 사용법을 익히면 코드의 효율성과 가독성을 높일 수 있습니다. 이 문서에서 설명한 다양한 연산자를 잘 활용하여 더욱 효과적인 Dart 프로그래밍을 수행할 수 있습니다.

참고 문서

• Dart Language Tour - Operators

Vuejs 에서 환경 변수 설정 방법

곰돌이쿤 — Sat, 20 Jul 2024 21:51:57 +0900

Vue.js 프로젝트에서는 환경 변수를 사용하여 개발, 테스트, 프로덕션 환경에 따라 설정을 다르게 할 수 있습니다.

Vue CLI를 사용하면 이러한 환경 변수를 쉽게 설정하고 관리할 수 있습니다.

아래에 환경 변수를 설정하고 사용하는 방법을 단계별로 정리하겠습니다.

1. 환경 변수 파일 설정

Vue CLI를 사용하면 .env 파일을 통해 환경 변수를 설정할 수 있습니다.

Vue CLI는 프로젝트 루트 디렉토리에 위치한 .env 파일을 자동으로 로드합니다.

환경 변수 파일 종류

• .env: 모든 환경에 적용되는 기본 환경 변수.

• .env.local: 모든 환경에 적용되지만, 버전 관리를 하지 않는 로컬 환경 변수.

• .env.development: 개발 환경에 적용되는 환경 변수.

• .env.development.local: 개발 환경에 적용되지만, 버전 관리를 하지 않는 로컬 환경 변수.

• .env.production: 프로덕션 환경에 적용되는 환경 변수.

• .env.production.local: 프로덕션 환경에 적용되지만, 버전 관리를 하지 않는 로컬 환경 변수.

예시: 환경 변수 파일 생성

프로젝트 루트에 .env.development와 .env.production 파일을 생성합니다.

.env.development

VUE_APP_API_URL=http://localhost:3000
VUE_APP_DEBUG=true

.env.production

VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=false

2. 환경 변수 사용

Vue 애플리케이션에서 환경 변수를 사용하려면 process.env 객체를 통해 접근할 수 있습니다. Vue CLI는 VUE_APP_ 접두사가 붙은 환경 변수만을 인식하므로, 모든 환경 변수 이름은 VUE_APP_으로 시작해야 합니다.

예시: 환경 변수 사용

src/main.js 파일에서 환경 변수를 사용하는 방법을 설명합니다.

src/main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

console.log('API URL:', process.env.VUE_APP_API_URL);
console.log('Debug mode:', process.env.VUE_APP_DEBUG);

new Vue({
  render: h => h(App),
}).$mount('#app');

예시: 컴포넌트에서 환경 변수 사용

컴포넌트 내에서 환경 변수를 사용하는 방법도 동일합니다.

src/components/ExampleComponent.vue

<template>
  <div>
    <p>API URL: {{ apiUrl }}</p>
    <p>Debug Mode: {{ debugMode }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL,
      debugMode: process.env.VUE_APP_DEBUG
    };
  }
};
</script>

3. 환경 변수의 동작 확인

환경 변수 파일을 설정하고, 개발 또는 프로덕션 모드로 애플리케이션을 실행하여 환경 변수가 제대로 동작하는지 확인합니다.

개발 모드 실행

npm run serve

• npm run serve 명령어는 .env.development 파일의 환경 변수를 로드합니다.

프로덕션 모드 실행

npm run build

• npm run build 명령어는 .env.production 파일의 환경 변수를 로드합니다.

4. 환경 변수 파일 버전 관리

.env 파일과 .env.production 파일은 일반적으로 버전 관리 시스템에 포함됩니다.

그러나 로컬 환경 변수 파일(.env.local, .env.development.local, .env.production.local)은 버전 관리에서 제외하는 것이 좋습니다.

예시: .gitignore 파일 설정

.gitignore

# local env files
.env.local
.env.*.local

요약

1. 환경 변수 파일 설정: 프로젝트 루트에 .env 파일을 생성하여 환경 변수를 정의합니다. 환경에 따라 .env.development, .env.production 파일을 사용합니다.

2. 환경 변수 사용: process.env 객체를 통해 환경 변수에 접근합니다. 모든 환경 변수는 VUE_APP_ 접두사로 시작해야 합니다.

3. 환경 변수의 동작 확인: 개발 또는 프로덕션 모드로 애플리케이션을 실행하여 환경 변수가 올바르게 로드되는지 확인합니다.

4. 환경 변수 파일 버전 관리: .env.local, .env.development.local, .env.production.local 파일은 버전 관리에서 제외합니다.

Vue.js 프로젝트 설정 - vue cli 시작하기

곰돌이쿤 — Sat, 20 Jul 2024 21:43:36 +0900

Vue.js 프로젝트를 설정하는 과정은 Vue CLI를 사용하면 매우 간단하고 효율적입니다.

아래에 Vue CLI를 사용하여 프로젝트를 설정하는 단계별 가이드를 제공하겠습니다.

1. 개발 환경 설정

Vue.js 프로젝트를 시작하기 전에 Node.js와 Vue CLI가 설치되어 있어야 합니다.

• Node.js 설치:

• Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드하고 설치합니다.

• 설치가 완료되면, 터미널에서 Node.js와 npm(Node Package Manager)의 버전을 확인합니다.

node -v
npm -v

• Vue CLI 설치:

• Vue CLI는 Vue.js 애플리케이션을 생성하고 관리하는 데 도움을 주는 명령줄 도구입니다.

• npm을 사용하여 Vue CLI를 전역 설치합니다.

npm install -g @vue/cli

• Vue CLI 설치가 완료되면, 터미널에서 버전을 확인합니다.

vue --version

2. 새로운 Vue 프로젝트 생성

Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다.

• 프로젝트 생성 명령어:

vue create my-project

• 프로젝트 생성 과정:

• 프로젝트 이름을 지정하고, Vue CLI에서 제공하는 기본 템플릿을 선택하거나, 커스텀 설정을 선택할 수 있습니다.

• 기본 템플릿을 선택할 경우, “Default (Vue 2)” 또는 “Default (Vue 3)” 중 하나를 선택합니다.

• 커스텀 설정을 선택할 경우, 필요한 기능들을 선택할 수 있습니다. (예: Babel, TypeScript, Vue Router, Vuex, CSS Pre-processors, Linter/Formatter, Unit Testing, E2E Testing)

3. 프로젝트 디렉토리 구조

프로젝트 생성이 완료되면, 해당 디렉토리로 이동하여 프로젝트 구조를 확인합니다.

my-project/
├── node_modules/       // 프로젝트의 의존성 모듈들이 설치되는 디렉토리
├── public/             // 정적 파일들이 위치하는 디렉토리
│   └── index.html      // 애플리케이션의 기본 HTML 파일
├── src/                // 소스 코드가 위치하는 디렉토리
│   ├── assets/         // 이미지, 스타일 등의 정적 파일
│   ├── components/     // Vue 컴포넌트들이 위치하는 디렉토리
│   ├── App.vue         // 루트 컴포넌트
│   ├── main.js         // 애플리케이션의 진입 파일
├── .gitignore          // Git에서 무시할 파일들을 지정하는 파일
├── babel.config.js     // Babel 설정 파일
├── package.json        // 프로젝트 메타데이터 및 의존성 정보
├── README.md           // 프로젝트 설명서

4. 프로젝트 실행

프로젝트가 생성되면, 로컬 개발 서버를 실행하여 애플리케이션을 확인할 수 있습니다.

• 개발 서버 실행:

cd my-project
npm run serve

• npm run serve 명령어를 실행하면, 로컬 개발 서버가 시작되고, 애플리케이션을 브라우저에서 확인할 수 있습니다. 일반적으로 http://localhost:8080에서 실행됩니다.

5. 주요 파일 및 설정

프로젝트의 주요 파일과 설정에 대해 이해하는 것이 중요합니다.

• package.json:

• 프로젝트의 메타데이터 및 의존성 정보를 포함합니다.

• 스크립트 섹션에서 다양한 명령어를 정의할 수 있습니다.

• 예:

{
  "name": "my-project",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.0"
  }
}

• main.js:

• Vue 애플리케이션의 진입 파일로, Vue 인스턴스를 생성하고, 루트 컴포넌트를 마운트합니다.

• 예:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

• App.vue:

• 루트 컴포넌트로, 애플리케이션의 주요 구조를 정의합니다.

• 예:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

요약

1. 개발 환경 설정: Node.js와 Vue CLI 설치.

2. 새로운 Vue 프로젝트 생성: Vue CLI를 사용하여 프로젝트 생성.

3. 프로젝트 디렉토리 구조: 프로젝트의 기본 구조 이해.

4. 프로젝트 실행: 로컬 개발 서버를 통해 애플리케이션 확인.

5. 주요 파일 및 설정: package.json, main.js, App.vue 등의 주요 파일 이해.

Vue.js 소개 및 기본 개념

곰돌이쿤 — Fri, 19 Jul 2024 18:20:12 +0900

1. Vue.js 소개

Vue.js는 경량의 점진적 프레임워크로, 사용자 인터페이스를 구축하는 데 사용됩니다. Vue는 주요 라이브러리 부분만으로도 충분히 활용할 수 있지만, 복잡한 애플리케이션을 개발할 때는 다양한 도구와 라이브러리들을 포함하는 생태계를 제공합니다.

주요 특징

• 컴포넌트 기반 구조: 재사용 가능한 컴포넌트를 통해 복잡한 UI를 효율적으로 관리할 수 있습니다.

• 반응형 데이터 바인딩: 데이터와 DOM이 자동으로 동기화되어 개발자 경험을 향상시킵니다.

• 유연성: 프로젝트의 크기와 복잡도에 맞게 필요한 기능만 선택적으로 사용할 수 있습니다.

• 친화적인 학습 곡선: 기본적인 HTML, CSS, JavaScript 지식만으로 쉽게 학습할 수 있습니다.

2. Vue.js 기본 개념

2.1 Vue 인스턴스

Vue 애플리케이션의 모든 것은 Vue 인스턴스에서 시작합니다. Vue 인스턴스를 생성하여 특정 DOM 요소에 연결하고, 데이터와 메소드를 정의합니다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

2.2 템플릿 문법

Vue는 HTML 기반 템플릿 문법을 사용하여 DOM에 데이터를 바인딩합니다. Vue의 템플릿 문법은 선언적 렌더링을 가능하게 합니다.

• Mustache 구문: 데이터를 HTML로 바인딩하는 구문입니다.

<span>{{ message }}</span>

• 디렉티브: v- 접두사를 사용하는 특수 속성으로, HTML 요소에 Vue의 반응형 기능을 제공합니다.

• v-bind: 속성 바인딩

• v-model: 양방향 데이터 바인딩

• v-if, v-else, v-show: 조건부 렌더링

• v-for: 리스트 렌더링

2.3 데이터 바인딩과 이벤트 처리

Vue는 데이터 바인딩과 이벤트 처리를 통해 UI와 데이터의 동기화를 쉽게 할 수 있습니다.

• 데이터 바인딩: Vue 인스턴스의 데이터 속성을 HTML에 바인딩합니다.

<span>{{ message }}</span>

• 이벤트 처리: v-on 디렉티브를 사용하여 이벤트를 처리할 수 있습니다.

<button v-on:click="reverseMessage">Reverse Message</button>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

2.4 컴포넌트

컴포넌트는 Vue의 핵심 기능으로, 재사용 가능한 UI 블록을 생성합니다. 컴포넌트를 통해 복잡한 애플리케이션을 모듈화하여 관리할 수 있습니다.

• 전역 등록:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

• 로컬 등록:

var Child = {
  template: '<div>A custom component!</div>'
};

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  }
});

2.5 Vue 인스턴스의 생명주기

Vue 인스턴스는 생성부터 소멸까지 여러 생명주기 단계를 거칩니다. 각 단계에서 특정 이벤트가 발생하며, 이 이벤트를 통해 특정 시점에 로직을 실행할 수 있습니다.

• 생명주기 훅: created, mounted, updated, destroyed 등 다양한 훅을 통해 애플리케이션의 생명주기 동안 특정 작업을 수행할 수 있습니다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function () {
    console.log('Vue instance is created');
  }
});

요약

• Vue 인스턴스: Vue 애플리케이션의 기본 단위로, 데이터와 DOM 요소를 연결합니다.

• 템플릿 문법: 선언적 렌더링을 위한 HTML 기반 문법입니다.

• 데이터 바인딩: Vue의 반응형 데이터 바인딩으로 데이터와 UI를 동기화합니다.

• 컴포넌트: 재사용 가능한 UI 블록을 통해 애플리케이션을 모듈화합니다.

• 생명주기: Vue 인스턴스의 생성부터 소멸까지의 단계로, 각 단계에서 특정 로직을 실행할 수 있습니다.

구글 로그인 google oauth2 - 프론트 및 백엔드 별도

곰돌이쿤 — Fri, 19 Jul 2024 17:35:25 +0900

1. Google Cloud Console 접속:

https://console.cloud.google.com/ 에 접속합니다.
Google 계정으로 로그인합니다.

2. 프로젝트 선택 또는 생성:

기존 프로젝트가 있다면 선택합니다.
새 프로젝트를 만들려면 상단의 프로젝트 선택 드롭다운 메뉴에서 "새 프로젝트"를 선택합니다.

3. API 및 서비스 대시보드로 이동:

왼쪽 메뉴에서 "API 및 서비스"를 선택합니다.

4. OAuth 동의 화면 설정:

왼쪽 메뉴에서 "OAuth 동의 화면"을 선택합니다.
외부 또는 내부 사용자 유형을 선택하고 "만들기"를 클릭합니다.
필요한 정보를 입력하고 저장합니다.

extrenal 을 사용해줍니다.

앱 이름 및 연락처만 등록 후 [저장 후 계속]

[저장 후 계속]

테스트 할 계정을 추가해주세요.
테스트 user 의 경우 오픈전에 설정해주어야 계정 테스트가 가능합니다.

유저 추가후 [저장 후 계속]

위 과정까지 입력해주고 넘어갑니다.

여기까지 OAuth 동의 화면 완료

5. 사용자 인증 정보 생성:

왼쪽 메뉴에서 "사용자 인증 정보"를 선택합니다.
"사용자 인증 정보 만들기" > "OAuth 클라이언트 ID"를 클릭합니다.

[상단에 사용자 인증 정보 만들기] [OAuth 클라이언트 ID] 버튼 클릭

애플리케이션 유형 선택:

"애플리케이션 유형"에서 "웹 애플리케이션"을 선택합니다.

애플리케이션 정보 입력:

이름을 입력합니다 (예: "PopupGo Web Client").
"승인된 JavaScript 원본"에 개발 서버 URL을 추가합니다 (예: http://localhost:5173). -> 프론트
"승인된 리디렉션 URI"에도 개발 서버 URL을 추가합니다 (예: http://localhost:5173/oauth2/callback). -> 인증 후 redirect 할 주소. 해당 리다이렉트 파라미터에 access_token 을 받아올 수 있음. - 필자는 프론트 리다이렉트로 처리함.
실제 배포 시에는 프로덕션 URL도 추가해야 합니다.

리다이렉션 URI 까지 입력 후 [만들기] 버튼 클릭

잘려진 화면 우측에 id 및 비밀번호가 보입니다.

클라이언트 ID 확인:
- 생성된 클라이언트 ID가 표시됩니다. 이것이 YOUR_GOOGLE_CLIENT_ID 대신 사용할 값입니다.
클라이언트 ID 보관:
- 이 클라이언트 ID를 안전하게 보관하세요.
- 언제든 "사용자 인증 정보" 페이지에서 다시 확인할 수 있습니다.

보안 주의사항:

클라이언트 ID는 공개될 수 있는 정보이지만, 클라이언트 시크릿은 절대 공개되어서는 안 됩니다.
프로덕션 환경에서는 클라이언트 ID를 환경 변수로 관리하는 것이 좋습니다.

이렇게 얻은 클라이언트 ID를 로그인 버튼 있는 파일의 YOUR_GOOGLE_CLIENT_ID 부분에 붙여넣으면 됩니다. 예를 들어:

로그인 버튼 클릭시 메소드

loginWithGoogle() {
      const clientId = '~~~~.apps.googleusercontent.com'; // Replace with your actual client ID
      const redirectUri = 'http://localhost:5173/oauth2/callback'; // The URL where you want to handle the response
      const scope = 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile';
      const responseType = 'token';

      const authUrl = `https://accounts.google.com/o/oauth2/auth?` +
                      `client_id=${clientId}&` +
                      `redirect_uri=${redirectUri}&` +
                      `response_type=${responseType}&` +
                      `scope=${scope}`;

      window.location.href = authUrl;
    }

해당 메소드를 실행하면 구글 로그인 할 수 있는 계정이 나옵니다.

계속을 누르면 링크가 이동 됩니다.
여기서 리다이렉트를 서버 api 로 받아도 되고, 다시 프론트로 받고 백엔드로 다시 요청해서 처리해도 됩니다.
저는 리다이렉트 url 을 프론트로 했기 때문에 해당 프론트 페이지에서 토큰을 추출 후 서버로 요청했습니다.

프론트 리다이렉트 url
http://localhost:5173/oauth2/callback
해당 경로로 프론트 페이지를 만들어 줍니다.

해당 리다이렉트 페이지로 오면 토큰 추출 후 백엔드 api 를 호출해줍니다.

handleOAuth2Callback() {
    const hashParams = new URLSearchParams(window.location.hash.substring(1));
    const accessToken = hashParams.get('access_token');
    console.log(accessToken)
    if (accessToken) {
      fetch('http://localhost:8080/api/oauth2/google', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ token: accessToken })
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          localStorage.setItem('jwt', data.jwt); // JWT 토큰을 로컬 스토리지에 저장
          this.$router.push('/home');
        } else {
          alert('Authentication failed');
        }
      });
    } else {
      alert('Failed to get access token from URL');
    }
  }

응답 후 처리 방식은 각자 코드에 맞게 수정해주시면 됩니다.

그리고 프론트 리다이렉트 페이지에서 요청하는 백엔드 api 호출하면 됩니다.
해당 백엔드 api 에서는 가져온 토큰으로 서버에서 구글 토큰에 해당하는 유저정보를 가지고 옵니다.

@Slf4j
@RestController
@CrossOrigin(origins = "*")
@RequestMapping("/api/oauth2")
public class OAuth2Controller {

    @PostMapping("/google")
    public ResponseEntity<?> googleLogin(@RequestBody Map<String, String> body) {
        log.info("start google login");
        String token = body.get("token");
        log.info("Received token: {}", token);
        String url = "https://www.googleapis.com/oauth2/v3/tokeninfo?access_token=" + token;
        RestTemplate restTemplate = new RestTemplate();
        try {
            log.info("Requesting token info from Google API");
            Map<String, Object> tokenInfo = restTemplate.getForObject(url, Map.class);
            log.info("Token info received: {}", tokenInfo);
            String email = (String) tokenInfo.get("email");
            log.info(email);
            // 사용자 정보를 통해 인증 및 세션 관리 로직 추가
            return ResponseEntity.ok(Map.of("success", true, "email", email));
        } catch (Exception e) {
            log.error("Error during Google login", e);
            return ResponseEntity.status(401).body(Map.of("success", false, "error", e.getMessage()));
        }
    }
}

security 가 적용되어 있다면 해당 api 허용되게 수정해주시면 됩니다.

.requestMatchers("/api/oauth2/**").permitAll()

혹여나 안된다면 controller 에 cors 허용 되어있는지 확인해주시면 됩니다.

위의 코드로 작성해준다면 백엔드 api 에서 oauth 라이브러리를 import 하지 않아도 됩니다.

Dart에서 변수 초기화 null Safety 와 late 키워드

곰돌이쿤 — Thu, 18 Jul 2024 14:45:58 +0900

변수의 초기화는 변수에 값을 할당하여 사용할 준비를 하는 과정입니다.

Dart에서는 변수를 선언할 때 초기화하지 않으면 기본값이 할당되지만, 명시적으로 초기화하는 것이 좋습니다.

이는 코드의 명확성을 높이고, 런타임 오류를 방지할 수 있습니다.

Dart에서 변수 초기화

1. 기본 초기화

변수를 선언할 때 초기값을 바로 할당할 수 있습니다.

void main() {
  int number = 10;       // 정수형 변수 초기화
  double decimal = 3.14; // 실수형 변수 초기화
  String text = "Hello"; // 문자열 변수 초기화
  bool isTrue = true;    // 불리언 변수 초기화

  print(number);  // 10
  print(decimal); // 3.14
  print(text);    // Hello
  print(isTrue);  // true
}

2. Null Safety와 late 키워드

Dart의 Null Safety 기능을 사용하면 변수를 선언할 때 초기화를 강제할 수 있습니다. late 키워드를 사용하면 변수를 나중에 초기화할 수 있습니다.

void main() {
  late String description;

  description = "This is a description"; // 나중에 초기화
  print(description); // This is a description
}

3. final과 const

final과 const 키워드를 사용하면 상수 값을 초기화할 수 있습니다. final은 런타임에 초기화할 수 있지만, const는 컴파일 타임에 초기화해야 합니다.

void main() {
  final int number = 42;       // 런타임 상수
  const double pi = 3.14159;   // 컴파일 타임 상수

  print(number); // 42
  print(pi);     // 3.14159
}

4. 동적 타입 변수

Dart에서는 var, dynamic 키워드를 사용하여 동적 타입의 변수를 선언하고 초기화할 수 있습니다.

void main() {
  var number = 10;          // Dart가 타입을 추론 (int)
  dynamic text = "Hello";   // 동적 타입, 초기값에 따라 타입이 결정됨

  print(number); // 10
  print(text);   // Hello

  text = 42;     // dynamic 타입이므로 다른 타입의 값 할당 가능
  print(text);   // 42
}

변수 초기화의 중요성

1. 명확성: 변수를 선언할 때 초기값을 할당하면, 코드의 의도를 명확히 할 수 있습니다.

2. 안정성: 초기화되지 않은 변수를 사용하면 예기치 않은 오류가 발생할 수 있습니다. 초기화를 통해 이러한 오류를 방지할 수 있습니다.

3. Null Safety: Dart의 Null Safety 기능을 통해 변수를 초기화하지 않으면 컴파일 타임에 오류가 발생합니다. 이를 통해 Null 참조 오류를 방지할 수 있습니다.

예제: 클래스와 초기화

클래스의 인스턴스 변수를 초기화하는 예제입니다.

class Person {
  String name;
  int age;

  // 생성자를 통해 변수 초기화
  Person(this.name, this.age);

  // 네임드 생성자를 통해 초기화
  Person.withDefaultName(this.age) : name = 'Unknown';
}

void main() {
  var person1 = Person('John', 30);
  var person2 = Person.withDefaultName(25);

  print('${person1.name}, ${person1.age}'); // John, 30
  print('${person2.name}, ${person2.age}'); // Unknown, 25
}

결론

변수 초기화는 코드의 명확성, 안정성, Null Safety를 보장하기 위해 중요합니다. Dart에서는 다양한 방법으로 변수를 초기화할 수 있으며, final, const, late 키워드를 사용하여 다양한 초기화 시나리오를 처리할 수 있습니다. 초기화를 올바르게 사용하여 안정적이고 명확한 코드를 작성하세요.

1. Dart Language Tour - Variables:

• 이 문서는 Dart에서 변수 선언과 초기화에 대한 기본적인 개념과 사용법을 설명합니다.

• Dart Language Tour - Variables

2. Dart Language Tour - Null Safety:

• 이 문서는 Null Safety와 관련된 개념을 다루며, 변수 초기화와 관련된 사항을 자세히 설명합니다.

• Dart Language Tour - Null Safety

3. Dart Language Tour - Late Variables:

• 이 문서는 late 키워드를 사용하여 변수를 나중에 초기화하는 방법에 대해 설명합니다.

• Dart Language Tour - Late Variables