Today 요약

1. 코테 문제 풀기
2. 클론코딩 강의 듣기

---

1. What I did?

1.1 코테 문제 풀기

오늘의 문제는 가까운 수 찾기 문제였다. 문제는 아래와 같다.

정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요.

입출력 예

array	n	result
[3, 10, 28]	20	28
[10, 11, 12]	13	12

일단 생각해봤던 건 n과 배열의 각 요소들의 차이의 절대값을 구하면 될 것 같다고 생각해서 구글링해서 찾아낸 Math.abs 메서드를 통해서 절대값을 가지고 있는 배열을 하나 생성한 다음, 그 배열의 인덱스를 가지고 기존 배열의 값을 찾아내는 방식을 생각했다. 하지만 테스트 코드 중에 하나를 통과하지 못했고, 그 이유는 가장 가까운 수가 여러 개일 경우 더 작은 수를 return 해야 하는 데 이 부분에 대한 코드를 작성하지 않아서였다. 그래서 결국 그 부분을 해결 최종 코드가 아래와 같다.

function solution(array, n) {
  const absArray = [...array].map((item) => Math.abs(item - n))

  const minDiff = Math.min(...absArray)
  const closestNumbers = array.filter(
    (item, index) => absArray[index] === minDiff
  )

  return Math.min(...closestNumbers)
}

절대값이 같은 배열을 closestNumbers로 만들고 그 중에서 가장 작은 값을 가져올 수 있도록 했다.

그리고 다른 사람의 풀이도 확인해보았다. 역시나 너무 깔끔한 풀이가 많았다. 그 중에 하나를 기록하면서 이해해보자.

function solution(array, n) {
  array.sort((a, b) => Math.abs(n - a) - Math.abs(n - b) || a - b)

  return array[0]
}

이 코드는 너무나 깔끔하다. 절대값을 정렬해서 가장 앞에 있는 값을 가지고 오면 그게 가장 작은 값일테니까 말이다.. 그리고 만약 절대적인 거리가 동일하다면 || a - b를 통해서 가장 작은 값을 앞으로 정렬할 수 있도록 해놓았다.

2. What I Learned?

2.1 디즈니 클론 코딩하기

오늘은 강의 중에 디즈니 플러스 웹 사이트를 클론 하는 강의가 있어서 앞으로 프로젝트 진행할 때 어떤 사이트를 클론할 지 모르겠지만, 프로젝트 구조나 useState로 상태관리하던 프로젝트를 리덕스로 마이그레이션 할 때 어떻게 진행하는 지 등을 참고하기 위해서 오늘 조금씩 강의를 보고 시도해보고 있다. 일단 HTML이나 CSS 부분은 간단하게 이해하고 넘어가고 대부분 자료로 제공되어 있는 코드를 그대로 사용했다. 그러면서 컴포넌트나 파일 그대로 무조건 가져다가 사용하지는 않고 강의의 흐름을 따라가면서 기능단위나 컴포넌트 단위로 커밋을 분할해서 남겨가면서 프로젝트를 이해하고 있다.

지금 강의는 라우팅을 먼저 구현하지 않고 일단 메인 페이지부터 구현한다. 그리고 모달 구현하고 로그인 페이지를 구현하면서 라우팅을 구현한다.

이번에 1차 프로젝트 들어가면 라우팅부터 구현할 생각인데 무엇을 먼저하든 상관은 없다고 생각하지만, 프론트 개발자 5명이서 협업하면서 프로젝트 하나를 구현한다면 라우팅을 잘 나눠놓고 페이지마다 할 일을 부여하는 게 더욱 효율적이라는 생각이 든다. 그리고 변수들을 상, 하위 컴포넌트에서 사용하기 위해서 prop으로 전달해야 한다거나 context를 선언해서 관리하는 등으로 관리하는 것보다는 리덕스로 store하나 생성해서 필요할 때마다 reducer 선언해서 하는 게 더 효율적이라는 생각도 있기 때문에 해당 강의를 선택했다. 일단 리덕스를 사용하기 힘들다는 판단이라면 context나 prop으로 전달해서 사용해야 할 것이다.

이번 강의에서 새롭게 알게된 부분

styled-components에서 컴포넌트에 prop으로 상태변수 전달해서 동적으로 스타일링 하는 부분에서 강의랑 똑같이 진행했다가 에러가 발생해서 찾아봤더니 HTML의 컴포넌트의 prop으로 전달하는 것과 styled-components의 컴포넌트의 prop으로 전달하는 부분이 헷갈릴 수 있어 Error를 발생시키는 부분이라.. $ 표시를 통해 차이점을 두고 해결할 수 있었던 부분이다.

import { useEffect, useState } from 'react'
import styled from 'styled-components'

const Nav = () => {
  const [show, setShow] = useState(false)

 ...

  return (
    <NavWrapper $show={show}>
      <Logo>
        <img
          src="/images/logo.svg"
          alt="Disney Plus logo"
          onClick={() => (window.location.href = '/')}
        />
      </Logo>
    </NavWrapper>
  )
}

export default Nav

const NavWrapper = styled.nav`
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 70px;
  background-color: ${(props) => (props.$show ? '#090b13' : 'transparent')};
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36px;
  letter-spacing: 16px;
  z-index: 3;
`

useState로 상태 관리하는 show라는 변수를 선언하고 NavWrapper 컴포넌트에 show를 prop으로 전달할 때 $show로 전달시킨다음 사용하는 곳에서도 그와 같이 사용한다.

${(props) => (props.$show ? '#090b13' : 'transparent')};

그리고 보통 오픈 api에서 image 파일을 받아올 때는 기존에 요청하던 baseURL이 아니라 다른 방식으로 요청하는 경우가 많은 것 같다. news api에서도 그랬고, TMDB의 api에서도 image를 가지고 올 때

backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`,

이런식으로 https://image 로 시작하는 부분이 항상 들어가는 것 같다.