기록하는 개발자

화살표 함수는 표현식을 사용하는 함수로 '=>'를 이용하여 함수를 선언한다. 화살표 기둥 '='를 사용하기 때문에 'fat arrow function' 이라고도 부른다. 기존 자바스크립트 function function mul(a, b){ return a*b; } var mul = function(a,b){ return a*b; }; ES6의 화살표 함수 사용 방법 // const mul = (a,b) => { return a*b; } // const mul = (a,b) => a*b; // cosnt addMul = (a,b) => ({add : a+b, multiply : a*b}); 1 - 앞선 코드의 기존 함수 표현식을 화살표 함수로 변경한 것이다. 2 - 함수의 본문 내용이 비어있고 return..

기존 JS 문법에서는 var 키워드를 사용했으나 ES6에서는 값을 수정할 수 있는 가변변수 let 키워드와 값을 수정할 수 없는 불변 변수 const 키워드를 사용한다. 가변 변수 가변 변수는 let 키워드로 선언한다. let으로 선언한 변수는 우리가 편하게 변수를 사용하 듯 읽거나 수정할 수 있다. 불변 변수 불변 변수는 const 키워드로 선언한다. const로 선언한 변수는 Java의 전역 변수처럼 읽기만 가능하고, const로 선언한 변수에 값을 다시 할당하면 오류가 발생한다. 그러나 불변 변수 const 는 값을 다시 할당할 수 없는 것이지 값을 변경할 수는 있다. 이게 무슨 말인가? 아래 코드 예시를 통해 배열이나 객체를 불변 변수로 선언한 후 JS 내장함수를 이용하여 값을 변경한 모습을 확인..

1. 템플릿 문자열 기존 자바스크립트 문자열 사용 방법 // var string1 = "감자"; var string2 = "고구마"; var winterSnack = string1 + ' ' + string2; // var dessert = { cake : '얼그레이', price : '6000원'}; var totalPrice = '디저트' + dessert.name '의 가격은' + dessert.price + '입니다.'; // var multiLine = '문자열1\n문자열2'; // var value1 = 10; var value2 = 5; var boolValue = false; var operator1 = '곱셈값은 ' + (value1*value2) + '입니다'; var operator2..

Prettier 란? 프로젝트의 코드 입력 스타일을 동일하게 유지시켜주는 플러그인으로 현업에서 자주 사용된다. 튜토리얼 1. react의 extension(왼쪽 nav bar 맨 아래)에서 Prettier를 검색한다. 2. Prettier - Code formatter를 선택하고 Install을 눌러 플러그인을 설치한다. 3. 설치 후 위 화면과 같이 Reload Required 버튼을 눌러 VSCode를 재실행한다. 4. 재실행 후 프로젝트 폴더에 Prettier 설정 파일을 생성하여(파일 이름에 반드시 온점 '.'을 포함) 아래와 같이 입력한다. prettier를 자동으로 적용되도록 만들어보자 Preference-Settings 로 들어가 setting의 검색창에 'formatOnSave'를 검색하면..

1. npm이란 무엇일까? npm. react를 사용하면서 라이브러리를 설치하거나, 코드 작성 후 로컬에서 결과 확인을 위해 'npm run start'를 입력하며 이미 수백번 마주했던 단어이다. 이 npm은 어떤 역할을 수행하고 있었을까? npm : Node Package Manager npm의 동작 방식 npm은 http://www.npmjs.com에서 필요한 라이브러리를 내려받아 설치하고 삭제하는 등의 관리를 해주는 프로그램이다. npm은 실제로 node_modules 폴더에 라이브러리를 내려받아 저장하고 package.json 파일에 설치된 라이브러리의 정보를 저장한다. 라이브러리와 라이브러리의 명세 파일을 따로 관리하는 이유는 무엇일까? node_modules에 저장되는 라이브러리의 용량은 매우..

- profile에 user명을 함께 보여준다. - userName을 update할 수 있다. - 네비게이션의 profile을 보여주는 link에 userName을 함께 표시한다. import React from 'react'; import {Link} from "react-router-dom"; const Navigation = ({userInfo}) =>{ const userName=userInfo[Object.keys(userInfo)[0]].displayName; return( Home {userName}'s profile ); }; export default Navigation; - Profile component를 routing할 때 Home..

1. Home 화면에서 Tweet을 생성 할 때 file과 글을 함께 올릴 수 있다. (글과 사진 중 하나만 올리는 것 또한 가능.) 2. 파일 선택 후 Clear Photo 버튼을 통해 선택을 취소할 수 있다. 3. 파일 선택 및 글 작성 후 Tweet 버튼을 클릭하면 글과 파일이 함께 post된다. 4. Delete Tweet 버튼을 클릭하면 Collection에서 tweet 객체가 삭제되고 해당 tweet 객체에 file이 있었다면, Storage에 올라간 file도 함께 삭제된다. : attachmentUrl의 이름으로 file의 url(경로) 항목이 추가된다. : user가 upload한 f..

: comfirm 이 발생하고 확인을 선택하면 해당 tweet 이 삭제된다. - 수정 form을 보여준다. - 내용 수정 후 update tweet을 클릭하면 수정 내용이 반영된다. - cancel 선택 시 form이 사라진다. (수정 취소) import React, {useState} from 'react'; import { deleteDoc, updateDoc, doc } from '@firebase/firestore' import { dbService } from "fBase"; const Tweet = ({ tweetObj, isOwner})=>{ const TweetTextRef = do..