티스토리

백수코딩

검색하기

블로그 홈

백수코딩

100sucoding.tistory.com/m

타이싸란 님의 블로그입니다.

구독자: 13

방명록 방문하기

주요 글 목록

플러터로 SNS어플 만들기 13.firestore 에서 데이터 받은뒤 뿌려보기 저번포스팅에서 만든 데이터를 뿌려볼거에요. 10개를 임의 생성했었는데요. 이건뭐 그림도 없고 아무것도 없이 진짜 임의잖아요? 결국나중에는 실제데이터를 넣을꺼지만 지금은 그냥 콘솔에서 임의로 넣어주세요. 1. 데이터 필드 value 임의 입력. 이렇게 맨위 autorName 부터 맨아래 title 까지 필드가 잡혀있고 이게 10개 문서가 있는게 보이죠? 모두 같은 필드를 가지고 있습니다. 즉 Posts 컬렉션 내부의 모든 문서는 같은 형식의 필드를 가지고 있죠.(각 필드의 value값들은 다르겠지만요.) 여기에 explain 하고 title 하고 각자 알아서 임의적으로 적어주세요. 그리고 이미지 관련해서 Url 이나 높이 넓이 같은걸 넣어야 하잖아요? Url 은 인터넷에 그림 아무거나 넣어도 되지만, 그냥.. 공감수 3 댓글수 6 2021. 6. 3.
플러터로 SNS어플 만들기 12.실제 데이터 업로드 저번 포스팅까지 파이어베이스의 데이터베이스 중에 하나인 파이어스토어 CRUD 하는 간단한 방법들을 알아봤었어요. 이제는 실제로 post 를 만들어 실제데이터를 데이터베이스에 넣고 활용해볼거에요. 오늘의 작업내용 1.post를 규정하는 class 만들기 2. Floating button 만들기 3. 데이터 업로드하기 1.post를 규정하는 class 만들기 아래처럼 임의로 만든 포스팅들이 나오는데 사실 실제로는 이 포스팅 하나하나가 가지고 있는 값들이 있어요. 연습삼아 클래스의 개념을 잠시 보고가면 예를들어 사람 이라는 개념안에 이름,나이, 성별, 출생 이런것이 들어간다고 해요. 그것을 class 로 나타내면 이렇게 나타낼수 있어요. name,gender,born 3가지 변수는 String이라는 자료형을 .. 공감수 2 댓글수 0 2021. 5. 31.
플러터로 SNS어플 만들기 11.데이터베이스 만들기-파이어베이스 파이어스토어(firebase-firestore) 연결하기 3 저번 포스팅에 이어 계속 파이어 베이스를 해볼게요. 데이터 불러오기를 했었던 테스트 페이지로 가주세요. 그리고 그아래에 버튼하나를 더 만들어 줍니다. 그리고 클릭하면 MakePostPage 로 이동할수 있도록 해주세요. 그럼 오류가 뜰텐데 MakePostPage 라는 클래스를 아직 안만들어 줬기 때문이에요. 그래서 해오던 것처럼, 다트파일을 새로 만들고 StateFul 위젯을 가지는 클래스를 만들어볼게요. 1.TextField 위젯 만들기 이렇게 만들었으면 글을 입력할수있는 위젯인 TextField 라는 위젯을 만들어 볼게요. TextField() 위젯을 Column 으로 2개를 만들어 줬어요. 그럼 이렇게 글을 입력할수가 있게되요. 그런데 TextField를 이렇게 두면 안되요. 옵션을 줘야하죠. 그럼.. 공감수 2 댓글수 0 2021. 5. 25.
플러터로 SNS어플 만들기 10.데이터베이스 만들기-파이어베이스 파이어스토어(firebase-firestore) 연결하기 2 저번 포스팅에 이어 파이어스토어 연결하는걸 진행할거에요. 저번 포스팅에 기본적인건 모두 세팅이 되었으니 이번에는 직접 데이터를 받아와볼게요 오늘의 작업내용 1. 컬렉션 만들기 (CRUD - 콘솔에서 Create 하기) 2. 컬렉션 내부 문서 만들기 3. 문서의 필드 만들기 4. CRUD - Read 해보기 1. 컬렉션 만들기 (CRUD - 콘솔에서 Create 하기) 컬렉션 시작을 눌러서 컬렉션 이름을 짓고 '다음' 을 눌러주세요. 컬렉션 이름을 지을때 자기만의 규칙을 만들어주세요. 저는 Class 명을 짓는 규칙과 동일하게 하고 있어요. 그건 대문자로 단어를 시작하고 복합단어일경우 각단어의 첫글자를 대문자로 시작하는거에요. 예를들어 Test , UserPhone 이렇게요. User와 Phone 이 합쳐.. 공감수 4 댓글수 1 2021. 5. 23.
플러터로 SNS어플 만들기 9.데이터베이스 만들기-파이어베이스 파이어스토어(firebase-firestore) 연결하기 1 자 드디어 데이터 베이스 라는걸 써볼거에요. 앱이든 웹이든 클라이언트와 서버 가 있어요. 클라이언트는 사용자눈에 보이는 모든걸 다룬다고 보면되고 서버는 뒤에 돌아가는거라고 하는데 이렇게 말하면 좀 추상적이긴하네요 어쨋든 우리는 지금 클라이언트 부분을 하고있었어요. 그런데 클라이언트에서 쓰는 대부분을 서버에서 받아와요. 처음엔 뭔말이야하겠지만 하다보면서 또 하다보면 그냥 직감적으로 쉽게 개념이 찾아와요, 모든지 처음엔 낯설지만 지식의 퍼즐이 맞춰지면서 잘 이해가 되니 어쨋든 시작합니다. 오늘의 작업내용 1. Firebase 란 2. Firebase 프로젝트 추가하기 3. Firebase 프로젝트에 앱등록하기 4. google-services.json 파일 다운받기 5. project 수준의 build.gr.. 공감수 6 댓글수 0 2021. 5. 21.
플러터로 SNS어플 만들기 8.페이지뷰 활용하여 이미지 스와이핑 이번 포스트에는 페이지뷰(PageView)를 이용해서 여러장의 한포스트에 여러장의 사진을 담아서 오른쪽으로 스와이프해서 사진을 넘기는거를 해볼거에요. 금일 작업 내용 1.PageView 위젯 생성 2.AspectRatio 로 비율주기 3.Indicator 달아주기 4.Stack 사용하기 5.PageView.builder 사용하기 6.CurrentPage 표시하기 1.PageView 위젯 생성 먼저 기존에 이미지가 담긴 Container를 PageView로 감싸줘요. children 부분에 기존의 이미지가 담긴 Container 를 그냥 담아주면되요. 저는 3개 담아줬어요. 그럼 3장의 사진을 넘길수 있게되겠죠. 그런데 이런 사이즈 오류가 날거에요. 페이지뷰를 쓰기위해서는 부모위젯이 세로 사이즈를 가지고 .. 공감수 8 댓글수 0 2021. 5. 19.
플러터로 SNS어플 만들기 7.하드코딩으로 레이아웃잡기 지난포스트에서 아래처럼 포스트카드를 30개가량 리스트 뷰로 뿌려봤는데요 이번엔 포스트 카드를 좀 그럴듯하게 꾸며볼거에요. 인스타그램 모양처럼요 이렇게 위에서부터 column형태로 제목칸,사진칸,하트등 이모티콘,댓글 이런씩으로 되어있는거요. 오늘의 작업 내용 1. 일단 하드코딩으로 레이아웃 구성하기 2. 사진 넣어보기 3. 하드코딩으로 다른부분 꾸미기 4. ListView.separated 로 바꾸기 1.일단 하드코딩으로 레이아웃 구성하기 PostCard가 있는 클래스로 가서 내용을 이렇게 구며줬어요. 당연 나중에는 구성이 바뀌겟지만 우선적으로 보는거에요. 사진칸에는 height 를 400으로 줬지만, 우선 시각적으로 레이아웃을 볼려고 저렇게 임시적으로 해둔거고 사실 사진칸은 유저가 실제로 올린 사진의 비.. 공감수 5 댓글수 0 2021. 5. 17.
플러터로 SNS어플 만들기 6. ListView 이용하여 리스트뿌려주기 앱의 아이덴티티 를 조금 바꿔보고자 해요. 왜냐면 조카를 위한 sns 앱을 만들려고했는데 네이버밴드에서 그냥 하는게 나을거라고 생각되요 ㅋ 그래서 유아용품 SNS 앱으로 바꾸기로 했어요. 업체들이 유아용품 사진이랑 동영상올리고 그거 클릭하면 그냥 그 사이트로 링크로 연결되도록 할거에요 이것도 실제 사용은 못할수있지만 좀더 재미가있을거 같아서요.. 재미가있으면 집중력이 생기죠. 그래서 앱 아이콘이랑 앱이름도 바꿀건데 그건 나중에 하기로할게요 ㅋ 오늘의 작업 내용 1. ListView.bulder 일단 써보기 2. Class 단위의 위젯 만들기 3. Class에 인수전달하기 4. 랜덤색상 부여하기 1. ListView.bulder 일단 써보기 바텀 네비에보시면 홈, 그리드뷰,마이라이크 ,마이페이지 이렇게 4.. 공감수 2 댓글수 2 2021. 5. 15.
플러터로 SNS어플 만들기 5. font 적용하기 오늘은 너무나도 딱딱한 글씨체를 좀 바꿔줄꺼에요. 그래서 메인페이지의 앱바에 텍스트로 레터링 로고를 넣으려고합니다. 이렇게 바꿔줄꺼에요. 오늘 작업할 내용 1. 구글폰트 다운로드 2. font 폴더만들기 3. yaml파일설정 4. 적용 5. 전체테마 글씨체변경 1. 구글폰트 다운로드 우선 저는 구글 폰트를 다운받았는데, 제일만만한게 구글폰트입니다. 구글에 그냥 검색어에 구글폰트 라고 치시고 여기로 들어갑니다. 자기가 원하는 글자를 여기 빨간 동그라미 부분에 치시고 원하는 미리보기를 한번 찾아보세요. 사각형으로 뜨는거는 영어전용인가? 한글은 지원안하나봐요. 그리고 원하는걸 클릭합니다. 저기 Download family 누르면 다운로드가 진행되요. 그리고 압축을 풀어주세요. 그리고 압축이 풀리면 ttf 파일.. 공감수 5 댓글수 0 2021. 5. 13.
플러터로 SNS어플 만들기 4. 실제 단말기연결,앱 아이콘 만들기 이번시간에는 휴대폰에서 빌드하기 와 앱 아이콘을 만들어볼거에요. 플러터로 만든 기본앱을 에뮬레이터나 실제 단말기에 깔면 빨강색으로 동그라미 친거처럼 아이콘이 저렇게 나와요. 근데 이걸 아이콘을 바꿔주면 파란색으로 동그라미 친거처럼 저렇게 바뀌죠. 사진이 정사각형이 원안에 그냥 저렇게 들어가잇는데. 안드로이드 에뮬레이터의 구글 픽셀폰이라서 저렇고 일반적인 안드로이드 폰은 사각형 그림파일있으면 아래처럼 이쁘게 둥그스름하게 만들어줘요 오늘 작업할 내용입니다. 1. 단말기 설정하기 2. 단말기에 깔기 3. 런쳐아이콘 사진정하기 4. flutter_launcher_icons 라이브러리 적용하기 5. 라벨 변경하기 1. 단말기 설정하기 우선 자기 단말기를 꺼내 톱니바퀴 모양의 설정을 눌러들어간다음 개발자 옵션에서 .. 공감수 4 댓글수 0 2021. 5. 11.
플러터로 SNS어플 만들기 3. 메인페이지 제작(BottomNavigation) 이번 시간에는 BottomNavigation 을 통한 메인페이지를 만들어 볼겁니다. 보통 앱들을 보면 밑에 이런것들이 많은데 이걸 우리는 BottomNavigationBar 라고 합니다. 기본적인 원리는 int 값을 같은 변수를 한개 지정해두고 (ex int selectedIndex) 밑에 아이콘을 클릭하면 setState가 되면서 인덱스값이 변경되게 해두고, (여기서 setState는 상태를 새로 불러온다는건데 쉽게 그냥 새로 빌드하는겁니다.) 그 인덱스값에 맞춰서 페이지와 BottomNavigationBar의 아이콘들이 반응하게 하면됩니다. 오늘 할 작업의 목록은 1. BottomNavigationBar 위젯생성 2. BottomNavigationBarItem 생성 3. 페이지 연결 4. 아이콘 바꾸.. 공감수 3 댓글수 2 2021. 5. 9.
플러터로 SNS어플 만들기 2. 메인페이지로 넘어가기 저번시간에 랜딩페이지까지 만들었습니다. 앱을 실행하면 여기서 끝나는거죠. 그러면 앱이라고 할수가 없을겁니다. 그래서 오늘은 랜딩페이지에서 메인페이지로 넘어가는것을 할거구요 다음 글에서는 bottomNavigation 을 활용한 메인페이지를 만들어볼겁니다. 오늘의 작업내용은 1. GetX 라이브러리 적용 2. 일단 메인페이지 다트파일 작성 3. Timer 함수로 메인화면으로 이동 1. GetX 라이브러리 적용 우선 flutter getX라고 구글에 검색하셔서 들어간다음 Pubspec.yaml 파일에 적용해줍니다. 4.1.4 버전이네요. 첫 라이브러리 적용이네요. 그림과 같이 적어주시고 pub get 눌러주세요. 이제 요런 라이브러리 적용하는건 너무 기초적이니까 생략하겠습니다. GetX는 플러터 사용하는 사.. 공감수 3 댓글수 0 2021. 5. 7.
플러터(flutter)로 SNS어플 만들기 1. 랜딩페이지 제작 우선 제가 만들앱은 SNS 앱입니다. 쉽게말해 인스타 같은걸 만들거고 UI같은부분도 많이 따라 할려고 합니다. 프로젝트를 처음 생성하면 초반에 좀 해줘야 할것들이 있는데 그런 초기 세팅 부분은 모두 완료했다 가정하고 진행하겠습니다. **그리고 플러터로 아주 기초적인거는 좀 해본사람들이 보시면 되요. 뭐 많이 아는게 아니고 한 1주일 해봤다정도? 컨테이너가 뭔지 Text위젯이 뭔지 한번 써봣다 column 도 한번써봣다. 페이지 넘어가는거해봤다. 등등 기초분들이요. 플러터를 아에 생처음으로 하는거다 싶으면 플러터 쌉초보기초강의 를 먼저깨신뒤에 따라해보시는걸 추천합니다. 초기세팅이라함은 다음과 같아요. 1.컴퓨터구매 2.안드로이드 스튜디오 또는 VSCODE 설치 3.플러터 sdk 설치 4.각종 짜증나는 설정.. 공감수 7 댓글수 2 2021. 5. 5.
플러터로 앱을 만들어보자. 안녕하세요. 현업 플러터 앱 개발자 말머리성훈 입니다. 플러터를 하게된건 9개월정도 되고, 현업에서 일한건 아직 3개월정도 밖에 되지 않았지만, 취업전 밥먹고 코딩만 한결과 플러터 잡고 2개월만에 개인앱을 실제로 런칭을 하고, 그걸 포트폴리오로 취업까지 하게 되었네요. 말씀드리고자 하는거는 어느 유튜버들처럼 뭐좀 아는 개발자는 아니고 그냥 초보수준에 검색돌이에 불과하니 코딩방식이 ㅄ같고 비효율적이다 싶으면 댓글로 저좀 알려주세요~ ㅎ 공격은 하지 마시고. 그래서 지금부터 만들어볼거는 조카를 위한 sns앱을 만들어 볼거고, 그 과정을 문서로 남겨보고자 합니다. 초보 분들이시라면, 기본 세팅정도나 기본 위젯아시면 따라하시면 앱 한개정도는 만들수 있을거 같네요!~ 그럼 수고하세요. 23년 버전 앱강의를 오픈했.. 공감수 9 댓글수 1 2021. 5. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.