CATEGORIES
VueJS에서 라우터(router)를 설정하고 사용하는 방법에 대하여 알아봅니다.! 라우터(Router) 설정이란?다른 프레임워크처럼 vuejs 역시 라우터를 제공합니다. 이때 VueJS에서는 Vue Router를 사용하게되는데요 라우터를 설정하게되면 특정 주소와 접근할 페이지 정보를 설정할 수 있습니다. 즉, /sample/ 이라는 주소로 접근할 경우 원하는 페이지의 정보를 보여줄 수 있도록 설정하는 것이 바로 라우터(router)에서 라우트(route)를 설정한다고 생각하시면 됩니다.SPA(싱글 페이지 어플리케이션)에서는 하나의 페이지로 동작하기 때문에 실제로 다른 주소로 접근하여 웹페이지를 리로드하지 않는 대신에 Router 설정이 반드시 필요하게 됩니다.# Vue Router 설치 및 설정하기가장 먼
Last Modified : 2019-11-18 10:25:40Python의 Flask에서 요청받은 url에 따라 응답 결과를 설정할 수 있으며 이때 라우팅을 설정해야합니다. Routing을 설정하면 Dynamic URL 요청을 원하는 경로 등으로 처리할 수 있게됩니다. 아래는 라우팅을 설정하고 사용하는 방법과 유용한 정보들에 대하여 자세히 알아봅니다.! Route 설정이 필요한 이유라우팅을 설정하면 각각의 요청받은 url에 맞게 서로 다른 응답 페이지, html 템플릿을 보여줄 수 있습니다. 만약 라우팅을 설정해 다소 다이나믹한 url 설정을 해보지 않은 경우 다소 복잡할 수 있죠... 아래는 간단하게 하나의 어플리케이션에서 여러 url경로를 기준으로 라우팅을 설정, 특정 템플릿을 보여주는 방법입니다.# Python Flask route 설정 예제보기만약 방문자의 접
Last Modified : 2020-08-31 17:15:59AngularJS를 사용하여 SPA(Single Page Application)으로 구현하는 경우 페이지 이동 즉, 현재 페이지에서 다른 페이지로 이동하는 방법으로 routeProvider 또는 stateProvider를 사용합니다. 만약 stateProvider를 사용하는 경우 $state를 사용하여 페이지 이동이 가능합니다. 아래는 다른 페이지로 이동하기 위해서 $state를 사용하는 방법을 자세히 알아보겠습니다.# $state.go()를 사용하여 페이지 이동, stateProvider 방식만약 stateProvider를 사용하여 페이지를 이동하는 경우 $state를 사용합니다. 내부 메소드로 go()가 있으며 이를 사용하면 다른 state, 페이지로 이동이 가능합니다. 먼저 간단한 $state의 go(
Last Modified : 2018-02-14 02:24:50AngularJS는 라우팅 기능(Route)을 제공하여 접속된 url에 해당하는 페이지 소스를 보여줄 수 있습니다. 이때 적용된 코드에서 아래와 같은 코드를 쉽게 만날 수 있습니다.angular.module().config(function($locationProvider) { $locationProvider.html5Mode(true); ...});위 코드의 html5Mode()의 역할은 무엇이고 어떤 기능을 하는지 알아봅니다.# locationProvider.html5Mode() 사용하는 이유html5Mode()의 값을 true로 설정하는 경우 html5의 history API를 참조하여 url관련 기능을 사용할 수 있게합니다. 여기서 내부적으로 pushstate()를 사용할 수 있게하죠. 즉...ht
Last Modified : 2018-01-16 06:36:02angularjs의 ngRoute를 사용하면 싱글페이지 앱(SPA) 어플리케이션의 페이지 이동을 구현하기 쉽도록 도와줍니다. 해당하는 앱에서 ngRouter 모듈을 추가한 뒤 config 객체에 $routeProvider를 설정합니다. 그럼 아래를 봐주세요.# $RouteProvider 예제보기이 예제는 간단한 링크를 생성하고 해당하는 링크를 클릭할 경우 정해진 template을 호출하는 간단한 예제입니다.<div> <h1>예제를 클릭하세요.</h1> <a href="#/example01">Example 01</a> <a href="#/example02">Example 02</a> </div> <div ng-view></div> <script>var app = angular.
Last Modified : 2017-11-16 07:45:37
AngularJS를 사용하여 라우팅(Route)을 사용하는 경우 이와 관련된 다양한 이벤트를 제어 및 동작할 수 있습니다. 아래는 route 시작, 업데이트 등등의 관련 이벤트를 자세히 알아보도록 하겠습니다.# Route 라우팅 관련 이벤트 알아보기먼저 route에 사용할 수 있는 이벤트로 아래와 같이 4가지가 존재합니다. 각각 조금씩 다른 동작의 이벤트를 구현합니다.i. $routeChangeStart라우트 바뀌기 이전에 이벤트가 발생 ii. $routeChangeSuccess라우트가 성공적으로 변경 후 이벤트 발생iii. $routeChangeError라우트가 변경하지 않는 에러 발생시 발생iv. $routeUpdate라우트가 업데이트 되는 시점에 이벤트 발생# route 이벤트 동작 예제보기아래 예제
Last Modified : 2017-11-18 02:34:14uwsgi 미들웨어를 사용한 웹어플리케이션 구축 후 uwsgi에서 내부 라우팅을 사용하려고 설정하거나 기타 이유로 아래와 같이 에러가 발생할 수 있습니다."no internal routing support, rebuild with pcre support uwsgi"아래는 해당 이슈를 해결하기 위한 방법입니다.# uwsgi internal routing 에러 수정하기일반적으로 미들웨어에서 내부 라우팅 처리를 많이 하지는 않지만 목적에 따라 필요할 수 있습니다. uwsgi 역시 다양한 라우팅 방법을 지원하고 있죠. 이때 내부 라우팅 에러 중 위 메시즈가 나타난 경우 uwsgi에서 내부 pcre 패키지 모듈을 지원하지 않아 발생할 수 있습니다. 이 경우 아래와 모듈 설치 및 uwsgi 재설치로 비교적 간단하게 해
Last Modified : 2019-12-27 23:26:07React 프레임워크 nextjs에서 페이지 이동하는 다양한 방법과 예제를 알아봅니다.# nextjs 페이지 이동하는 방법nextjs에는 SSR(Server Side Rendering)을 목적으로 많이 사용되므로 링크 이동시 두 가지 방법이 사용됩니다.state 변경의 비동기 이동 방식서버 사이드 렌더링(SSR) 방식의 페이지 이동아래에서 각각 알아봅니다.! 서버 사이드 방식의 페이지 이동, nextjs여기서 두 번째에 해당하는 SSR 방식은 일반적인 자바스크립트 코드나 a 태그를 사용하는 방법을 그대로 사용하는 것입니다.<a href="/test">Move</a>자바스크립트를 사용할 수도 있죠.window.open('/test', '_self');다음으로 서버사이드렌더링 방식이 아닌 라우팅을 사용한 sta
Last Modified : 2020-08-28 19:51:19AngularJS에서 $routeProvider를 사용하는 경우 template, controller 등을 설정할 수 있습니다.만약 html에 사용하는 컨트롤러에 별칭을 사용할 수 있도록 'controller as' 선언처럼 route설정시 사용하는 방법은 무엇일까요?# routeProvider 설정시 컨트롤러의 별칭 사용하는 방법이 경우 route 설정 옵션으로 controllerAs를 사용하는 것으로 가능합니다. 예를들어 만약 mainController를 ctrl로 사용하는 경우 아래와 같이 사용할 수 있게됩니다.$routeProvider .when('/', { templateUrl: 'main.html', controller: 'mainController',
Last Modified : 2018-08-07 21:35:46