강의의 오류라고 할 수 있는데, 네브 바에서 인풋 창에 영화 검색을 하면 search 페이지로 넘어가는데 (한 글자를 치면 바로 넘어간다.)

문제 1. 인풋 창 포커스가 사라진다. 문제 2. 처음 쳤던 글자가 인풋 창에 뜨지 않고 url에는 남으나, 다시 인풋 창을 클릭한 후 뒤이어 다른 글자를 치면 url에도 남지 않게 된다.

문제점을 살펴보면, 문제 2. 네브 바의 인풋 창에 입력한 데이터가 (이 때 페이지는 메인 페이지) search 페이지로 전달되지 못하는 것이다. 문제 1. 페이지가 넘어가면서 페이지가 다시 랜더 되며 인풋 창에 포커스가 되지 않는 것이다. 이것도 이전 페이지에서 데이터와 함께 인풋 창이 포커스 되어 있음이 전달되지 않은 것이다.

우선 인풋 창에 onChange에 들어갈 함수로 handleChange가 있는데, navigate(const navigate = useNavigate();) 의 두 번째 인자로 props, 함수, state 등 데이터를 전달할 수 있음을 알게 되었다. state를 통해 value를 전달할 수 있게 코드를 짰다.

그리고 useLocation을 사용하여 state를 담는 변수를 하나 만들고

인풋 창에 영화를 검색한 후 console에 location을 찍어보면,

이렇게 value가 담아져 있는 것을 볼 수 있다.

이제 메인 페이지의 네브 바에서 search 페이지로 입력한 글자를 넘겨주기 위해 만들어 둔 searchValue에 담아서 넘겨주고, ==> 문제 2 useRef 함수와 focus() 메서드를 사용하여 인풋 창이 계속 포커스 되게 하면 문제가 해결 된다. ==> 문제 1

useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데 current를 사용하기 위해 inputRef라는 변수에 useRef 함수를 넣어주고 focus() 메서드를 사용하면 페이지가 다시 렌더 되어도 인풋 창은 계속 포커스가 되어 있다. => 문제 1 해결

인풋 창에 입력한 value가 담아있는 location은 useEffect를 사용해 만약 location이 truthy 값이면 searchValue state에 담아주기 위해 다음과 같이 코드를 작성해 준다.

useEffect의 디펜던시로 location(const location = useLocation().state;)을 넣어 location이 변할 때 마다(인풋 창에 입력이 될 때마다) 렌더가 다시 되게 해 주었다. (search 페이지에서 useDebounce라는 훅을 만들어 한 글자 마다 리렌더가 되지 않게 해주었다.) => 문제 2 해결

참고로 useEffect 대신 useLayoutEffect를 사용할 수도 있긴 하다. 둘을 비교하자면, useEffect는 컴포넌트 들이 render와 paint 된 후에 비동기적으로 실행되고, useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint가 동기적으로 실행된다. 즉, useLayoutEffect는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거친다. 따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다는 단점이 있어, 기본적으로는 항상 useEffect 만을 사용하는 것을 권장한다고 한다. 만약 리렌더가 되며 화면이 깜빡거리는 이슈 발생 시 useLayoutEffect를 사용 할 수 있다. (참고: https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5)

Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정

function solution(n) {
    const arr = [];
    let idx = 2;

    while(n !== 1) {
        if(n % idx === 0) {
            arr.push(idx);
            n /= idx;
        } else {
            idx += 1;
        }
    }
    return arr 
    // return Array.from(new Set(arr)) 중복 제거
}

x = true;
console.log(+x); // 1

y = false;
console.log(+y); // 0

• 딥다이브 77쪽 참고

• 위와 같은 문제(프로그래머스 - 두 수의 나눗셈)에서 Math.floor() 를 사용하여 답을 아래와 같이 작성하였다.

  const solution = (num1, num2) => Math.floor(num1 / num2 * 1000)

• Math.floor() 대신 Math.trunc() 메서드를 사용하여 다음과 같이 답을 작성할 수도 있다.

const solution = (num1, num2) => Math.trunc(num1 / num2 * 1000)

• 일반 메서드, 프로토타입 메서드는 기본적으로 인스턴스에서 사용하는 메서드
• static 키워드가 붙어있는 정적 메서드는 인스턴스에서는 사용할 수 없고, class 자체에서 사용해야한다

• 정적 메서드 사용 예시

  class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
  static isUser(user) {
    if (user.firstName && user.lastName) {
      return true
  }
    return false
  }
  

const lisa = new User('Lisa', 'Oh'); const ju = new User('Ju', 'Oh'); const kevin = { name: 'Kevin Kim', age: 56 }

console.log(User.isUser(lisa)); // true console.log(User.isUser(ju)); // true console.log(User.isUser(kevin)); // false ```

• 예시

  class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
    this.fullName = `${first} ${last}`
  }
  }
  

const lisa = new User('Lisa', 'Oh');

console.log(lisa); // ‣ User {firstName: 'Lisa', lastName:'Oh', fullName:'Lisa Oh'}

lisa.firstName = 'Ju';

console.log(lisa); // ‣ User {firstName: 'Ju', lastName:'Oh', fullName:'Lisa Oh'}

// constructor에 fullName은 firstName과 lastName의 조합으로 만들어져야 하는데, // new 라는 키워드를 통해 생성자 함수로 class를 호출할 때 최초로만 만들어지고 // 그 이후에 firstName과 lastName이 바뀌더라도 변화가 없는 상태가 되어져버린다 // 이것을 해결하기 위해 아래와 같이 하나의 매서드로 만들어서 코드 변경

class User { constructor(first, last) { this.firstName = first this.lastName = last } getFullName() { return ${this.firstName} ${this.lastName} } }

const lisa = new User('Lisa', 'Oh');

console.log(lisa.getFullName()); // Lisa Oh

lisa.firstName = 'Ju';

console.log(lisa.getFullName()); // Ju Oh

// 위 방식의 문제는 getFullName을 계속 호출해 주어야 한다는 것 // 그래서 Getter(값을 얻어내는 용도의 매서드) 사용

* getter와 setter 사용
```js
class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  get fullName() { // get, 메서드에 붙여서 사용 fullName이 getter
    return `${this.firstName} ${this.lastName}`
  }
  set fullName(value) { // fullName이라는 setter는 fullName이라는 속성에 값을 지정할 때 동작하는 메서드
    console.log(value);
    [this.firstName, this.lastName] = value.split(' ');
  }
}

const lisa = new User('Lisa', 'Oh');

console.log(lisa.fullName); // Lisa Oh

lisa.firstName = 'Ju';

console.log(lisa.fullName); // Ju Oh

lisa.fullName = 'Ju Park' // 데이터를 할당하게 되면 setter의 메서드 실행
console.log(lisa); // ‣ User {firstName: 'Ju', lastName: 'Park'}

function User(first, last) {
  this.firstName = first
  this.lastName = last
}

User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

const ju = new User('Ju', 'Oh');
const lisa = new User('Lisa', 'Oh');

console.log(ju); // ‣ User {firstName: 'Ju', lastName: 'Oh'}
console.log(lisa); // ‣ User {firstName: 'Lisa', lastName: 'Oh'}

// console에서 prototype 열어보면 getFullName이라는 함수가 들어가 있다.
// 이 함수는 User라는 함수의 prototype으로 등록이 된 메소드이고, (내부에 내장이 됨)
// User라는 생성자 함수에서 반환 된 인스턴스 객체(ju, lisa)에서는
//  언제든지 prototype에 등록이 되어 있는 메소드를 쓸 수 있다.

console.log(ju.getFullName()); // Ju Oh
console.log(lisa.getFullName()); // Lisa Oh

• 일반 함수 예제1

  function user() {
  this.firstName = 'Lisa'
  this.lastName = 'Oh'
  
  return {
    firstName: 'Ju',
    lastName: 'Oh',
    age: 93,
    getFullName: function () {
      return `${this.firstName} ${this.lastName}`
    }
  }
  }
  

const u = user();

console.log(u.getFullName()); // Ju Oh

* 일반 함수 예제2
```js
function user() {
  this.firstName = 'Lisa'
  this.lastName = 'Oh'

  return {
    firstName: 'Ju',
    lastName: 'Oh',
    age: 93,
    getFullName () { // 축약형으로 쓸 수 있다
      return `${this.firstName} ${this.lastName}`
    }
  }
}

const kevin = {
  fistName: 'Kevin',
  lastName: 'Kim'
}

const u = user();

console.log(u.getFullName); // Ju Oh
console.log(u.getFullName.call(kevin)); // Kevin Kim

• 일반 함수 예제3

  const timer = {
  title: 'TIMER!',
  timeout() { // 축약형으로 작성
    console.log(this.title); // TIMER!
    setTimeout(function () {
      console.log(this.title) // undefined
    }, 1000)
  }
  }
  timer.timeout();

• 화살표 함수 예제1

  function user() {
  this.firstName = 'Lisa'
  this.lastName = 'Oh'
  
  return {
    firstName: 'Ju',
    lastName: 'Oh',
    age: 93,
    getFullName: () => {
      return `${this.firstName} ${this.lastName}`
    }
  }
  }
  

const u = user();

console.log(u.getFullName()); // Lisa Oh

* 화살표 함수 예제2
```js
const timer = {
  title: 'TIMER!',
  timeout() { // 축약형으로 작성
    console.log(this.title); // TIMER!
    setTimeout(() => { // 화살표 함수 적합. timeout 함수에서 this 찾음
      console.log(this.title); // (1초 뒤에) TIMER!
    }, 1000);
  }
}
timer.timeout();

const userA = { name: 'A', parent: null }
const userB = { name: 'B', parent: userA }
const userC = { name: 'C', parent: userB }
const userD = { name: 'D', parent: userC }

const getRootUser = user => {
  if (user.parent) {
    return getRootUser(user.parent)
  }
  return user
}

console.log(getRootUser(userD)); // {name: 'A', parent: null}
console.log(getRootUser(userC)); // {name: 'A', parent: null}
console.log(getRootUser(userB)); // {name: 'A', parent: null}
console.log(getRootUser(userA)); // {name: 'A', parent: null}

const a = callback => {
callback();
console.log('A');
}
const b = () => {
console.log('B');
}

a(b); // a 함수가 호출될 때 b 라는 함수 데이터가 인수로 들어가게 되고, 이 때 b를 콜백함수라고 부른다.

// console에는 B 그리고 A가 찍힌다.

* 예제 2
```js
const sum = (a, b, c) => {
  setTimeout(() => {
    c(a + b)
  }, 1000)
}

sum (1, 2, value => {
  console.log(value); // 3
})

sum (3, 7, value => {
  console.log(value); // 10
})

• 예제 3 이미지 로딩 되는 시간

((a,b) => {
  console.log(a.innerWidth);
  console.log(b.body);
})(window, document); // 333 body

let n = 0;

while (n) {
  console.log(n); //
}
// 조건이 거짓이므로(n = 0) 아무 것도 실행하지 않는다.

do {
  console.log(n); // 0
} while (n)
// do 중괄호 부분의 코드를 먼저 실행한다.
// 이후에 while 안의 조건으로 갔을 때 0(falsy)이므로 do 부분의 중괄호를 다시 실행하지 않는다.
// 조건이 거짓이어도 최초 한 번은 실행한다.

do {
  console.log(n); // 0 1 2 3
  n++
} while (n < 4)

• 일반적인 반복은 while 문을 사용하면 되고, 조건에 상관 없이 최초 한 번 코드 실행이 필요하면 do while 문을 사용하면 된다.

• for 반복문은 배열 혹은 객체 데이터를 다루는데 특화 되어 있고, 그 외의 경우에는 취향에 따라 사용하면 된다.

for (let i = 9; i > -1; i--) {
  if (i % 2 === 0) {
    continue // 현재 반복을 종료하고 다음 반복으로 넘어간다.
  }
  console.log(i); // 9 7 5 3 1
}

for of 반복문

for (const 변수 of 반복하고자 하는 "배열" 데이터) {
  // 실행될 코드
} 

• 예제

  const fruits = ['Apple', 'Banana', 'Cherry']
  

for (const fruit of fruits) { console.log(fruit) // Apple Banana Cherry }

* 예제2
```js
const users = [
  {
    name: 'Ju',
    age: 22
  },
  {
    name: 'Neo',
    age: 45
  },
  {
    name: 'Lisa',
    age: 56
  }
]

for (let i = 0; i <users.length; i++) {
  console.log(users[i]); // {name: 'Ju', age: 22} {name: 'Neo', age: 45} {name: 'Lisa', age: 56}
  console.log(users[i].name); // Ju Neo Lisa
}

for (const user of users) {
  console.log(user); // {name: 'Ju', age: 22} {name: 'Neo', age: 45} {name: 'Lisa', age: 56}
  console.log(user.name); // Ju Neo Lisa
}

for in 문

for (const key in "객체" 데이터) {
  // 실행 될 코드
}

const user = {
  name: 'Lisa',
  age: 56,
  inValid: true,
  email: 'juuh.yung5@gmail.com'
}


for (const key in user) {
  console.log(key); // name age isValid email
  console.log(user[key]); // Lisa 56 true juuh.yung5@gmail.com
}

console.log(user.name); // Lisa
console.log(user.age); //56
console.log(user['name']); // Lisa
// 대괄호 표기법의 장점은 대괄호 사이에 문자 데이터로 속성이 들어갈 수 있다.

// 객체 데이터는 속성이 순서를 갖지 않는다. 객체 데이터가 가지고 있는 속성 만큼 갯수만 반복이 된다.

• 예제

  function price(fruit) {
  let p
  switch (fruit) {
    case 'Apple':
      p = 1000
      break
    case 'Banana':
      p = 1500
      break
    case 'Cherry':
      p = 2000
      break
    default:
      p = 0
  }
  
  return p
  }
  

console.log(price('Apple')); // 1000 console.log(price('Banana')); // 1500 console.log(price('Cherry')); // 2000 console.log(price('Hello')); // 0

* 예제2 - break 삭제
```js
function price(fruit) {
  switch (fruit) {
    case 'Apple':
      return 1000
    case 'Banana':
      return 1500
    case 'Cherry':
      return 2000
    default:
      return 0
  }
}

console.log(price('Apple')); // 1000
console.log(price('Banana')); // 1500
console.log(price('Cherry')); // 2000
console.log(price('Hello')); // 0

제주항공을 모티브로 비행 티켓 예약 가능이 가능한 항공사 사이트를 구현 해보았다.

1. 프로젝트 개요

1-1. 개발 인원 및 기간

• 개발 인원: 프론트엔드 3명, 백엔드 2명

  • 프론트엔드

    • 오주형: 예약 페이지(시간 및 가격 선택), 예약 정보 기입 페이지 및 예약 확인 페이지
    • 남연우: 카카오톡 간편로그인, 회원가입, spinner 및 토스를 이용한 간편결제
    • 천정환: 메인 페이지 (목적지 및 날짜선택), Nav, Footer

  • 백엔드

    • 이영서: DB 모델링, 소셜 로그인 및 회원가입API, 주문 내역 저장 및 조회 API, 결제정보 저장 API (토스), 티켓 정보 email 발송
    • 지송현: DB 모델링, DB생성, 항공권 조회 API (필터 및 분류), 결제정보 저장 API (토스)

• 개발 기간: 2022.11.28 ~ 2022.12.09

1-2. 제공하는 서비스

• 카카오톡 이용한 소셜 회원가입 및 로그인
• 날짜, 목적지 및 시간(가격) 선택하여 항공권 구매
• 토스 이용한 간편 결제

1-3. 사용하는 기술 스택

2. 팀원들과 협업

2-1. 협업 방법

• Notion과 Trello를 사용하여 scrum, sprint 진행
• GitBook과 Postman을 활용하여 API 및 mockdata형식 공유

3. 구현 사항

3-1. 소셜 회원가입 및 로그인

• 카카오API 사용하여 카카오 간편 로그인 구현.
• 회원가입 시 입력한 유저 정보는 access token에 저장 (뒤에 예약 확인 페이지에서 불러오게 된다.)

3-2. 메인 페이지

• slick-carousel 라이브러리 사용하여 슬라이드 구현

3-3. 예약 도시 및 날짜 선택

• datePicker 라이브러리 이용하여 항공권 예약할 날짜 선택 모달 창 구현

3-4. 비행편 선택

• 이전 페이지인 메인페이지에서 선택한 도시와 날짜 정보가 넘어와서 예약 페이지 상단의 날짜들과 날짜에 따라 달라지는 비행편들이 보여진다.
• fetch를 두 번 사용하는데, 첫 번째 fetch는 출발 날짜, 출발지 id 값, 도착지 id 값을 useSearchParams()를 통해 받아온다. 이 때 method(fetch의 두 번째 매개변수) 두 번째 fetch는 이 페이지(예약 페이지)에서 선택한 정보들을 다음 페이지인 booking-details 즉, 예약 확인 페이지로 정보를 넘기기 위해 사용한다. 두 번째 fetch에는 데이터를 담아 다음 페이지로 넘겨주어야 하기 때문에 useNavigate를 변수 navigate에 담고, navigate의 두 번째 매개변수로 데이터(여기서는 state들)를 담아준다. (물론 첫 번째 매개변수에는 이동할 페이지의 path를 적어준다.) 그래서 다음과 같은 코드가 완성된다. navigate('/booking-details', { state: { arrivalSeat, departureSeat } })

3-5. 예약자 정보 기입

• 이 페이지를 만들면서 정규표현식에 대해 조금 더 자세히 알게 되었다. 우선 fetch를 통해 accessToken에 저장되어 있는 user info(회원가입 시 저장 됨)를 받고, 받은 user info 중 핸드폰 번호와 생년월일을 replace() 메서드와 정규표현식을 사용하여 하이픈을 넣을 수 있게 코드를 짜보았다. 다음과 같은 코드가 만들어진다. (useEffect 안에 함수를 넣어야 하나, getUserInfo 함수가 길어졌기에 아래와 같이 useEffect 안에 함수를 넣어준다.)

  const getUserInfo = () => {
    fetch('http://10.58.52.240:3000/booking-details', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        authorization: localStorage.getItem('accessToken'),
      },
    })
      .then(response => response.json())
      .then(data =>
        setUserInfo({
          ...data,
          phoneNumber: data.phoneNumber
            .replace(/\D/g, '')
            .replace(
              /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,
              '$1-$2-$3'
            ),
          birth: data.birth.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'),
        })
      );
  };
  
  useEffect(() => {
    getUserInfo();
  }, []);

• 다음 페이지인 예약 확인 페이지로 가기 위해서 역시 useNavigate()를 사용하였고, 두 번째 매개 변수로 아래와 같은 state를 담아 onClick 이벤트를 발생시켜서 다음 페이지로 넘겨주었다.

  <NextBtn
   onClick={() =>
     navigate('/Booking-confirm', {
       state: { ...location.state, userInfo },
     })
   }
  >
   다음
  </NextBtn>

• 객체 디스트럭처링 할당도 사용하였다. userInfo라는 state를 만들고, 초기값은 모두 "" 빈값으로 설정한다. userInfo 중 gender만 제외하고 userInfo에 디스트럭처링 할당을 해 주고,

3-6. 예약 확인

*

3-7. 항공권 토스 간편 결제

• 토스 API 이용하여 간편 결제 구현

3-8. 항공권 메일 발송

• 백엔드 단에서 추가적으로 만든 페이지

4. 프로젝트 회고

• 지난 프로젝트에서 아쉬웠던 부분이었던 백엔드 단과의 소통이 이번 프로젝트에서는 원활하게 이루어졌다.

삼성물산 패션부문의 통합 온라인몰 SSF샵을 모티브로 의류 소개 사이트를 구현 해보았다.

1. 프로젝트 개요

1-1. 개발 인원 및 기간

• 개발 인원: 프론트엔드 4명, 백엔드 2명

  • 프론트엔드

    • 오주형: 회원가입, 로그인 및 장바구니 페이지
    • 구수정: 상품 리스트 페이지
    • 박문영: 상품 상세 페이지
    • 정효원: navbar, footer 및 메인 페이지

  • 백엔드

    • 이영서: DB 모델링, 로그인•회원가입•상품 리스트 조회•상품 조회 API
    • 박상욱: DB 모델링, 장바구니 API

• 개발 기간: 2022.11.14 ~ 2022.11.25

  1-2. 제공하는 서비스

• 회원가입 및 로그인
• 위코드 멘토님들 및 동기분들의 의류소개
• 카테고리 별 브랜드 검색 및 필터링
• 장바구니

  1-3. 사용하는 기술 스택

  

2. 팀원들과 협업

2-1. 협업 방법

• Notion과 Trello를 사용하여 scrum, sprint 진행
• GitBook과 Postman을 활용하여 API 및 mockdata형식 공유

2-2. 협업 tools 및 개발 규칙

• 위키 참조

3. 구현 사항

3-1. 회원가입 및 로그인

• 회원가입 시 아이디와 비밀번호, 그리고 비밀번호 확인에 조건을 걸어 놓았다. 조건에 충족 시 조건이 쓰여있는 글자들 색이 변한다.
• 회원가입 약관에 동의할 때 체크박스가 필요했다. 한번에 모두 체크가 될 수 있는 전체 체크도 가능해야하며, 개별 체크도 가능해야 했고, 또 개별 체크로 약관에 모두 동의하면 전체 체크도 체크 되어야했다. 체크 되어야할 항목들인 checkList state는 객체이기 때문에 (key가 아닌) value들만 배열로 만들어주기 위해 onCheckedAll 함수에 valueArr 변수를 만들어Object.values(checkList)를 사용하였다. 그리고 배열로 만들어진 체크 리스트들에 Array.prototype.every() 메서드를 사용하였다. every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하며 Boolean 값을 반환한다. 결론적으로 아래와 같은 코드가 완성되었다. const valueArr = Object.values(checkList).every(el => el === true);
• 로그인 시 fetch 메서드를 사용하여 데이터를 전달하고 localStorage에 토큰을 저장했다.

3-2. 장바구니

• 백엔드와 통신 전, 활용할 목데이터를 만들어 장바구니 페이지를 구현해보았다.
• Cart 컴포넌트에 CartFilled 컴포넌트와 CartEmpty 컴포넌트를 삼항연산자로 넣어 장바구니 페이지를 구현했다.
• 체크박스에 체크 된 리스트에 대해서 filter 메서드와 reduce 메서드를 사용하여 상품 총 가격을 만들어낼 수 있었다.
• 장바구니에 들어온 상품 리스트들에 대해 개별 삭제는 가능하나 체크박스에 체크된 리스트들에 대한 선택 삭제는 구현하지 못했다.

4. 프로젝트 회고

• 개발자로 첫 프로젝트를 진행해보았다. 동료들에게 배울 점이 매우 많았다. 특히 Trello, Notion 등의 툴을 가지고 2번의 planning meeting, 2주간 매일 진행했던 Daily Standup Meeting, 2번의 Retrospective Meeting을 하면서 계획 세우는 것을 두려워?했던 내가 점점 변하는 것을 느꼈다. 계획의 중요성을 알게 되며 방향을 잡고 나가는 것이 얼마나 중요한 것인지를 알 수 있게 되었다. 팀원 중 두 명이 특히 우리 팀을 이끌어주었는데, 그들이 없을 2차 프로젝트에서는 내가 배웠던 것 만큼 툴 사용과 계획적인 미팅들로 원만한 프로젝트가 진행 될 수 있도록 노력해야겠다고 생각했다.

• 아쉬웠던 것은 내가 맡은 페이지를 담당했던 백엔드분과의 소통이 잘 이루어지지 않았다는 점이다. 그분이 피치 못할 사정으로 재택근무를 하시게 되어서 더 그런 문제가 발생한 것 같은데, 개발자에게 재택 근무란 익숙하고 유연하게 대처해야할 일이라고 생각한다. 백엔드 쪽에서의 일이 어떻게 돌아가는지 대략적으로 알 수 있었으며, 내가 요구해야할 것은 제대로 분명하게 요구해야함에 대해 배울 수 있었다.

component가 없어질 때도 콘솔에 찍히게 하는 코드! useEffect에 return을 해준다. 이것을 CleanUp function이라 부른다. 그냥 function인데, component가 destroy될 때 뭔가 할 수 있도록 해준다. return 값으로 component가 언제 create 되었는지, 언제 destroy 되었는지 알 수 있다.

두 개의 function을 만들고 hiFn에서 byeFn을 return 해준다. useEffect는 function을 받고, 이 function은 dependency가 변화할 때 호출 된다. 이 경우 dependency가 비어있으니까 component가 처음 생성될 때 function이 호출된 후에 다시는 호출되지 않게 된다. component가 파괴될 때도 function을 실행하고 싶으면 hiFn이 byeFn을 return 해야한다.

useEffect는 우리가 코드를 언제 실행할지에 대한 선택권을 준다! 우리는 시작할 때만 code를 실행하게 할 수 있고, 무언가 변화할 때 code가 실행되도록 할 수 있으며, component가 파괴될 때 code를 실행할 수 있게 할 수 있다. (-> 별로 필요 없다.)

1번을 3번까지 늘리게 하려면? ⬇️

/*1부터 4까지*/
.item:nth-child(1) {
    grid-column: 1/4

4를 7까지 늘리려면? ⬇️

.item:nth-child(4) {
    grid-row: 2/4;

왼쪽으로 배치되었다. 오른쪽으로 가게 하려면? 4의 column 위치를 조정하면 된다.

.item:nth-child(4) {
    grid-column: 3;
    grid-row: 2/4;

4번은 그대로 있고 9번을 위로 올린다면?

.item:nth-child(9) {
    grid-colum: 3; 
    grid-row: 3/5;

(투명한 노란색과 붉은색이 합쳐져서 주황색이 됨!)