[1차 프로젝트] Reviews

1차 프로젝트 기간에 받은 리뷰 중 기억에 남은 리뷰들을 정리해본다. 다시 보는 내 코드 정말 중구난방 지저분하지만 다음 프로젝트에서는 좀 더 예쁜 코드를 작성하기 위해! 적어도 리뷰로 지적받은 부분은 꼭 기억해야 할 것!!!

의미없는 코드 ✎ block 요소에 display: block 쓰지 말 것!

block & inline 요소는 각각 다음과 같다.
특히 이 무의미한 코드를 자주 가져다 썼던 p, ul & li, div 태그 주의!

의외로 (?) a, input, textarea, button tag는 inline 요소임을 기억하자!

의미없는 코드 ✎ flex 없는 justify-content?!

Q. justify-content property isn't working 😢
A. Justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space.

이걸 뭐라고 하나요? ✎ 스프라이트 이미지!

↓ 이렇게 생긴 이미지의 일부를 잘라내어 사용한다.

이걸 뭐라고 하나요? ✎ 객체단축속성명 (shorthand property names)

객체의 속성값 일부가 이미 변수로 존재할 때, key:value 구조를 지킬 필요 없이 변수이름만 적어주면 된다!

예를 들어

const name = 'jiyun';
const address = 'Seoul';
const me= {name, address};
console.log(me);
// result : {name : 'jiyun', address : 'Seoul'}

또 하나의 예시를 보면,

const name = 'jiyun';
const address = 'Seoul';
// 단축 속성명을 사용하지 않은 경우
console.log('name', name, ', address', address);
// 'name' 'jiyun' ', address' 'Seoul'

// 단축 속성명을 사용한 경우
console.log({name, address});
// {name: 'jiyun' , address: 'Seoul'}

✓ 즉, 객체의 변수명과 키값이 같을 경우 객체 단축 속성명을 활용해 합쳐줄 수 있다.
(종택님 말씀)

이걸 뭐라고 하나요? ✎ 비구조화할당 (destructuring)

비구조화할당은 WeStagram Project에서 배웠으니 여기로

이걸 뭐라고 하나요? ✎ 계산된속성명 (computed property names)

객체의 속성명(Property)을 동적으로 (계산하여) 넣어줄 수 있다는 것!

const number = [1, 2, 3, 4, 5];
const obj = {};

number.forEach((item)=>{
  obj['Key' + item] = item;
})
console.log(obj);
// result : { Key1: 1, Key2: 2, Key3: 3, Key4: 4, Key5: 5 }

다음 프로젝트에서는 ✎ API ⇢ config.js

API주소 관리가 용이하도록 config.js에서 변수명에 담아 export 하여 쓰도록 하자.

다음 프로젝트에서는 ✎ json의 데이터 타입 ?

json의 데이터타입으로는 다음이 올 수 있다 : string & number & object (JSON object) & array & boolean & null
모두 가능하다! 굳이 mockdata를 객체 타입으로 맞추려 애쓰지 않아도 된다.
아래와 같은 경우에는 배열로 하는 것이 훨씬 효과적이다! 이것도 종택님 말씀.

다음 프로젝트에서는 ✎ fetch의 위치

ComponentDidMount에서 바로 API를 호출하지 않고 함수에 담아 부르는 이유는
API호출을 한번만 하고 끝내지 않기 때문이지! API를 재사용할 수 있기 때문에 (사실 재사용을 많이 해야 하기 때문에!) 단 한번 실행되는 CDM에서 일회용으로 쓰고 버리는 건 매우매우 비효율적이다

🥳 오예 아름다운 Components 🥳

사실상 거의 없던... 칭찬...😂 준식님이 해주셨다. 정렬된 Components가 아름답다고! 코드리뷰에서 무슨 칭찬을 바라는 걸까 근데 LGTM 받고싶다!!! Looks Good to... You...?
Component 활용 잘 하자. 특히 계속해서 재사용하는 Component는 계속해서 수정된다. 다음 프로젝트에서는 더 잘 해보도록 하자!