거북이개발자

1. Optional chaining const person1={ name:'Ryu' job : { title 'Engineer', manager:{ name : bob, }, }, }; const person2={ name:'Kim', }; { function printManager(person){ console.log(person.job.manager.name); } } person1 과 person2의 객체가 있고, 매니저의 이름을 프런트하는 함수를 구현하고 싶다. (1)문제점 printManager(person1); printManager(person2); 위의 사진처럼 person2객체는 job, manger이 정의 되어있지 않아서 오류가 난다. (2)해결(&&연산자) { function pri..

1. Template Literals (1)기존의 문자 작성시 const name='Ryu'; const age='27'; console.log('my name is '+name+' my age is '+age); 이런식으로 +기호를 이용하여 작성했다. (2)Template Literals이용시 const name='Ryu'; const age='27'; console.log(`my name is ${name} my age is ${age}`); 이렇게 간소화가 가능하다.

1. Default parameters (1)일반적 default 값 처리 { function printMessage(message){ if(message==null){ message='default message'; } console.log(message); } printMessage(); } 일반적으로 함수를 정의시 default 값을 정의할때 if(message==null) 이런식으로 사용한다. (2)Default parameters 사용시 { function printMessage(message = 'default message'){ console.log(message); } printMessage(); } 이런식으로 간단하게 쓸 수 있다.

1. Spread Syntax (1)객체, 배열등을 복사 const obj1={key : 'key1'}; const obj2={key : 'key2'}; const array=[obj1, obj2]; const arrayCopy=[...array]; console.log(array, arrayCopy); 위와같이 array를 복사할시 const arrayCopy=[...array]; 이렇게 사용가능하다. - ...은 배열, 객체 등의 안의 속성들의 각각을 의마한다. (2)객체, 배열등을 복사2 const obj1={key : 'key1'}; const obj2={key : 'key2'}; const array=[obj1, obj2]; const arrayCopy2=[...array, {key:'key3'..

1. Destructuring Assignment (1)일반적 객체내 값 접근시 const student1={ name : 'Ryu', age : 18, }; { const name=student1.name; const age=student1.age; }; 이런식으로 각각의 요소를 객체.요소와 같은 식으로 접근해줬다. (2) Destructuring Assignment-객체 const student1={ name : 'Ryu', age : 18, }; { const{name, age}=student1; console.log(name, age); }; const{name, age}=student1;을 통해서 name, age로 바로 접근이 가능하다. (3) Destructuring Assignment-배열..

1. Shorthand property names (1)일반적 객체생성시 const name='Ryu'; const age=18; const student1={ name : name, age : age, }; 이런식으로 name : name처럼 작성해준다. (2) shorthand prorperty names const name='Ryu'; const age=18; const student2={ name, age, }; 간편하게 name, age로 작성이 가능하다. 결과값이 같은걸 볼 수 있다.

1. 목표 -ReactHooks와 firebase를 이용한 가족 SNS를 만들었다. - 트위터처럼 자신의 기분과, 사진을 올리고 가족끼리 보는 가족 전용 SNS이다. 2. 결과 (1) 로그인 이메일과 패스워드로 회원가입이 가능하고 혹은 google을 이용해서도 가능하다. 회원 가입한 정보는 firebase의 Authentication에 저장된다. (2) Home -입력한 텍스트는 Firebase Cloud firestore에 들어간다. -첨부한 사진은 Firebase Storage에 들어간다. -Delete, Update 기능이 있다. -첨부한 사진을 미리 보여주는 기능도 있다. -작성자를 올려주며, 시간순으로 입력한 메시지를 보여준다. (3) Profile -프로필의 이름을 변경 가능하고 -로그아웃 가..

1. 배경 위와 같이 파일을 첨부했을시 다시 초기화 하고 싶을때가 있다. 2. 배경 const fileInput=useRef(); const onClearAttachment=()=>{ fileInput.current.value = ""; }; 위의 코드처럼 useRef를사용해준다. 그후 fileInput.current.value=""을 이용해 초기화 해줄 수 있다. 중요한점음 input 태그에서 어트리뷰트로 ref를 넣어줘야 한다.