Test Code란?

Test Code는 소프트웨어 개발에서 코드의 정확성, 품질, 안정성을 검증하기 위해 사용되는 코드이다. 이는 주로 단위 테스트, 통합 테스트, 시스템 테스트 등과 관련이 있다.

TDD란?

TDD는 소프트웨어를 개발할 때 테스트 코드를 먼저 작성하고, 그 후에 해당 테스트를 통과시키는 싸이클을 반복하는 개발 방법론입니다.

이 두개에 대한 내 생각

Test Code는 중요하다. 하지만....

Test Code를 작성하면 장점이 많다. 위에서 Test Code에 대한 정의처럼 코드의 정확성, 안정성에 대해 1차적으로 검증을 할 수 있다.

하지만, Test Code를 작성할 때 Test Case에 대해 많은 신경을 쓰게 된다면 의미없는 Test Code를 작성할 수 있으며 이것은 Test Code에 대한 본질적인 의미를 잃어버릴 수 있다. 즉, 주객전도가 일어날 수 있다고 생각한다.

이러한 부분은 경력이 쌓이게 된다면, 크게 신경쓸 필요없이 Test Code를 잘 작성하게 되겠지만 초보자의 입장에서는 어떠한 범위까지 테스트를 진행해야 되는 것인지 잘 몰르기 때문에 의미없는 Test Code를 작성할 확률이 매우 높아진다고 생각한다.

TDD의 현실적인 생각 (프로젝트 경험).

TDD방식으로 프로젝트의 일부 기능을 구현을 했었다. TDD 방식으로 기능구현을 하니 장점보다 단점이 워낙 많아졌다고 느낀 방식이였던 것 같았다.

PRD의 이해

TDD 방식으로 개발을 진행할려면, 모든 케이스에 대해 생각을 해야한다. 그렇다보니 PM이 작성했던 PRD를 100%를 이해한 상태에서 모든 케이스를 생각해야한다. 이것은 쉽지 않은 일이라고 생각한다. 또한 모든 케이스에 대해 생각을 하는 리소스가 많이 들어간다.

실제로, PRD를 보며 Test Case를 작성했지만 실제 로직구현을 했을 때에는 추가적인 Case들이 많아진 경험이 있다.

프로젝트의 기간 및 기획 수정

TDD 방식은 초기에 많은 시간이 오래 걸리게 된다. 이러한 부분을 보았을 때에는 프로젝트의 기간이 짧으면 TDD의 방식은 적합하지 않다고 생각한다. 또한, 기획 수정은 빈번하게 일어나기 때문에 기획 수정이 된다면 기존에 있던 Test Code들은 의미가 없어지게 된다.

테스트 빌드의 시간소요

로직을 작성하며 이 부분이 크게 와닿았던 것 같았다. 로직 작성의 에러를 고치기 위해 디버깅을 하고 Test를 실행하는 시간이 길어서 즉각적인 반응을 얻을 수 없는 것이 불편했었다.

끝으로..

Test 라는 것은 매우 중요하다고 생각한다. 하지만 초보자일수록 크게 해맬 수 있는 부분이고 기능을 구현하는데에 있어서 리소스가 더 많이 들어갈 수있으며 그 리소스가 의미없는 리소스일 수도 있다.

비록 의미없는 테스트를 작성을 할지라도, 이러한 경험들이 나중에 Test Code를 잘 작성하는 것에 큰 도움이 될 것이라고 생각한다.

TDD의 방식은... 아직까지도 잘 모르겠다.

작업 기간: 2023.12.26 ~ 2024.01.29

업주야놀자 Final Project : B2B Self-coupon Admin(Backoffice) 서비스

해당 깃 레포지토리

https://github.com/Upjuyanolja/Upjuyanolja_FE

프로젝트 인원

FE: 6명 / BE: 4명 / PM: 5명 / UXUI: 1명

기술 스택

Environment

GitHub, Git, Eslint

Front-End

React, TypeScript, ReactQuery, Recoil, Ant design, Styled Component, Jest

담당한 기능

• 포인트 충전: 토스페이먼츠를 활용하여 포인트 충전 기능을 구현
• 포인트 내역조회: React Query와 Recoil, 그리고 Query String을 사용하여 포인트 내역을 조회하는 기능을 구현.

겪었던 문제들

모달 렌더링 문제.

export const PointModal = ({
  isModalOpen,
  setIsModalOpen,
}: PointModalProps) => {
  const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
  const paymentMethodsWidgetRef = useRef<ReturnType<
    PaymentWidgetInstance['renderPaymentMethods']
  > | null>(null);  
  const selector = '#payment-widget';
  useEffect(() => {
    (async () => {
      const paymentWidget = await loadPaymentWidget(clientKey, customerKey);

      const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
        selector,
        { value: price, currency: 'KRW', country: 'KR' },
        { variantKey: 'DEFAULT' },
      );

      paymentWidgetRef.current = paymentWidget;
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
    })();
  }, [paymentWidgetRef, price]);

  useEffect(() => {
    const paymentMethodsWidget = paymentMethodsWidgetRef.current;

    if (paymentMethodsWidget == null) {
      return;
    }

    paymentMethodsWidget.updateAmount(price);
  }, [price]);
  // ...

  return (
    ...
    <div id="payment-widget" />
  )

selector에 해당하는 HTML 요소를 확인할 수 없어서, 모든 페이지에 해당 에러 발생.

// Sidebar UserProfile.tsx
<StyledSpace direction="vertical" align="center">
      <TextBox typography="h5" color="primary" fontWeight="bold">
        {userInfoData.name} 님
      </TextBox>
      <TextBox typography="h3" color="black900" fontWeight="bold">
        {numberFormat(pointSummaryData.currentPoint)} P
      </TextBox>
      <StyledButton type="primary" size="large" onClick={showModal}>
        포인트 추가하기
      </StyledButton>
      <PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />  // 상시 렌더링
</StyledSpace>

export const PointModal = ({
  isModalOpen,
  setIsModalOpen,
}: PointModalProps) => {
  console.log('컴포넌트 렌더링');
}

모달 컴포넌트에 들어가져있는 로직이 원래는 모달 컴포넌트가 열린 상태에서 로직실행이 되어야 한다. 하지만,

<PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />

이런식으로 작성하게 되면 모달 컴포넌트가 보여지지않지만 렌더링이 되는 상황이 된다.

{isModalOpen && (<PointModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />)}

isModalOpen이 true인 경우에만 해당 컴포넌트 렌더링하게 작성.

KPT

KEEP 🎯

팀원들과의 정기적인 회의(의사소통). PRD 분석 (요구사항 분석). 컴포넌트의 분리

PROBLEM 🥊

Test Code에 대한 이해 및 작성 요령.

TRY 🚀

React Query와 Recoil로 State 관리. Util 함수 분리.

협업을 하면서 느낀점

다양한 프로젝트를 진행하면서, 한 프로젝트에서는 각자의 역할과 책임을 명확히 분담했지만 팀원들 간의 의사소통이 효과적으로 이뤄지지 않아 프로젝트의 진행이 지연이 되었다.

이러한 경험으로 인해 파이널 프로젝트에서 의사소통이라는 부분에 초점을 두어서 진행을 했었다. 의사소통에서는 투명성과 정기적인 업데이트가 중요하다고 느꼈다. 그래서 팀원들과의 정기적인 회의를 통해 진행 상황과 어려움을 공유하고 피드백을 주고받았다.

이러한 방법을 통해, 프로젝트의 일정에 맞춰서 잘 진행이 되어 큰 문제 없이 프로젝트가 잘 마무리가 되었다. 의사소통이 팀 전체의 성공을 위한 필수적인 요소라는 것을 깨달았다.

작업 기간: 2023.11.20 ~ 2023.11.30

숙박 예약 서비스

사용자는 다양한 숙박들을 찾아볼 수 있고, 예약할 수 있는 사이트.

해당 깃 레포

https://github.com/YBEMiniProjectTeam/MINI-Front?tab=readme-ov-file

현재 배포는 끊긴 상태.

맡은 역할

• 프로젝트 초기 설정
• 회원가입
• 로그인
• 장바구니
• 드래그 앤 드랍

구현한 기능

겪었던 문제들

프록시 설정

// host
127.0.0.1 domain.com

//host
127.0.0.1 location.domain.com

host 파일을 변경할 때, 도메인 주소 앞에 일부 주소를 작성해야 된다는 것을 알았다. 127.0.0.1 domain.com 으로 작성할 시, 기존에 있던 api 사이트 domain.com/index/swagger 으로 접속할 경우, 127.0.0.1/index/swagger 로 접속이 되는 것과 같기때문에 네트워크 오류( 존재하지 않는 사이트 )가 뜨게 된다.

CSS

Header 메뉴와 서브메뉴 사이의 간격이 있기때문에 Header Menu → Hover → Submenu 커서를 옮기는 과정에서 계속 닫히게 되었다. 이 부분을 해결하기 위해서 각 메뉴마다 div 태그를 2번 작성을 해서 마우스의 커서 범위를 늘려주는 방식으로 구현하게 되었다.

Z-index 드래그앤 드롭을 사용해서 Drop 컴포넌트의 위치에 대한 에러 css 코드에서 position:fixed z-index:100 을 적용했지만 Drop 컴포넌트가 일부 컴포넌트 보다 아래에 위치해 있는 경우가 있었다. Stacking contexts 때문에 아무리 Z-index값을 주더라도 해당 컴포넌트는 무조건 아래에 위치하게 된다. 그래서, 해당 컴포넌트를 부모 컴포넌트에 작성을 해서 해결을 했다.

KPT

KEEP 🎯

다양한 라이브러리 사용 및 시도 맡은 부분에 대한 플로우 이해 후, 코드 작성

PROBLEM 🥊

React query의 전체적인 흐름 이해 및 코드 작성. Typescript Generic 문법

TRY 🚀

함수 및 컴포넌트 분리 타입을 작성할 시, Generic을 사용해서 확장성 좋게 하기. htrml, css 태그 속성(option) 이해

협업을 하면서 느낀점

이번 프로젝트가 처음으로 백엔드 개발자와 협업을 하다보니 지식의 파편화가 심했던걸 느끼게 되었다.

백엔드 개발자와 대화를 나누면서 백엔드와 관련된 혹은 전반적인 CS지식의 용어들이 익숙하지만 정확하게 의미를 모르다보니 대화 진행이 어려웠던 것 같았다. 물론 백엔드 개발자도 프론트 개발과 관련된 용어와 흐름을 잘 몰랐기 때문에 의사소통이 잘 되지 않았던 것 같았다.

해당 상황에 대한 개발 용어들을 사용하게 된다면 의미를 아는 사람은 정확하게 이해를 하지만, 모르는 사람일 경우에는 비유나 설명을 간단하게 해서 상대방을 이해시켜야한다. 프론트 엔드 개발자는 PM, 디자이너, 백엔드 등 다양한 부서(직군)과 연결이 되어있기 때문에 커뮤니케이션 능력이 매우 중요하다고 생각했다.

예제) Count값을 변경 해주는 버튼

1. createSlice

// Slice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

// 상태의 초기 상태 정의
const initialState: { value: number } = { value: 0 };

// 리듀서 및 액션 생성기 생성
const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

// 액션 생성자 내보내기
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// 리듀서 내보내기
export default counterSlice.reducer;

initialState: 초기 상태값을 정의하고 타입 지정(ts를 사용할 시 )

reducers: 해당 객체내에서 다양한 액션에 대해 함수 정의 만약, 함수에 파라미터값을 넣을려면 action으로 파라미터 값을 받고 action.payload를 사용한다. 타입은 PayloadAction<타입지정>을 사용하고 import를 해서 사용

export를 사용하여 액션 함수와 리듀서를 내보낸다.

2. configureStore

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;

export default store;

state 관리하는 것들을 보관하는 파일

store에 configureStore을 사용하여 해당 reduce을 정리한다.

export type RootState = ReturnType<typeof store.getState>;

을 사용하여 ReturnType을 추론하여 RootState에 타입을 보관한다.

이렇게하면 다른 컴포넌트에서 import를 할 때, useSelector의 state를 쉽게 타입을 지정할 수 있다.

3. 해당 컴포넌트 사용

//Counter.tsx
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment, decrement, incrementByAmount } from "./counterSlice";
import { RootState } from "./store";
import { Dispatch } from "redux";

const Counter: React.FC = () => {
  const dispatch: Dispatch = useDispatch();
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <div>
      <h2>카운터</h2>
      <p>값: {count}</p>
      <button onClick={() => dispatch(increment())}>증가</button>
      <button onClick={() => dispatch(decrement())}>감소</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>5 증가</button>
    </div>
  );
};

export default Counter;

컴포넌트에서 사용을 할 때, useDispatch와 useSelector을 import해야한다

Redux 사용하는 이유

• 컴포넌트가 많을 경우, props drilling 방지
• 불변성 유지
• 모든 컴포넌트에서 state관리

설치

npm install @reduxjs/toolkit react-redux 
npm install -D redux-devtools //  크롬브라우저 확장프로그램 연동을 위한 설치

세팅

1. store.js / store.tsx 파일 만들기

   // store 파일
   import { configureStore } from "@reduxjs/toolkit";
   

export default configureStore({ reducer: {}, });

2. index.js / main.tsx 파일 수정
```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

import { Provider } from "react-redux"; // 추가
import store from "./store.tsx"; // 추가

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Provider store={store}> // Provider에 store 사용이 가능하게 추가
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

프로젝트 주제

자기소개 페이지 (이력서 페이지)

기능

스크롤 이벤트 메일 보내기 기능

사용 라이브러리

• React / TypeScript
• Build: vite
• Style: emotion
• eslint / prettier

리액트 프로젝트를 기본적으로 구성하는 것들을 주로 작성

프로젝트 생성

1. CRA

npx create-reat-app [프로젝트명]
npx create-react-app [프로젝트명] --template typescript

2. Vite

npm create vite@latest [프로젝트 명] 
npm create vite@latest [프로젝트 명] --template react-ts

CRA와 Vite 방식으로 프로젝트를 생성할 수 있는데, CRA로 프로젝트를 만들면서 빌드가 매우 느렸던 것을 경험하게 되었다.

그래서 Vite를 사용해보니 빌드가 CRA보다 상대적으로 빠르다는 것을 경험하게 되었다.

Eslint 파일

module.exports = {
  root: true,
  env: { browser: true, es2020: true }, // 브라우저 환경 및 ES2020 환경 설정

  extends: [
    "eslint:recommended", // ESLint의 기본 권장 규칙 사용
    "plugin:@typescript-eslint/recommended", // TypeScript 관련 권장 규칙 사용
    "plugin:react-hooks/recommended", // React Hooks 규칙 사용
  ],

  ignorePatterns: ["dist", ".eslintrc.cjs"], // ESLint 무시할 파일 또는 디렉토리 설정

  parser: "@typescript-eslint/parser", // TypeScript 구문 분석기 사용

  plugins: ["react-refresh"], // React Refresh 플러그인 사용

  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ], // React 컴포넌트는 오직 컴포넌트만 내보내야 합니다.

    indent: ["error", 2], // 들여쓰기 스타일 설정 (2칸 들여쓰기)

    "no-unused-vars": "off", // 사용하지 않는 변수 경고 끄기

    "@typescript-eslint/no-unused-vars": [
      "error",
      { vars: "all", args: "after-used", ignoreRestSiblings: false },
    ], // TypeScript에서 사용하지 않는 변수를 검출합니다.

    "@typescript-eslint/explicit-function-return-type": "warn",
    // 함수의 반환 타입이 추론 가능할 때도 명시적으로 타입을 선언하도록 경고합니다.

    "no-empty": "warn", // 빈 블록문에 대한 경고 설정

    semi: ["error", "always"], // 세미콜론(;) 사용 강제 설정
  },
};

Prettier

npm install -D prettier

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"]
}

prettier 설치 시, .eslintrc가 있으면 extends에 추가

// .prettierrc
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "auto"
}

라이브러리

CSS

1. styled-components

npm install styled-components

2. emotion

npm install @emotion/react

{  // tsconfig.json
  "compilerOptions": {
    ...
    "types": ["@emotion/react/types/css-prop"] // 추가
  }
}

styled-components를 사용했더니, 컴포넌트 태그가 스타일 컴포넌트인지 혹은 UI가 있는 컴포넌트인지 눈으로 쉽게 확인을 할 수 없었던 경험이 있다.

그러다보니, 개인적인 프로젝트 스타일 라이브러리는 emotion을 사용을 한다.

Router

npm install react-router-dom

State 관리

Redux

npm install redux react-redux
npm install @reduxjs/toolkit react-redux
npm install -D redux-devtools //  크롬브라우저 확장프로그램 연동을 위한 설치

Recoil

npm install recoil

폴더 구조

Project/ ├── src/ │ ├── components/ # React 컴포넌트들 │ ├── pages/ # 페이지 컴포넌트들 (라우팅) │ ├── styles/ # CSS 스타일 및 스타일 유틸리티 │ ├── assets/ # 이미지, 폰트 등 │ └── App.js / App.tsx ├── public/ │ ├── index.html # HTML 템플릿 파일 │ └── ... ├── package.json # 프로젝트 설정 및 의존성 ├── .eslintrc.json # ESLint 설정 파일 ├── .prettierrc # Prettier 설정 파일 └── ...

이 글은 프로젝트를 만들면서 수정이 계속 될 예정

배포링크: https://thriving-fenglisu-0e5367.netlify.app/

레포지토리: https://github.com/YongYong21/javascript

사용언어

HTML, CSS, JavaScript

리펙토링 한 부분

수정 전

 const userList = `
        <tr data-name="${data.name}">
        <td class='check'><input type="checkbox" ></td>
        <td><img src="" id="${data.key}"></td>
        <td><span>${data.name}</span></td>
        <td><span>${data.email}</span></td>
        <td><span>${data.phone}</span></td>
        <td><span>${data.classification}</span></td>
        <td><button class='profile-btn'>프로필 보기</button></td>
        </tr>`;
        $("tbody").append(userList);

        // ... 

수정 후

function createUserRow(data){
  return `
    <tr data-name="${data.name}">
      <td class='check'><input type="checkbox"></td>
      <td><img src="" id="${data.key}"></td>
      <td><span>${data.name}</span></td>
      <td><span>${data.email}</span></td>
      <td><span>${data.phone}</span></td>
      <td><span>${data.classification}</span></td>
      <td><button class='profile-btn'>View Profile</button></td>
    </tr>`;
};

const userList = createUserRow(data);

가독성을 좋게 하기위해 함수로 빼두었습니다.

수정 전

function getRandomPhoneNumber() {
  var phoneNumber = "010";
  for (var i = 0; i < 8; i++) {
      // ...
  }

수정 후

function getRandomPhoneNumber() {
  var phoneNumber = "010";
  for (let i = 0; i < 8; i++) {
      // ...
  }

var을 쓰던 버릇이 있어서 몇몇 변수들이 var로 선언이 되어서 let or const로 수정했습니다.

수정 전

Promise.all(promises).then(() => {
    localStorage.setItem("hasExecuted", true);
    window.location.href = "index.html";
  });

수정 후

await Promise.all(promises);
  localStorage.setItem("hasExecuted", true);
  window.location.href = "index.html";

비동기 처리를 하는 부분을 then보다는 await를 이용하여 작성하는 것으로 수정했습니다,

과제 느낀점

과제를 하면서 느꼈던 점은 아무래도 비동기 작업을 구현하는 부분에서 시간을 걸렸던 것 같습니다.

서버와 데이터를 주고 받는 것이 많은 경험이 없다보니, 구현하는데 어려웠던 것 같습니다. 또한, 서버로부터 정보를 가져오는 것이 비동기적으로 이루어지기 때문에 소스가 생각대로 실행이 되지 않았던 것도 주된 이유였던 것 같습니다.

바닐라 자바스크립트로 구현을 할려고 했으나 많이 복잡하고 비효율적인 것 같아서 J Query를 이용해서 구현하는데 많이 편했던 것 같습니다.

전체 코드

      async function fetchDataAsync(id) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            const data = { id, name: "John" + id };
            if (data) {
              resolve(data);
            } else {
              reject("Data not found");
            }
          }, Math.random()*1000); 
        });
      }

      async function fetchDataSerially() {
        const dataArray = [];

        for (let i = 1; i <= 5; i++) {
          try {
            const data = await fetchDataAsync(i);
            dataArray.push(data);
            console.log("Data:", data);
          } catch (error) {
            console.error("Error:", error);
          }
        }
        console.log("Data Array:", dataArray);
      }

      fetchDataSerially();


      async function fetchDataParallel() {
        try {
          const promises = [];
          for (let i = 1; i <= 5; i++) {
            promises.push(fetchDataAsync(i));
          }
          const dataArray = await Promise.all(promises);
          console.log("Data Array:", dataArray);
        } catch (error) {
          console.error("Error:", error);
        }
      }

      fetchDataParallel();

      async function fetchDataForEach() {
        const dataArray = [];

        [1, 2, 3, 4, 5].forEach(async (i) => {
          try {
            const data = await fetchDataAsync(i);
            dataArray.push(data);
            console.log("Data:", data);
          } catch (error) {
            console.error("Error:", error);
          }
        });

        console.log("Data Array:", dataArray);
      }

      fetchDataForEach();

비동기 함수

 async function fetchDataAsync(id) {
     return new Promise((resolve, reject) => {
         setTimeout(() => {
            const data = { id, name: "John" + id };
            if (data) {
              resolve(data);
            } else {
              reject("Data not found");
            }
        }, Math.random()*1000); 
    });
}

무작위 시간이 지나고 data를 반환하도록 하는 비동기 함수입니다.

직렬처리 코드

async function fetchDataSerially() {
    const dataArray = [];

    for (let i = 1; i <= 5; i++) {
        try {
            const data = await fetchDataAsync(i);
            dataArray.push(data);
            console.log("Data:", data);
          } catch (error) {
            console.error("Error:", error);
          }
     }
     console.log("Data Array:", dataArray);
}

fetchDataSerially(); 
// 출력결과
// Data: {id: 1, name: 'John1'}
// Data: {id: 2, name: 'John2'}
// Data: {id: 3, name: 'John3'}
// Data: {id: 4, name: 'John4'}
// Data: {id: 5, name: 'John5'}
// Data Array: (5) [{…}, {…}, {…}, {…}, {…}]

직렬처리는 비동기 작업을 순차적으로 처리합니다.

이전의 작업이 완료가 되어야 다음 작업을 시작하는 방식입니다.

직렬 처리 장점

• 순서 보장
• 의존성 처리
• 안정성

직렬 처리 단점

• 성능 저하
• 병목 현상

병렬처리 코드

async function fetchDataParallel() {
    try {
        const promises = [];
        for (let i = 1; i <= 5; i++) {
            promises.push(fetchDataAsync(i));
        }
        const dataArray = await Promise.all(promises);
        console.log("Data Array:", dataArray);
        } catch (error) {
          console.error("Error:", error);
        }
}

fetchDataParallel();
// 출력결과: Data Array: (5) [{…}, {…}, {…}, {…}, {…}]

Promise.all은 내부적으로 비동기 작업을 병렬로 처리하고 결과를 모아서 반환합니다.

이 비동기 작업은 싱글 스레드에서 병렬적으로 처리되는 것은 아니지만, 비동기 특성을 활용하여 효과적인 병렬 작업 처리를 구현한 것입니다.

병렬처리 장점

• 성능 향상
• 자원활용
• 응답성 향상
• 대기시간 감소

병렬처리 단점

• 동기화와 동시성 관리
• 코드 복잡성
• 데이터 일관성
• 병렬화 비용

forEach 안티패턴

async function fetchDataForEach() {
    const dataArray = [];

    [1, 2, 3, 4, 5].forEach(async (i) => {
        try {
            const data = await fetchDataAsync(i);
            dataArray.push(data);
            console.log("Data:", data);
          } catch (error) {
            console.error("Error:", error);
          }
    });

    console.log("Data Array:", dataArray);
}

fetchDataForEach();
// 출력결과
// Data Array: []
// Data: {id: 2, name: 'John2'}
// Data: {id: 5, name: 'John5'}
// Data: {id: 1, name: 'John1'}
// Data: {id: 4, name: 'John4'}
// Data: {id: 3, name: 'John3'}

위의 코드는 비동기 콜백 함수가 async로 선언되어 있어도, forEach 안에서는 각 비동기 작업이 병렬로 실행되지 않습니다.

그렇기 때문에 console.log부터 먼저 실행을 하게 되고, data를 가져오는 과정은 비동기 처리하게 됩니다.

forEach 안에 있는 내부의 함수가 완료되지 않는 상태에서 console.log를 하게 되면, 데이터를 가지고 오는 각 시간에 따라서 순서가 보장이 되지 않는 문제점이 있을 수 있습니다.

Callback 디자인 패턴

function delay(message, callback) {
    setTimeout(() => {
        console.log(message);
        callback(); 
    }, 1000); 
}

console.log("1");
delay("2", () => {
    console.log("3"); 
});
console.log("4"); // 출력결과 1 4 2 3

콜백 패턴은 비동기 작업을 다루는 가장 기본적인 패턴이지만, 중첩된 콜백 함수들이 발생할 수 있어 가독성이나 유지 보수성 측면에서 한계가 있을 수 있습니다.

이를 해결하기 위해 Promise, async/await 등의 패턴이 도입되었습니다.

Promise 패턴

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { id: 1, name: "John" };
            if (data) {
                resolve(data); // 성공 시 데이터 전달
            } 
            else {
                reject("Data not found"); // 실패 시 오류 메시지 전달
            }
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // 출력 {id: 1, name: 'John'}
    })
    .catch((error) => {
        console.error(error);
    }); 

Promise는 JavaScript에서 비동기 작업을 더 효율적으로 다룰 수 있도록 도와주는 객체입니다.

비동기 작업을 수행하고 해당 작업의 성공 또는 실패 결과를 처리하기 위한 추상화된 방식을 제공합니다.

Promise는 세 가지 상태를 가집니다

Pending (대기): 비동기 작업이 아직 완료되지 않은 상태입니다. resolved (성공): 비동기 작업이 성공적으로 완료된 상태입니다. 결과 값이 있습니다. Rejected (실패): 비동기 작업이 실패한 상태입니다. 오류 정보가 있습니다.

async / await 패턴

async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John" };
      if (data) {
        resolve(data);
      } else {
        reject("Data not found");
      }
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchDataAsync();
    console.log("Data:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}

main();

async는 JavaScript에서 비동기 작업을 보다 쉽게 다룰 수 있도록 도와주는 키워드입니다.

async 함수를 사용하면 코드를 동기적으로 작성하듯이 비동기 작업을 다룰 수 있게 됩니다.

await 키워드 다음에는 Promise가 위치하며, 해당 Promise가 완료될 때까지 함수의 실행을 일시 중지하고 기다립니다.

Promise는 resolve, reject를 사용했지만 async는 Promise와 다르게 성공과 실패를 try catch 문법을 사용하여 에러를 구분합니다.

자바스크립트의 런타임 이미지

이미지 설명

*Heap: *

힙은 동적으로 할당된 메모리 공간으로, 객체와 변수들이 저장되는 곳입니다.

JavaScript에서 객체와 배열은 힙에 저장되며, 할당된 메모리 공간은 더 이상 사용하지 않을 때 가비지 컬렉터에 의해 해제됩니다.

스택(Stack):

스택은 함수 호출과 관련된 메모리 공간으로, 함수 호출 시 지역 변수와 매개변수 등이 저장됩니다.

함수가 호출되면 해당 함수의 스택 프레임이 생성되고, 함수의 실행이 끝나면 스택 프레임이 제거됩니다. 이를 통해 함수의 호출과 복귀를 관리합니다. ** Web API:**

Web API는 브라우저가 제공하는 인터페이스로, 브라우저 환경에서 비동기 작업을 처리하고 외부 리소스에 접근할 수 있도록 도와줍니다.

setTimeout, XMLHttpRequest, fetch 등의 비동기 함수들은 Web API를 사용하여 작동합니다.

콜백 큐(Callback Queue):

콜백 큐는 비동기 작업의 콜백 함수들이 대기하는 공간입니다.

비동기 작업의 결과나 완료 시 콜백 함수가 호출되어야 할 때, 해당 함수들은 콜백 큐에 저장되어 기다리게 됩니다.

자바스크립트의 동작 특징

자바스크립트의 동작 특징중에 하나인 싱글 스레드는 한 번에 하나의 작업만을 처리할 수 있습니다.

스레드: 프로세스 내에서 실행되는 작은 실행 단위로, 프로그램의 코드 실행 흐름을 나타냅니다.

JavaScript 코드가 메인 스레드에서 실행되며, 다른 작업은 메인 스레드가 이벤트 루프를 통해 비동기적으로 처리하는 방식을 가지고 있습니다.

싱글 스레드 환경에서 비동기 작업을 처리하려면 이벤트 루프와 콜백 함수, Promise, async/await과 같은 메커니즘을 사용하여 비동기 작업을 대기하고 처리합니다.

예시 코드

console.log(1)
setTimeout(()=>{
  console.log(2)
}
console.log(3) // 출력결과 1 3 2

실행 설명

1. console.log(1) 실행: 이 부분은 동기적으로 실행됩니다. 콘솔에 "1"이 출력됩니다.

2. setTimeout 함수 호출: 내부의 콜백 함수가 Web API로 이동하여 지정된 시간 후에 실행되도록 예약됩니다

3. console.log(3) 실행: 이 부분은 동기적으로 실행됩니다. 콘솔에 "3"이 출력됩니다.

4. 이벤트 루프와 콜백 큐: setTimeout 함수가 예약한 콜백 함수가 실행될 차례입니다.

   메인 스레드의 실행이 모두 끝나고 콜백 큐에 있는 작업이 실행 대기 상태가 됩니다.

5. 콜백 함수 실행: 콜백 큐에 있는 콜백 함수가 메인 스레드의 실행이 완료된 후에 실행됩니다. 따라서 "2"가 콘솔에 출력됩니다.

원시 데이터 타입 (Primitive Data Types):

원시 데이터 타입은 값 자체가 변수에 저장되며, 변수 사이에 값이 복사될 때 실제 데이터가 복사됩니다.

이러한 데이터 타입은 불변(immutable)하다는 특징을 가지며, 값을 변경하려면 새로운 값을 할당해야 합니다.

원시 데이터 타입의 종류

숫자(Number): 정수와 부동소수점 숫자를 포함합니다. 예: 42, 3.14.

문자열(String): 문자들의 시퀀스입니다. 작은따옴표나 큰따옴표로 둘러싸인 텍스트입니다. 예: 'Hello, world!'.

불리언(Boolean): true나 false 값을 가집니다. 조건식 평가 등에 사용됩니다.

null: 값이 없음을 나타냅니다. 변수에 명시적으로 값을 주지 않을 때 자동으로 할당됩니다.

undefined: 값을 할당하지 않은 변수의 초기값입니다. 또는 함수 내에서 반환값이 없는 경우의 기본 반환값입니다.

심볼(Symbol): 유일한 식별자를 생성하는 데 사용되는 원시 값입니다. 주로 객체 속성의 키로 사용됩니다.

복합 데이터 타입 (참조 타입, Reference Data Types)

avaScript의 복합 데이터 타입은 객체와 배열을 포함합니다. 이러한 데이터 타입은 값 대신 메모리 주소(참조)를 가리키며, 변수에 할당할 때 메모리 주소가 할당됩니다.

복합 데이터 타입은 변수에 메모리 주소(참조)가 할당되며, 변수 간에 복사될 때 메모리 주소가 복사됩니다. 따라서 여러 변수가 동일한 객체나 배열을 참조할 수 있습니다. 이로 인해 한 변수에서 객체나 배열의 내용을 변경하면, 모든 해당 변수에서 변경 내용을 볼 수 있습니다.

복합 데이터 타입의 종류

객체(Object): 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체의 속성은 다양한 데이터 타입을 포함할 수 있습니다.

배열(Array): 값의 목록으로, 순서에 따라 접근할 수 있는 인덱스를 가지고 있습니다. 모든 원소가 동일한 데이터 타입일 필요는 없습니다.

함수(Function): 코드 블록을 나타내며, 재사용 가능한 작업 단위입니다.

날짜(Date): 특정 날짜와 시간 정보를 나타내는 객체입니다.

데이터 복사(Copy)에 대해

원시 데이터 타입 (Primitive Data Types)

let name1 = "kim";
let name2 = name1;
name1 = "park";
console.log(name1); // park
console.log(name2); // kim

원시 데이터 타입은 값 자체가 변수에 저장되며, 변수 사이에 값이 복사될 때 실제 데이터가 복사됩니다. 따라서 name1과 name2는 각각 서로 다른 데이터값을 가지게 됩니다.

복합 데이터 타입 (참조 타입, Reference Data Types)

const person1 = { name: "kim" };
const person2 = person1;
person1.name = "park";
console.log(person1.name) // park
console.log(person2.name) // park

복합 데이터 타입은 변수에 메모리 주소(참조)가 할당되며, 변수 간에 복사될 때 메모리 주소가 복사됩니다.

참조 타입에서 변수에 할당되는 메모리 주소는 힙(heap)이라는 메모리 영역에 할당됩니다.

따라서 여러 변수가 동일한 객체나 배열을 참조할 수 있습니다.

복합 데이터 타입 비교 연산

const person1 = { name: "kim" };
const person2 = { name: "kim" };

console.log(person1 == person2); // false
console.log(person1 === person2); // false

객체의 내용이 동일하더라도, 이들은 서로 다른 메모리 주소를 가지기 때문에 엄연히 다른 객체입니다.

따라서 두 객체 간의 일치 비교(===)나 동등 비교(==)는 모두 false를 반환합니다.

레포지토리 주소

https://github.com/YongYong21/clone-coding-kakao

원본 주소 및 클론코딩 주소

원본주소(카카오 페이지) : https://www.kakaocorp.com/page/ 클론코딩 주소 : https://fantastic-cat-71b104.netlify.app/

수정 부분

hover 스타일링

.header-menu:hover li{
    color: #888;
}
.header-menu > li:hover  {
    color: #333;
}

처음 생각했을 때에는, 메인 메뉴(Header nav)를 hover했을 경우 그 태그를 제외한 나머지의 색상이 바뀌게 만들어야 해서, 자바스크립트를 사용해야 되는줄 알았지만, 스타일을 덮어쓰는 방식으로 수정을 했습니다.

추가 기능

스크롤 이벤트 리스너(Nav와 Calender)

const header = document.querySelector("header")
const calenderHeader = document.querySelector('.calender-header')
let preScrollY = window.scrollY;

window.addEventListener('scroll', function(){
  if(window.scrollY > 1){
    header.classList.add('brd-bt')
  }
  else {
    header.classList.remove('brd-bt')
    header.style.display = 'block'
  }

  if(window.scrollY > 100) {
    header.style.top = '-70px'
    calenderHeader.style.display = 'block'
    calenderHeader.style.top = '0'
    if(preScrollY > window.scrollY){
      header.style.top = '0'
      calenderHeader.style.top = '73px'
    }
  }
  else {
    calenderHeader.style.display = 'none'
  }

  preScrollY = window.scrollY
})

스크롤을 할 때, 특정한 scrollY값에 이벤트 발생 및 스크롤 업 이벤트 발생 부분을 추가했습니다.

max-width 1024px이하일 때, Footer 메뉴 클릭 시 메뉴 버튼 보이기 (첫 렌더링 페이지 기준)

const serviceContainer = document.querySelector(".service-container");
const serviceItem = document.querySelectorAll(".service-item");

if (window.innerWidth <= 1024) {
  serviceContainer.addEventListener("click", (e) => {
    e.target.querySelectorAll(".service-item").forEach((item) => {
      item.classList.toggle("show");
    });
  });
}

이용자의 해상도에 따라서 반응형 디자인이 다르다보니, 추가하게 되었습니다.

느낀점

이번 과제는 주된 목표가 html과 css를 이용하여 클론코딩을 진행하게 되었습니다.

하지만 대부분의 사이트들은 자바스크립트를 이용하여 좀 더 동적으로 사이트가 구성이 되어있었습니다,

그렇다보니 일부 기능들을 JS로 구현을 했었지만, 구현하는 과정에서 아직 익숙하지가 않아 구현하는 시간이 오래 걸리게 되었습니다.

구체적으로는 JS에서 html에 작성된 DOM 객체에 대해 원하는 부분에 해당하는 속성값들을 가지고 올 때 필요한 문법과 메소드들을 활용하는 과정에서 에러가 가장 많이 나왔던 것 같습니다.

메소드를 활용하는 부분에서는 JS로 알고리즘 문제를 풀었던 것들이 크게 도움이 되었다고 느껴졌었습니다.

문제

비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.

지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. "지도 1"과 "지도 2"는 각각 정수 배열로 암호화되어 있다. 암호화된 배열은 지도의 각 가로줄에서 벽 부분을 1, 공백 부분을 0으로 부호화했을 때 얻어지는 이진수에 해당하는 값의 배열이다.

네오가 프로도의 비상금을 손에 넣을 수 있도록, 비밀지도의 암호를 해독하는 작업을 도와줄 프로그램을 작성하라.

입력 형식 입력으로 지도의 한 변 크기 n 과 2개의 정수 배열 arr1, arr2가 들어온다.

1 ≦ n ≦ 16 arr1, arr2는 길이 n인 정수 배열로 주어진다. 정수 배열의 각 원소 x를 이진수로 변환했을 때의 길이는 n 이하이다. 즉, 0 ≦ x ≦ 2n - 1을 만족한다. 출력 형식 원래의 비밀지도를 해독하여 '#', 공백으로 구성된 문자열 배열로 출력하라.

소스

function solution(n, arr1, arr2) {
  const map = [];
  for (let i = 0; i < n; i++) {
    const binaryMap = (arr1[i] | arr2[i]).toString(2).padStart(n, '0');
    const row = binaryMap.replace(/0/g, ' ').replace(/1/g, '#');
    map.push(row);
  }
  return map;
}

문제 풀이

• 각 주어진 배열의 인덱스 값인 정수를 이진수로 비교해야함

• 비트 연산(|)을 활용

• 이진수값이 n(한 변의 크기)보다 작으면 맨 앞에 0을 채워줘야함

• padstart() 메소드 사용

• 이진수값을 1은 #, 0은 ' '으로 바꿔줘야함

• 정규식을 이용하여 replace()

예시코드

let button = $('.tab-button')
let content = $('.tab-content')

for(var i = 0; i < button.length; i++){
    button.eq(i).on('click', function () {
        button.removeClass('on');
        button.eq(i).addClass('on');
        content.removeClass('show');
        content.eq(i).addClass('show')
    })
}

해설

tab-button은 3개이고, tab-content또한 3개이다.

이 코드에서는 각 버튼에 클릭 이벤트리스너가 발생되지 않는다.

그 이유는 var의 특징 중에 하나인 함수 스코프와 클로저 문제이다.

'var' 키워드로 선언한 'i'는 함수 스코프를 가지고 반복문 내에서 생성된 모든 이벤트 핸들러에서 같은 'i'변수를 공유한다.

함수가 끝나고도 i의 값(3)은 남아있게 되고 클릭 이벤트가 추가 되어도 마지막 i값에 해당하는 인덱스 값으로 동작하게 된다.

해결 방법

let 사용

let button = $('.tab-button');
let content = $('.tab-content');

for (let i = 0; i < button.length; i++) {
  button.eq(i).on('click', function () {
    button.removeClass('on');
    button.eq(i).addClass('on');
    content.removeClass('show');
    content.eq(i).addClass('show');
  });
}

forEach 사용

let button = $('.tab-button');
let content = $('.tab-content');

button.each(function (index) {
  $(this).on('click', function () {
    button.removeClass('on');
    button.eq(index).addClass('on');
    content.removeClass('show');
    content.eq(index).addClass('show');
  });
});

정규식(Regular Expression)이란?

정규식(Regular Expression)은 문자열에서 특정 패턴을 찾거나 매칭하는 데 사용되는 문자열의 표현 방법입니다. 정규식은 매우 강력하고 유연하며, 문자열 검색, 치환, 추출 등 다양한 문자열 조작 작업에 사용됩니다.

정규식 구성 요소

const regexr = /pattern/flag

양 끝에 있는 /는 시작과 종료를 알려준다.

pattern

/a/

const str = 'abcdefg'
console.log(/a/.test(str)); //ture
console.log(/z/.test(str)); //false

해당하는 문자가 들어가 있는지 확인한다

[a-z]

const str2 = 'axyz';
console.log(/[a-z]/.test(str2)) // true
console.log(/[b-g]/.test(str2)) // false

const str3 = '안녕';
console.log(/[a-zA-z]/.test(str3)) // false
console.log(/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test(str3)) // true

문자 범위를 지정해서 들어가 있는지 확인한다.

^a, a$

const str4 = 'abc';
console.log(/^a/.test(str4)) // true
console.log(/c$/.test(str4)) // true

^는 시작하는 문자, $는 끝나는 문자를 체크해준다.

/a+/

const str5 = 'aaaa';
console.log(/a+/.test(str5)) // true aaaa

+를 붙이게 되면 a뒤에 똑같은 문자가 있는지 확인해준다.

플래그

정규식에서는 플래그(Flags)를 사용하여 검색의 방법과 동작을 세부적으로 제어할 수 있습니다.

const str = 'Hello, hello, HELLO';
console.log(/hello/gi/.test(str) // true Hello, hello, HELLO

i : 대소문자 무시하여 검색 g : 전역 검색, 일치하는 모든 부분을 찾는다.

활용 예시

이메일 검사

const email = 'abc23@gmail.com'
console.log(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) //true

핸드폰번호 검사

const number = '010-1234-5678'
console.log(/^\d{3}-\d{3,4}-\d{4}$/.test(number)) // true

정규식의 장단점

장점

• 다양한 패턴에 대해 검색을 할 수 있다.
• 이메일 주소, 전화번호, 비밀번호등의 유효성 검사하는데 유용하다.

  단점

• 가독성이 매우 떨어진다.
• 정규식의 패턴이 복잡할수록 실행속도가 느려진다.
• 패턴이 복잡할 수록 실수가 많아진다.

소스

function solution(babbling) {
    let word = ['aya', 'ye', 'woo', 'ma'];

    let count = 0;
    babbling.forEach(item => {
        word.forEach(w => {
            item = item.replace(w,'1');
        })
        if(item.replace(/1/g, '') === '')
            count += 1;
    })
    return count;
}

포인트

• 각 단어가 최대 한번씩 등장
• 포함에 집중해서 includes를 사용하지말고 replace를 사용
• replace 활용방식에 대해 알 것

후기

처음에는 includes를 사용해서 풀려고 시도했으나, 'yee'에 'ye'가 Ture값이 나오다보니 힌트로 replace 활용을 해서 풀었습니다.

replace로 풀던 도중, ''로 치환할 경우 'wyeoo'가 'ye' 'woo'를 처리할 때 'wyeoo' -> 'woo' -> '' 이렇게 처리가 되다보니 true값이 나오게 됩니다.

그래서 저는 빈문자열로 치환하지않고 data input값이 숫자가 나오지 않기때문에 숫자 1을 넣고 마지막에 .replace(/1/g, '')를 사용하여 item에 있는 '1'을 전부 ''로 바꾸어서 풀었습니다.

Browser processing pipeline

• 이미지 출처: https://hpbn.co/primer-on-web-performance/

위 사진은 웹 브라우저가 웹 페이지를 처리하는 과정을 간단하게 표현한 파이프라인입니다.

파싱(parsing)이란?

파싱(parsing) 입력 데이터를 읽어들이고 그 구문을 분석하고 해석하는 과정

파싱하는 과정

HTML 파싱

웹 브라우저는 HTML 문서를 요청하고 그 문서를 토큰화 하여 문자열로 읽어들입니다. 토큰화된 토큰들을 이용하여 DOM을 구성하고 그 과정에서 각 요소들은 노트로 변환되며 이 노드들은 트리 구조로 연결됩니다. DOM 구성이 된다면 웹 페이지의 구조가 브라우저 내부에 객체로 저장이 됩니다.

• 만약 HTML을 파싱하는 도중 스크립트 파일을 만나게 되면, 파싱하는 것을 멈추고 스크립트를 실행시킵니다.
• 만약 DOMContentLoaded가 있으면, HTML파싱이 완료되었을 때 즉시 발생합니다
• onload는 웹페이지의 모든 리소스가 로드가 되었을 때, 즉 DOM이 CSSOM과 구성이 된 이후에 발생합니다

CSS 파싱

HTML 파싱을 하는 것 처럼 CSS파일을 토큰을 만들고, 이러한 토큰들을 이용하여 CSSOM을 구성하게 됩니다.

Render Tree 구성

DOM과 CSSOM이 구성된 후에는 이 두 객체를 결합하여 Render Tree를 생성합니다.

• Render Tree에는 화면에 보이지 않는 요소들도 렌더트리에 포함이 되지만 몇몇 태그들은 렌더트리에 포함이 되지 않는다.
• 예시) meta태그, link태그, display:none 등

Layout

Render Tree의 각 노드들의 크기와 위치를 계산하여 화면에 배치화는 과정 브라우저는 Render Tree를 순회하면서 각 노드들을 화면 위치에 배치합니다.

Paint

Layout 단계에서 계산된 각 노드의 스타일을 적용하여 실제로 화면에 그리는 과정 브라우저는 Render Tree를 순회하면서 각 노드들의 스타일을 적용하여 화면을 그리게 됩니다.

소스

const fs=require('fs');
const input=fs.readFileSync('/dev/stdin').toString().trim().split('\n');
let [a, b, c] = input[0].split(' ').map(Number);

let price = 0;

if ( a === b && b === c) {
    price = 10000 + a * 1000
}
else if ( a !== b && b !== c && a !== c ) {
    price = Math.max(a,b,c) * 100
}
else {
    if ( a === b ){
        price = 1000 + a * 100
    }
    else if ( a === c){
        price = 1000 + a * 100
    }
    else {
        price = 1000 + b * 100
    }
}

console.log(price)

주요 포인트와 유의사항

• 구조 분해 할당을 이용해서 변수로 바로 받을 수 있다.
• Math 메소드를 이용해 Max값을 쉽게 구할 수 있다.

소스

const fs=require('fs');
const input=fs.readFileSync('/dev/stdin').toString().trim().split('\n');
let [hour, minute] = input[0].split(' ').map(Number);
let delay = Number(input[1]);

minute += delay;

if(minute >= 60){
    hour += parseInt(minute/60);
    minute %= 60;
    if(hour >= 24){
        hour %= 24;
    }    
}

console.log(hour+ ' ' + minute)

주요 포인트와 유의사항

14 30
20

• 입력값이 이렇게 주어지기 때문에, split('\n')을 이용해서 받아야한다.
• 구조 분해 할당을 이용해서 변수로 바로 받을 수 있다.
• / 와 % 를 잘 활용하고 /를 할 시 소수점이 나오는 것을 주의하자.