Wakanda Startup

AppRouter 적용한 분들 고생 많으십니다..이번에 Next.js 13 AppRouter를 적용하여 신규 프로젝트를 진행하고 있습니다.AppRouter에 대한 레퍼런스가 아직 많지 않아 하나 하나 할 때마다 굉장히 난항을 겪고 있습니다.혹시 AppRouter를 적용하여 신규 개발을 하시는 분이라면 편하게 댓글 달아주시고 제가 아는 부분이라면 도와드리겠습니다.혹시나 글에 문제점이 있다면 편하게 말씀해주시면 감사하겠습니다. AppRouter 프로젝트에서 Meta Pixel 적용하는 방법신규 프로젝트에 MetaPixel을 적용할 일이 있어 찾아봤는데, Next.js Example에는 PageRouter에 대한 예시만 있었습니다. 그래서 기존 Example 소스와 신규 AppRouter 예시를 활용해서 Ap..

Controller 룰? 특징? .obs 변수를 생성하여 조작하는 코드 작성 Repository의 데이터를 consume (Provider의 데이터를 호출) 모든 controller에는 하나의 repository만 가진다.(GetX widget에서 controller를 초기화 하는데 필요함) 만약 하나의 페이지에서 두 개의 repository가 필요한 경우 두 개의 GetX widget(Controller) 을 사용 여러 페이지에서 동일한 controller를 사용하는 경우는 아래 하나 뿐이다. 모든 페이지의 데이터가 단일 repository를 사용하는 경우 ( 뭐 login user? 이런 것..?) 위의 이유는 GetX를 사용하고 GetX의 모든 기능을 사용하기 위함이다. 왜냐하면 controller..

차근차근 getx_pattern 사이트에 나와있는대로 프로젝트 구조를 설정해보도록 하겠다. 먼저 lib 폴더 아래 app 폴더를 생성한다. getx_pattern에서 제안하는 모든 것들은 app 폴더 하위에 생성될 것이다. Data data폴더를 app 폴더 하위에 생성한다. data 폴더는 정말 데이터 조작에 사용하는 model, repository, provider 들이 들어갈 폴더일 뿐이다. Provider http 요청 또는 데이터베이스 조작을 수행한다. 데이터 하위에 provider 폴더를 생성하고 예제를 살펴보기 위해 api.dart 를 생성했다. import 'dart:convert'; import 'package:getx_practice/app/data/model/model.dart'; i..

GetX Controller 사용법 두 가지 1. GetX(builder: (_) => Text(_.var)) 이 사용법의 경우 Container를 자식으로 치지 않는다는데.. 그래서 다음과 같이 사용할 수 있다고 한다. GetX(builder: (_) => Container(child: Text(_.var))) 흠.. 일단 적어두자.. 나중에 이해가면 설명을 다는 걸로.. 2. Obx(() => Widget()) 위젯은 list나 복잡한 card와 같이 하위 계층이 클 경우 무거운 것으로 간주한다. 이럴 경우에 위처럼 GetX 위젯을 사용하여 list나 card를 재구성하려고하면 misuse 에러가 난다. 그럴 때 위와 같이 Obx(() => Widget()) 을 사용한다. 흠 나중에 좀 더 공부해서 ..

막상 GetX를 사용해서 프로젝트를 진행하려니 어떤 식으로 프로젝트를 구성해야할 지 감이 안왔다. 그래서 GitHub을 좀 뒤지다보니 GetX 개발 표준을 제안하는 것이 있어서 참고해서 프로젝트를 진행해보려고 한다. https://github.com/kauemurakami/getx_pattern kauemurakami/getx_pattern Design pattern designed to standardize your projects with GetX on Flutter. - kauemurakami/getx_pattern github.com getx_pattern에서 제안하는 GetX를 사용하는 프로젝트 구조는 Package와 Module 두 가지이다. Package 형태가 내가 진행하려는 프로젝트와 더..

GetX란? 1. Performance(성능) GetX는 Streams 나 ChangeNotifier 를 사용하지 않음 Resource 사용을 최소화 하려함 2. Productivity(생산성) 컨트롤러를 메모리에서 제거하려고 하지 않아도 됨 메모리에 계속 유지시키고 싶다면, "permanent: true" 를 의존성에 선언해주면 됨 사용하지 않는 resource들은 기본적으로 메모리에서 제거됨 문법이 간단함 3. Organization(조직화) route 사이를 이동하는데 context가 필요없음 presentation logic, business logic을 visualization layer에서 decoupling 시킬 수 있음 MultiProvider를 통해 Controllers/Models/Bl..

이번 글에서는 저번 글에서 만들었던 무한으로 생성되는 단어쌍 추천 어플을 한 단계 더 발전시켜 보겠습니다. 단어쌍마다 하트 버튼이 존재하고, 하트 버튼을 누르면 보관함에 보관할 수 있게 만들겠습니다. 먼저 저번에 만들었던 프로젝트를 불러오겠습니다. 그리고 main.dart의 State 클래스에 다음을 추가해주겠습니다. 하트 버튼을 누른 단어들을 저장할 _saved 변수를 Set 형태로 추가해주겠습니다. 그 이유는 Set는 고등학교 때(?) 배웠던 수학의 집합이라고 생각하시면 되는데, 변수 안에 중복된 것을 허용하지 않기 때문입니다. 그래서 단어쌍이 중복 저장되는 것을 막을 수 있습니다. 그리고 ListTile을 그려주는 즉, 무한 리스트 뷰의 아이템을 그려주던 _buildRow 함수에 다음과 같이 추가해..

위는 Flutter 공식 홈페이지에 나와있는 첫 번째 앱 작성하기 코드입니다. 먼저 MyApp은 StatelessWidget을 상속받습니다. Stateless 위젯은 속성을 변경할 수 없습니다. 모든 값을 final로 선언해줍니다. 이와 반대로 조금 이따 사용할 변경 가능한 Stateful 위젯도 있습니다. MaterialApp이라는 위젯을 빌드하게 되는데, 이 위젯을 Scaffold 위젯으로 구성했습니다. Material 라이브러리 문서를 보면 Scaffold를 사용하면 app bar와 title, body 등 기본적인 Material 디자인의 레이아웃 구조를 구현할 수 있습니다. app bar와 body에 간단한 Text 위젯을 넣어 만든 결과는 다음 화면처럼 나옵니다. 앱의 위쪽에 있는 하늘색으로 ..

드디어 flutter로 앱을 실행해보도록 하겠습니다. 먼저 VS Code를 켜줍니다. 그리고 [Ctrl] + [Shift] + p 를 누르면 pallete가 보이는데요. 위처럼 pallete가 뜨면 flutter를 입력해줍니다. 그리고 New Project를 만들어주도록 합시다. 그러면 프로젝트명을 입력할 수 있는데 google에서 예를 들어준대로 myapp으로 하겠습니다. 그러면 위처럼 flutter 프로젝트가 생성되고 main.dart 창이 열립니다. 오른쪽 아래의 파란색 status bar를 보시면 핸드폰이 연결돼있는 것을 볼 수 있습니다. 기기를 연결 안하고 싶으시면 No Devices를 클릭하여 시뮬레이터를 실행하시면 됩니다. 이제 Debug > Start Debugging 를 누르시거나 F5 ..

저번 글에서 flutter doctor를 사용해 의존성을 확인했을 때, 안드로이드 스튜디오에 대한 의존성 확인이 실패했다고 떴습니다. 나중에 컴파일할 때나 문제가 생기는 줄 알았는데 아니더군요. 그래서 flutter doctor를 실행했을 때 생긴 의존성 문제를 다 해결해보겠습니다. 안드로이드 스튜디오 설치 VS Code flutter extension 설치(나중에 텍스트 에디터를 VS Code로 쓸 예정입니다.) https://developer.android.com/studio