[Flutter]ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 저번 실습과제를 한번 보자 일단 다이얼로그는 커스텀위젯화 시킨다. onPressed: (){ Navigator.pop(context);},), 그리고 창을 닫아야 하는 기능을 넣어야 하는데 Navigator.pop( ) 이거 실행하면 닫힌다. -> 현재 페이지 닫아주세요. 만약에 부모 위젯의 state 를 그 위젯 안에 있는 자식 위젯이 쓰고 싶다면 어떻게 할까? 부모에서 자식으로 state 를 전송해야한다. (보내기 -> 등록하기 -> 쓰기) 전송하는 법은 다음과 같다 그리고 등록은 아래와 같이 2곳에다가 해줘야 한다. final 로 하면 나중에 이 변수를 수정할 수 없다. 여기선 state 의 타입을 fin..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 Dialog 가 뜨도록 해보자 body: Dialog(child: Text('요기요!')) 버튼을 눌렀을 때에 Dialog 가 뜨도록 하려면 onPressed 함수 안에 써주면되는데 showDialog를 쓰면 된다. showDialog안에는 context와 builder 가 들어가야한다. 여기까지하면 버튼을 눌러도 아무것도 일어나지 않음 일단 첫 페이지는 보통 Scaffold( ) 부터 시작한다. 해결책은 MaterialApp 을 MyApp이라는 커스텀 위젯 바깥으로 보내는 것. 위에 void main() 함수 안에서 MyApp() 을 MaterialApp 으로 감싸주었다. 그럼 버튼을 눌렀을 때 Dialog가 뜨는 동작이 잘..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 저번에 버튼안에 있는 1이 버튼을 클릭해도 숫자가 늘어나지 않았었는데 재렌더링이 안되었기 때문이고 재렌더링을 하려면 state 를 쓰면된다. state 가 변할 때마다 자동으로 재렌더링이 된다. 우리가 보통 변수에 데이터를 저장하듯이 Flutter 는 변수 혹은 state 에 데이터를 저장한다. state 는 변하면 state 를 사용하는 위젯이 자동 재렌더링 된다. state 만드는 법을 알아보자 1. StatefulWidget 만들기 stful 을 쓰고 tab 키를 누르면 class extends StatefulWidget { const ({Key? key}) : super(key: key); @override _State..
ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의 ListTile 기본 위젯 : 왼쪽에 그림, 오른쪽에 글 있는 레이아웃 리스트 형태로 쉽게 만들 수 있음. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold( appBar: AppBar(), bottomNavigationBar: BottomAppBa..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] 레이아웃용 위젯들이 너무 길다면? -> 한 단어로(커스텀 위젯으로) 깔끔하게 축약가능 커스텀 위젯 만드는 법 빈공간에다가 stless 치고 tab 키 누르면 기본 틀 자동 생성 만들 때 해야할 것 1. class 작명 2. return 옆에 축약할 레이아웃 넣기 일단 class 이름은 ShopItem 으로 했고 축약할 레이아웃을 return 뒤에 넣어주었다. 이제 저 레이아웃은 ShopItem 이라는 한 단어로 축약해서 사용이 가능하다. 사실 맨 위에다가 변수에 넣어서 축약할 수도 있다, -> 하지만 성능에 문제가 있을 수 있으니 주의 변하지 않는 UI 들은 변수 함수로 축약해도 상관 없음 하지만 그렇다고 아무거나 다 커스텀위젯화를 하는건 옳지 않다 재사..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] 저번 시간 숙제를 대강 해봤는데 수정할 점이 많다. 일단 1. appbar 에 있는 아이콘들을 검정 색으로 바꾸고 싶음 2. 지금은 별 아이콘으로 했지만 원래는 Image로 들어가야할 것이 오른쪽에 있는 텍스트와 높이가 같았으면 좋겠음 3. 텍스트들의 왼쪽정렬 오른쪽 정렬 각각 따로 적용하는 법 고쳐야 할 문제가 많다. 이번 강의를 들으면서 고쳐보려고 한다. row 방향으로 container를 2개 만들어 볼거다 container의 width를 100 lp 막 이런식으로 줄 수도 있겠지만 가로 폭의 50% 를 차지하게 만들고 싶을 수도 있다. 그럴 땐 아래처럼 Flexible 이라는 위젯으로 감싸준다. 그러면 % 로 값을 지정할 수 있다. flex 의 값..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] 글자를 [자식]을 이용해서 넣어보자 child 안에 Text 를 넣어주면 된다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold( appBar: AppBar(title : Text('앱임')), body: SizedBox( child : Text('안녕하세요'), ), ) )..
자바스크립트는 완전한 객체 지향 언어. 객체 지향 하면 제일 먼저 떠올리는 개념은 다음과 같다. 클래스 객체 메소드 속성 캡슐화 집합 재사용 상속 변형 하지만 js 는 자바나 c++ 과는 조금 다르다 자바가 c++ 는 클래스 기반의 언어이고 js 는 프로토타입 기반의 언어이다. 객체지향 컨셉에서 대상의 특성은 객체의 속성 이라고 하며 대상의 동작은 객체의 메소드 라고 함. 클래스의 개념이 사실 js 에서는 존재하지 않는다 js 에서 모든 것들은 객체에 기반을 두고 있다 js 에서는 프로토타입 이라는 표기법이 있는데 이를 이용해서 객체가 생성된다 ex) 전통적인 객체지향에서는 박지성이라는 새로운 객체 block-level var 같은 전통적인 js 변수들 -> function-level 이라고 할 수 있다..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] Container 박스를 꾸며보자 width, height, color 값을 넣어주었다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home : Scaffold( appBar: AppBar(title : Text('앱임')), body: Container( width: 50, height: 50, ..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] MaterialApp() 이라는 위젯을 알아보자 이 위젯을 쓰면 구글이 제공하는 Material 테마를 이용해서 앱을 만들 수 있다. 근데 이건 구글 스타일이고 나는 아이폰 기본 스타일의 앱을 만들고 싶다 라고하면 다른 위젯을 쓰고 사용하면 됨. 만약에 내가 직접 커스터마이징 하고싶다 라고 한다면 그래도 MaterialApp()을 써야한다. 이 위젯 안에 디자인만 포함되는게 아니라 기본 세팅들도 포함하고 있기 때문임. Scaffold() 위젯 이 위젯은 앱을 우리가 흔히 아는 '상 중 하'로 나누어준다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class ..
ref : 코딩 애플 [쉽게 배우는 플러터 강의] 초보 때에는 쓸데 없기 때문에 lint 를 잠깐 끄기 위해 analysis_options.yaml 파일에 저 코드를 추가해줬다 main.dart 파일에 가서 void main() 아래에 있는 코드 싹 날려주고 stless 입력 후 tab 키를 눌러준다. 이제 저기에 작성해주면 된다. void main() { runApp(const MyApp()); } 위 코드는 앱 시작해달라는 의미 앱의 메인 페이지를 입력하면 된다. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return..
ref : 코딩애플 [쉽게 알려주는 플러터 강의] 안드로이드 스튜디오는 원래 있어서 버전 업그레이드만 했고 flutter 설치, 이렇게 해줬다 contact 라는 연락처 프로젝트를 생성했고 이제 저 lib 이라는 폴더에 main.dart 가 메인페이지에 해당한다.
ref : 코딩애플 채널,https://www.youtube.com/watch?v=yXPCg5eupGM&ab_channel=%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C https://choseongho93.tistory.com/266 [웹소켓] WebSocket의 개념 및 사용이유, 작동원리, 문제점오늘은 웹소켓에 대해 알아보겠습니다. ● 웹소켓(WebSocket)의 배경 : 인터넷이 나오고 HTTP를 통해서 서버로부터 데이터를 가져오기 위해서는 오로지 URL을 통한 요청이 유일한 방법이었습니다. 때choseongho93.tistory.com지나가다가 유튜브에서 웹소켓 개념을 설명해둔 영상이 있는데 겸겸 정리하려고 포스팅서버랑 유저가 데이터를 주고 받고 싶을 때 http 요청을 주로..
https://dartpad.dartlang.org/? DartPad dartpad.dartlang.org ref : 코드팩토리 유튜브 채널 enum enum Status{ approved, rejected, pending, } void main(){ Status status = Status.approved; switch(status){ case Status.approved: print('승인상태'); break; case Status.rejected: print('거절상태'); break; default: print('해당안됨'); break; } } //결과 승인상태 if문 void main(){ int number = 2; if(number %3 ==0){ print('3의 배수'); }else i..
https://dartpad.dartlang.org/? DartPad dartpad.dartlang.org flutter 배워보고 싶은 맘이 생겼는데 dart 언어를 쓴다고 해서 얼른 후루룩 정리해볼생각. js랑 비슷하다고해서 많은 시간을 투자하진 않을 것 같다. 크롬에서 위 링크로 들어가 실습을 하려고 한다. ref : 코드팩토리 유튜브 채널 헬로 월드💻 void main() { print('Hello!'); } 변수 선언 void main() { var name='hi'; print(name); name = 'hello'; print(name); var myname = 'hi'; print(myname); } 숫자 변수 void main() { int num1 = 1; print(num1); doub..
배웠지만 다시 기초 복습한다치고 정리해보자 기본 문법 세미콜론 ; 으로 문장 종료 { } 이용해서 구역나눔. 조건문. 반복문 있음 var a = 1; b = 2; // 2 console.log("a:" + a); console.log("b:" + b); var c = 3, d = 10; var str1 = "Hello"; var str2 = "World!"; var str3 = null; console.log("c:" + c); console.log("d:" + d); console.log(str1); console.log(str2); console.log(str3); //결과 a:1 b:2 c:3 d:10 Hello World! null 연산자 산술연산자에는 + - * / 랑 ++ -- 가 있다 var..
Node.js 를 배워보고 싶은데 goorm에 [한눈에 끝내는 Node.js]라고 기초 강의가 있길래 한번 들어보려고 한다. Node.js 는 웹프로그래밍에서 서버 만들때 쓰는 언어다. 간단하게 Node.js 는 1. js 기반 2. 싱글 스레드, 비동기 방식 이다. 처음에 프론트 배울 때 js 쓰곤 하는데 백도 js로 쓸 수 있다는게 큰 이점이라 요즘 노드는 성장세! AJAX : Asynchronous JavaScript and XML 의 약어인데 자바스크립트가 중심역할을 담당하는 기술이다. 구글의 각종 서비스, 페이스북, 트위터, 네이버 등에서 개발한 웹애플리케이션들은 모두 AJAX를 적극적으로 활용한 동적인 웹을 표방하는 서비스들. js 말고도 동적 웹페이지 만들수 있는건 JSP, Servlet, ..
유튜브를 보다보니까 vscode에서 git graph 라는 extension 쓰는걸 보고 괜찮아보여서 설치했다. git 정보를 깔끔하게 보여줘서 좋은 것 같다. 설치한다음에 저 아이콘을 선택하면 git log정보를 이용해서 브랜치 정보를 되게 이쁘게 보여준다. commit 정보를 선탁해면 commit 정보랑 변경된 파일 정보로 확인 가능하다(변경 부분도 바로 확인가능!)
ref : 생활코딩 유튜브, https://www.youtube.com/watch?v=EzcF6RX8RrQ&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9 https://uxgjs.tistory.com/183 Git Flow 개념 이해하기 Git으로 협업을 하는 것이 매우 좋다라고는 알고 있으나 실제로 서로 다른 그 사람들이 어떻게 각자 작성한 코드를 합치고 배포하는지가 궁금해 졌습니다. Git-flow 이해하기 Git-flow는 Git이 새롭게 ux.stories.pe.kr 동기가 git flow로 버전을 관리하는 법에 대해서 간단하게 설명해줬는데 이왕 들은거 정리해두고 싶어서 포스팅 git flow 는 깃으로 개발할때 거의 표준과 같이 사용되는 방법론이다(약속) ..
프로필 수정에 성공했을 때에 메세지를 띄우고 싶어졌다. django에 message framework 가 있다고 하던데 써봐야 겠다. message framework는 1회성 메세지를 담는 용도로 사용한다. 메세지를 남기는 방식은 httpRequest 인스턴스를 통해서 남기며, 새로고침하면 사라지는 일회성이다. message에는 레벨이 존재한다. 에러를 의미하는 메세지를 빨간글씨, 성공을 의미하는 글씨는 초록색 글씨로 구현이 가능하다. 메세지의 종류는 DEBUG INFO SUCCESS WARNING ERROR 이렇게 있다. 서버에서 이러한 메세지를 보내면 html 파일에서 message에 따라 다르게 보여질 수 있다. views.py에 아래 import를 추가해준다 from django.contrib i..
vscode의 마켓플레이스에서 open in browser을 검색해서 설치한다. alt + shift + b 를 누르면 어떤 브라우저에서 실행할지 선택할 수 있다. 평소에 웹브라우저에서 실행할 때에는 alt + b 만 누르면 됨. 맨날 직접 들어가서 html 파일 직접 열다가 편하게 열기 위해서 설치함!
웹 페이지의 타이틀을 달고 싶을 때에는 태그를 이용한다. 페이지에 타이틀을 다는 예제 입니다. 타이틀은 브라우저의 타이틀바에 보여집니다. ... 태그로 문단의 제목을 달아보자 1장 홈페이지 만들기 1절 HTML 언어 1. 웹 1.1 인터넷 1.1.1 네트워크 1.1.1.1. 통신 title 속성으로 툴팁을 달 수도 있다. (툴팁이란 마우스를 갖다 댔을 때 나오는 것) 1장 홈페이지 1절 HTML 언어 단락을 나눌 때에는 태그를 이용한다. 2 개의 단락 나누기 HTML 문서도 본문을 여러 단락으로 나눌 수 있다. CSS 스타일을 사용하면 단락 단위로 내어 쓰기와 들여 쓰기가 가능하다. 여러 개의 빈 칸은 하나로 취급되며, 엔터 키 역시 하나의 빈 칸으로 처리된다. 수평선을 그을 때에는 태그를 사용한다. 수..
스터디 깃허브 올가에 커밋했다가 이런 메일을 받았다. secret key를 내가 신경을 안썼다는.. 그런..것 같다. 그래서 아래 포스팅 보고 따라했다. https://chagokx2.tistory.com/45 [Django Basic 07] settings.py에서 SECRET_KEY 분리하기 Django 프로젝트를 생성하게 되면 다양한 기본 설정이 담겨있는 settings.py도 함께 생성된다. 그 중 SECRET_KEY가 있는 것을 볼 수 있다. 데이터베이스 연결 정보나 AWS 관련 정보에 비해 별로 중요하지 chagokx2.tistory.com
페르소나 프로젝트를 진행하다가 CORS 에러 라는게 떴다. 동기가 아래 게시물을 보고 해결했다고 함.(settings.py 수정) 나도 한번 보려고 한다. CORS 가 뭔가 하면,, Cross Origin Resource Sharing 의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘 이라고 함. 최근 대부분의 웹 브라우저는 js 를 이용한 AJAX 통신을 통한 데이터 송수신을 하는데 다른 도메인을 가진 서버의 url을 호출해 데이터를 가져오려고 하는 경우에 보안 문제인 Cross Domain 이슈를 발생시킨다고 함. (만약 우리 웹 서비스에서 사용하려고 다른 서브 도메인을 가진 API 서버를 구축했는데 우리가 아닌 다른 웹 서비스에서 이 API 서버에서 맘대로 접근하고 그러면 안되니까..
https://velog.io/@dojun527/AWS-EC2-Django-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 AWS EC2, Django 프로젝트 배포하기 AWS는 Amazon Web Services의 줄임말로, 아마존닷컴이 제공하는 각종 원격 컴퓨팅 서비스(웹 서비스)입니다. 아마존 웹 서비스는 다른 웹 사이트나 클라이언트측 응용 프로그램에 대해 온라인 서비스 velog.io https://nachwon.github.io/django-deploy-1-aws/ [Deploy] Django 프로젝트 배포하기 - 1. AWS AWS EC2에 장고 프로젝트 올리기 nachwon.github.io 참고함. 이어서 ..
두 가지 이미지 셋을 사용하려고 한다. 각 숫자는 흑백의 정도를 나타내고 있다. 28* 28 =784개의 숫자인데, 각각 0에서 255 사이의 값으로 나타난다. 이 이미지 하나는 2차원 형태로 되어있고 784차원 공간의 한점으로 표현되어 있는 거라고 볼 수 있다. 이번엔 자동차 이미지이다. 32 * 32칸인데 컬러 이미지이다. 흑백과 다른 점이 있는데 2차원 숫자 집합이 3개 존재한다는 거다. 빨강, 녹색, 파랑 으로 나뉜다. 칼라는 각 칸에 3개의 숫자가 들어간다고 보면 된다. 0~255 의 값인건 아까와 같다. 강아지 사진 하나의 속성을 보면 이미지 크기를 확인할 수 있는데 컬러 이미지니까 데이터가 저만큼 들어간다고 볼 수 있겠지 이제 이미지 데이터가 어떻게 구성되는지를 알게되었다. mnist 와 c..
차원 표의 열의 관점 vs 데이터 포함 관계의 관점 으로 나누어 볼 수 있다. 표의 열의 관점이라고 해보자. 관측치가 5개인 다음과 같은 데이터가 있는데 5개의 점으로 표현해보자 만약에 습도라는 변수를 추가하면 다음과 같이 될 것이다. 3차원으로! 결국 관측치는 N차원 공간의 한 점이고 변수의 개수는 공간의 차원수가 될 것이다. 데이터를 기하학적으로 표현할 수 있게 된다는 것은 데이터의 가까운 정도를 정밀하게 숫자로 나타낼 수 있게 된다는 것이다. 이번엔 차원을 데이터 포함 관계의 관점으로 바라봐 보자. 데이터 포함관계는 배열의 깊이와 관련이 있다. 아이리스 데이터를 보자 열이 4개니까 4차원이다. 관측치 하나를 코드로 표현해보자. 하나의 배열에 값이 들어가 있는 모양을 1차원이라고 한다. x1의 sha..
API 문서라는 걸 구글 스프레드 시트 이용해서 작성할 수도 있지만 서버가 수정될때마다 해당 문서를 동기화 하는 일이 쉽지않기 때문에 API 문서 동기화 되는 플랫폼을 이용하는 게 좋을 수도 있다 그러한 플랫폼이 바로 Postman 이다. 아래 사이트를 참고하여 작성했다. https://velog.io/@jinee/TIL-Postman%EC%9C%BC%EB%A1%9C-API%EB%AC%B8%EC%84%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-l4k5mj31rl [TIL] Postman으로 API문서 만들기 Postman? postman.png Postman은 개발한 API를 테스트하기 위해 사용하는 플랫폼으로 유명하다. 많은 사람들이 이용하는 플랫폼인 만큼 다양한 기능들을 제공하고 있다. ..
원래 테이블 만들면 자동으로 id 가 추가되는 것으로 알고 있는데 만들고 보니 보이지가 않았다. 그래서 그냥 내가 추가해주기로함. 각 테이블마다 id 를 추가해주었다. 그래서 지금은 id 잘보임! models.py 를 건드린거라 데이터들이 그래도 있을까 걱정했는데 입력했던 데이터 그대로 잘 있었다 다행,, 오늘은 슬기로운 의사생활 드라마에 해당하는 데이터들만 어드민사이트에서 등록을 해주었다. 다른 것들은 나중에 한번에 해도 되니까..
https://freekim.tistory.com/9 [Django] RestFramework Image file upload ImageField 서버시나리오에서 빠지지 않는 기능은 이미지를 업로드 하고 보는 기능이다 RestFramework 을 이용하면 ImageField 를 활용하여 쉽게 Image를 업로드 할 수 있다. 기존에 사용했던 Model에 ImageField를 추가 freekim.tistory.com 이 포스팅 참고하면서 차근차근 따라했다. 프로젝트의 root directory 에 media 라는 폴더를 만들고 settings.py에 가서 이렇게 작성해준다. MEDIA_URL 은 Media 파일에 대해서 고정된 URL 값을 설정할 때 사용하는 거고 MEDIA_ROOT 는 뭐냐면.. db에는..
