database 는 일종에 폴더 같은 개념이고 collection 은 그 안에 들어가 있는 파일 개념이다. db 는 todoapp 이라는 db로 설정한거고 collection은 post 라는 collection 으로 설정한거다. 데이터하나를 insertOne 으로 삽입하도록 했다. 만약 수행하고 나면 콘솔에 저장완료라고 뜨도록 했다. 들어가서 refresh 하니 잘 들어간 것을 확인할 수 있다. (자료 저장할 때 _id 를 꼭 적어야하는데 안적으면 하나를 강제로 부여해준다) 폼에 입력한걸 db에 저장해보는 코드를 짜봤다. const express = require("express"); const app = express(); const bodyParser = require("body-parser"); a..
DB 의 종류 1. 관계형 : 가로 세로 칸 나뉘어져 있음 - 대부분 SQL 언어를 써야(빠르고 효율적) - ex) MySQL, MariaDB, Oracle 2. NoSQL - Object 자료형으로 입출력 가능 - ex) Dynamo, MongoDB, Redis, Oracle NoSQL MongoDB 무료 호스팅 받기 저 코드를 추가하고 npm 으로 mongodb 를 설치한다. mongodb atlas에 들어감 connect 버튼을 누름 mongodb에서 복사한 url을 저기에 복사해서 추가한다. mongodb+srv://디비계정아이디:디비계정패스워드@cluster0-qaxa3.mongodb.net/데이터베이스이름?retryWrites=true&w=majority ... const MongoClient..
API란? Application Programming Interface API 규약에 따라 데이터 전달 웹 개발시 서버랑 통신하는 방법 어떻게 만들어야 좋은 API 일까? REST 원칙 6개를 지키면 RESTful 하다고 함 1. Unifom interface 를 지키자 - 하나의 자료는 하나의 URL로 - 요청과 응답은 정보가 충분히 있어야 2. Client-Server 역할 구분 - 브라우저는 요청만 하고 - 서버는 응답만 하기 3. Stateless - 요청들 사이에는 의존성이 없어야(독립적이어야) 4. Cacheable - 서버에서 보내주는 정보들은 캐싱이 가능해야 - 캐싱을 위한 버전같은것도 관리 잘해야 (브라우저가 해줌) 5. Layered System 6. Code on Demand + 그리..
폼에 입력한 데이터를 서버에 전송해보자 (POST 요청) 오늘의 할일 날짜 Submit form에는 속성 두개가 들어가야 한다 action 이랑 method 여기서는 action을 /add 로 해주고 method를 POST 로 해줬다 /add 경로로 POST 요청하는 것이다 (보통 글쓰기는 POST 를 사용한다) POST 요청 처리를 하려면 아래와 같은 문법으로 작성한다 app.post("/add", function (요청, 응답) { 응답.send("전송완료"); }); 여기서 Submit 을 누르면 /add 경로로 이동한다. 이때 입력했던 데이터 들은 app.post("/add", function (요청, 응답) { 응답.send("전송완료"); }); 여기에서 에 들어가 있는 거다. 데이터를 편하게..
저번에 npm 으로 이것저것 세팅할 때 entry point 를 server.js 로 설정했었다 그러니 server.js 라는 파일을 만들어준다. 여기에 코딩 시작하면됨. GET 요청 처리하기 const express = require('express'); const app = express(); app.listen(); 위는 서버를 띄우기 위한 기본 셋팅 (express 라이브러리) listen(서버 띄울 포트 번호, 띄운 후 실행할 코드) const express = require("express"); const app = express(); app.listen(8080, function () { console.log("listening on 8080"); }); 서버에 접속해보자 GET 요청을 처리..
서버란 비유하자면 알바생 같은것! 누가 페이지 달라고 요청하면 갖다줌(응답) 서버 : 요청을 받으면 요청한 내용 보내주는 프로그램 여기서 요청이란? HTTP 요청이라고 부르는게 몇가지 있는데 서버한테 하는 요청은 크게 4가지 방식이 있음 읽기 GET : 페이지 읽고 싶을 때 쓰기 POST : 새로운 거 생성하기.(댓글 작성, 포스트 작성) 수정 PUT 삭제 DELETE node.js 란? : javascript 런타임 JavaScript 란? HTML 을 조작하고 변경할 수 있음. -> 웹페이지를 다이나믹하게 만들어줌. javascript의 해석은 브라우저가 한다. 브라우저마다 해석하는 엔진이 있기 때문 ex) 크롬은 V8, 고질라는 spidermonkey, 익스플로러는 chakra... 여기서 V8 엔..
문제 하단에 '신청 하기' 버튼을 (스크롤하더라도) 고정시키고 싶은데 화면이 깨지고 원하는대로 되지 않았다. import 'package:flutter/material.dart'; class PartyScreen extends StatefulWidget { const PartyScreen({Key? key}) : super(key: key); @override State createState() => _PartyScreenState(); } class _PartyScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('파티명'), ), body: ..
문제 입력 폼과 생성하기 버튼 화면을 구현해야하는데 입력폼은 위로 배치하고 생성하기 버튼은 바닥으로 내리고 싶은 상황이었다. (이것들은 Column으로 구성하고 있었다) 구글링을 해보니 Spacer() 라는 게 있어서 사용해봤다. import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_form_builder/flutter_form_builder.dart'; class AddPartyScreen extends StatefulWidget { const AddPartyScreen({Key? key}) : super(key: key); @override State createSta..
문제 개발하다가 제대로 버튼 위젯을 넣은 것 같은데 화면이 밀리는 현상이 나타났다. 버튼 위젯에 문제가 있나 해서 봤는데 너무 Scaffold를 마구잡이로 쓰던 버릇때문이었다. import 'package:flutter/material.dart'; import 'package:snack_party/screen/add_party_screen.dart'; class AddPartyButton extends StatefulWidget { const AddPartyButton({Key? key}) : super(key: key); @override State createState() => _AddPartyButtonState(); } class _AddPartyButtonState extends State { ..
state state 사용하고 싶으면 맨 윗줄에 import {useState} from 'react' 를 작성해주고 원하는 곳에서 useState 를 통해 생성해준다. 아래는 예시 코드 function App() { let [a, b] = useState(["남자 코트 추천", "강남 우동맛집", "파이썬 독학"]); return ( ReactBlog {a[0]} 2022-07-15 {a[1]} 2022-07-15 {a[2]} 2022-07-15 ); } 아래 부분을 자세히 보자 let [a, b] = useState(["남자 코트 추천", "강남 우동맛집", "파이썬 독학"]); a에는 데이터들이 들어가는 거고, b에는 state 변경을 도와주는 함수가 들어간다. state 변경하기 state 를 변..
JSX란? 원래 스타일 주기 위해서 class 명 넣을때 class =" " 보통 이렇게 했었는데 App.js 에서 쓸때에는 className=" " 이렇게 쓰고 있다 왜냐면 이게 html이 아니라 JSX 라고 부르는 언어이기 때문! 원래 하나를 리액트에서 쓰려고 하면 React.createElement('div', null) 막 이런식으로 어렵게 써야하는데 이러는 대신 JSX 라는 언어를 사용하는 것임!(html 이랑 사용 방식은 비슷함) JSX 문법 JSX 문법 중요한거 세개 배웠다 class 넣을 땐 className쓰기 아래는 예시 function App() { return ( 블로그 ); } .black-nav{ display: flex; background: black; width: 100%;..
ClipRect 는 위젯의 모양을 강제로 직사각형으로 자르는 클래스 이다. 찾아보니 직사각형이 아니라 다른 모양으로도 자를 수 있는게 여러가지 있었다. CustomClipper, for information about creating custom clips. ClipRRect, for a clip with rounded corners. ClipOval, for an elliptical clip. ClipPath, for an arbitrarily shaped clip. 아래는 사용 예시 Scaffold( body: Container( child: SafeArea( child: ListView( children: [ Stack( children: [ Container( width: double.maxFin..
https://youtu.be/lkF0TQJO0bA 화면 UI 를 구성하다가 Scaffold 안에 body를 SafeArea 로 감싸주는 코드를 보고 뭔지 궁금해졌다. 기기별로 화면의 padding 을 알아서 만들어준다고한다. 앞으로 자주 쓸 수 있을 것 같다. 아래는 예시 return Scaffold( body: Container( child: SafeArea( child: ListView( children: [ Stack( children: [ Container( width: double.maxFinite, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('images/' + widget.movie.poster), fit: B..
화면 크기를 벗어나게 ui를 작성하면 이런 오류가 뜬다. 일단 Container의 높이를 50에서 60으로 높여줬다. height: 60, 근데 이번에는 라벨이 한줄을 넘어가버렸다. TabBar 를 사용할 때 label 에 대해서 조절할 수 있는 속성이 있을 것 같아 찾아봤다. https://stackoverflow.com/questions/72488870/tabbar-text-faded TabBar text faded I’m facing the next problem, my Tab's text was fading out long and you couldn't see the last letters. Widget _tabBar() { return TabBar( onTap: (tabIndex) { setSt..
자꾸 변수 선언하는데 빨간줄이 뜨면서 late 를 추가하라고 도움말이 나왔다. 추가하면서 하니까 빨간줄이 없어지긴 했는데 무슨의미인지 궁금해서 찾아봤다. Null Safety 란 개발되는 코드가 null 안전성을 보장한 상태로 개발되게 하고자 하는 개념인데 Non-Nullable 변수는 선언과 동시에 초기값을 주어야한다. 근데 어떤 경우에는 초기값을 줄 수없는 경우도 있다. 변수가 null 인 상태로 이용되는 건 아니지만 초기값이 앱이 실행되면서 결정되는 경우이다. 이럴 때 late keyword 를 사용한다. 단어 그대로 초기화 시점을 뒤로 미루겠다는 의미. 물론 선언과 동시에 초기값을 주지는 않지만, 그 변수를 이용하기 위해서는 초기값을 주어야한다. late 추가하고 편-안 ref: https://k..
body 안에 TabBarView 넣는 걸로 시작 pyshics 는 physics: NeverScrollableScrollPhysics(), 로 해서 사용자가 옆으로 넘기는 제스처를 해도 넘어가지 않게 설정 가능하고 children 안에 Container() 들 넣어줬다. class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State createState() => _MyAppState(); } class _MyAppState extends State { late TabController controller; @override Widget build(BuildContext context) { ret..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 photo_view https://pub.dev/packages/photo_view photo_view | Flutter Package Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interactive images and other stuff such as SVG. pub.dev pinch 제스처 : 손가락 두개 이용해서 사진 줌인 simple_animations https://pub.dev/packages/simple_animations simple_animations | Flutter Package Pow..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 Grid 레이아웃 만들고 싶으면 GirdView() GridView.builder() 스크롤바 생성하려면 CustomScrollView() 이때 안에는 children 대신 slivers slivers 안에는 SliverToBoxAdapter SliverGrid SliverAppBar 등 들어갈 수 있음 알림 띄우고 싶으면 flutter_local_notification 패키지 설치하고 사용 주기적으로 띄우고 싶으면 periodicallyShow zonedSchedule 등 사용 서버가 보내는 push 알림은 좀 다름. Firebase Cloud Messaging 서비스가 앱에 직접이 아닌, google play 앱으로 알림 ..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 반영구로 state 를 저장하고 싶을 때에는 폰 메모리 카드에 저장한다. 이때 shared preferences 이용 map 자료 저장할 때에는 json으로 바꿔서 저장한다. 이때 jsonEncode() 사용 json을 map으로 바꿔서 사용하고 싶으면 jsonDecode() 쓰면 된다. 페이지 이동할 때 GestureDetector 사용 페이지 전환 애니메이션 넣고싶을 때 1. CupertinoPageRoute -> 아이폰 스타일 2. PageRouteBuilder -> 커스텀 애니메이션 가능 3. Hero() 등등 방법이 있다. 부모에 있는 state 을 자식에서 쓰고 싶을 때 3 step으로 보내는거 앱이 커지면 번거로워..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 나중에 모르면 찾아보기 편하라고 키워드만 기록! 문자열 중간에 변수 넣고 싶으면 ${변수명} 스크롤 ScrollController() scroll.position.pixels maxScrollExtent userScrollDirection 위에 있는 class에서 쓴 변수를 아래 있는 class에서 쓰려면 변수 앞에 widget 붙이기 페이지 나누는 방법 1. 탭 2. Navigator (이건 덮어씌우는 방식임. 뒤로가기 잘됨)(stack 식임) MaterialPageRoute Navigator.push 3. 페이지 많으면 Routes 사용 return 생략하고 싶을 땐 => 사용하기 사진첩에서 사진 고르기 ImagePicke..
웹 말고 이제는 폰 에뮬레이터를 띄워서 프로그램을 테스트해봐야하는데 에뮬레이터가 실행은 안되고, 가상기기 지우려고 하니까 running 중이어서 못지운다고 하고.. AVD를 수동으로 아예 삭제했다가 다시 가상기기 만드는게 낫겠다 싶어서 시도해봤다. "C:\Users\username\.android\avd" 여기 들어가면 AVD 들 있는데 그냥 싹다 지워줘봤다. 안지워지는 경우에는 안드로이드 스튜디오 끄고 다시 시도! 아예 다시 지우고 가상기기도 다시 만들고 refresh 해봤다. 잘 뜬다 😭
mkdir VENV cd VENV/ #venvDj 라는 가상환경 만들기 python -m venv venvDj venvDj/Scripts/activate (venvDj) C:\Users\사용자이름\VENV\venvDj\Scripts>pip3 install Django #가상환경에서 빠져나오려면 deactivate #패키지 리스트 확인 (venvDj) C:\Users\사용자이름\VENV\venvDj\Scripts>pip3 list (venvDj) C:\Users\사용자이름\VENV\venvDj\Scripts>pip3 install django-taggit (venvDj) C:\Users\사용자이름\VENV\venvDj\Scripts>pip3 install django-taggit-templatetags2 ..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 TextField 옆에다가 아이콘을 넣고 싶으면 TextField( decoration: InputDecoration( icon: Icon(Icons.star), ), ), 테두리 주고 싶으면 TextField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.green, width: 1.0, ), ), ), ), 테두리 말고 밑줄만 주고 싶으면 TextField( decoration: InputDecoration( enabledBorder: UnderlineInputBorder(), ), ),..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 .apik .aab 로 빌드하면 앱 설치 가능 새폰으로 테스트하면 잘 되는데 유저폰에서 에러나는 이유는? -> 연락처가 하나있는데 이름이 저장 안되어 있을 수도 있고... 연락처가 아예 없을수도 있고 해결 : 변수 함수 만들때 타입지정 잘했는지, null check. 타입지정 확인하기 그냥 var 말고 더 엄격하게 변수, 함수의 타입지정을 해준다. (등호가 있으면 타입지정은 자동으로 되긴함) null check 하기 title: Text(name[i].givenName), 이런 코드 보면 에러가 뜨는데 String 타입자리에 String?을 넣으면 안된다고 뜬다 String?의 의미는 String인지 null인지 확신할 수 없..
State Pattern OOP에서는 프로그램 대상을 클래스로 표현함 state는 '상태 = 사물의 모양이나 형편'을 의미 상태를 클래스로 표현하면 클래스를 교체해서 '상태의 변화'를 표현할 수 있음 Strategy Pattern과 조금 유사함 __ init __ property로 state (기본 state는 'green') setState 현재 state를 설정할 수 있는 함수 Speak State에 따라서 녹색이면 green light 빨강이면 red light 출력 Wait Wait 함수를 호출하면 state가 변함 하지만 state가 많아진다면 현재 코드 구조로는 복잡성을 대응하기 어려움 -> 이때 state pattern 사용가능 TrafficLight class __ init __ 기본 st..
Composite Pattern - 컴퓨터의 파일 시스템에는 디렉터리라는 것이 있고, 디렉터리 안에는 파일이 있거나 다른 하위 디렉터리가 있기도함 - 하위 디렉터리 안에는 또다른 하위 디렉터리가 있음 - 마치 상자안의 상자 같은 구조. 즉 재귀적 구조를 가짐 - 디렉터리 엔트리를 차례대로 조사할때, 그릇과 내용물을 같은 종류로 취급하면 편리할 수 있음 - 그릇을 내용물과 동일시하여 재귀적인 구조를 만들기 위한 디자인 패턴을 composite 패턴이라고 함. - 한 object의 그룹과 그 object의 싱글 instance가 같은 타입으로 취급되는 패턴 - composite pattern을 통해 object들을 트리 구조로 구성할 수 있음 - 하나의 object와 그 object가 들어있는 group을 ..
Flyweight Pattern 동일한 것을 공유해서 메모리 낭비 없애기 • Flyweight는 플라이급 이라는 의미로, 권투에서 가장 체중이 가벼운 체급을 의 미함 • 디자인패턴에서는 오브젝트를 가볍게 하기 위한 것의 의미에서 사용 • 오브젝트는 컴퓨터 내부에서 가상적으로 존재하는 것이기 때문에 무겁다 또는 가볍다라고 표현은 실제 무게가 아닌, “메모리의 사용량”을 의미하는 것 • 객체를 만들때 그 객체를 저장하기 위해서 메모리가 확보되는데, 객체를 많이 만 든다고 생각해보면 그 객체가 차지하고 있는 단위 메모리가 작을 수록 가벼워짐 • “인스턴스를 가능한대로 공유시켜서 쓸데없는 메모리를 할당하지 않도록 한다.” • 이미 만들어져 있는 인스턴스를 이용할 수 있으면 그것을 공유해서 사용 • Dog은 na..
Bridge Pattern • Abstraction과 implementor을 분리해서 independent하게 만든다. • Abstraction과 implementor 사이에 다리를 놓는 역할 • Animal을 Boat, Car, Airplane 중에 태워야 함 • Class 구조 고려하지 않고 코딩을 한다면 Animal 2종류 운송수단 3 종류 , 즉 6(2x3=6)가지 클래스를 따로 만들어줘야 함 • 만약 더 많은 종류가 생기면 복잡해짐 -> Bridge Pattern 생각해볼 수 있음 • Vehicle class를 만들어 Base class로 삼고 Boat, Car, Airplane class는 Vehicle class를 상속받는다. • Vehicle class는 Animal을 property로 갖..
Decorator Pattern 스펀지 케이크가 1개 있다고 가정! 크림만 바르면 아무 모양이 없는 크림케이크가 됨 여기에 딸기를 얹으면 딸기 케이크가 되고, 초콜릿을 장식하고 이름을 쓰고 초를 꽂으면 생일케이크가 됨 스펀지케이크도, 크림케이크도, 딸기케이크도 생일케이크도 처음에는 모두 다 같 은 스펀지 케이크지만 장식을 하면 목적에 맞는 케이크가 되는 것 객체도 이런 식으로 장식의 기능을 하나씩 추가하면 좀 더 목적에 맞는 객체가 됨 이러한 패턴을 데코레이터 디자인 패턴이라고 함 Component는 내용물 ConcreteComponent는 구체적인 내용물 Decorator 장식 Decorator pattern은 이름에서 알 수 있듯이 Object를 꾸며주는 역할 원하는 기능으로 감싸서 사용할 수 있게 ..
