오늘도 공부

도커&쿠버네티스 7주차 스터디 정리내용부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/docker-and-kubernetes-the-complete-guide 을 공부하고 있습니다1주차 스터디Dockerfile을 이용한 서버 배포2주차 스터디Docker-compose 입문3주차 스터디github를 통해 aws beanstalk로 자동 배포 #14주차 스터디github를 통해 aws beanstalk로 자동 배포 #25주차 스터디복잡한 형태의 서비스를 도커로 배포하기6주차 스터디Docker hub를 Travis를 통해서 자동 배포하기이번주 스터디 내용이번주는 저번 시간에 이어서 Dockerhub로 올린 이미지를 aw..

NodeJS Advance 1주차 스터디 정리 #2부산에서 매주 진행되는 NodeJS Advance 스터디입니다.더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.스터디 내용은 Udemy 강좌를 같이 보고 정리를 한 글입니다.NodeJS 내부 구조 정리이벤트 루프 내부 구조이전 글에도 있지만 다시 내용을 살펴보자.pendingTimerspendingOSTaskspendingOperations// node myFile.js const pendingTimers = []; const pendingOSTasks = []; const pendingOperations = []; // New timbers, tasks, operations are recorded from myFile running myFile.ru..

NodeJS Advance 1주차 스터디 정리부산에서 매주 진행되는 NodeJS Advance 스터디입니다.더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.스터디 내용은 Udemy 강좌를 같이 보고 정리를 한 글입니다.들어가며Node를 안지 벌써 2년이 넘은것 같다. 하지만 늘 express 로 rest api 서버로만 개발만 하다 좀 더 알고 싶은 마음이 항상 있었다. 그래서 스터디 주제도 중급 노드JS로 정해서 진행하기로 했다.NodeJS 기본 구조Javascript code 작성NodeJSV8 또는 libuv 에서 처리Crypto 안에 있는 pbkdf2 함수를 통해서 동작원리를 파악할 예정이다.NodeJS 소스내에 pbkdf2.js 파일을 살펴보자.소스위치crypto 라는 걸 통해서 proces..

CSS Next grid 클론 ( 1 ~ 5 )부산에서 매주 진행되는 CSS 초중급 스터디입니다.더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.이 내용은 니콜라스님의 CSS 마스터 클래스를 공부하고 정리한 글입니다.이번주는 1 ~ 5번 페이지까지 공부했습니다. Github 소스12345

Flutter WhatsApp 클론 (부산 4주차 스터디)부산에서 매주 진행되는 Flutter 스터디 4주차 내용입니다.더 많은 부산에서 스터디 정보는 네이버 카페 에서 확인 가능합니다.소스는 Github 에서 확인 가능합니다. 1주차TODO 리스트 앱 개발2주차Youtube 화면 클론3주차WhatsApp 화면 개발스터디 내용이번주차는 저번 스터디에 이어서 로직부분을 진행하도록 하겠다.FirestoreFireBase AuthGoogle SiginFireBase Storage - 이미지 업로드FireStoreFirebase 에서 제공하는 Collection - Document 형태의 nosql realdb 이다.자세한 설치 및 내용은 공식문서를 참조하자.시나리오 #1채팅방에서 텍스트박스에 내용을 입력하면 ..

PostCSS 공부 ( 부산 스터디 2주차 ) 정리부산에서 매주 진행되는 CSS 초중급 스터디입니다.더 많은 스터디는 네이버 카페에서 확인 부탁드립니다. 이 내용은 니콜라스님의 CSS 마스터 클래스를 공부하고 정리한 글입니다. Github 소스링크저번 시간에는 CSS Next 에 대해서 정리를 했었다. 1주차 정리 바로가기 FlexCSS Next이번 스터디는 PostCSS 에 대해서 공부 하도록 한다. 공부할 내용은 아래와 같다. ParcelPostCSS & Parcelpseudo classCss Variables@custom media and media query rangescolor-mod, gray(), System-uiNesting Rules기타 추천 사이트들Parcel코드를 압축,변환등을 해주는..

도커&쿠버네티스 6주차 스터디 정리내용부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/docker-and-kubernetes-the-complete-guide 을 공부하고 있습니다1주차 스터디Dockerfile을 이용한 서버 배포2주차 스터디Docker-compose 입문3주차 스터디github를 통해 aws ec2로 자동 배포 #14주차 스터디github를 통해 aws ec2로 자동 배포 #25주차 스터디복잡한 형태의 서비스를 도커로 배포하기스터디 내용이번 6주차에는 이전 주차에서 공부한 내용을 기반으로 Client Production 을 Docker Hub 로 Travis를 통해서 자동 배포하는 걸 배울 예정이..

Web 디자인시 유의 할 점 정리이 내용은 유데미 강좌를 보고 정리한 글입니다. 웹에 필요한 리소스들을 정리해둔 사이트 http://codingheroes.io/resources/요약대부분의 콘텐츠는 텍스트이므로 멋진 타이포그래피는 멋진 웹 사이트의 핵심 요소입니다.이미지는 웹 디자인에서 점점 더 중요 해지고 있습니다. 따라서 훌륭한 이미지를 선택하고 그 위에 텍스트를 넣는 것이 작업의 필수적인 부분입니다.아이콘은 웹 사이트의 친숙한 음색을 설정하는 좋은 방법이지만 신중하게 사용하십시오.공백을 적절하게 사용하면 전문적으로 디자인 된 웹 사이트가 만들어 지므로 올바른 방법으로 많이 사용하십시오.콘텐츠의 시각적 계층 구조를 정의하여 레이아웃을 작성하십시오. 공백은 또한 이것을 위해 중요합니다.웹 사이트는 사..

HTML + CSS 스터디 1주차 스터디 정리내용 #2부산에서 매주 진행되는 CSS 초중급 스터디입니다.더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.저번 시간은 Flex 에 대해서 공부했다.Flex로 화면 배치 하는데 불편함이 다소 있다. 그래서 Css Grid 라는 게 나왔다.CSS Grid 에 대해서 하나씩 정리해보도록 하겠다.이 내용은 니콜라스님의 CSS 마스터 클래스를 공부하고 정리한 글이다. CSS Grid 가 필요한 이유?우선 FlexBox 가 부족한 부분이 뭔지 살펴보자.만약 여러개의 박스가 들어올 경우 overflow 되면서 배치가 되기 때문에 보기가 안좋을 수 있다.CSS Grid System 이라고 하는 테이블같은 걸 쉽게 짤 수 있도록 도와준다.CSS Grid BasicGrid..

Flutter 왓츠앱 클론부산에서 매주 진행되는 Flutter 스터디 3주차 내용입니다.더 많은 부산에서 스터디 정보는 네이버 카페 에서 확인 가능합니다.1주차TODO 리스트 앱 개발2주차Youtube 화면 클론소스는 Github 에서 확인 가능합니다.왓츠앱 클론오늘은 먼저 UI 개발 시간을 가져볼 예정이다.우선 완성된 화면은 다음과 같다. ChatScreen화면은 크게 2개로 나뉜다. 리스트뷰와 하단에 텍스트입력창이다.그리고 하단에 텍스트가 입력이 될 때마다 리스트가 업데이트 되는 구조이기 때문에 StatefuleWidget 으로 간다.class ChatScreen extends StatefulWidget { @override State createState() => ChatState(); } //채팅..

HTML + CSS 스터디 1주차 스터디 정리내용부산에서 매주 진행되는 CSS 초중급 스터디입니다. 목차FlexFlex BasicMain Axis and Cross AxisFlex Wrap and Directionwrapflex-directionAlign selfFlexFlex Basic컨테이너들을 가로 또는 세로로 정렬을 쉽게 도와준다. . displayjustify-content Document body{ display: flex; justify-content: space-between; } .box { width: 300px; height: 300px; background-color: red; border: 1px solid white; } Main Axis and Cross AxisMain Axi..

도커 & 쿠버네티스 5주차부산에서 매주 진행되는 스터디입니다. 부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/docker-and-kubernetes-the-complete-guide 을 공부하고 있습니다.1주차 스터디Dockerfile을 이용한 서버 배포2주차 스터디Docker-compose 입문3주차 스터디github를 통해 aws ec2로 자동 배포 #14주차 스터디github를 통해 aws ec2로 자동 배포 #25주차 스터디 공부 내용이번 차에서는 좀 더 복잡한 형태의 서비스를 구성해볼 예정이다. 인덱스를 넣으면 해당되는 피보나치 수열을 계산하는 출력해주는 앱을 개발할 예정이다. 화면 구성화면은 React 로 작성될 예정이며 아래와 같이 구..

첨부파일 기록하는 습관을 가지자!!https://www.youtube.com/watch?v=Qvjw-5d9oEA 다 적자 ( 마켓에 업로드 예정 )앱제목 : 다 적자앱내용 : 기록하는 노트앱기능 : 1. 인증방에 편하게 복사할 수 있게끔 하는 유틸성 기능2. 사진 포함해서 간단한 기록목적 : 1. 식사하면서 뭐 먹었는지 기록하기2. 운동 일지 기록하기3. 15분방에 인증할때 쉽게 이전 기록 복사해서 붙여넣을 수 있도록 만들기4. 1시간단위로 기록하는 습관 가지기 개발 플랫폼 : Flutter / Android, IOS 을 한꺼번에 출시가능한 하이브리드 플랫폼 1차 전체 로직 스크린샷 이제 15분방에서 열심히 인증하자!!

Flutter Youtube 화면 개발이 내용은 Google IO 2018 Busan 에서 조성윤님이 발표하신 내용을 기반으로 했습니다. 부산에서 진행된 flutter 2주차 스터디 내용입니다. 1주차 스터디 : TodoList 화면 개발전체 소스는 Github 에서 받으실수 있습니다.2주차 스터디는 Youtube Api를 활용해서 화면 구성을 공부해보는 시간을 가져봅니다. 이번시간에 배우는 부분은 아래와 같습니다. Youtube Api 조회Json decoding -> dart class 로 변환하는 방법FutureBuilder 로 비동기로 위젯 구성하기우선 프로젝트를 기본적으로 구성을 해봅니다. main.dartmaterial 테마를 가져옵니다. src/app.dart 를 import 해서 패키징 합..

adb shell screencap -p /sdcard/screen.png adb pull /sdcard/screen.png adb shell rm /sdcard/screen.png출처 : https://blog.shvetsov.com/2013/02/grab-android-screenshot-to-computer-via.html

Docker&Kubernetes 4주차 스터디 정리1주차 스터디Dockerfile을 이용한 서버 배포2주차 스터디Docker-compose 입문3주차 스터디github를 통해 aws ec2로 자동 배포 #1스터디 내용Github 배포Travis CI 환경설정 추가 및 구성ec2 elastic beantalk 구성 및 자동 배포개발 flow준비물Github 계정Travis CI 계정AWS Free tier 계정그럼 시작해보자. Github 설정깃헙 레포를 만든다. 현재 소스를 깃헙 레포와 연결한다. 깃헙에 푸시한다. git init git add . git commit -m "first commit" git remote add origin https://github.com/bear2u/docker-reac..

Flutter Simple TODO(할일관리) List첫번째 수업에서는 Dart와 Flutter를 살펴보고 ToDoList App 을 만들어보도록 할 것이다. 이 내용은 부산에서 진행된 Flutter 스터디 1주차를 정리한 내용입니다.소스는 여기에서 받을수 있습니다.Stateless 와 Stateful WidgetStateless 는 동적으로 변하지 않는 위젯Stateful 은 동적으로 변할수 있는 위젯Stateful 구현은 createStateState 상속된 클래스 구현모든 Widget은 build 함수를 필수import 'package:flutter/material.dart'; ​ void main() => runApp(new TodoApp()); ​ class TodoApp extends Stat..

도커 & 쿠버네이트 3주차 스터디 정리이번 시간에는 실제 운영되는 배포까지 실습해보겠다. 소스는 여기에서 확인가능하다. https://github.com/bear2u/docker3 기본적으로 프로세스는 다음과 같다. Development -> Testing -> Deployment -> Developm...개발자가 소스를 github feature 브랜치에 푸시그럼 마스터 브랜치에 PR을 요청하면그럼 Travis CI 에서 테스팅을 진행테스팅을 진행해서 문제가 없는 경우 마스터 브랜치에 머지aws에 정상적으로 배포그럼 실습을 진행해보자. 우선 노드와 React를 이용할 예정이다. 노드 버전을 체크 해보자. node -v ​ v8.11.3만약 설치가 안된 경우 os에 맞는 노드를 설치하자. 그럼 리엑트 프..

배달앱 클론 3주차 내용메인화면에서 ListActivity 로 이동메인화면에 RecyclerView 를 등록 한 후에 GridLayoutManager 를 등록한 후 일것이다. 그럼 Adapter 에 클릭 이벤트를 등록해서 ListAcitivity 로 이동 처리 한다. fun T.listen(event: (position: Int, type: Int) -> Unit): T { itemView.setOnClickListener { event.invoke(adapterPosition, itemViewType) } return this }MainRecyclerViewAdapteroverride fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHold..

보통 이런 오류는 lazy 하게 네트워크 상태가 늦어지거나 할 경우 이미 위젯은 dispose가 된 상태인데 setState 를 호출 하는 경우로 보인다. 해결법은 간단하게 onDispose 함수에서 변수 하나 선언해서 true / false 로 해주면 된다. 라이프사이클에 대해서 궁금하면 여기 로 가서 한번 보고 오자. 우선 이렇게 변수를 지정 후에@override void dispose() { super.dispose(); isDisposed = true; } 변경하는 부분에서 if(!isDisposed) { setState(() {.... }); }이런식으로 하면 된다. 팁으로 시작시 setState 를 하는 경우에는 this.mounted 로 체크가 가능하다. 이상으로 늦은 setState 오류에..

Android 사용시 자주 사용되는 게 같은 Task 내에서 onActivityForResult 를 사용하는 편이죠. 물론 안드로이드내에서는 호출하는 쪽에서는 startActivityForResult 를 하고 다음 엑티비티에서 할일 하고 값을 다시 보낼때 onActivityResult 를 통해서 값을 받습니다. 관련 글은 http://liveonthekeyboard.tistory.com/150 보시면 됩니다. Flutter 내에서는 라우터를 이용을 할텐데요 그럴경우 주고 받는 걸 어떻게 하는 지 볼게요. 우선 A -> B -> A 라고 가정하면A 에서 라우팅을 Map results = await Navigator.of(context).push(new MaterialPageRoute( builder: (B..

Flutter로 작업시 Android Native 모듈과 통신할 일이 생길 수 있다. 그럴경우 android 폴더를 오른쪽 클릭 후 open Android module in Android Studio 로 열면 된다. 기존에 Flutter에 라이버러리들을 안 붙인 상태이면 정상적으로 작동이 될것으로 보인다. 하지만 다른 라이버러리들을 사용을 하고 있는 경우 하단의 오류 같은게 나올 수 있다. 이 부분을 해결하기 위해선 플러터 오픈 채팅방에서 고수 두부랩님이 알려주신 팁으로 gradle 폴더안에 gradle-wrapper.properties 파일을 열어서 gradle 버전을 수정해주면 된다. distributionUrl=https\://services.gradle.org/distributions/gradle..

Flutter BuildContext 알아보기https://flutterbyexample.com/build-context-class 보고 공부한 내용입니다.Flutter 에서 BuildContext는 위젯 트리에 있는 위젯 위치라고 보면 된다.각각의 위젯마다 고유의 BuildContext 가 존재한다.class _MyHomePageState extends State { _MyHomePageState() { print(context.hashCode); // prints 2011 } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body:..

Flutter 에서 내위치 가져오기모바일에서 내 위치를 가져오는 건 필수 기능 중 하나!!관련 플러그인은 https://pub.dartlang.org/packages/geolocator#-readme-tab- 에서 확인 가능하다.그럼 설정은?pubspec.yamlgeolocator: '^2.0.1'Geolocator 라는 메인 클래스를 통해서 위치를 가져 올 수 있다.Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high)리턴 값은 Future 비동기로 받는다. 그래서 then이나 await 로 사용이 가능하다.Future getCurrentUserLocation() async { return Geolocator() .getCurre..

2주차 배달앱 강의 스터디 수업 내용1주차 복습 내용http://javaexpert.tistory.com/971?category=7201022주차 클론 수업 내용Category 데이터 클래스 구현List 구현리사이클러뷰를 그리드 레이아웃 매니저로 구현 및 데이터 연결GPS 기능 켜져있는지 체크유저 위치 가져오기 위해 퍼미션 작업Presenter 함수 구현Address Object Data 클래스 구현퍼미션 승인 후 트래킹 진행좌표를 가져온 후 네이버 지오코딩 api 를 통해 자세한 동을 가져온다.Retrofit Api 구현converter-moshi 를 통해 JSON -> Address Class 로 변환RxJava Converter 구현RxJava Subscribe 를 통해 화면에 푸시최종적으로 화면에..

도커 2주차 수업복습http://javaexpert.tistory.com/967?category=719756docker-compose를 만드는 방법에 대해 진행1. package.json{ "dependencies": { "express": "*", "redis": "2.8.0" }, "scripts": { "start": "node index.js" } }2. index.jsDocker compose를 통해서 내부 네트워크 설정을 진행redis를 연결시 redis-server을 바로 호출 해서 연결함process를 강제로 죽는 오류를 발생시켜서 도커 컨테이너상에서 오류에 대한 여러가지 대처방법을 배움"no",always,on-failure등 여러가지 프로세스 오류에 대처할 수 있음const expres..

Stateful Widget Lifecyclehttps://flutterbyexample.com/stateful-widget-lifecycle/#6-didupdatewidget 을 공부해서 요약한 글입니다. 자세한 내용은 원문확인 부탁드립니다.StatefulWidget을 만들때 State 라는 오브젝트를 만든다. 이 오브젝트는 위젯이 동작하는 동안 mutable state를 뜻한다.state의 컨셉은 두가지로 정의되어 진다.위젯에 의해서 사용되어지는 데이터는 변할수 있다.위젯이 빌드 될때 데이터들을 동기적으로 읽을수 없다. 모든 State 들은 build 함수가 호출될 때까지 설정되어야 한다.StatefulWidget 와 State 는 클래스를 분리를 한 이유는?성능때문이다.1. createState()..

Transform 활용Stream 사용시 주어진 값들을 이용해서 가공할 일이 생길수 있다. 그럴경우 Transform 을 활용해서 가능하다.우선 예제를 보면서 살펴보자.이메일을 넣는 경우 유효성 체크 하는 validate stream 을 만든다고 가정하자.'@' 포함되는 경우 정상, 없는 경우 오류로 리턴하는 아주 간단한 예제우선 bloc 패턴을 이용할 예정이다.bloc 생성하자.StreamController 생성sink 정의transform 정의... final bloc = new Bloc(); ... class Bloc { final emailController = StreamController(); Function(String) get changeEmail => emailController.sink..

Android 에서 WebView사용시 정말 XX 한게 파일 업로드가 아닐수 없다. 이부분에서 괜찮은 소스가 보여서 공유 해본다. webView.setWebChromeClient(new WebChromeClient() { //The undocumented magic method override //Eclipse will swear at you if you try to put @Override here // For Android 3.0+ public void openFileChooser(ValueCallback uploadMsg) { mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Inten..

Android 배달앱 클론 스터디 부산에서 진행한 배달앱 클론을 진행하면서 공부한 내용을 정리 ( 1주차 )목표Android로 배달 앱을 클론 하면서 개발하는 방법과 패턴, RxJava등 사용법을 배우게 된다.MVP flow Base MVPView화면 단위를 뜻한다. Fragment, Adapter, ActivityModel데이터 연결 하는 부분을 담당한다. Sqlite, Retrofit등PresenterView Model 간의 연결을 도와주는 역할을 한다.Base 작성BaseMvpViewinterface BaseMvpView { fun getContext(): Context fun showError(error: String?) fun showError(@StringRes stringResId: Int)..