우리 이야기의 조각

리더의 세 가지 얼굴: 인내, 전략, 열정이 만드는 문제 해결의 기술

하늘밝음 — Sat, 7 Jun 2025 09:47:38 +0900

리더십은 단순히 팀을 이끄는 기술이 아닙니다.

문제를 해결하고, 사람을 움직이며, 목표를 달성하는 철학이자 예술입니다.

그런데 모든 리더가 같은 방식으로 일하는 것은 아닙니다.

어떤 리더는 신중하게 기다리며 인내하고, 어떤 리더는 전략적으로 접근하며, 또 다른 리더는 열정으로 팀을 이끕니다.

성격과 리더십 스타일이 다른 세 사람의 문제 해결 방식을 비교하고,

"인내"가 현대 사회에서 어떤 힘을 발휘하는지 분석해보겠습니다.

1. "기다림의 리더" – 인내가 만드는 장기적 성공

대표 인물: 워런 버핏 (Warren Buffett)

리더십 스타일: 신중함, 장기적 비전, 절제된 행동
문제 해결 전략: "가치 투자" 철학처럼, 최적의 타이밍을 기다린다.
핵심 강점:
- 감정적 충동을 통제하며 불필요한 리스크를 피한다.
- 오랜 시간을 견디는 힘이 결국 큰 성과로 이어진다.
현대인에게 주는 교훈:
"빠른 결과를 원하는 사회에서, 인내는 가장 강력한 무기다."

2. "전략의 리더" – 체계적인 접근으로 문제를 분해한다

대표 인물: 일론 머스크 (Elon Musk)

리더십 스타일: 논리적 분석, 과감한 실행, 시스템적 사고
문제 해결 전략: "First Principles Thinking" – 문제를 가장 작은 단위로 쪼개 해결한다.
핵심 강점:
- 복잡한 문제를 단순화하여 혁신적인 답을 찾는다.
- 실패를 두려워하지 않고 빠르게 실험하고 수정한다.
현대인에게 주는 교훈:
"전략 없는 행동은 에너지 낭비다. 체계적으로 접근하라."

3. "열정의 리더" – 에너지로 팀을 일으킨다

대표 인물: 리처드 브랜슨 (Richard Branson)

리더십 스타일: 감성적 리더십, 도전 정신, 유연한 사고
문제 해결 전략: "일단 시작하라. 세부는 뒤에 따라온다."
핵심 강점:
- 팀의 사기를 최고조로 끌어올린다.
- 실패를 성공의 밑거름으로 삼는 낙관적 마인드.
현대인에게 주는 교훈:
"열정은 전염된다. 팀을 움직이는 가장 강력한 동력이다."

4. 현대인을 위한 리더십 조언: 세 가지 스타일의 균형

인내만으로는 부족하다 – 기다림이 무기일 때도 있지만, 지나치면 기회를 놓칠 수 있다.
전략 없이 열정만으로는 위험하다 – 에너지가 있어도 방향이 틀리면 실패한다.
가장 강력한 리더는 세 가지를 모두 활용한다 –
- 장기적 비전 (인내) + 체계적 접근 (전략) + 동기 부여 (열정)

"위대한 리더는 때로는 기다리고, 때로는 전략을 세우며, 때로는 열정으로 팀을 이끈다."

마치며: 당신의 리더십 스타일은 무엇인가?

리더십은 정해진 공식이 없습니다.

당신이 신중한 리더라면, 때로는 조금 더 과감해져 보세요.
당신이 전략가형 리더라면, 팀의 감정에도 귀 기울여 보세요.
당신이 열정적인 리더라면, 장기적인 비전을 더 구체화해 보세요.

진정한 리더는 자신의 스타일을 알고, 부족한 부분을 채우는 사람입니다.

이 세 가지 리더십을 조합해 당신만의 문제 해결 전략을 만들어보세요.

Node.js 에서 NODE_ENV 값으로 배포/개발 환경설정하기

하늘밝음 — Thu, 20 Jul 2023 10:40:55 +0900

production 모드 일때는
파일 캐싱, 에러 메시지 감추기 등 배포의 적합한 환경 설정을 하구요.

development 모드 일 때는
파일 캐싱 방지, 디버그를 위한 상세한 에러 메시지 보이기 등

process.env.NODE_ENV = ( process.env.NODE_ENV && ( process.env.NODE_ENV ).trim().toLowerCase() == 'production' ) ? 'production' : 'development';

React Ag-grid 띄우기

하늘밝음 — Wed, 19 Jul 2023 15:40:28 +0900

npx create-react-app . --template typescript

npm install typescript @types/node @types/react @types/react-dom @types/jest

yarn add typescript @types/node @types/react @types/react-dom @types/jest

npm start


* Cannot find module 'react-dom/client' or its corresponding type declarations.ts(2307)
-- npm install --save @types/react-dom
npm i @types/react-router-dom


npm i react-redux

npm i @types/react-router-dom
npm i react-router-dom



Module not found: Error: Can't resolve 'ag-grid-community/styles/ag-grid.css

npm i @ag-grid-community/react

npm i -s react-router-dom

npm install @ag-grid-community/all-modules

import { useCallback, useMemo, useState } from "react";
import { AgGridReact } from "ag-grid-react";

import '@ag-grid-community/core/dist/styles/ag-grid.css'
import "@ag-grid-community/core/dist/styles/ag-theme-alpine.css";

import {
  CheckboxSelectionCallbackParams,
  ColDef,
  ColGroupDef,
  Grid,
  GridOptions,
  GridReadyEvent,
  HeaderCheckboxSelectionCallbackParams,
} from "ag-grid-community";

export interface IOlympicData {
  athlete: string;
  age: number;
  country: string;
  year: number;
  date: string;
  sport: string;
  gold: number;
  silver: number;
  bronze: number;
  total: number;
}

var checkboxSelection = function (params: CheckboxSelectionCallbackParams) {
  // we put checkbox on the name if we are not doing grouping
  return params.columnApi.getRowGroupColumns().length === 0;
};

var headerCheckboxSelection = function (
  params: HeaderCheckboxSelectionCallbackParams
) {
  // we put checkbox on the name if we are not doing grouping
  return params.columnApi.getRowGroupColumns().length === 0;
};

type props = {
  rowData: IOlympicData[];
  pagination: number;
};

export const GridComponent = ({ rowData, pagination }: props) => {
  const containerStyle = useMemo(
    () => ({ width: "100%", height: "600px" }),
    []
  );
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "athlete",
      minWidth: 170,
      checkboxSelection: checkboxSelection,
      headerCheckboxSelection: headerCheckboxSelection,
    },
    { field: "age" },
    { field: "country" },
    { field: "year" },
    {
      field: "date",
      filter: "agDateColumnFilter",
      filterParams: {
        // provide comparator function
        comparator: (filterLocalDateAtMidnight: any, cellValue: any) => {
          const dateAsString = cellValue;

          if (dateAsString == null) {
            return 0;
          }

          // In the example application, dates are stored as dd/mm/yyyy
          // We create a Date object for comparison against the filter date
          const dateParts = dateAsString.split("/");
          const year = Number(dateParts[2]);
          const month = Number(dateParts[1]) - 1;
          const day = Number(dateParts[0]);
          const cellDate = new Date(year, month, day);

          // Now that both parameters are Date objects, we can compare
          if (cellDate < filterLocalDateAtMidnight) {
            return -1;
          } else if (cellDate > filterLocalDateAtMidnight) {
            return 1;
          }
          return 0;
        },
      },
    },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ]);

  const defaultColDef = useMemo<ColDef>(() => {
    return {
      editable: true,
      sortable: true,
      resizable: true,
      filter: true,
      flex: 1,
      minWidth: 100,
    };
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {}, []);

  return (
    <div style={containerStyle}>
      <div style={gridStyle} className="ag-theme-alpine">
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          suppressRowClickSelection={true}
          groupSelectsChildren={true}
          rowSelection={"multiple"}
          rowGroupPanelShow={"always"}
          pivotPanelShow={"always"}
          enableRangeSelection={true}
          pagination={true}
          paginationPageSize={pagination}
          onGridReady={onGridReady}
        ></AgGridReact>
      </div>
    </div>
  );
};

{
  "name": "ag-grid-poc",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ag-grid-community/all-modules": "^27.3.0",
    "@ag-grid-community/react": "^30.0.5",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/jest": "^27.5.2",
    "@types/node": "^17.0.45",
    "@types/react": "^17.0.62",
    "@types/react-dom": "^17.0.20",
    "@types/react-router-dom": "^5.3.3",
    "ag-grid-community": "^26.2.1",
    "ag-grid-react": "^26.2.0",
    "bootstrap": "^5.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^8.1.1",
    "react-router-dom": "^6.14.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

react generator package-lock.json

하늘밝음 — Wed, 19 Jul 2023 13:48:54 +0900

npm i --package-lock-only

mg3-codes/d-d-spell-finder :: 성공

하늘밝음 — Wed, 19 Jul 2023 11:19:46 +0900

https://github.com/mg3-codes/d-d-spell-finder

npx create-react-app . --template typescript

npm install typescript @types/node @types/react @types/react-dom @types/jest

yarn add typescript @types/node @types/react @types/react-dom @types/jest

sahil-bhanvadiya/ag-grid-react-redux-typescript :: 성공

하늘밝음 — Wed, 19 Jul 2023 11:02:34 +0900

https://github.com/sahil-bhanvadiya/ag-grid-react-redux-typescript

npx create-react-app . --template typescript

npm install typescript @types/node @types/react @types/react-dom @types/jest

cyberphani/MyReactApp :: 실패

하늘밝음 — Wed, 19 Jul 2023 10:42:12 +0900

https://github.com/cyberphani/MyReactApp

npx create-react-app . --template typescript

npm install typescript @types/node @types/react @types/react-dom @types/jest

npm i @sinclair/typebox

TypeScript error in C:/VIW/MyReactApp-master/web/node_modules/@sinclair/typebox/typebox.d.ts(349,42):
'?' expected.  TS1005

    347 | export type TTemplateLiteralConst<T, Acc extends string> = T extends TUnion<infer U> ? {
    348 |     [K in keyof U]: TTemplateLiteralUnion<Assert<[U[K]], TTemplateLiteralKind[]>, Acc>;
  > 349 | }[number] : T extends TTemplateLiteral ? `${Static<T>}` : T extends TLiteral<infer U> ? `${U}` : T extends TString ? `${string}` : T extends TNumber ? `${number}` : T extends TBigInt ? `${bigint}` : T extends TBoolean ? `${boolean}` : never;
        |                                          ^
    350 | export type TTemplateLiteralUnion<T extends TTemplateLiteralKind[], Acc extends string = ''> = T extends [infer L, ...infer R] ? `${TTemplateLiteralConst<L, Acc>}${TTemplateLiteralUnion<Assert<R, TTemplateLiteralKind[]>, Acc>}` : T extends [infer L] ? `${TTemplateLiteralConst<L, Acc>}${Acc}` : Acc;
    351 | export interface TTemplateLiteral<T extends TTemplateLiteralKind[] = TTemplateLiteralKind[]> extends TSchema {
    352 |     [Kind]: 'TemplateLiteral';

package를 특정 버전으로 설치해야함.

npm install typescript@4.1.6
npm install -D @types/express-serve-static-core@4.17.3

오류

C:/VIW/MyReactApp-master/web/node_modules/@types/jest/index.d.ts
TypeScript error in C:/VIW/MyReactApp-master/web/node_modules/@types/jest/index.d.ts(1238,40):
',' expected.  TS1005

    1236 |      * Constructs the type of a spied class.
    1237 |      */
  > 1238 |     type SpiedClass<T extends abstract new (...args: any) => any> = SpyInstance<
         |                                        ^
    1239 |         InstanceType<T>,
    1240 |         ConstructorParameters<T>,
    1241 |         T extends abstract new (...args: any) => infer C ? C : never

타입스크립트 다시 설치.

yarn add typescript @types/node @types/react @types/react-dom @types/jest

오류

Cannot find type definition file for 'color-name'.
  The file is in the program because:
    Entry point for implicit type library 'color-name'

tsconfig.json 수정

"types": ["node"] 추가

{
  "extends": "./tsconfig-base.json",
  "compilerOptions": {
    "types": ["node"]
  },
}

오류 발생

TypeScript error in C:/VIW/MyReactApp-master/web/src/modules/department/components/DepartmentForm.tsx(61,16):
JSX element type 'Form' does not have any construct or call signatures.  TS2604

    59 |     renderForm = (formik: FormikProps<any>) => (
    60 |         <div className={'form'}>
  > 61 |               <Form onSubmit={formik.handleSubmit}>
       |                ^
    62 |                   <Form.Group widths='equal'>
    63 |                     <Form.Input
    64 |                             name='dName' fluid

/EugenioNhampossa/library-manager-web-admin :: 성공

하늘밝음 — Wed, 19 Jul 2023 09:33:35 +0900

https://github.com/EugenioNhampossa/library-manager-web-admin

npx create-react-app . --template typescript

npm install typescript @types/node @types/react @types/react-dom @types/jest

 yarn start

ag-grid/ag-grid-react-example :: 실패

하늘밝음 — Wed, 19 Jul 2023 09:14:43 +0900

https://github.com/ag-grid/ag-grid-react-example

> ag-grid-react-example@30.0.0 examples C:\VIW\ag-grid-react-example-master
> NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --mode development --open

'NODE_OPTIONS'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ag-grid-react-example@30.0.0 examples: `NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --mode development --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ag-grid-react-example@30.0.0 examples script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2023-07-19T00_14_02_275Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

'NODE'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는

하늘밝음 — Wed, 19 Jul 2023 09:12:55 +0900

Path에 C:\Program Files\nodejs 추가