Korea Evangelist

Developer & Platform Evangelism, Microsoft Korea

July, 2010

  • Korea Evangelist

    코드파티~ 8월부터 개발자들을 위한 세미나가 이어질 예정입니다.

    • 0 Comments

    그 동안 개발자들을 위한 오프라인 세미나가 많이 없었습니다.
    정말 일년에 한 두번하는 대형 행사를 제외하고는 오프라인에서 뛰어난 강사들을 만나 볼 수 있었던 기회가 많이 줄어들었습니다.

     그래서 마이크로소프트웨어와 함께 준비했습니다.

    개발자들을
    위한 코드 파티!!!
    개발자들을 위한 코드 파티는 8월 부터 매달 2회씩 진행될 예정이며 다음과 같은 주제들을 다뤄 나갈 예정입니다.

    • 최신버전의 .NET Framework
    • ASP.NET/ASP.NET MVC/RAZOR 와 같은 웹 기반의 기술들
    • SharePoint Server와 같은 Enterprise Web 기술
    • Silverlight 4 or 5 기반의 RIA/Desktop 개발
    • Windows Phone 7을 위한 다양한 App. 개발 방법
    • Cloud Platform인 Windows Azure.

    특별히 웹과 관련된 기술들을 우선적으로 다루어 나갈 예정입니다.
    8월에는 18일과 25일 이틀 동안 소셜 웹 플랫폼을 주제로 진행할 예정입니다.

    8월 세미나 공지는 다시 올려드리겠습니다.
    8월 중순이후 부터 휴가 시원하게 다녀와서 세미나의 물결에 푹 빠져 보아요~ ^^

  • Korea Evangelist

    [아키텍처 저널 번역] 16권 클레임과 아이덴티티 #1/2

    • 0 Comments

      AJ16_cover

    아키텍처 저널 16권에 실린 사용자 인증 및 아이덴티티 관련된 아티클을 번역 중이며, 그 전반부를 올린다. 이 아티클에 실린 내용은 전통적인 on premise 방식의 시스템이나 근래들어 관심을 끌고 있는 클라우드 기반 애플리케이션 개발에 있어서도 다른 시스템과의 연계나 통합 측면에서 늘 고려되고 중요시되는 사용자 인증과 서로 다른 아이텐티티 통합 관련하여 클레임 기반 관리 기법을 소개한다. 이는 특정 플랫폼이나 벤더에 종속적이지 않으면서 표준적인 토큰 방식을 적용하여 광범위하게 적용할 수 있는 방법이며 마이크로소프트는 Active Directory Federation Service를 통해 이미 지원하고 있다.

    이 아티클의 원문은 아래에서 확인할 수 있다.
    http://msdn.microsoft.com/ko-kr/architecture/cc836390(en-us).aspx

    참고로, 현재까지 번역된 아키텍처 저널은 다음과 같으며 3개의 아티클이 한글 PDF 버전으로 다운로드 가능하다.
    아키텍처 저널 21 : http://msdn.microsoft.com/ko-kr/architecture/aa699437.aspx
    아키텍처 저널 19 : http://msdn.microsoft.com/ko-kr/architecture/aa699428.aspx 
    ----------------------------------------
    요약
    오늘날의 아이덴티티 관리는 종종 불완전한 솔루션 여러 개를 짜깁기한 방식으로 이루어진다. 이 방식은 기술 및 조직 경계에 의해 분리된 애플리케이션 및 엔터티를 어느 정도 지원하기는 하지만, 이들을 실제로 통합하지는 못한다. 하지만 기업들은 SaaS(Software as a Service) 및 클라우드 컴퓨팅의 확산으로 인해 이러한 경계를 허물어야 하는 상황에 자주 직면하게 될 것이고, 따라서 임시방편적인 솔루션은 더 이상 통하지 않게 될 것이다. 이러한 환경에서는 아이덴티티 사일로(silo)를 허물고 의도적으로 계획된 경계가 없는 IT를 지원하는 새로운 접근법이 적절하다.
    이 아티클은 전통적인 시나리오와 클라우드 시나리오에 동일하게 효과적으로 적용될 수 있는 모델인 클레임 기반 아이덴티티 관리(claims-based identity management)의 원칙에 대해 살펴본다. 아울러 이러한 원칙이 클라우드 컴퓨팅 환경과 일반적인 분산 시스템에 적용될 때 얻을 수 있는 장점과 기회를 중심으로 가장 일반적인 토큰 교환 패턴에 대해 살펴볼 것이다.

    한계는 없다
    여러분의 내면에 있는 어린아이는 구름 낀 하늘에서 용이나 성과 같은 것을 보겠지만, 이 아티클을 읽고 난 후에 여러분은 아키텍트로서 구름 속에서 달러 기호를 보게 될 것이다. 클라우드 컴퓨팅은 IT에 대한 사고 방식에 획기적인 이점을 가져온다고 약속한다. 클라우드 컴퓨팅의 기본적인 개념은 기업이 자산을 회사 외부에 호스팅하며, 필요한 인프라를 유지 관리해야 하는 부담 없이 이러한 자산이 제공하는 혜택을 누릴 수 있다는 것이다. 이는 기업이 원하는 기능을 서비스 형태로 구입함으로써, 핵심 비즈니스와 관련이 없는 온프레미스(on-premise) 애플리케이션을 관리해야 하는 부담을 없애주는 SaaS와 어느 정도 비슷하다. 하지만 클라우드 컴퓨팅은 그 한계를 더욱 확장시킨다. 클라우드는 대표적인 CRM 및 HR 패키지 등 타사가 제공하는 완벽한 애플리케이션을 구입하지 않고도, 데이터 센터 내에서 플랫폼으로 노출되는 자사 리소스를 호스팅할 수 있는 가능성을 제공한다. 이렇게 되면 CPU와 대역폭 사용량을 고민할 필요 없고, 하드웨어를 직접 다루거나 실내 냉방을 고민하지 않으면서도 리소스 제어 권한을 유지할 수 있다. 심지어 시스템 패치를 염려할 필요도 없다. 웹 애플리케이션이 새로운 데이터를 매일 생성하는 경우, 클라우드의 데이터 저장소를 이용하면 용량 확장을 위해 하드웨어를 계속 추가로 구입하지 않아도 된다. 가장 좋은 점은 하드웨어와 인프라에 미리 투자하지 않아도 되며, 실제로 리소스를 사용하는 양만큼 비용을 지불하면 된다는 것이다. “클라우드 컴퓨팅”이라는 용어 대신 “유틸리티 컴퓨팅”이라는 용어가 자주 사용되는 이유도 바로 이러한 “사용량 기준 결제(pay-per-use)” 방식 때문이다. CPU 사용량이 많은 작업의 경우, 이러한 장점은 더욱 확연해 진다. 피크 타임을 고려하여 용량 산정한 데이터센터를 구축하여 대부분의 시간 동안 제대로 활용되지 않는 상태로 두는 대신, 엄청난 규모의 데이터 센터에 CPU 사용량이 가장 많은 프로세스를 구축할 수 있다고 상상해 보라. 필요한 만큼 CPU 사용량을 늘릴 수 있고, 사용한 양만큼만 클라우드 공급자에게 비용을 지불하면 된다. 이러한 것들은 IT 관리자의 눈을 반짝이게 만드는 장점 중 일부에 불과하다. 클라우드는 이 밖에도 아키텍트의 관심을 끌 수 있는 보다 더 흥미로운 특성을 지니고 있다. 클라우드 공급자는 공통 인프라에서 리소스를 호스팅하기 때문에, 개발 및 유지 관리를 간소화시킬 수 있는 서비스를 모든 리소스가 활용할 수 있도록 제공하고 있다. 여기에 해당하는 대표적인 서비스로는 네이밍, 메시지 전송, 로깅, 접근 제어를 들 수 있다. 어떤 리소스라도 클라우드 인프라를 한 번 사용하기만 하면, 해당 리소스 자체에서 그러한 기능의 구현을 제외시킬 수 있다.
    클라우드 컴퓨팅에 관한 문헌의 양은 방대할 뿐만 아니라 나날이 증가하고 있다. 여기서 소개한 내용으로 클라우드 컴퓨팅이 지닌 엄청난 잠재력을 확인하기에 충분하지 않다면, 가장 좋아하는 검색 엔진에서 이 용어를 검색해보도록 하라. IT 업계가 클라우드 컴퓨팅을 얼마나 중요하게 받아들이고 있는가를 짐작할 수 있을 것이다. 성실한 아키텍트라면 이 시점에서 “우리 회사도 클라우드 컴퓨팅에 준비가 되어 있을까 ?”라는 궁금증을 가질 것이다. 물론 이 질문에 답하는 것은 그리 간단한 일이 아니다. 여기에는 아키텍처의 여러 가지 측면과 회사의 업무 방식이 고려되어야 한다. 최대한 간단하게 설명하자면, 확고한 서비스 중심(service orientation : SO) 원칙에 따라 비즈니스를 운영하고 있다면, 이러한 신기술을 활용할 수 있는 이상적인 위치에 있는 것이다. 요컨대, 자율성이 중시되고, 정책이 공개되며, 표준이 사용된다면, 서비스가 어디에서 실행되든 누가 상관하겠는가? 만약 이런 위치에 있다면 축하한다. 하지만 경험에 비추어볼 때, 누구도 SO 원칙을 엄청 세세하게 적용하지는 않는다. 예를 들어, 같은 기술로 개발된 서비스들은 상호 간에 호환이 되었을 때 특별한 기능을 제공한다. 그리고 실제로도 이러한 기능을 활용해야지만 완벽하게 말이 되는 상황이 존재한다는 것이다.
    아이덴티티 관리 및 접근 제어는 이러한 현상의 영향을 받을 가능성이 높다. 일반적으로 기업은 디렉터리 소프트웨어를 보유하고 있으며, 이 소프트웨어를 리소스 접근 제어와 관련된 여러 방면에서 합법적으로 사용한다. 때로 이러한 소프트웨어는 아주 훌륭하게 작동하여 개발자들이 아이덴티티 개념을 익힐 필요도 없게 만든다. 물론 이는 좋은 현상이지만 실제로는 거의 발생하지 않는다. 디렉터리 외부의 파트너와 연결하거나, 다른 자격 증명 유형을 사용하는 등 일정 형태의 접근 제어 관리를 수반하는 작업을 맡게 되었을 때, 개발자가 최악의 회전 의자식(swivel chair) 통합 솔루션을 가지고 온다고 예상하면 된다. 아이덴티티가 개발 측면에서 가장 나쁜 결과를 가져온다면, 어째서 우리는 아이덴티티와 무리없이 잘 지내고 있을까 ? 이 질문에 안 그럴 때도 있다고 쉽게 대답할 수도 있다. 자신과 관련되어 있는 사례 중 접근 제어가 잘못된 끔찍한 경우를 알고 있을 것이다. 보다 현명한 대답은 다음과 같다. 우리가 아이덴티티와 관련된 이슈로부터 잘 지낼 수 있는 이유는 우리가 인프라의 대부분을 소유하고 우리가 엄격한 거버넌스를 강제하는 한, 그러한 이슈를 처리할 수 있기 때문이다. 이 경우, 필요한 양보다 많은 리소스를 사용할 수도 있고 필요한 것보다 더 자주 비상 상황에 대응할 수도 있지만, 어쨌든 우리는 지속할 수 있다. 사실상 점차 증가하는 시장 압력으로 인해 “인프라의 대부분을 소유”하는 것은 어려워지고 있다. 비즈니스의 많은 부분에서 끊임없는 연결이 필요하고 새로운 파트너를 참여시켜야 한다면, 여러분의 인프라는 어디에서 끝나고 파트너의 인프라는 어디에서 시작되는 것인가? 클라우드 컴퓨팅은 이 질문을 더욱 복잡하게 만들 것이다. 일단 클라우드가 또 다른 배포(운영) 옵션이 되면, 모든 리소스에 대한 고유한 접근 코드를 만드는 것은 불가능해진다.
    좋은 소식은 일반적인 분산 시스템에 대해 아이덴티티 및 접근 제어 관리를 지원하는 아키텍처적인 접근법이 존재하며, 이는 사내(on premise), 클라우드 및 하이브리드 시스템에 모두 똑같이 적용될 수 있다는 것이다. 핵심 개념은 거의 모든 것을 클레임 교환과 모델 트랜잭으로 보고 훨씬 더 자연스러운 방식으로 모델링하는 것이다.
    이 아티클에서는 이러한 새로운 접근법을 소개한다. 클라우드와 특히 관련이 있는 측면에 특별한 주의를 기울이겠지만, 제시되는 개념과 패턴의 상당부분은 분산 시스템의 특성에 상관없이 적용 가능하다. 여기서 다루고자 하는 문제는 단순한 단일 사이트의 멤버 자격 공급자에 기반한 애플리케이션이 아니라는 점에 유의하길 바란다. 여기서 정해진 원칙은 모든 시스템에 적용된다. 따라서 단순한 상황에도 적용되지만, 파트너 관계, 복잡한 접근 규칙 및 구조화된 아이덴티티 정보를 포괄하는 시나리오에서 그 포괄적인 능력을 최대한 활용할 수 있다.
    아래에 나오는 정의를 처음부터 이해하는 것이 어렵다면 고대 로마의 표기법을 사용하여 수를 더했던 중세 시대의 유럽인들이 숫자 “0”을 사용하는 방법을 배우기가 얼마나 어려웠을지 생각해 보도록 한다. 당시 기존 방식의 저항에 부딪혔지만, 더 나은 모델을 채택함으로써 얻은 대가는 더욱 특별했다!

    클레임 기반 솔루션 (Claims-based Solutions)
    전통적인 아이덴티티 관리 솔루션의 문제는 한 마디로 너무 많은 것을 가정하고 있다는 것이다.
    가장 일반적인 가정은 어떤 전지전능한 권한을 가진 중앙 인증 기관이 존재하여 트랜잭션에 참여하는 모든 엔터티를 알고 있어서, 누가 어떤 조건으로 무엇에 접근할 수 있는지 결정할 수 있는 있다고 가정하는 것이다. 이러한 가정은 디렉터리를 통해 관리되는 엔터프라이즈 네트워크와 같은 독립형 시스템에서는 대체적으로 맞지만, 비즈니스 프로세스가 자체적인 아이덴티티 저장소를 갖추고 있는 소프트웨어 패키지 혹은 엑스트라넷에 접근하는 파트너와 고객, 컨설턴트 등과 같은 외부 요소들을 필요로 하기 시작하게 되면 틀린 가정이 된다. 섀도 계정(shadow account) 사용과 같은 전략적 솔루션은 종종 소유하지 않은 무언가를 관리할 수 있는 것처럼 기능해야 하기 때문에 매우 불안정하다.
    또 다른 일반적인 가정은 ‘트랜잭션의 모든 참가자는 일관된 아이덴티티 관리 기술을 사용한다‘는 것이다. 다시 한번 말하지만, 이러한 가정은 독립형 시스템(예: 네트워크 소프트웨어)의 경우에는 맞지만, 프로세스에 외부 참가자를 들여놓자 마자 틀린 가정이 된다. 다양한 기술을 수용하는 일반 방식에서는 이러한 상황을 예외로 취급하고 있다. 그 결과, 대체적으로 아이덴티티 전문가(?)라고 여겨지는 개발자가 작성한 수많은 아이덴티티 관리 플러밍 (plumbing) 코드를 리소스 자체에 포함하게 된다. 이는 프리젠테이션 레이어에 비즈니스 로직을 포함하는 것에 대한 오래된 금기보다 더 나쁜 영향을 끼친다. 리소스 내부에서 직접 아이덴티티 플러밍을 처리하는 것은 시스템을 불안정하게 만들고 유지 관리하기 힘들게 할 뿐만 아니라, 시스템 관리자의 삶 또한 암울하게 만든다. 로직이 리소스 자체에 갇혀 있다면, 배포(deploy) 시점에 접근 제어를 어떻게 관리할 수 있겠는가?
    클레임에 기반한 접근 방식에서는 각 작업을 원래 소유자인 엔터티에게 할당함으로써 이러한 문제를 방지하며, 모든 참가자의 자율성을 존중해 인위적인 의존 관계와 기대가 형성되는 것을 차단한다. 이것이 바로 좋은 점만 갖춘 SO 아키텍처의 오랜 원칙이다.
    이어서 클레임에 기반한 접근 방식에 대해 간략히 설명하도록 하겠다. 이 주제는 그 자체가 아주 방대하다. 사실, 이에 관한 책을 공동 저술한 바 있다. 이 글에서 시사하는 의미를 완벽히 이해하려면 MSDN에서 온라인으로 무료로 이용할 수 있는 Chapter 2(리소스 부분 참조)를 읽어보도록 한다.

    기본 정의
    여기에서는 클레임 기반 접근법을 살펴보는 과정에서 만나게 될 다양한 개념과 구문에 대한 정의를 소개한다.

    클레임 (Claims)
    클레임은 또 다른 엔터티(“authority”)에서 명시한 어떤 엔터티(“subject”)에 관한 사실이다.
    클레임은 문자 그대로 어떤 주체의 한 측면을 설명하는 모든 것이 될 수 있다. 여기서 주체는 실제 사람일 수도 있으며 추상적인 리소스일 수도 있다. 클레임의 대표적인 예로 “Bob은 22살이 넘는다,” “Bob은 도메인 Contoso.com을 위한 ‘원격 디버거’ 그룹에 소속되어 있다,” “Bob은 Star Alliance 항공사의 Silver Elite 회원이다” 등을 들 수 있다. 클레임은 인증 기관에서 보증한다. 따라서 한 관찰자는 해당 인증 기관의 신뢰성에 따라 해당 클레임이 진술하는 사실을 참으로 간주해야 하는지 여부를 판단할 수 있다.

    신뢰 (Trust)
    엔터티 B가 발표하는 클레임을 엔터티 A가 참으로 간주한다면 엔터티 A는 엔터티 B를 신뢰한다고 말할 수 있다. 이 정의는 매우 단순하면서도 본 글의 취지에 잘 부합한다. B가 어떤 주체에 대해 말하는 것을 신뢰하면 해당 클레임을 직접 확인하는 데 따르는 번거로움으로부터 A를 해방시켜 준다. 단, 엔터티 A는 여전히 해당 클레임이 실제로 B에 의해 제공되는 것이고 위조가 아니라는 것을 확인해야 한다.

    토큰 (Tokens)
    보안 토큰은 인증 기관이 서명한 XML 구문으로, 클레임과 (아마도) 자격 증명 정보를 포함한다.
    보안 토큰은 아티팩트, 즉 XML 조각(리소스 부분 참조: WS-Security) 으로 다음 두 가지 기능을 수행할 수 있다. 
    * 클레임을 전파하는 수단을 제공한다. 
    * 암호화 작업을 지원하거나, 자격 증명 인증에 참여할 수 있다.

    비대칭 암호화의 속성 덕분에, 토큰이 서명되었다는 사실은 해당 토큰이 포함하는 클레임의 진원지를 확인하는 것을 더욱 쉽게 만든다.
    또한, 토큰은 암호화 및 SOAP 메시지의 서명에서 참조될 수 있는 키 및 키에 관한 참조 등과 같은 암호화 자료를 포함하고 있다. 이러한 작업은 자격 증명 확인 과정의 일환으로 이용될 수 있다. 이러한 맥락에서 우리는 호출자가 기존 사용자임을 확인하는 어떤 메커니즘의 일부로 사용될 수 있는 자료를 “자격 증명”이라고 간주한다. 암호 및 인증서가 좋은 예이다(보다 자세한 내용은 리소스 부분 참조: Vittorio Bertocci의 블로그, The Tao of Authentication).
    토큰은 X509 인증서와 같은 특정 인증 기술의 “프로젝션 (projection)” 일 수 있으며, 발급될 수도 있다. (발급된 토큰의 한 예로 웹 서비스 보안 관련 문맥에서 언급된 것을 들어본 적이 있을만한 널리 사용되는 토큰 형태인 SAML을 들 수 있다.) 시스템은 미래 지향적이어서, 새로운 기술이 등장하면 적합한 토큰 “프로젝션”을 프로필 사양으로 문서화할 수 있다.

    STS(보안 토큰 서비스)
    보안 토큰 서비스는 WS-Trust에서 설명한 바와 같이 보안 토큰을 발급하는 서비스를 말한다(리소스 부분 참조: WS-Trust).
    STS (그림 1 참조)는 RST(보안 토큰 요청) 메시지를 처리하고 RSTR(보안 토큰 응답 요청)을 통해 토큰을 발급할 수 있다. RST 처리는 일반적으로 호출자를 인증하고 호출자 자체를 설명하는 클레임이 포함된 토큰을 발행하는 것으로 이루어진다. STS가 RST에서 수신한 클레임을 변형한 결과물인 클레임을 발급하는 경우도 있다(보다 자세한 내용은 리소스 부분 참조: Vittorio Bertocci의 블로그, R-STS).

    clip_image002

    그림 1. 보안 토큰의 구조

    IdM(Identity Metasystem)
    IdM( Identity Metasystem)은 클레임 확보를 위해 기술과 상관없이 정의한 추상화 계층을 제공하는 모델이다.
    이것은 모델을 온전하게 설명하지 않는 매우 단순화된 정의이다. 예를 들어, 정책 배포 및 시스템 관리를 언급하지 않았다(리소스 부분 참조: WS-Security, WS-Trust).
    모든 아이덴티티 기술은 동일한 작업을 수행하는 경향이 있으며, 공통된 패턴을 따르고 거의 동일한 기능 역할을 다룬다. IdM은 이러한 패턴과 역할을 추상적으로 기술하면서, 클레임 교환에 관한 모든 시스템 동작을 모델링한다. 단, 이러한 패턴 및 역할이 특정 기술에 어떤 방식으로 구현되는가에 관한 세부 정보는 남겨둔다. 필요한 추상화 수준은 WS-* 사양의 제품군과 같이 상호 운용 가능한 개방형 프로토콜을 활용하여 달성한다.
    IdM은 다음 세 가지 역할을 설명한다. 
    * 주체(Subject). 주체는 클레임 정의에서 언급했던 주체 엔터티로, 트랜잭션에서 확인되어야 하는 누군가(또는 무엇)을 의미한다.
    * RP(Relying Party). RP는 이용하기 전에 인증을 거쳐야 하는 리소스이다. RP의 예로 웹 사이트와 웹 서비스를 들 수 있다. RP라는 명칭은 확인해야 하는 주체에 관한 클레임을 확보하기 위해 IP에 의존(rely)한다는 사실에서 유래한 것이다. 
    * IP(Identity Provider). IP는 클레임 정의에서 언급했던 인증 기관 엔터티를 말한다. IP는 주체에 관한 정보를 소유하며 클레임 형태로 주체를 표현할 수 있다. 특정 IP를 신뢰하는 모든 RP는 이러한 클레임에 의존하여 주체에 대한 인증 및 권한 부여와 관련된 결정을 내릴 수 있다. 참고: 종종 IP는 STS를 사용하여 토큰 형태로 클레임을 발급하지만, 이것이 곧 모든 STS가 IP임을 의미하는 것은 아니다. STS는 IP가 작업을 완료하기 위해 사용하는 도구이다.

  • Korea Evangelist

    (5) Razor 강좌 - 재사용 가능한 코드 생성

    • 0 Comments

    안녕하세요. 김대우 입니다.

     

    코난이와 함께하는 Razor & WebMatrix 시리즈 강좌리스트

    (1) WebMatrix와 Razor! 이제 시작합니다.

    (2) WebMatrix 설치부터 Hello World까지

    (3) Razor 강좌 - 기본 구문 및 주석 처리

    (4) Razor 강좌 - 코드 블록과 POST 처리

    (5) Razor 강좌 - 재사용 가능한 코드 생성 - (지금 보고 계신 내용)

    (6) Razor 강좌 - 레이아웃 페이지 구조 처리

    (7) Razor 강좌 - 파일처리

    (8) Razor 강좌 - 데이터베이스 처리

    (9) Razor 강좌 - Helper 소개(이미지, 비디오)

    (10) Razor 강좌 - 디버깅

    (11) Razor 강좌 - 캐시 처리

     

    지난 시간에는 “(4) Razor 강좌 - 코드블록과 POST처리” 강좌를 진행 했습니다.

    이번 시간에는 바로 이어서 다섯번째 강좌, “(4) Razor 강좌 - 재사용 가능한 코드 생성” 강좌를 진행 하도록 하겠습니다.

     

    재사용 가능한 코드는 어쩌면 기존 웹 개발자 분들에겐 아주 짧은 내용이 될 것 같은데요.

    바로, Include 구문과 같다고 보시면 됩니다.

    이런 HTML 페이지가 있다고 생각해 보시지요.

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">  
        <head>    
            <title>HTML 재사용 페이지</title>  
        </head>  
        <body>     
            <div class="header">    
            이곳은 사이트 배너와 메뉴에 사용되는 공통 헤더 영역 입니다.
            <hr />
            </div>
            <h1>여기가 메인 영역 입니다.</h1>    
            <p>메인 페이지 콘텐츠 영역이에요.</p>  

            <div class="footer">    
                <hr />
                SQLER에서 제공해 드립니다~ 공통 Footer 내용입니다.
            </div>
        </body>
    </html>

     

    아시죠? 걍 복사하시고, WebMatrix에서 실행해 보세요~ 결과는 아래 처럼 보이실 겁니다.

    reuse01.png

    넵. 우리네 웹사이트에서 일반적으로 사용되는 구조라고 가정해 보도록 하겠습니다.

     

    그렇다면, ��� 헤더 영역과 바닥 영역이 거의 모든 페이지에서 공통으로 사용되는데요. 재사용 가능한 저런 영역을 분리해 사용 하면 웹사이트 개발이 편리하지 않을까요? 넵, 웹개발 경험이 있는 분들은 바로 감이 오실 겁니다. include 처리죠.

    Razor에서 이런 공통 모듈 처리 - 재사용 가능한 웹페이지 영역 제작을 해 보도록 하겠습니다.

    먼저 WebMatrix에서 간단히 폴더를 만들어 볼께요. 간단히, 최상위의 WebSite1 폴더에서 마우스 우버튼 - "New Folder" 하시거나, 메뉴바의 New 버튼 아래를 클릭해 "New Folder"를 하셔도 됩니다. - 저는 Resue 라는 폴더를 하나 만들고 3개의 파일을 만들었습니다.

     

    index.cshtml  : 메인영역의 콘텐츠 영역으로 사용

    _header.cshtml : 공통 헤더 영역으로 사용

    _footer.cshtml : 공통 바닥 영역으로 사용

     

    할 예정입니다.

     

    그리고, index.cshtml 파일을 아래처럼 구성합니다.

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">  
        <head>    
            <title>HTML 재사용 페이지</title>  
        </head>  
        <body>     
            @RenderPage("_header.cshtml")
            <h1>여기가 메인 영역 입니다.</h1>    
            <p>메인 페이지 콘텐츠 영역이에요.</p>   
            @RenderPage("_footer.cshtml")
        </body>
    </html>

     

    보시면, 중간에 보이시지요? @RenderPage("_header.cshtml")

    이렇게 @RenderPage를 이용해 파일을 해당 영역으로 불러와 합칠 수 있습니다.  - include 구문 처리라고 보시면 됩니다.

            <div class="header">    
            이곳은 사이트 배너와 메뉴에 사용되는 공통 헤더 영역 입니다.
            <hr />
            </div>

    _header.cshtml 페이지의 내용

            <div class="footer">    
                <hr />
                SQLER에서 제공해 드립니다~ 공통 Footer 내용입니다.
            </div>

    _footer.cshtml 페이지의 내용

    참고하세요 :

    파일 이름 앞에 "_"를 넣는 이유는 다른 파일과의 손쉬운 식별을 위해 개발 보조 차원에서 구별해 넣은 것입니다. "_"를 반드시 사용할 필요는 없습니다.

     

    자. 이렇게 3개의 파일을 모두 저처럼 채우셨다면, 이제 실행을 해 보도록 하시지요.

    아~ 당연하겠지만, WebMatrix에서 index.cshtml 페이지를 열고 실행(F12) 하셔야 합니다.

    어떠세요? 분리된 파일이 하나의 페이지로 잘 보이시는지요?

     

    넵~ 재사용 가능한 코드 생성! 많은 도움 되시길 바랍니다.

    다음은 조금 더 향상된 코드 재사용 방안 - "레이아웃 페이지" 처리에 대해서 살펴 보도록 하겠습니다.

     

    참고자료 :

    (1) WebMatrix와 Razor! 이제 시작합니다.

    (2) WebMatrix 설치부터 Hello World까지

    (3) Razor 강좌 - 기본 구문 및 주석 처리
    (4) Razor 강좌 - 코드 블록과 POST 처리

    [동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~

    [동영상 강좌] (2) WebMatrix 5분 리뷰~

    [동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리

    [동영상 강좌] (4) Razor 강좌 - 코드 블록과 POST 처리

    ASP.NET 사이트의 Razor Tutorial 내용 3 - Creating a Consistent Look

  • Korea Evangelist

    [동영상 강좌] (4) Razor 강좌 – 코드 블록과 POST 처리

    • 0 Comments

    안녕하세요. 김대우 입니다.

     

    이전 동영상 강좌에서 소개 드린 것처럼, 이어지는 네번째 강좌는 (4) Razor 강좌 - 코드 블록과 POST 처리 입니다.

    이번 동영상 강좌 역시 포스트와 연계 되는데요.

     

    (4) Razor 강좌 - 코드 블록과 POST 처리
    위의 포스트를 꼭 참고 하시면서 영상을 함께 보시면 많은 도움 되실 겁니다.

     

    Get Microsoft Silverlight

    이번 동영상 강좌를 통해 Razor가 제공하는
    - Razor 코드블록은 HTML과 연계성이 뛰어납니다. / 복잡한 코드가 필요 없이 HTML과 혼용 가능

    - HTML Form으로 넘긴 값 처리 절차

    - URL 문자열(Query-String)으로 넘긴 값을 받아 처리하는 방법

     

    내용을 살펴 보았습니다. 다음 동영상 강좌 역시 Razor의 개발 기능에 대해서 알아 보도록 하겠습니다.

     

    감사합니다.

     

    지난 동영상 참고 자료 :

    [동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~

    [동영상 강좌] (2) WebMatrix 5분 리뷰~

    [동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리

     

    참고자료 :
    (1) WebMatrix와 Razor! 이제 시작합니다.

    (2) WebMatrix 설치부터 Hello World까지
    (3) Razor 강좌 - 기본 구문 및 주석 처리

    (4) Razor 강좌 - 코드 블록과 POST 처리

    WebMatrix Tutorial : 4 - Working with Forms

     

    Razor & WebMatrix 시리즈 강좌 일정

    (1) WebMatrix와 Razor! 이제 시작합니다.

    (2) WebMatrix 설치부터 Hello World까지

    (3) Razor 강좌 - 기본 구문 및 주석 처리

    (4) Razor 강좌 - 코드 블록과 POST 처리

    (5) Razor 강좌 - 재사용 가능한 코드 생성

    (6) Razor 강좌 - 레이아웃 페이지 구조 처리

    (7) Razor 강좌 - 파일처리

    (8) Razor 강좌 - 데이터베이스 처리

    (9) Razor 강좌 - Helper 소개(이미지, 비디오)

    (10) Razor 강좌 - 디버깅

    (11) Razor 강좌 - 캐시 처리

  • Korea Evangelist

    (4) Razor 강좌–Razor의 코드 블록과 POST 처리

    • 0 Comments

    안녕하세요. 김대우 입니다.

     

    코난이와 함께하는 Razor & WebMatrix 시리즈 강좌리스트

    (1) WebMatrix와 Razor! 이제 시작합니다.

    (2) WebMatrix 설치부터 Hello World까지

    (3) Razor 강좌 - 기본 구문 및 주석 처리

    (4) Razor 강좌 - 코드 블록과 POST 처리(지금 보고 계신 강좌)

    (5) Razor 강좌 - 재사용 가능한 코드 생성

    (6) Razor 강좌 - 레이아웃 페이지 구조 처리

    (7) Razor 강좌 - 파일처리

    (8) Razor 강좌 - 데이터베이스 처리

    (9) Razor 강좌 - Helper 소개(이미지, 비디오)

    (10) Razor 강좌 - 디버깅

    (11) Razor 강좌 - 캐시 처리

     

    지난 시간에는 “(3) Razor 강좌 - 기본 구문 및 주석 처리” 강좌를 진행 했습니다.

     

    이번 시간에는 바로 이어서 네번째 강좌, “(4) Razor 강좌 - 코드 블록과 POST 처리” 강좌를 진행 하도록 하겠습니다.

     

    코드블록 정리

    지난 시간에 간단히, 코드블록에 대해서 설명해 드렸습니다. 넵, 간단히 Razor 구문을 사용해 프로그램 로직을 만드는 영역 정도로 봐 주시면 될 것 같아요. 혹시 웹 프로그래밍을 개발하신 경험이 있으시다면, 다시 한번 코드 블록을 봐 보주세요. 기존의 웹 개발 언어, ASP.NET이나 PHP와는 조금 다르지 않으신지요? 예를들어, Razor 구문 코드 블록 안에 자유롭게 HTML을 끼워 넣을 수 있는 부분이에요.

     

    <h2>HTML 조합 반복문</h2>
    @{
        <ul>
        @foreach (string item in Request.ServerVariables)
        {
            <li>@item</li>   
        }
        </ul>
    }

     

    두 번째 줄의 <ul> HTML 태그 앞이나 뒤에 Razor 구문 끝과 시작을 알리는 식별문자(@)가 포함되지 않고도, 코드 블록으로 처리 됩니다. ASP나 PHP 개발자라면, 이런 인라인 코딩 방식이 조금은 “땡큐하게” 다가 오실지 모르겠습니다. ^_^

    Razor는 웹 개발자의 요구로 개발된 가장 최신의 웹 개발 구문입니다. 작고 심플한 웹 개발을 그 목표로 개발 되었다고 하네요(안그런게 녀석이 있겠습니까마는... ^_^;;;)

    Razor는 웹 개발을 단순하고 빠르게 수행하기 위한 수 많은 개발자들의 요구를 수렴해 개발 되어서 이런 부분도 신경쓴게 조금 보이는거 같아요. 아직 감이 잘 안 잡히신다고요? 조금 있으면 Razor로 데이터베이스를 처리하는 챕터가 진행되는데요. ASP나 PHP 개발을 해오신 분이라면, 눈물나게 땡큐한(?) Razor의 이 심플 코드블록을 느끼실 수 있을 겁니다. 그 복잡한 데이터베이스 결과를 디자이너가 건네 준 퍼즐같은 복잡한 UI에 맞춰서 HTML 사이사이에 곡예 하듯 끼워 맞추던(그냥 들어내고 그리드 컨트롤 박아 넣었던... -_-;;; ) 그 복잡함을 많이 덜어 버리실 수 있을 거에요.  

    현재 Razor beta 버전인데요. Razor의 강력한 기능을 살린 다양한 중고급 개발자를 위한 고급 개발 패턴도 함께 준비되고 있는 것 같아요. 또한, 마이크로소프트의 클라우드 컴퓨팅 기술인 Azure에 Razor로 개발한 웹 어플리케이션이 올라가면 어떻게 될까요? 더 빠르고 쉽게 웹 애플리케이션 개발이 가능해 질겁니다.

    넵~ 기회 있을 때마다 이런 소식들도 모아모아서~ 강좌 게시판을 통해 소개해 드리도록 하겠습니다. 그럼 바로 이어서, POST 처리-HTML Form 값 처리에 대한 내용을 진행해 보도록 하겠습니다.

     

    POST 처리 - HTML Form 처리

    먼저 간단한 값을 텍스트박스로 입력 받아 값을 더하는 HTML 페이지 예제를 생각해 보도록 하시지요.

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
        <head>        
            <title>Razor로 HTML Form 값을 처리</title>        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />        
            <style type="text/css">            
                body {
                    background-color: beige; font-family: Verdana, Ariel; margin: 50px;                 
                }            
                form {
                    padding: 10px; border-style: solid; width: 250px;
                }        
            </style>        
        </head>    
        <body>        
            <p>두개의 숫자를 넣고 "더하기" 버튼을 클릭하세요~</p>        
            <p></p>         
            <form action="" method="post">        
                <p>
                <label for="text1">숫자(1):</label>            
                <input type="text" name="text1" />            
                </p>            
                <p>
                <label for="text2">숫자(2):</label>            
                <input type="text" name="text2" />            
                </p>            
                <p>
                <input type="submit" value="더하기" />
                </p>                 
            </form>
            <h2>두 숫자의 합은: 입니다.</h2>     
        </body>
    </html>

     

    이런 HTML 페이지를 생각해 보시면 될 것 같습니다. – WebMatrix에서 Razor를 실행하기 위해 CSHTML 파일을 하나 생성하고, 위의 HTML코드를 마찬가지로 붙여 넣으신 후 실행해 보세요.

     

    clip_image001

    대충~ 이런 화면이 나오실 겁니다. 여기 Form의 입력 값을 Post로 받아 처리한다는거 감이 오시죠? 그럼 실제로 코드를 입혀 보도록 하지요.

     

    @{    
    var total = 0;    

    //HTML의 Form에서 POST될 경우에만 실행
    if(IsPost) {        
        // 사용자의 입력값을 받아서 저장    
        var num1 = Request["text1"];        
        var num2 = Request["text2"];        
        // 넘겨받은 값을 Integer 형으로 변환 후 더하기 수행
        total = num1.AsInt() + num2.AsInt();         
        }
    }

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
        <head>        
            <title>Razor로 HTML Form 값을 처리</title>        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />        
            <style type="text/css">            
                body {
                    background-color: beige; font-family: Verdana, Ariel; margin: 50px;                 
                }            
                form {
                    padding: 10px; border-style: solid; width: 250px;
                }        
            </style>        
        </head>    
        <body>        
            <p>두개의 숫자를 넣고 "더하기" 버튼을 클릭하세요~</p>        
            <p></p>         
            <form action="" method="post">        
                <p>
                <label for="text1">숫자(1):</label>            
                <input type="text" name="text1" />            
                </p>            
                <p>
                <label for="text2">숫자(2):</label>            
                <input type="text" name="text2" />            
                </p>            
                <p>
                <input type="submit" value="더하기" />
                </p>                 
            </form>
            @// 더한 값이 아래 표시 됩니다. 
            <h2>두 숫자의 합은: @total 입니다.</h2>     
        </body>
    </html>

     

    먼저, HTML 구문을 보시면, Input 값을 Form에서 Post 메서드로 처리하게 됩니다. Action은 비어있으니, 이 페이지로 Post 되겠지요.

    코드블록을 보시면 사용자의 입력 값을 Request로 받은 후에 값을 더하는 처리가 이루어지고, 아래의 @total에서 값을 처리하게 되는 구조 입니다. 이렇게 HTML의 Form으로 넘어온 POST된 값을 Request 처리를 이용해 받아 처리할 수 있습니다. 아울러, 넘어온 값을 숫자형으로 변환하는 처리도 봐 두시면 좋을 듯 하네요.

     

    Form으로 넘어온 Post값도 처리가 가능하며, URL에 붙어 넘어오는 쿼리 스트링(URL query-string)을 받아 처리 역시 가능합니다. 이때도 마찬가지로, Request로 값을 받아 처리 가능합니다.

    예를 들어, 요청한 URL이 이런 형식이라면

    http://localhost:8080/post.cshtml?param=hello (테스트 URL 예제로 클릭해도 동작 안합니다)

    var RequestQueryString = Request["param"];

    그리고, 아래에서 넘겨 받은 값을 받아 처리 가능합니다.

    <h2>Request로 넘어온 문자열은 : @RequestQueryString 입니다.</h2>

    이렇게 되겠네요.

     

    @{    
    var total = 0;    
    var RequestQueryString = Request["param"];

    //HTML의 Form에서 POST될 경우에만 실행
    if(IsPost) {        
        // 사용자의 입력값을 받아서 저장    
        var num1 = Request["text1"];        
        var num2 = Request["text2"];        
        // 넘겨받은 값을 Integer 형으로 변환 후 더하기 수행
        total = num1.AsInt() + num2.AsInt();         
        }
    }

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
        <head>        
            <title>Razor로 HTML Form 값을 처리</title>        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />        
            <style type="text/css">            
                body {
                    background-color: beige; font-family: Verdana, Ariel; margin: 50px;                 
                }            
                form {
                    padding: 10px; border-style: solid; width: 250px;
                }        
            </style>        
        </head>    
        <body>        
            <p>두개의 숫자를 넣고 "더하기" 버튼을 클릭하세요~</p>        
            <p></p>         
            <form action="" method="post">        
                <p>
                <label for="text1">숫자(1):</label>            
                <input type="text" name="text1" />            
                </p>            
                <p>
                <label for="text2">숫자(2):</label>            
                <input type="text" name="text2" />            
                </p>            
                <p>
                <input type="submit" value="더하기" />
                </p>                 
            </form>
            @// 더한 값이 아래 표시 됩니다. 
            <h2>두 숫자의 합은: @total 입니다.</h2>     
            <h2>Request로 넘어온 문자열은 : @RequestQueryString 입니다.</h2>     
        </body>
    </html>

     

    이렇게 간략히 Razor가 제공하는 코드블록에 대한 정리와 함께 HTML페이지의 Form에서 넘어온 Post 값과 URL 쿼리 문자열로 넘어온 값을 처리하는 예제에 대해서 살펴 보았습니다. 어떠세요? Form값에 대한 처리 쉽지요?

    그럼, 다음 강좌에서는 "(5) Razor 강좌 - 재사용 가능한 코드 생성" 내용을 진행하도록 하겠습니다.

     

    감사합니다.

     

    참고자료 :

    (1) WebMatrix와 Razor! 이제 시작합니다.

    (2) WebMatrix 설치부터 Hello World까지

    (3) Razor 강좌 - 기본 구문 및 주석 처리
    [동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~

    [동영상 강좌] (2) WebMatrix 5분 리뷰~

    [동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리

    WebMatrix Tutorial : 4 - Working with Forms

Page 1 of 3 (11 items) 123