Alert 이 함수가 실행되면 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 됩니다. alert("Hello"); 메시지가 있는 작은 창은 모달 창(modal window) 이라고 부릅니다. '모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있습니다. 따라서 사용자는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없습니다. 확인 버튼을 누르기 전까지 말이죠. Prompt 브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받습니다. result = prompt(title, [default]); 함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달..

Strict Mode 자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔습니다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었죠. 덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었습니다. 하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 생겼습니다. 이런 상황은 ECMAScript5(ES5)가 등장하기 전인 2009년까지 지속되었습니다. 그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있겠죠? 그래서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 ..

Webview를 이용한 웹사이트 패키징 이번에 Webview를 사용해보겠습니다. 먼저 만들어두었던 Screen 디렉터리에 Webview를 위한 클래스를 하나 만들어줍시다. class InitialWebView extends StatelessWidget { const InitialWebView({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: WebView( initialUrl: 'https://blog.codefactory.ai', ), ); } } Scaffold의 Body에 Webview를 주고 첫 페이지를 띄울 URL을 https://blog.codefac..

Web View 어떤 웹사이트를 앱에 패키징하는걸 웹 뷰라고 합니다. WebView를 사용하면 원래 앱애 존재하던 것처럼 사용할 수 있습니다. 블로그 사이트를 웹 뷰로 제작해보겠습니다. 주요 기술 Web View : 웹뷰에 웹사이트를 넣습니다. App Bar : 앱 상단의 디자인을 담당합니다. pub.dev (외부 패키지 활용법) : 오픈소스 라이브러리들이 모여있는 사이트 입니다. 프로젝트에 패키지 추가 pub.dev 사이트 접속 사이트에 접속해서 중앙 검색창에 webview를 검색합니다. flutter.dev (플러터 공식 개발팀)이 올린 webview_flutter를 클릭해 들어갑니다. 들어가서 맨위 flutter_webview 이름에 마우스를 올려놓으면 옆에 복사버튼이 있는데 복사해줍니다. 이제 프..

Row and Column (실습) 아래 화면을 만들어 보면서 Row와 Column을 연습해보자. Column, Row를 활용하여 상위,하위 클래스들과의 관계를 생각하며 진행했습니다. mainAxisAlignment와 Container, Row를 적절히 활용하여 완성.

Row and Colume (Expanded & Flexible Widget) Expanded와 Flexible 위젯은 무조건 Colume이나 Row 위젯의 Children 에만 사용이 가능합니다. 이전에 만들었던 HomeScreen의 하위 컨테이너에 Expanded를 적용해 보겠습니다. Expanded( child: Container( color: Colors.red, width: 50.0, height: 50.0, ), 4개의 하위 컨테이너 중 맨위의 컨테이너에 적용해보니, 남은 여백을 전부 채워주는것을 볼 수 있습니다. 이번엔 2번째 컨테이너도 적용해 보겠습니다. Expanded( child: Container( color: Colors.red, width: 50.0, height: 50.0, ),..

Row & Column (CrossAxisAlignment) 이번엔 CrossAxisAlignment에 대해 학습합니다. 저번에 MainAxisAlignment에 대해 배웠는데, 이 기능은 주축 정렬이었습니다. 반대로 CrossAxisAlignment는 반대축 정렬의 기능을 가집니다. MainAxisAlignment 같은 경우 Row일때는 가로 정렬, Column일때는 세로정렬입니다. CrossAxisAlignment는 정확히 그 반대입니다. Row는 세로 Column일때는 가로입니다. 여기서 문제점은 반대축을 정렬하기 위해 상위 Container의 가로축인 검정색 배경 부분을 늘려야 합니다. 상위 Container의 검은색 배경을 늘리기 위해 위젯 코드를 변경해 보겠습니다. import 'pac..