• 데이터 : 회원ID, 이름

• 기능 : 회원 등록, 조회

• 아직 데이터 저장소가 선정되지 않음(가상의 시나리오)

• 컨트롤러 : 웹 MVC의 컨트롤러 역할

• 서비스 : 핵심 비즈니스 로직 구현

• 리포지토리 : 데이터베이스에 접근, 도메인 객체를 DB에 저장하고 관리

• 도메인 : 비즈니스 도메인 객체, 예) 회원, 주문, 쿠폰 등등 주로 데이터베이스에 저장하고 관리됨

  클래스 의존관계

• 아직 데이터 저장소가 선정되지 않아서, 우선 인터페이스로 구현 클래스를 변경할 수 있도록 설계

• 데이터 저장소는 RDB, NoSQL 등등 다양한 저장소를 고민중인 상황으로 가정

• 개발을 진행하기 위해서 초기 개발 단계에서는 구현체로 가벼운 메모리 기반의 데이터 저장소 사용

회원 도메인과 리포지토리 만들기

package study.hello_spring.domain;

public class Member {

    private Long id;
    private String name;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

domain이라는 Package를 만들고, Member라는 Class를 생성한다.

package study.hello_spring.Repository;

import study.hello_spring.domain.Member;

import java.util.List;
import java.util.Optional;

public interface MemberRepository {
    Member save(Member member); // 저장
    Optional<Member> findById(Long id); // id로 찾기
    Optional<Member> findByName(String name); // 이름으로 찾기
    List<Member> findAll(); // 저장된 모든 회원 리스트를 반환
}

Repository Package를 생성하고 MemberRepository Interface를 생성한다.

package study.hello_spring.Repository;

import study.hello_spring.domain.Member;

import java.util.*;

public class MemoryMemberRepository implements MemberRepository{

    private static Map<Long, Member> store = new HashMap<>();
    private static long sequence = 0L;
    // 동시성 문제가 고려되어 있지 않음, 실무에서는 ConcurrentHashMap, AtomicLong 사용 고려

    @Override
    public Member save(Member member) {
        member.setId(++sequence); // sequence 값 증가
        store.put(member.getId(), member);
        return member;
    }

    @Override
    public Optional<Member> findById(Long id) {
        return Optional.ofNullable(store.get(id)); // null 가능
    }

    @Override
    public Optional<Member> findByName(String name) {
        return store.values().stream() //컬렉션(List, Set 등)에서 호출하는 메서드
                .filter(member -> member.getName().equals(name)) // 스트림 안의 요소들을 조건에 맞는 것만 걸러내기
                .findAny(); // 스트림에서 조건에 맞는 요소 중 아무거나 하나를 꺼냄
    }

    @Override
    public List<Member> findAll() {
        return new ArrayList<>(store.values()); // ArrayList : 자바스크립트 배열처럼 가변적인 리스트
    }
}

설명은 코드에 주석으로 작성

MemoryMemberRepository 클래스를 생성하여 리포지토리를 만들었다.

이제 테스트를 할 차례이다.

회원 리포지토리 테스트 케이스 작성

개발한 기능을 실행해서 테스트 할 때 자바의 main 메서드를 통해서 실행하거나, 웹 애플리케이션의 컨트롤러를 통해 서 해당 기능을 실행한다. 이러한 방법은 준비하고 실행하는데 오래 걸리고, 반복 실행하기 어렵고 여러 테스트를 한번 에 실행하기 어렵다는 단점이 있다. 자바는 JUnit이라는 프레임워크로 테스트를 실행해서 이러한 문제를 해결한다.

test에 main과 같이 repository 패키지를 생성하고 MemoryMemberRepositoryTest 클래스를 생성한다.

package study.hello_spring.repository;

import org.junit.jupiter.api.Test;

class MemoryMemberRepositoryTest {

    MemberRepository repository = new MemoryMemberRepository();

    @Test
    public void save(){

    }
}

그 후에 좌측 실행 버튼을 클릭하면

위 사진과 같이 Run 탭이 실행된다면 성공이다.

save

@Test
public void save(){
    Member member = new Member();   // member 생성
    member.setName("spring");   // 'spring' 이라는 이름을 설정 

    repository.save(member);    // repository에 member 저장

    Member result = repository.findById(member.getId()).get();  // member.getId()로 Id를 불러오고, findbyId로 repository에서 member를 찾은 후 get()으로 가져옴
    System.out.println("reuslt = " + (result == member));
}

true가 출력된다.

Assertions.assertEquals(member, result);    // 기대값과 실제값을 비교

System.out.print 대신, 값을 비교하는 매서드인 Assertion.assertEquals를 사용해보자.

완료 마크가 보인다.

member와 result가 같다는 뜻이다.

그럼 result 대신 null을 넣으면 어떻게 될까?

위 사진과 같이 오류가 발생한다.

Assertions.assertThat(member).isEqualTo(result);

또한 비교하는 매서드이다.

Assertions에 커서를 두고 option + enter를 누르면 static import를 할 수 있다.

import static이 추가되고, Assertions. 없이 assertThat을 바로 사용할 수 있다.

findByName

@Test
public void findByName(){
    Member member1 = new Member();  // member1 생성
    member1.setName("spring1");     // 'spring1' 지명
    repository.save(member1);       // member1에 저장

    Member member2 = new Member();
    member2.setName("spring2");
    repository.save(member2);

    Member result = repository.findByName("spring1").get(); // result에 "spring1" 으로 findByName

    assertThat(result).isEqualTo(member1);
}

이번엔 findByName 테스트해보자.

member1에 setName("spring1")을 했으니 성공한 모습.

repository.findByName("spring2").get(); 으로 수정하고 실행하면

예상대로 오류가 발생한다.

테스트를 동시에 실행하려면 위 사진과 같이 class에서 실행하면 해당 클래스에 있는 모든 테스트를 실행할 수 있다.

• 단축키

shift + F6을 누르면 위 사진과 같이 rename이 가능하다.

findAll

@Test
public void findAll(){
    Member member1 = new Member();
    member1.setName("spring1");
    repository.save(member1);

    Member member2 = new Member();
    member2.setName("spring2");
    repository.save(member2);

    List<Member> result = repository.findAll();

    assertThat(result.size()).isEqualTo(2);
}

이번에도 member1, member2를 만든 후 테스트해보자.

result.size가 2이므로 정상적으로 작동한다.

isEqualTo(3)으로 수정하면

예상대로 오류가 발생한다.

AfterEach

정상적으로 작동하도록 코드를 수정하고 class단에서 테스트를 모두 실행했더니 위 사진처럼 오류가 발생한다.

같은 저장소를 사용하고 있어 테스트 간 간섭이 발생하여 오류가 발생하는 것이다.

class MemoryMemberRepositoryTest {

    MemoryMemberRepository repository = new MemoryMemberRepository();

    @AfterEach
    public void afterEach(){
        repository.clearStore(); // 저장소 클리어
    }

    ...

MemoryRepository를 MemoryMemberRepository로 변경 후

MemoryMemberRepository.java 파일에

public void clearStore(){
        store.clear();
    }

위 코드를 추가해준다.

@AfterEach는 각 테스트가 끝난 후 실행된다는 뜻이다.

각 테스트 후 clearStore()를 실행해주면서 테스트 간 간섭이 일어나지 않는다.

• 같은 저장소를 사용하고 있어 테스트 간 간섭이 발생한다.
• 테스트 순서는 보장할 수 없다.
• 테스트 하나가 끝나고 나면 데이터를 클리어해줘야 한다.

회원 사이트 개발

repository 아래에 service 패키지를 만들고 MemberService 클래스를 생성한다.

package study.hello_spring.repository.service;

import study.hello_spring.domain.Member;
import study.hello_spring.repository.MemberRepository;
import study.hello_spring.repository.MemoryMemberRepository;

import java.util.Optional;

public class MemberService {

    private final MemberRepository memberRepository = new MemoryMemberRepository();

    /*
     * 회원 가입
     */
    public Long join(Member member) {
        // 같은 이름이 있는 중복 회원 x
        Optional<Member> result = memberRepository.findByName(member.getName());    // Optional : 값이 있을 수도 있고 없을 수도 있는 상황을 표현하는 "상자" 같은 객체
        result.ifPresent(m -> { // ifPresent : 값이 있으면
            throw new IllegalStateException("이미 존재하는 회원입니다.");  // throw : 예외(에러)를 던짐, IllegalStateException : 자바 런타임 예외 클래스
        });
        // result.orElseGet 도 있음
        memberRepository.save(member);
        return member.getId();
    }
}

이름이 중복되지 않게 설계했으니 이미 중복된 이름이면 throw, 중복되지 않은 이름이면 save 후 getId()

Optional<Member> result = memberRepository.findByName(member.getName()); 
        result.ifPresent(m -> { 
            throw new IllegalStateException("이미 존재하는 회원입니다.");  
        });

부분을

memberRepository.findByName(member.getName())
                .ifPresent(m -> {
                throw new IllegalStateException("이미 존재하는 회원입니다.");
            });

이렇게 표현할 수 있다.

위 코드를 선택하고 control + t 를 누르면

위 사진과 같이 refactor 할 수 있다.

Extract Method를 사용하면

위 사진과 같이 메서드가 생성된다.

/*
 * 전체 회원 조회
 */
public List<Member> findMembers(){
    return memberRepository.findAll();
}

public Optional<Member> findOne(Long memberId){
    return memberRepository.findById(memberId);
}

회원 조회하는 메서드도 작성하고 테스트해보자.

회원 서비스 테스트

지난 테스트에서는 test에 패키지를 만들고 직접 작성했는데 간단한 방법이 있다.

클래스 내부에 커서를 잡고 command + shift + t 단축키를 입력하면 위 사진처럼 Create 할 수 있다.

• Testing library는 JUnit5로 두고
• Class name을 입력한 후
• Test 하고 싶은 메서드를 선택
• OK 클릭

간단하게 Test용 껍데기 파일이 생성된다.

Build 될 때 Test 코드는 실제 코드에 포함되지 않는다.

그래서 직관적으로 알아볼 수 있도록 과감하게 한글로 바꿔도 무방하다.

회원가입

MemberService memberService = new MemberService();

memberService를 새로 생성하고

@Test
void 회원가입() {
    // given    상황
    Member member = new Member();
    member.setName("hello");

    // when        실행했을 때
    Long saveId = memberService.join(member);

    // then        결과
    Member findMember = memberService.findOne(saveId).get();
    assertThat(member.getName()).isEqualTo(findMember.getName());
}

given, when, then 주법으로 테스트하는 걸 추천한다

member를 생성하여 setName("hello") memberService에 방금 생성한 member를 join 결과 확인

정상적으로 테스트 성공

하지만 테스트는 성공보단 예외(실패)가 더 중요하다.

중복 가입을 테스트해보자.

중복가입

@Test
public void 중복_회원_예외(){
    // given
    Member member1 = new Member();
    member1.setName("spring");

    Member member2 = new Member();
    member2.setName("spring");

    // when
    memberService.join(member1);
    try {    // 시도
        memberService.join(member2);
        fail();    // 실패
    } catch (IllegalStateException e){ // 예외처리
        assertThat(e.getMessage()).isEqualTo("이미 존재하는 회원입니다. 123"); // 실패 메세지와 작성한 메세지가 같은지 확인
    }

    // then
}

member1, member2에 둘 다 "spring" 이라고 setName을 한 후 memberService에 join을 해보았다.

실패 메세지는 "이미 존재하는 회원입니다." 이지만 뒤에 123을 붙여서 두 메세지가 같지 않으니 위 사진처럼 오류가 발생한다.

근데 이렇게 try catch를 사용하려니 뭔가 애매하다.

assertThrows를 사용해보자.

// when
memberService.join(member1);
assertThrows(IllegalStateException.class, () -> memberService.join(member2));

assertThrows(예외클래스, 실행할코드);

• 예외클래스 → 어떤 예외가 발생해야 하는지 지정
• 실행할코드 → 예외가 발생할 것으로 기대하는 코드(람다로 작성)

assertThrows는 "이 코드 실행했을 때 정말로 IllegalStateException이 던져지는지 확인"하는 역할을 한다.

• memberService.join(member2) 실행 도중 IllegalStateException이 발생하면 → 예상한 대로 동작했으므로 테스트 성공

• 만약 예외가 발생하지 않거나, 다른 종류의 예외가 발생하면 → 예상과 다르므로 테스트 실패

IllegalStateException이 발생하므로 테스트 결과는 통과인 것이다.

만약 회원 가입의 setName에 "hello" 가 아닌 "spring"을 넣고 전체 실행하면 오류가 발생한다.

왜? 테스트하면서 "spring"이라는 member는 이미 memberRepository에 저장되어있기 때문이다.

그럴 땐 아까 배운

MemoryMemberRepository memberRepository = new MemoryMemberRepository();

@AfterEach
public void afterEach(){
    memberRepository.clearStore();
}

를 추가해주면 clear되기 때문에 정상적으로 작동한다.

테스트 할 때

MemoryMemberRepository memberRepository = new MemoryMemberRepository();

를 작성해서 하였다.

하지만 new로 새로 생성하기 때문에 memberService에서 사용하는 repository와 테스트 케이스에서 사용하는 repository는 서로 다르다.

이런 경우 테스트하면서 문제가 발생할 수 있다.

그럴 땐

public class MemberService {

    private final MemberRepository memberRepository;

    public MemberService(MemberRepository memberRepository){
        this.memberRepository = memberRepository;
    }
    ...

외부에서 넣어주도록 바꿔준다.

테스트 케이스에서도

class MemberServiceTest {

    MemberService memberService;
    MemoryMemberRepository memberRepository;

    @BeforeEach    // 각 테스트 실행 전
    public void beforeEach(){
        memberRepository = new MemoryMemberRepository();
        memberService = new MemberService(memberRepository);
    }

위처럼 수정한다.

new MemberRepository로 생성 후 memberRepository에 넣고, MemberService에 넣어준다.

이러면 같은 repository를 사용하게 된다.

위와 같은 구조를 DI는 Dependency Injection (의존성 주입) 라고 한다.

  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: SizedBox(
          child: Text('안녕'),
        ),
      ),
    );
  }

이렇게 작성하면

body에 안녕이라는 텍스트가 출력된다.

만약, 레이아웃용 위젯들이 너무 길다면 매우 복잡하고 가독성도 많이 떨어질 것이다.

이 때 커스텀 위젯을 만들어서 깔끔하게 축약할 수 있다.

class

빈 공간에 stless를 입력하여 StatelessWidget을 생성하고

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

  @override
  Widget build(BuildContext context) {
    return const Placeholder(); // 축약할 레이아웃 작성
  }
}

위 코드와 같이 class를 작명한다.

그리고 return 뒤에 축약할 레이아웃을 넣으면 된다.

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Text('안녕'),
    );
  }
}

처음에 작성한 '안녕' 텍스트가 들어간 SizedBox 레이아웃을 넣었다.

이렇게 CustomWidget이라는 이름의 커스텀 위젯을 만든 것이다.

이제 CustomWidget()만 작성해도 CustomWidget에 작성한 레이아웃을 불러올 수 있다.

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: CustomWidget(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Text('안녕'),
    );
  }
}

전체 코드의 모습이다.

커스텀 위젯으로 생성하기 전과 같은 결과를 확인할 수 있다.

위 예시의 레이아웃 길이가 짧기 때문에 잘 와닿지 않겠지만, 레이아웃이 길어지면 매우 유용하게 사용될 것이다.

물론 다른 dart 파일에 미리 커스텀 위젯을 작성한 후, import를 통해 작성한 커스텀 위젯을 불러올 수 있다.

변수

var a = SizedBox(
    child: Text('안녕')
);

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: a,
      ),
    );
  }
}

이런 식으로 변수나 함수에 담아 축약해도 된다. 하지만 성능상 이슈가 발생할 수도 있다.

그렇다면 변수에는 어떤 것들을 담을 수 있을까?

그것은 바로 변하지 않는 것들이다.

예를 들면 로고, 상단바, 하단바 등 변하지 않는 UI들은 변수 함수로 축약해도 상관이 없다.

주의사항

커스텀 위젯이 편하다고 아무거나 다 커스텀 위젯으로 만드는 것은 좋은 방법이 아니다.

대표적으로 state 관리가 힘들어진다는 단점이 있다.

그러므로 재사용이 많은 UI들, 또는 큰 UI(페이지들)을 커스텀 위젯으로 만들어서 사용하면 좋다.

ListView

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Column(
          children: [
            Text('안녕'),
            Text('안녕'),
            Text('안녕'),
            Text('안녕'),
            Text('안녕'),
          ],
        ),
      ),
    );

세로로 배치할 때 사용하는 Column이다.

하지만, 글자가 아무리 많더라도 스크롤바가 자동으로 생기지 않는다.

이럴 때 사용하는 것이 ListView이다.

Column 대신 ListView를 사용하면 위 사진과 같이 스크롤바가 생기는 것을 확인할 수 있다.

스크롤바 뿐만 아니라controller를 통해 스크롤 위치 감시도 가능하고, 메모리 절약도 가능하다.

1~100까지의 글자가 있다면, 유저가 가장 아래쪽을 보고 있을 때, 스크롤해서 지나간 위쪽 부분은 메모리에서 삭제가 가능하다. 이런 이유로 메모리 절약(성능개선)이 가능하다.

쇼핑몰, 인스타 피드 등 전부 ListView라고 보면 된다.

용도에 맞게 알맞은 위젯을 사용하여 개발해보자.

출처 - 코딩애플

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Row(
          children: [
            Container( width: 100, ),
            Container( width: 100, ),
          ],
        )

      )
    );

이런 식으로 Container의 폭을 width로 줄 수 있다고 배웠다.

하지만 %로 주고 싶다면?

Flexible(child: Container()),

Container를 Flexible이라는 위젯으로 감싸야 한다.

children: [
            Flexible(child: Container(color: Colors.blue,), flex: 3),
            Flexible(child: Container(color: Colors.green,), flex: 7),
          ],

위 코드처럼 Flexible로 감싼 후 flex라는 파라미터를 이용하여 %로 width를 줄 수 있다.

flex : 3, flex : 7은 배율을 의미한다.

3대7 비율로 정상적으로 Container가 생성된 모습을 확인할 수 있다.

body: Row(
          children: [
            Flexible(child: Container(color: Colors.blue,), flex: 5),
            Flexible(child: Container(color: Colors.green,), flex: 5),
          ],
        )

5대5

body: Row(
          children: [
            Flexible(child: Container(color: Colors.blue,), flex: 5),
            Flexible(child: Container(color: Colors.green,), flex: 5),
            Flexible(child: Container(color: Colors.red,), flex: 5),
          ],
        )

3등분

body: Column(
          children: [
            Flexible(child: Container(color: Colors.blue,), flex: 5),
            Flexible(child: Container(color: Colors.green,), flex: 5),
            Flexible(child: Container(color: Colors.red,), flex: 5),
          ],
        )

Row 뿐만 아니라 Column도 물론 가능하다.

Expanded

body: Row(
          children: [
            Expanded(child: Container(color: Colors.blue,)),
            Container(width: 100, color: Colors.green,),
          ],
        )

Row() 안에서 박스 하나만 꽉 채우고 싶으면 Expanded()를 사용하면 된다.

flex : 1 가진 Flexible 박스와 똑같다.

위 사진처럼 초록색의 width 100 Container를 제외한 부분은 Expanded를 사용한 파란색 Container가 채워진다.

DevTool

박스를 디자인했는데 의도와 다르다면 의심해볼 수 있는 대표적인 경우는 사이즈가 이상하거나 박스 위치가 이상한 경우이다.

그럴 땐 콘솔창에 있는 DevTools를 활용해보자.

콘솔창이 안보이면 alt + 4를 누르면 콘솔창이 열릴 것이다.

alt + f4 아님!!

Open Flutter DevTools를 클릭하면

크롬창으로 DevTools가 뜬다.

좌측 Widget Tree에서 두 번째 Container의 width가 100이라는 것을 확인할 수 있다.

이 방법으로 디버깅해보자.

출처 코딩애플

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: SizedBox(
          child: Text('안녕하세요')
        ),
      )
    );
  }
}

위와 같이 작성하면

이런 텍스트가 출력된다.

텍스트에 스타일을 추가해보자.

Color

Colors.red

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: SizedBox(
          child: Text('안녕하세요',
            style: TextStyle( color: Colors.red ),
          )
        ),
      )
    );
  }
}

Text 안에 style: TextStyle을 추가하였다.

예상대로 빨간색의 글자가 출력된다.

Color()

색상 코드로 스타일을 주고 싶을 땐 Color()을 이용하자.

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: SizedBox(
          child: Text('안녕하세요',
            style: TextStyle( color: Color(0xffa30000) ),
          )
        ),
      )
    );
  }
}

Colors.red가 아닌 Color(0xffa30000)을 입력하였다.

여기서 주의할 점은, 색상코드 앞에 0xff를 꼭 붙여야 한다.

Color(0xffa30000)을 입력한 라인 왼쪽에 현재 코드의 색이 보인다.

저 색 상자를 클릭하면 사진처럼 색깔을 정할 수 있다.

Color.fromRGBO

rgbo를 입력하여 색을 추가할 수도 있다.

fontWeight

style: TextStyle( fontWeight: FontWeight.w700),

fontWeight: FontWeight.~~ 을 통해 굵기도 설정할 수 있다.

w700을 적용한 모습

Icon 또한 size: , color: ~ 을 통해 스타일을 줄 수 있다.

버튼 넣는 법과 스타일

TextButton

child: TextButton( child: , onPressed: (){}, )

버튼은 TextButton()을 이용해서 넣을 수 있다.

이 때, onPressed(){}을 입력하지 않으면 오류가 발생한다고 한다.

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: SizedBox(
          child: TextButton(
            child: Text('글자'),
            onPressed: (){},
          )
        ),
      )
    );

위 사진처럼 텍스트로 된 버튼을 넣을 수 있다.

하지만 너무 못생겼다.

ElevatedButton

TextButton 대신 ElevatedButton을 입력하였다.

TextButton 보단 나은 거 같다.

위 사진처럼 Style을 추가할 수 있다.

IconButton

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: SizedBox(
          child: IconButton(
            icon: Icon(Icons.star),
            onPressed: (){},
            style: ButtonStyle(),
          )
        ),
      )
    );

TextButton이 있다면 IconButton도 있다. 위와 같이 작성하면

star 아이콘이 들어간 버튼이 생성된다.

Appbar

title

return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('타이틀'),

        ),
        body: SizedBox(),
      )
    );

여태 사용한 것처럼 appBar에 title을 입력하면 왼쪽 위에 작성되는 타이틀을 만들 수 있다.

leading

appBar: AppBar( leading: Icon(Icons.star),

        )

leading을 사용하면 좌측 위에 아이콘을 입력할 수 있다.

보통 메뉴버튼으로 많이 사용한다.

appBar: AppBar( leading: Icon(Icons.star), title: Text('타이틀'),
        ),

이렇게 타이틀과 같이 사용할 수 있다.

actions

appBar: AppBar( actions: [Icon(Icons.star), Icon(Icons.star)], title: Text('타이틀'),

우측에 표시하는 actions 파라미터를 사용하였다. 배열로 여러가지를 추가할 수 있다.

Icon.star을 두 개 넣어보면

이렇게 우측 상단에 별 두 개가 출력되는 것을 확인할 수 있다.

출처 코딩애플

모든 UI의 기원은 네모박스다. 박스를 잘 그려아한다.

박스

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: Container(
          width: 50, height: 50, color: Colors.blue,
        ),
      )
    );

body에 Container를 사용하여 파란색 상자를 하나 생성하자.

body의 좌측 상단에 파란색 상자가 하나 생성되었다.

여백을 주자.

여백

margin

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: Container(
          width: 50, height: 50, color: Colors.blue,
          margin: EdgeInsets.all(20),
        ),
      )
    );

처음 생성한 파란 상자에 margin을 주자.

EdgeInsets를 사용하라고 한다.

EdgeInsets.all을 사용하여 모든 면에 20의 바깥 여백을 주었다.

padding

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: Container(
          width: 50, height: 50, color: Colors.blue,
          padding: EdgeInsets.all(20),
        ),
      )
    );

이번엔 margin 대신 padding을 주었다.

padding을 주면 이런 식으로 보인다.

겉으로 보기에는 변한 게 없지만, 사실 안쪽 여백이 생긴 것이다.

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: Container(
          width: 150, height: 50, color: Colors.blue,
          margin: EdgeInsets.all(20),
          child: Text('ddddd'),
        ),
      )
    );

상자의 width를 150으로 변경하고 Text를 넣어보자.

padding 때문에 안쪽으로 밀려나 text가 짤려서 그려지는 것을 확인할 수 있다.

fromLTRB

모든 면을 같은 사이즈로 주는 all 대신, 각각의 면에 사이즈를 개별로 줄 수 있는 fromLTRB 함수가 있다.

순서대로 left, top, right, bottom에 원하는 사이즈를 입력하면 된다.

margin: EdgeInsets.fromLTRB(0, 30, 0, 0)

top만 30을 입력하였을 때의 결과물이다.

margin은 매우 자주 사용하니 꼭 외워두자.

decoration

다른 옵션들은 decoration 안에서 작성해야 한다.

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: Container(
          width: 50, height: 50, color: Colors.blue,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black)
          ),
        ),
      )
    );

decoration 안에 border(테두리)를 입력하고 모든 면에 Colors.black을 작성하였다.

저장하고 적용하면 위와 같은 오류가 발생한다.

그 이유는 Container 위젯의 decoration과 color 속성을 동시에 사용할 수 없기 때문이다.

아래는 수정된 코드이다.

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: Container(
          width: 50, height: 50,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black)
          ),
        ),
      )
    );

container의 Color를 제거하면 정상적으로 검정색 테두리가 생성된다.

border 외에도 borderRadius, boxShadow 등 decoration을 통해 작성할 수 있다.

테두리가 아닌 box에도 color를 적용하고 싶으면

decoration: BoxDecoration(
 color: Colors.blue,
 border: Border.all(color: Colors.black),
),

이렇게 작성하면 된다.

박스 위치 정렬

body에 바로 Container를 작성하였다.

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: Align(
          child: Container(
            width: 150, height: 50, color: Colors.blue,
          ),
        )
      )
    );

그 Container를 Align으로 감싸보자.

감싼 후, 위 사진처럼 여러가지의 Align을 적용시킬 수 있다.

body: Align(
  alignment: Alignment.topCenter,
  child: Container(
    width: 150, height: 50, color: Colors.blue,
  ),
)

topCenter를 적용해보았다.

박스를 만들다보면 가로로 꽉 채운 박스를 생성할 때가 있다.

child: Container(
  width: double.infinity, height: 50, color: Colors.blue,
),

그럴 땐 width 자리에 double.infinity를 작성하면 된다.

말 그대로 width는 부모 박스를 넘어가지 않는 무한이 된다.

출처 - 코딩애플

MaterialApp()이라는 위젯이다.

이 위젯을 써놓고 시작하면, 구글이 제공하는 Material 테마를 이용하여 앱을 만들 수 있다.

• 구글이 제공하는 유용한 UI들을 이용할 수 있다. (구글 스타일)

• 아이폰 기본 앱 같은 스타일을 이용하고 싶으면 Cuptertino()를 이용하면 된다.

커스터마이징을 하고 싶으면 MaterialApp()을 사용해야 한다.

Scaffold

Scaffold는 상중하로 나누어주는 위젯이다.

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),                        // 상단에 들어갈 위젯
        body: Container(),                        // 중간에 들어갈 위젯
        bottomNavigationBar: BottomAppBar(),    // 하단에 들어갈 위젯
      )
    );
  }
}

appBar : 상단 body : 중간(내용 영역) BottomAppBar : 하단

Container 넣어도 되고, 미리 만들어진 위젯을 넣어도 된다.

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar( child: Text('dsdfs')),    
      )
    );
  }
}

BottomAppBar에 child: Text('dsdfs')) 를 입력하면

하단에 입력한 텍스트가 나온다.

이렇게 간단한 하단바를 생성할 수 있다.

배치

가로로 배치하는 법 (Row)

    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Icon(Icons.star),
        ),
      )
    );

상단과 하단은 제외하고 body에 아이콘을 배치해보자.

위 사진을 보면 왼쪽 위에 별 아이콘이 생긴다.

이 이유는 Scaffold가 기준점을 왼쪽 위로 잡아주기 때문이다.

이제 여러 위젯을 가로로 배치해보자.

    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        ),
      )
    );

body에 Container가 아닌 Row 위젯을 사용하고, child가 아닌 children이라는 파라미터를 사용해보자.

children 파라미터는 Array 형태로 입력하면 된다.

왼쪽 위 기준으로 별 아이콘 두개를 가로로 배치할 수 있게 된다.

위 사진과 같이 밑줄이 거슬린다.

lint 때문이라고 한다.

const를 추가하면 해결되지만, const 사용하기 싫은 사람은

analysis_options.yaml 파일을 열어서 rules 안에 아래 코드를 추가하자.

prefer_const_literals_to_create_immutables : false

밑줄이 깔끔하게 사라진다.

세로로 배치하는 법 (Column)

세로로 배치하는 방법은 Row 대신 Column을 사용하면 된다.

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        ),
      )
    );

Row 대신 Column을 사용하고, children 파라미터를 사용하며 Array 형식으로 별 아이콘 3개를 입력하였다.

저장하면 세로로 별 아이콘 3개가 생성되는 것을 확인할 수 있다.

정렬

mainAxisAlignment

Row와 Column을 이용하여 가로, 세로로 배치하는 방법을 배워보았다.

Scaffold가 왼쪽 위를 기준으로 잡기 때문에 왼쪽 위에 배치된다. 이를 정렬해보자.

    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        ),
      )
    );

mainAxisAlignment를 사용해보자.

mainAxisAlignment는 Row의 가로축을 정렬

MainAxisAlignment.center를 사용하여 중간에 정렬되는 것을 확인할 수 있다.

자동완성을 보면 더 많은 정렬이 있다.

위 사진은 MainAxisAlignment.spaceEvenly이다.

CSS의 display : flex와 유사하다.

    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        ),
      )
    );

이번엔 Row를 Column으로 변경해보자.

이번엔 세로축을 기준으로 정렬한다.

Row의 mainAxisAlignment은 가로축, Column의 mainAxisAlign은 세로축을 의미한다. crossAxisAlignment는 mainAxisAlignment의 반대인 Row - 세로축, Column - 가로축을 의미한다.

활용

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임')),
        body: Text('안녕'),
        bottomNavigationBar: BottomAppBar(
          child: SizedBox(
            height: 70,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page),
             ],
            ),
          ),
        ),
      )
    );

위처럼 appBar, body, bottomNavigationBar를 모두 이용하여

이렇게 디자인을 할 수 있다.

출처 - 코딩애플

빌드

빌드란?

Android에서의 빌드는 개발자가 소스 코드를 작성한 후 앱 설치 파일 APK를 만들기까지의 실행 과정을 의미한다.

Android는 기본적으로 Linux 커널 위에 여러 소프트웨어 스택이 쌓인 형태로 Linux의 빌드와 동일하다고 생각하면 된다.

• Linux에서의 빌드는 소스 코드를 기계어로 컴파일 한 후 사용되는 라이브러리와의 Link를 수행하여 실제 실행 파일로 만드는 과정을 의미한다.

빌드 도구

빌드 도구는 외부 라이브러리 추가 및 업데이트 등의 설정 시간을 단축시킨다. 또한 테스트 실행 및 호환성 체크까지 진행한다.

Android에서 사용되는 빌드 도구는 maven, gradle 등이 있으며 구글에서는 gradle 의 사용을 권장하고 있다.

gradle내부의 빌드 스크립트를 작성하여

• 앱의 의존성
• 라이브러리
• 리소스 파일
• 빌드 설정

등을 진행한다.

빌드 진행

빌드 프로세스는 gradle 빌드 도구가 수행한다. 빌드 프로세스는 앱의 소스 코드와 별도 스크립트를 결합하여 APK 파일을 생성한다.

1. 코틀린 컴파일러는 .kt 파일/ 자바 컴파일러는 .java 파일을 .class 바이트코드파일로 변환한다.

   가상 머신(Virtual Machine)에서 실행되기 위한 코드다. 바이트코드는 소스 코드와 기계어(머신 코드)의 중간 형태로, 직접 실행 가능한 바이너리 코드보다 더 추상화된 형태를 가지고 있다.

2. Android SDK의 dx 도구를 사용하여 .class 파일들을 .dex 파일로 변환한다.

   • dx : Android SDK에 포함된 유틸리티로, Java 바이트코드 파일(.class 파일)을 Dalvik 바이트코드 파일(.dex 파일)로 변환하는 역할을 한다.

   • dex : dex(Dalvik Executable 파일)은 Android 운영체제에서 실행하기 위한 바이트코드 파일이다. Dalvik 또는 ART 가상 머신에서 실행된다.
   1. Dalvik 또는 ART에서 효율적으로 메모리를 관리
   2. 여러 .class 파일의 내용을 포함하여, 애플리케이션의 로딩 시간을 단축
   3. 실행 선능을 향상시키기 위해 다양한 최적화 적용

3. Android 리소스 패키징 도구(aapt(Android Asset Packaging Tool))와 gradle 사용하여 리소스 파일 및 외부 라이브러리 모듈을 .dex파일과 함께 APK 파일로 패키징합니다.

4. APK 파일은 서명되어야 Android 디바이스에서 실행될 수 있다. APK 파일에 서명하기 위해서는 디지털 인증서를 사용해야 한다. APK 파일에 서명하는 작업은 빌드 과정에서 gradle에 설정된 값에 따라 자동으로 수행한다.

이렇게 서명된 APK가 만들어질 수 있다.

APK 설치 및 실행

• 애플리케이션

  • 애플리케이션 : 사용자가 설치하고 실행하는 앱
  • 앱 실행 : 사용자가 앱을 실행하는 단계

• 애플리케이션 프레임워크

  • 애플리케이션이 동작하기 위해 필요한 기본 서비스와 클래스들이 포함된 계층. 개발자는 이 계층을 통해 시스템 자원과 서비스를 활용한다.

• 라이브러리 및 Android 런타임

  • 라이브러리 : 애플리케이션이 동작하기 위해 필요한 기본 서비스와 클래스들이 포함된 계층. 개발자는 이 계층을 통해 시스템 자원과 서비스를 활용한다.
  • Android 런타임 : ART(Android Runtime)와 Dalvik 가상 머신이 포함되어 있다. 이 런타임 환경은 앱이 실행되는 동안 바이트코드를 실행할 수 있게 해준다.

• 하드웨어 추상화 계층 (HAL)

  • 하드웨어와 소프트웨어 간의 인터페이스를 제공한다. HAL을 통해 Android 시스템이 다양한 하드웨어 기능을 제어할 수 있다.

• 리눅스 운영체제 (커널)

  • Android의 기본 운영체제. 리눅스 커널은 메모리 관리, 프로세스 관리, 네트워크 스택, 드라이버 등 기본적인 시스템 기능을 제공한다.

• 하드웨어

  • Android 기기의 물리적인 구성 요소. CPU, GPU, 메모리, 센서 등 다양한 하드웨어가 포함된다.

• APK와 실행파일

  • 설치 파일(APK) : Android 애플리케이션 패키지 파일로, 앱을 배포하고 설치하기 위한 파일 형식이다.
  • AOT (Ahead-Of-Time) : 설치 시점에 APK를 실행 파일로 변환하는 컴파일 방법이다. 이 방식은 애플리케이션이 실행될 때 성능을 향상시킨다.
  • JIT(Just-In-Time) : 실행 시점에 바이트코드를 기계어로 변환하는 컴파일 방법다. 이 방식은 애플리케이션의 실행 속도를 최적화한다.
  • 실행파일 : APK 파일이 AOT 또는 JIT 컴파일을 통해 변환된 파일로, 실제로 Android 기기에서 실행되는 파일이다.

설치된 APK는 안드로이드 런타임과정을 따라 초기 JIT 방식을 활용하여 앱을 설치한 후, 이후 자주 사용하는 앱을 AOT 방식을 활용하여 컴파일하는 방식으로 진행된다.

스마트폰과 연결 (USB)

1. PC에 USB로 스마트폰과 연결한다.

2. 스마트폰 설정 메뉴에서 빌드 번호를 검색한다.

3. 빌드번호를 연속으로 클릭

4. 설정에 개발자 옵션이 추가되고, 개발자 옵션에서 USB 디버깅을 활성화

5. flutter doctor 명령을 입력하면 연결된 장치 갯수 표시됨

6. 안드로이드 스튜디오에서 연결한 기기를 선택 후 실행버튼 클릭

7. 실제 기기에서 플러터 데모 앱 실행 완료

워치와 연결

1. 워치 개발자 옵션 활성화

   1. 갤럭시 워치 설정 메뉴 이동

   2. 워치 정보 선택

   3. 소프트웨어 선택

   4. 소프트웨어 버전 선택

   5. 소프트웨어 버전 3번 연타 <개발자 모드를 켰습니다.> 팝업 확인

   6. 설정 메뉴에 개발자 옵션이 생겼다면 개발자 모드 활성화 완료

2. 개발자 옵션에서 "무선 디버깅" 선택하여 활성화 (와이파이 연결 필수)

3. "+ 새 기기 등록" 선택

   

4. IP주소 및 포트 부분 (예 192.1xx.0xx.xxxxx) / 페어링 번호 확인

   워치 화면이 꺼지거나 와이파이 환경이 재접속 될 경우 포트값과 페어링 번호가 달라질 수 있으니 화면이 꺼지지 않도록 주의

5. 윈도우 - 실행 - cmd (.../Sdk/platform-tools) 또는 Android Studio 터미널에서

   adb pair IP주소 및 포트 (예 192.1xx.0xx.xxxxx)

   엔터 입력 후 "Enter pairing code:" 에 페어링 코드 확인 후 입력

6. 워치에서 페어링 확인

   

출처 - minu님 블로그

1. APK 파일 생성 및 전송

   • flutter run 명령어를 사용하여 Flutter 프로젝트를 빌드하고 APK 파일을 생성한다.
   • 이 APK 파일은 컴퓨터의 파일 시스템에서 생성되며, 이후 ADB(Android Debug Bridge)를 사용하여 USB로 연결된 Android 기기로 전송된다.
   2. ADB를 통한 설치 및 실행
      • APK 파일이 Android 기기로 전송된 후, ADB를 통해 Android 기기에 설치된다. ADB는 Android SDK의 일부로, 개발자가 Android 기기와 컴퓨터 사이에서 파일 전송 및 명령 실행을 할 수 있도록 지원한다.
      • 설치가 완료되면, Android 기기에서 APK 파일이 실행되어 Flutter 앱이 시작된다.

2. Flutter 앱 실행

   • Android 기기에서 Flutter 앱이 실행되면, 먼저 Flutter 엔진이 초기화된다. 이 과정에서 Skia 그래픽 엔진과 Dart VM이 활성화된다.
   • Dart VM이 초기화되면 Flutter 프로젝트의 Dart 코드가 Dart VM에서 실행된다. 이 코드는 Flutter의 위젯을 생성하고, 각 위젯의 상태를 관리하여 UI를 렌더링한다.
   • Flutter 엔진은 Skia를 사용하여 Dart 코드로 정의된 위젯 트리를 화면에 그린다. Skia 네이티브 그래픽 API를 호출하여 Android 기기의 실제 화면에 UI를 렌더링한다.

우선 시작하기 전, analysis_options.yaml 파일을 수정하자

Setting

analysis_options.yaml 파일을 열어보면, 이렇게 세팅되어 있을 것이다.

rules 란에 아래 코드를 추가하자.

rules:
  # 스페이스바 2개
  prefer_typing_uninitialized_variables : false
  prefer_const_constructors_in_immutables : false
  prefer_const_constructors : false
  avoid_print : false

각각 어떤 규칙인지 알아보자.

1. prefer_typing_uninitialized_variables

   • 설명 : 초기화되지 않은 변수에 명시적으로 타입을 지정하도록 권장한다.

   • 예시

     // 권장되지 않음
     var foo;
     
     // 권장됨
     String foo;

2. prefer_const_constructors_in_immutables

   • 설명 : 불변 클래스(immutable class)에서 생성자를 상수 생성자로 만들도록 권장한다.

   • 예시

     class MyWidget extends StatelessWidget {
       // 권장되지 않음
       MyWidget();
     
       // 권장됨
       const MyWidget();
     }

3. prefer_const_constructors

   • 설명 : 가능한 곳에서는 항상 상수 생성자를 사용하도록 권장한다.

   • 예시

     // 권장되지 않음
     var foo = MyClass();
     
     // 권장됨
     var foo = const MyClass();

4. avoid_print

   • 설명 : print() 함수 대신에 로깅(logging) 패키지를 사용하도록 권장한다.

       `print()`는 디버깅 목적으로만 사용되며, 프로덕션 코드에서는 적절한 로깅 프레임워크를 사용하는 것이 좋다.

   • 예시

     // 권장되지 않음
     print('Hello, World!');
     
     // 권장됨
     final logger = Logger('MyLogger');
     logger.info('Hello, World!');

모두 false로 설정하면 Dart 분석기가 위의 네 가지 규칙을 검사하지 않게 된다.

main

main.dart를 열어보면, 길게 세팅되어 있다.

구글이 이해하기 쉽도록 쉬운 프로젝트 하나를 생성해주었다.

void main() 밑은 싹~ 다 지우자.

stless를 입력한 뒤 tab 키를 누르면

이런 식으로 자동완성이 된다.

MyApp을 입력해주면 아래와 같이 될 것이다.

import 'package:flutter/material.dart'; // 다른 파일 or package import

void main() {
  runApp(const MyApp());    // runApp : app 구동. MyApp 자리에 앱 메인페이지 입력
}

class MyApp extends StatelessWidget {    // 앱 메인페이지. 기본적으로 채워야하는 문법
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {

    return MaterialApp( // 실질적 코드 작성
      home: 
    );

  }
}

이러면 메인페이지 세팅은 끝이다.

앱 디자인을 넣는 법을 배워보자.

Design

우리가 꼭 알아야할 위젯은 4가지이다.

1. 글자 (Text)
2. 아이콘(Icon)
3. 이미지(Image)
4. 박스(Container)

이 4가지만 알아도 웬만한 건 다 만들 수 있다.

Flutter에서 디자인하는 방법은, Widget 짜집기하는 식으로 디자인한다고 보면 된다.

글자를 넣고 싶으면 글자 위젯, 박스를 넣고 싶으면 박스 위젯을 넣어서 짜집기 하면 된다.

Widget의 개념이 매우 중요하다.

Text

우선 글자 먼저 넣어보자.

Text('글자')

return MaterialApp(
    home: Text('Hello, World!')
);

위 코드처럼 수정한 후

Chrome으로 main.dart를 실행해보자.

사실은 앱이지만 웹 브라우저로 미리보기를 띄우는 것이다.

크롬창에서 Hello, World!가 출력된다.

Icon

Icon(Icons.아이콘 이름)

return MaterialApp(
    home: Icon(Icons.star)
);

Icons.star를 집어넣어보자.

별 아이콘 하나가 생기는 것을 확인할 수 있다.

return MaterialApp(
    home: Icon(Icons.shop)
);

이번엔 star 대신 shop을 입력하였다.

별 대신 상점 아이콘이 출력되는 것을 확인할 수 있다.

아이콘 이름은

https://fontawesomeicons.com/materialdesign/icons?search=list

이 사이트에서 검색해서 확인할 수 있다.

Image

Image.asset('경로')

이미지를 넣고 싶으면 프로젝트 폴더 안에 존재해야 한다.

이미지 등록

프로젝트 우클릭 - New - Directory를 클릭하여 이미지 보관용 assets 폴더를 만들고 이미지를 넣는다.

예시로 Flutter 이미지를 넣어두었다.

pubspec 수정

그 다음, pubspec.yaml 파일을 열어보자.

pubspec.yaml이란? 앱을 만들 때 필요한 모든 자료들을 쭉~ 정리한 파일이라고 보면 된다. 외부 패키지, 라이브러리 등등

pubspec.yaml 파일에서 flutter를 찾아보자.

flutter를 찾았으면

flutter:
  assets:
    - assets/

위 처럼 수정해주자.

assets 안에 있는 모든 이미지 파일을 가져다 쓸 수 있다.

호출

이제 main.dart에서 호출해보자.

return MaterialApp(
  home: Image.asset('flutter.png')
);

assets 폴더에 이미지를 추가하고, pubspec.yaml 파일을 정상적으로 수정했다면

Image.asset('경로')에서 경로 위치에 이미지 파일명만 입력하면 된다.

(정확한 경로 명은 'assets/flutter.png'이다.)

Container / SizedBox

Container( 스타일(스타일 명 : 값) ) / SizedBox()

return MaterialApp(
    home: Container( width: 50, height: 50, color: Colors.blue )
);

플러터의 사이즈의 단위는 LP이다. 50LP == 1.2cm

위 코드처럼 Container()를 입력하고 테스트해보자.

엄청난 크기의 파란색 박스가 생성되었다.

50을 입력했는데 왜 이렇게 크게 나올까??

1.2cm라고 해도 너무 크다.

그 이유는 무엇일까?

어디부터 50을 차지할지 몰라서 그렇다

어디부터 차지할지는 부모가 정한다.

return MaterialApp(
  home: Center( // 정중앙
    child: Container( width: 50, height: 50, color: Colors.blue ) // 자식
  )
);

위 코드처럼 수정해보자.

Center를 통해 기준점을 중앙으로 설정해주고, child 안에 자식(Container)를 작성해주면

50LP * 50LP의 파란색 박스가 생성된다.

출처 - 코딩애플

Flutter 개발환경을 구축하는 방법에는 여러가지가 있다.

1. Flutter 공식 문서에서 제공하는 설치 가이드 (Flutter SDK)

2. 명령줄 도구를 이용한 설치(CLI)

3. 패키지 매니저를 통한 설치

4. IDE 통합 개발환경 설치 (Visual Studio Code, Android Studio)

5. Docker를 이용한 설치

Flutter 공식 문서에서 설치하는 방법과 IDE 통합 개발환경 설치하는 방법만 간단히 비교해보자.

비교

장단점

Flutter SDK 수동 설치

장점

1. 제어 및 유연성:

   • 개발 환경을 세밀하게 제어할 수 있다.
   • 필요한 도구와 설정을 직접 관리할 수 있어, 커스터마이징이 용이하다.

2. 환경 독립성

   • IDE에 종속되지 않으므로, 다양한 텍스트 에디터나 IDE와 함께 사용할 수 있다.
   • 특정 버전의 Flutter SDK를 유지하거나 여러 버전을 동시에 관리하기 쉽다.

3. 경량성

   • 불필요한 플러그인이나 확장 기능을 설치할 필요 없이, 최소한의 도구만 설치하여 사용 가능

단점

1. 설정 복잡성

   • 환경 변수를 직접 설정해야 하므로, 설정 과정이 다소 복잡할 수 있다.
   • 의존성 설치 및 관리가 수동으로 이루어져야 한다.

2. 개발 생산성

   • IDE의 자동화된 기능(자동 완성, 디버깅 등)을 완전히 활용하기 어렵다.
   • 빌드 및 실행 등의 작업이 수동으로 이루어져 시간이 더 소요될 수 있다.

IDE를 통한 설치(Visual Studio Code, Android Studio)

장점

1. 설정 간편성

   • 플러그인을 통해 Flutter SDK를 쉽게 설치하고 설정할 수 있다.
   • 환경 변수를 자동으로 설정해주므로, 개발환경 구성이 간편하다.

2. 개발 생산성

   • 자동 완성, 코드 포맷팅, 상태 검사 등 다양한 개발 도구를 제공하여 생산성을 높인다.
   • 통합된 UI로 다양한 작업(프로젝트 생성, 빌드, 실행 등)을 쉽게 수행할 수 있다.

3. 통합 기능

   • Git과 같은 버전 관리 도구와 쉽게 통합할 수 있다.
   • 프로젝트 관리를 위한 다양한 확장 기능을 지원한다.

단점

1. 의존성

   • 특정 IDE에 종속될 수 있어, 다른 환경에서 작업할 때 비효율적일 수 있다.
   • 플러그인이나 IDE 버전에 따라 호환성 문제가 발생할 수 있다.

2. 리소스 사용

   • IDE가 더 많은 시스템 자원을 사용하므로, 시스템 사양이 낮을 경우 성능 저하가 발생할 수 있다.
   • 불필요한 기능이나 플러그인이 설치되어 있을 경우, IDE가 무거워질 수 있다.

개발할 때의 차이점

Flutter SDK 수동 설치

1. 프로젝트 생성 및 관리

   • 명령줄(CLI)을 통해 프로젝트를 생성하고 관리한다. ( 예 : 'flutter create my_project' )
   • IDE가 아닌 텍스트 에디터( 예 : Sublime Text, Vim )에서 코드를 작성할 수 있다.

2. 빌드 및 실행

   • 명령줄(CLI)를 통해 앱을 빌드하고 실행한다. ( 예 : 'flutter run' )
   • 디버깅도 명령줄 도구를 통해 수동으로 진행한다.

3. 의존성 관리

   • 직접 flutter doctor를 실행하여 필요한 의존성을 설치하고 관리한다.

IDE를 통한 설치

1. 프로젝트 생성 및 관리

   • IDE의 GUI를 통해 쉽게 프로젝트를 생성하고 관리할 수 있다.
   • 프로젝트 설정, 디펜던시 관리, 코드 작성 등이 통합된 인터페이스에서 이루어진다.

2. 빌드 및 실행

   • IDE내에서 버튼 클릭만으로 앱을 빌드하고 실행할 수 있다. 딸깍
   • 디버깅 도구를 사용하여 브레이크포인트 설정, 변수 검사 등이 가능하다.

3. 의존성 관리

   • IDE가 의존성 문제를 자동으로 감지하고, 필요한 경우 설치를 안내해준다.

요약

• Flutter SDK 수동 설치는 더 많은 제어와 유연성을 제공하지만, 설정과 관리가 복잡할 수 있으며, 개발 생산성이 다소 떨어질 수 있다.

• IDE를 통한 설치는 설정이 간편하고, 다양한 자동화 도구와 통합 기능을 제공하여 개발 생산성을 크게 향상시킬 수 있다. 다만, 특정 IDE에 종속될 수 있고, 시스템 자원을 더 많이 사용할 수 있다.

이렇게 장단점이 뚜렷하다. 이 장점들을 한 번에 다 사용할 순 없을까?

가능하다. 쓰까서 쓰면된다.

개발환경 구축

Flutter SDK 설치

1. Flutter 웹사이트에 접속한 뒤 우측 상단의 'Get Start' 클릭

플러터를 구동하여 개발할 수 있는 운영체제(32비트 운영체제는 정상적으로 동작하지 않음)

• 윈도우 7 SP1 이상(64비트)
• 맥OS
• 리눅스

2. PC에 설치된 운영체제에 맞는 항목 선택

일단 최신버전을 다운받았다.

3. 다운로드 받은 파일을 C:/src 폴더에 압축해제

쓰기 권한, 업데이트 및 설치 문제 등의 이유 때문에 C:/ProgramFiles 와 같은 높은 권한이 필요한 위치는 피하는 것이 좋다.

환경 변수 등록

• Flutter 명령 파일은 압축을 푼 폴더 아래 bin 폴더에 위치
• 이 파일이 들어있는 경로를 운영체제의 환경변수에 등록하면 어디에서나 플러터 명령을 사용 가능

1. '검색'에 '환경 변수'를 입력하고 시스템 환경 변수 편집'을 클릭

   

2. '시스템 속성' 창이 뜨면 '고급' 탭에서 '환경 변수(N)'을 클릭

3. 환경 변수 창에서 'Path'를 선택한 후 '편집' 클릭

4. '찾아보기'를 클릭하고 Flutter SDK의 bin 폴더 위치 ( C:/src/flutter/bin )를 선택하고 '확인' 클릭

   

5. 터미널을 실행시킨 후 flutter --version을 입력

6. flutter doctor를 통해 SDK가 정상적으로 설치되었는지 확인

여러 항목들이 나오는데 SDK 설치 확인은 첫 번째 [v] Flutter 녹색 체크를 보면 된다.

나머지 사항은 개개인의 PC 환경에 따라 다르게 나올 수 있다.

위처럼 출력되면 성공

앱 개발 도구 설치

• 플러터 개발에 사용할 도구로 다음과 같은 IDE(통합 개발 환경)을 지원

  • Android Studio : https://developer.android.com/studio
  • Visual Studio Code : https://code.visualstudio.com/

• 두 가지 IDE 모두 훌륭하지만 플러터는 구글이 만들었기 때문에 자사에서 개발한 안드로이드 스튜디오를 사용하는 것이 편의성 등에서 더 나음

• 설치 환경을 구성할 때에도 안드로이드 스튜디오가 더 간단함

안드로이드 스튜디오로 진행할 것이다.

Android Studio 설치

1. Android Studio 다운로드 / Android Studio 구버전 다운로드

   구버전 설치 시 우측 상단 언어 한국어 -> ENGLISH로 변경

   • Giraffe 버전이 플러터 개발을 위한 최신기능과 안정성을 제공한다고 함

2. 다운로드한 설치 파일을 실행하여 설치 진행

3. Flutter, Dart 플러그인 설치

설치가 완료되면 Restart IDE를 클릭하여 재실행해주자.

Installed를 들어가보면 Flutter와 Dart가 설치된 것을 확인할 수 있다.

4. Flutter Project 생성하기

New Flutter Project를 클릭

Project name : 프로젝트 명 Project location : 프로젝트 위치 Description : 설명 Organization : 조직 Android language : 안드로이드 언어 설정 Platforms : 플랫폼

목적에 맞게 작성하자.

작성 후 Create를 누르면 프로젝트가 생성된다.

5. flutter doctor

좌측 아래 터미널을 클릭하여 flutter doctor를 입력한다.

위와 같은 오류가 발생한다.

• 에러 1) cmdline-tools component is missing

• 에러 2) Android license status unknown

  • 이 경고는 toolchain이 연결되지 않았다는 오류, 라이센스를 허용하지 않았다는 뜻이다.

  ---

  5-1. SDK Manager에서 Command-line Tools 설치

우측 상단에 톱니바퀴 버튼을 누르고 SDK Manager를 클릭한다.

Android SDK Command-line Tools (latest)를 클릭 후 Apply 버튼을 눌러 설치 후 OK 버튼 클릭.

5-2. 환경 변수 설정

시스템 변수 섹션에서 새로 만들기 클릭.

변수 이름 : ANDROID_HOME 변수 값 : C:\Users\username\Appdata\Local\Android\Sdk

AppData는 기본적으로 숨김폴더이다. 보이지 않는다면 보기 설정에서 숨김폴더 보이도록 변경하면 된다.

시스템 변수 섹션에서 Path 변수를 선택하고 편집을 클릭한다.

새로 만들기 or 찾아보기를 클릭하여

C:\User\username\Appdata\Local\Android\Sdk\platform-tools
C:\User\username\Appdata\Local\Android\Sdk\cmdline-tools\latest\bin

두 가지를 추가한다.

5-3 Android SDK 라이센스 동의

flutter doctor --android-licenses

Android Studio 하단의 Terminal에 위 명령어를 입력한다.

위 사진처럼 뜬다면 Y를 눌러 라이센스를 검토할 수 있다.

Y를 누르니 위와 같이 라이센스를 보여준다.

Y를 한 번 더 눌러서 동의해주자.

5개의 라이센스를 동의한 후

flutter doctor

명령어를 입력하면

오류가 해결된 것을 확인할 수 있다.

VSCode는 사용하지 않을 것이니 굳이 해결하지 않아도 된다.

Wear OS 개발 환경 설정

Android Studio에서 watch 앱을 개발하기 위해서 Wear OS를 필요로 하다.

(추후 공개)

테스트

가상 기기

우측 Device Manager를 누른 후 Create Visual Device를 클릭

원하는 기기를 선택한 후 Next

API 35가 기본으로 설정되어있다.

Tiramisu를 설치&선택 후 Next

따로 건드릴 건 없다.

Finish~

상단에 no device selected를 누른 후 방금 생성한 device를 클릭

만약 보이지 않는다면 Refresh를 누르면 된다.

우측 Running Device를 클릭하면 Virtual Device가 보인다.

위 사진처럼 에뮬레이터가 안드로이드 스튜디오 화면 내에서 실행이 된다.

이렇게 사용해도 되지만 불편하다면 따로 뺄 수 있다.

Settings - Emulator에 들어가 Launch in the Running Devices tool window 체크해제 후 OK를 누르고 Android Studio를 재실행

이렇게 밖으로 뺴낼 수 있다.

상단에 초록색 화살표를 클릭하면 기본으로 세팅된 어플이 실행된다.

프로젝트 생성 시 기본으로 생성된 어플을 실행시킬 수 있다.

Flutter는 Google에서 개발하고 관리하는 오픈 소스 모바일 앱(Application) 개발 프레임워크(Framework)이다. 이 프레임워크는 Android와 iOS 등 다양한 플랫폼에서 동작하는 앱을 개발하기 위해 사용되며, 모바일 앱(Application)의 개발 속도를 높이기 위한 다양한 기능과 도구를 제공한다.

특징

Flutter는 다트(Dart)라고 하는 언어를 사용해 개발한다. 구글이 멀티 플랫폼 상에서 동작되도록 하는 앱을 위해 디자인된 프로그래밍 언어이며, 2011년 10월에 공개되었다.

다트(Dart)란?

C언어 기반의 문법을 사용하며, 자바, 자바스크립트, C#등의 언어에서 영감을 받아 개발되어 프로그래머들에게 자연스럽게 다가가는 Dart의 목적에 맞게, 기존 프로그래밍 언어들의 특징들이 많이 보인다. 이것은 다른 언어를 경험해 본 유저라면 쉽게 접할 수 있는 장점이 된다.

Flutter의 UI 구성 요소는 위젯으로 이루어져 있다. 이 위젯들은 서로 다양하게 조합되어 복잡한 UI를 만들어낸다. Flutter에서는 머티리얼(Material) 디자인 스타일의 위젯과 iOS 스타일의 위젯을 기본적으로 제공하며, 커스터마이징이 가능한 다양한 위젯들도 제공한다.

위젯(Widget)은 화면에 표시되는 모든 요소들을 말하며, 버튼, 텍스트 입력 필드, 이미지, 레이아웃을 구성하는 컨테이너 등이 이에 해당한다.

Flutter의 가장 큰 장점 중 하나는 빠른 개발 속도이다. Flutter는 핫 리로드(Hot Reload)라는 기능을 제공한다.

핫 리로드(Hot Reload)를 사용하면 다음과 같은 장점이 있다.

1. 빠른 피드백 : 코드를 수정한 후 바로 결과를 확인할 수 있어 개발 속도가 향상된다.
2. 상태 유지 : 앱의 상태를 유지한 채로 변경 사항을 반영할 수 있어 개발 중인 기능을 더 쉽게 테스트할 수 있다.
3. 테스트 및 디버깅 용이성 : 변경 사항이 즉시 반영되므로 빠르게 테스트하고 디버깅할 수 있다.

요약하면, Flutter는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로, Dart 언어를 사용하며, 뛰어난 성능과 빠른 개발 주기를 제공한다고 볼 수 있다.

다트(Dart)

Dart란?

Dart 언어는 Google에서 개발한, 주로 모바일 애플리케이션 및 웹개발에 사용되는 언어로써 Dart는 특히 Flutter와 함께 사용될 때 강력한 기능을 발휘하며, 그 성능과 생산성면에서 주목받고 있다. 하지만 개발 커뮤니티와 라이브러리 생태계가 계속 성장해 나갈 것인지는 앞으로의 발전에 달려있다.

특징

1. 객체 지향 프로그래밍 (OOP)
   Dart는 객체 지향 프로그래밍 언어로, 클래스와 객체를 사용하여 모든 것을 모델링한다. 이로써 코드와의 구조화와 재사용성이 증가한다
   

2. 가독성과 간결성
   Dart는 C언어 기반의 문법을 사용하며, 자바, 자바스크립트, C# 등의 언어에서 영감을 받아 개발되었다. 이는 코드를 읽고 이해하기 쉽게 만든다.
   

3. 타입 안정성
   Dart는 정적 타입 언어로, 변수의 데이터 타입을 명시적으로 선언할 수 있다. 이는 코드 실행 전에 타입 에러를 찾아내는 데 도움이 된다.
   

4. 멀티패러다임
   Dart는 함수형 프로그래밍과 객체 지향 프로그래밍의 요소를 모두 포함하고 있어 다양한 프로그래밍 스타일을 지원한다.
   

5. 컴파일러
   Dart는 JIT(Just-In-Time) 컴파일러와 AOT(Ahead-Of-Time) 컴파일러를 모두 지원하여 개발자가 선택적으로 성능을 최적화할 수 있다.
   
   
   

JIT 컴파일러 (Just-In-Time)

• 특징 : Dart JIT 컴파일러는 프로그램 실행 중에 코드를 컴파일한다.

• 장점

  • 빠른 개발 속도 : 코드 변경 후 즉시 실행이 가능하여, 빠른 피드백을 받을 수 있다. 이로 인해 개발 및 디버깅 과정에서 매우 유용하다.
  • 동적 성능 최적화 : 실행 중에 프로그램의 실행 패턴을 분석하고 최적화를 적용할 수 있어, 애플리케이션이 실행될수록 성능이 개선될 수 있다.

• 용도 : 주로 개발 환경에서 사용된다. Flutter의 hot-reload 기능이 JIT 컴파일을 사용한 대표적인 예시이다.

AOT 컴파일러 (Ahead-Of-Time)

• 특징 : Dart AOT 컴파일러는 프로그램 실행 전에 전체 코드를 미리 컴파일한다.

• 장점

  • 빠른 실행 시간 : 프로그램이 미리 컴파일되어 있기 때문에, 실행 속도가 빠르다. 이는 모바일 앱과 같이 런타임 성능이 중요한 환경에서 매우 유리하다.
  • 작은 실행 파일 : 불필요한 코드가 제거되고 최적화가 적용되어 실행 파일 크기가 작아질 수 있다.

• 용도 : 주로 배포 환경에서 사용된다. Flutter의 릴리즈 모드에서의 빌드가 AOT 컴파일을 사용하는 좋은 예시이다.

요약

• JIT 컴파일러 : 개발 시 빠른 피드백과 동적 최적화를 제공하여 효율적인 개발을 지원한다.
• AOT 컴파일러 : 배포 시 빠른 실행 속도와 작은 파일 크기를 제공하여 효율적인 애플리케이션 실행을 지원한다.

장점

1. Flutter와의 통합
   Dart는 Google의 UI프레임워크인 Flutter의 주언어로 사용되어, Flutter 앱 개발에 최적화되어 있다.
   

2. 성능
   Dart는 뛰어난 성능을 제공하며, 특히 Flutter 애플리케이션은 고성능UI를 제공하는 데 강점을 보인다.
   

3. Hot Reload
   앱 개발 시 수정사항을 즉시 확인할 수 있는 Hot Reload 기능은 생산성을 향상시키는 데 큰 기여를 한다.
   

4. 종합적인 개발환경
   Dart는 다양한 개발 도구와 라이브러리를 제공하여 풍부한 개발 경험을 제공한다.
   

5. 플랫폼 독립성
   Flutter를 통해 Dart 코드를 사용하여 iOS, Android, 웹 등 다양한 플랫폼에서 동일한 코드베이스로 애플리케이션을 개발할 수 있다.
   

단점

1. 생태계의 제한
   다른 언어에 비해 Dart 생태계는 아직 크기가 작다. 이로 인해 사용 가능한 라이브러리 도구의 다양성이 부족할 수 있다.
   

2. 커뮤니티 부족
   Dart 개발자 커뮤니티는 상대적으로 작아 여전히 확장 중이다. 이로 인해 지원 및 자료확보가 다른 언어에 비해 제한될 수 있다.
   

3. 모바일 앱 외 다른 사용영역의 부족함
   Flutter를 통한 모바일앱 개발에 초점을 맞추고 있어, 다른 사용 영역에서는 다른 언어가 더 적합할 수 있다.
   

구조

플러터(Flutter) 애플리케이션의 구조는 다음과 같이 크게 위젯 트리(Widget Tree)와 렌더링 트리(Rendering Tree)로 나뉜다. 이 두 가지 트리는 플러터의 UI 구성과 화면 렌더링을 관리하는 핵심 요소이다.

위젯 트리 (Widget Tree)

플러터에서 UI는 위젯으로 구성된다. 위젯은 모든 것을 포함하는 기본 구성 요소이다. 텍스트, 버튼, 레이아웃, 애니메이션 등 모든 것이 위젯으로 구성된다. 위젯은 상태가 있는 StatefulWidget과 상태가 없는 StatelessWidget으로 나눌 수 있다.

StatefulWidget : 상태가 변할 수 있는 위젯. 위젯의 상태가 변경되면, Flutter는 위젯을 다시 빌드하여 변경된 상태를 반영. 상호작용이네 다른 요인에 의해 상태가 변경될 수 있는 경우에 사용. 예) 폼 (Form) 입력, 애니메이션, 동적으로 변경되는 데이터 등

StatelessWidget : 상태가 변하지 않는 위젯. 빌드 후 변경 X. 한 번 렌더링된 후에는 변경되지 않는 UI를 만드는 데 사용. 예) 단순한 텍스트 레이블, 아이콘, 이미지 등 {: .prompt-tip }

주요 특징

• 위젯 : 모든 UI 요소는 위젯으로 표현된다. 예를 들어, Text, RaisedButton, Container 등은 모두 위젯이다.

• 구성 요소 : 위젯은 다른 위젯을 포함하여 복잡한 UI를 구성할 수 있다. 이는 트리 구조로 이루어져있다.

• 재사용성 : 위젯은 재사용이 가능하며, 플러터 애플리케이션의 다양한 부분에 쉽게 사용될 수 있다.

렌더링 트리 (Rendering Tree)

렌더링 트리는 플러터의 위젯 트리에서 실제 화면에 픽셀을 그리기 위해 사용된다. 각 위젯은 해당 위젯에 대한 렌더링을 담당하는 RenderObject를 가지고 있다. RenderObject는 화면에 어떻게 그릴지에 대한 정보를 가지고 있다.

주요 특징

• 렌더링 : 각 위젯의 RenderObject는 해당 위젯을 화면에 그리기 위한 정보를 포함하고 있다.

• 최적화 : 렌더링 트리는 플러터 엔진이 화면을 효율적으로 그리기 위해 사용하는 구조이다. 필요한 경우 Flutter 엔진은 플랫폼의 하드웨어 가속을 이용하여 렌더링 속도를 향상시킬 수 있다.

• 레이어 : 렌더링 트리는 실제 그래픽 처리를 위한 레이어들로 구성된다. 각 레이어는 화면의 일부분을 나타내며, 필요에 따라 효율적으로 관리된다.

요약

플러터 애플리케이션의 구조는 위젯 트리를 기반으로 하며, 각 위젯은 RenderObject를 통해 렌더링 트리에 연결된다. 위젯 트리는 UI의 구조와 동작을 정의하고, 렌더링 트리는 실제 화면에 어떻게 표시할지를 결정한다. 이 구조는 플러터의 UI 개발을 단순화하고, 화면 렌더링을 효율적으로 처리할 수 있도록 한다.

장단점

Flutter의 장점

• 하나의 코드로 iOS, Android, macOS, window, web 모두 동작 가능

• React Native의 경우 머터리얼(Material) 디자인을 적용 시 시스템에 있는 그래픽 라이브러리로 동작하기 때문에 iOS, Android 위젯의 스타일이 달라 보일 수 있다. 반면에 Flutter는 SKIA 엔진을 탑재하여 그래픽 라이브러리가 OS 종속성을 갖고 있지 않아 iOS, Android 모두 같은 스타일로 보여준다.

• 핫 리로딩을 지원 (앱을 처음부터 다시 실행하지 않고 새로운 코드가 반영됨)

• 배우기 쉽다(dart)

Flutter의 단점

• React Native 보다 성능적인 면에서는 빠르다고 할 수 있으나 생태계가 크지 않다.

• 아직까진 네이티브(Android, Swfit) 보다는 성능적인 면에서 앞서지 않음

• 현재 지속적으로 업데이트가 되어 있어 deprecated된 api가 정리되지 않아 개선 필요

vs React Native

종합적으로 판단했을 때 성능적인 우위로는 React Native 보다는 플러터가 우수 하나, 생태계가 크지 않다. 나온 지 얼마 되지 않은 상태라서 커뮤니티가 아직 부족한 상태라고 보면 된다. 초기 플러터의 경우 안드로이드의 JNI 와같은 C++ Native Method를 사용하지 못하였는데 1.1 버전부터는 Native Method를 사용할 수 있는 인터페이스가 추가 됐다.

미래 관점으로 구글의 차세데 OS 퓨시아의 공식 언어로 Dart로 정했으며 플러터로 개발한 앱은 바로 퓨시아 OS에서 구동이 가능하다. 차세대 OS의 공식 언어로 지정되었으므로 커뮤니티나 생태계는 확장될 가능성은 있어 보인다.

출처 - https://overface.tistory.com/746

플러터가 React Native보다 빠른 이유

React Native는 UI 렌더링에 네이티브 위젯을 사용하지만, 연산은 JS 런타임에 의존한다. JS와 네이티브 위젯이 통신하기 위해 Bridge를 거칠 때 마다 큰 비용이 든다. 그와 반대로 플러터는 그 자체에 필요한 대부분의 구성 요소를 포함 한다. React Native처럼 Bridge가 필요 없어 Skia 엔진을 사용하여 네이티브와 근소한 렌더링 속도를 갖게 된다.

세줄 정리

• 단일소스로 iOS 모바일, 안드로이드 애플리케이션을 개발할 수 있는 UI 프레임워크이다.

• 구글에서 만들고 Dart 언어로 개발한다.

• 공식 개발환경 IDE는 VSCode와 안드로이드 스튜디오이다. (인텔리제이도 가능)

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한 줄로 끝낼 수 있다.

정규표현식 생성

정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile), 다른 하나는 실행(execute)이다.

우선 컴파일부터 알아보자.

컴파일

컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. 객체를 만드는 방법은 두 가지가 있다. a라는 텍스트를 찾아내는 정규식을 만들어보자.

정규표현식 리터럴

var pattern = /a/;

정규표현식 객체 생성자

var pattern = new RegExp('a');

두가지 모두 같은 결과를 만들지만 각자가 장단점이 있다.

정규표현식 메소드 실행

정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야 한다.

RegExp.exec()

console.log(pattern.exec('abcdef')); // ['a']

실행결과는 문자열 a를 값으로 하는 배열을 리턴한다.

console.log(pattern.exec('bcdefg')); // null

인자 'bcdefg'에는 a가 없기 때문에 null을 리턴한다.

RegExp.test()

console.log(pattern.test('abcdef')); // true
console.log(pattern.test('bcdefg')); // false

test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.

문자열 메소드 실행

문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다.

String.match()

console.log('abcdef'.match(pattern));
console.log('bcdefg'.match(pattern));

RegExp.exec()와 비슷하다.

String.replace()

console.log('abcdef'.replace(pattern, 'A'));

문자열에서 패턴을 검색하여 이를 변경한 후에 변경된 값을 리턴한다.

옵션

정규표현식 패턴을 만들 때 옵션을 설정할 수 있다. 옵션에 따라서 검출되는 데이터가 달라진다.

i

var xi = /a/;
console.log('Abcde'.match(xi)); // null

var oi = /a/i;
console.log('Abcde'.match(oi)); // ['A']

i를 붙이면 대소문자를 구분하지 않는다.

g

var xg = /a/;
console.log('abcdea'.match(xg)); // ['a']

var og = /a/g;
console.log('abcdea'.match(og)); // ['a', 'a']

g를 붙이면 검색된 모든 결과를 리턴한다.

캡처

var pattern = /(\w+)\s(\w+)/;
var str = "Hello world";
var result = str.replace(pattern, "$2, $1");
console.log(result);

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 위 예시는 Hello와 world의 순서를 역전시킨다.

var result1 = str.replace(pattern, "$2 $1"); // 콤마 제거
var result2 = str.replace(pattern, "$1$2");     // 공백 제거
var result3 = str.replace(pattern, "$1 $2 $2$1 $1+$2"); // 짬뽕

순서뿐만 아니라 $1과 $2 사이에 구분자, 공백 등을 추가할 수 있다.

치환

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '블로그 : https://nawhes.techblog.doubleuem.com/ 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

블로그 : <a href="https://nawhes.techblog.doubleuem.com/">https://nawhes.techblog.doubleuem.com/</a> 입니다. 네이버 : <a href="http://naver.com">http://naver.com</a> 입니다. 

replace를 통해 URL을 링크 html 태그로 교체하였다.

분석

1. /.../ : 정규 표현식 리터럴 정규표현식을 감싸는 슬래시는 자바스크립트에서 정규표현식 리터럴을 정의

2. \b : 단어 경계 (word boundary) \b는 단어 경계를 나타낸다. 단어 경계는 \w (단어 문자: 알파벳, 숫자, 밑줄)와 \W (비단어 문자: 공백, 특수 문자 등) 사이의 위치를 의미한다. 즉, URL이 단어의 시작 부분에 위치해야 함을 나타낸다.

3. (?...) : 캡처하지 않는 그룹 (non-capturing group) (?...)는 캡처하지 않는 그룹을 나타낸다. 이는 그룹화를 위해 사용되지만, 해당 그룹의 매칭 결과를 메모리에 저장하지 않는다. 위 코드의 경우 그룹 안의 내용은 https 또는 http가 된다.

4. https? : http 또는 https s?는 s가 0번 또는 1번 나타날 수 있음을 의미한다.

5. :\/\/ : 콜론과 슬래시 두 개 :\/\/sms ://를 문자 그대로 매칭한다. 슬래시(/)와 콜론(:)은 정규표현식에서 특수 문자가 아니므로 그대로 사용된다.

6. [a-z0-9-+&@#\/%?=~_|!:,.;]* : URL의 나머지 부분 이 부분은 URL의 나머지 부분을 매칭한다. 대괄호([]) 안의 내용은 문자 클래스를 나타내며, 이 클래스 안의 어떤 문자도 매칭될 수 있다. 아스테리스크(*)는 앞의 요소가 0번 이상 반복될 수 있음을 의미한다.

   문자 클래스 내의 문자들 :

   • a-z : 소문자 알파벳
   • 0-9 : 숫자
   • - : gkdlvms
   • +&@# : 각 문자들
   • \/ : 슬래시(여기서 슬래시는 이스케이프되어 문자 그대로의 슬래시를 의미)
   • %?=~_|!:,.; : 각 문자들

7. * : 0번 이상 반복 문자 클래스 뒤의 *는 해당 클래스에 정의된 문자가 0번 이상 반복될 수 있음을 의미

8. gim : 플래그 정규표현식의 끝에 붙는 플래그는 검색 방식을 조정한다

   • g(global) : 전체 문자열에서 모든 매칭을 찾는다
   • i(ignore case) : 대소문자를 구분하지 않는다.
   • m(multiline) 여러 줄에 걸쳐 매칭을 수행한다. 여기서는 큰 의미가 없지만, 줄바꿈 문자가 있을 때 각 줄을 개별 문자열로 처리한다.

전체 요약

• http 또는 https로 시작
• ://로 이어짐
• URL의 나머지 부분은 소문자 알파벳, 숫자, 하이픈, 플러스 등 하나 이상의 문자로 이루어짐

이 정규표현식은 대소문자를 구분하지 않고, 전체 문자열에서 모든 매칭을 찾으며, 여러 줄에서 작동한다.

메타문자와 이스케이프

메타문자

메타문자는 정규표현식에서 특별한 의미를 가지는 문자들이다. 이 문자는 문자 그대로 매칭되지 않고, 특정 패턴이나 동작을 정의하는 데 사용된다.

• . : 임의의 한 문자 (줄바꿈을 제외한 모든 문자).

  • a.b : a와 b사이에 어떤 문자가 와도 매칭 ('a1b', 'a-b')

• ^ : 문자열의 시작

  • ^abc : 문자열이 'abc'로 시작할 때 매칭

• $ : 문자열의 끝

  • abc$ : 문자열이 'abc'로 끝날 때 매칭

• * : 앞의 요소가 0번 이상 반복됨

  • a* : 'a'가 0번 이상 반복될 때 매칭 ('', 'a', 'aaa')

• + : 앞의 요소가 1번 이상 반복됨

  • a+ : 'a'가 1번 이상 반복될 때 매칭 ('a', 'aaa')

• ? : 앞의 요소가 0번 또는 1번 나타남

  • a? : 'a'가 0번 또는 1번 나타날 때 매칭 ('', 'a')

• {n,m} : 앞의 요소가 n번 이상 m번 이하 반복됨

  • a{2,4} : 'a'가 2번 이상, 4번 이하 반복될 때 매칭 ('aa', 'aaa', 'aaaa')

• [] : 문자 클래스. 대괄호 안의 문자 중 하나와 매칭

  • [abc] : 'a', 'b', 'c' 중 하나와 매칭

• | : 논리적 OR

  • a|b : 'a' 또는 'b'와 매칭

• () : 그룹화 및 캡처

  • (abc) : 'abc'라는 문자열과 매칭, 캡처 그룹으로 사용.

• \ : 이스케이프 문자 (특수문자나 메타문자를 그대로 매칭할 때 사용)

이스케이프

이스케이프는 메타문자나 특수 문자를 문자 그대로 매칭하기 위해 사용하는 방법이다. 백슬레시(\)는 이스케이프 문자로 사용된다. 메타문자를 이스케이프하면, 그것이 특별한 의미를 가지지 않고 문자 그대로 매칭된다.

• \. : 문자 그대로의 점(.)

• \* : 문자 그대로의 별표(*)

• \? : 문자 그대로의 물음표(?)

• \\ : 문자 그대로의 백슬래시

추가로, 정규표현식 내에서 특수 문자나 이스케이프 시퀀스를 사용하여 특정 문자나 패턴을 나타낼 수 있다.

• \d : 숫자 문자 (0-9)

• \D : 숫자가 아닌 문자

• \w : 단어 문자 (알파벳, 숫자, 밑줄)

• \W : 단어 문자가 아닌 문자

• \s : 공백 문자 (스페이스, 탭, 줄바꿈 등)

• \S : 공백 문자가 아닌 문자

출처 - hustle-dev 벨로그

커링(Currying)은 함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수이다.

쉽게 말하면, '함수를 반환하는 함수'이다.

함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야 한다. 커링을 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있다.

• 커링과 같이 함수 자체를 인자로 받거나 반환하는 함수를 고차 함수라고 부르기도 한다.

커링이 왜 사용될까??

• 함수의 재활용을 위해서

  • 원하는 함수들을 조합해서 사용할 수 있다.

• 하나 이상의 인수의 함수를, 하나의 인수를 받는 함수로 축소할 수 있다.

  • 그래서 더 가벼운 함수 제작이 가능하다.

커링

일반적인 커링

function add(a,b){
  return a+b;
}

다음 add 함수를 재활용 하려면?

function addTwo(a){
  return add(a,2)
}

이렇게 2+@를 해주는 addTwo 함수를 만들 수 있다.

만약 add3, add4, add5... 등의 여러 함수가 필요하다고 하자.

function addTwo(a){
  return add(a,2);
}
function addThree(a){
  return add(a,3);
}
function addFour(a){
  return add(a,4);
}

분명 add 함수를 재활용하긴 하지만, 뭔가 이상하다.

여기에 커링을 적용해보자.

function add(a,b){
    return console.log(a+b);
}

function addX(x){
    return function(a){
      return add(a, x);
    }
  }

  const addTwo = addX(2);
  const addThree = addX(3);
  const addFour = addX(4);

  addTwo(2); // 2 + 2 = 4
  addThree(5); // 3 + 5 = 8
  addFour(1); // 4 + 1 = 5

다음과 같이 addX 함수를 이용해서 여러 파생 함수들을 만들 수 있다.

addX 함수는 이렇게 동작한다.

• 인자 x를 받아서 익명함수를 반환한다. 그 함수는 function(a){ return add(a,x); } 의 형태이다.

• 반환받은 값인 함수는 인자 a를 요구한다. a를 넣어주면 add(a,x)의 실행 결과를 반환한다.

이처럼 함수 실행을 위한 인자를 한 번에 받지 않고, 여러 차례에 나눠서 받을 수 있다.

이 예시를 화살표 함수로 나타내면,

function addX(x){
  return function(a){
    return add(a, x);
  }
}

const addX = x => a => add(a,x);

이렇게 더 간단해진다.

함수를 인자로 받는 커링함수

자바스크립트에서는 함수도 값이다.

그러므로 함수의 인자로 또 다른 함수도 받을 수 있다.

function curry(fn){
  return function(a){
    return function(b){
      return fn(a,b);
    }
  }
}

이제 이 함수를 어떻게 써야할까?

정확히 위에서 선언했던 addX와 동일하게 만들 수 있다.

function add(a,b){
  return a+b;
}

const addX = curry(add);
const addTwo = addX(2);
console.log(addTwo(5));

함수 자체를 인자로 받아서 활용할 수 있는 것을 알게 되면, 코드를 작성하는 스타일이 더 다양해진다.

객체 데이터를 가져오는 커링

커링을 사용하지 않은 경우 :

const todos = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false}
];

const getTodosIdArr = todos => todos.map(todo => todo.id);
const getTodosContentArr = todos => todos.map(todo => todo.content);
const getTodosCompletedArr = todos => todos.map(todo => todo.completed)

console.log(getTodosIdArr(todos));            // [ 3, 2, 1 ]
console.log(getTodosContentArr(todos));        // [ 'HTML', 'CSS', 'Javascript' ]
console.log(getTodosCompletedArr(todos));    // [ false, true, false ]

일반적인 경우 코드를 작성하면 위와 같이 작성하게 된다. 여기에 커링을 적용해보자.

커링을 사용한 경우 :

const todos = [
    { id: 3, content: 'HTML', completed: false },
    { id: 2, content: 'CSS', completed: true },
    { id: 1, content: 'Javascript', completed: false }
];

const get = property => object => object[property];

const getId = get('id'); // object => object['id'];
const getContent = get('content'); // object => object['content'];
const getCompleted = get('completed'); // object => object['completed']

const getTodosIdArr = todos => todos.map(getId);
const getTodosContentArr = todos => todos.map(getContent);
const getTodosCompletedArr = todos => todos.map(getCompleted);

console.log(getTodosIdArr(todos)); // [ 3, 2, 1 ]
console.log(getTodosContentArr(todos)); // [ 'HTML', 'CSS', 'Javascript' ]
console.log(getTodosCompletedArr(todos)); // [ false, true, false ]

커링을 사용하는 경우 인자의 순서가 중요하다. 앞에 존재하는 인자일 수록 변동 가능성이 적고, 뒤에 있는 인자일 수록 변동 가능성이 높기 때문에 이 순서를 고려하여 설계하는 것이 중요하다고 한다.

커링 응용

function 키워드 없이 화살표 함수로 표현하여 방정식 4x^(x+2)를 수행할 함수를 만들어보자.

const add = (a,b) => a + b;
const multiply = (a,b) => a * b;

const addX = x => a => add(a, x);
const addTwo = addX(2);

const multiplyX = x => a => multiply(a, x);
const multiplyFour = multiplyX(4);

이렇게 커링을 이용해 addTwo, multiplyFour 함수를 만들었다.

const compose = fn => fn2 => x => fn2(x) * fn(x);
const equation = compose(addTwo)(multiplyFour);
equation(10) // (4 * 10) * (10 + 2) = 40 * 12 = 480

equation 함수에 넣는 값이 x가 되어 4x(x+2)의 다양한 값에 대한 결과를 받을 수 있다.

만약 5x(x+2)의 결과를 반환하는 함수가 필요하다면?

const multiplyFive = multiplyX(5);
const equaion2 = compose(addTwo)(multiplyFive);
equation2(10) // (5 * 10) * (10 + 2) = 600

이렇게 표현할 수 있다.

마지막으로 위에서 선언한 equation 함수를 생성하면서 중복되는 부분을 제거하면,

const addTwo = addX(2);
const addFour = addX(4);
const multiplyFour = multiplyX(4);
const multiplyFive = multiplyX(5);

const compose = fn => fn2 => x => fn2(x) * fn(x);
const composeAddTwo = compose(addTwo);

const equation1 = composeAddTwo(multiplyFour); // 4x(x+2)
const equation2 = composeAddTwo(multiplyFive); // 5x(x+2)
const equation3 = composeAddTwo(addFour) // (x+4)(x+2)

위와 같이 인자로 받은 함수들을 교체해주면서, 유사한 함수들을 여러개 만들 수 있다.

참고 - Go devlog, hustle-dev velog

스코프 체인(scope chain)은 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다.

하지만 스코프 체인(scope chain)을 이해하기 위해서 먼저 자바스크립트의 실행 컨텍스트(Execution context)를 알아야 한다.

실행 컨텍스트란 무엇인가?

실행 컨텍스트(Execution context)는 우리가 작성한 코드가 실행되는 환경을 말하며, scope, hoising, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리를 말한다.

그리고 이 실행 컨텍스트에는 두 개의 실행 컨텍스트가 존재한다.

글로벌 실행 컨텍스트

코드가 실행되기 전에 생성이 되며, 함수 내에 없는 코드는 모두 전역 실행 컨텍스트 안에 존재한다.

그렇기 때문에, 자바스크립트 엔진은 일부 자바스크립트 코드를 실행할 때마다 글로벌 실행 컨텍스트(Global Execution Context)를 작성한다.

글로벌 실행 컨텍스트의 특징으로는 무조건 하나의 전역 실행 컨텍스트만이 존재하며, 어플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지하는 것이다.

함수 실행 컨텍스트

전역 실행 컨텍스트가 생성된 후, 함수가 실행(ex 호출) 될 때마다 새로운 실행 컨텍스트가 작성된다.

실행 컨텍스트에서 스코프 체인(scope chain)은 어떻게 작동하는가?

실행 컨텍스트는 LIFO(Last in, First out) 구조의 스택으로, 코드 실행 중에 생성된 모든 실행 컨텍스트를 저장하는 데 사용된다.

실행 컨텍스트가 실행되면, 엔진이 스코프 체인을 통해 렉시컬 스코프를 먼저 파악한다.

그러고 나서, 함수가 중첩 상태일 때 하위 함수 내에서 상위 함수의 스코프와 전역 스코프까지 참조할 수 있는데 이것을 스코프 체인을 통해 탐색하는 것이다.

var v = '전역 변수';

function a() {
  // function a Execution Context(EC)
  var v = '지역 변수';

  function b(){
    // function b Execution Context
    console.log(v);
  }

  b();
}

// Global Execution Context(GEC)
a();

위 코드의 예제를 보면 먼저 글로벌 실행 컨텍스트(GEC)가 실행되고 스택에 쌓인다.

그런 다음 함수 호출 순으로 실행 컨텍스트 스택에 쌓이게 되고, 가장 나중에 호출된 b() 함수가 실행 컨텍스트 안에서부터 탐색을 시작한다.

출처 : https://medium.com/@pvivek4/scope-and-execution-context-in-javascript-3b71e76cd193

그러면, b() 함수 안에서 변수 v를 탐색하기 시작하는데, 만약 변수 v가 없으면 b()함수를 감싸고 있는 외부 함수 a() 함수를 탐색하기 시작한다.

이때 a()함수 안에 변수 v가 존재하면 안에 있는 v를 참조하게 되고, 만약 없다면 마지막으로 전역 객체를 탐색하여 v를 찾아낸다.

결국 찾지 못한다면, v가 없다고 Uncaught ReferenceError : v is not defined 라는 에러가 발생한다.

반대로 찾았다면, 결과값은 a() 안에 변수 v가 존재하기 때문에 지역 변수라는 값이 출력된다.

하지만 만약, a() 함수 안에 v를 제거한다면 전역 객체에 있는 변수 v의 값 전역 변수가 출력된다.

이러한 과정들이 스코프에 담긴 순서대로 탐색하는 스코프 체인이라고 보면 된다.

스코프 체인을 개발자 도구로 확인하기

스코프 체인(scope chain)은 함수의 감춰진 프로퍼티인 [[Scope]]로 참조할 수 있다.

console.dir()을 사용하면, 개발자 도구로 쉽게 확인이 가능하다.

b() 함수에 [[Scopes]] 속성이 존재한다. 이것이 바로 스코프 체인(scope chain)이다.

자기 자신의 스코프(scope)를 제외한 자신과 가장 가까운 변수 객체의 스코프 순으로 접근하는 것을 눈으로 확인할 수 있다.

정리하자면, 자기 자신의 스코프(scope)를 제외한 자신과 가장 가까운 변수 객체의 모든 스코프들을 스코프 체인이라 할 수 있다.

출처 : https://ljtaek2.tistory.com/140

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지 렉시컬 스코프(Lexical Scope)를 먼저 이해해야 한다.

정적 스코프(static scope), 렉시컬 스코프(Lexical Scope)란?

렉시컬 스코프는 한 마디로 함수를 어디에 선언하였는지에 따라 상위 스코프가 결정되는 것을 말한다.

자바스크립트를 포함한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따르며, 이를 정적 스코프(Static Scope)라고 부르기도 한다.

function init(){
  var name = "이름"
  function displayName(){
    console.log(name);
  }
  displayName();
}
init();

MDN에 나와있는 예제이다.

displayName()은 init() 안에 정의된 내부 함수이며 init() 함수 본문에서만 사용할 수 있다.

다만, 여기서 주의할 점은 displayName() 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에서 선언된 변수 name에 접근할 수 있다.

상위스코프가 무엇인지 알려면 displayName 함수가 어디에 선언되었는지를 봐야하는데, 위 코드에서는 displayName 함수가 init 함수 안에서 선언되었으므로 상위 스코프는 지역 스코프가 된다.

그래서 init 함수 내의 선언된 name이라는 변수를 참조할 수 있는 것이다.

init()에 선언된 name이라는 변수가 존재하지 않고 상위스코프(전역)에 선언되었다면 전역에 선언된 name을 참조할 수 있다.

스코프(Scope)란?

스코프는 변수나 함수가 유효할 수 있는 범위를 뜻하는데, 그렇기 때문에 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙으로 작용한다.

클로저(Closure)

사전적인 의미로는 폐쇄라는 뜻을 갖고 있다. 자바스크립트의 클로저도 이 폐쇄와 유사한 의미를 가지고 있다.

한 마디로 클로저란 함수가 선언될(생성될) 때 그 당시에 주변의 환경과 함께 갇히는 것을 말한다.

또 다른 말로, 함수가 속한 렉시컬 스코프를 기억하며, 함수가 렉시컬 스코프 밖에서 실행될 때도 이 스코프에 접근할 수 있게 해주는 기능이다.

function sayHello(){
  const a = 'Hello';
  const b = 'World';

  function sumString(){
    console.log(a + '' + b);
  }

  return sumString;
}

const myFunc = sayHello();

myFunc();    // 'Hello World'

위 예제를 살펴보면, myFunc라는 변수는 sayHello 함수를 호출하고 있다.

그래서 myFunc를 실행하게 되면 문제 없이 'Hello World'가 잘 출력된다. 여기서 살펴볼 점은 myFunc의 부분은 변수 a와 b가 담겨있는 sayHello 함수 스코프의 바깥에 있음에도 불구하고 a와 b를 합친 Hello World를 잘 출력한다는 것인데, 그 이유가 바로 클로저(Closure) 때문이다.

모든 자바스크립트 함수는 선언될(생성될) 당시에 클로저가 형성되어 주변 환경, 즉 렉시컬 스코프를 기억할 수 있다.

클로저의 활용

다음과 같은 상황에서 클로저가 유용하게 사용될 수 있다.

• 정보 은닉 (접근 권한 제어)

클로저 기법을 사용하는 이유는 전역변수를 사용하지 않으려는 목적이 강한 듯 하다. 누구나 접근 가능하고, 변경까지 할 수 있는 전역변수를 사용하는 것은 매우 위험하기 때문이다. 하지만 클로저를 사용하면 전역변수를 사용하지 않으면서도 클로저 함수 내부의 변수에 계속 접근할 수 있기 때문에 이 문제가 해결된다.

• 커링(Currying)

커링은 f(a,b,c)처럼 여러 개의 인자를 한 번의 호출로 처리하던 함수를 f(a)(b)(c) 처럼 분리하여 인자를 하나씩만 받는 여러개의 함수로 만드는 것이다.

즉, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어서 각각의 함수가 인자를 받도록 하는 것이다. 예제코드를 보면 커링을 구현할 때도 클로저가 들어간다.

// 일반 함수
function fn(x,y){
  return x + y;
}
console.log(fn(1,2));    // 3

// 일반 함수를 커링 함수로 변환
function curried_fn(x){
  return function(y){
    return x + y
  }
}

const curried_fn2 = x => y => x + y;

console.log(
  curried_fn(1)(2),    // 3
  curried_fn2(1)(2)    // 3
);

※ 커링을 사용하는 이유

위 예제에서 일반함수의 경우 2개의 인자를 모두 전달받아야 해당 함수가 실행되는데 반해, 커링함수의 경우 첫번째 인자를 통해 하나의 함수를 실행하고, 이어 두번째 인자를 통해 또 하나의 함수를 독립적으로 실행한다. 따라서 인자를 담고있는 함수의 재사용이 가능해지고, 어떤 함수를 특정 애플리케이션 지점에서 다른 지점으로 값을 전달해야 하는 경우에도 유용하게 사용할 수 있다.

• 부분적용함수

위 커링함수를 조금 다른 방식으로 사용해볼 수도 있다. 부분적용함수란 n개의 인자를 받는 함수에 미리 m개의 인자만 넘겨 기억시켰다가, 나중에 (n-m)개의 인자를 넘기면 비로소 원래 함수의 실행결과를 얻을 수 있도록 하는 함수를 말한다. 다시 말해, 하나의 고정값을 가지고 다른 인자들의 값을 변환시켜야 하는 경우에 이 부분적용함수를 사용할 수 있다.

데이터 타입

JavaScript의 얕은 복사와 깊은 복사를 알아보기 전에 데이터 타입에 대해 알아보자.

• 기본형(Primitive) 타입
• 참조형(Reference) 타입

기본형 타입에는 Number, String, Boolean, undefined, null 그리고 ES6에서 추가된 Symbol이 있다.

참조형 타입은 Object, Array, Function, Date, RegExp, 그리고 ES6에서 추가된 Map, WeakMap, Set, WeakSet이 있다.

기본형과 참조형을 구분할 수 있는 방법은, 할당이나 연산 시 값을 복사하면 기본형이고, 값을 복사할 때 참조하면 참조형이다. 그럼 할당을 해보자.

var a = 10;

코드에서는 변수를 선언하고, 식별자를 a로 주었으며 number 타입인 10을 할당했다.

이 코드를 실행했을 때, 메모리의 한 공간을 확보한 다음, 식별자를 붙인다. 그리고 바로 10을 할당하지 않고 데이터를 저장하기 위한 다른 메모리 공간을 하나 더 확보하고 그곳의 주소를 식별자가 저장된 곳의 값으로 집어넣는다. 그리고 10이라는 값을 집어넣는다.

즉 변수는 값의 위치(주소)를 기억하는 메모리 공간인데, 값의 위치란 값이 위치하고 있는 메모리 상의 주소(address)를 의미한다.

변수란 값이 위치하고 있는 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자다.

값을 가져오는 과정은 위 과정과 반대다. console.log로 a에 접근했을 때 먼저 메모리 공간에서 식별자가 a인 메모리 공간을 찾고, 메모리 공간에 저장된 실제 값이 들어있는 공간의 주소로 값을 가져오는 것이다.

number 타입은 기본형 타입으로 주소가 한번 연결되었다. 그러면 참조형 타입을 알아보자.

var obj = {
  a : 10,
  b : 'abc',
};

1. obj라는 식별자를 가진 변수를 선언하고 참조형 타입인 객체 하나를 할당했다. 기본형과 동일하게 메모리 공간(@1002)을 하나 확보하고 obj라는 식별자를 주었다. 그리고 값을 저장하려고 다른 메모리 공간(@5001)을 하나 더 확보했더니 기본형으로 저장해야 하는 값이 여러 개가 들어있다.

2. 이 프로퍼티들을 저장하기 위해 방금 확보한 공간 외 프로퍼티 갯수에 맞게 또 여러 개의 공간(@7103, @7104)을 확보하고 식별자를 지정한다.

3. 그리고 그 식별자의 실제 데이터가 저장할 공간을 다시 확보하고 (@5003, @5004) 실제 값을 저장한다.

4. @7103, @7104에 방금 저장한 곳의 주소를 저장 후, @5001에 그룹의 주소를 저장한다.

5. 마지막으로, 아까 확보해둔 메모리 공간(@5001)에 값이 저장된 (@7103, @7104)의 공간 주소를 저장한다.

기본형 데이터와의 차이는 참조형 데이터 안에 있는 기본형 데이터를 저장하기 위해 기본형 데이터의 주소를 담은 공간을 새로 생성했다는 점이다.

불변 값이란?

불변 값은 변하지 않는 값이라는 뜻이다. 위에서 살펴본 기본형 타입은 불변 값이다. 그리고 참조형 타입은 대체적으로 가변 값이다.

var a = 10;
a = 20;
console.log(a); // 20

처음에는 a에 10 값을 주었다. 그리고 20 값을 다시 할당하고 출력하니 20이 나왔다. 자바스크립트 입장에서 설명해보자.

• 메모리 공간을 확보 후 다른 메모리 공간에 10을 할당했다.
• 그리고 10이 저장된 주소를 a에 넣는다.
• 이후, 20을 재할당할 때, 10이 저장되어 있는 메모리 공간을 그대로 두고, 20을 저장하는 메모리 공간을 추가로 확보 후 저장한다.
• 그리고 그 공간의 주소를 a가 저장한다.

흔히 사람의 입장에서는 10이 저장되어 있는 메모리 공간에 10을 삭제하고 20을 집어넣는 것을 생각한다. 하지만 자바스크립트는 값을 새로 생성하고 주소를 수정해주었다. 즉, 기본형 타입은 새로 생성되었고 변경되지 않았다. (10이라는 값은 추후 GC(Garbage Collection)가 수집하여 없어질 것임)

하지만 레퍼런스 타입은 다르다.

var obj = {
  a: 10,
  b: 'abc',
}
obj.a = 20;

console.log(obj.a) // 20

obj의 프로퍼티의 값을 재할당하면, obj가 가지고 있는 메모리 주소는 변경되지 않고 obj.a가 가지고 있는 주소가 변경된다. 즉, '새로운 객체'가 만들어진 것이 아니로 기존 객체 내부의 값만 바뀐 것이다.

깊은 복사란?

여기서 말하는 복사란, 원본을 베낌. 종이를 포개고 그 사이사이에 복사지를 받쳐 한 번에 여러 장을 쓴다는 의미를 가지고 있다. 즉 동일한 내용을 그대로 다른 곳에서 사용하는 것을 말한다.

그리고 깊은 복사란, 기존 값의 모든 참조가 끊어지는 것을 말한다. 특히 복사할 때, 참조형 타입 값(객체)에서 내부에 있는 모든 값이 새로운 값이 되는 것을 말한다.

기본형 타입의 깊은 복사

자바스크립트에서는 할당 연산자(=)를 사용해 쉽게 복사를 할 수 있다.

var a = 10;
var b = a;
console.log(a); // 10
console.log(b); // 10

b에 10을 직접 할당해주지 않아도 a를 할당했기 때문에 10이라는 값이 도출된다. 하지만, 정확하게 말하자면 할당 연산자(=)는 객체를 복사해서 값에 집어넣는 것이 아니다. 단지 a가 가지고있는 주소를 b에게 주어 b도 그 대상을 바라보게 만든 것이다. 기본형 타입은 불변 값이라고 했다. 기본형 타입의 값을 재할당 할 때는 기존 값을 변경하는 것이 아닌 새로 만들어 주소 값을 준다는 의미였다. 따라서, a와 b는 메모리 공간에 생성된 10의 주소값을 가지고 있다.

var a = 10;
var b = 10;
console.log(a === b); // true

var c = 20;
var d = c;
console.log(c === d); // true

d = 30;
console.log(c); // 20
console.log(d); // 30
console.log(c === d); // false

• 기본형 타입의 값을 바라보는 주소값이 동일하기 때문에 a와 b는 각각 값을 할당 받았지만 동일하다고 판단한다.

• d도 마찬가지로 c의 주소를 넘겨받았기 때문에 동일하다고 판단한다.

• c의 주소를 넘겨받은 d에 30을 재할당했다.

• c와 d는 다른 값을 바라보고 있다.

내부의 값은 없지만 복사했을 때, 서로의 주소가 달라졌다. 기본형 타입의 깊은 복사다. 서로에게 영향을 주지 않는다.

참조형 타입의 깊은 복사

var obj1 = {
  a: 10,
  b: 'abc',
};
var obj2 = obj1;
console.log(obj1 === obj2); // true

obj2.a = 20;
console.log(obj1);    // {a: 20, b: 'abc'}
console.log(obj2);    // {a: 20, b: 'abc'}
console.log(obj1 === obj2);    // true

• obj1과 obj2가 가지고 있는 주소 값이 동일하기 때문에 true가 나왔다.

• obj2의 a프로퍼티 값을 20으로 재할당했다.

• obj1, obj2의 값이 a 프로퍼티 모두 20으로 변경되었다.

• 여전히 obj1과 obj2가 가지고 있는 주소 값이 동일하다.

위 결과가 나온 이유는, obj2의 프로퍼티를 변경시켰기 때문이다. 프로퍼티 a가 바라보고 있는 주소 자체는 변경되었지만 obj1, obj2가 프로퍼티 그룹을 바라보는 주소 자체는 변경되지 않은 것이다.

객체 자체의 참조 값을 할당하면, 깊은 복사가 일어나지 않는다.

그렇다면 객체의 깊은 복사를 하려면, 즉 내부의 프로퍼티 값의 주소를 전부 다르게 하려면 어떻게 해야할까?

재귀 함수를 이용

var deepCopy = function (obj) {
  var result = {};
  if (typeof obj === 'object' && obj != null) {
    for(var prop in obj) {
      result[obj] = deepCopy(obj[prop]);
    }
  } else {
    result = obj;
  }
  return result;
}

deepCopy 함수는 함수 내부에서 자기 자신을 호출하는 재귀 함수다. 중첩된 객체라고 하더라도 프로퍼티 갯수만큼 돌면서 result 객체에 새롭게 할당해준다.

JSON.parse(JSON.stringify(obj))를 사용

var obj1 = {
  a: 10,
  b: 'abc',
};
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b = 3;
console.log(obj1);    // {a: 10, b: 'abc'}
console.log(obj2);    // {a: 10, b: 3}

JSON.stringify()는 JavaScript 값이나 객체를 JSON 문자열로 변환한다. 그리고 JSON.parse()는 JSON 문자열의 구분을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다. 즉, 객체를 문자열로 변환 후 다시 객체 형태로 만든다. 문자열로 변환 후 다시 객체로 만들면 원본 객체와의 참조가 모두 끊어진다.

깊은 복사를 사용하면 복사했을 때 값은 동일하지만, 객체 내부의 값을 변경해도 서로 영향을 주지 않고 격리된 값을 보장한다. 원시값과 달리 객체는 변경이 가능한 가변값이며 프로퍼티의 집합이다. 클래스에 정의된 멤버대로 객체를 생성하는 자바같은 경우 객체가 생성된 이후 멤버를 추가할 수 없다. 하지만, 자바스크립트는 객체 생성 이후에도 프로퍼티를 추가하거나 삭제하는 등 변경할 수 있다. 따라서, 깊은 복사를 통해 객체를 복사하지 않으면 객체 사이의 관계가 생성되어 예기치 못한 오류가 발생할 수 있다.

얕은 복사란?

얕은 복사란 참조형 타입의 값의 바로 아래 단계의 값만 복사하는 방법이다.

var obj1 = {
  a: 1,
  b: {
    c: 2,
  },
};
var obj2 = { ...obj1 };
console.log(obj1 === obj2);    // false
console.log(obj1.b === obj2.b);    // true

두 개의 객체는 다른 주소를 가지고 있지만, 객체 안 프로퍼티는 동일한 주소를 가지고 있다. 쉽게 말하면 {}이 껍데기는 새로 생성된 객체이며 새로운 주소를 갖게 되었고 spread 연산자로 풀어진 프로퍼티들은 처음 선언된 obj1의 프로퍼티들이 사용되었다.

Object.assign()

assign은 할당이라는 뜻을 가지고 있으며 객체와 객체를 합쳐주는 메서드다.

var obj1 = {
  a: 10,
  b: {
    c: 'abc',
  },
};
var obj2 = Object.assign({},obj1);
obj2.a = 20;
obj2.b.c = 'def';

console.log(obj1);    // { a: 10, b: {c:"def"} }
console.log(obj2);    // { a: 20, b: {c:"def"} }

• 첫 번쨰 인자로 {} 빈 객체가 들어갔기 떄문에 껍데기가 obj1과 다른 객체가 반환될 것이다.
• obj1의 내용을 {} 빈 객체 안에 복사해서 집어놓고 반환한다.
• 프로퍼티 a는 기본형 타입의 값이 들어있기 때문에 변경하면 obj2의 a 프로퍼티만 변경된다.
• 프로퍼티 b는 참조형 타입의 값이 들어있기 때문에 변경하면 obj1, obj2의 b가 가진 주소값이 동일하기 때문에 둘 다 변경된다.

mdn에 따르면 Object.assign()은 깊은 복사를 해주지 않는다고 나와있다.

for ... in

var copyShallo = function (obj) {
  var result = {};
  for (var prop in obj) {
    result[prop] = obj[prop];
  }
  return result;
};

깊은 복사에서 사용했던 함수와 달리 재귀를 사용하지 않았다. 단순히 첫 번째 프로퍼티만 새로 만든 result 객체에 담는 형태이다.

정리

얕은 복사는 한 단계까지만 복사하고, 깊은 복사는 객체에 중첩된 객체까지 모두 복사한다. 얕은 복사와 깊은 복사 모두 복사한 대상에 대해서 새로운 객체를 생성하여 기존 객체에는 영향을 주지 않는다. 하지만 얕은 복사와 깊은 복사는 어느 수준까지 복사하느냐의 차이를 가진다. 얕은 복사를 하면 한 단계만 복사하기 때문에 중첩된 객체에 대해서는 서로 영향을 주고, 깊은 복사는 중첩된 객체 역시 별개의 값으로서 서로 영향을 주지 않는다.

출처 - https://pozafly.github.io/javascript/shallo-copy-and-deep-copy/

정규화(Normalization)의 기본 목표는 테이블 간에 중복된 데이터를 허용하지 않는다는 것이다. 중복된 데이터를 허용하지 암으로써 무결성(Integrity)를 유지할 수 있으며, DB의 저장 용량 역시 줄일 수 있다.

• 갱신 이상 (Modification Anomaly) 중복된 데이터 중 일부를 갱신할 때 의도치 않은 데이터가 갱신됨으로써 생기는 데이터의 불일치

• 삽입 이상 (Insertion Anomaly) 새 데이터를 삽입할 때 의도치 않은 데이터가 삽입됨으로써 생기는 데이터의 불일치

• 삭제 이상 (Deletion Anomaly) 데이터를 삭제할 때 의도치 않은 데이터까지 삭제됨으로써 생기는 데이터의 불일치

제1 정규화

테이블의 컬럼이 원자값(Atomic Value, 하나의 값)을 갖도록 테이블을 분해하는 것

예시) 위 테이블에서 추신수와 박세리는 여러 개의 취미를 가지고 있기 때문에 제1정규형을 만족하지 못하고 있다. 그렇기 때문에 이를 제1정규화하여 분해할 수 있다.

제2 정규화

제1 정규화를 진행한 테이블에 대해 완전 함수 종속을 만족하도록 테이블을 분해하는 것이다. 여기서 완전 함수 종속이라는 것은 기본키의 부분집합이 결정자가 되어선 안된다는 것을 의미한다.

예시) 이 테이블에서 기본키는 (학생번호, 강좌이름)으로 복합키이다. 그리고 (학생번호, 강좌이름)인 기본키는 성적을 결정하고 있다. (학생번호, 강좌이름) --> (성적)

그런데 여기서 강의실이라는 컬럼은 기본키의 부분집합인 강좌이름에 의해 결정될 수 있다. (강좌이름) --> (강의실)

즉, 기본키(학생번호, 강좌이름)의 부분키인 강좌이름이 결정자이기 때문에 위 테이블은 아래와 같이 기존 테이블에서 강의실을 분해하여 별도의 테이블로 관리하여 제2 정규형을 만족시킬 수 있다.

제3 정규화

제2 정규화를 진행한 테이블에 대해 이행적 종속을 없애도록 테이블을 분해하는 것이다.

이행적 종속이란, A->B, B->C가 성립할 때 A->C가 성립되는 것을 의미한다.

예시) 기존의 테이블에서 학생 번호는 강좌 이름을 결정하고 있고, 강좌 이름은 수강료를 결정하고 있다. 그렇기 때문에 이를 (학생 번호, 강좌 이름, 수강료) 테이블로 분해해야 한다.

이행적 종속을 제거하는 이유는 비교적 간단하다. 예를 들어 501번 학생이 수강하는 강좌가 스포츠경영학으로 변경되었을 때, 이행적 종속이 존재하다면 501번의 학생은 스포츠경영학 수업을 20000원의 수강료로 듣게 된다. 물론 강좌 이름에 맞게 수강료를 변경할 수 있지만, 이러한 번거로움을 해결하기 위해 제3 정규화를 진행하는 것이다.

학생 번호를 통해 강좌 이름을 참조하고, 강좌 이름으로 수강료를 참조하도록 테이블을 분해한다.

BCNF 정규화

제3 정규화를 진행한 테이블에 대해 모든 결정자가 후보키가 되도록 테이블을 분해하는 것이다.

예시) 특강수강 테이블에서 기본키는 (학생 번호, 특강 이름)이다. 그리고 기본키 (학생 번호, 특강 이름)는 교수를 결정하고 있다. 또한 여기서 교수는 특강 이름을 결정하고 있다. 그러나 교수가 특강 이름을 결정하는 결정자이지만, 후보키가 아니다. 그렇기 때문에 BCNF 정규화를 만족시키기 위해 테이블을 분해해야 한다.

맵(map)은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 다만, 맵은 키에 다양한 자료형을 허용한다는 차이가 있다.

맵에는 다음과 같은 주요 프로퍼티가 있다.

• new Map() - 맵을 만든다.
• map.set(key, value) - key를 이용해 value를 저장
• map.get(key) - key에 해당하는 값을 반환. key가 존재하지 않으면 undefined를 반환
• map.has(key) - key가 존재하면 true, 존재하지 않으면 false를 반환
• map.delete(key) - key에 해당하는 값을 삭제
• map.clear() - 맵 안의 모든 요소를 제거
• map.size - 요소의 개수를 반환

예시:

let map = new Map();

map.set('1', 'str1');    // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키

alert( map.get(1) );    // 'num1'
alert( map.get('1') );// 'str1'

alert( map.size );    // 3

맵은 객체와 달리 키를 문자형으로 반환하지 않는다. 키엔 자료형 제약이 없다.

맵은 키로 객체를 허용한다.

let john = { name: "John" };

let visitsCountMap = new Map();

visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

객체를 키로 사용할 수 있다는 점은 맵의 가장 중요한 기능 중 하나이다. 객체에는 문자열 키를 사용할 수 있다. 하지만 객체 키는 사용할 수 없다.

객체형 키를 객체에 써보자.

let john = { name: "John" };

let visitsCountObj = {};

visitsCountObject[john] = 123;

alert( visitsCountObj["[object Object]"] ); //123

visitsCountObj는 객체이기 때문에 모든 키를 문자형으로 변환시킨다. 이 과정에서 john은 문자형으로 변환되어 "[object Object]"가 된다.

맵의 요소에 반복 작업하기

다음 세 가지 메서드를 사용해 맵의 각 요소에 반복 작업을 할 수 있다.

• map.keys() - 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환한다.
• map.values() - 각 요소의 값을 모은 이터러블 객체를 반환한다.
• map.entries() - 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환한다. 이 이터러블 객체는 for..of 반복문의 기초로 쓰인다.

예시:

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// 키(vegetable)를 대상으로 순회
for (let vegetable of recipeMap.keys()) {
    alert(vegetable);    // cucumber, tomatoes, onion
}

// 값(amount)을 대상으로 순회
for (let amount of recipeMap.values()) {
    alert(amount);    // 500, 350, 50
}

// [키, 값] 쌍을 대상으로 순회
for (let entry of recipeMap) { // recipeMap.entries()와 동일
    alert(entry);    // cucumber,500 ...
}

Object.entries: 객체를 맵으로 바꾸기

각 요소가 키-값 쌍인 배열이나 이터러블 객체를 초기화 용도로 맵에 전달해 새로운 맵을 만들 수 있다.

//각 요소가 [키, 값] 쌍인 배열
let map = new Map([
  ['1', 'str1'],
  [1, 'num1'],
  [true, 'bool1']
  ]);

alert(map.get('1') ); // str1

평범한 객체를 가지고 맵을 만들고 싶다면 내장 메서드 Object.entries(obj)를 활용해야 한다. 이 메서드는 객체의 키-값 쌍을 요소([key, value])로 가지는 배열을 반환한다.

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj)
alert( map.get('name') ); // John

Object.entries를 사용해 객체 obj를 배열 [ ["name", "John"], ["age", 30] ]로 바꾸고, 이 배열을 이용해 사로운 맵을 만들었다.

Object.fromEntries: 맵을 객체로 바꾸기

Object.fromeEntries를 사용하여 맵을 객체로 바꿀 수 있다. 이 메서드는 각 요소가 [키, 값]쌍인 배열을 객체로 바꿔준다.

let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// now prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange}; // 2

Object.fromEntries를 사용해 맵을 객체로 바꿔보자.

자료가 맵에 저장되어있는데, 서드파티 코드에서 자료를 객체형태로 넘겨받길 원할 때 이 방법을 사용할 수 있다.

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환(*)

// 맵이 겍체가 되었다.

// obj = { banana: 1. orange: 2, meat: 4 }

alert(obj.orange); // 2

map.entries()를 호출하면 맵의 [키, 값]을 요소로 가지는 이터러블을 반환한다. Object.fromEntries를 사용하기 위해 딱 맞는 형태이다.

(*)로 표시한 줄을 좀 더 짧게 줄이는 것도 가능하다.

let obj = Object.fromEntries(map); // .entries()를 생략함

Object.fromEntries는 인수로 이터러블 객체를 받기 때문에 짧게 줄인 코드도 이전 코드와 동일하게 작동한다. 꼭 배열을 전달해줄 필요는 없다. 그리고 map에서의 일반적인 반복은 map.entries()를 사용했을 때와 같은 키-값 쌍을 반환한다. 따라서 map과 동일한 키-값을 가진 일반 객체를 얻게 된다.

셋

셋(set)은 중복을 허용하지 않는 값을 모아놓은 틀별한 컬렉션이다. 셋에 키가 없는 값이 저장된다.

주요 메서드는 다음과 같다.

• new Set(iterable) - 셋을 만든다. 이터러블 객체를 전달받으면(대게 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어준다.
• set.add(value) - 값을 추가하고 셋 자신을 반환한다.
• set.delete(value) - 값을 제거한다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환한다.
• set.has(value) - 셋 내에 값이 존재하면 true, 아니면 false를 반환한다.
• set.clear() - 셋을 비운다.
• set.size - 셋에 몇 개의 값이 있는지 세어준다.

셋 내에 동일한 값(value)이 있다면 set.add(value)을 아무리 많이 호출하더라도 아무런 반응이 없을 것이다. 셋 내의 값에 중복이 없는 이유가 바로 이 때문이다.

방문자 방명록을 만든다고 가정해보자. 한 방문자가 여러 번 방문해도 반문자를 중복해서 기록하지 않겠다고 결정을 내린 상황이다. 즉, 한 방문자는 '단 한 번만 기록'되어야 한다.

이때 적합한 자료구조가 바로 셋이다.

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 어떤 고객(john, mary)은 여러 번 방문할 수 있다.
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// 셋에는 유일무이한 값만 저장된다.
alert( set.size );    // 3

for (let user of set) {
  alert( user.name );    // John, Pete, Mary 순으로 출력
}

셋 대신 배열을 사용하여 방문자 정보를 저장한 후, 중복 값 여부는 배열 메서드인 arr.find를 이용해 확인할 수도 있다. 하지만 arr.find는 배열 내 요소 전체를 뒤져 중복 값을 찾기 때문에, 셋보다 성능 면에서 떨어진다. 반면, 셋은 값의 유일무이함을 확인하는데 최적화되어있다.

셋의 값에 반복 작업하기

for..of나 forEach를 사용하면 셋의 값을 대상으로 반복 작업을 수행할 수 있다.

let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) alert( value );

// forEach를 사용해도 동일하게 동작한다.
set.forEach((value, valueAgain, set) => {
  alert( value );
});

forEach에 쓰인 콜백 함수는 세 개의 인수를 받는데, 첫 번째는 값, 두 번째도 같은 값인 valueAgain을 받고 있다. 세 번째는 목표하는 객체(셋)이다. 동일한 값이 인수에 두 번 등장하고 있다.

이렇게 구현된 이유는 맵과의 호환성 때문이다. 맵의 forEach에 쓰인 콜백이 세 개의 인수를 받을 때를 위해서이다. 맵을 셋으로 혹은 셋을 맵으로 교체하기가 쉽다.

셋에서도 맵과 마찬가지로 반복 작업을 위한 메서드가 있다.

• set.keys() - 셋 내의 모든 값을 포함하는 이터러블 객체를 반환한다.
• set.values() - set.keys와 동일한 작업을 한다. 맵과의 호환성을 위해 만들어진 메서드이다.
• set.entries() - 셋 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환한다. 맵과의 호환성을 위해 만들어졌다.

요약

맵은 키가 있는 값이 저장된 컬렉션이다.

주요 메서드와 프로퍼티 :

• new Map([iterable]) - 맵을 만든다. [key, value] 쌍이 있는 iterable(예: 배열)을 선택적으로 넘길 수 있는데, 이때 넘긴 이터러블 객체는 맵 초기화에 사용된다.
• map.set(key, value) - 키를 이용해 값을 저장한다.
• map.get(key) - 키에 해당하는 값을 반환한다. key가 존재하지 않으면 undefined를 반환한다.
• map.has(key) - 키가 있으면 true, 없으면 false를 반환한다.
• map.delete(key) - 키에 해당하는 값을 삭제한다.
• map.clear() - 맵 안의 모든 요소를 제거한다.
• map.size - 요소의 개수를 반환한다.

일반적인 객체와의 차이점:

• 키의 타입에 제약이 없다. 객체도 키가 될 수 있다.
• size 프로퍼티 등의 유용한 케서드나 프로퍼티가 있다.

셋은 중복이 없는 값을 저장할 때 쓰이는 컬렉션이다.

주요 메서드와 프로퍼티 :

• new Set([iterable]) - 셋을 만든다. iterable 객체를 선택적으로 전달받을 수 있는데(대개 배열을 전달받음), 이터러블 객체 안의 요소는 셋을 초기화하는데 쓰인다.
• set.add(value) - 값을 추가하고 셋 자신을 반환한다. 셋 내에 이미 value가 있는 경우 아무런 작업을 하지 않는다.
• set.delete(value) - 셋 내에 값이 존재하면 true, 아니면 false를 반환한다.
• set.clear() - 셋을 비운다.
• set.size - 셋에 몇 개의 값이 있는지 세어준다.

맵과 셋에 반복 작업을 할 땐, 해당 컬렉션에 요소나 값을 추가한 순서대로 반복 작업이 수행된다. 따라서 이 두 컬렉션은 정렬이 되어있지 않다고 할 수 없다. 그렇지만 컬렉션 내 요소나 값을 재정렬하거나 (배열에서 인덱스를 이용해 요소를 가져오는 것처럼) 숫자를 이용해 특정 요소나 값을 가지고 오는 것은 불가능하다.

※ 출처 - 모던 JavasScript (https://ko.javascript.info/map-set#ref-1160)

일반 함수는 하나의 값(혹은 0개의 값)만을 반환합니다.

하지만 제너레이터(generator)를 사용하면 여러 개의 값을 필요에 따라 하나씩 변환(yield)할 수 있습니다.

제너레이터와 이터러블 객체를 함께 사용하면 손쉽게 데이터 스트림을 만들 수 있습니다.

제너레이터 함수

제너레이터를 만들려면 '제너레이터 함수'라 불리는 특별한 문법 구조, function* 이 필요합니다.

예시 )

function* generateSequence(){
  yield 1;
  yield 2;
  return 3;
}

제너레이터 함수는 일반 함수와 동작 방식이 다릅니다. 제너레이터 함수를 호출하면 코드가 실행되지 않고, 대신 실행을 처리하는 특별 객체, 제너레이터 객체가 변환됩니다.

예시)

function* generateSequence(){
  yield 1;
  yield 2;
  return 3;
}

// '제너레이터 함수'는 '제너레이터 객체'를 생성합니다.
let generator = generateSequence();
console.log(generator); // [Object Generator]

함수 본문 코드는 아직 실행되지 않았습니다.

next()는 제너레이터의 주요 메서드입니다.

next()를 호출하면 가장 가까운 yield <value>문을 만날 때까지 실행이 지속됩니다.(value를 생략할 수도 있는데, 이 경우엔 undefined가 됩니다)

이후, yield <value>문을 만나면 실행이 멈추고 산출하고자 하는 값인 value가 바깥 코드에 반환됩니다.

next()는 항상 아래 두 프로퍼티를 가진 객체를 반환합니다.

• value : 산출 값
• done : 함수 코드 실행이 끝났으면 true, 아니라면 false

제너레이터를 만들고 첫 번째 산출 값을 받는 예시를 살펴봅시다.

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

let one = generator.next();

console.log(JSON.stringify(one)); // {value: 1, done: false}

첫 번째 값만 받았으므로 함수 실행은 두 번째 줄에서 멈췄습니다.

let two = generator.next();

console.log(JSON.stringify(two)); // {value: 2, done: false}

generator.next()를 다시 호출해봅시다. 실행이 재개되고 다음 yield를 반환합니다.

let three = generator.next();

console.log(JSON.stringify(three)); // {value: 3, done: true}

generator.next()를 또 호출하면 실행은 return문에 다다르고 함수가 종료됩니다.

마지막 결과인 value : 3과 done:trye를 통해 종료된 것을 확인할 수 있습니다.

let four = generator.next();

console.log(JSON.stringify(four));

제너레이터가 종료되었기 때문에 지금 상태에선 generator.next()를 호출해도 아무 소용이 없습니다.

generator.next()를 여러번 호출해도 객체 {done: true}가 반환될 뿐입니다.

제너레이터와 이터러블

next() 메서드를 보면서 짐작했듯이, 제너레이터는 이터러블입니다.

따라서 for..of 반복문을 사용해 값을 얻을 수 있습니다.

function* generateSequence(){
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

for(let value of generator){
  console.log(value);
}

1, 2만 출력되고 3은 출력되지 않습니다.

그 이유는 for..of 이터레이션이 done: true 일 때 마지막 value를 무시하기 때문입니다. 그러므로 for..of를 사용했을 때 모든 값이 출력되길 원한다면 yield로 값을 반환해야 합니다.

function* generateSequence(){
  yield 1;
  yield 2;
  yield 3;
}

let generator = generateSequence();

for(let value of generator){
  console.log(value);
}

모든 값이 정상적으로 반환되는 모습

제너레이터는 이터러블 객체이므로 제너레이터에도 전개 구문(...)같은 관련 기능을 사용할 수 있습니다.

function* generateSequence(){
  yield 1;
  yield 2;
  yield 3;
}

let sequence = [0, ...generateSequence()];

console.log(sequence)

위 예시에서 ...generateSequence()는 반복 가능한 제너레이터 객체를 배열 요소로 바꿔줍니다.

이터러블 대신 제너레이터 사용하기

from..to 사이에 있는 값을 반환하는 반복 가능 객체, range를 만들어 보았습니다.

let range = {
  from: 1,
  to: 5,

  // for..of 최초 호출 시, Symbol.iterator가 호출됩니다.
  [Symbol.iterator]() {
    // Symbol.iterator는 이터레이터 객체를 반환합니다.
    // for..of는 반환된 이터레이터 객체만을 대상으로 동작하는데, 이때 다음 값도 정해집니다.
    return {
      current: this.from,
      last: this.to,

      // for..of 반복문에 의해 각 이터레이션마다 next()가 호출됩니다.
      next() {
        // next()는 객체 형태의 값, {done:.., value :...}을 반환해야 합니다.
        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
};

// 객체 range를 대상으로 하는 이터레이션은 range.from과 range.to 사이의 숫자를 출력합니다.
console.log([...range]); // 1,2,3,4,5

Symbol.iterator 대신 제너레이터 함수를 사용하면, 제너레이터 함수로 반복이가능합니다.

같은 range이지만, 좀 더 압축된 range를 살펴봅시다.

let range = {
  from: 1,
  to: 5,

  *[Symbol.iterator]() { // [Symbol.iterator]: function*()를 짧게 줄임
    for(let value = this.from; value <= this.to; value++){
      yield value;
    }
  }
};

console.log([...range]);

range[Symbol.iterator]()는 제너레이터를 반환하고, 제너레이터 메서드는 for..of가 동작하는데 필요한 사항(아래 설명)을 충족시키므로 예시가 잘 동작합니다.

• .next() 메서드가 있음
• 반환 값의 형태는 {value: ..., done: true/false} 이어야 함

이렇게 이터러블 객체 대신 제너레이터를 사용할 수 있는 것은 우연이 아닙니다. 제너레이터는 이터레이터를 어떻게 하면 쉽게 구현할지를 염두에 두며 자바스크립트에 추가되었습니다.

제너레이터를 사용해 구현한 예시는 이터러블을 사용해 구현한 기존 예시보다 훨씬 간결합니다. 그리고 동일한 기능을 제공합니다.

제너레이터 컴포지션

제너레이터 컴포지션(generator composition)은 제너레이터 안에 제너레이터를 '임베딩(embedding, composing)'할 수 있게 해주는 제너레이터의 특별 기능입니다.

먼저, 연속된 숫자를 생성하는 제너레이터 함수를 만들어보겠습니다.

function* generateSequence(start, end) {
  for(let i = start; i <= end; i++) yield i;
}

그리고 이 함수를 기반으로 좀 더 복잡한 값을 연속해서 생성하는 함수를 만들어봅시다.

• 숫자 0부터 9까지 생성(문자 코드 48부터 57까지)

• 알파벳 대문자 A부터 Z까지 생성(문자 코드 65부터 90까지)
• 알파벳 소문자 a부터 z까지 생성(문자코드 97부터 122까지)

이런 규칙을 충족하는 연속 값은 비밀번호를 만들 때 응용할 수 있습니다.(특수 문자도 추가 가능)

일반 함수로는 여러 개의 함수를 만들고 그 호출 결과를 어딘가에 저장한 후 다시 그 결과들을 조합해야 원하는 기능을 구현할 수 있습니다.

하지만 제너레이터의 특수 문법 yield*를 사용하면 제너레이터를 다른 제너레이터에 '끼워 넣을 수' 있습니다.

컴포지션을 적용한 제너레이터

function* generateSequence(start, end) {
  for(let i = start; i <= end; i++) yield i;
}

function* generatePasswordCodes() {

  // 0~9
  yield* generateSequence(48, 57);

  // A~Z
  yield* generateSequence(65, 90);

  // a~z
  yield* generateSequence(97, 122);

}

let str = '';

for(let code of generatePasswordCodes()) {
  str += String.fromCharCode(code);
}

console.log(str);

순서대로 09, AZ, a~z가 출력되는 모습

yield* 지시자는 실행을 다른 제너레이터에 위임합니다(delegate). 여기서 '위임'은 yield* gen이 제너레이터 gen을 대상으로 반복을 수행하고, 산출 값들을 바깥으로 전달한다는 것을 의미합니다. 마치 외부 제너레이터에 의해 값이 선출된 것처럼 말이죠.

중첩 제너레이터의 코드를 직접 써줘도 결과는 같습니다.

function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) yield i;
}

function* generateAlphaNum() {

  // yield* generateSequence(48, 57);
  for (let i = 48; i <= 57; i++) yield i;

  // yield* generateSequence(65, 90);
  for (let i = 65; i <= 90; i++) yield i;

  // yield* generateSequence(97, 122);
  for (let i = 97; i <= 122; i++) yield i;

}

let str = '';

for(let code of generateAlphaNum()) {
  str += String.fromCharCode(code);
}

console.log(str); // 0..9A..Za..z

같은 결과가 나오는 모습을 확인할 수 있습니다.

제너레이터 컴포지션을 사용하면 한 제너레이터의 흐름을 자연스럽게 다른 제너레이터에 삽입할 수 있습니다. 제너레이터 컴포지션을 사용하면 중간 결과 저장 용도의 추가 메모리가 필요하지 않습니다.

'yield'를 사용해 제너레이터 안/밖으로 정보 교환하기

제너레이터는 값을 생성해주는 특수 문법을 가진 이터러블 객체와 유사했습니다. 그러나 사실 제너레이터는 더 강력하고 유연한 기능을 제공합니다.

yield가 양방향 길과 같은 역할을 하기 때문입니다. yield는 결과를 바깥으로 전달할 뿐만 아니라 값을 제너레이터 안으로 전달하기까지 합니다.

값은 안/밖으로 전달하려면 generator/next(arg)를 호출해야 합니다. 이때 인수 arg는 yield의 결과가 됩니다.

function* gen() {
  // 질문을 제너레이터 밖 코드로 던지고 답을 기다립니다.
  let result = yield "2 + 2 = "; // (*)

  console.log(result);
}

let generator = gen();

let question = generator.next().value;  // <-- yield는 value를 반환합니다.

generator.next(4); // --> 결과를 제너레이터 안으로 전달합니다.

1. generator.next()를 처음 호출할 땐 항상 인수가 없어야 합니다. 인수가 넘어오더라도 무시되어야 합니다. generator.next()를 호출하면 실행이 시작되고 첫 번째 yield "2+2=?"의 결과가 반환됩니다. 이 시점에는 제너레이터가 (*)로 표시한 줄에서 실행을 잠시 멈춥니다.

2. 그 후, 위 그림에서 보듯이 yield의 결과가 제너레이터를 호출하는 외부 코드에 있는 변수, question에 할당됩니다.

3. 마지막 줄, generator.next(4)에서 제너레이터가 다시 시작되고 4는 result에 할당됩니다(let result = 4)

외부 코드에선 next(4)를 즉시 호출하지 않고 있습니다. 제너레이터가 기다려주기 때문에 호출을 나중에 해도 문제가 되지 않습니다.

예시 :

// 일정 시간이 지난 후에 제너레이터가 다시 시작됨
setTimeout(() => generator.next(4), 1000);

일반 함수와 다르게 제너레이터와 외부 호출 코드는 next/yield를 이용해 결과를 전달 및 교환합니다.

예시 :

function* gen() {
  let ask1 = yield "2 + 2 = ?";

  console.log(ask1); // 4

  let ask2 = yield "3 * 3 = ?";

  console.log(ask2); // 9
}

let generator = gen();

console.log( generator.next().value ); // "2 + 2 = ?"

console.log( generator.next(4).value ); // "3 + 3 = ?"

console.log( generator.next(9).done ); // true

실행 흐름을 나타낸 그림은 다음과 같습니다.

1. 제너레이터 객체가 만들어지고 첫 번째 .next()가 호출되면, 그 실행이 시작되고 첫 번째 yield에 다다릅니다.

2. 산출 값은 바깥 코드로 반환됩니다.

3. 두 번째 .next(4)는 첫 번째 yield의 결과가 될 4를 제너레이터 안으로 전달합니다. 그리고 다시 실행이 이어집니다.

4. 실행 흐름이 두 번째 yield에 다다르고, 산출값("3 * 3 = ?")이 제너레이터 호출 결과가 됩니다.

5. 세 번째 next(9)는 두 번째 yield의 결과가 될 9를 제너레이터 안으로 전달합니다. 그리고 다시 실행이 이어지는데, done: true이므로 제너레이터 함수는 종료됩니다.

첫 번째 next()를 제외한 각 next(value)는 현재 yield의 결과가 될 값을 제너레이터 안에 전달합니다. 그리고 다음 yield의 결과로 되돌아옵니다.

generator.throw

yield의 결과가 될 값을 제너레이터 안에 전달하기도 합니다.

그런데 외부 코드가 에러를 만들거나 던질 수 있습니다. 에러는 결과의 한 종류이기 때문에 이는 자연스러운 현상입니다.

에러를 yield 안으로 전달하려면 generator.throw(err)를 호출해야 합니다. generator.throw(err)를 호출하게 되면 err는 yield가 있는 줄로 던져집니다.

Array.split(/\s+/)으로 공백을 기준으로 나누고 filter(word => word)로 빈 값을 제거하였다.

filter의 리턴값은 boolean이다. true인 값만 남겨둔다.

word => word는 빈 문자열이 아닌 경우에 true를 반환한다.

• 정규표현식

-- 종류 

^: 문자열의 시작 
$: 문자열의 끝 
[]: 대괄호 안의 어떤 문자든 하나와 일치
|: OR 조건
.: 어떤 문자든 하나와 일치
*: 0회 이상 반복
+: 1회 이상 반복
?: 0 또는 1회의 발생
\: 이스케이프 문자로, 특수 문자의 원래 의미를 상실시키고 문자 자체와 매칭


-- 예제

/^abc/: "abc"로 시작하는 문자열에 일치
/[0-9]+/: 하나 이상의 숫자에 일치
/\.png$/: ".png"로 끝나는 문자열에 일치
/[aeiou]/: 모음 중 하나에 일치
/^\d{3}-\d{2}-\d{4}$/: "123-45-6789" 형식의 미국 소셜 보안 번호에 일치
/\d/g : 전역에서 숫자만

function solution(names) {
    return names.reduce((acc, cur, idx) => {
        if(idx % 5 === 0) acc.push(cur);
        return acc;
    }, []); // , []는 acc를 배열로 초기화한다는 의미이다.
}

• reduce의 인자

1. accumulator - 누적된 값(누적기)
2. currentValue - 현재 배열에서 처리 중인 요소
3. currentIndex - 현재 배열에서 처리 중인 요소의 인덱스
4. array - 'reduce'가 호출된 배열