firebase 스크립트 파일, materialize ui framework

|

설정스크립트, 코딩흐름소개

  • MemoApp index.html
    • UI툴 : materialize ui framework
    • 기본구조
      • 메모를 입력하고 다른 포커스를 주면 메모 리스트 생성
      • 신규메뉴버튼을 눌러 신규 메모 생성

스트립트 파일 적용

  • firebase console이동
  • 웹 앱에 firebase 추가 선택
  • 해당 snippet을 index.html에 붙여넣기

기능구현 순서

  1. 인증기능을 이용한 구글창 호출
  2. 구글인증
    • 성공 > 메모리스트 출력
    • 실패 > 구글창 다시 호출
  3. 메모 저장기능
  4. 메모 한건 출력기능
  5. 메모 수정 기능
  6. 메모 삭제 기능

firebase 설치 및 설정

|

firebase

강의URL : firebase를 이용한 간단한 웹 어플리케이션 만들기

파이어베이스란

파이어베이스는 웹과 모바일(Android, IOS) 개발에 필요한 기능을 제공하는 BaaS(BackEnd as a Service) 즉, 백엔드 서비스 입니다.

기존의 경우 백엔드서비스를 구현하기위하여 서버구성, 서버아키텍쳐, 인증,DB설계 및 구현등 모든 기능을 개발해야 하는 수고로움이 있었으나 파이어베이스의 출시로 앞선 수고로움을 대신 해서 시간을 단축 시키고 프론트 엔드개발에 더욱 집중 할 수 있습니다.

firebase 개발환경설정

firebase 프로젝트 생성

  1. firebase 콘솔 사이트 이동
  2. 새 프로젝트 만들기
  3. Authentication (인증) 메뉴 이동
  4. 로그인방법 중 google 사용설정 on

로컬 개발환경 설정

Firebase를 이용한 웹어플리케이션 구현을 위한 개발환경 설정 방법

  1. nodejs 설치 (firebase 설치를 위한 nodejs 설치)
  2. Firebase CLI 설치 (CLI : Command Line Interface)
    • $ npm install firebase-tools -g --save
    • -g : 모든 터미널에서 firebase 입력시 바로 작동 가능 옵션
  3. Firebase Login (컴퓨터와 firebase를 연결하고 프로젝트에 대한 접근을 혀용)
    • $ firebase Login
    • firebase CLI에 로그인 로컬 컴퓨터와 firebase를 연결하고 프로젝트에 대한 접근을 허용
    • firebase list
    • 프로젝트 리스트 확인
  4. Project Directory 초기화 (firebase init)
    • $ mkdir 프로젝트폴더
    • 프로젝트 폴더 생성 후 이동
    • $ firebase init
    • 프로젝트 선택, 기본 db 이름, public directory 사용 (웹앱)
    • firebase.json : 파이어베이스 환경설정 파일 (호스팅시 기본폴더, path설정, DB 기본 룰셋파일)
    • database.rule.json : 파이어베이스 기본 데이터베이스 정책
  5. Firebase serve
    • $ pwd 명령으로 프로젝트 폴더인지 확인 (print working directory)
    • $ firebase serve

참고 사이트

170216_TIL

|

오늘 한 일

  • jekyll 테마로 github page를 만들었다. 몇 주 동안 블로그를 만드려고 여러번 시도를 했는데 잘 되지 않았다. (탬플릿 고르는데 시간을 가장 많이 쓴 듯) 앞으로 마크다운 으로 글을 쓰는 것이 편해졌으면 좋겠다. 무엇보다 TIL(Today I learned) 정리를 꾸준히 하고 싶다.

    • codinfox 탬플릿을 사용했는데 스타일을 바꾸려고 코드를 살펴보니 scss, html 파일 모듈화가 깔끔하게 되어있었다.
  • 인프런에서 firebase 강의를 듣고 웹페이지를 만들어서 제출하면 구글 티셔츠를 준다고 한다. 티셔츠가 갖고 싶어서 열심히 to-do list 웹페이지를 만들어 제출했는데 오늘 강사님이 잘했다고 댓글을 달아줬다.(야호!)

    • 웹페이지를 만들면서 jQuery의 편리함을 실감했다.
    • 일부러 Firebase API Document를 읽으면서 만들었는데 잘 이해가 가지 않는 부분이 여전히 많다. 작성한 코드를 다시 한번 정리하는 시간을 가져야겠다.
    • 이왕 만들었으니 모바일에서도 사용할 수 있도록 바꿔야지.
  • 좋은 강의를 찾았다.

오늘 느낀 점

  • 무언가를 할 때는 탬플릿 고르기 같은 것 보다 더 중요한 것을 먼저 하자.
  • 이론을 학습하는 시간과 실제로 만들어 보는 시간을 적절하게 분배하자.
  • 이고잉님의 적정수준의 공부
    1. 프로그램을 만드는데 필요한 최소한의 도구를 익힌다.
      (문자, 숫자, 변수, 비교, 조건문, 반복문, 함수)
    2. 최소한의 도구로 다양한 문제를 해결해 본다.
    3. 가지고 있는 도구로 문제를 해결하는 것이 점점 어려운 일이 되었을 때
      선배 개발자들의 성취를 찾아본다. 이 또한 최소한으로.
    4. 2번과 3번 반복

내일 할 일

  • 카페 가서 공부하기
  • nodejs 생활코딩 강의 듣기
  • MVC 디자인패턴 생활코딩 강의 듣기
  • 코드스쿼드 블루레벨 코스 문의
    • 백엔드 : 프론트엔드 비율
    • 미니팀플, 프로젝트에 대해서

TIL (Today I learned) 시작

|

오늘 했던 일과 느낀 점을 매일 간단하게 정리 하려고 한다.

level 1. 스트링을 숫자로 바꾸기 (java, python)

|

스트링을 숫자로 바꾸기

경로 : http://tryhelloworld.co.kr/challenge_codes/110

문제

strToInt 메소드는 String형 str을 매개변수로 받습니다. str을 숫자로 변환한 결과를 반환하도록 strToInt를 완성하세요. 예를들어 str이 “1234”이면 1234를 반환하고, “-1234”이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다.

풀이 (python)

function strToInt(str){
  var result = 0;
  //함수를 완성하세요
	result = parseInt(str);
  return result;
}


// 아래는 테스트로 출력해 보기 위한 코드입니다.
console.log(strToInt("-1234"));

풀이 (java)

public class StrToInt {
    public int getStrToInt(String str) {
			return Integer.parseInt(str);
    }
    //아래는 테스트로 출력해 보기 위한 코드입니다.
    public static void main(String args[]) {
        StrToInt strToInt = new StrToInt();
        System.out.println(strToInt.getStrToInt("-1234"));
    }
}

배운점

  • java에서 String을 int로 변경할때 Integer.parseInt() 를 사용한다. ( primitive int 리턴)
  • Integer.valueOf() 사용시 Integer 객체를 리턴한다.
  • “10A” 와 같은 문자열이 포함된 경우 NumberFormatException 이 발생한다.