내일배움캠프 4기 React 22일차(기초프로젝트 코드리뷰, js 심화)

1. 휘인님

• 반응형 :
  @media screen 을 통해 width 사이즈를 min-width, max-width 로 설정하여 각 사이즈마다 css 를 따로 넣어주었고
  개발자도구를 통하여 width 사이즈를 확인할 수 있음.
  모바일, 패드 사이즈를 각각 다 볼 수 있음.
  left: -100% 를 이용하여 사이드바를 숨길 수 있다.
  또한 화면이 보여지는 사이즈에 따라 버튼들의 사이즈를 조절해줌으로 이쁘게 보여질 수 있음.

2. 채하님, 다경님

• firebase 연결 :
  firebase.js 에 고유 웹아이디값을 넣어주어 연결시킴.

  const { uid, photoURL, displayName } = authService.currentUser;
  firebase 에서 값들을 가져옴.

  const word = post.value.replace(/\s| /gi, "");
  유효성검사 - 엔터나 띄어쓰기를 공백으로 일단 처리함.
  그 후 공백을 특정문자로 교체하여 글 조회시 다시 공백으로 변경시켜줌
  firebase에 저장될 시 엔터, 띄어쓰기는 특정문자로 저장된다.

  삭제시 글 작성자 본인만이 삭제할 수 있게 하기 위해서
  event 에 event.target.name 으로 타겟이 id 가 같아야만 삭제가 가능하도록 한다.

• 글 수정 :
  글 수정에 관련하여 target 이 가능하다면 굳이 parentnode 나 childnode 를 쓸 필요가 있는지 생각이 들었다.

3. JS 심화학습

• 데이터의 크기
  숫자는 8바이트, 문자는 영어 1, 한글은 2바이트를 가진다.
  데이터를 저장할 때 변수에 숫자를 800번 저장할 일이 있다면??
  숫자를 800번 쓰면 800 x 8 = 6400바이트를 사용해야함.
  but, 변수에 숫자를 저장하고 변수를 쓰면 2바이트가 됨.
  2 x 800 으로 1600바이트, + 처음 숫자 8바이트 = 1608 바이트를 사용
  코드를 완성 시키는 것도 중요하지만 효율적으로 사용하는것이
  개발자에겐 중요한 일이다!

• 얕은 복사 vs 깊은 복사
  object 를 복사해 오는것은 간단치 않다.
  object 안을 for문으로 돌면서 값을 가져와야한다.

  var user ={
  	name: "youngjin",
     	age: 29,
      hobby: {
      	study: 'coding',
         health:'soccer',
         eat: 'meat'
         }
     };

  객체가 주어졌을때 안의 값을 for문으로 가져올 수 있다.
  하지만 hobby 처럼 객체 속에 객체가 있을 경우엔
  user.hobby.study 이런식으로 지목해줄 수는 있지만
  그것 보단 hobby 객체자체를 불변객체로 변경함으로 더 안정적
  이때, 재귀함수를 사용

  var copyObjectDeep = function(target) {
  var result = {};
  if (typeof target === 'object' && target !== null) {
  for (var prop in target) {
  result[pop] = copyObjectDeep(target[prop]);
  }
  } else {
  result = target;
  }
  return result;
  }

  null 도 object 즉 객체로 취급하기 때문에 제외처리 해주어야됨

• foreach, map, filter, reduce
  • foreach
    for 문 역할을 한다. 객체를 돌면서 값을 반환 return은 아님.

  [1, 2, 3].foreach(
   	function(x){
       	console.log(x)
           };

  이때 1, 2, 3 차례대로 출력됨.
  • map
    배열의 요소에 무언가 실행시킨다.
    return 값을 배열형태로 반환한다.
  • filter
    배열의 요소에서 조건에 맞는 요소만 return 시킨다. 배열로
  • reduce
    foreach, map, filter 를 한번에 표현할 수 있는 함수.
    공부필요