![[ 2025.07.25 ] 다시 시작 하는 Flutter](http://i1.daumcdn.net/thumb/C120x120/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FBllGg%2FbtsPyegUep0%2FAAAAAAAAAAAAAAAAAAAAAMbEYl3FEG_KELy65jvC0uQKsBtlTDD1th14EKqWL0-K%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3D20H6VbCUSqzvKwZST%252FNeEMWWOvA%253D)
[ 2025.07.25 ] 다시 시작 하는 Flutter
- Mobile/Flutter
- · 2025. 7. 25.
![[ 2025-07-24 ] 작업하다보니 3단 Switch가 나왔다리ㅣㅣㅣ](http://i1.daumcdn.net/thumb/C120x120/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbu0FQ7%2FbtsPw31FqKL%2FAAAAAAAAAAAAAAAAAAAAAO6m7eOvU6A-OXZgEnhljaaRfHDgDVNH_86zAYZGiPtY%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DCr0c3jvFJPJdtmBsBkqTGWbcsyc%253D)
[ 2025-07-24 ] 작업하다보니 3단 Switch가 나왔다리ㅣㅣㅣ
- Diary
- · 2025. 7. 24.
이번 실습에서는 Flutter를 이용해 간단한 박스형 UI 그리드 를 구현해보았습니다. `Wrap` 위젯을 활용해 A~H 알파벳 박스를 자동 줄바꿈 형태로 배치했으며,각 박스는 파스텔톤 배경을 적용하여 부드럽고 깔끔한 느낌의 레이아웃 을 구성했습니다. 구현된 요소는 다음과 같습니다: - `AppBar`: 상단 고정 헤더, 앱 타이틀 "App" 표시 - `Wrap`: 알파벳 박스를 유연하게 나열하고 줄바꿈 처리 - `AlphabetBox`: 재사용 가능한 커스텀 박스 위젯, 알파벳과 배경색 주입 가능 - `Scaffold`: 전체 레이아웃의 기본 구조 제공 Flutter의 기본 구조인 `StatelessWidget`, `Scaffold`, `MaterialApp` 등 핵심 위젯에 익숙해질 수 있는 연습..
이번 프로젝트에서는 Flutter의 기본 위젯인 `Scaffold`, `AppBar`, `BottomAppBar`, `Center`, `Icon` 등을 사용하여 심플한 앱 UI를 구성해보았습니다. - `AppBar`는 상단에 "Start App"이라는 타이틀을 표시하며, 파란색 배경으로 지정하였습니다. - 중앙에는 노란색 원 안에 별(`star`) 아이콘이 들어간 커스텀 배지를 배치하여 포인트 요소를 추가했습니다. - 하단에는 `BottomAppBar`를 사용하여 전화, 메시지, 주소록 아이콘을 가로로 나열하여 하단 네비게이션 바처럼 구현했습니다. https://github.com/GangOn0215/study/commit/ca31df925466735b1a14628ddd5a8f560bdbfbc3
pc방에서도 개발 하고 싶어서 어떻게 하면 어떤 환경 에서든 쉽게 접근해서 개발 할 수 있을까 고민하다가,막상 생각나는게 없어서 일단 블로그에 설치 리스트업을 올리기로 했습니다. 1. flutter_windows_3.??-stable.zip 다운로드 https://docs.flutter.dev/get-started/install/windows/desktop 2. 다운받은 zip 파일을 C 드라이버 원하는 곳에 압축풀기 3. 환경 변수 편집 4. 환경 편집 완료 후, cmd (command) 창에서 flutter를 작성 5. flutter doctor 6. Android Studio 설치 설치 후. 체크가 모두 되어 있다면, 시작 할 준비가 되었습니다!
아시는 분들이 많겠지만 그냥.. 내가 편할려고 따로 작성해두는 소스 package.json에 "scripts": { "build": "vite build"}, build 기준으로 설명을 드리겠습니다. build를 하고 난 뒤, 바로 nodemon으로 서버를 올리고 싶을 때, 간단하게 && 연산자를 써주면 됩니다. "scripts": { "build": "vite build && nodemon server.js"}, 그럼 pm2 같은 경우 어떻게 할 수 있을까? 이것 또한 간단함. "scripts": { "build": "vite build && pm2 start server.js --name 'app' && pm2 monit "}, 간단! 이런 식으로 응용한다면 무궁무진 할 것 ..