오랜만에 코딩 관련 블로그 글 써보네요 ㅎㅎ

최근 Google 트렌드에서 mCP 서버에 대한 검색량이 폭발적으로 증가하고 있습니다. 개발자로서 mCP를 이해하고 mCP 서버를 구축하는 방법을 배우는 것은 앞으로 매우 가치 있는 기술이 될 것입니다. 이번 글에서는 mCP가 무엇인지, 어떻게 작동하는지, 그리고 직접 mCP 서버를 구축하는 방법에 대해 알아보겠습니다.

mCP(Model Context Protocol)란?

mCP는 AI 애플리케이션이 외부 시스템과 연결되는 방식을 표준화하기 위해 Anthropic에서 개발한 프로토콜입니다. 쉽게 말해, AI 애플리케이션을 위한 USB-C 포트와 같은 역할을 합니다. 기존에는 각 AI 개발자가 개별적으로 시스템을 구축해야 했지만, mCP를 통해 표준 인터페이스를 사용하여 다른 시스템과 쉽게 연결할 수 있습니다.

mCP의 핵심 개념

mCP는 두 가지 주요 요소로 구성됩니다.

1. mCP 서버: 데이터, 도구 및 프롬프트를 노출하는 서버
2. mCP 클라이언트: mCP 서버에 연결하여 제공된 리소스를 활용하는 AI 애플리케이션 (예: Claude, Csor)

mCP의 주요 기능

• 리소스(Resources): 서버에서 노출하는 데이터(파일, 데이터베이스 레코드, API 응답 등)
• 도구(Tools): 서버에서 실행되는 함수 (예: 메시지 전송, 데이터베이스 업데이트)
• 프롬프트(Prompts): AI 모델이 더 나은 질문을 할 수 있도록 돕는 템플릿

이미 Claude, Stripe, Neon 등 주요 기업들이 공식적인 mCP 서버를 발표했으며, Smith.ai에서는 2,000개 이상의 커뮤니티 기반 mCP 서버를 탐색하고 설치할 수 있습니다.

mCP 서버 구축하기

이제 Python SDK를 사용하여 간단한 mCP 서버를 만들어 보겠습니다. 예제로 주식 거래 시스템을 구축해보겠습니다.

1. Python SDK 설치

pip install mcp-server

2. mCP 서버 생성

from mcp_server import FastMCP

app = FastMCP(name="Stock Trading Server")
app.run()

3. 리소스 추가 (시장 상태 확인)

from mcp_server import resource

@app.resource("market/state")
def get_market_state():
    return {"status": "open" if is_market_open() else "closed"}

4. 도구 추가 (주식 매수 및 매도)

from mcp_server import tool

@app.tool("stock/buy")
def buy_stock(symbol: str, quantity: int):
    return {"message": f"{quantity} shares of {symbol} bought."}

@app.tool("stock/sell")
def sell_stock(symbol: str, quantity: int):
    return {"message": f"{quantity} shares of {symbol} sold."}

5. 프롬프트 추가 (주식 분석 템플릿 제공)

from mcp_server import prompt

@app.prompt("stock/analyze")
def analyze_stock(symbol: str):
    return f"Analyze the stock {symbol} and provide financial insights."

이제 서버가 리소스, 도구, 프롬프트를 포함하여 완전한 mCP 서버로 동작하게 됩니다.

mCP 서버 연결하기

Claude와 연결

1. Claude 데스크톱 앱을 실행합니다.
2. 설정 → 개발자 모드 → claude-desktop-config.json 파일 편집
3. 다음 코드를 추가:

{
  "servers": [
    {
      "name": "Stock MCP Server",
      "command": "uvicorn main:app --reload"
    }
  ]
}

1. Claude를 재시작하면 연결 완료!

Cursor와 연결

1. Cursor 설정에서 mCP 서버 추가
2. 서버 이름 입력 후 실행 명령 (uvicorn main:app --reload) 추가
3. 연결된 후, AI 챗 인터페이스에서 주식 매매 실행 가능

mCP의 미래 전망

mCP는 AI 애플리케이션 개발에 있어 새로운 가능성을 열어줄 중요한 기술입니다. 개발자는 AI와의 상호작용을 표준화하여 더 나은 사용자 경험을 제공할 수 있으며, UI가 아닌 채팅 인터페이스 중심의 새로운 패러다임이 도래할 가능성도 큽니다.

하지만, AI 기업들이 mCP 서버의 접근을 제한하는 폐쇄형 생태계를 만들 가능성도 배제할 수 없습니다. OpenAI, Google, DeepMind 등 주요 AI 기업들이 mCP를 채택한다면, AI 에이전트 개발자들에게 더욱 강력한 기회가 열릴 것입니다.

mCP의 발전과 함께 AI 시대의 변화에 발맞춰 나가세요. 개발자로서 새로운 기회를 포착하고 mCP 서버 구축 기술을 익히는 것은 앞으로의 경쟁력을 높이는 데 큰 도움이 될 것입니다!

텔크s

telks.tistory.com

Install hangul font in Kali Linux

$ sudo apt-get install fonts-nanum*

자, 업데이트 및 설치를 완료하셨으면 이 글과 웹상에 뜨는 모든 한글이 다 보일겁니다!

sudo apt install fcitx-lib*

모든 입력기를 다 설치해 줍니다.

sudo apt install fcitx-hangul -y

한글 입력기도 설치해줍니다.

reboot 를 해주시고,

 input 을 검색해줍니다.

확인 클릭

예 클릭

fcitx 클릭후 확인 누르시면 적용되신겁니다.

이제 입력 할때 Ctrl + space 해주시면 한글이 입력될겁니다.

텔크s

telks.tistory.com

안녕하세요 블루밍구입니다.

최근에 PHP 환경에서 웹사이트를 구축해보고 싶어서 진행을 해봤는데,

웹 파일중에 파이썬 파일이 있어서 돌려볼려고 하니까 안되더라구요.

그래서 파이썬 버전을 체크해보니....역시나.... 파이썬 2.7.15+ 로 되어 있더라구요.

아무튼 업데이트를 진행할려고 하니까 자꾸 에러만 생기고 구름 공식 help 사이트에서 찾아서 진행해 봐도 안되더라구요...

root@goorm:/workspace/test# sudo apt install python3.8
Reading package lists... Done
Building dependency tree
.
. 대충 업데이트 내용
.
Setting up libpython3.8-stdlib:amd64 (3.8.0-3ubuntu1~18.04.2) ...
Setting up python3.8 (3.8.0-3ubuntu1~18.04.2) ...
root@goorm:/workspace/test# python --version
Python 2.7.15+

공식 웹사이트에서 제공한데로 sudo apt install python3.8 업데이트 했으나, 

업데이트가 안된 모습이 보입니다.

그래서 전지전능한 Chat GPT 한테 물어보니까 업데이트가 잘 진행되어서 공유하고자 합니다.

제가 원하는 버전은 파이썬 3.7 입니다. 만약에 더 상위 버전을 원하

시다면

전지전능한 챗지피티 한테 아래 코드를 학습 시키고 진행하세요.

sudo apt-get update
sudo apt-get install python3.7

sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.7 1

그러고 다시 파이썬 버전을 확인해보시면,

python --version

이상으로 구름 IDE PHP 서버에서 파이썬 업데이트 하기 였습니다!

감샴돠~~~~

텔크s

telks.tistory.com

안녕하세요, 블루밍구 입니다.

오랜만에 코딩만 올리는 게 아닌 강의를 올려보네요.

이번 칼리 리눅스 kali linux 강의는 제가 지금까지 배우고 경험한 해킹 기술을 공유하는 시리즈로 해볼까 합니다.

도중에 막히는 게 있으면 바로 댓글 주세요, 칼답변해 드리도록 노력하겠습니다.

이 강의를 배웠다고 해서 막 네이버나 다른 사이트를 해킹하는 데에 쓰지 마세요!!!

바~~~~~로 경찰행입니다!!!

아무튼 첫 강의는 칼리리눅스 설치를 우선 해보도록 해보겠습니다.

먼저, Kali Linux 사이트로 

들어가시면 이런 화면이 뜰 겁니다, 여기서 저희는 다운로드를 바로 클릭할 겁니다.

다운로드를 컴퓨터에 아예 설치하고 싶으시면 Installer Images를 클릭하셔도 되지만,

저희는 윈도우나 맥 환경에서 돌릴 거기 때문에 Virtual Machines를 클릭해 줍니다.

Virtual Machines를 클릭하시면 이렇게 뜨는데, VMware 2.4G를 클릭해 줍니다.

만약에 VirtualBox를 쓰신다면 VirtualBox 2.4G를 클릭해줍니다.

압축된 파일을 압축해제해 줍니다.

다음으로는 VMware 혹은 VirtualBox를 다운로드받아 줍니다.

둘 다 세팅하는 과정은 똑같으니 걱정 안 하셔도 됩니다!

파일 > 열기에서 저희가 압축해제한 kali linux를 열어줍니다.

열기가 완료되었으면,

시작하기 버튼을 눌러줍니다.

그럼 이렇게 로그인 화면을 뜰 텐데

아이디: kali

비번: kali

여기까지 오셨으면 진짜 수고하셨습니다.

다음 강의에서는 칼리 리눅스 환경 설정을 해보겠습니다.

질문 있으시면 댓글 남겨주세요!

감사합니다!

텔크s

telks.tistory.com

VS Code와 VSCodium은 모두 인기 있는 코드 편집기이지만 VSCodium은 몇 가지 독특한 이점을 제공하여 대안으로 고려할 가치가 있습니다. 이 문서는 VS Code에서 VSCodium으로 전환하려는 이유 중 상위 5가지를 나열합니다

VS 코드는 마이크로소프트가 2015년에 출시한 최신 IDE입니다. 디버깅, 구문 강조, 코드 폴딩, 코드 자동 완성, 코드 리팩토링, 코드 스니펫 및 소스 제어 통합 등 최신 소프트웨어 개발 도구에서 기대할 수 있는 모든 기능을 제공합니다.

2022년 스택 오버플로 조사에 따르면 VS Code는 개발자들에게 시장에서 가장 인기 있고 가장 많이 다운로드 된 IDE입니다. VS Code는 지원되는 다양한 언어와 프레임워크로 다양한 종류의 프로젝트를 개발하기 위한 최고의 IDE 중 하나입니다. VS Code의 확장 기능을 통해 언어와 프레임워크를 지원할 수 있습니다.

VS 코드가 오픈소스인 이유

20여 년 전 프로그래밍을 시작했을 때 C와 C++는 간단한 응용프로그램을 쓰기에는 너무 복잡하다는 것을 알고 거의 포기했습니다. 비주얼 베이직 6은 제가 구해준 덕분에 몇 달, 몇 주가 아니라 며칠, 몇 주 만에 응용프로그램을 쓸 수 있었습니다. 간단하고 직관적인 UI, 드래그 앤 드롭 기능, 간단한 프로그래밍 모델은 저 같은 사람들이 코드를 작성하고 응용프로그램을 개발할 수 있도록 해주었습니다. 한마디로 마이크로소프트는 개발자들의 신경을 빠르게 감지했고, Visual Basic 6 는 히트를 쳐 마이크로소프트를 개발자들 사이에서 사랑 받는 존재로 만들었습니다.

마이크로소프트가 2003년에 .NET을 출시했을 때 VB.NET 언어는 VB6와 하위 호환성이 없었고 마이그레이션 경로가 너무 복잡했습니다. 하지만 저 같은 개발자들은 새로운 프레임워크와 C# 언어가 흥미롭다는 것을 알고 빠르게 .NET으로 전환했습니다. 마이크로소프트 개발자 생태계는 훌륭했으며 매력적으로 작동했으며 개발자 생산성을 여러 번 끌어올렸습니다. 하지만 문제는 윈도우즈 플랫폼에서만 작동한다는 것이었습니다. .NET 프레임워크는 플랫폼에 구애받지 않는 프레임워크임에도 불구하고 윈도우즈 생태계 밖에서는 제대로 작동하지 않았습니다. 나중에 마이크로소프트는 .NET 코어를 출시하여 구멍을 메웠습니다.

10년이 지난 지금, 오픈소스는 소프트웨어 개발의 대명사이자 유비쿼터스가 되었고, 여러분이 개발에 대해 암묵적으로 오픈소스를 포함시키지 않고서는 말할 수 없는 시대가 왔습니다. 하지만 마이크로소프트는 오픈소스 게임에 매우 늦게 뛰어들었고, 필사적으로 따라잡기를 원했습니다. 개발자들은 마이크로소프트 스택을 떠나 자바나 노드 같은 오픈 프레임워크로 전환하고 있었습니다. 마이크로소프트는 개발자들을 자사의 개발자 생태계에 다시 끌어들이려는 시도가 여러 번 실패하고 실패한 후, 오픈소스와 리눅스나 맥 같은 다른 플랫폼을 채택하고 지원할 수밖에 없었습니다. 그 결과 마이크로소프트는 .NET 코어와 그 주변에 있는 여러 도구들을 출시하여 플랫폼 간에 접근할 수 있도록 했습니다. 흥미롭게도 마이크로소프트는 .NET 코어도 오픈소스로 만들었습니다.

20년 전 개발자 스튜디오로 알려졌던 Visual Studio는 여러분이 세상에서 찾을 수 있는 가장 생산적인 IDE이고, 다른 IDE들을 아침 식사로 먹을 수 있습니다. 하지만, 그것은 윈도우 운영 체제에서만 작동하도록 되어 있었고, 오픈 소스 개발에는 그다지 적합하지 않았습니다. 이것은 마이크로소프트가 리눅스와 맥과 같은 다른 플랫폼의 오픈 소스 개발자들을 마이크로소프트 생태계로 끌어들이는 것을 어렵게 만들었습니다. 마이크로소프트는 차이를 메우기 위해 세 가지를 발표했습니다:

– Visual Studio의  Community edition : 이것은 무료로 제공되는 헐벗은 버전입니다. 그러나 이것은 윈도우에서만 실행되기 때문에 여전히 마이크로소프트 개발자 생태계와 긴밀하게 통합되어 있습니다.

–  Visual Studio for Mac: Mac OS 플랫폼에서 .NET 애플리케이션 및 서비스를 개발할 수 있는 IDE입니다. Visual 디자이너와 같은 일부 기능은 예상대로 작동하려면 여전히 XCode가 시스템에 있어야 합니다.

– Visual Studio Code. 마이크로소프트가 모든 배경을 가진 개발자들을 생태계로 다시 끌어들이는 데 도움을 준 IDE입니다.

Welcome VSCodium

VSCodium 은 VS 코드 소스 코드에서 파생된 커뮤니티 주도의 완전한 오픈 소스 프로젝트입니다. 원본 VS 코드에 존재하는 원격 측정 및 기타 독점적인 구성 요소를 제거하여 완전한 투명성을 보장합니다. 오픈 소스 소프트웨어를 가치 있게 생각하고 개발 환경에 대한 더 많은 제어를 원한다면 VSCodium이 가야 할 길입니다. VSCodium 웹 사이트에 따르면, "VSCodium은 마이크로소프트의 편집기 VS 코드의 커뮤니티 주도의 자유 라이선스 바이너리 배포입니다."

VSCodium 써야되는 이유.

VS 코드의 주요 관심사 중 하나는 익명의 사용 데이터를 수집하여 마이크로소프트에 전송하는 원격 측정 기능입니다. VSCodium은 기본적으로 원격 측정을 비활성화하여 수집하거나 공유하는 데이터 없이 코드 편집기를 사용할 수 있습니다. 특히 개인 정보 보호에 신경 쓰이거나 민감한 프로젝트를 수행하는 경우 VSCodium은 마음의 평화를 제공할 수 있습니다.

1. VSCodium은 완전 오픈 소스임

VS 코드의 소스 코드는 MIT 라이선스가 있는 오픈 소스입니다. 하지만 이것은 완전히 오픈 소스인가요? VS Code repository는 오픈 소스이지만 VS Code Website에서 다운로드 할 수 있는 바이너리는 오픈 소스가 아닙니다. 웹사이트에 따르면, 이것은 "Built on open source"인데, 이것은 그것의 일부 부분만 오픈 소스이고 일부 부분은 빌드 프로세스에 포함된 독점적인 확장이라는 것을 의미합니다.

공식 웹 사이트에서 다운로드할 수 있는 VS 코드 바이너리는 Microsoft 서비스 및 확장으로 구성된 사용자 지정  package.json 파일과 함께 Microsoft에서 구축합니다.

VSCodium GitHib repository는 VSCode 리포지토리의 포크라기보다는 VSCode를 완전히 개방된 소스 바이너리로 빌드하기 위한 스크립트와 구성 파일의 모음으로, 동일한 MIT 라이센스 하에서 전용 확장 기능을 사용하지 않도록 설정했습니다. 이러한 단계는 말 그대로 다음 지침에 따라 수행할 수 있습니다. 그러나 VSCodium을 사용하면 시간과 노력이 절약되고 전용 확장 기능을 제외하고 최신 VSCode 릴리스를 사용하여 빌드를 쉽게 유지할 수 있습니다.

2. VSCodium은 VS Code와 동일한 외관과 기능을 제공함

VSCodium을 처음 다운로드하여 실행해보면 이름 외에는 다른 점이 없다는 것을 알게 될 것입니다. VSCode와 외형적으로나 행동적으로나 완전히 동일합니다. 다른 점은 거의 없지만 이 글에서 더 자세히 다루도록 하겠습니다.

3.. VSCodium에는 독점 확장 기능이 없다는 점

개발자인 당신에게 VS Code가 완전 오픈 소스가 아니라는 것은 어떤 의미인가요? VS Code에서 어떤 역할을 하는지 절대 알 수 없는 독점적인 부분이 있다는 뜻입니다. VSCodium은 이러한 독점적 확장을 빌드 프로세스에서 제외합니다.

VSCodium은 VS Code의 완전 오픈 소스 부분만 포함하는 구성으로 구축되어 있습니다. 빌드 스크립트는 VSCodium GitHub 저장소에서 찾을 수 있으며 필요한 경우 포크 및 수정할 수 있습니다.

4. VSCodium에서 귀하의 활동을 추적하지 않다는 점

VS 코드에는 응용 프로그램 전체에 걸쳐 텔레메트리가 구워져 있습니다. 텔레메트리는 사용 데이터와 크래시 덤프를 수집하고 마이크로소프트에 전송하는데, 이는 VS 코드를 개선하기 위한 목적으로 알려져 있습니다. 민감하거나 주목할 만한 프로젝트를 수행하는 경우 텔레메트리/트래킹을 완전히 해제해야 할 수도 있습니다.

VS 코드에서 원격 측정을 비활성화하려면 파일(MacOS의 코드) -> 환경설정 -> 설정으로 이동하여 원격 측정을 검색한 후 Telemetry: Telemetry Level 설정을 off로 설정합니다. 그러면 모든 원격 측정 이벤트가 비활성화됩니다. VS 코드에서 이 옵션을 제공하지만 license terms과 FAQ 는 완전히 해제할 수 없음을 나타냅니다.

VSCodium은 빌드 프로세스에서 Telemetry 및 tracking을 명시적으로 비활성화합니다. 따라서 활동이 추적되지 않는다는 것을 확신할 수 있습니다. VSCodium을 설치한 직후에 TelemetryLevel이 기본적으로 off로 설정되어 있는지 확인할 수 있습니다. 반면 VS Code의 TelemetryLevel은 기본적으로 모두 비활성화되어 있습니다.

개별 내선번호는 여전히 원격 측정 및 추적 정보를 해당 내선번호 게시자에게 전송할 수 있습니다. 이들의 동작은 위에서 설명한 원격 측정 수준 설정의 영향을 받지 않습니다. 예를 들어 Microsoft C# 내선번호는 원격 측정 정보를 Microsoft로 보냅니다. 내선번호가 원격 측정을 비활성화하는 방법을 제공하지 않으면 할 수 있는 방법이 없습니다.

5. VSCodium supports VS Code extensions

VS 코드 확장은 VSCodium에서도 작동합니다. 둘 다 동일한 코드 기반으로 구축되어 있기 때문입니다. 그러나 Microsoft에서는 VS 코드 마켓플레이스를 제품 외부에서 사용하는 것을 금지하므로 VSCodium에서는 VS 코드 마켓플레이스 대신 Open VSX Registry 를 마켓플레이스 확장 URL로 사용합니다. 따라서 Open VSX Registry에 없는 확장은 VSCodium에서 사용할 수 없습니다. Open VSX Registry에 없는 확장을 VSCodium에서 발견한 경우 확장 유지 관리자에게 Open VSX Registry에 대한 확장을 게시하도록 요청할 수 있습니다.

또는 VS Codium에 .vsix 파일을 수동으로 설치할 수 있습니다. 이는 번거롭고 수동 버전 확인, 업데이트 및 유지보수가 필요하지만 Open VSX Registry에 게시되지 않은 확장에는 유용할 수 있습니다.

VSCodium에서 어떤 확장을 사용할 수 있는지는 레지스트리나 수동 설치를 통해 결정됩니다. 거의 모든 확장은 허가된 오픈 소스 라이선스로 커뮤니티에서 개발하고 게시하므로 이는 문제가 되지 않습니다.

참고자료

VS Code Website

VS Code GitHub repository

VS Code Marketplace

VS Code License

VSCodium Website

VSCodium GitHub repository

Open VSX Registry

Manual build instructions

Differences between the repository and Visual Studio Code

긴글 읽으시느라 고생하셨습니다.

텔크s

telks.tistory.com

안녕하세요 블루밍구입니다.

오랜만에 코딩 저널 써보네요 ㅎㅎ

일이 너무 많아 블로그에 제가 좋아하는것만 올린거 같습니다.

아무튼 요즘 핫하다는 수박 게임 Suika game 을 가져와봤습니다.

소스코드는 여기에 있으며, 

직접 만들어 보고싶으면 여기에 소스 코드 있으니 참고 하시기 바랍니다.

그리고 이 소스코드와 영상 강의를 제공해주신 Kairess 님 감사합니다.

수박게임 말고 다른것도 많으니 참고 부탁드립니다.

아직 블로그 수정중이며, 일단 급한데로 대략 내용만 올렸습니다.

감사합니다.

텔크s

telks.tistory.com

Express 소개: Express에 대한 소개로 블로그 게시물을 시작합니다. 그것이 무엇인지, 그것이 왜 인기가 있는지, 그리고 그것이 다른 Node.js 프레임워크와 무엇이 다른지 설명하세요.

Example 1: Setting up a basic route

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

기본 Express 앱 설정: 기본 Express 앱을 설정하는 방법에 대한 단계별 지침을 제공합니다. 여기에는 새 프로젝트 생성, 필요한 종속성 설치 및 기본 경로 설정이 포함될 수 있습니다.

미들웨어 작업: 익스프레스의 주요 특징 중 하나는 미들웨어 시스템이다. 미들웨어의 작동 방식과 그 중요성에 대해 쓰고 일반적으로 사용되는 미들웨어의 예를 제공합니다.

요청 및 응답 처리: Express가 수신 요청 및 발신 응답을 처리하는 방법을 설명합니다. 다양한 HTTP 메서드(GET, POST 등)를 처리하고 오류를 처리하며 응답 헤더로 작업하는 방법을 보여줍니다.이 예에서는 각 수신 요청의 메서드와 URL을 기록하는 로거라는 사용자 지정 미들웨어 기능을 정의합니다. 그런 다음 app.use() 메서드를 사용하여 이 미들웨어를 모든 경로에 적용합니다. 루트 URL에 GET 요청이 작성되면, 서버는 이전과 같이 "Hello, World!"로 응답합니다.

Example 3: Using a template engine to render a view

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  const data = {
    title: 'Express Blog',
    posts: [
      { title: 'First Post', content: 'Lorem ipsum dolor sit amet' },
      { title: 'Second Post', content: 'Consectetur adipiscing elit' }
    ]
  };
  res.render('index', data);
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

템플릿 및 뷰 사용: Express는 템플릿 및 뷰 렌더링을 지원합니다. EJS 또는 핸들바와 같은 인기 있는 템플릿 엔진을 사용하는 방법과 서버에서 보기로 데이터를 전달하는 방법을 설명합니다. 이 예에서는 EJS 템플릿 엔진을 사용하여 인덱스 뷰를 렌더링합니다. 우리는 제목과 게시물 배열을 포함하는 객체 데이터를 정의하고 res.render() 메서드에 전달한다. index.ejs 파일은 프로젝트 루트의 뷰 폴더에 위치해야 하며 데이터를 표시하려면 EJS 태그가 있는 HTML을 포함해야 합니다:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <ul>
      <% for (const post of posts) { %>
        <li><%= post.title %>: <%= post.content %></li>
      <% } %>
    </ul>
  </body>
</html>

타사 미들웨어 및 플러그인 사용: Express에서 사용할 수 있는 많은 타사 미들웨어 및 플러그인이 있어 사용자의 삶을 더 쉽게 만들 수 있습니다. 가장 인기 있는 것들 중 몇 가지에 대해 쓰고 그것들을 당신의 앱에서 사용하는 방법을 보여주세요.

이 예에서는 새 Express 앱을 만들고 루트 URL(/)에 대한 경로를 정의합니다. 이 URL에 GET 요청이 작성되면, 서버는 "Hello, World!"라는 메시지로 응답합니다. 그런 다음 서버를 시작하고 포트 3000에서 수신 요청을 수신합니다.

Example 2: Using middleware to log requests

const express = require('express');
const app = express();

// Custom middleware function to log requests
const logger = (req, res, next) => {
  console.log(`${req.method} request for ${req.url}`);
  next();
}

app.use(logger);

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Express 앱 배포: 마지막으로 Heroku 또는 AWS와 같은 호스팅 서비스에 Express 앱을 배포하는 방법을 보여줍니다. 환경 변수를 구성하고, 데이터베이스 연결을 설정하고, 운영 모드에서 앱을 실행하는 방법을 설명합니다.

텔크s

telks.tistory.com

프로그래머로서 적합한 통합 개발 환경(IDE)을 찾는 것은 생산성과 성공에 매우 중요합니다. 기존의 데스크톱 IDE는 종종 강력하지만 값이 비싸고 컴퓨터에서 많은 공간을 차지할 수도 있습니다. IDE 웹 사이트가 바로 여기에 있습니다. 이러한 온라인 플랫폼은 인터넷에 연결된 모든 장치에서 액세스할 수 있는 가볍고 휴대용 솔루션을 제공합니다. 이 블로그 게시물에서 우리는 모든 수준의 프로그래머에게 완벽한 재미있고 무료인 IDE 웹사이트 5개를 살펴볼 것이다.

CodePen
코드펜(CodePen)은 프론트엔드 개발자들이 HTML, CSS, 자바스크립트 코드로 자신들의 작업과 실험을 보여주는 온라인 커뮤니티이다. 또한 브라우저에서 직접 코드를 작성하고 테스트할 수 있는 코드 편집기가 내장되어 있습니다. CodePen은 사용자 친화적인 인터페이스와 라이브 뷰, 협업, 공유 옵션 등 다양한 기능을 갖추고 있다.

Repl.it
Repl.it은 파이썬, 자바, 루비를 포함한 여러 프로그래밍 언어를 지원하는 또 다른 인기 IDE 웹사이트이다. 사용하기 쉬운 인터페이스를 제공하고 협업 코딩을 지원한다. 이 도구를 사용하여 프로그램을 코딩 및 테스트하고 한 번의 클릭으로 프로젝트를 배포할 수 있습니다.

JSFiddle
만약 당신이 주로 자바스크립트로 작업한다면, JSFiddle은 당신에게 완벽한 IDE 웹사이트이다. 이것은 자바스크립트 코드를 실시간으로 작성, 실행 및 디버그할 수 있는 경량 도구이다. 또한 JSFiddle을 사용하여 다른 사용자와 코드 스니펫을 공유하고 프로젝트에서 협업할 수 있습니다.

Cloud9
Cloud9은 Python, Ruby, PHP와 같은 광범위한 프로그래밍 언어를 지원하는 강력한 클라우드 기반 IDE입니다. 사용자 정의 가능한 작업 공간, 협업 코딩 및 내장된 터미널을 제공합니다. 또한 Cloud9을 사용하여 IDE에서 직접 프로젝트를 호스팅하고 배포할 수 있습니다.

Glitch
Glitch는 웹 앱을 만들고 다른 사람들과 공유할 수 있는 재미있고 특이한 IDE 웹 사이트입니다. Node.js 위에 구축되었으며 자바스크립트, HTML, CSS와 같은 다양한 프로그래밍 언어를 지원한다. 글리치는 드래그 앤 드롭 인터페이스, 라이브 미리 보기 및 인스턴트 공유 옵션을 제공합니다.

IDE 웹 사이트는 자신의 컴퓨터에 소프트웨어를 설치하고 관리할 필요 없이 프로젝트를 수행하려는 프로그래머에게 좋은 옵션입니다. 이 5개의 재미있고 무료인 IDE 웹 사이트는 다양한 프로그래밍 언어에 대한 다양한 기능과 지원을 제공하여 모든 수준의 프로그래머에게 완벽합니다. 그들에게 시도해보고 그들이 어떻게 당신의 코딩 경험을 향상시킬 수 있는지 보세요!

텔크s

telks.tistory.com