분류 전체보기 43

flutter 프로젝트 구조

클린 아키텍처 원칙 기반 구조 assets 앱에서 사용하는 정적 리소스(이미지,폰트) 저장 하위 폴더fonts : 폰트 파일images : 이미지 리소스 config앱 전역 설정 및 환경 변수 관리 core앱 전반에서 사용하는 공통 유틸리티, 설정 관리 하위 폴더 constants : 앱에서 사용하는 상수값 (API URL, key값)exceptions : 커스텀 예외 클래스 및 오류 처리 로직 data앱의 데이터 계층 관리, 외부 데이터(API, 로컬 저장소)와의 상호작용 처리 하위 폴더models : dto 또는 json 응답을 dart 객체로 매핑하는 클래스 모음repositories : Use Case에서 사용 되는 데이터 요청 처리(Save, Load, Update, Delete)가 구현되고 D..

front-end 2025.02.08

MySQL로 회원가입, 로그인 구현 (2)

이번에는 로그인 기능을 구현하고, shared preferences 기능 구현 준비까지 할 것임vs code 에서 user 폴더 내에 login.php 파일을 생성한다. 쿼리문을 보면 2가지 조건이 있는데user_table에서 정보를 가져오되, 테이블의 email 칼럼에서 사용자가 플러터앱에서 입력한 이메일과 일치하는게 있어야되고password 칼럼에서도 사용자가 입력한 패스워드랑 일치하는게 있어야 된다는 것이다.그래서 이 쿼리문 실행시 두가지 조건을 만족하는 정확한 email과 password가 존재한다면 이땐 num_row가 0보다 큰, 즉 1이 되는 것이다 이제 플러터로 돌아가서, api.dart에 로그인을 위한 변수를 하나 더 만든다static const login = "$hostConnect/u..

front-end 2025.02.07

MySQL로 회원가입, 로그인 구현 (1)

참고 강의 - https://www.youtube.com/watch?v=nGMWcFZJ-XQ+ 여기서는 php 로 함 파이어베이스가 아닌 MySQL 로 회원가입과 로그인을 구현해볼 것이다일단 서버를 설치하기 위해서 XAMPP을 다운로드 한다https://www.apachefriends.org/ XAMPP Installers and Downloads for Apache FriendsWhat is XAMPP? XAMPP is the most popular PHP development environment XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open s..

front-end 2025.02.06

UI 만들기 - 인스타그램 메인화면

여태 짧게 학습한 위젯들을 활용해서 인스타그램의 UI를 비슷하게 따라한 화면을 만드는 연습을 해볼 것이다상단의 앱 바를 만들고 바디를 2개의 컨테이너로 나눠서 친구의 피드 목록과 게시물을 만들 예정임  이렇게 AppBar를 만들어줬다 다음은 바디를 2개의 화면으로 나누기 위해 Column 위젯에 Expanded 컨테이너 2개를 사용하고Expanded 위젯의 flex 속성을 이용해서  1:8 비율로 나눠줄 것이다.그리고 일단 색상까지 넣어줌   첫 번째 컨테이너는 친구의 피드 목록을 만들어줘야되는데, 가로로 배치해야되므로 row 위젯을 만들고나서, 그 안에 서클 아바타라는 위젯을 넣을 것이다서클아바타의 사용법은 radius 속성으로 서클의 크기를 정해주고, 백그라운드 속성으로 이미지를 넣을 수 있다백그라운..

front-end 2025.02.05

UI 만들기 - 반응형 위젯 Flexible, Expanded

이번에는 컨테이너의 크기를 컨트롤하는데 사용되는 Flexible과 Expanded 위젯을 만들어볼 것이다 화면 분할을 위해 Scaffold의 body에 Column 위젯을 만들어주고 childeren에 Container를 두 개 넣어준다그리고 color,width,height를 지정해줬다  그러면 이렇게 되는데, 이 두개를 화면에 채우기 위해서는 디바이스의 높이를 알아야 된다그치만 컨테이너가 가변적으로 크기가 변하도록 하는게 좋다 컨테이너를 반응형으로 만들기 위해서는 두번째 컨테이너를 flexible 위젯으로 감싸줘 보겠다그리고 코드에서 정해준 값들인 width, height 값을 지워보면 아래처럼 두번째 컨테이너는 화면을 채우는 것을 볼 수 있다  이제 둘 다 채우고, 비율을 나눠서 하고 싶으면 fle..

front-end 2025.02.05

UI 만들기 - Container, Column, Row

Container 컨테이너는 플러터에서 간단하게 레이아웃을 만들 수 있는 위젯임다른 위젯을 감싸거나 화면의 영역을 나누는 역할을 한다그래서 그냥 Container() 이렇게만 넣어놓고 실행하면 아무것도 뜨지 않는다. 감싸는 역할만 하므로! 컬러를 넣어줄건데, Colors.grey 처럼 그냥 해줘도 되지만 Color(0xFFFFE0) 처럼 헥스값을 그대로 이용할 수도 있다 이번에는 FlutterLogo() 라는 커스텀 위젯을 이용해서 이미지를 넣어볼 것이다컨테이너의 영역같은 경우는 child 속성이 있으면 그 만큼을 차지하고,child 속성이 없으면 전체 영역을 차지한다. 컨테이너의 크기를 지정해주고 싶으면 width 나 height 값을 이용하면 된다 맥시멈값을 쓰고 싶으면 double.infinity ..

front-end 2025.02.05

UI 만들기 - 텍스트,이미지,아이콘 넣기

메인함수에서 void는 아무것도 반환하지 않는다는 의미로 string으로 입력하게 되면, 리턴값으로 스트링 형태를 반환해줘야지 정상적으로 실행 가능함그리고 앱 실행을 위해서 플러터의 runApp 함수를 불러와줌 얘는 아무것도 반환하지 않으므로 void 임 stless라고 입력하면 기본적인 형태를 만들 수 있음statelessWidget이란 말 그대로 상태변화가 없다는 의미 클래스 첫번째 줄은 클래스의 생성자를 정의하는 부분Widget build 메서드는 앱이 화면이 어떻게 보일지 위젯을 정의하는 역할을 함구글에서 제공하는 가이드로 개발하기 위해서 MaterialApp을 리턴해줌MaterialApp은 (처음 시작하는 화면)홈 속성을 가지고 있는데 홈 화면에서 레이아웃 구성을 만들기 위해서 Scaffold라..

front-end 2025.02.05

mac에서 flutter 개발 환경 세팅

윈도우 버리고 맥에서 하겠뜸니다.. flutter.dev 에서 mac os 선택 -> ios 선택하면 권장 사양이랑 설치해야될 앱 나와있음 그니까 앱스토어에서 xcode 설치 ㄱㄱ 좀 오래걸림 그러면 이제 저 아래 코드를 복사해서 터미널에 복붙해서 rosetta2를 설치합니다설치했으면 이제 flutter sdk를 설치해야되는데요 기본 home에다가 flutter 폴더 압축해제 합니다 맥에서는 flutter sdk 위치를 지정해주려면 zshrc라는 파일을 따로 생성해야하므로 sublime text 에디터를 사용하겠음sublime text 실행시키고 아래 코드를 복붙해주고 save 해준다export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin" [PATH]부분..

front-end 2025.02.01

[DFS,BFS 기초] 이진트리순회(DFS: Depth-First Search)

문제아래 그림과 같은 이진트리를 전위순회와 후위순회를 연습해보세요 전위순회 출력: 1 2 4 5 3 6 7중위순회 출력: 4 2 5 1 6 3 7후위순회 출력: 4 5 2 6 7 3 1 전위 순회부모 - 왼쪽 자식 - 오른쪽 자식1 2 4 5 3 6 7중위 순회왼쪽 자식 - 부모 - 오른쪽 자식 (왼쪽 자식이 출력되고 나서 부모가 출력되는 거)4 2 5 1 6 3 7후위 순회왼쪽 자식 - 오른쪽 자식 - 부모4 5 2 6 7 3 1 아직 수정중..

알고리즘 2025.01.18

[DFS,BFS 기초] 피보나치 재귀(메모이제이션)

문제1) 피보나치 수열을 출력한다. 피보나치 수열이란 앞의 2개의 수를 합하여 다음 숫자가 되는 수열이다.2) 입력은 피보나치 수열의 총 항의 수 이다. 만약 7이 입력되면 1 1 2 3 5 8 13 을 출력하면 된다. 입력설명첫 줄에 총 항수 N(3 출력설명첫 줄에 피보나치 수열을 출력합니다. 입력예제 110 출력예제 11 1 2 3 5 8 13 21 34 55  (아래 코드는 전체 정답 코드가 아닌 일부 코드이다) 여기서 DFS는 n번째 항을 구해주는 것이다넘어온 n(항의 개수)이 1이면 1을 return 해준다else if (n==2)일때도 1을 return 해준다else return DFS(n-2)+DFS(n-1)은 n번째 항의 앞앞 값과 바로 앞의 값을 리턴해준다  설명하면, DFS(5)라는 값..

알고리즘 2025.01.18