자몽이랑꼬부기

[Spring Boot + Vue.js ] Threads Clone 코딩 Day 2

2026-07-29T06:19:50.824-07:00

안녕하세요.

친숙한 Spring boot 부터 시작하겠습니다.

목표

Spring Boot 3

Java 17

Spring Security

JWT 로그인

PostgreSQL

JPA

Vue3에서 바로 연동 가능한 REST API

1. 프로젝트 생성

spring initializr로 이동하기 : https://start.spring.io/

다음 환경으로 시작하는 것을 권장합니다.

Spring Boot 4.x
Java 21(LTS)
Gradle
PostgreSQL
Spring Security
Spring Data JPA
Lombok
Validation

2. Generate 버튼을 누르면 thread.zip으로 다운로드 됩니다.

3. Visual Studio code를 사용해서 프로젝트를 열면 아래와 같습니다.

4. 환경설정을 왜 위에 처럼 해야하는 건가?

1. Spring Boot 4.x 추천

최신 프로젝트라면 다음 환경으로 시작하는 것을 권장합니다.
Spring Boot 4.x
Java 21(LTS)
Gradle
PostgreSQL
Spring Security
Spring Data JPA
Lombok
Validation
Java 17도 가능하지만, 새 프로젝트라면 Java 21 LTS를 사용하는 것이 장기적으로 유리합니다.
2. JAR vs WAR
JAR (추천)
Vue
   ↓
Spring Boot (내장 Tomcat)
   ↓
PostgreSQL
장점
설정이 간단합니다.
배포가 쉽습니다.
Docker와 잘 어울립니다.
AWS, Oracle Cloud, Ubuntu 서버에서 많이 사용합니다.
GitHub Actions로 CI/CD 구성도 편리합니다.
실행도 간단합니다.
java -jar threads.jar
WAR
Tomcat
   └── threads.war
장점
기존 Tomcat 서버를 사용하는 회사에서 필요할 수 있습니다.
단점
설정이 복잡합니다.
Spring Boot의 장점을 일부 잃게 됩니다.
신규 프로젝트에서는 선택하는 경우가 많이 줄었습니다.
3. Threads 프로젝트라면?
저라면 아래와 같이 구성합니다.
Frontend
Vue3 + Vite
Backend
Spring Boot 4.x
Database
PostgreSQL
Cache
Redis
Storage
MinIO (개발)
AWS S3 (운영)
Deploy
Docker
Docker Compose
Nginx
실무에서도 많이 사용하는 구성입니다.
4. Gradle(Groovy) 추천
개인적으로는 Kotlin DSL보다 **Groovy 기반 build.gradle**을 추천합니다.
threads-server
 ├── src
 ├── build.gradle
 ├── settings.gradle
 └── gradlew
이유는 예제와 자료가 많고, 처음 학습할 때 참고하기 쉽기 때문입니다.

[Spring Boot + Vue.js ] Threads Clone 코딩 Day 1

2026-07-27T06:54:35.549-07:00

Vue js를 익히기 위해 시작한 클론 코딩 1일차.

윈도우환경

다음 순서대로 만들기

Vue.js 3
Spring Boot
MySQL 또는 PostgreSQL
JWT 로그인
REST API
Docker
AWS 또는 Ubuntu 서버 배포

기술 스택

Frontend

Vue 3
Vite
Pinia (상태관리)
Vue Router
Axios
Tailwind CSS

Backend

Spring Boot 3
Spring Security + JWT
Spring Data JPA
PostgreSQL
WebSocket(STOMP) (실시간 알림)
Redis (좋아요, 캐시, 세션)

배포

Docker
Nginx
AWS EC2 또는 Oracle Cloud

기능

1. 회원

회원가입
로그인(JWT)
프로필 수정
프로필 사진
소개글
팔로우/언팔로우

2. 글(Thread)

글 작성
이미지 첨부
수정
삭제
답글
해시태그

3. 좋아요

좋아요
좋아요 취소
좋아요 개수

4. 댓글

댓글
대댓글
삭제

5. 피드

최신순
팔로잉만 보기
인기글

6. 검색

사용자 검색
해시태그 검색

7. 알림

누가 좋아요
누가 댓글
누가 팔로우
실시간 WebSocket

8. 메시지(DM)

1:1 채팅
이미지 전송
읽음 표시

[Python] Python 스터디 Day1 (window)

2025-04-20T21:58:00.000-07:00

1. python 설치 (3.11)

https://www.python.org/downloads/ 에 3.11을 찾아서

https://www.python.org/downloads/release/python-3117/

로 이동. 여기에서 해당되는 것 다운로드.

2. Visual Code 사용.

- 개발할 때 손에 익은 툴을 사용.

3. CMD (명령프롬프트) 열기

pip --version을 실행.

너무 당황스러운 부분은 3.13 버전 설치 시 윈도우에서 오류가 발생되서 3.11 버전으로 설치하였습니다. 왜 그럴까요????

4. 유소년 축구 커뮤니티 사이트 만들기.

예상 구성도

┌──────────────┐ REST API ┌──────────────┐

│ Vue.js SPA │ ◀──────────────▶ │ Flask │

│ (Frontend) │ │ (Backend API)│

└──────────────┘ └──────┬───────┘

│

Admin UI ▼

(Flask-Admin) Database (PostgreSQL)

역할	기술	설명
프론트엔드	Vue.js	사용자용 화면 (SPA)
백엔드 API	Flask	Vue에서 사용하는 JSON API 제공, Python Flask + Flask-Admin + SQLAlchemy + PostgreSQL
관리자 페이지	Flask-Admin	관리자만 사용하는 전용 페이지 (서버 렌더링)

DB에 대한 고민

DB	추천 이유
SQLite	가볍고 설정 필요 없음 (개발용에 좋음)
MySQL / MariaDB	많이 쓰이고 안정적
PostgreSQL	복잡한 기능/대용량에도 강력함
MongoDB	NoSQL이 필요할 경우 선택 가능

Flutter3 -Visual Studio - develop for Windows (the doctor check crashed) ERROR

2022-05-24T20:52:00.004-07:00

Flutter3 window install error issue!

>flutter doctor

>Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at

https://github.com/flutter/flutter/issues.

X Exception: Bad UTF-8 encoding (U+FFFD; REPLACEMENT CHARACTER) found while decoding string: [

....

- Solution

Move to C:\Program Files (x86)\Microsoft Visual Studio\Installer

And replace vswhere.exe to this one !!

And Move to Visual Studio Installer

Check the C++ desktop!!

Finally, solved!

> flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, 3.0.0, on Microsoft Windows [Version 10.0.19044.1706], locale ko-KR)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)

[√] Chrome - develop for the web

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.2)

[√] Android Studio (version 4.1)

[√] VS Code (version 1.67.2)

[√] Connected device (3 available)

[√] HTTP Host Availability

• No issues found!

[Flutter] Flutter & Firebase 개발 도중 오류! Flutter Upgrade!

2020-11-23T21:04:00.003-08:00

Flutter Upgrade 실행 이후 오류 발생!!!

- Can't load Kernel binary: Invalid kernel binary format version. 메시지와 함께

flutter 실행이 안됨. 구글에 있는 내용으로 해도 안되서 결국 flutter 재설치!!!

- mac os에서 발생한 문제로 https://flutter.dev/docs/get-started/install/macos 로 이동.

- 터미널에서

git clone https://github.com/flutter/flutter.git /Users/xxx/Downloads/flutter 실행.

- 터미널에서 cd / 로 이동 후 ls -al 실행.

- .bash_profile 혹은 .zshrc 로 이동.

echo $PATH하면 나오는 flutter 경로 변경을 위해 환경설정 파일 수정.

vi .zshrc 실행.

- 여기에 flutter path를 git clone한 위치로 매칭시켜줌.

export PATH=/Users/xxx/Downloads/flutter/bin:$PATH 를 입력 후 저장.

- 새로운 터미널에서 flutter doctor를 실행. (기존 터미널 모두 닫기)

- 위와 같이 no issues found! 라고 나오면 설치 완료.

- Android studio에서 flutter 프로젝트 재 실행 시 아래와 같은 화면 보임.

- Open Dart settings를 클릭한다.

위의 화면에서 왼쪽 메뉴 Flutter로 이동하여 SDK PATH를 위에서 git clone한 경로인

/Users/xxx/Downloads/flutter로 수정해준 뒤 OK를 눌러준다.

- 해당 오류 메시지가 사라지고 flutter를 실행할 수 있는 상태로 정상화 됨을 확인.

[Flutter] Using FireStore with Flutter 1 - Firebase and Flutter Connect(ios)

2020-11-17T21:47:00.000-08:00

1. Firebase에서 Android를 추가해준것 과 같이 IOS플랫폼을 추가해준다.

- IOS 번들 ID에 안드로이드의 package명과 같은 이름을 작성한다.

2. 앱 등록 후 구성파일을 다운로드 해준다.

- GoogleService-info.plist파일을 다운로드.

3. ios 확인을 위해 CMD에서 생성한 Flutter 프로젝트 폴더 아래 ios 폴더로 이동한다.

- Open Runner.xcworkspace 를 실행한다.

아래와 같이 xcode가 실행된다.

4. Firebase에서 다운받은 GoogleService-info.plist를 Runner아래 이동시킨다.

[Flutter] Using FireStore with Flutter 1 - Firebase and Flutter Connect(Android)

2020-11-02T21:32:00.005-08:00

참고 유투브 동영상

https://www.youtube.com/watch?v=DqJ_KjFzL9I&feature=youtu.be

1. Google에서 Firebase 사이트로 이동

https://firebase.google.com

- Flutter에서 안내하는 Flutter&Firebase FlutterFire 사이트

https://firebase.flutter.dev/

2. Firebase Console화면에서 + 프로젝트 추가 버튼 클릭

3. 순서에 따라 프로젝트 이름 입력.

4. 순서에 따라 이동하고 완료시 'test1'이라는 프로젝트가 생성.

5. 안드로이드 앱을 추가하기 위해 '앱에 Firebase를 추가하여 시작하기' 아래 안드로이드 버튼을 클릭하면 아래와 같은 화면으로 이동.

- Flutter의 package 명과 같은 패키지 명을 입력.

- app/google-services.json을 추가해준다.

- 아래 설명에 따라 build.gradle에 각각 추가.

- 콘솔로 이동하면 나의 'test1' 프로젝트 아래 안드로이드 명의 앱이 생성된것을 확인.

- Flutter에서 위에 설정들을 완료후 Run을 했을 때 'Error while merging dex archives: The number of method references in a .dex file cannot exceed 64K'와 같은 오류 발생 시 아래와 같이 처리해준다.

/android/app/build.gradle 파일에 다음과 같이 추가한다.

android {

    defaultConfig {

        // ...

        minSdkVersion 16

        targetSdkVersion 28

        multiDexEnabled true

}

}

dependencies {

  implementation 'com.android.support:multidex:1.0.3'

}

최종 파일 app/build.gradle 은 아래와 같다.

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"


android {
    compileSdkVersion 28

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.gauri.media"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnabled true
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }

}

flutter {
    source '../..'
}

dependencies {
    // Import the Firebase BoM
    implementation platform('com.google.firebase:firebase-bom:26.0.0')

    // Add the dependency for the Firebase SDK for Google Analytics
    // When using the BoM, don't specify versions in Firebase dependencies
    implementation 'com.google.firebase:firebase-analytics'

    // Add the dependencies for any other desired Firebase products
    // https://firebase.google.com/docs/android/setup#available-libraries

    implementation 'com.android.support:multidex:1.0.3'
}

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

6. 터미널에서 flutter doctor를 실행하여 수정해야하는 부분이 있는지 체크한다.

[Spring Boot]Visual Studio Code에서 개발하기 1 - index 화면까지 보기

2020-10-26T22:16:00.002-07:00

- https://spring.io/tools

Spring Tools 사이트에서 파일 없음이라 다운로드 안된다니..

Visual Studio Code에서 개발하기로 정함!!

공식사이트에서 알려준데로

https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack

에서 install하니까 연결됨.

Visual studio code에서 install 버튼을 누르면 설치됨.

3. 자바 버전이 8 이하로 낮은 경우 아래와 같은 오류 메시지가 보이면서 높은 버전의 jdk 설치를 요함.

jdk설치 완료후 위와 같은 오류 메시지가 더이상 보이지 않음.

4. spring boot project 생성하기

- 참고링크 : spring boot suppport in vs

- 메뉴 view -> Command Palette 에서 Spring Initializr 명령어 호출

- 원하는 프로젝트를 선택한 다음 대화창에 따라 프로젝트 생성.

- dependencies는 후에 pom.xml에서 오른쪽 버튼 > Add Starters에서 언제든지 수정이 가능하다.

- 마지막 화면에서 처럼 성공적으로 생성되었다고 나오면 Open을 클릭

- mac인 경우 자동적으로 VS Extensions들이 설치되는데 windows의 경우 install이 각각 필요.

- java 라고 찾아서 아래 화면에서 보이는 요소들이 설치가 되어있어야함.

- spring boot에서는 기본적으로 jsp/jstl을 지원해주지 않으므로 pom.xml에 추가해 줘야함.

        <dependency> 
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId> 
         <!--<scope>provided</scope>--> 
         </dependency>

         <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

- src > main아래 webapp > WEB-INF > view > index.jsp를 생성한다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spring boot sample</title>
</head>
<body>
    <div>Index Page</div>
</body>
</html>

- resources > application.properties 에 아래와 같이 추가해 줘야함.

#jsp 경로 설정
spring.mvc.view.prefix=/WEB-INF/view/
spring.mvc.view.suffix=.jsp

- controller> MainController.java를 생성.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spring boot sample</title>
</head>
<body>
    <div>Index Page</div>
</body>
</html>

5. 프로젝트 실행하기.

- 좌측에 spring-boot-dashboard에서 실행버튼 클릭 시 서버 가동.

6. 화면 확인

[Spring Boot]Visual Studio Code에서 개발하기 2 - lombok 적용하기

2020-10-15T23:38:00.001-07:00

1. pom.xml에 lombok 추가.

   <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <scope>provided</scope>
   </dependency>

2. VO 클래스에 @Data annotation추가하여 사용.

import lombok.*;

@Data

public class TableSampleVO {

    private String searchType;

    private String searchValue;

    private String wStartDate;

    private String wEndDate;

    private int rnum; // 순번

    private int pageIndex = 1; // 현재 페이지

}

3. 해당 TableSampleVO를 불러오는 jsp에서 getter 오류 발생.

4. Visual Studio Code에서 사용시 별도로 플러그인 설치가 필요하다.

- https://marketplace.visualstudio.com/items?itemName=GabrielBB.vscode-lombok

에서 install 버튼을 눌러 설치하기.

5. Visual Studio Code 재시작 후 페이지가 제대로 나오는 것을 확인할 수 있다.

[Flutter]JSON and serialization 1

2020-10-07T20:28:00.002-07:00

1. 간단 용어정리

- Encoding == serialization == data structure를 string 으로 변경해줌.

- Decoding == deserialization == string을 data structure로 변경해줌.

2. 어떤 JSON Serialization 방법이 나에게 맞을까?

- Manual serialization (일반 직렬화) : 소규모 프로젝트

- 기본적으로 제공하는 dart:convert 사용

- Automated serialization using code generation

(코드 생성을 통한 자동 직렬화) : 중대형 프로젝트

- json_serializable, built_value를 사용.

3. dart:convert 사용한 JSON 직렬화 두가지 방법.

var jsonString = '{

"name": "John Smith",

"email": "john@example.com"

}';

- Serializing JSON inline 방법.

Map<String, dynamic> user = jsonDecode(jsonString);

print('Howdy, ${user['name']}!');
print('We sent the verification link to ${user['email']}.');

이 방법은 실행전까지 value의 타입을 모른다는 문제가 있으며

type safety, autocompletion and most importantly, compile-time exceptions를 사용수 없다.

- Serializing JSON inside model classes 방법.

User 클래스를 사용하는 방법으로

User.fromJson() 생성자를 통해 map으로 부터 User를 생성한다.

User.toJson() 메서드를 통해 User를 map으로 변환한다.

class User {
  final String name;
  final String email;

  User(this.name, this.email);

  User.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        email = json['email'];

  Map<String, dynamic> toJson() =>
    {
      'name': name,
      'email': email,
    };
}

Map userMap = jsonDecode(jsonString);
var user = User.fromJson(userMap);

print('Howdy, ${user.name}!');
print('We sent the verification link to ${user.email}.');

User를 인코딩하기 위해서는 jsonEncode()를 사용한다.

jsonEncode()가 대신 인코딩을 하기 때문에 toJson()메서드를 호출할 필요는 없다.

String json = jsonEncode(user);

4. json_serializable를 사용한 직렬화.

https://pub.dev/packages/json_serializable 에 자세한 정보를 찾을수 있다.

a. pubspec.yaml에 추가.

dependencies:
  # Your other regular dependencies here
  json_annotation: <latest_version>

dev_dependencies:
  # Your other dev_dependencies here
  build_runner: <latest_version>
  json_serializable: <latest_version>

b. 터미널에서 flutter pub get 를 실행.

c. user.dart 생성.

import 'package:json_annotation/json_annotation.dart';

/// This allows the `User` class to access private members in
/// the generated file. The value for this is (파일명:*).g.dart, where
/// the star denotes the source file name.
part 'user.g.dart'; // 이부분에서 에러표시가 발생함.

/// JSON 직렬화 로직이 만들어져야 한다고 알려주는 어노테이션.
@JsonSerializable()

class User {
  User(this.name, this.email. this.registDateMill);

  String name;
  String email;

/// @JsonKey를 사용하여 네이밍전략을 알려줄수 있다.// name: 네이밍 전략, required(t/f): 무조건 포함해야 하는 키 인지 여부, 
//defaultValue(t/f): Json에 해당 키가 없어도 되거나 값이 'null'인 경우.

@JsonKey(name: 'registration_date_millis')
final int registrationDateMillis;

  /// map에서 User를 생성하기 위한 팩토리 생성자.
  /// Pass the map to the generated `_$UserFromJson()` constructor.
  /// 생성자의 이름은 클래스 명을 따른다. ( _$+클래스명+FromJson )
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

  /// `toJson` JSON  인코딩을 지원을 선언하는 규칙.
  /// The implementation simply calls the private, generated
  /// helper method `_$UserToJson`. ( _$+클래스명+ToJson)
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

d. 터미널에서 flutter pub run build_runner build 를 실행.

- c에서 빨간색 부분을 모두 작성해준다음에 위에 명령어 실행을 시켜야한다.

- serialization에 대한 모든 로직이 담김 user.g.dart가 생성된다.

- build_runner에 build 명령은 클래스 변경시 마다 호출해야 함으로

일회성이 아닌 지속적인 변경 감지를 위해

flutter pub run build_runner watch를 실행한다.

e. json_serialization User 모델을 사용하는 방법: 위에서 사용했던 방법과 똑같다.

Map userMap = jsonDecode(jsonString);
var user = User.fromJson(userMap);

String json = jsonEncode(user);

한줄 CSS 추가로 DARK MODE 표현하기

2020-09-22T23:17:00.000-07:00

CSS 템플릿을 무료로 받아쓸수 있는 사이트를 통한 예제.

https://bulmatemplates.github.io/bulma-templates/

위의 사이트에서 Admin이라는 제목을 가진 소스를 복사해서 사용합니다.

Visual Studio Code를 열어 index.html에 해당 소스를 복사합니다.

그리고 Dark Mode 실행을 위해 css폴더 및에 main.css파일을 생성한 뒤 index.html에

<link rel="stylesheet" type="text/css" href="./css/main.css">

를 추가해줍니다.

css폴더의 main.css 파일에 다음과 같이 한줄을 추가시켜줍니다.

:root {
    filter: invert(100%); 
  }

해당 파일을 chrome에서 체크하면 다음과 같이 나옵니다.

invert(100%)는 invert(1)로 표현이 가능합니다.

invert(0 - 100%) 혹은 invert(0 - 1)

Toggle를 통한 필터 추가 시 다음과 같은 코드를 작성을 해주면 됩니다.

Enter를 쳤을 경우만 dark-mode로 class가 toggle 되도록 코드를 추가합니다.

<script>
        document.onkeypress = function (e) {
            e = e || window.event;

            if(e.keyCode === 13) { // enter key 
                document.documentElement.classList.toggle('dark-mode');

               
            }
        }
</script>

제목 부분만 그대로 유지를 원하는 경우 다음과 같은 코드를 추가해줍니다.

class에 inverted가 포함되어있으면 원본으로 보여지도록 실행되는 코드입니다.

제목 부분은 그대로 보여지도록 class에 inverted를 추가함.

<h1 class="title inverted">
   Hello, Admin.
</h1>

<script>
        document.onkeypress = function (e) {
            e = e || window.event;

            if(e.keyCode === 13) { // enter key 
                document.documentElement.classList.toggle('dark-mode');

                document.querySelectorAll('.inverted').forEach((result) => {
                    result.classList.toggle('invert');
                });
            }
        }
    </script>

이미지나 사진 같은 경우에도 class 명에 inverted를 추가하면 원본으로

보이게 해줄수 있습니다.

 <img class="inverted" src="./image/ocean.jpg" />

위의 코드에서 class를 추가해주면

원본 이미지 그대로 볼수 있습니다.

위의 invert code는 firefox 브라우저의 background에는 적용이 안된다는 문제점이 있습니다.

- 참고유투브

[Flutter] Flutter 4 .Networking and FutureBuilder(from The Boring Flutter Development Show)

2020-04-27T07:02:00.002-07:00

**Networking and FutureBuilder **

1. 이전 글에서 작성한 코드는 고정된 json값을 다루었지만 그부분을 모두 http 통신을 통해 데이터를 가져오는 방식으로 변경한다.

- https://pub.dev/packages/http를 참고하여 pubspec.yaml 파일 dependencies 아래 http: ^0.12.0+ 를 추가한다.
- 사용방법은 Example 탭을 통해 확인하면 된다.

import 'package:flutter_test/flutter_test.dart';
import 'package:flutterapp/json_parsing.dart';
import 'dart:convert' as json;
import 'package:http/http.dart' as http; //flutter에서 제공.

//https://github.com/HackerNews/API
//New, top and best stories api와 id로 개정보를 가져오는 api를 사
void main(){
   test("parses item.json over network", () async{
    //https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty
    final url = 'https://hacker-news.firebaseio.com/v0/beststories.json';
    var response = await http.get(url);

    //해당 url에서 id값 리스트를 결과값으로 받는다.
    if(response.statusCode == 200) {
      final idListJson = json.jsonDecode(response.body);
      if(idListJson.isNotEmpty){
        final storyUrl = 'https://hacker-news.firebaseio.com/v0/item/${idListJson.first}.json?print=pretty';
        final storyRes = await http.get(storyUrl);

        //해당 id의 상세 정보를 받아온다.
        if(storyRes.statusCode == 200){
          expect(parseArticle(storyRes.body).by, "dhouston");

        }
      }
    }
    });
}

parseArticle은 이전 글에서 작성한 json_parsing.json에서 불러온다.

Article parseArticle(String jsonStr){
  final parsed = json.jsonDecode(jsonStr);
  Article article = standardSerializers.deserializeWith(Article.serializer, parsed);
  return article;
}

테스트 실행 시 실행된 정보의 by와 "dhouson" 예상했던 값이 틀려 fail이 떨어진다.

이를 바탕으로 맨 첫번째 글 Flutter 1에서 작성한 main.dart 부분을 고정된 json값이 아닌
http 통신을 통해 리스트 업 되도록 수정한다.

http 플러그인을 기본으로 통신 후 Widget이 세팅될수 있도록 FutureBuilder를 사용한다.

참고: https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'src/articles.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //https://hacker-news.firebaseio.com/v0/beststories.json?print=pretty
  List<int> _ids = [22972983, 22980932, 22973455, 22990926, 22969533, 22979245, 22972661, 22977637, 22987747, 22989280];

  Future<Article> _getArticle(int id) async{
    final storyUrl = 'https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty';
    final storyRes = await http.get(storyUrl);
    if(storyRes.statusCode == 200){
      return parseArticle(storyRes.body);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body:  ListView( //Listview는 스크롤을 가짐
        children: _ids.map((i)=>
          FutureBuilder<Article>(
            future: _getArticle(i), //통신을 통한 정보를 가져옴.
            builder: (BuildContext context, AsyncSnapshot<Article> snapshot){
              if(snapshot.connectionState == ConnectionState.done){

                //통신이 끝난 뒤 widget을 생성함.
                return _buildItem(snapshot.data);
              }else{
                return Center(child: CircularProgressIndicator());
              }
            },
          )
        ).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget _buildItem(Article arc){
    return Padding(
      //give identity using key! unique!
        key: Key(arc.title),
        padding: EdgeInsets.all(16.0),
        child: ExpansionTile(
      //ExpansionTile안에 자식은 무조건 column 형식.
      title: Text(arc.title, style: TextStyle(fontSize: 24.0)),
      children: <Widget>[
         Row(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: <Widget>[
             Text(arc.type),
             IconButton(
               icon: Icon(Icons.launch),
               color: Colors.green,
               onPressed: () async {
                 final url = "http://${arc.url}";
                 if(await canLaunch(url)){
                   await launch(url);
                 }
               },
             )
           ],
         )
        ]
      )
    );
  }
}

[Flutter] Flutter 3. Immutable value& serialization(from The Boring Flutter Development Show)

2020-04-25T07:25:00.000-07:00

**JSON serialization, and immutables Part2 **

1. built_value plugin을 사용한다.
- https://pub.dev/packages/built_value: metaprogramming!
- 서버와의 통신을 통해 받은 데이터를 가공해서 쉽게 사용할수 있도록 도와주는 플러그인.
- Json serializing & deserializing을 할 때에는 StandardJsonPlugin을 사용한다.

2. https://github.com/google/built_value.dart

3. 플러그인 사용을 위해서 pubspec.yaml에 다음과 같이 추가한다.
참고: https://github.com/google/built_value.dart/blob/master/example/pubspec.yaml

name: flutterapp
description: A new Flutter application.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  built_collection: ^4.3.2
  built_value: ^7.0.9

  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  url_launcher: ^5.4.2

dev_dependencies:
  build_runner: ^1.0.0
  build_test: ^0.10.3
  built_value_generator: ^7.0.9
  flutter_test:
    sdk: flutter

4. Android > Preferences> Editor> Live Templates 로 이동하여 플러그인 설명에 따라
boilerplate for Value Types을 생성한다.

아래 Template text는 다음과 같이 추가한다.

abstract class $CLASS_NAME$ implements Built<$CLASS_NAME$, $CLASS_NAME$Builder> {
  $CLASS_NAME$._();
  factory $CLASS_NAME$([void Function($CLASS_NAME$Builder) updates]) = _$$$CLASS_NAME$;
}

5. lib> json_parsing.dart를 생성한다.
https://github.com/HackerNews/API 를 참고로 Items에 있는 변수들을 지닌 클래스를 생성한다.

import 'src/articles.dart';
import 'dart:convert' as json;

import 'package:built_value/built_value.dart';
import 'package:built_collection/built_collection.dart';

part 'json_parsing.g.dart';

abstract class Article implements Built<Article, ArticleBuilder> {
  
  int get id;
  String get by;
  int get descendants;
  @nullable
  int get score;
  @nullable
  String get text;
  @nullable
  String get type;
  @nullable
  String get title;
  @nullable
  bool get dead;
  @nullable
  int get pool;
  BuiltList<int> get kids;
  @nullable
  String get url;
  @nullable
  int get time;

  @nullable
  String get nickname;

  @nullable
  bool get deleted;

  Article._();
  factory Article([void Function(ArticleBuilder) updates]) = _$Article;

//generated code starts with “_$”, to mark it as private and generated

}

part 'json_parsing.g.dart'; 를 추가해놔야
flutter packages pub run build_runner build 실행 시 json_parsing.g.dart가 자동으로 생성된다.

한번 빌드 명령 후 그 이후는
flutter packages pub run build_runner watch

실행시 built_value 플러그인과 관련된 작업은 변경된 내용을 계속 체크해서 반영해준다.

터미널에서 flutter packages pub run build_runner build를 실행한뒤
flutter_packages pub run build_runner watch를 실행한다.

생성된 json_parsing.g.dart에는 toString()등 메소드 자동 생성된다.

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'json_parsing.dart';

class _$Article extends Article {
  @override
  final int id;
  @override
  final String by;
  @override
  final int descendants;
  @override
  final int score;
  @override
  final String text;
  @override
  final String type;
  @override
  final String title;
  @override
  final bool dead;
  @override
  final int pool;
  @override
  final BuiltList<int> kids;
  @override
  final String url;
  @override
  final int time;
  @override
  final String nickname;
  @override
  final bool deleted;

  factory _$Article([void Function(ArticleBuilder) updates]) =>
      (new ArticleBuilder()..update(updates)).build();

  _$Article._(
      {this.id,
      this.by,
      this.descendants,
      this.score,
      this.text,
      this.type,
      this.title,
      this.dead,
      this.pool,
      this.kids,
      this.url,
      this.time,
      this.nickname,
      this.deleted})
      : super._() {
    if (id == null) {
      throw new BuiltValueNullFieldError('Article', 'id');
    }
    if (by == null) {
      throw new BuiltValueNullFieldError('Article', 'by');
    }
    if (descendants == null) {
      throw new BuiltValueNullFieldError('Article', 'descendants');
    }
    if (kids == null) {
      throw new BuiltValueNullFieldError('Article', 'kids');
    }
  }

  @override
  Article rebuild(void Function(ArticleBuilder) updates) =>
      (toBuilder()..update(updates)).build();

  @override
  ArticleBuilder toBuilder() => new ArticleBuilder()..replace(this);

  @override
  bool operator ==(Object other) {
    if (identical(other, this)) return true;
    return other is Article &&
        id == other.id &&
        by == other.by &&
        descendants == other.descendants &&
        score == other.score &&
        text == other.text &&
        type == other.type &&
        title == other.title &&
        dead == other.dead &&
        pool == other.pool &&
        kids == other.kids &&
        url == other.url &&
        time == other.time &&
        nickname == other.nickname &&
        deleted == other.deleted;
  }

  @override
  int get hashCode {
    return $jf($jc(
        $jc(
            $jc(
                $jc(
                    $jc(
                        $jc(
                            $jc(
                                $jc(
                                    $jc(
                                        $jc(
                                            $jc(
                                                $jc(
                                                    $jc($jc(0, id.hashCode),
                                                        by.hashCode),
                                                    descendants.hashCode),
                                                score.hashCode),
                                            text.hashCode),
                                        type.hashCode),
                                    title.hashCode),
                                dead.hashCode),
                            pool.hashCode),
                        kids.hashCode),
                    url.hashCode),
                time.hashCode),
            nickname.hashCode),
        deleted.hashCode));
  }

  @override
  String toString() {
    return (newBuiltValueToStringHelper('Article')
          ..add('id', id)
          ..add('by', by)
          ..add('descendants', descendants)
          ..add('score', score)
          ..add('text', text)
          ..add('type', type)
          ..add('title', title)
          ..add('dead', dead)
          ..add('pool', pool)
          ..add('kids', kids)
          ..add('url', url)
          ..add('time', time)
          ..add('nickname', nickname)
          ..add('deleted', deleted))
        .toString();
  }
}

class ArticleBuilder implements Builder<Article, ArticleBuilder> {
  _$Article _$v;

  int _id;
  int get id => _$this._id;
  set id(int id) => _$this._id = id;

  String _by;
  String get by => _$this._by;
  set by(String by) => _$this._by = by;

  int _descendants;
  int get descendants => _$this._descendants;
  set descendants(int descendants) => _$this._descendants = descendants;

  int _score;
  int get score => _$this._score;
  set score(int score) => _$this._score = score;

  String _text;
  String get text => _$this._text;
  set text(String text) => _$this._text = text;

  String _type;
  String get type => _$this._type;
  set type(String type) => _$this._type = type;

  String _title;
  String get title => _$this._title;
  set title(String title) => _$this._title = title;

  bool _dead;
  bool get dead => _$this._dead;
  set dead(bool dead) => _$this._dead = dead;

  int _pool;
  int get pool => _$this._pool;
  set pool(int pool) => _$this._pool = pool;

  ListBuilder<int> _kids;
  ListBuilder<int> get kids => _$this._kids ??= new ListBuilder<int>();
  set kids(ListBuilder<int> kids) => _$this._kids = kids;

  String _url;
  String get url => _$this._url;
  set url(String url) => _$this._url = url;

  int _time;
  int get time => _$this._time;
  set time(int time) => _$this._time = time;

  String _nickname;
  String get nickname => _$this._nickname;
  set nickname(String nickname) => _$this._nickname = nickname;

  bool _deleted;
  bool get deleted => _$this._deleted;
  set deleted(bool deleted) => _$this._deleted = deleted;

  ArticleBuilder();

  ArticleBuilder get _$this {
    if (_$v != null) {
      _id = _$v.id;
      _by = _$v.by;
      _descendants = _$v.descendants;
      _score = _$v.score;
      _text = _$v.text;
      _type = _$v.type;
      _title = _$v.title;
      _dead = _$v.dead;
      _pool = _$v.pool;
      _kids = _$v.kids?.toBuilder();
      _url = _$v.url;
      _time = _$v.time;
      _nickname = _$v.nickname;
      _deleted = _$v.deleted;
      _$v = null;
    }
    return this;
  }

  @override
  void replace(Article other) {
    if (other == null) {
      throw new ArgumentError.notNull('other');
    }
    _$v = other as _$Article;
  }

  @override
  void update(void Function(ArticleBuilder) updates) {
    if (updates != null) updates(this);
  }

  @override
  _$Article build() {
    _$Article _$result;
    try {
      _$result = _$v ??
          new _$Article._(
              id: id,
              by: by,
              descendants: descendants,
              score: score,
              text: text,
              type: type,
              title: title,
              dead: dead,
              pool: pool,
              kids: kids.build(),
              url: url,
              time: time,
              nickname: nickname,
              deleted: deleted);
    } catch (_) {
      String _$failedField;
      try {
        _$failedField = 'kids';
        kids.build();
      } catch (e) {
        throw new BuiltValueNestedFieldError(
            'Article', _$failedField, e.toString());
      }
      rethrow;
    }
    replace(_$result);
    return _$result;
  }
}

// ignore_for_file: always_put_control_body_on_new_line,always_specify_types,annotate_overrides,avoid_annotating_with_dynamic,avoid_as,avoid_catches_without_on_clauses,avoid_returning_this,lines_longer_than_80_chars,omit_local_variable_types,prefer_expression_function_bodies,sort_constructors_first,test_types_in_equals,unnecessary_const,unnecessary_new

6. test/json_test.dart에서 테스트를 해본다.

import 'package:flutter_test/flutter_test.dart';
import 'package:flutterapp/json_parsing.dart';

void main(){
  
  var arc = new Article((b) =>b
  ..score = 10
  ..text = "asefaefae"
  ..by="test1"
  ..dead = false
      ..descendants = 100
    ..id= 39280
  );

  print(arc.toString());

  Article arc2 = arc.rebuild((b) => b // Immutable를 위해 rebuild메소드 사용.
  ..nickname = "hihihi");

  print(arc2.toString());
}

테스트 결과는 다음과 같이 나온다.

6. Serialization을 사용하기 위해서는 built_value gitHub에서

built_value.dart/example/lib/serializers.dart 해당 파일의 코드를 복사해온다.
- 참고: https://medium.com/flutter-community/creating-custom-built-value-serializers-with-builtvalueserializer-46a52c75d4c5

- built_value/standard_json_plugin을 사용한다.

//built_value.dart/example/lib/serializers.dart
// Copyright (c) 2015, Google Inc. Please see the AUTHORS file for details.
// All rights reserved. Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

library serializers;

import 'package:built_value/serializer.dart';
import 'package:built_value/standard_json_plugin.dart';
import 'package:built_collection/built_collection.dart';

import 'json_package.dart';

part 'serializers.g.dart';

/// Example of how to use built_value serialization.
///
/// Declare a top level [Serializers] field called serializers. Annotate it
/// with [SerializersFor] and provide a `const` `List` of types you want to
/// be serializable.
///
/// The built_value code generator will provide the implementation. It will
/// contain serializers for all the types asked for explicitly plus all the
/// types needed transitively via fields.
///
/// You usually only need to do this once per project.
@SerializersFor([
  Article //serialize할 대상 클래스 명을 작성.
])
Serializers serializers = _$serializers;

Serializers standardSerializers =
(serializers.toBuilder()
  ..addPlugin(StandardJsonPlugin())
).build();

위에서 터미널에서 watch 명령어로 변화를 체크하고 있기 때문에 자동적으로 serializers.g.dart가 생성된다.

// GENERATED CODE - DO NOT MODIFY BY HAND

part of serializers;

// **************************************************************************
// BuiltValueGenerator
// **************************************************************************

Serializers _$serializers = (new Serializers().toBuilder()
      ..add(Article.serializer)
      ..addBuilderFactory(
          const FullType(BuiltList, const [const FullType(int)]),
          () => new ListBuilder<int>()))
    .build();

// ignore_for_file: always_put_control_body_on_new_line,always_specify_types,annotate_overrides,avoid_annotating_with_dynamic,avoid_as,avoid_catches_without_on_clauses,avoid_returning_this,lines_longer_than_80_chars,omit_local_variable_types,prefer_expression_function_bodies,sort_constructors_first,test_types_in_equals,unnecessary_const,unnecessary_new

앞에 글에서 작성했던 코드를 수정하여
json_parsing.dart에 최종적으로 다음과 같이 코드를 작성한다.

//import 'src/articles.dart';
import 'dart:convert' as json;

import 'package:built_value/built_value.dart';
import 'package:built_collection/built_collection.dart';
import 'package:built_value/serializer.dart';
import 'serializers.dart';

part 'json_parsing.g.dart';

abstract class Article implements Built<Article, ArticleBuilder> {
  static Serializer<Article> get serializer => _$articleSerializer;

  int get id;
  String get by;
  int get descendants;
  @nullable
  int get score;
  @nullable
  String get text;
  @nullable
  String get type;
  @nullable
  String get title;
  @nullable
  bool get dead;
  @nullable
  int get pool;
  BuiltList<int> get kids;
  @nullable
  String get url;
  @nullable
  int get time;

  @nullable
  @BuiltValueField(wireName: 'nink_name')
  String get nickname;

  @nullable
  bool get deleted;

  Article._();
  factory Article([void Function(ArticleBuilder) updates]) = _$Article;
}

Article parseArticle(String jsonStr){
  final parsed = json.jsonDecode(jsonStr);

  //serializers.dart에서 standard json plugin을 사용하는 serializer를 생성했기때문에

  //standardSerializers를 사용한다.
  Article article = standardSerializers.deserializeWith(Article.serializer, parsed);
  return article;
}

serializer추가로 인하여 json_parsing.g.dart도 변화가 생긴다.
아래 부분이 추가되어 있음이 확인 가능하다.

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'json_parsing.dart';

// **************************************************************************
// BuiltValueGenerator
// **************************************************************************

Serializer<Article> _$articleSerializer = new _$ArticleSerializer();

class _$ArticleSerializer implements StructuredSerializer<Article> {
  @override
  final Iterable<Type> types = const [Article, _$Article];
  @override
  final String wireName = 'Article';

  @override
  Iterable<Object> serialize(Serializers serializers, Article object,
      {FullType specifiedType = FullType.unspecified}) {
    final result = <Object>[
      'id',
      serializers.serialize(object.id, specifiedType: const FullType(int)),
      'by',
      serializers.serialize(object.by, specifiedType: const FullType(String)),
      'descendants',
      serializers.serialize(object.descendants,
          specifiedType: const FullType(int)),
      'kids',
      serializers.serialize(object.kids,
          specifiedType:
              const FullType(BuiltList, const [const FullType(int)])),
    ];
    if (object.score != null) {
      result
        ..add('score')
        ..add(serializers.serialize(object.score,
            specifiedType: const FullType(int)));
    }
    if (object.text != null) {
      result
        ..add('text')
        ..add(serializers.serialize(object.text,
            specifiedType: const FullType(String)));
    }
    if (object.type != null) {
      result
        ..add('type')
        ..add(serializers.serialize(object.type,
            specifiedType: const FullType(String)));
    }
    if (object.title != null) {
      result
        ..add('title')
        ..add(serializers.serialize(object.title,
            specifiedType: const FullType(String)));
    }
    if (object.dead != null) {
      result
        ..add('dead')
        ..add(serializers.serialize(object.dead,
            specifiedType: const FullType(bool)));
    }
    if (object.pool != null) {
      result
        ..add('pool')
        ..add(serializers.serialize(object.pool,
            specifiedType: const FullType(int)));
    }
    if (object.url != null) {
      result
        ..add('url')
        ..add(serializers.serialize(object.url,
            specifiedType: const FullType(String)));
    }
    if (object.time != null) {
      result
        ..add('time')
        ..add(serializers.serialize(object.time,
            specifiedType: const FullType(int)));
    }
    if (object.nickname != null) {
      result
        ..add('nink_name')
        ..add(serializers.serialize(object.nickname,
            specifiedType: const FullType(String)));
    }
    if (object.deleted != null) {
      result
        ..add('deleted')
        ..add(serializers.serialize(object.deleted,
            specifiedType: const FullType(bool)));
    }
    return result;
  }

  @override
  Article deserialize(Serializers serializers, Iterable<Object> serialized,
      {FullType specifiedType = FullType.unspecified}) {
    final result = new ArticleBuilder();

    final iterator = serialized.iterator;
    while (iterator.moveNext()) {
      final key = iterator.current as String;
      iterator.moveNext();
      final dynamic value = iterator.current;
      switch (key) {
        case 'id':
          result.id = serializers.deserialize(value,
              specifiedType: const FullType(int)) as int;
          break;
        case 'by':
          result.by = serializers.deserialize(value,
              specifiedType: const FullType(String)) as String;
          break;
        case 'descendants':
          result.descendants = serializers.deserialize(value,
              specifiedType: const FullType(int)) as int;
          break;
        case 'score':
          result.score = serializers.deserialize(value,
              specifiedType: const FullType(int)) as int;
          break;
        case 'text':
          result.text = serializers.deserialize(value,
              specifiedType: const FullType(String)) as String;
          break;
        case 'type':
          result.type = serializers.deserialize(value,
              specifiedType: const FullType(String)) as String;
          break;
        case 'title':
          result.title = serializers.deserialize(value,
              specifiedType: const FullType(String)) as String;
          break;
        case 'dead':
          result.dead = serializers.deserialize(value,
              specifiedType: const FullType(bool)) as bool;
          break;
        case 'pool':
          result.pool = serializers.deserialize(value,
              specifiedType: const FullType(int)) as int;
          break;
        case 'kids':
          result.kids.replace(serializers.deserialize(value,
                  specifiedType:
                      const FullType(BuiltList, const [const FullType(int)]))
              as BuiltList<Object>);
          break;
        case 'url':
          result.url = serializers.deserialize(value,
              specifiedType: const FullType(String)) as String;
          break;
        case 'time':
          result.time = serializers.deserialize(value,
              specifiedType: const FullType(int)) as int;
          break;
        case 'nink_name':
          result.nickname = serializers.deserialize(value,
              specifiedType: const FullType(String)) as String;
          break;
        case 'deleted':
          result.deleted = serializers.deserialize(value,
              specifiedType: const FullType(bool)) as bool;
          break;
      }
    }

    return result.build();
  }
}

    
// ignore_for_file: always_put_control_body_on_new_line,always_specify_types,annotate_overrides,avoid_annotating_with_dynamic,avoid_as,avoid_catches_without_on_clauses,avoid_returning_this,lines_longer_than_80_chars,omit_local_variable_types,prefer_expression_function_bodies,sort_constructors_first,test_types_in_equals,unnecessary_const,unnecessary_new

serializer가 제대로 동작하는지 체크하기 위한 테스트를 실행한다.

import 'package:flutter_test/flutter_test.dart';
import 'package:flutterapp/json_parsing.dart';

//https://github.com/HackerNews/API
//New, top and best stories api와 id로 개정보를 가져오는 api를 사
void main(){

  test("parses item.json", (){
    //https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty
    const jsonString="""{
        "by" : "dhouston",
    "descendants" : 71,
    "id" : 8863,
    "kids" : [ 9224, 8917, 8952, 8884, 8887, 8869, 8958, 8940, 8908, 9005, 8873, 9671, 9067, 9055, 8865, 8881, 8872, 8955, 10403, 8903, 8928, 9125, 8998, 8901, 8902, 8907, 8894, 8870, 8878, 8980, 8934, 8943, 8876 ],
    "score" : 104,
    "time" : 1175714200,
    "title" : "My YC app: Dropbox - Throw away your USB drive",
    "type" : "story",
    "url" : "http://www.getdropbox.com/u/2/screencast.html"
  }""";
    expect(parseArticle(jsonString).by, "dhouston");
  });

 

}

실행시 테스트 성공임을 확인할 수 있다.

[Flutter] Flutter 2. Testing&..(from The Boring Flutter Development Show)

2020-04-21T21:20:00.000-07:00

**Testing, JSON serialization, and immutables Part1 **

1. Testing

flutter는 기본적으로 세가지 테스트를 제공하고있다.

참고: https://flutter.dev/docs/testing


A unit test tests a single function, method, or class.
A widget test (in other UI frameworks referred to as component test) tests a single widget.
An integration test tests a complete app or a large part of an app.





간단하게 widget test는 이미 프로젝트 생성시 test폴더 아래 widget_test.dart파일로 존재한다.



에피소드1에서 생성한 코드기준으로 테스트 파일을 생성한다.





// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:flutterapp/main.dart';
//flutter.io/testing
void main() {
  testWidgets('Clicking tile opens it', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(MyApp());
    //expect(테스트하려는 값, 기대값)
    expect(find.byIcon(Icons.launch), findsNothing);

    await tester.tap(find.byType(ExpansionTile).first);
    await tester.pump(); //rebuild widget!

    expect(find.byIcon(Icons.launch), findsOneWidget);
  });
}





Widget 테스트를 알리는 testWidgets를 사용해서 화면 테스트를 실행한다.

화면에서와 같이 초록색 launch아이콘을 찾고 findNothing 리스트를 누르기 전에 상세정보가 나오기 전이므로 아무것도 안나옴을 테스트한다.

해당 줄을 통과하면 ExpansionTile 첫번째 리스트를 클릭,

pump()를 통한 widget rebuild후

다시 luanch아이콘을 찾는다.

위에 테스트 결과는 성공.






2.JSON serialization, and immutables Part 1.
서버와의 통신 후 받아온 결과를 화면에 받아주기 위해서 필요한 작업을 위해 json serialization에 관련된 작업이 필요하다.


https://github.com/HackerNews/API 여기에서 정보를 받아다가 테스트를 한다.


- test폴더 아래 json_test.dart파일을 생성한다.



import 'package:flutter_test/flutter_test.dart';
import 'package:flutterapp/json_parsing.dart';

void main(){
  test("parses top stories.json", (){
    //https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty
    const jsonString="[22934126, 22933697, 22933265, 22933810, 22934848, 22933479, 22934704, 22932134, 22924015, 22930965, 22931595, 22925091, 22925087, 22925050, 22928608, 22933182, 22931725, 22918980, 22928557, 22929871, 22924813, 22924839, 22930661, 22933359, 22928292, 22928178, 22934091, 22924929, 22931339, 22925511, 22928726, 22925142, 22927190, 22927221, 22929375, 22934941, 22934199, 22919046, 22930227, 22926238, 22924118, 22932393, 22911533, 22930820, 22923025, 22929287, 22933385, 22930643, 22922454, 22933201, 22933195, 22931570, 22928231, 22932794, 22924869, 22928923, 22924013, 22931690, 22933172, 22931166, 22925442, 22925378, 22922774, 22916281, 22924786, 22928226, 22926080, 22907254, 22925484, 22916782, 22927310, 22918467, 22925878, 22920437, 22921986, 22919072, 22927365, 22919808, 22922582, 22918437, 22918770, 22918208, 22927072, 22919843, 22919721, 22933408, 22915831, 22915837, 22933024, 22926764, 22923195, 22922475, 22923904, 22919845, 22921152, 22918112, 22922372, 22913871, 22920315, 22928571, 22922277, 22920143, 22920952, 22929268, 22929251, 22915200, 22926165, 22920810, 22931401, 22916156, 22921294, 22927309, 22914610, 22932800, 22908224, 22921127, 22909676, 22920267, 22931859, 22920764, 22914927, 22930868, 22908044, 22918603, 22916392, 22912378, 22917447, 22930070, 22926724, 22911379, 22916061, 22909984, 22921580, 22912226, 22920275, 22918563, 22921107, 22914173, 22929277, 22924981, 22915273, 22920181, 22907200, 22919697, 22919711, 22919259, 22928651, 22917944, 22918844, 22920680, 22916756, 22919213, 22927808, 22927723, 22915213, 22915469, 22920750, 22931460, 22922779, 22914089, 22909419, 22931825, 22915584, 22916158, 22907211, 22916979, 22915834, 22915427, 22932326, 22931179, 22915037, 22920083, 22912349, 22911579, 22910288, 22913900, 22911438, 22910702, 22933837, 22925368, 22911911, 22922476, 22908688, 22916869, 22915620, 22909998, 22911356, 22909085, 22910224, 22921263, 22925359, 22931009, 22915062, 22915055, 22928936, 22919500, 22914607, 22910269, 22908124, 22925725, 22914430, 22925573, 22922879, 22914789, 22919242, 22931290, 22910281, 22926884, 22913373, 22922390, 22907306, 22917150, 22914197, 22928870, 22910685, 22914124, 22910701, 22926270, 22911370, 22916127, 22926581, 22917281, 22923383, 22917420, 22907465, 22910254, 22909229, 22915025, 22920520, 22926392, 22915716, 22915660, 22911691, 22907539, 22926950, 22928996, 22928983, 22930622, 22912179, 22928906, 22920983, 22922491, 22927083, 22913519, 22914560, 22930177, 22911522, 22918795, 22923125, 22915517, 22909513, 22908194, 22913750, 22917941, 22910394, 22916787, 22910903, 22919044, 22909570, 22909198, 22918668, 22908734, 22922761, 22914431, 22912431, 22907337, 22915696, 22909290, 22907367, 22912861, 22928717, 22913939, 22918749, 22925600, 22909366, 22920202, 22909134, 22912256, 22923265, 22931151, 22930565, 22930496, 22931230, 22919122, 22919001, 22916908, 22920309, 22912108, 22931739, 22919074, 22923797, 22919329, 22913158, 22914297, 22918958, 22909953, 22919181, 22914373, 22931406, 22909450, 22911000, 22912162, 22930377, 22911750, 22919465, 22908451, 22926256, 22928889, 22916245, 22915411, 22913632, 22907472, 22931153, 22912325, 22910866, 22915330, 22926839, 22912445, 22914987, 22912372, 22908516, 22910532, 22910946, 22924455, 22925973, 22916278, 22907644, 22914595, 22911319, 22917678, 22908639, 22920110, 22916556, 22910616, 22909601, 22918647, 22917029, 22930279, 22916806, 22915874, 22907499, 22917396, 22915460, 22920953, 22921665, 22908457, 22908129, 22907547, 22927146, 22922777, 22917921, 22908908, 22917824, 22912879, 22912252, 22916506, 22922472, 22911894, 22928809, 22926226, 22918988, 22912719, 22915334, 22910237, 22922799, 22910650, 22915679, 22918140, 22918127, 22915596, 22918836, 22917958, 22908480, 22919595, 22919538, 22914467, 22918518, 22920259, 22908781, 22918168, 22913885, 22913818, 22926019, 22910859, 22910721, 22923174, 22921635, 22926480, 22922773, 22919629, 22914437, 22913015, 22921571, 22918771, 22918585, 22911664, 22913140, 22917968, 22917587, 22912684, 22910065, 22913704, 22916139, 22914737, 22913018, 22911178, 22912862, 22909921, 22920494, 22910243, 22916643, 22914633, 22911671, 22911470, 22914427, 22907699, 22911024, 22914145, 22910371, 22929316, 22911725, 22913599, 22909095, 22911437, 22920965, 22923670, 22908063, 22913031, 22912936, 22917984, 22915301, 22920061, 22914483, 22920509, 22916111, 22919227, 22909167, 22918808, 22918404, 22908016, 22907975, 22914375, 22913318, 22920687, 22915227, 22908481, 22910561, 22909786, 22923374, 22914615, 22912353, 22911816, 22919627, 22908380, 22907246, 22933381, 22908489, 22910568, 22909804, 22926234, 22926664, 22927373, 22923647, 22928769, 22927802, 22923232, 22914828, 22926902, 22909524, 22920644, 22918286 ]";

    expect(parseTopStories(jsonString).first, 22934126);
  });

  test("parses item.json", (){
    //https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty
    const jsonString="""{ // '사용시오류가 발생함. """로 표현해야함.
        "by" : "dhouston",
    "descendants" : 71,
    "id" : 8863,
    "kids" : [ 9224, 8917, 8952, 8884, 8887, 8869, 8958, 8940, 8908, 9005, 8873, 9671, 9067, 9055, 8865, 8881, 8872, 8955, 10403, 8903, 8928, 9125, 8998, 8901, 8902, 8907, 8894, 8870, 8878, 8980, 8934, 8943, 8876 ],
    "score" : 104,
    "time" : 1175714200,
    "title" : "My YC app: Dropbox - Throw away your USB drive",
    "type" : "story",
    "url" : "http://www.getdropbox.com/u/2/screencast.html"
  }""";
    expect(parseArticle(jsonString).by, "dhouston");
  });
}



- parseTopStories와 parseArticle은 json_parsing.dart에 구현.




import 'src/articles.dart';
import 'dart:convert' as json; //using dart:convert! : parsing json and dart


List<int> parseTopStories(String jsonStr){
  //take string and generate the map
  final parsed = json.jsonDecode(jsonStr);
  inal listOfIds = List<int>.from(parsed);
  return listOfIds;
}

Article parseArticle(String jsonStr){
  final parsed = json.jsonDecode(jsonStr);
  Article article = Article.fromJson(parsed);
  return article;
}




parseArticle에서 받은 string을 Article객체로 만들기위해서 에피소드1 article.dart에 fromJson()을 생성한다.




factory Article.fromJson(Map<String, dynamic> json){
    //Dart에 factory참고
    if(json == null) {
      return null;
    }
      
    return Article(
      text: json['text'] ?? '[null]',
      url: json['url'],
      by: json['by'],
      time: json['time'],
      score: json['score'] ?? 0,
    );
  }

json_test.dart를 테스트한 결과 성공이 떨어진다.

dart:convert를 통해 serialization이 가능하지만 좀 더 간편하고 효율적으로 직접 코딩하는 대신
flutter에서는 plugin을 제공한다.

[Flutter] Flutter1 시작(The Boring Flutter Development Show)

2020-04-20T07:11:00.001-07:00

Flutter?
- Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

1. Android studio로 시작하기

- 플러그인 부터 업데이트 하기.
- Android Studio > Check for Updates on macOS
- Help > Check for Updates on Linux

위에 Dart, Flutter를 선택하여 Update and Restart 버튼 클릭.

- 안드로이드 스튜디오 재시작

- 프로젝트 생성하기

2. 간단한 리스트만들기(like todoapp)

- lib/src/article.dart 파일 생성

class Article{
 final String text;
 final String domain;
 final String by;
 final String age;
 final int score;
 final int commentsCount;

 const Article({this.text, this.domain, this.by,this.age, this.score, this.commentsCount});
}

final articles =  [
 new Article(
  text: "Circular Shock Acoustic Waves",
  domain: "wiley.com",
  by: "zdw",
  age: "3 hours",
  score: 177,
  commentsCount: 62,
 ),
 new Article(
  text:"BMW says electric car mass",
  domain: "reuters.com",
  by:"Mononokay",
  age:"2 hours",
  score: 81,
  commentsCount: 128
 ),
 new Article(
  text: "Evloution Is the New Deep Learning",
  domain: "sentient.ai",
  by: "jonbaer",
  age: "4 hours",
  score: 200,
  commentsCount: 248 
 ),
 new Article(
  text: "Animal Medical Learning",
  domain: "anmei.ai",
  by: "jonbaer",
  age: "8 hours",
  score: 150,
  commentsCount: 22
 )
]

A. ListTile를 이용한 todolist

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'src/articles.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Article> articleList = articles;


  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: ListView( //Listview는 스크롤을 가짐
        children: articleList.map(_buildItem).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget _buildItem(Article arc){
    return Padding(padding: EdgeInsets.all(16.0),
    child: ListTile(
      title: Text(arc.text, style: TextStyle(fontSize: 24.0)),
      subtitle: Text("${arc.commentsCount} comments"),
      onTap: () async{
        //TODO: URL Launcher을 사용
        String url = "http://${arc.domain}";
        if(await canLaunch(url)){
          await launch(url);
        }
      },
      )
    );
  }
}

B. ExpansionTile을 이용한 todolist

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'src/articles.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Article> articleList = articles;


  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: RefreshIndicator(
        onRefresh: () async{ //a[Future] must complete when the refresh operation is finished.
          await Future.delayed(const Duration(seconds: 1));
          setState((){ 
            //새로고침이 끝나면 맨 첫번째 목록이 사라짐.
            //setState()안에 구현하지 않으면 아무 변화가 없음.
            articleList.removeAt(0);
          });
        },
        child: ListView( //Listview는 스크롤을 가짐
        children: articleList.map(_buildItem).toList(),
         ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget _buildItem(Article arc){
    return Padding(padding: EdgeInsets.all(16.0),
    child: ExpansionTile(
      //ExpansionTile안에 자식은 무조건 column 형식.
      title: Text(arc.text, style: TextStyle(fontSize: 24.0)),
      children: <Widget>[
         Row(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           //start: start on the left
           // end: start on the right
           // spaceEvenly
           // spacebetween:
           children: <Widget>[
             Text("${arc.commentsCount} comment"),
             IconButton(
               icon: Icon(Icons.launch),
               color: Colors.green,
               onPressed: () async {
                 final url = "http://${arc.domain}";
                 if(await canLaunch(url)){
                   await launch(url);
                 }
               },
             )
           ],
         )
        ]
      )
    );
  }
}

[Flutter] Flutter layout Row,Column,Wrap

2019-11-10T00:15:00.000-08:00

- 자주쓰는 Flutter Layout은 Container, Row, Column, Wrap이 있다.

- Flutter layout의 속성들을 보면 CSS에서 div { display:flex; }일때의 효과와 비슷하다.

- css에서

**align-items(y축)

flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
stretch (default): stretch to fill the container (still respect min-width/max-width

** justify-content(x축)

flex-start (default): items are packed toward the start line
flex-end: items are packed toward to end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them
space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

- flutter에서
mainAxisAlignment => align-items
crossAxisAlignment => justify-content

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

*Row/Column만으로 Layout을 만드는 경우 발생할수 있는 문제점들.

- Row/Column 의 경우 children에서 플랫폼 사이즈를 넘게 되면 overflow가 발생한다.
=> 이때는 Expanded를 사용한다.

class Demo extends StatelessWidget{

  @override

  Widget build(BuildContext context){

    return Row(

      mainAxisAlignment: MainAxisAlignment.spaceAround,

      crossAxisAlignment: CrossAxisAlignment.start,

      children: <Widget>[

        Square(color: Colors.blueGrey, size:100.0),

        Square(color: Colors.blue, size:150.0),

       Square(color: Colors.pink, size:50.0),

        Square(color: Colors.purple, size:50.0),

        Square(color: Colors.black, size:50.0),

        Square(color: Colors.brown, size:80.0),

        Square(color: Colors.teal, size:100.0),

      ],

    );

  }

}

class Demo extends StatelessWidget{

  @override

  Widget build(BuildContext context){

    return Row(

      mainAxisAlignment: MainAxisAlignment.spaceAround,

      crossAxisAlignment: CrossAxisAlignment.start,

      children: <Widget>[

        Expanded(child:  Square(color: Colors.blueGrey, size:100.0)),

        Expanded(child: Square(color: Colors.blue, size:150.0)),

        Expanded(child: Square(color: Colors.pink, size:50.0)),

        Expanded(child:  Square(color: Colors.purple, size:50.0)),

        Expanded(child: Square(color: Colors.black, size:50.0)),

        Expanded(child: Square(color: Colors.brown, size:80.0)),

        Expanded(child: Square(color: Colors.teal, size:100.0)),

      ],

    );

  }

}

- 자동으로 Line이 바뀌지 않는다.
=> 이때는 Wrap을 사용한다.
=> Wrap의 Children은 Expanded가 아니어야 한다.

class Demo extends StatelessWidget{

  @override

  Widget build(BuildContext context){

    return Wrap(

      runSpacing: 5.0, //between line

      spacing: 5.0, //between chldren

      // direction: Axis.vertical, 기본은 horizontal

      alignment: WrapAlignment.spaceBetween, // mainAxisAlignment와 같음.

      crossAxisAlignment: WrapCrossAlignment.start, 

      children: <Widget>[

         Square(color: Colors.blueGrey, size:100.0),

        Square(color: Colors.blue, size:150.0),

       Square(color: Colors.pink, size:50.0),

        Square(color: Colors.purple, size:50.0),

        Square(color: Colors.red, size:100.0),

        Square(color: Colors.black, size:50.0),

        Square(color: Colors.brown, size:80.0),

        Square(color: Colors.teal, size:100.0),

      ],

    );

  }

}

[mysql] local 설치하기 X64

2019-02-10T06:01:00.001-08:00

1. Mysql 사이트에서 자신의 컴퓨터 OS에 맞는 버전을 다운로드한다.

https://dev.mysql.com/downloads/mysql/

64bit이므로 해당하는 버전 다운로드 클릭.

회원가입또는 로그인 없이 아래 No thanks, 부분을 클릭하면 다운로드 시작.

2. 다운로드 된 zip을 C:/{..놔두고싶은 경로..}/mysql로 압축 풀기.

3. 컴퓨터 아이콘 오른쪽 클릭 -> 속성 -> 고급 시스템 설정 클릭

고급 탭에서 환경변수를 클릭.

4. mysql 설치경로를 Path부분에 추가해서 확인버튼 클릭.

6. 명령창(cmd)를 마우스 오른쪽 클릭 후 관리자로 열기 클릭.

7. mysql를 설치한 경로로 이동.

-> bin으로 이동후

'mysqld --install' 실행.

실행 후 Service successfully installed가 뜨면 성공.

8. mysqld --initialize 를 실행.

9. mysql 폴더를 보면 data라는 폴더가 새로 생성됨.

10. data 폴더로 이동 후 계정명.err 라는 파일을 열기.

10. 마지막 줄에 root@localhost: #j6..... 이라는 부분이 있는데 맨끝에 #j6...가

mysql 접속 패스워드임.

11. 명령창(cmd)로 돌아와서

'mysqld' 실행.

12. mysql -u root -p 실행 시 ERROR2003과 같은 메시지가 노출됨. -> Mysql server를 start 해줘야함.

13. mysql server start 방법은 두가지

- mysql workbench를 통해서 startup!

https://dev.mysql.com/downloads/workbench/

- 컴퓨터 관리에서 서비스 및 응용프로그램 -> 서비스 ->MySQL을

마우스 오른쪽클릭 -> 시작.

14. mysql -u root -p를 재 실행 하면 접속됨.

15. 패스워드를 바꿔주기 위해서는 아래와 같이 실행.

ALTER USER 'root'@'localhost' IDENTIFIED BY '패스워드';

[REACTJS]8일차 Dynamic Form With React

2018-09-26T20:46:00.005-07:00

1. 입력받는 input 글자에 따라서 오류메시지를 보여주는 코드

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
 
  <script type="text/babel">
  const rootElement = document.getElementById("root");
  
   /*
   
   Then this ref prop is definitely just a React thing. It makes things a little bit more direct, because here, we see we're assigning the inputNode, and then we're referencing that inputNode to get the value.
   
   */
   
  class App extends React.Component {
   state = {
    error : ''
   }
  
   handleSubmit = event => {
    event.preventDefault();
    console.log(event.target.elements.username.value);
    console.log(this.inputNode.value);
    
    const error = this.getErrorMessage(event.target.elements.username.value);
    if(error){
     alert(`error : ${error}`);
    }else{
     alert('success');
    }
   }
   
   handleChange = event => {
    console.log(this.inputNode.value);
       this.setState({
     error: this.getErrorMessage(this.inputNode.value),
    })
   }
   
   getErrorMessage = (msg) => {
   
    if(msg == '' || msg.length < 3){
     return ` ${msg} : 3글자 이상이여야 합니다.`
    }
    
    return null;
   }
   
   render(){
       const {error} = this.state
    return (
     <form onSubmit={this.handleSubmit}>
      <label>
       Name: <input type="text" name="username" 
       onChange={this.handleChange} ref={ node => this.inputNode = node }
       />
      </label>
      {error ? 
       (
        <div>{error}</div>
       ): null
      
      }
      <button type="submit" disabled={Boolean(error)}>submit</button>
     </form>
    
    )
   }
  }
 
 
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
  
  </script>
 </body>
</html>

2. input, select, textarea 사용

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
 
  <script type="text/babel">
  const rootElement = document.getElementById("root");
  
  
   
  class App extends React.Component {
    static availableOptions = [
    'apple',
    'grape',
    'cherry',
    'orange',
    'pear',
    'peach',
   ]  
   
   state = {
    multiline : '',
    comma : '',
    multiSelect :  []
   }
   changeMultiline = (event) => {
    const value = event.target.value;
    console.log(value);
    const allVals = value
        .split('\n')
        .map(v => v.trim())
    console.log(allVals)
    this.setState({
     multiline : value
     ,comma: allVals.join(',')
     ,multiSelect : allVals.filter((val) => (
      App.availableOptions.includes(val)

                                                 //Array.prototype.includes는 true,false로 반환.
     ))
    });
   }
   
   changeMultiSelect = (event) => {
    const value = event.target.value;
    console.log(value);
    const allVals = Array.from(
      event.target.selectedOptions
    ).map(o => o.value)
     this.setState({
      multiSelect: allVals,
      multiline: allVals.join('\n'),
      comma: allVals.join(','),
    })
   }
   
   changeCommna = (event) => {
    const value = event.target.value;
    console.log(value);
    const allVals = value
        .split(',')
        .map(v => v.trim())
    console.log(allVals)
    this.setState({
     comma : value
     ,multiline: allVals.join('\n')
     ,multiSelect : allVals.filter((val) => (
      App.availableOptions.includes(val)
     ))
    });
   }
   
   render(){
    const {comma, multiline, multiSelect } = this.state
    return (
     <div>
      <p>
       Comma seperated values:<br/>
       <input type="text" name="comma" value={comma} onChange={this.changeCommna}/> 
       <br/>
       You provided a `value` prop to a form field without an `onChange` handler.

                                                       This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
       input일때 value를 사용하는 경우 readonly를 함께 사용하거나
       defaultValue를 사용하여야 한다. 이를 명시하여 REACT에 변경이 안되는 값임을 알린다. 
       React는 컴포넌트 객체의 상태를 props와 state, 2가지로 구분해서 관리하기 때문에 변경되는 값인 경우에는
       value와 onchange를 함께 사용.
      </p>
      <p>
       multiline values;<br/>
       <textarea name="multi" value={multiline} onChange={this.changeMultiline} rows={
                      App.availableOptions.length
                    }></textarea>
      </p>
      <p>
       multiSelect values:<br/>
       <select name="select" multiple onChange={this.changeMultiSelect} value={multiSelect} size={
                      App.availableOptions.length
                    }>
        {App.availableOptions.map((val) => (
         <option key={val} value={val}>{val}</option>
        ))}
       </select>
       <br /> Each child in an array or iterator should have a unique "key" prop.
      </p>
     </div>
    
    )
   }
  }
 
 
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
  
  </script>
 </body>
</html>

[REACTJS]7일차 state와 componentWillUnmount

2018-09-25T23:55:00.004-07:00

1. function 함수를 통해서 React DOM 구현 코드

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
  
  <script type="text/babel">
  const rootElement = document.getElementById("root");
  
  const state = { eventCount: 0, usename : ''};
  
  function App(){
   return (
   
    <div>
     <p>There have benn {state.eventCount} events</p>
     
     <p><button onClick={
      () => setState({
       eventCount : state.eventCount + 1
      })
     }>abc</button></p>
     
     <p>{state.username} click</p>
     <p><input onKeyUp={focusme}/></p>
    </div>
   
   )
  }
  
  function focusme(event){
   console.log(event.nativeEvent);
   setState({
    username : event.target.value
   });
  }
  
  function setState(newState){
   Object.assign(state, newState)
   renderApp()
  }
  
  function renderApp(){
   const element = <App />
   ReactDOM.render(element, rootElement);
  }
  
  renderApp();
  
  </script>
 </body>
</html>

function을 통한 ReactDom.render의 경우 setState()라는 함수 생성이 필요하다.

2. JSX를 통한 React 구현 코드

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
  
  <script type="text/babel">
  const rootElement = document.getElementById("root");
  
  
  
  class ShowDiv extends React.Component {
   constructor(props){
    super(props);
    this.state = {
     eventCount : 0,
     username : '',
     time : 0,
     running : false
    }
    
    this.focusme = this.focusme.bind(this);
   
   }
   
   /*
   count(){
    this.setState((state)=>({
     eventCount : state.eventCount + 1,
    }));
   }

                              //위에 ES6는 아래와 같이 구현 가능하다.

                              //이렇게 구현한 경우에도 this와 bind 시켜줘야한다.

    this.setState(function(state){
     return {
      eventCount : state.eventCount + 1
     
     }
    });
   */
   
   componentWillUnmount(){
   /*
    It’s called before the component is removed from the page. It should be used 
    when your component has things running which need to be cleaned up, 
    especially asynchronous tasks like setTimeout, setInterval, or ajax requests.
   */
    console.log("hide div");
   }
 
   countA = () => {
    this.setState( ({eventCount}) => ({
     eventCount : eventCount + 1
    }))
   }

                        //ES6의 arrow function을 사용하는 경우 에는 this와 bind시켜줄 필요가 없다.
   count = () => {
    this.setState(state => (
     {eventCount : state.eventCount + 1}
    ))
   }

                       //function 형식으로 구현한 경우 constructor에서 this와 bind 처리를 해줘야한다.
   focusme(event){
    this.setState({
     username : event.target.value
    });
   }
  
   render(){
           const { eventCount, username, time} = this.state;
    return (
     <div>
     <p>There have benn {eventCount} events</p>
     <p><button onClick={this.countA}>add</button></p>
     <p><button onClick={this.count}
     >click count</button></p>
     
     <p>{username} click</p>
     <p><input onKeyUp={this.focusme}/></p>
     
     </div>
    
    )
   }
  }
  
  class App extends React.Component {
   state = {showStopWatch: true}
   changeValue = () => {
    this.setState((st) => ({
    
     showStopWatch: !st.showStopWatch,
    
    }));
   
   }
   
   render() {
     const {showStopWatch} = this.state
     return (
    <div>
      <label>
     Show Stop Watch{' '}
     <input
       type="checkbox"
       checked={showStopWatch}
       onChange={this.changeValue}
     />
      </label>
      <hr />
      {showStopWatch ? <ShowDiv /> : null}
    </div>
     )
   }
  }
  
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
  
  </script>
 </body>
</html>

[REACTJS]6일차 style 적용

2018-09-25T21:31:00.000-07:00

1. style을 적용하기 위한 코드

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
   <style>
   .box--small{
   width: 60px;
   height: 60px;
   }
   
   .box--medium {
   width: 80px;
   height: 80px;
   }
   
   .box--large {
    width: 100px;
    height: 100px;
   
   }
   
   </style>
  <script type="text/babel">
  const rootElement = document.getElementById("root");
  
  function Box({style, size, className = '', ...rest}){
   console.log({...rest});
   const sizeClass = size ? `box--${size}` :'' ;
   return (
    <div className={`box ${className} ${sizeClass}`}
     style={{paddingLeft:20, ...style}}
     {...rest} />
   
   )
  }

  const element = ( 
   <div>
    <Box size="small" pid="go1" style={{backgroundColor: 'lightblue'}}>

Hi Box</Box>
   
    <Box size="medium" style={{backgroundColor: 'pink'}}>

Hi Second Box</Box>
   
    <Box size="large" style={{backgroundColor: 'orange'}}>

Hi Third Box</Box>
   </div>
   )
  
  ReactDOM.render(element, rootElement);
  
  </script>
 </body>
</html>

{...rest}를 찍어보면 {children : "Hi Box" , pid : "go1"}이 전달됨을 확인할수있다.

[REACTJS]5일차 rendering element

2018-09-25T07:46:00.001-07:00

1. React Only Updates What’s Necessary!!

React elements 은 불변이다. element는 한번 생성된 이후로는 , you can’t change its children or attributes.
React DOM은 element요소와 그 children들을 이전의 값들과 비교하여 only applies the DOM updates necessary to bring the DOM to the desired state!
{time}부분의 string만 계속 업데이트됨을 확인할수있다.

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
   
  <script type="text/babel">
  const rootElement = document.getElementById("root");
 
  function tick(){
   
   const time = new Date().toLocaleTimeString()
   const element = <div>It is {time}</div>
   ReactDOM.render(element, rootElement);
   
  }
  
  setInterval(tick, 1000);
  
  </script>
 </body>
</html>

[REACTJS]4일차 조건에 따른 render page

2018-09-25T07:23:00.004-07:00

1. 조건문에 따라서 render page를 다르게 할수있다.
- tag의 argument를 string 형태로 받지 않고 아래와 같이 {message}로 바로 전달받을수 있다.

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
   
  <script type="text/babel">
  function Message({message}){
   return(
    <div>
    {message ?
     <div>{message}</div> : 
     <div>No message</div>}
    </div>
   )
   
  }
  
  const rootElement = document.getElementById("root");
  const element = <Message message="hi" />;
  ReactDOM.render(element, rootElement);
  </script>
 </body>
</html>

- 기존대로 argument인 props를 사용하여 부르는 경우.

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
   
  <script type="text/babel">
  function Message(props){
   console.log(props);
   return(
    <div>
    {props.message ?
     <div>{props.message}</div> : 
     <div>No message</div>}
    </div>
   )
   
  }
  
  const rootElement = document.getElementById("root");
  const element = <Message message="hi" />;
  ReactDOM.render(element, rootElement);
  </script>
 </body>
</html>

[REACTJS]3일차 prop types

2018-09-25T06:57:00.000-07:00

1. Proptype을 명시해주자!

You can use the prop-types module to validate a custom React component's props.

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
   
  <script type="text/babel">
  function SayHello(props){
   return (
    <div>
     Hello {props.firstName} {props.secondName} {props.FinalName}
    </div>
   )
  }
  
  SayHello.propTypes = {
   firstName(props, propName, ComponentName) {
    if(typeof props[propName] !== 'string'){
     return new Error(`Hey, only string ${typeof props[propName]}!`);
    }
   },
   secondName : PropTypes.string,
   finalName : PropTypes.string.isRequired
  }
  
  const rootElement = document.getElementById("root");
   
  const element = <SayHello firstName={true} secondName="secondName" finalName={true}/>
  ReactDOM.render(element, rootElement);
  </script>
 </body>
</html>

PropType을 명시하기 위해서는

 <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script> 를 추가시켜야한다.

secondName과 값이 표기하면 string값만 받는다는 뜻이며
따로 new Error와 같이 Exception message를 지정해주지 않으면 default message로

Warning: Failed prop type: Invalid prop `finalName` of type `boolean` supplied to `SayHello`, expected `string`.
in SayHello
과 같이 console창에 표시된다.

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
   
  <script type="text/babel">
  SayHello.propTypes = {
   firstName(props, propName, ComponentName) {
    if(typeof props[propName] !== 'string'){
     return new Error(`Hey, only string ${typeof props[propName]}!`);
    }
   },
   secondName : PropTypes.string,
   finalName : PropTypes.string.isRequired
  }
  
  function SayHello(props){
   const {firstName, secondName, finalName} = props;
   return (
    <div>
     Hello {firstName} {secondName} {finalName}
    </div>
   )
  }
  
  
  
  const rootElement = document.getElementById("root");
  const element = <SayHello firstName="amy" secondName="runa" finalName="tuna" />
  ReactDOM.render(element, rootElement);
  </script>
 </body>
</html>

- React.Component 를 사용한 코드

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
   <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
   
  <script type="text/babel">
  class SayHello extends React.Component{
  
   static propTypes = {
    firstName : PropTypes.string,
    secondName : PropTypes.string,
    finalName : PropTypes.string
   }
   
   render(){
    const {firstName, secondName, finalName} = this.props;
    
    return (
     <div>
      Hello {firstName} {secondName} {finalName}
     </div>
    
    )
   }
  }
  
  const rootElement = document.getElementById("root");
  const element = <SayHello firstName="amy" secondName="runa" finalName="tuna" />
  ReactDOM.render(element, rootElement);
  </script>
 </body>
</html>

[REACTJS]2일차 재사용성을 위한 HTML tag화 시키기.

2018-09-25T02:18:00.003-07:00

1. Reusable Component React JS

- 재사용성을 위하여 HTML tag를 새롭게 생성하여 사용할수 있다.

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  
  <script type="text/babel">
   const rootElement = document.getElementById("root");
   const Message = props => { return <div>{props.msg}</div>}
   const element = (
    <div className="container">
     {Message({msg: 'goodbye'})}
     {React.createElement(Message, {msg: 'hello'})}
     <Message msg="wow" />
    </div>
   )
   ReactDOM.render(element, rootElement);
  </script>
 </body>
</html>

const Message = props => <div>{props.msg}<div>로 표기해도 똑같은 결과가 나온다.
차례대로
goodbye
hello
wow
가 화면에 찍힌다.

element 이름을 소문자로 시작하는 message로 변경하면 HTML tag로 사용이 불가능하여 <Message />이 부분에서 오류가 발생한다.
HTML tag롤 사용하기 위해서는 첫글자를 대문자로 사용해야 한다.

2. 재사용성을 더 높이기 위하여 children 속성을 사용해본다.

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  
  <script type="text/babel">
   const rootElement = document.getElementById("root");
   const Message = props =>  <div>{props.children}</div>
   const element = (
    <div className="container">
     {Message({children: 'goodbye'})}
     {React.createElement(Message, {children: 'hello'})}
     <Message children="wow" />
     <Message>You can show Me Now!</Message>

     <Message>Hi 1<Message>Hello 2</Message></Message>
    </div>
   )
   ReactDOM.render(element, rootElement);
  </script>
 </body>
</html>

태그 attribute 를 children으로 바꾸면 마지막 MESSAGE안에 태그를 자동 파싱하여 화면에 보여준다.

[REACTJS]1일차 REACTJS

2018-09-25T01:54:00.001-07:00

1. REACTJS
- https://reactjs.org/

2. 일반 HTML과 REACTJS.

- 일반 HTML에서 HELLO WORLD 코드

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  
  <script type="text/javascript">
   const rootElement = document.getElementById("root");
   const element= document.createElement("div");
   element.textContent = "hello world";
   element.className = "container";
   rootElement.appendChild(element);
  </script>
 </body>
</html>

- REACTJS를 사용하여 HELLO WORLD 코드

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script type="text/javascript">
   const rootElement = document.getElementById("root");
   
    const element = React.createElement(
    'div',
    {className: 'container'},
    'Hello World'
     )
   ReactDOM.render(element, rootElement);
      
   console.log(element);
  </script>
 </body>
</html>

REACTJS를 사용하기 위해서는 REACT 라이브러리 JS를 추가시켜줘야한다.
좀더 간단하게 표현하기 위해서 JSX를 사용한다.

BABEL를 사용하게 되면 JSX를 브라우저에서 파싱이 가능한 javascript 상태로 만들어줌으로 다음과 같이 사용하게 된다.

- Babel를 사용한 JSX로 표현한 REACTJS

<html>
 <head>
 </head>
 <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  
  <script type="text/babel">
   const rootElement = document.getElementById("root");
   
   const props = {
    className : 'container',
    children : 'Hello World'
   }
   const element = <div {...props} />;
   ReactDOM.render(element, rootElement);
  </script>
 </body>
</html>

script type을 text/babel로 변경해줘야 한다.

const element = <div className="container">Hello World</div>
와 같이 표현해도 화면에 Hello World가 찍힌다.

{}를 사용하면 자바스크립트를 사용할수 있으므로
const myClassName = "container";
const content = "Hello World";

const element = <div className={myClassName}>{content}</div>

와 같이 표현이 가능하다.

const element = "<div classNAme='container'>hello world</div>"; 이렇게
쌍따옴표로 쓰게되면 해당 부분이 string으로 그대로 출력된다.

const element = <div {...props} />를 사용하면
위에서 명시한 json정보 그대로 매핑이 되며 만약 className을 override를 하고 싶은경우

const elenet = <div {...props} className="my_class">
와 같이 뒤쪽에 override해줘야 한다.