방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰/Angular Tutorial(new)36 앵귤러 튜토리얼(Angular tutorial) - 5 : 컴포넌트 저번시간에는 앵귤러의 컴포넌트에 대해서 살펴 보았습니다. 이번시간에도 마찬가지로 컴포넌트에 대해서 알아보겠습니다! 앵귤러의 컴포넌트는 화면구성을 담당합니다. 컴포넌트 파일(*.ts)에 쓰여진 데이터를 html 파일에 표출하기도 하고, 데이터를 서버에 CRUD하는 역할을 하기도 합니다. 이러한 컴포넌트는 기본적으로 class 형태로 구성되어 있습니다. 앵귤러에서 컴포넌트 파일을 만든다는 것은 class로 이루어진 파일에 컴포넌트 데코레이터(@Component)를 붙여주는 것 입니다. 형태를 다시한번 보겠습니다. import { Component } from '@angular/core'; @Component({ //key, value 형식의 내용 }) export class MyCustomComponent .. 2020. 5. 18. 앵귤러 튜토리얼(Angular tutorial) - 4 : 컴포넌트 저번시간까지는 앵귤러에서의 컴포넌트의 역할에 대해서 간단하게 살펴 보았습니다. 컴포넌트는 앵귤러에서 화면구성, 이벤트에 대한 행위를 담당 합니다. 우리가 html파일에서 여러 tag로 만든 화면, 테그 안에 선언한 다양한 이벤트, 변수 등에 대한 행위 이러한 사용자 ui와 직접적으로 동작하는 것이 바로 컴포넌트입니다. 그러면 컴포넌트에 대해 몇가지 예제를 통해서 좀 더 알아보겠습니다. firstStudy 프로젝트로 이동한 뒤에 src - app으로 이동합니다. 그리고 app.component.ts 파일을 더블클릭합니다. 배열과 함수를 추가하여보았습니다. 아래 내용으로 수정하여주세요. import { Component } from '@angular/core'; const array : Array = ['d.. 2020. 5. 15. 앵귤러 튜토리얼(Angular tutorial) - 3 : 기본 구조 저번시간까지는 앵귤러 개발에 대한 환경구성, 그리고 사용하는 목적과 이유등에 대해서 살펴보았습니다. 이번시간에는 처음 설치한 firstStudy 프로젝트를 기반으로 앵귤러의 기본 구조에 대해 단계적으로 살펴보려 합니다. 앵귤러는 타입스크립트 기반으로 구성되어있습니다. 타입스크립트는 자바스크립트와 거의 동일하며, 큰 특징으로는 데이터의 형태(type)가 존재하여 조금 더 엄격한 코드관리가 이루어 질 수 있게 합니다. 타입스크립트에 대한 내용을 살펴보시려면 아래 사이트에서 연습을 해보시는 것도 좋습니다. https://lts0606.tistory.com/17 TypeScript 시작 Javascript 문법이 강력해지고 규모가 커지면서 코드의 관리가 중요해졌다. 자바스크립트는 객체지향 언어의 개념보다는 동적.. 2020. 5. 11. 앵귤러 튜토리얼(Angular tutorial) - 2 : 구성 앵귤러 환경구성은 문제없이 잘 끝내셨는지요! 이번시간에는 앵귤러를 왜 쓰는지, 어떻게 사용해서 실제로 적용하는지에 대해서 먼저 살펴보도록 하겠습니다. 예전의 HTML에서의 개발방식은 Javascript, Jquery를 사용하여 소위 돔(Dom) 이라는 객체를 직접 제어하고 데이터를 가져와서 서버로 전달해 주는 방식이였습니다. 그러다 보니 조금 개발적 지식이 있는 사람들은 브라우저를 실행한 뒤에 개발자 도구를 켜서 직접 객체에 접근해서 데이터를 변조해서 서버로 전송할 수도 있었습니다. 또한 HTML5로 기능이 업그레이드 되면서 엄청난 웹 기술발전이 이루어짐에 따라 많은량의 프론트 코드가 늘어가게 되었습니다. 서버언어가(자바의jstl, php의 echo나 node.js의 표현식 등) html 페이지에 존재하.. 2020. 5. 6. 앵귤러 튜토리얼(Angular tutorial) - 1 : 소개 안녕하세요. 앵귤러에 대해서 알아보기위해 이곳을 찾아주신 분 들께 감사의 말씀 드립니다.^^ 천천히, 초심자도 조금 더 쉽게 접근할 수 있도록 내용을 구성하여 보겠습니다. 어려운 부분이나 이해가 가지 않는 부분은 언제든 연락주세요. * 기본적으로 CLI(커멘드 라인 인터페이스)를 전혀 모르시거나, 자바스크립트를 최소한 1년이상 하지 않으셨다면 접근하기는 매우 어렵습니다. * 난이도를 위해 ES6(ECMA6) 이상의 문법을 최대한 사용하지 않고 소개하고 있습니다. : ) 앵귤러는 웹 화면을 구성하는 데 사용되는 프레임워크 입니다. Javascript, Jquery 처럼 각종 명령어와 규칙을 통해서 웹 화면에 이벤트와 기능을 부여하고, 사용자가 원하는 행동을 하기 위해 만들어졌습니다. 이와 비슷한 유형의 프.. 2020. 5. 6. 앵귤러 튜토리얼(Angular tutorial) - 0 안녕하세요. 웹개발자 콩콩시 입니다. ^^ 이전에 작성한 앵귤러 포스팅은...조금 더 깊게 공부를 하지 못하고 쓴 것 같아서 내용이 설명 보다는 단순한 예제위주, 예문위주로 된 것 같습니다..ㅠ 그래서 이번에 다시 한번 튜토리얼을 만들어보려고합니다. 쉽지않는 작업이 될 것 같지만 천천히 해보도록 하겠습니다. 일주일에 최소 1개씩 작성해보도록 하겠습니다. 마찬가지로, 데이터베이스와의 연동은 파이어베이스로 하려고 합니다. 불필요한 설명이나 내용은 전부 빼도록 하며, 코드설명에 조금 더 집중하여 보겠습니다. 감사합니다. ^^ * 여담 : 앵귤러는 Javascript를 최소한 1년이상 다루어보신 분 이상만 접근하셔야 됩니다. 'ㅅ'~ 2020. 4. 29. 이전 1 ··· 3 4 5 6 다음
