오늘도 공부

저장소 정리하다 보니 1월에 진행된 간단한 백엔드 연동된 스터디 자료가 있어서 공유합니다. 내용 : 간단한 투두 리스트 구현내용 1. Flutter 2. Bloc 3. RxDart 4. Docker 5. Node, Express 6. nginx proxy https://github.com/bear2u/flutter-ecommerce-study

Pragmatic State Management in Flutter (Google I/O’19) Dart: Productive, Fast, Multi-Platform — Pick 3 (Google I/O’19) Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web (Google I/O’19) Building for iOS with Flutter (Google I/O’19) Beyond Mobile: Material Design, Adaptable UIs, and Flutter (Google I/O’19)

.final__clip-image-1 { -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); } .final__clip-image-2 { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); } .final__clip-image-3 { -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 7..

.shadow-typo { position: relative; display: inline-block; font-size: 4em; text-transform: uppercase; color: #00b3b4; text-shadow: 3px 3px 0px #e7eef1, 8px 8px 0px rgba(0, 0, 0, 0.1); } .threedee-typo { font-size: 4em; text-transform: uppercase; color: #f2395a; -webkit-transform: skew(-5deg, -5deg) rotate(5deg); transform: skew(-5deg, -5deg) rotate(5deg); -webkit-transform-origin: center center; ..

Flutter 화면 제작 공부https://www.youtube.com/watch?v=dMLreUXpSQ0&t=1s를 보고 하나씩 공부 하고자 한다.우선 사이즈 부분을 알아보자.Row를 사용해서 정렬Container Boxdecoration을 이용해서 박스형태 제작그림자 효과 적용소스높이 자동 계산 로직double baseHeight = 640.0; double screenAwareSize(double size, BuildContext context) { return size * MediaQuery.of(context).size.height / baseHeight; }import 'package:flutter/material.dart'; import 'package:flutter_adidas_shoes_..

부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/docker-and-kubernetes-the-complete-guide 을 공부하고 있습니다도커 & 쿠버네티스 9주차 스터디 pod 자세한 설명 스크립트# kubectl describe > kubectl describe pod client-pod ........... Name: client-pod Namespace: default Node: minikube/10.0.2.15 Start Time: Sat, 02 Feb 2019 12:05:16 +0900 Labels: component=web Annotations: kubectl.kubernetes.io/last-ap..

부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/docker-and-kubernetes-the-complete-guide 을 공부하고 있습니다Kubernetesminikube start 상태확인minikube status 클러스터 정보 확인kubectl cluster-info 목표다양한 도커 이미지들을 활용해서 로컬 쿠버네티스를 통해서 올리는 게 목표도커 컴포즈와 쿠버네티스 비교docker-compose이미지들을 각각 빌드해서 올린다우리가 원하는 컨테이너를 만든다각 네트워크 속성들에 대해 정의를 각각 한다.kubernetes이미 모든 이미지들이 만들어져있다고 가정한다우리가 만들기를 원하는 하나의 오브젝트에 하나의 ..

로그인 수업목표한빛 출반 홈페이지에 접속해서 로그인 과정을 거쳐서 마일리지 와 코인정보를 가져오는 게 목표준비파이썬vscoderequestsbeautifulsoup한빛 출반 네트워크 로그인 과정 뚫어보기로그인 페이지 분석http://www.hanbit.co.kr/member/login.html 한빛출판네트워크 로그인 아이디 저장 아이디 찾기 비밀번호 찾기 회원가입 우선 로그인되는 과정을 분석하기 위해서는 크롬에서 network / doc 탭에서 흐름을 체크를 하자.preserve log 라는 곳에 체크를 해야 한다. 이유는 network 페이지내에서는 한번 새로 고침을 하는 순간 로그들이 없어지기 때문에 이전 로그들을 남겨야 할려면 체크를 하자.로그인을 하는 순간login.html -> login_pro..

React,MongoDB,Express,Nginx 도커 개발 환경 구성하기이번 시간에는 대중적으로 많이 쓰이는 환경을 도커로 하나씩 구축해볼 예정이다.구성 스택은 다음과 같다.Client : ReactApi Server : Node ExpressDB : MongoServer : NginxRoot우선 환경을 구성한다. 기본적으로 3개의 폴더와 docker-compose.yaml 파일로 구성된다.- client - ...sources - Dockerfile.dev - nginx - default.conf - Dockerfile.dev - server - ...sources - Dockerfile.dev - docker-compose.yamlClientcreate-react-app 을 이용해서 구성한다.- ...

Flutter + Steho 사용하기 Flutter 로컬 디비 사용시 대중적인 방법은 sqflite 일것이다. 일반 sqlite 와 문법이 똑같으며 사용하기에도 편하다. sqlite 를 모바일에서 연동시 페이스북에서 나온 steho 라는 라이버러리가 있다. 안드로이드만 현재 가능하지만 꽤 유용하게 사용가능하다. stetho로 android 디버깅을 보다 쉽게 그럼 flutter 에서 어떻게 적용하는지 살펴보자. 우선 sqflite 를 import 로 가져오고 생성시 getDatabasePath() 로 가져올 수 있다. Future init() async { String documentsDirectory = await getDatabasesPath(); //주의하자. final path = join(doc..

Flutter Codelab을 돌려볼때 오류가 발생될 경우가 있다. 코드랩 위치 : https://codelabs.developers.google.com/codelabs/mdc-101-flutter 오류 내용은 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android해결방법은 2가지를 체크 해야 한다. 1. android 폴더내에 project 레벨에서 build.gradle 에서 dependencies 가 3.1 이상으로 되어있는 지 체크하자. dependencies { classpath 'com.android.tools.build:gradle:3.2.1' }2. android/gradle/wr..

지치지 않고 제대로 공부하는 7가지 방법 요약동영상 링크https://www.youtube.com/watch?v=P2rpSiACoVQ&t=890s 어떻게 해야 우울해 지지 않고 하루에 10시간 이상 공부할 수 있을까? 어떻게 해야 그것에 익숙해질 수 있을까?이에 대해 쿼라 에서 유명 교수님의 답변을 요약 한 내용입니다. 나는 당신은 그것을 할수 없다고 생각한다. 나는 당신이 그것을 시도해서도 안된다고 생각한다. 아무도 그렇게 많이 공부하지 않는다. 사람이 하루에 3시간이상 열심히 집중하는 건 매우 드물고 바람직하지 않는다하지만 그래도 꼭 하고 싶다면 다음 7가지 내용을 기억하자. 꾸준하고 제대로 된 공부법은 무엇인가?1. 하루에 7.5 이상 공부하지 마세요. 당신은 매우 지칠 것이다. 더한다고 해도 도움..

Tensorflow JS 스터디 4주차부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/machine-learning-with-javascript 을 같이 보면서 공부중입니다.이전 알고리즘과 비교어떤 버킷에 공을 놓을때 어떤 위치를 갈지 예측하기 -> ClassificationClassification 은 예를 들어 해당 메일이 스팸인지 일반 메일인지 판별하는 문제 해결시 사용된다.주변 시세에 따른 주택 가격 예측 -> Regression (선형 회귀)주택 가격 예측 (by knn)KNN 알고리즘이번 스터디는 텐서플로를 이용해서 KNN 알고리즘 하나하나 구현해본다.특정 기능과 예측포인트 사이를 찾고작은 것에서 큰걸로..

NodeJS 스터디 1주차 정리부산에서 매주 진행되는 노드 입문 강좌 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.이 강좌는 제로초님의 인프런 강좌를 보고 요약해놓은 내용입니다.챕터 2 - ES2018챕터 3 - 노드 기능 알아보기const & letconstconst 는 객체가 할당된 경우 변경이 불가능하지만 오브젝트에 대한 내부 값은 변경가능하다.const item = {a: 1, b: 2, c: 3}; item.a = 3; item => {a: 3, b: 2, c: 3}let구문적인 변수 영역 규칙을 지원한다.{} 블록내에 변수 영역만 처리된다.예를 들어 보자.var 로 할 경우 밖의 변수까지 변경되는 걸 볼수 있다.var test = "test"; if (test)..

Tensorflow JS 입문 ( 부산 3주차 스터디 )부산에서 매주 진행되는 스터디입니다.부산에서 다른 스터디 내용을 보실려면 카페 에서 보실수 있습니다.https://www.udemy.com/machine-learning-with-javascript 을 같이 보면서 공부중입니다.목표텐서플로 JS 에 대한 이해텐서플로를 이용한 예제 재설계 ( lodash -> tensorflow)tensorflow 를 이용해서 knn 알고리즘 재설계tensorflow와 함계 다른 알고리즘 빌딩저번주까지(2주차) 우리는 기본적인 머신러닝 기법인 KNN 에 대해서 공부했다.공부한 내용은 다음과 같다.공식 홈페이지https://js.tensorflow.org/첫번째 예제tensorflow js를 이용해서 배열에 있는 숫자들..

No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android 원인 : 오래된 flutter 플젝을 열때 나오는 버그이다. Open android/gradle/gradle-wrapper.properties and change this line:distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip to this line:distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip Open android/build.gradle and chang..

NodeJS Advance 2주차 스터디부산에서 매주 진행되는 NodeJS Advance 스터디입니다.더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.스터디 내용은 Udemy 강좌를 같이 보고 정리를 한 글입니다.1주차 스터디 내용NodeJS 내부 구조 정리 #1NodeJS 내부 구조 정리 #2이번 스터디에서는 노드의 성능향상에 대해서 공부하도록 한다.Cluster 모드를 사용Worker Threads를 사용우선 테스트를 위해 express 를 사용해보자.const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hi there'); }); app.listen(3000);위와 같이 구성..

도커&쿠버네티스 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 로 작성될 예정이며 아래와 같이 구..

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 해서 패키징 합..