ram2 🚗

1. Introduction

학습할 내용은!

✅  flutter가 어떻게 작동하는지의 기초

✅  flutter에서 layout 만들기

✅  앱 동작과 user interaction의 연결 (좋아요 버튼 누르는 것이 그 예)

✅  flutter 코드를 정갈하게 짜는 것

✅  반응형 앱을 만드는 것 (screen 크기에 따라 다른게 반응할 수 있음 !)

✅  앱의 일관된 형태와 느낌을 주도록 

2. Set up your Flutter environment (flutter 환경 설정)

📍 Visual Studio Code 사용

codelab 공식 문서에서 vscode를 다운받을 수 있도록 연결해두었다!

공식문서 링크 ⬇️ 

https://codelabs.developers.google.com/codelabs/flutter-codelab-first#1

개발 타깃 설정하기 (다음 중 원하는 os를 선택하면 된다.)

flutter의 가장 큰 장점이자 특징인 부분이다.

multi-platform toolkit이기 때문에 같은 코드로 서로 다른 os를 실행할 수 있다.

os는 주로 개발하고 싶은 os를 선택하면 된다.

• iOS
• Android
• Windows
• macOS
• Linux
• web

이때 직접 기기를 연결해서 사용해도 되고, simulator를 통해 개발해도 된다.

(나는 약 80%를 simulator로 개발한다!)

Flutter 설치하기

Flutter SDK 설치는 다음 공식 문서에 자세하게 설명되어 있다.

https://docs.flutter.dev/

codelab을 진행하기 위해서는 다음의 3가지만 있으면 된다.

1. Flutter SDK

2. Visual Studio Code (Flutter plugin이 설치된)

3. 개발 타깃에 요구되는 software (예를 들어, Visual Studio Code는 Windows, Xcode는 macOS)

(이 외에, flutter SDK 설치나 환경 설정에 어려움이 있다면, codelab 2단계에서 보여주는 StackOverflow를 참고하길 !)

3. Create a project

• Visual Studio Code를 실행하고 command palette를 Open. (  F1  또는  ctrl+Shift+P  또는  Shift+Cmd+P  )
• "flutter new"를 입력하고 그 결과 검색된 Flutter: New Project 를 선택한다.
  • 만약 flutter 환경 설정이 제대로 이루어졌다면, 다음과 같이 잘 뜨는 것을 확인할 수 있다.
• Flutter: New Project 를 선택하고 Appliction을 선택한다.
• 다음으로 폴더를 생성하고자 하는 위치와, 프로젝트 이름을 설정해주면 된다.
• 만약 다음과 같이 신뢰와 관련한 창이 뜬다면 Yes~~를 선택 !

여기까지 했다면 이제 바로 Flutter 개발을 시작할 수 있다 !!

codelab을 따라하기 위해 죄측 상단에 있는 아이콘을 누르고, pubspec.yaml 파일을 선택한다.

해당 폴더에 있는 내용 중, 가장 위 두 줄을 제외한 코드를 모두 지운 뒤, 이 코드를 복사해서 붙여넣어준다.

(name과 description부분은 그대로 둔다 !)

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 0.0.1+1

environment:
  sdk: '>=2.18.4 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

  english_words: ^4.0.0
  provider: ^6.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

이 pubspec.yaml은 앱에 대한 정보를 담고 있는 파일이다. 이 앱의 현재 버전, dependencies, assets 등의 정보가 있다.

• 다음은 같은 아이콘 내에 있는 analysis_options.yaml 파일을 바꿔준다.
  • 안에 있는 코드를 모두 지우고, 다음 코드를 붙여넣어준다.

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    prefer_const_constructors: false
    prefer_final_fields: false
    use_key_in_widget_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_const_constructors_in_immutables: false
    avoid_print: false

이 파일은 얼마나 엄격하게 우리가 짠 코드를 분석해야 하는지를 결정한다. 이 부분은 언제든지 바꿀 수 있으며, 현재는 우리가 처음 하는 것이기 때문에 쉽게 넘어가줘~ 하고 이야기하는 것과 같다.

- 마지막으로 main.dart 파일을 바꿔준다. (위치는 lib/main.dart)

파일에 있는 코드를 모두 지우고, 다음 코드를 붙여넣기 한다.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
        ],
      ),
    );
  }
}

이제 모든 setting이 끝났다 !!!!

오예 !! 🎉

본격적으로 다양한 위젯들을 사용해서 직접 코드를 짜보자 !!

4. Add a button

이제 Next button을 만들어보자 !

.

.

그 전에 앱을 Launch해봐야 한다. 

먼저  lib/main.dart  를 열어 target device가 선택되었는지 확인해본다.

vscode의 우측 하단을 보면 현재 지정된 target device를 확인할 수 있다. 바꾸고 싶다면, 이를 클릭해서 바꾸면 된다.

나는 기존에 연결해둔 기기가 있어 바로 그 기기로 설정이 되어있었다. 맥이라면 시뮬레이터를 열어 ios 기기를 사용할 수 있고, android studio를 통해 안드로이드 기기를 만들어 실행할 수 있다.

기기를 연결했다면 ! 한 번 실행해보자 !!

우측 상단에 있는 실행버튼을 눌러 실행하면 된다!

다음과 같이 뜨면 아주아주 잘 따라온 것이다 !!!!

만약 코드를 바꾸었다면, Command+s 또는 Ctrl+s를 하면 바로바로 결과가 바뀌는 것을 확인할 수 있다.

그렇지 않는다면, 코드랩에서 제시한 Hot Reload에 대한 stack overflow를 참고하길 !

이제 진짜 진짜 진짜 버튼을 만들어볼거다 !!!

lib/main.dart

// ...

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(appState.current.asLowerCase),

          // ↓ Add this.
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),

        ],
      ),
    );

// ...

다음과 같이 scaffold 내에 있는 Column에 ElevatedButton을 추가해준다.

이때 버튼을 누르면 콘솔에 다음과 같이 뜨는 것을 확인할 수 있다.

이제 main.dart가 어떻게 실행되는지를 이해해보자

lib/main.dart의 가장 상단에서 우리는 다음과 같은 코드를 찾아볼 수 있다.

// ...

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

// ...

우리는 main() 이라는 이름의 함수를 찾을 수 있는데, 이 함수 내에 있는 코드는 MyApp에 정의된 앱을 실행하도록 Flutter에 알려주는 것이다.

MyApp 클래스는 StatelessWidget을 확장한다. 위젯은 우리가 만든 모든 flutter app의 요소들인데, 앱 그 자체도 위젯이다.

MyApp에 있는 코드는 전체 앱을 구성한다. 이는 app-wide state(나중에 다룰 예정!) 를 생성하고, 앱의 이름을 짓고, 시각적 theme을 정의하고, "home" 위젯(그러니까, 앱의 시작 지점)을 설정할 수 있다.

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

// ...

flutter에는 app state를 관리하는 많은 방법들이 있다. 가장 쉽게 이야기할 수 있는 방법 중 하나는 ChangeNotifier이다.

MyAppState는 function에 앱이 필요로 하는 data를 정의한다. 

• state class는 변화를 알리는 ChangeNotifier를 확장한다. 예를 들어, 만약 현재 단어가 바뀌었다면, 앱에 있는 어떤 위젯이 이를 알 필요가 있는 것이다. 
• MyApp에 사용했듯이, ChangeNotifierProvider를 사용해서 상태를 생성하고, 앱에 정보를 제공한다. 이는 앱에 있는 어떤 위젯이라도 이 상태를 알 수 있게 한다.
• 즉, 쉽게 이야기하면 ChangeNotifier를 MyAppState에 사용하면, 앱에서 발생하는 변화들을 다른 위젯들이 알 수 있다는 것이다.
  • MyApp이 가장 상위 위젯이며, ChangeNotifier는 변화를 인지하고 이를 위젯에 알리는 역할임을 이해하면 더 쉽다

마지막으로 MyHomePage에 대해 알아보자.

이 위젯은 우리가 이미 수정한 위젯이다. 공식문서에서 설명한 내용을 그대로 가져와서 조금 쉽게 설명할 것이다.

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {           // ← 1
    var appState = context.watch<MyAppState>();  // ← 2

    return Scaffold(   // ← 3
      body: Column(    // ← 4
        children: [
          Text('A random AWESOME idea:'),        // ← 5
          Text(appState.current.asLowerCase),    // ← 6
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),
        ],      // ← 7
      ),
    );
  }
}

// ...

1. 모든 위젯은 위젯의 환경이 변경될 때마다 자동으로 호출되어 위젯이 항상 최신 상태를 갖도록 하는 build() method를 정의한다.
2. watch method를 사용하여 앱의 변화를 추적하고, 앱의 현 상태를 유지한다.
3. 모든 build 메서드는 위젯 또는 중첩된 위젯 트리를 반환해야 하는데, 이 경우 최상위 위젯은 Scaffold이다. Scaffold는 실제로 굉장히 자주 사용되며, main.dart에서 볼 수 있듯이, 다음과 같이 사용된다.  return Scaffold(); 
4. Column은 아주 자주 쓰이면서 가장 기본적인 layout widget이다. 이 위젯은 많은 수의 children을 가질 수 있으며, 위에서부터 아래로 배치한다. default로 column은 좌측 상단부터 시작하는데, 이를 center로 바꿔줄 수 있다. (뒤에서 다룰 예정)
5. Text("")의 형태로 쓰이며, "" 안에 원하는 문자열을 넣으면 그대로 화면에 그려진다.
6. 이 Text 위젯은 appState를 가지고 있으며, 이 클래스의 member에만 접근할 수 있다. (여기에서는 current). 
   WordPair은 asPascalCase, asLowerCase 또는 asSnakeCase와 같이 유용한 getter를 제공한다.
7. flutter에는 괄호가 굉장히 많이 쓰이는데, 쉼표는 사용하지 않아도 된다. 하지만, vscode에서는 쉼표를 사용할 경우, 다음과 같이 구분하기 쉽게 자동정렬이 되기 때문에 선택에 따라 사용하면 된다. 나는 경우에 따라 다른데, 코드가 길어지는게 싫은 경우 사용하지 않고, 구분이 필요할 경우 사용하는 편이다.

직접 해보자

MyAppState로 가서 getNext method를 추가해보자.

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  // ↓ Add this.
  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

// ...

getNext() 메소드는 current에 새로운 랜덤 WordPair를 재할당해준다. 또한 이를 notifyListeners()라 부르는데, (ChangeNotifier의 메소드 중 하나이다.)이는 MyAppState를 보고 있는 모든 사용자에게 알림을 준다.

lib/main.dart

// ...

    ElevatedButton(
      onPressed: () {
        appState.getNext();  // ← This instead of print().
      },
      child: Text('Next'),
    ),

// ...

이제 Next 버튼을 누를 때마다 단어가 바뀌는 것을 볼 수 있다 !!!

생각보다 너무 길어져서 다음 단계는 다음 글에 적어야겠다 !!

필요한 사람이 있을지 몰라 codelab의 step1~step4까지의 lib/main.dart 전체 코드이다.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
          ElevatedButton(
            onPressed: () {
              appState.getNext(); // ← This instead of print().
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

리엑트.. js, html, css 이 중 그 어느 것도 배운 적, 접한 적 없었지만... 굉장히 짧은 시간에 리엑트를 공부해야만 했다.

주어진 시간에 js부터 배우고, 차근차근 강의를 들으며 공부했다.

하지만.... 제대로 이해하고, 실전에 사용하기에는 자신감과 지식이 턱없이 부족했다.

이번 프로젝트를 돌아보면 거의 실전에 부딪히며 배웠던 것 같다.

그 중 리엑트로 마크다운 에디터와 뷰어 구현하는 부분을 정리해보려고 한다.

너무나 다행히 많은 사람들이 포스팅을 해두었고, 너무나 편리한 패키지가 있었기에 아주 쉽고 간단하게 사용할 수 있었다.

물론 뷰어를 하는 것에 있어 아주 오랜 시간 삽질을 했다는 것...은 잊지 못할 것 같다...하하

1. install

npm i @uiw/react-md-editor

2. import

import MDEditor from '@uiw/react-md-editor';

3. editor 사용하기

다음과 같이 사용하면 된다.

<div className="markarea">
	<div data-color-mode="light">
		<MDEditor height={865} value={mdinfo} onChange={setMD} />
	</div>
</div>

4. viewer 사용하기

사실 이 부분에서 삽질을 꽤 오래했다... 해당 패키지에 뷰어가 같이 있었는데 그걸 보지 못하고 자꾸 다른 viewer 패키지를 찾아 적용해봤던 것.... 그렇다보니 마크다운이 제대로 보여지지 않았다...

이렇게 .Markdown을 사용하고, source에 보여주고 싶은 마크다운 String을 가져오면 된다!!!

<div className="markdownDiv" data-color-mode="light" style={{padding:15}}>
	<MDEditor.Markdown
		style={{ padding: 10 }}
		source={mkdStr}
    />
</div>

이렇게 첫 웹 경험이자 리엑트 경험을 성공적으로 마무리했다!!!

많은 우여곡절이 있었지만.. 팀원들이 없었다면.......정말....난 아무것도 할 수 없었을거다...

리엑트 조금 더 친해져보자구.. 내가 잘 할게...🥹

state

props

.

.

특정 코드들이 첫 번째 component render에서만 실행되게 하자.

처음 한 번만..!!

나중에는 상태가 변해도 실행되지 않도록.

우리가 state를 변경할 때 모든 code가 다시 실행된다. 

하지만 그럴 필요가 없을 경우!! 어떻게 해야할까?

useEffect를 사용한다. 이 useEffect는 두 개의 argument를 가지는데, 첫 번째는 우리가 딱 한 번만 실행하고 싶은 코드이다.

ex) useEffect(function1, [])

두번째는 ... 마법같다....?

결국, useEffect에 대해 배웠다. 이 함수는 계속 실행되지 않도록 하는 것. 

한 번만 실행해도 되는 것들을 다루는 함수이다.

두 번째 argument는..

이럴 때 사용한다. 특정한 부분이 변했을 때만 다시 찍히도록 하고 싶은 경우!

예를 들어, 검색 창에서 문자를 검색하고, 검색 아이콘을 누른다면 같은 단어를 입력하고 그 상태에서 버튼을 여러번 클릭하면 클릭 할 때마다 상태가 변한다. 즉, 텍스트 필드는 변하지 않지만 버튼을 눌렀기 때문에 계속 찍어내는 것이다.

버튼을 누름으로써 counter가 변화할 때도 영화를 검색하고 있는 것이다.

이 때 다음과 같이 코드를 작성하면 된다.

useEffect(() => {
 console.log("SEARCH FOR", keyword); //keyword가 변화할 때만 실행된다.
}, [keyword]);

이렇게 하면 keyword가 변화할 때 코드를 실행할 거라고 react.js에게 알려주는 것이다.

우리가 두 번째 argument를 []로 비워뒀을 때 한 번만 실행됐던 이유는 비어있으므로 지켜볼 변화가 없기 때문이다.

즉, 두 번째 argument를 채우면, '해당 argument가 변화하는지 지켜봐줘' 라고 말하는 것과 같다.

복습!!!!

리엑트에서는 새로운 데이터가 들어올 때마다 UI를 refresh 한다는 특징이 있다.

그래서 우리가 직접 하지 않아도 되므로 편하다.

하지만! 한 번만 실행하고 싶은 코드가 있는 경우, 혹은 한 번만 실행해야 하는 경우! 어떻게 해야하는가!!

이 때 useEffect를 사용하면 된다.
이 함수는 두 개의 argument를 갖는데,

첫 번째 argument는 우리가 실행시키고 싶은 코드이고,

두 번째 argument는 dependencies라고 불린다. 이는 react.js가 지켜봐야 하는 것이다. 이것이 변화할 때 첫 번째 argument를 refresh 하는 것이다. 

 두 번째 argument는 array이므로 여러 개의 component를 넣어도 된다.

결론

useEffect는 원하는 state이 변할 때만 원하는 코드를 실행할 수 있다!!

react.js는 변화가 있을 때마다 refresh 하는데, useEffect를 사용해서 원하는 경우에만 refresh 할 수 있다.

[ 필수는 아니지만, 자주 쓰이는 것은 아니지만 ]

Cleanup function

이 함수는 그냥 함수인데, 우리의 component가 destroy될 때 뭔가 할 수 있도록 해주는 것이다.

Cleanup function은 따로 이 이름의 함수가 있는 것이 아니라 useEffect에서 component가 없어질 때 무언가를 return하는 것.

이는 component가 없어질 때 어떤 분석 결과를 보내고 싶은 경우 사용할 수 있다.

이를 통해 언제 component가 create 됐는지, 언제 destroy 됐는지 알 수 있다.

function Hello() {
 function byFn() {
  console.log("bye :(");
 }
 function hiFn() {
  console.log("created :)");
  return byFn; // React.js가 hiFn을 실행하고, hiFn이 파괴될 때 byFn을 실행한다.
 }
 useEffect(hiFn, []);
 return <h1>Hello</h1>;
}

물론 문자 그대로 적을 수도 있다.

function Hello() {
 useEffect(() => {
  console.log("hi :)");
  return () => console.log("bye :(");
 }, []);

 useEffect(function () {
  console.log("hi :)");
  return function() {
   console.log("bye :(");
  };
 }, []);
 return <h1>Hello</h1>;
}

처음으로 react를 공부하고 나서 css 사용에 익숙치 않고, 아직 흐름을 제대로 잡지 못한 상태에서 개발에 참여하게 되었다.

그렇기에 component 이름을 어떻게 정하는지도 잘 알지 못해 혼란스러웠다.

일단 해봐야한다는 생각, html, css, js 모두 처음 시작하는 만큼 결과물이 있어야 한다는 생각에 일단 뛰어들었다.

그 결과 나로 인해 style 간섭이 일어나버렸다...

결국 나는 잠시 프로젝트에 손을 떼게 되었지만 이번 일을 통해 style 간섭이 무엇인지 확실하게 알게 되었고,

다시는 같은 실수를 반복하지 않겠다는 다짐을 했다.

공유 받은 styled components에 대한 글을 공부하고, 정리한 내용이다.

styled components의 필요성

중복된 클래스명을 만들게 되면, 다른 컴포넌트 스타일에 영향을 줄 수 있다.

다른 목적을 위해 만든 클래스가 같은 이름으로 만들어지면, 각각에 간섭하게 되어 영향을 끼치게 되는 것이다.

이러한 문제를 해결하기 위한 방법 중 하나가 styled components 이다.

Styled components

styled components는 특정 스타일이 첨부된 컴포넌트를 구성할 수 있도록 도와주는 패키지이다.

이 패키지를 적용하면 해당 스타일이 첨부되는 컴포넌트에만 영향을 미치고, 다른 것에는 영향을 미치지 않는다.

styled components 사용 방법

1. styled components를 npm 설치 한다.

2. 사용하려는 컴포넌트에서 해당 패키지 import

styled.태그(백틱) 과 같은 구문을 사용한다.  (styled.태그`` )

백틱 관련 구문을 tagged template literal이라고 한다는데,이 부분은 그냥 넘어간다.

(백틱은 ' (작은 따옴표)와 비슷하게 생긴 문자이다. 이것조차 몰랐던 나...)

styled는 import하는 객체이고, 그 옆에 명시한 '태그'의 메소드에 접근할 수 있다.

즉, 백틱 사이에 들어간 부분이 전달하는 것인데, 이 백틱 사이에 있는 것이 결국 해당 메소드로 전달된다는 것이다.

그리고 해당 태그 메소드가 새로운 태그 컴포넌트를 반환한다고 한다.

글을 계속 읽다 보니 styled components는 어떻게 만들어지는지 궁금했다.

이름을 어떤 식으로 생성하는건지, 어떻게 코드를 만드는지 의문이 생겼다.

-> styled components로 만들어진 것들의 class 명은 해당 패키지에 의해 '동적'으로 생성이 된다.

-> 모든 클래스는 고유한 이름을 갖게 된다. 그렇기에 다른 컴포넌트에 영향을 주지 않는다.

styled components에서 css pseudo 선택자 및 중첩 선택자

이 부분을 정리하기 전에 css pseudo 선택자에 대해 조금 알고 싶었다.

pseudo는 보통 가상인 것에 이름이 붙는데, 이 또한 그러했다. 우리 말로는 '가상 선택자'라고도 부른다.

css pseudo 선택자는 html요소를 직접적으로 선택하지 않고 요소의 상태에 따라 선택하여 꾸며주는 것을 의미한다.

css pseudo 선택자에 대한 구체적인 정보는 이 글에서 배울 수 있다. (https://bio-info.tistory.com/67)

다시 돌아와 styled components에서 css pseudo 선택자 및 중첩 선택자를 사용하는 방법이다.

이 경우, & 이렇게 생긴 기호를 사용한다. &:hover 처럼 사용할 수 있다.

중첩 선택자의 경우, & label 혹은 &.invalid와 같은 방식을 사용한다.

& 기호는 생성된 컴포넌트를 참조한다. 

styled components에서 props 전달하기

styled components에 props를 추가하여 백틱 안에서 그 props를 사용할 수 있다.

이 방법을 사용하면 스타일을 동적으로 쉽게 바꿀 수 있다.

이는 백틱 사이에 $ 기호와 중괄호를 사용할 수 있으며, 다음과 같이 서로 다른 세 가지 방식을 통해 나타낼 수 있다.

<CircleStyled invalid={true}/>

// case 1
const CircleStyled = styled.div`
  border-radius: 100%;
  background-color: ${({ invalid }) => invalid ? 'red' : 'black'};
`;

// case 2
const CircleStyled = styled.div(({ invalid ) => `
  border-radius: 100%;
  background-color: ${invalid ? 'red' : 'black'};
`);

// case 3
const CircleStyled = styled.div`
  ${({ invalid }) => `
    border-radius: 100%;
    background-color: ${invalid ? 'red' : 'black'};
  `}
`);

styled component에서 미디어 쿼리

빈응형을 위해 미디어 쿼리를 사용하는데, 이를 styled component에서 사용하는 방법이다.

이 때는 @media와 옆 조건을 (min-width: 700px)처럼 적고, 해당 중괄호 안에 조건을 만족할 시 적용될 스타일을 적는다.

const Button = styled.button`
	width: 100%;

	@media (min-width: 700px) {
		// 브라우저 폭이 700px 이상인 경우에 적용되는 코드
		width: auto;
	}
`

이렇게 styled component에 대한 다음 글을 읽고 공부하며 정리해 보았다.

https://velog.io/@jangws/%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%84%EC%84%AD%EC%9D%84-%EB%B0%A9%EC%A7%80%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-styled-components%EC%99%80-css-module

이제는 조금 더 익숙하게, 흐름을 파악하여 즐겁게 코딩하고 싶다...

(웹을 너무 만만하게 봤던 나... 반성해...)

javac 클래스명.java
java 클래스명

이렇게 하면 자바 파일을 실행할 수 있다.