YoonDev

Directive? Directive란 HTML Compiler가 해석할 수 있는 AngularJS에서 제공하는 특정한 행위를 가진 요소를 말함. 따라서 AngularJS에서 제공하는 지시어(Directive)를 통해 HTML을 확장하는 것이다. AngularJS에서 기본적으로 제공하는 디렉티브로 HTML을 확장할 수도 있지만, AngularJS는 디렉티브를 별도로 만들어 관리할 수 있는 기능도 제공하고 있다. 예시 지시어를 추가, 관리하는 방법은 모듈이 제공하는 directive함수를 정의하면 된다. 첫번째 인자에 추가할 디렉티브의 이름을 Camel Case 표기법으로 넣고 두번째 인자에 디렉티브가 수행할 기능을 정의할 함수를 넣으면 된다. 추가한 디렉티브는 HTML에서 여러가지 표기법으로 사용 가능 ..

BOARD UPDATE 글 수정 기능을 추가하였다. 전에 만들었던 글 작성 jsp를 가져와 수정 페이지를 만들었는데 크게 달라진건 없다. 수정할 글의 데이터들을 가져와 저장을 하면 해당 글의 db가 업데이트가 되면서 글 수정이 되는 것이다. 수정 페이지에서 사용하는 컨트롤러이다. ajax로 수정할 글의 데이터를 가져와 $scope에 데이터들을 저장한다. 그 후 수정이 끝나 저장을하면 updateSubmit 함수가 호출되어 수정 저장이 된다. 저장이 성공적으로 처리되면 수정했던 글의 상세보기로 이동된다. 수정 서비스 로직도 글 작성 로직과 크게 다른게 없고 어떤 글을 수정할지에 대한 부분만 추가되었다. 이 서비스 로직이 굉장히 지저분하다. 뷰에서 받은 데이터들을 가져와 유효성 검사를 거치는 로직인데 CRU..

BOARD WRITE 글 작성 기능을 추가하였다. 글 상세보기에 대한 틀을 가져와 form 형태로 바꿔주기만 했다. form을 만들어 angularJS를 통해 form에 대한 확장된 기능을 사용할 수 있도록 구성하였다. form에 name을 정의하고 각 컨트롤 요소마다 ng-model 디렉티브를 정의하여 form submit 시 해당 컨트롤러의 scope에는 form과 form의 컨트롤 요소의 상태에 대한 값들을 저장하게 된다. form submit시 호출하는 uploadBoard 함수도 추가하였다. 각 컨트롤 요소를 파라미터에 담아 http통신을 post방식으로 요청하는 객체를 리턴하는 함수이다. $modelValue는 각 컨트롤 요소가 바인딩된 모델 값을 말한다. http 요청을 받게 되면 html에..

AngularJS Form? AngularJS는 HTML5의 FORM도 확장한다. 요소에 대한 유효성 검사를 추가할 수 있는 방법을 제공함. 사용자의 액션에 따라 요소에 대한 클래스 상태값이 바뀐다. 이에 따라 더 동적으로 폼을 관리할 수 있는 것이다. 기본적인 form 양식을 만들었다. 컨트롤러에서 $scope를 콘솔 로그로 출력하도록 했다. scope를 console.log로 확인해봤을때, form에 대한 데이터가 scope에 정의되어 있는 것을 확인할 수 있다. form을 만드는 것 만으로도 angluarJS에 의해 FormController를 통해 관리 되고 있는 것이다. form 내의 입력 요소들에 대한 접근을 하기 위해선 scope.f.msg.$viewValue 같은 형식으로 접근하면 된다. ..

BOARD DETAIL 글 상세보기 기능을 추가하였다. 기능을 추가하면서 막히는 부분이 있었지만 그래도 기본적인 기능이라 잘 풀어 나갔다. bootstrap을 사용해서 UI구성을 하는게 제일 어려운 것 같다.. 리스트 페이지에서 글을 선택하면 상세 페이지로 넘어가는 식이다. 16LINE에 게시판 리스트의 글 제목을 누르면 state가 detail로 바뀌도록 수정했다. state를 바꿀때 파라미터도 같이 넘겨줬다. 12LINE처럼":/param" 형식으로 지정해주면 넘겨받은 파라미터를 url에 표시할 수 있다. 상세 보기 페이지에서 사용되는 컨트롤러이다. stateProvider에서 state가 바뀔때 파라미터를 넘겼었는데, 이 파라미터를 가져오는 모듈은 $stateParams이다. 8LINE에 보면 $s..

AngularJS를 이용하여 CRUD 패턴을 익히기 위해 게시판을 만들었다. https://github.com/rthfickro3/AngularJSBoard GitHub - rthfickro3/AngularJSBoard: make board with AngularJS make board with AngularJS. Contribute to rthfickro3/AngularJSBoard development by creating an account on GitHub. github.com 개발환경 - Spring Boot - AngularJS - MyBatis - jquery - bootstrap - jsp 먼저 프로젝트의 패키지 구조이다. 패키지 구조를 각자 역할에 따라 명확히 구분하였다. 이 구조는 추후..

AngularJS로 게시판을 만들기 전에, 부트스트랩 적용법을 먼저 숙지할 예정이다. Bootstrap? 부트스트랩은 반응형이며 모바일 우선인 웹 프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다. 즉, 웹 프로젝트 개발을 하면서 부트스트랩을 이용하면 UI, UX 관점에서의 완성도를 높일 수 있는 도구로 생각하면된다. 웹을 개발하면서 html코드를 작성할 때 디자인을 신경써야할 때가 있다. css를 수정하여 어떻게 더 이쁘게 만들어야할지 고민할 때가 많은데 이때 부트스트랩을 이용하면 디자인에 대한 부담을 덜 수 있다. 부트스트랩의 공식 사이트 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로..

AngularJS의 $http는 ajax통신과 비슷한 구조를 가지고 있으며, 동시에 비동기 통신을 하고있다. 예제는 정말 간단하다. 43~44LINE 액션을 위한 버튼을 만들고 16~19LINE 액션에 따른 함수들을 정의, 이 함수들에는 ajaxFactory에 선언된 서비스들을 호출하여 원하는 값을 리턴 받는다. 31LINE getCookingFood에서 $http 객체를 이용하여 서버의 cook이라는 EndPoint로 할당되어 있는 서버의 컨트롤러 메소드를 찾아 그에 맞는 값을 가져오게 된다. produces : 해당 타입의 데이터만 반환하겠다고 설정 consumes : 해당 타입의 데이터만 처리하도록 설정 @ResponseBody : 메서드의 return 값을 HTTP Response의 body에 담..

Factory? 앵귤러JS 에서 Factory는 모듈에서 사용되는 서비스를 팩토리 형태로 등록하는 것을 말한다. Factory를 이용하여 관련 기능을 하나로 묶고 그걸 이용하여 동적 웹페이지를 구현할 수 있다. AngularJS에서 서비스를 등록하는 방법에는 provider, factory, service가 있는데 이 세 종류의 차이점은 아래 블로그에 잘 설명되어 있다. https://blog.naver.com/PostView.naver?blogId=jjoommnn&logNo=130180336800&redirect=Dlog&widgetTypeCall=true&directAccess=false AngularJS의 provider, factory, service의 차이점 AngularJS의 특징중의 하나는,..

Router? 라우터의 네트워크 관점에선 데이터를 송수신하는 역할을 담당한다. AngularJS의 Router은 SPA을 구현할 수 있도록 지원하는 기능을 담당한다. 사이트를 이용할 때 페이지를 이동하면 로딩이 되면서 요청한 페이지를 불러오는 방식이 있다면, SPA는 원하는 페이지를 로딩 없이 특정 영역에 바꿔치기하여 페이지를 불러 올 수 있는 것이다. SPA의 장점은 페이지를 구성하는데 필요한 리소스를 최초로 한번만 불러올 수 있다는 것이다. (페이지를 바꿔치기 하기 때문에) AngularJS에는 기본적으로 제공하는 라우터와 좀 더 안정화된 버전으로 오픈소스로 제공되는 라우터가 있는데 후자를 사용하여 SPA를 구현할 것이다. ui.router을 사용하기 위해 angular-ui-router 라이브러리를..