오늘한것

프로그래머스 코테입문 Day 18

직사각형 넓이 구하기

문제 설명
2차원 좌표 평면에 변이 축과 평행한 직사각형이 있습니다. 직사각형 네 꼭짓점의 좌표 [[x1, y1], [x2, y2], [x3, y3], [x4, y4]]가 담겨있는 배열 dots가 매개변수로 주어질 때, 직사각형의 넓이를 return 하도록 solution 함수를 완성해보세요.

function solution(dots) {
    const w = Math.max(...dots.map(a => a[0])) - Math.min(...dots.map(a => a[0]))
    const h = Math.max(...dots.map(a => a[1])) - Math.min(...dots.map(a => a[1]))
    return w * h
}

// 다른 사람의 풀이
function solution(dots) {
    let x = [],
        y = [];

    for (let pos of dots) {
        x.push(pos[0]);
        y.push(pos[1]);
    }

    return (Math.max(...x) - Math.min(...x)) * (Math.max(...y) - Math.min(...y))
}

캐릭터의 좌표

문제 설명
머쓱이는 RPG게임을 하고 있습니다. 게임에는 up, down, left, right 방향키가 있으며 각 키를 누르면 위, 아래, 왼쪽, 오른쪽으로 한 칸씩 이동합니다. 예를 들어 [0,0]에서 up을 누른다면 캐릭터의 좌표는 [0, 1], down을 누른다면 [0, -1], left를 누른다면 [-1, 0], right를 누른다면 [1, 0]입니다. 머쓱이가 입력한 방향키의 배열 keyinput와 맵의 크기 board이 매개변수로 주어집니다. 캐릭터는 항상 [0,0]에서 시작할 때 키 입력이 모두 끝난 뒤에 캐릭터의 좌표 [x, y]를 return하도록 solution 함수를 완성해주세요.
- [0, 0]은 board의 정 중앙에 위치합니다. 예를 들어 board의 가로 크기가 9라면 캐릭터는 왼쪽으로 최대 [-4, 0]까지 오른쪽으로 최대 [4, 0]까지 이동할 수 있습니다.

function solution(keyinput, board) {
    let [x, y] = [0, 0];
    let [a, b] = [board[0]/2, board[1]/2]
    keyinput.forEach(key => {
       if(key === 'up' && y+1 <= b) y+=1
       if(key === 'down' && y-1 >= -b) y-=1
       if(key === 'left' && x-1 >= -a) x-=1
       if(key === 'right' && x+1 <= a) x+=1  
    })
    return [x, y]
}

최댓값 만들기 (2)

문제 설명
정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요.

function solution(numbers) {
    // 최대 값이 음수가 될 경우도 생각.
    // 입력값 > [-2, 2]
    // 기대값 > -4
    if(numbers.length === 2) return numbers[0] * numbers[1]
    const mNums = [...numbers].filter(n => n < 0).sort((a, b) => a - b);
    const pNums = [...numbers].filter(n => n > 0).sort((a, b) => b - a);
    const pNumMul = pNums.length > 1 ? pNums[0]*pNums[1] : 0
    const mNumMul = mNums.length > 1 ? mNums[0]*mNums[1] : 0
    return Math.max(pNumMul, mNumMul);
}

다항식 더하기

문제 설명
한 개 이상의 항의 합으로 이루어진 식을 다항식이라고 합니다. 다항식을 계산할 때는 동류항끼리 계산해 정리합니다. 덧셈으로 이루어진 다항식 polynomial이 매개변수로 주어질 때, 동류항끼리 더한 결괏값을 문자열로 return 하도록 solution 함수를 완성해보세요. 같은 식이라면 가장 짧은 수식을 return 합니다.

function solution(polynomial) {
  const arr = polynomial.split(" + ");
  let xNum = 0;
  let num = 0;
  arr.forEach((n) => {
    if (n.includes("x")) {
      const strVal = n.replace("x", "") || "1";
      xNum += parseInt(strVal, 10);
    } else {
      num += parseInt(n);
    }
  });
  let answer = [];
  if (xNum) answer.push(`${xNum === 1 ? "" : xNum}x`);
  if (num) answer.push(num);
  return answer.join(" + ");
}

// 다른 사람의 풀이
function solution(polynomial) {
    const arr = polynomial.split(" + ");
    const xNum = arr
                .filter(n => n.includes("x"))
                .map(n => n.replace('x', '') || '1')
                .reduce((acc, cur) => acc + parseInt(cur, 10), 0);
    const num = arr
                .filter(n => !isNaN(n))
                .reduce((acc, cur) => acc + parseInt(cur, 10), 0);

    let answer = [];
    if(xNum) answer.push(`${xNum === 1 ? "" : xNum}x`);
    if(num) answer.push(num);

    return answer.join(" + ");
}

다항식 더하기는 5,6,7 테스트 코드?를 계속 통과하지 못해서 다른 블로그를 참고했다. 다시 풀어봐야겠다..!

---

일정관리앱 리팩토링

프로젝트를 리팩토링하려는데 무엇을 고치고 기능을 추가하면 좋을까 생각하느라 힘들었다. 그래도 내가 작년에 리덕스 연습하면서 열심히 만든 프로젝트 중에 하나였고, 아직도 뭘 해야 할지 모르겠지만 뭐라도 해야 살 것 같고 조금씩 코딩하면서 성취감을 얻기 위해 작은 부분부터 시작했다.

날씨 정보를 보여주는 컴포넌트에서 api에서 아직 데이터가 오지 않아 undefined 일 때 화면에 그대로 뜨는 걸 딱히 중요하지 않다 생각해서 방치했는데 정말 금방 해결할 문제를 왜 놥뒀는지 모르겠다.. 더 좋은 방법이 있는지 생각해 봐야겠다.

export default function Weather() {
  const [weatherData] = useWeather();

  return (
	...
        {weatherData ? (
          <>
            <div>
              <p className="text-sm tablet:text-lg font-bold">
                {weatherData.name !== '' &&
                  `${weatherData.name}, ${weatherData.sys.country}`}
              </p>
              <p className="text-sm tablet:text-lg font-bold">{`${weatherData.main.temp.toFixed()}℃`}</p>
              <p className="text-xs tablet:text-sm opacity-60">
                {weatherData.weather[0].description}
              </p>
            </div>
            <img
              className="w-16 tablet:w-32 tablet:ml-3"
              alt={weatherData.weather[0].main}
              src={`http://openweathermap.org/img/wn/${weatherData.weather[0].icon}@4x.png`}
            />
          </>
        ) : (
          <div>날씨 정보를 불러오고 있습니다 🍀</div>
        )}
	...
  );

커스텀훅 분리

지금 보니 api를 불러오는 useEffect 부분이 너무 지저분해서 useWeather이라는 이름의 커스텀 훅으로 분리했다! 에러 처리도 하고 싶었지만 아직 좋은 방법이 떠오르지 않아서 일단 분리해놓기만 했다.

고치기 전

// components/weather/Weather.tsx
const API_KEY = process.env.REACT_APP_OPENWEATHER_API_KEY;

function Weather() {
  const [weatherData, setWeatherData] = useState<WeatherData>();

  useEffect(() => {
    getLocation()
      .then((res): any => {
        const url = `https://api.openweathermap.org/data/2.5/weather?lat=${res.latitude}&lon=${res.longitude}&appid=${API_KEY}&units=metric`;
        fetch(url)
          .then((res) => res.json())
          .then((data) => setWeatherData(data));
      })
      .catch((err) => alert(err));
  }, []);

  return (...)
}

고친 후

// components/weather/Weather.tsx
import useWeather from '../../hooks/useWeather';

function Weather() {
  const [weatherData] = useWeather();

  return (...);
}

/// hooks/useWeather.ts

import { useEffect, useState } from 'react';
import { getLocation } from './getLocation';

export type Weather = {
	...
};

const API_KEY = process.env.REACT_APP_OPENWEATHER_API_KEY as string;

function getApiUrl(latitude: number, longitude: number, apiKey: string) {
  return `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`;
}

export default function useWeather() {
  const [weatherData, setWeatherData] = useState<Weather>();

  useEffect(() => {
    getLocation()
      .then((res): any => {
        const { latitude, longitude } = res;
        const API_URL = getApiUrl(latitude, longitude, API_KEY);

        fetch(API_URL)
          .then((res) => res.json())
          .then((data) => {
            // console.log('data', data);
            setWeatherData(data);
          })
          .catch((err) => {
            // 에러처리
            console.log('err', err);
          });
      })
      .catch((err) => {
        // 에러처리
        console.log('err', err);
      });
  }, []);

  return [weatherData];
}

다이어리 아이템 이모지 기능 추가

먼가 항상 허전하다 생각했는데 나만의 기능이 떠오르지 않았다. 근데 이제 이런 생각은 그만하려고 한다 정식으로 출시하는 것도 아니니까 😂 친구가 다른 어플처럼 기분이 어땠는지 표시해 보면 좋을 것 같다고 말해줘서 바로 적용했다. 어렵진 않았지만 리덕스 코드가 정말 너무 많아가지고.. 하나하나 추가하고 바꾸는 게 조금 귀찮았지만 금방 만들었다!

잘하고 싶고 완벽하게 만들고 싶은 마음이 아직도 심하고 불안해서 그 생각은 그만두고 일단 만들었다. button 태그와 useState를 사용해 만들었는데, title과 content 인풋 값은 useRef로 관리하고 있어서 통합하고 싶었지만.. 기운이 나면 다시 생각해서 수정해야겠다.

---

회고

보통 밤에 우울해서 낮부터 일찍 맘다잡고 공부를 시작하는데 오늘은 낮부터 우울해서 조금 늦게 공부를 시작했다. 프로젝트를 하나 다시 만든다거나 새로운 기술을 배운다거나 더 어려운 기능을 도전해야 하는데 지금은 정말 정신적으로 너무 힘들다. 그래도 내가 조금이라도 코딩을 해야 감을 잃지 않고 공부를 했다는 증거가 쌓이니까 뭐라도 시작하자 해서 가지고 온 프로젝트가 일정관리앱이다.

조금씩 하면서도 내가 지금 이걸 리팩토링하는 게 맞나? 내가 정말 해야 하는 게 뭐지? 정말 중요한 할 일이 뭘까? 정말 온갖 부정적인 생각땜에 힘들었는데, 예전에 멘토님이 내가 즐거움이나 성취감을 느낄 상황을 만들어야 다시 긍정적으로 개발을 할 수 있다고 말해주신 게 기억나 정말 별거 아닌 기능을 만들었고 쓸데없이 시간 낭비하는 거라 생각했지만 꾹 참고 그냥 만들었다. 지금 할 수 있는 게 정말 그것밖에 없었다.

나도 불안감을 에너지화 하고 싶다.