코딩애플 강의를 보고 정의

arguments문법보다 더 쉬운 Rest 파라미터, es6문법이다.
점 세개만 찍으면 된다.

Rest 파라미터

function fun(...parameters) {
  console.log(parameters);
}

fun(1, 2, 3, 4, 5, 6, 7); // [1,2,3,4,5,6,7]

위 코드를 실행해보면 parameters이라는 변수를 출력해주는데, array안에 담아서 출력해주고있다.
... 이 기호를 붙여주면 이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터 라는 뜻이 된다.

또 다른 예로 다음과 같은 코드를 들 수 있겠다.

function fun2(a, b, ...parameters) {
  console.log(parameters);
}

fun2(1, 2, 3, 4, 5, 6, 7); // [3,4,5,6,7]

첫 두개의 파라미터는 a,b로 쓰는데,
a,b 그 뒤에 나오는 모든 파라미터는 중괄호에 감싸서 array가 된다.

주의사항

rest는 사전적 정의로 나머지를 뜻한다.
의미대로 나머지 부분에만 사용이 가능해서 항상 마지막 파라미터에 넣어야한다.

function fun(a, ...parameters, b){
  console.log(parameters)
}

이렇게 넣으면 에러가 난다.

function fun(a, ...parameters, ...parameters2){
  console.log(parameters)
}

이렇게도 안된다고 한다. 2개 이상은 사용할 수 없다고 한다.

코딩애플 강의를 보고 정의

함수의 default 파라미터 넣기

파라미터에 기본값(default)를 줄 수 있다.

function add(a, b = 10) {
  console.log(a + b);
}

add(1);

b 자리에 파라미터가 없으면 기본값으로 10이 할당되는 것 이다.
이 default값으로는 함수도 올 수 있다.

function testFn() {
  return 10;
}

function add(a, b = testFn()) {
  console.log(a + b);
}

add(3); // 13

함수의 arguments

함수의 모든 파라미터들을 전부 한번에 다루고 싶을때 사용한다.

function fun(a, b, c) {
  console.log(arguments);
}

fun(2, 3, 4); // [2,3,4]

array를 출력해주니 반복문으로 좀 더 편리하게 다룰수도 있다.

function fun(a, b, c) {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

fun(2, 3, 4);

es6문법인 rest문법을 사용하면 더 간단하다.

10월 12일 (목)

오늘 한 일 (회고)

• jekyll 테마로 github page를 새롭게 만드려고 시도했다.

  • 좀 더 깔끔한 디자인을 골랐고 테크 블로그처럼 운영하려고 했는데 계속 페이지 오류가났다.
  • main 브랜치와 git-pages브랜치가 안생겨서 toc에러가 발생하는 골칫거리를 해결후 블로그 정보를 바꾸고 글을 시험삼아 포스팅했는데 올라가지 않는 등 계속되는 에러에 지쳐서 다시 이 테마로 돌아왔다.
  • 앞전 깃 레포지토리를 지우는 바람에 그동안 심었던 잔디가 다 날아갔다..
    
    

• 조금 더 내공이 쌓이고 시간적 여유가 생기면 게츠비로 직접 내 블로그를 만들어봐야겠다.

  • 이런식의 블로그 디자인이 깔끔하고 괜찮은것 같다. (무엇보다 코드블록이 너무 마음에 듦)
  • 사실은 템플릿을 공유받길 원했는데 아직 완성이 안됬다고 한다.
  • 그때까지 가독성있는 글을 쓰기 위해서 열심히 공부하고 글을 작성해나가야겠다.

10월 13일 (금)

오늘 한 일

• 최근 합류하게된 프로젝트에서 css작업을 Material ui로 하는것 같아서 material ui를 살펴봤다.

10월 14일 (토)

오늘 한 일

• 자바스크립트 공부
  • 코딩애플 자바스크립트 강의를 처음부터 다시 훑어봤다.
  • 앞으로는 모던자바스크립트에서 꾸준히 읽어야겠다.

10월 15일 (일)

오늘 한 일

• 패스트캠버스 강의 수강

  • 파이어베이스랑, 리액트로 만드는 강의를 봤다.
• 넥스트랩 사이트 클론 시작
• 릿어퍼퓸 팀 프로젝트 회의
  • 피그마로 자신이 개발할 페이지의 기능명세서를 작성하기로했다. 이렇게 할 시 디자이너분과 소통하기가 더 편리하다고 한다.
  • 리액트 쿼리와, 리액트 리코일을 사용하기로 결정했다.
    • 리덕스보다는 간편하고 진입장벽이 낮은 리코일로 결정됬다.

10월 16일 (월)

오늘 한 일

• 넥스트랩 사이트 클론
  • 팀 프로젝트에서 css작업을 material-ui와 motion/react 를 사용해서, 넥스트랩 클론 프로젝트에도 사용해보려고 한다.
  • 팀 플젝의 코드를 일부 가져와서 사용했었는데, 코드를 치던중 무조건적으로 좋은 코드를 가져와 쓰기보다는 내 상황과 맞게끔 써야한다는거를 깨닫고 다시 처음부터 작업을 시작했다.

10월 17일 (화)

오늘 한 일

• 넥스트랩 사이트 클론
  • 메인화면의 헤더와,캐러셀슬라이드 구현
  • 캐러셀 슬라이드 만들때 라이브러리를 사용하려고했으나, 한번쯤은 직접 만들어보는게 좋겠다 싶어서 직접 만들었다.
  • 아래 링크를 통해서 코드를 이해하며 따라쳤고 내 입맛에 맞게 css와 기능을 바꿨다.
  • 캐러셀 슬라이드 참고

버전 v10

Firebase로 배포하기

프로젝트 초기화

• firebase init hosting : 초기화가됨, 해당 프로젝트위치의 터미널에서 입력
• Command line에 아래와 같이 입력
  • Use an existing project:현재 내가 갖고있는 파이어베이스 프로젝트중에서 고른다
  • fastcampus-react-blog(프로젝트명) : 프로젝트 이름 선택
  • What do you want to use as your public directory? -> ‘build’ 입력
  • Configure as a single-page app (rewrite all urls to / index.html) : Yes
  • Set up automatic builds and deploys with GitHub? -> No
    

여기까지하면 터미널에 아래와 같은 문구가 나온다.

+  Wrote build/index.html
+  Firebase initialization complete!

그리고 해당 프로젝트로 가보면
.firebaserc, firebase.json 파일 두개가 추가되어있다.

사이트 배포

• yarn build (빌드 후 배포)
• firebase deploy –only hosting
• 배포된 url확인 (http://xxx-xxx-xxx.web.app)
  

Google console 및 Firebase 보안 적용

• Firebase Auth > settings > 승인된 도메인 추가
• Google Console > API > 보안 URL 추가

Firebase CLI(Command Line Interface)

• 파이어베이스 프로젝트를 관리하고 다양한 파이어베이스 기능을 로컬에서 사용할 수 있게 해준다.
• 파이어베이스 프로젝트 설정, 데이터베이스, cloud Function 호스팅 등 관리

Firebase CLI설치 방법

• node.js 및 npm 설치
• npm i -g firbase-tools
• firebase login (로그인 후 테스트)
  

(터미널에 firebase login 치고 Y 누르고 허용누르면됨)

• firebase projects:list (파이어베이스 프로젝트확인)
  

(터미널에 firebase projects:list 입력)