lmjDev

MCP Server 간단 학습

mizzo — Tue, 27 May 2025 19:46:21 +0900

학습 순서

1. 간단한 개념 익히기

https://youtu.be/EswVjHZMn74

2. 상용화된 MCP 서버 사용해보며 익숙해지기

https://youtu.be/szUo30BOZlo

개발 시 유용해보이는 Tool

Context 7: 코딩 시 AI가 오래된 정보를 제공하거나 존재하지 않는 API를 환각하는 문제를 해결합니다.
- 참고: https://apidog.com/kr/blog/context7-mcp-server-kr/
Microsoft Playright MCP 서버: 실제 브라우저를 제어할 수 있는 도구를 제공합니다.
1. 웹 개발 후, 브라우저 E2E 테스트 할 때 좋아보임
Sequential Thinking: AI가 구조화된 사고 과정을 사용하여 문제를 해결하도록 돕습니다.
Browser Tools MCP: 웹 애플리케이션의 접근성, 성능, SEO 등을 감사하는 도구를 제공합니다.

사용 방법

MCP Server 사용을 위해선 MCP Client가 필요한데요

대표적으로 Claude for Desktop, Cursor 등이 있습니다.

저는 cursor 유료 회원으로 cursor를 사용하여 실습 했습니다만,

유료 결제를 안하셨거나 MCP 찍먹 용도로는 Claude for Desktop 무료 버전을 사용해 보실 것을 권장합니다. (다만, 토큰 소모가 많아서 답변이 잘릴 수 있습니다)

아래 방법대로 사용해보세요

원하는 MCP server를 아래 사이트에서 검색합니다.
- Smithery - Model Context Protocol Registry
- 로그인 필요
사용할 MCP Server를 선택 후, Client를 선택해 나오는 명령어를 쳐주면 설치 완료!
로그인 연동이 잘되어있다면 api-key도 자동설정됩니다

외부 api key가 필요한 경우 입력 값을 요청할 수 있습니다

3. 간단한 MCP Server 구축해보기

For Server Developers - Model Context Protocol

When creating the ApplicationHostBuilder, ensure you use CreateEmptyApplicationBuilder instead of CreateDefaultBuilder. This ensures that the server does not write any additional messages to the console. This is only neccessary for servers using STDIO tran

modelcontextprotocol.io

예제를 통해 실습하였습니다. 자세한 내용은 아래 내용을 참고해주세요.

MCP(Model Context Protocol) 서버 구축 및 이해하기

아래 내용을 기반으로 실습해보며, 모르는 내용들을 정리한 내용입니다.
(참고로 필자는 python 기반으로 진행했으며, python을 잘 몰라서 관련 내용도 명시되어 있습니다.)
추가로, 실습 예제를 통해 MCP 서버로 LLM을 어떻게 이해시키고 해당 tool이 사용되는지 정리해두었습니다.

For Server Developers - Model Context Protocol

modelcontextprotocol.io

UV(Uvicorn)란?

Uvicorn은 ASGI(Asynchronous Server Gateway Interface) 웹 서버 구현체로, 비동기 Python 웹 애플리케이션을 실행하기 위해 설계되었습니다.

주요 특징:

고성능: asyncio 기반 비동기 처리 지원
ASGI 호환: FastAPI, Starlette, Django 등의 ASGI 프레임워크와 함께 사용 가능
WebSocket 지원: 실시간 양방향 통신 지원

UV 패키지 관리자는 pip의 대안으로, Rust로 작성되어 더 빠른 패키지 설치를 제공합니다.

가상환경을 설정하는 이유

Set up your environment 부분 중

# Create virtual environment and activate it
uv venv
source .venv/bin/activate

주요 이점:

의존성 격리
- 프로젝트 간 패키지 버전 충돌 방지
- 시스템 Python 환경 보호
재현 가능한 환경
- 모든 개발자가 동일한 환경에서 작업 가능
- 개발 환경과 프로덕션 환경의 일관성 유지
MCP 서버 관련 특별 고려사항
- 특정 버전 의존성 관리
- ML 라이브러리 호환성 유지
- 실험적 기술의 업데이트 관리

UV 패키지 설치 명령어 이해하기

uv add "mcp[cli]" httpx

명령어 구성 요소:

uv add: UV 패키지 관리자의 설치 명령어 (pip install과 유사)
"mcp[cli]"
- mcp: 기본 패키지
- [cli]: extras(선택적 의존성) - CLI 관련 추가 기능 포함
httpx: 별도로 설치할 HTTP 클라이언트 라이브러리

MCP Tool 호출 로직

LLM이 질문에 의도를 파악하여 mcp의 tool 이름 및 설명을 기준으로 적절한 tool을 호출함

MCP에서 도구(tool) 호출 메커니즘

LLM의 도구 선택 과정:
1. 도구 정의 인식: Claude와 같은 LLM은 서버에서 제공한 도구 정의(이름, 설명, 파라미터 등)를 받습니다
2. 의도 파악: 사용자 질문의 의도를 분석합니다
3. 도구 선택: 의도에 가장 적합한 도구를 선택합니다
4. 파라미터 추출: 질문에서 필요한 파라미터 값을 추출합니다
5. 도구 호출: 선택한 도구를 적절한 파라미터와 함께 호출합니다
도구 정의 예시:

tools = [
    {
        "type": "function",
        "function": {
            "name": "get_forecast",
            "description": "Get the weather forecast for a location",
            "parameters": {
                "type": "object",
                "properties": {
                    "location": {
                        "type": "string",
                        "description": "The city and state, e.g. San Francisco, CA",
                    }
                },
                "required": ["location"],
            },
        },
    }
]

MCP 데코레이터 변환 과정

Python 함수 데코레이터 @mcp.tool()은 함수를 LLM이 이해할 수 있는 도구 정의로 변환합니다.

이 과정을 통해 개발자는 도구 정의를 수동으로 작성할 필요 없이, 잘 문서화된 Python 함수를 작성하는 것만으로 LLM이 활용할 수 있는 도구를 쉽게 만들 수 있습니다.

원본 코드:

@mcp.tool()
async def get_alerts(state: str) -> str:
    """Get weather alerts for a US state.

    Args:
        state: Two-letter US state code (e.g. CA, NY)
    """
# 함수 구현...

변환된 도구 정의:

{
    "type": "function",
    "function": {
        "name": "get_alerts",
        "description": "Get weather alerts for a US state.",
        "parameters": {
            "type": "object",
            "properties": {
                "state": {
                    "type": "string",
                    "description": "Two-letter US state code (e.g. CA, NY)"
                }
            },
            "required": ["state"]
        }
    }
}

변환 요소:

함수 이름 → name 필드
독스트링 첫 줄 → description 필드
매개변수 및 타입 힌트 → parameters 필드
필수 매개변수 → required 필드
매개변수 설명 → Args 섹션에서 추출

이 방식으로 개발자는 잘 문서화된 Python 함수를 작성하는 것만으로 LLM이 활용할 수 있는 도구를 쉽게 만들 수 있습니다.

yarn 2+(yarn3) production install 방법

mizzo — Thu, 1 Jun 2023 22:38:18 +0900

$ yarn workspaces ls
$ yarn workspaces focus [workspace] --production

yarn plugin import workspace-tools

devdependencies 말고 production dependencies만 설치하고 싶었는데

yarn2 부터는 `yarn install --production`이 먹지 않는다.

yarn1에서 제공하던 아래 명령어를 치면 아래처럼 `yarn workspaces focus`를 대신 쓰라고 나온다. (참고)

$ yarn install --production

 YN0050: The --production option is deprecated on 'install'; use 'yarn workspaces focus' instead

그래서 그렇게 또 치면?

아래처럼 syntax error가 뜬다. ㅎㅎㅎ

$ yarn workspaces focus --production

Unknown Syntax Error: Command not found; did you mean:

$ yarn workspaces list [--since] [-R,--recursive] [-v,--verbose] [--json]

이유는 workspace-tools 이 없기 때문이다. 공식 사이트에서 확인할 수 있다.

아래 명령어로 설치하면 된다. (참고)

yarn plugin import workspace-tools

그럼 설치가 잘된다~

특정 workspaces를 지정하고 싶을 경우 아래처럼 확인하여 설치하고 아니면 `--all`을 쓰자.

$ yarn workspaces ls
$ yarn workspaces focus [workspaceName] --production

$ yarn workspaces focus --all --production

[Node.js] node-sass 에러 - npm ERR! path /node_modules/node-sass

mizzo — Mon, 10 Jan 2022 09:37:54 +0900

기존에 작업 중이던 프로젝트 코드를 로컬에서 구동하던 중

모듈 install 단계에서부터 에러가 발생되어 트러블 슈팅했던 내용을 정리해본다.

늘 그렇듯이 결론부터 말하자면

node-sass 버전이 설치된 node 버전과 상이한 버전이 설치되어 발생되는 이슈다.

해당 프로젝트의 경우 yarn도 사용했었으니 참고!

원인

내 PC에 설치된 node와 node-sass 모듈의 버전은 아래와 같았다.

# 현재 노드 버전 - stable version은 현재 기준 16.13.1이다.
node -v                                                                                                                 ✔  09:27:05  
v16.13.0

# 구버전 설치됨
npm list | grep node-sass                                                                                     1 ✘  27s   09:24:23  
├── node-sass@4.14.1

아래 공식문서 내용 처럼 나의 경우 Node 16을 사용하고 있으니 node-sass는 6.0+ 이상의 버전이 필요하다.

공식문서 내용

해결

node-sass를 삭제하고 새 버전으로 설치해주자.

유의 사항은 yarn 사용시 yarn도 함께 삭제 후 재 설치해주어야 한다!

# node-sass 모듈 삭제
npm uninstall node-sass
yarn remove node-sass

# 재설치
npm install -D node-sass
yarn add -D node-sass

# 버전 확인
npm list | grep node-sass                                                                                     ✔  8s   09:33:06  
├── node-sass@7.0.1

이후에 yarn install 해주니깐 잘 설치되었다 ☺️

로그 내용

아래는 문제 시 발생했던 로그 내용이다.

npm install 시 에러 로그

npm ERR! code 1
npm ERR! path [프로젝트 경로]/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/local/bin/node [프로젝트 경로]/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/usr/local/bin/node',
npm ERR! gyp verb cli   '[프로젝트 경로]/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.0 | darwin | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` succeeded python2 /usr/bin/python2
npm ERR! gyp verb check python version `/usr/bin/python2 -c "import sys; print "2.7.18
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 16.13.0
npm ERR! gyp verb command install [ '16.13.0' ]
npm ERR! gyp verb install input version string "16.13.0"
npm ERR! gyp verb install installing version: 16.13.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 16.13.0
npm ERR! gyp verb build dir attempting to create "build" dir: [프로젝트 경로]/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? [프로젝트 경로]/node_modules/node-sass/build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: [프로젝트 경로]/node_modules/node-sass/build/config.gypi
npm ERR! (node:5986) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: [프로젝트 경로]/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: [프로젝트 경로]/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '[프로젝트 경로]/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '[프로젝트 경로]/node_modules/node-sass/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '[프로젝트 경로]/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/[유저 네임]/.node-gyp/16.13.0/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/[유저 네임]/.node-gyp/16.13.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=[프로젝트 경로]/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/[유저 네임]/.node-gyp/16.13.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=[프로젝트 경로]/node_modules/node-sass',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
npm ERR! 
npm ERR! No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
npm ERR! 
npm ERR! No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
npm ERR! 
npm ERR! gyp: No Xcode or CLT version detected!
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit ([프로젝트 경로]/node_modules/node-gyp/lib/configure.js:345:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 21.2.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "[프로젝트 경로]/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd [프로젝트 경로]/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.13.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/[유저 네임]/.npm/_logs/2022-01-10T00_14_29_988Z-debug.log

yarn install시 에러 로그

error [프로젝트 경로]/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: [프로젝트 경로]/node_modules/node-sass
Output:
Building: /usr/local/bin/node [프로젝트 경로]/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/usr/local/bin/node',
gyp verb cli   '[프로젝트 경로]/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@16.13.0 | darwin | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "/usr/local/opt/python@3.9/bin/python3" in the PATH
gyp verb `which` succeeded /usr/local/opt/python@3.9/bin/python3 /usr/local/opt/python@3.9/bin/python3
gyp ERR! configure error 
gyp ERR! stack Error: Command failed: /usr/local/opt/python@3.9/bin/python3 -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                       ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack 
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
gyp ERR! stack     at Socket.<anonymous> (node:internal/child_process:450:11)
gyp ERR! stack     at Socket.emit (node:events:390:28)
gyp ERR! stack     at Pipe.<anonymous> (node:net:687:12)
gyp ERR! System Darwin 21.2.0
gyp ERR! command "/usr/local/bin/node" "[프로젝트 경로]/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd [프로젝트 경로]/node_modules/node-sass
gyp ERR! node -v v16.13.0
gyp ERR! node-gyp -v v3.8.0

참고로 yarn, npm 전체 설정되어 있는데 npm만 지울 경우 아래와 같은 에러가 발생된다.

Syntax Error: Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.

[leetCode][알고리즘] 35. Search Insert Position

mizzo — Tue, 4 Jan 2022 23:24:35 +0900

문제 설명

LeetCode
35. Search Insert Position

찾는 대상이 있다면 해당 index를 리턴하고, 없다면 순서 상 들어갈 곳의 index를 리턴하세요.

알고리즘 복잡도는 O(log n)이어야 합니다.

제한사항

1 <= nums.length <= 104
-104 <= nums[i] <= 104
nums contains distinct values sorted in ascending order.
-104 <= target <= 104

입출력 예

Input: nums = [1,3,5,6], target = 5
Output: 2

Input: nums = [1,3,5,6], target = 2
Output: 1

Input: nums = [1,3,5,6], target = 7
Output: 4

문제 풀이

이진탐색으로 찾으면 된다. (BinarySearch)

단, 예외처리 및 빠른 처리를 위해 target이 제일 작고/큰 경우만 먼저 체크했다.

응용해서 우리는 isBadVersion(version) 기준으로 체크하면 된다.

문제의 배열은 1부터 시작하나, 우리는 0부터 체크하는 것만 유의하자.

nums는 항상 정렬된 순서로 들어온다는 점을 활용하여 예외처리한다.
이진탐색으로 순서상 들어갈 곳(자신보다 작은 값 중 제일 큰 값의 다음 위치)을 찾는다.

Code

var searchInsert = function(nums, target) {
    const latest = nums.length-1
    let left = 0, right = latest
    
    if(nums[latest] < target) return latest+1
    else if(nums[0] > target) return 0
    
    let answer = -1
    
    while(left <= right) {
        const i = left + Math.floor((right - left) / 2)
        
        if(nums[i] < target) {
            answer = Math.max(answer, i)
            left = i+1
        } else right = i-1
    }
    return answer+1
};

결과

[leetCode][알고리즘] 278. First Bad Version

mizzo — Tue, 4 Jan 2022 18:02:43 +0900

문제 설명

LeetCode
278. First Bad Version

PM이 되어 첫 Bad Version을 찾아라. 불량 이후에 출시된 버전들은 모두 Bad로 체크된다.

버전의 개수와 Bad Version임을 알려주는 API(함수)가 주어질 때, 최초 Bad Version 인덱스를 출력하라.

제한사항

1 <= bad <= n <= 231 - 1

입출력 예

Input: n = 5, bad = 4
Output: 4
Explanation:
call isBadVersion(3) -> false
call isBadVersion(5) -> true
call isBadVersion(4) -> true
Then 4 is the first bad version.

Input: n = 1, bad = 1
Output: 1

문제 풀이

이진탐색으로 찾으면 된다. (BinarySearch)

응용해서 우리는 isBadVersion(version) 기준으로 체크하면 된다.

문제의 배열은 1부터 시작하나, 우리는 0부터 체크하는 것만 유의하자.

left = 0, right = n-1 시작, 중간지점(i)설정
isBadVersion(version) 이 false면 해당 지점 이후로 탐색 left=i+1
isBadVersion(version) 이 true면 min 체크, 해당 지점 이전 탐색 right=i-1

Code

var solution = function(isBadVersion) {
    return function(n) {
        let min = n
        let left = 0, right = n-1
        
        while(left <= right) {
            const i = left + Math.floor((right - left) / 2)
        
            if (isBadVersion(i+1)) {
                min = Math.min(min, i)
                right = i-1
            } else left = i+1
        }
        return min + 1
    };
};

결과

[React/Code Splitting] 컴포넌트 Dynamic import하여 lazy loading 적용하기

mizzo — Sun, 19 Dec 2021 17:39:30 +0900

라우팅 구현 중에, 경로에 따라 유동적으로 컴포넌트를 호출하여 보여줄 방법을 고민하다가

대표적인 성능 개선 기법인 코드분할(code splitting)방식을 응용하여 적용한 내용입니다.

코드 분할이란?
코드 분할은 여러분의 앱을 “지연 로딩” 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다.

목표

1. 목록에서 선택한 값(=ID)에 따라 path 설정하여 라우팅

2. 전달받은 route param(=ID) 기준으로 필요한 컴포넌트 lazy loading하여 렌더링

구현

우선 프로젝트 구조는 아래와 같습니다.

스캐폴딩

path 경로에 따라 projects 폴더 하위의 경로에 있는 index.js를 호출하는게 저의 목표입니다.

예시
- /projects/1 -> projects/1/index.js 호출
- /projects/2 -> projects/2/index.js 호출

react-router-dom을 사용하여 라우팅 구현을 해주기 위해,

App.js에는 아래와 같이 BrowserRouter 설정을 해두었으며, Home이라는 컴포넌트에 링크 설정을 해두었습니다.

전체 코드가 궁금하신 분들은 아래 '더보기'를 눌러 코드를 확인해주세요.

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
      <Router>
          <App />
      </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

// Home.js
import logo from '../logo.svg'
import '../App.css';
import {useState} from "react";
import {Link} from 'react-router-dom';

function Home() {

    const [projects] = useState([{
        id: 1,
        name: 'project1',
        date: '2021.12.06',
    }, {
        id: 2,
        name: 'project2',
        date: '2022.01.06',
    }])

    return (
        <div className="App">
            <header className="black-nav">
                <img src={logo} alt="logo" style={{width: '30px'}}/>
                <div>React Portfolio</div>
            </header>
            <div className="main-container">
                {
                    projects.map((project, i) => {
                        const {id, name, date} = project
                        return (
                            <div className="project" key={i}>
                                <h3>
                                    <Link to={`/project/${id}`}>{name}</Link>
                                </h3>
                                <p>{date}</p>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default Home;

1. 목록에서 선택한 값(=ID)에 따라 path 설정하여 라우팅

우선, react-router-dom 공식문서 내용에 따라 중첩 라우팅(Nested Routing)을 구현해봅시다.

예제와 동일하게 설정하였으며, 선택 값의 ID를 :projectId로 선언하여 Project의 parameter로 전달합니다.

import './App.css';
import Home from './routes/Home'
import {Route, Switch} from 'react-router-dom';

function App() {
    return (
            <Switch>
                <Route exact path="/">
                    <Home/>
                </Route>
                <Route path='/project/:projectId'>
                    <Project/>
                </Route>
            </Switch>
    );
}

function Project() {
    const {projectId} = useParams();
    console.log(projectId)
    // TODO 필요한 컴포넌트를 import해 리턴할 예정입니다.
    return <></>
}

export default App;

2. 전달받은 route param(=ID) 기준으로 필요한 컴포넌트 lazy loading

위에 명시한 스캐폴딩 구조에 따라, 전달받은 parameter(=ID) 기준으로 모듈을 import 해봅시다.

단 미리 import하는 방식은 비효율적이므로, 필요할 때만 유동적으로 호출 할 수 있도록 React.lazy를 활용하겠습니다.

React 코드분할 공식문서 내용에 따라 아래와 같이 설정하였습니다.

- React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다.

=> Project 내에서 ID 기반으로 경로를 설정하여 컴포넌트를 렌더링합시다.

(*참고로 index는 생략 가능합니다. 상위 폴더까지 지정하면 자동 호출 됨)

- 참고로 lazy loading되는 모듈은 반드시 default export 되어야합니다.

function Project() {
    const {projectId} = useParams();
    const Component = lazy(() => import(`./projects/${projectId}`))
    return <Component/>
}

여기까지하면 에러가 발생될텐데, 그 이유는

lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 하기 때문입니다.

- Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해줍니다.

=> 우리도 예제와 같이 로딩 중임을 알려줍시다.

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Switch>
                <Route exact path="/">
                    <Home/>
                </Route>
                <Route path='/project/:projectId'>
                    <Project/>
                </Route>
            </Switch>
        </Suspense>
    );
}

그럼 끝

[Programmers 알고리즘][86971] 9주차_전력망을 둘로 나누기

mizzo — Mon, 18 Oct 2021 00:39:27 +0900

문제 설명

Programmers Weekly Challenge
9 week

송전탑의 개수 n, 그리고 전선 정보 wires가 매개변수로 주어지며, n개의 송전탑이 하나의 트리 형태로 연결되어 있습니다.

전선들 중 하나를 끊어서 송전탑 개수가 가능한 비슷하도록 두 전력망으로 나누었을 때,

두 전력망이 가지고 있는 송전탑 개수의 차이(절대값)를 return 하도록 solution 함수를 완성해주세요.

제한사항

n은 2 이상 100 이하인 자연수입니다.
wires는 길이가 n-1인 정수형 2차원 배열입니다.
- wires의 각 원소는 [v1, v2] 2개의 자연수로 이루어져 있으며, 이는 전력망의 v1번 송전탑과 v2번 송전탑이 전선으로 연결되어 있다는 것을 의미합니다.
- 1 ≤ v1 < v2 ≤ n 입니다.
- 전력망 네트워크가 하나의 트리 형태가 아닌 경우는 입력으로 주어지지 않습니다.

입출력 예

N	wires	result
9	[[1,3],[2,3],[3,4],[4,5],[4,6],[4,7],[7,8],[7,9]]	3
4	[[1,2],[2,3],[3,4]]	0
7	[[1,2],[2,7],[3,7],[3,4],[4,5],[6,7]]	1

문제 풀이

wires에 따라, 트리를 완성 (addConnect)
1. tree = [], tree[v-1] = [connected list]로 구성됨 (v는 1부터 시작, tree는 0부터 시작)
2. wire = [v1, v2] 에 대해 tree에 각각 연결 노드 저장해준다. (v1 -> v2, v2 -> v1)
다시 wires를 돌며, 각 전선이 끊어졌을 때의 차이를 구하고 min을 갱신 (updateDiff)
1. 한쪽 전력망의 송전탑 개수를 구한다.
  - 타겟 노드의 연결된 노드 중 끊어진 노드를 제외한 모든 노드의 개수를 구한다.
  - 각 노드가 혼자 남을때 까지 재귀 방문하여 총 개수를 구한다.
2. 차이를 구한 후 min을 갱신한다. (차이 = 절대값(C*2 - N))

Check Point

트리는 N개의 노드와, N-1개의 간선으로 이루어져 있다.
- 하나의 트리 형태이므로, 최대 개수 차이는 N-1이다.
- 한쪽 전력망(트리)의 송전탑(노드) 개수가 C라고 했을 때, 다른쪽의 개수는 N-C이다.
  - 즉, 차이는 절대값(C - (N - C))이다. 절대값(C*2 - N)
전력탑의 개수를 구할 때 체크하는 노드의 수를 항상 추가한다. (+1)
- v번 노드에 연결된 노드의 총 개수를 count(v)라고 할 때
  - 총 개수 = count(v) + 1(자기 자신)
인덱스와 문제의 전선 정보(노드 숫자)가 다르지 않은지 잘 체크하자.
- 나의 경우 input 전선 정보(1 ≤ v1 < v2 ≤ n)이지만, Tree 인덱스는 0~n-1로 지정했다.

Code

효율성보다 가독성에 중점을 둔 코드입니다.

function solution(n, wires) {
    class Tree {
        tree;
        min;

        constructor(n) {
            this.tree = new Array(n);
            this.min = n-1;
        }

        addConnect(v1, v2) {
            this.connect(v1, v2);
            this.connect(v2, v1);
        }

        connect(v, target) {
            const connected = this.tree[v-1] || [];
            connected.push(target);
            this.tree[v-1] = connected;
        }

        size(v) {
            return (this.tree[v-1] || []).length;
        }

        getCount(v, except) {
            if(this.size(v) === 1)
                return 1;
            const connected = this.tree[v-1] || [];
            return connected.reduce((pev, cur) => {
                if (cur === except) return pev;
                return pev + this.getCount(cur, v);
            }, 0) + 1;
        }

        updateDiff(v1, v2) {
            const v1Count = this.getCount(v1, v2);
            const diff = Math.abs(v1Count * 2 - n);
            this.min = Math.min(this.min, diff);
        }
    }
    const tree = new Tree(n);
    wires.forEach(([v1, v2]) => tree.addConnect(v1, v2));
    wires.forEach(([v1, v2]) => tree.updateDiff(v1, v2));

    return tree.min;
}

더 생각해보기

다른 풀이들을 보니, DP 문제로 메모이제이션 방식으로 좀 더 시간 복잡도를 줄일 수 있을 것 같다.

[React / Bugfix] Unknown Prop Warning

mizzo — Mon, 4 Oct 2021 14:24:44 +0900

버그 내용

Warning: React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

원인

react warning computedMatch regarding some case issues?

I have props named as isAuthenticated and it also shows that some case warning persists in my console. Please check it. import React,{Component} from "react"; import {BrowserRouter as Router, Swit...

stackoverflow.com

Unknown Prop Warning – React

A JavaScript library for building user interfaces

reactjs.org

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

불확실한, 알 수 없는 DOM 요소를 렌더링하려고 할 때 발생되는 에러인 것 같다.

문서 내용을 보아하니, 불확실한 props 요소를 사용하여 렌더링할 때도 발생되는 에러로 확인된다.

나의 경우 react-router-dom을 사용하던 중, <Switch> 하위에 삼항 연산자를 사용하여 HTML Tag를 지정해주어 발생된 문제였다.

해결

어디까지나 아래 케이스에 대한 해결법일 뿐이니 참고만 부탁드립니다.

react-router-dom의 <Switch> 하위에 Fragment를 추가해주었다. (<></>)

디버깅을 시각화해주는 온라인 코드 비주얼라이저 PythonTutor(w/ JavaScript ...)

mizzo — Tue, 28 Sep 2021 17:28:33 +0900

책을 보다가 디버깅하기 좋은 사이트를 알게되어 추천하고자 글을 쓴다.

코딩테스트, 알고리즘 문제 풀 때 굉장히 유용하다.

온라인 코드 비주얼라이저 PythonTutor

접속하면 아래와 같은 화면이 뜬다.

PythonTutor 메인 화면

화면 내용처럼 코드를 입력하면 시각화 해주고 디버깅해주며

어떤 시점에서 어떤 값이 변하고 함수 호출 스택이 바뀌었는지 쉽게 확인할 수 있게 해주는 사이트이다.

이름 때문에 Python만 되는 줄 알았는데 다행히 아래와 같이 여러 언어를 지원하고 있었다.

Python
JavaScript
Java
C / C++
Ruby

사용방법

간단하다. 사이트 접속 후 언어를 선택하고 코드를 삽입, [Visualize Execution] 버튼만 누르면 끝.

단, 아래 사진처럼 1000 스텝 이상의 케이스에 대해선 지원을 하고 있지 않다고하니 주의하자.

실행 화면

그럼 아래처럼 코드가 실행되는데,

왼쪽 하단의 버튼들을 클릭해서 다음 스텝으로 넘어가며 추적하면 된다.

왼쪽 화면에선 내가 어느 라인에 있는지, 재귀 중인지 등 시점을 확인할 수 있고

오른쪽 화면에선 해당 스텝에서 추적된 시각화된 결과가 도출된다.

배열 등 자료구조를 시각화 해주어서 매우 신박하다.

디버깅 많으로 헷갈려서 직접 그리며 하는 경우가 있는데, 그럴 필요 없이 이 사이트에서 돌려보면 될 것 같다!

스파르타 코딩 신년운세 코딩 패키지 회고록

mizzo — Tue, 28 Sep 2021 00:54:15 +0900

(이런 배너였던 것 같음)

어느날 카톡 배너에 스파르타 코딩 광고가 나와서 홀린듯이 들어가서 내용을 확인해봤고...

안 할 수가 없잖아.... ‍♀️

경품을 보고 무의식적으로 참여를 눌렀다.......

비록 시작은 경품이었지만 끝은 유익함으로 얻었던 강의에 대한 간단한 회고록 및 스파르타 코딩 체험 후기를 작성해보고자 한다.

참여한 강의

4개의 강의 중 하나를 선택해서 48시간 안에 강의를 학습하고 과제를 제출하는 방식이었다.

나는 그 중 <전시하라/> (a.k.a 2021 신년운세) 강의를 학습하였다.

유일하게 난이도 ⭐️⭐️ 이라서 선택하였지만,

웹 개발자인 나로서는 기초에 가까운 내용이어서 복습, back to the basic에 목표를 두고 강의를 수강하였다.

결과물!!

제공해주시는 이미지, css를 참고하여 개발했더니 완성 페이지가 너무 귀여워서 만족스럽다.

결과물은 여기서 확인할 수 있다.

여러 사이트에서 강의 따라 학습 진행해봤지만, 파일 업로드로 배포까지 할 수 있게 해준 사이트는 처음이다...

개인 서버가 없어서 결과물을 로컬에서만 돌리던게 항상 아쉬웠는데..!

처음 개발하시는 분들이 배포해서 자랑할 수 있게하다니! 코린이들의 흥미를 더 키워줄 수 있을 것 같다고 느꼈다. ㅎㅎㅎ

회고록

수강 목적: 복습, back to the basic
배운 점/잘한 점: 프레임워크 없이 HTML, CSS, JavaScript만으로 웹 페이지 개발을 시간 내에 도전
보완/발전하고 싶은 점: 이직을 위한 프론트엔드 과제 풀이를 위하여 Vanila JS 기반의 더 난이도 있는 문제들을 풀어서 속도 및 실력 향상
앞으로의 계획 : 학습한 내용을 바탕으로 웹 과제 실습, 연습 (프로그래머스 등으로)

스파르타 코딩 체험 후기

사실 스파르타 코딩은 마케팅으로 많이 만나서, 인스타그램 이벤트 같은 것만 참여만 진행하고 강의를 직접 들어본적이 없었다.

이번 계기로 간단하게나마 강의를 체험해 볼 수 있었는데, 다른 학습 사이트와 비교해서 장점이 많이 보여서 언급을 해보고자 한다.

웹 페이지가 재미있다.
- 다른 사이트와 다르게 게임 형식으로 디자인이 되어 있어서 직접 퀘스트를 깨는 느낌이 들어 흥미로웠다.
- 전체적으로 인터랙션이나 UI/UX가 깔끔하고 학습에 최적화되었단 느낌이 들었다.
- 그래서 그런지 사이트에 좀 더 머물고 싶단 느낌이 있었던 것 같다.
정리가 잘되어 있다.
- 내가 학습한 강의만 그런진 잘 모르겠지만, 노션으로 강의 내용을 정리해두셔서 복습하기 편했다.
- 코드 뿐만 아니라, 내용도 정리되어 있어 별도로 정리가 필요없단 것도 좋았다.
- 다만, 직접 코드를 작성하고 정리하는데 방해가 되기도 해서 학습하는데 어쩌면 단점이 될 수도 있을 것 같다.
강의가 다양하고 구성이 좋다.
- 메인을 보니 비전공자가 더 많이 학습하는 사이트 같다는 느낌을 받았는데, 그래서 그런지 비개발자, 비전공자에게 큰 도움이 될 것 같은 강의가 많다.
- 부트 캠프도 있었다. 항해 99? 실제로 비전공자인데 개발 직무로 이직을 준비 중인 친구가 실무와 가까운 협업 프로젝트를 하고 싶다고 말해왔어서, 바로 추천해주었다.
- 강의 완주를 위해 카톡 알람, 매니저 전화도 온다고 한다. 생각보다 강의 완강이 힘든데 괜찮은 제도 같다.
- 생각보다 다양하고 전문적인 강의 들이 많아 보였다. 전공자, 현업 개발자(나)를 위한 강의는 비교적 적을 것 같다 생각했는데 알고리즘부터 프론트엔드 리액트 심화반까지 많았다.

이번 강의 학습 회고보다 스파르타 코딩 후기가 많이 긴데....

강의 학습 내용도 좋았지만, 좋은 교육 사이트를 찾은 것 같아서 더 뿌듯하기 때문에 그런걸로 ㅎㅎ

리액트 강의 학습 한번 고민해봐야겠다.