lucete

기획 문서 - 기획에서 필요한 문서를 알아보자

Lyla. — Wed, 25 Jun 2025 13:51:19 +0900

[문서 목록]

기능 명세서(Feature List): 페이지별 또는 기능별 세부 설명
요구사항 정의서: 비즈니스 요건, 시스템 요건, 비기능 요건 등 포함
유즈케이스(Use Case) 문서: 사용자 행동과 시스템 반응 중심 정리
와이어프레임: 화면 구성의 초기 설계안 (주로 기획자가 직접 작성)
스크린 플로우(Sitemap): 전체 메뉴 구조와 화면 흐름도

모든 문서의 형태는 다르겠지만.. 나의 경우를 서술한다. 프로젝트별로 위의 모든 문서를 작성해야 하는 것도 아니고, 위의 문서를 다 작성했다고 기획이 끝난 것도 아니다. 필요한 문서가 뭔지 의사소통을 통해서 알아내야한다.

기능명세서

기능명세서 - 엑셀로 작성, 대분류와 소분류로 나누어 필요한 기능을 작성한다.

요구사항 정의서

어떤 요구사항이 필요한지 엑셀로 작성한다. 서비스 형태(PC/Web), 모바일이라면 어떤 os 버전부터 서비스 예정인지? 등을 작성. (-> os 버전별로 지원되는 기능을 알고 있으면 좋다.)

와이어 프레임

Miro

피그마로 작업한다. 대강 어떤 화면에 어떤 기능이 들어갈지 서술.

스크린 플로우

figma

화면 간에 이동 경로 표시, 앞서 그린 와이어 프레임을 피그마 플러그인 AutoFlow을 통해 흐름을 표시해줍니다.

천문학자는 별을 보지 않는다

Lyla. — Wed, 27 Nov 2024 09:51:17 +0900

보이저는 창백한 푸른 점을 잠시 응시한 뒤, 다시 원래대로 기수를 돌렸다. 더 멀리, 통신도 닿지 않고 누구의 지령도 받지 않는 곳으로, 보이저느 수명이 다하는 날까지 전진할 것이다. 지구에서부터 가지고 간 연료는 바닥났다. 태양의 중력은 점차 가벼워지고, 그 빛조차도 너무 희미하다. 그래도 멈추지 않는다. 춥고 어둡고 광활한 우주로 묵묵히 나아간다. 그렇게 우리는 각자의 우주를 만들어간다. 그렇게 어른이 된다.

consumer = state

Lyla. — Tue, 18 Jun 2024 00:14:44 +0900

Consumer<EventProvider>는 Flutter의 provider 패키지에서 제공하는 위젯 중 하나로, 상태를 소비하고 해당 상태에 따라 UI를 빌드하는 역할을 합니다. 주로 다음과 같은 상황에서 사용됩니다:

특정 상태를 읽고 UI에 반영: Consumer<EventProvider> 위젯 내부에서 상태를 읽고, 이 상태에 따라 UI를 업데이트합니다. 예를 들어, EventProvider 클래스가 상태를 관리하고 있다면, Consumer<EventProvider> 내부에서 해당 상태를 읽어서 이벤트 목록을 보여줄 수 있습니다.

부분적인 UI 갱신: Consumer는 자체적으로 갱신됩니다. 즉, 상태가 변경될 때 해당 Consumer 내부의 UI만 다시 렌더링됩니다. 이는 성능을 향상시키고, 불필요한 전체 UI의 리빌드를 방지하는 데 도움을 줍니다.

Expanded(
            child: Consumer<EventProvider>(
              builder: (context, eventProvider, child) {
                final events = eventProvider.getEventsForDay(_selectedDay);
                print('Events for selected day ($_selectedDay): $events');
                return ListView.builder(
                  itemCount: events.length,
                  itemBuilder: (context, index) {
                    final event = events[index];
                    return Draggable<Event>(
                      data: event,
                      feedback: Material(
                        child: Container(
                          padding: EdgeInsets.all(8.0),
                          color: Colors.blue,
                          child: Text(event.title, style: TextStyle(color: Colors.white)),
                        ),
                      ),
                      childWhenDragging: Opacity(
                        opacity: 0.5,
                        child: ListTile(
                          title: Text(event.title),
                        ),
                      ),
                      child: ListTile(
                        title: Text(event.title),
                        onTap: () async {
                          // 상세보기 및 수정
                          final result = await Navigator.of(context).push(MaterialPageRoute(
                            builder: (context) => EventDetailPage(event: event),
                          ));
                          if (result == true) {
                            setState(() {}); // 캘린더 상태 업데이트
                          }
                        },
                        onLongPress: () {
                          // 이벤트 복사
                          eventProvider.addEvent(event.copyWith(
                            dateTime: event.dateTime.add(Duration(days: 1)),
                          ));
                          setState(() {}); // 캘린더 상태 업데이트
                        },
                      ),
                    );
                  },
                );
              },
            ),
          ),

gitlab - host, 호스팅 파일 수정 git 설정 오류

Lyla. — Mon, 15 Apr 2024 15:28:23 +0900

[에러메세지]

ssh: Could not resolve hostname gitlab.local.intsoft.kr: nodename nor servname provided, or not known
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

1. ping 찍어보기

ping [사이트 url]

ping 이 안찍힘

-> url 문제

로컬 시스템의 호스트 파일을 수정할 수 있습니다. 호스트 파일을 수정하면 특정 호스트 이름을 IP 주소로 해석하도록 지시할 수 있음.

2. 호스트 파일 열기

sudo nano /etc/hosts

3. 호스트 파일 수정하기

10.10.10.XXX [연결할 url]

호스트 파일의 끝에 다음과 같은 라인을 추가

편집이 완료되면 Ctrl + X를 눌러 나가기를 선택하고 Y를 눌러 변경 사항을 저장합니다.

저장한 후에는 Enter를 눌러 편집기를 종료합니다.

4. ping 다시 찍기

: 제대로 찍힌다. 연결 완료

마커에 infoView표시하기

Lyla. — Fri, 1 Mar 2024 23:19:04 +0900

function createMarker(labelContent, lat, lng) {
            var markerOptions = {
                position: new naver.maps.LatLng(lat, lng),
                map: map
            };

            var marker = new naver.maps.Marker(markerOptions);

            var contentString = [
                '<div class="iw_inner">',
                '   <h3>마커 정보</h3>',
                '   <p>마커 내용: ' + labelContent + '<br>',
                '       좌표: ' + lat + ', ' + lng + '</p>',
                '</div>'
            ].join('');

            var infowindow = new naver.maps.InfoWindow({
                content: contentString
            });

            naver.maps.Event.addListener(marker, 'click', function (e) {
                if (infowindow.getMap()) {
                    infowindow.close();
                } else {
                    infowindow.open(map, marker);
                }
            });
        }

NavigationStack에서 title Zstack사용으로 여백이 생김

Lyla. — Thu, 22 Feb 2024 21:46:07 +0900

상황

floatingButton 때문에 ZStack은 써야하는 상황

List를 띄우니 여백이 많이 남는다.

struct ContentView: View {
    @State var diaryStore:DiaryStore = DiaryStore()
    
    var body: some View {
        NavigationStack{
            ZStack  {
                ListView(diaryStore: $diaryStore)
                VStack {
                    Spacer()
                    HStack {
                        Spacer()
                        Button(action: {
                            print("플로팅 버튼이 클릭되었습니다.")
                        }) {
                            Image(systemName: "plus")
                                .font(.title)
                                .padding()
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .clipShape(Circle())
                        }
                    }
                }
            }
            .navigationTitle("MoodDiary")
        }
        .padding()
    }
}

listStyle을 inset으로 설정하기

ListView(diaryStore: $diaryStore)
                    .listStyle(.inset)

그나마 봐줄만한데 Scroll을 올렸을 때 오른쪽처럼 안예쁘다..! '-'

[SwiftUI] 플로팅 버튼 만들기

Lyla. — Thu, 22 Feb 2024 11:43:52 +0900

안드로이드에서 주로 쓰이는 UI인 플로팅 버튼을 만들어봅시다.

[구조 파악]

1. Zstack으로 ScrollView를 아래에, floatingButton을 위에 띄워준다.

2. spacer를 두개 줘서 왼쪽 아래에 floatingButton을 위치시킨다. (Hstack, Vstack 이용)

struct ContentView: View {
    @State private var isButtonVisible = false
    
    let pages = [
       "page1","page2","page3"
    ]
    
    var body: some View {
        ZStack {
            ScrollView{
                VStack {
                    ForEach(pages,id: \.self) { image in
                        Image(image)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                    }
                }
            }
            
            if isButtonVisible {
                VStack {
                    Spacer()
                    HStack {
                        Spacer()
                        Button(action: {
                            print("플로팅 버튼이 클릭되었습니다.")
                        }) {
                            Image(systemName: "plus")
                                .font(.title)
                                .padding()
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .clipShape(Circle())
                        }
                        .padding(.trailing, 16)
                        .padding(.bottom, 16)
                    }
                }
                
            }
        }
        .onAppear {
            isButtonVisible = true
        }
    }
}

MVVM / MVC

Lyla. — Wed, 21 Feb 2024 22:11:07 +0900

M/V/C - Model / View / ViewController

M/V/VM - Model / View / ViewModel

MVC에 ViewController의 책임이 과해져서 이를 ViewModel에 덜어준다.

한마디로, Data를 가지고 있는 instance/로직을 ViewModel에 전가함.

MVVM의 View는 그냥 보여주기만 하는 친구임

	MVVM의 View	MVC의 ViewController
있는 것	ViewModel	Data를 가지고 있는 instance
없는 것	Data를 가지고 있는 instance (이를 ViewModel로 보냄)	-

의존성 기반으로도 참고

MVC 패턴은 주로 전통적인 GUI 기반 애플리케이션에서 사용되며, 애플리케이션을 세 가지 주요 구성 요소로 분리합니다:

- Model (모델): 데이터와 비즈니스 로직을 처리합니다. 데이터의 상태를 유지하고 조작하는 역할을 합니다.

- View (뷰): 사용자 인터페이스를 표시하고 사용자의 입력을 처리합니다. 사용자에게 정보를 표시하고 입력을 Controller에 전달합니다.

- Controller (컨트롤러): 사용자 입력을 처리하고 Model과 View 사이의 상호 작용을 조정합니다. 사용자 입력을 처리하여 Model의 상태를 변경하고, 변경된 데이터를 View에 반영합니다.

MVC 패턴은 단방향 데이터 흐름을 가지며, Model과 View는 직접적인 의존성이 없습니다. 대신, Controller가 Model과 View를 조정하여 상호 작용합니다.

반면에 MVVM 패턴은 주로 UI 중심 애플리케이션에서 사용되며, 애플리케이션을 세 가지 주요 구성 요소로 분리합니다:

- Model (모델): 데이터와 비즈니스 로직을 처리합니다. 데이터의 상태를 유지하고 조작하는 역할을 합니다.

- View (뷰): 사용자 인터페이스를 표시하고, ViewModel과 데이터 바인딩을 통해 데이터의 상태를 표시합니다. 사용자의 입력은 ViewModel로 전달됩니다.

- ViewModel (뷰모델): View와 Model 사이의 인터페이스 역할을 합니다. View에 표시할 데이터를 제공하고, 사용자 입력을 처리하여 Model의 상태를 변경합니다. 또한, View와의 데이터 바인딩을 통해 View의 상태를 업데이트합니다.

MVVM 패턴은 양방향 데이터 바인딩을 사용하여 View와 ViewModel 사이의 상호 작용을 강화합니다. ViewModel은 View에 대한 의존성이 없으며, View는 ViewModel에 대한 의존성이 있습니다. 이를 통해 UI 로직과 비즈니스 로직을 분리하여 테스트 용이성과 재사용성을 향상시킵니다.

MVC와 MVVM은 각각 다른 상황에 적합한 패턴이며, 애플리케이션의 크기, 복잡성 및 요구 사항에 따라 선택할 수 있습니다.

Combine - 연산자 receive/sink/store

Lyla. — Wed, 21 Feb 2024 21:49:01 +0900

viewModel.selectedItem
            .compactMap { $0 }
            .receive(on: RunLoop.main)
            .sink { framework in
                let sb = UIStoryboard(name: "Detail", bundle: nil)
                let vc = sb.instantiateViewController(withIdentifier: "FrameworkDetailViewController") as! FrameworkDetailViewController
                vc.viewModel = FrameworkDetailViewModel(framework: framework)
                self.present(vc, animated: true)
            }.store(in: &subscriptions)

해당 코드는 Combine 프레임워크를 사용하여 데이터 흐름을 처리하는 방식을 보여주는 예시입니다. 코드를 각 부분별로 설명하겠습니다:

1. `viewModel.selectedItem`: `viewModel` 객체의 `selectedItem` 속성을 나타냅니다. 이 속성은 Combine의 `CurrentValueSubject`나 `PassthroughSubject`와 같은 Publisher 타입입니다.

2. `.compactMap { $0 }`: `selectedItem`의 값을 optional에서 non-optional로 변환하기 위해 `compactMap` 연산자를 사용합니다. optional 값을 unwrapping하고, non-optional 값만을 포함하는 스트림을 생성합니다.

3. `.receive(on: RunLoop.main)`: 데이터 스트림을 메인 스레드에서 처리하도록 지정합니다. UI 업데이트와 관련된 작업은 일반적으로 메인 스레드에서 수행되어야 하므로, `receive(on:)` 연산자를 사용하여 메인 스레드에서 처리하도록 설정합니다.

4. `.sink { framework in ... }`: 데이터 스트림의 값을 받아 처리하는 부분입니다. `sink` 연산자를 사용하여 데이터 스트림의 값을 받아옵니다. 클로저에서는 받아온 `framework` 값을 사용하여 `FrameworkDetailViewModel`을 생성하고, 해당 뷰 모델을 이용하여 `FrameworkDetailViewController`를 생성하고 표시합니다.

⭐️실제로 데이터를 처리하는 부분
위 코드에서는 viewController를 생성(FrameworkDetailViewModel)하고, 데이터를 넣어준다.

5. `.store(in: &subscriptions)`: `sink` 연산자에서 반환된 `AnyCancellable`을 `subscriptions` 변수에 저장합니다. `AnyCancellable`은 데이터 스트림의 구독을 취소할 수 있는 기능을 제공합니다. 해당 구독을 취소하려면 `subscriptions` 변수에 저장된 `AnyCancellable` 객체를 해제해야 합니다.

.store(in: &subscriptions)부분이 없으면?
이 코드는 Combine을 사용하여 데이터 흐름을 처리하고, `selectedItem`의 값이 변경되면 해당 값을 처리하는 방식을 보여줍니다. `selectedItem`의 값이 변경되면 메인 스레드에서 `FrameworkDetailViewController`를 생성하고 표시하는 동작이 수행됩니다.

.store(in: &subscriptions) 부분이 없다면, 구독이 AnyCancellable 객체에 저장되지 않고 따로 참조되지 않게 됩니다.

이 경우, 구독이 유지되는 동안 AnyCancellable 객체가 존재하지 않기 때문에 구독을 취소하거나 해제할 수 있는 참조가 없게 됩니다. 따라서, 해당 구독을 취소하거나 해제할 수 있는 방법이 제한되며, 메모리 누수가 발생할 수 있습니다.

따라서, AnyCancellable 객체를 적절히 저장하는 것은 구독의 수명 주기를 관리하고 메모리 누수를 방지하기 위해 중요합니다. .store(in: &subscriptions)를 통해 AnyCancellable 객체를 subscriptions 변수에 저장함으로써, 필요한 시점에 구독을 취소하고 메모리를 해제할 수 있게 됩니다.

.store(in: &subscriptions) 외에도 구독을 관리하고 해제하는 다른 방법들이 있습니다.

수동으로 구독 취소: AnyCancellable 객체를 직접 해제하는 방법입니다. 구독을 취소하기 위해 cancel() 메서드를 호출하면 됩니다. 예를 들어, 구독을 취소하고 AnyCancellable 객체를 해제하려면 다음과 같이 할 수 있습니다:

let cancellable = somePublisher.sink { value in
    // 처리 로직
}

// 구독 취소
cancellable.cancel()

Assign 연산자 사용: @Published 속성이나 ObservableObject를 사용하는 경우, assign(to:on:) 메서드를 사용하여 구독을 생성하고 속성에 값을 할당할 수 있습니다. 이 경우, AnyCancellable 객체를 따로 저장할 필요가 없습니다. 예를 들어:

class MyViewModel: ObservableObject {
    @Published var someValue: Int = 0
    private var cancellable: AnyCancellable?

    init() {
        cancellable = somePublisher.assign(to: \.someValue, on: self)
    }
}

위의 코드에서 assign(to:on:) 메서드를 사용하여 somePublisher의 값을 someValue에 할당하고, 구독을 생성합니다. cancellable 변수는 AnyCancellable 타입으로 선언되었지만, assign(to:on:) 메서드에 의해 자동으로 해제됨.

URLSession: 서버와 소통하는 주체, Json Decode

Lyla. — Tue, 20 Feb 2024 22:29:02 +0900

response status code가 200번대이어야함.

URLSession.shared.dataTaskPublisher(for: request)
            .tryMap { result -> Data in
                guard let response = result.response as? HTTPURLResponse,
                      (200..<300).contains(response.statusCode)
                else {
                    let response = result.response as? HTTPURLResponse
                    let statusCode = response?.statusCode ?? -1
                    throw NetworkError.responseError(statusCode: statusCode)
                }
                return result.data
            }

URLSession.shared.dataTask(with: url) { data, response, error in
            if let error = error {
                print("Error: \(error.localizedDescription)")
                return
            }
            
            if let data = data {
                do {
                    //Data를 decode, 형식이 MyData이다.
                    let decodedData = try JSONDecoder().decode(MyData.self, from: data)
                    DispatchQueue.main.async {
                        self.data = decodedData
                    }
                } catch {
                    print("Error decoding data: \(error.localizedDescription)")
                }
            }
        }

Data를 decode, 형식이 MyData이다.