Web Standard

이번장에서는 메인 페이지를 만들어 보겠습니다. 메인 페이지는 요일별 웹툰 리스트를 표시해줍니다. 해야할 일을 정의해보면,1. 요일별 웹툰 리스트 JSON 데이터 만들기 (더미 데이터)2. Main 컴포넌트에서 axios로 데이터 가져오기3. 요일별 웹툰 리스트 컴포넌트 만들기 우선 간단한 JSON파일을 만듭니다. (실제 프로젝트라면 REST API를 호출하겠지만, 이 강좌에 백엔드 영역은 포함되지 않습니다. 그냥 임시로 JSON 파일을 만들어서 활용하겠습니다.) 메인 화면에서 노출 될 웹툰 리스트이며, 각 웹툰은 요일을 가지고 있습니다. 이 파일을 axios를 이용해 불러올 것이기 때문에 src/폴더가 아닌 public/폴더의 dummy/폴더를 만들어서 넣어 두었습니다. /public/dummy/webt..

이번장에서는 헤더와 푸터, GNB등 공통으로 사용되는 컴포넌트를 만들어 보겠습니다.별 역할이 필요없는 애들이기 때문에 함수형 컴포넌트로 만들어 줍니다. /src/component/ Header 와 Footer를 간단하게 만들어 주시고,Gnb는 사실 요일탭인데 그냥 간단하게 3개만 만들었습니다. 메인 페이지(Main)와 웹툰 상세페이지(WebtoonHome)에 헤더, 푸터, GNB를 넣어줍니다. /src/component/Main.js 이런 화면이 나왔네요. 이번 강의의 모든 코드는 Github : tutorial_02 에서 확인하실 수 있습니다. 다음편 : React 강좌 tutorial 3 - 메인 페이지 (웹툰서비스 만들기)

HTML, CSS, JS 에 대한 강좌는 아닙니다.React의 대한 기본 개념을 알고 있는 상태에서 실제 서비스를 어떻게 구현하는지 알아보는 예제입니다. 모든 코드는 https://github.com/yunyong/react-tutorial-webtoon 에서 확인하실 수 있습니다.tutorial_01 ~ 06까지 브랜치로 나뉘어져 있으니, 각 강좌에 맞는 코드를 쉽게 찾으실 수 있습니다.CSS 관련 코딩은 포스트에서 제외되었습니다. Github 코드를 참고 해주시기 바랍니다. 우선, create-react-app으로 새로운 프로젝트를 생성합니다. $ create-react-app react-tutorial-webtoon 완료되었으면 $ cd react-tutorial-webtoon $ npm start..

각 작품 클릭시 평점이 뜰 수 있게 click 이벤트를 줘봅시다. (ng-click 사용) 12345678910[ html ] {{ ${d}index+1 }} {{ webtoon.title }} {{ webtoon.cartoon.artists[0].name }} Colored by Color Scriptercs 123456789101112[ js ] webtoonApp.controller('webtoonListCtrl', function($scope, $http){ $http.get('json url here..').success(function(data){ $scope.webtoons = data.data.webtoons; }); //평점 메세지 $scope.showScore = function(sco..

$http(XMLHttpRequest)를 이용해 json 데이터를 받아오자. [ guide ]1234567891011121314151617181920212223//Simple GET request example :$http.get('/someUrl'). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response..

Angular js로 반복문 표현시 팁입니다. 앞선 예제 이어서 해보겠습니다. 1234567891011121314 {{ webtoons.length }}개의 작품 {{ $index+1 }} {{ webtoon.title }} {{ webtoon.cartoon.artists[0].name }} Colored by Color Scriptercs 조건문ng-if : 예제에는 index 가 3미만인것만 표기했습니다. (총 3개 노출)webtoon.img ? webtoon.img : 'default.jpg' 등으로도 표현가능합니다. 반복문$index : index 표현$first : 첫번째 요소$middle : 첫번째나 마지막 제외한 요소 모두$last : 마지막 요소$even : 짝수번째 요소$odd : 홀수번..

Angular js로 이런걸 만들겁니다. 우선 해야할일은 Angular 모듈 지정 : html 에 ng-app 을 통해 선언해줍니다. (실제 마크업에는 data-ng-app으로 되어있는데 w3c 벨리데이터 통과를 위함) 12[ html ] cs 12[ js ]var webtoonApp = angular.module('webtoonApp',[]);cs view에 표현할 div에 컨트롤러 지정 : ng-controller 사용 (webtoonListCtrl) 12[html] cs 12[ js ]webtoonApp.controller('webtoonListCtrl', function(){});cs 컨트롤러에서 내려주는 model을 루프 돌려줌 : ng-repeat 을 통해 webtoons 배열 루프 12[ h..