angular

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...

Redux + React Redux는 state 관리 툴이다. 오해하지 말아야할 것이, React에 의존하지 않는 툴이다. Vue, Angular 심지어 vinilla JS에서도 돌아간다. 그러나 React에서 사용하면서 유명세를 탄 것도 사실이므로 React와 Redux를 같이 배우는 것이 좋다. 우선 기본적인 Redux를 살펴보고 이후에 React에 적용해보도록 하자. 🚗 redux 설치 npm i redux 🚗 Reducer Context API와 마찬가지로 Store는 정보를 저장하는 곳입니다. 여기서 reducer라는 개념이 새로 등장합니다. reducer는 간단하게, 1️⃣저장소(Store)에 있는 데이터를 수정하는 함수입니다. 2️⃣reducer가 return하는 값은 Store에 저장됩니다. 정리하자면, Store에 있는 data를 컨트롤하고 저장하는 중요한 함수라고 보면 됩니다. reducer만이 데이터를 수정할 수 있기 때문에 추후에 데이터를 수정, 가공하기 위해서는 반드시 reducer를 거쳐야만 합니다. import { createStore } from "redux"; // createStore 함수에게 전달할 reducer를 만듭니다. // reducer는 data를 수정(modify)할 함수입니다. const countModifier = () => { return "Hello" }; // 정보를 저장하는 store를 생성합니다. const countStore = createStore(countModifier); 여기서 Store란 객체가가 가지고 있는 함수를 살펴봅시다. 전부 다 알아야 하지만 가장 중요한 3개를 먼저 알아보겠습니다. getState란 함수에는 reducer가 return한 값이 담겨 있으며 dispatch를 통해 reducer에게 action을 줄 수 있습니다. subscribe는 store 안의 변화를 감지합니다. Store를 구독...

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다. - 좋아요 아래와 같은 업무를 훌륭히 감당하실 분을 모십니다.서비스 관련 DB 모델링, DB 최적화 작업서버 & DB 관리Frontend & Backend 인터페이스의 최적화 작업 화합과 성장을 같이! - Angular JS의 경험 - Node.js - javascript 능숙자 - DRMS 사용 능숙자 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/742 by ccl(A) rewrite - 2020-03-22 12:20:20

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자... Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 팀 내 뛰어난 풀스택 개발자분들이 Angular.js, Python, MySQL 모두 작업 가능하시니 오셔서 함께 배우며 즐겁게 작업하시면 됩니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. 개발 업무: 레터플라이의 핵심 기능인 편지, 사진을 제작하는 레터에디터, 포토에디터 개발. 이 기능들은 "모바일 웹을 통한 출력제품 생산 자동화 기술"(특허 출원 준비중)로서 레터플라이에서 자체개발했습니다. 근무 지역: 광화문역 5번출구 바로 앞 근무 환경: 책임과 존중을 중요시하는 수평적인 분위기, 도전적이며 서로에게 배우는 문화 근무 시간: 10-19시, 출근시간 자유 지정. 급여: 연봉/스톡옵션 협의 지원 방법: 팀 지원하기 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/721 by ccl(A) rewrite - 2020-03-20 09:20:18

Push Notification using Ionic 4 and Firebase Cloud Messaging https://www.djamware.com/post/5c6ccd1f80aca754f7a9d1ec/push-notification-using-ionic-4-and-firebase-cloud-messaging#setup-google-fcm The comprehensive step by step tutorial on receiving a push notification on Mobile App using Ionic 4 and Firebase Cloud Messaging (FCM) The comprehensive step by step tutorial on receiving a push notification on Mobile App using Ionic 4 and Firebase Cloud Messaging (FCM). We will use Ionic 4 Cordova native FCM plugin for receiving a push notification and using Firebase API for sending push notification from the Postman. A few years back, we have created a tutorial on receiving push notification using Firebase Cloud Messaging with Ionic 2. Shortcut to the steps: Google said that notification is a message that pops up on the user's device. Notifications can be triggered locally by an open application, or they can be "pushed" from the server to the user even when the...

2020-03-18 TIL 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 from http://sang5c.tistory.com/39 by ccl(A) rewrite - 2020-03-19 01:20:22

자바스크립트 문법(1)분할 배열 본 게시글은 아래의 글을 필사하였습니다. https://webdoli.tistory.com/63?category=833233 (1)분할 배열 1. 자바스크립트의 특징 javascript가 ES2015로 넘어오면서 바뀐 점을 하나씩 살펴보자. 우리가 흔히 말하는 자바스크립트의 원래 이름은 'ECMA Script'이다. 자바스크립트는 '자바'의 인기에 편승하려고 만든 이름이 그래도 굳어져서 부르게 된 이름이다. '자바스크립트'의 신버전(규약)이 나올 때 'Ecma script'를 줄인 ES날짜'형태로 등장한다. 먼저 ES2015에서 눈에 띄는 첫 부분이, '분할배열''분할객체'이다. 자바스크립트에서는, 변수의 형(type)을 엄격하게 정하지 않아도 된다. Java, C++, C#등... 객체지향 언어에 익숙한 이들에게 자바스크립트는 굉장히 어색하다. 게다가 모든 변수 앞에 'var'를 선언하는 것만으로 '지역변수'가 생성된다. 2. 자바스크립트의 배열 기존 자바스크립트 버전에서는 배열속의 데이터를 받기 위해서는 배열이름[0], 배열이름[1] 방식으로 찾아야만 했었다. 위의 방식에 익숙해졌기 때문에 불편함을 못 느꼈을 수도 있지만, [0], [1], [2] ... 식의 방식은, 언어를 해석하는 데에 있어, 가독성이 떨어진다는 단점이 있다. 그래서 ES2015부터는 배열에 직접 이름을 지정할 수 있도록 만들었고, 그 결과 아래처럼 작성할 수 있게 되었다. let data1 = [23, 34, 45, 32, 89, 45]; //배열을 선언한다. let [korea_score, math_score, english_score, history_score, music_score, science_score] = data1; //let을 객체 리터럴 방식으로 '배열명'을 먼저 넣고...

줄넘기 운동 효과, 건강, 근육량, 다이어트, 유산소, 줄넘기 잘하는 법 줄넘기 건강 효과 ● 신체 운동 능력 향상 줄넘기 효과중 가장 첫 번째로 꼽을 수 있는 것이 바로 신체 능력 향상 효과입니다. 줄넘기는 신체 컨트롤 능력과 속도를 높여주는 좋은 운동입니다. 많은 운동 선수들이 경기나 시합 전 줄넘기를 많이들 합니다. 민첩성과 리듬성 향상 및 근력 증가에 도움이 되기 때문입니다 ● 근육량 증가 운동을 하면서 근육량을 늘리고 싶어하는 경우가 많이들 있습니다. 줄넘기도 근육량 증가에 어느 정도의 도움이 된다고 합니다. 줄넘기는 근 손실 없이 근육을 생성하는데 많은 도움이 되기 때문입니다. 하지만 너무 무리하게 할 경우 근육이 뭉쳐 오히려 역효과를 낼 수 있으므로 줄넘기를 하기 전과 후에 꼭 스트레칭을하여 근육을 풀어주어야 안전한 운동을 하실 수 있습니다. ● 지구력 향상 단순 반복 운동인 줄넘기는 처음 시작할 때에는 지루할 수 있습니다. 하지만 차근차근 갯수를 늘려가고 또 속도를 높이다 보면 지구력 향상에 큰 도움이 됩니다. 지구력이란 일정한 작업을 장시간 계속할 수 있는 능력으로 체력의 요인 중 중요한 것의 하나입니다. ● 심폐기능 향상 줄넘기를 꾸준히 하면 심폐기능이 향상되어 심장과 폐를 건강하게 만들어 줍니다. 심폐지구력이 향상되어 체력 향상에 많은 도움이 됩니다. 평소 운동을 하지 않거나 심폐기능이 약한 경우에는 몇 번만 뛰어도 숨이 턱까지 차오르지만 조금씩 운동량을 늘려가면서 하다 보면 숨이 차는 것도 줄어들어 심페기능도 향상됩니다. ● 심혈관 건강에 도움 줄넘기는 유산소 운동과 근력 운동을 동시에 할 수 있는 운동입니다. 심혈관계 건강에 많은 도움이 되고 매일 꾸준히 20분씩 줄넘기 운동을 하는 것만으도 심장과 폐가 건강해 질 수 있습니다. 다리 근육이 튼튼해 지는데에도 많은 도움이 됩니다. ● 골밀도 증가 줄넘기를 하며 뛰는 동작이 골밀도 증가에 좋은...

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a... - 좋아요 하이 .. !! Angular2 로 개발을 하다가 아래와 같은 에러를 만났다. 흠 .. 이게 뭘까 열심히 구글링을 해봤다. 간단한 내용이다. 모듈을 추가해주기만 하면 된다. app.module.ts를 열어보자. 여기에다가 FormsModule 과 ReactiveFormsModule을 추가해주면 문제가 해결된다 ! 다들 즐거운 코딩하자. from http://devkingdom.tistory.com/106 by ccl(A) rewrite - 2020-03-18 00:54:15

2020년 찰스앤키스 3월 상품평 BEST50 추천 절대로 고개를 떨구지 말라. 고개를 치켜들고 세상을 똑바로 바라보라. Never bend your head. Hold it high. Look the world straight in the eye. - 헬렌 켈러 - 안녕하세요. 오늘은 요즘 잘나가는 찰스앤키스 제품들만 딱 뽑아왔어요 제품 순위는 AI 빅데이터를 통해 판매실적과 상품정보의 정확도, 선호도 등을 종합적으로 고려한 제품들이에요~ 제품 순위를 한번에 볼 수 있어서 원하는 상품의 디자인을 찾아볼 수 있어요!!~ 제품 이미지를 클릭하면 상품정보와 구매후기를 볼 수 있어요 가격은 변동 될 수 있으니 저렴할 때 구매하세요 그러면 즐거운 쇼핑이 되기를 바랄게요^^ * 본 게시물은 쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다. from http://kk-teddy.tistory.com/84 by ccl(A) rewrite - 2020-03-16 21:54:23

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자... Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 팀 내 뛰어난 풀스택 개발자분들이 Angular.js, Python, MySQL 모두 작업 가능하시니 오셔서 함께 배우며 즐겁게 작업하시면 됩니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. 개발 업무: 레터플라이의 핵심 기능인 편지, 사진을 제작하는 레터에디터, 포토에디터 개발. 이 기능들은 "모바일 웹을 통한 출력제품 생산 자동화 기술"(특허 출원 준비중)로서 레터플라이에서 자체개발했습니다. 근무 지역: 광화문역 5번출구 바로 앞 근무 환경: 책임과 존중을 중요시하는 수평적인 분위기, 도전적이며 서로에게 배우는 문화 근무 시간: 10-19시, 출근시간 자유 지정. 급여: 연봉/스톡옵션 협의 지원 방법: 팀 지원하기 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/685 by ccl(A) rewrite - 2020-03-16 09:20:23

Do it! 리액트 프로그래밍 정석 Do it! 시리즈의 새로운 자바스크립트 라이브러리 도서다. Do it! 시리즈에서 Node.js 와 Vue.js 로 접한 적이 있다. 리액트가 왜 안나올까 생각했었는데, 올해 초에 출시가 됐다. ( 다음은 어떤 자바스크립트 진영이 나올까, Angular.js 이려나?! ) Do it! 시리즈라는 점 외에 눈길을 끄는 점은 '정석' 이라는 제목과 '가상 코인 거래소' 라는 프로젝트가 명시되어 있다는 점이다. 다른 웹 프론트 도서들을 봤을 때 TODO 예제는 다뤄본 적은 있어도, 그럴싸한 프로젝트까지 다룬 도서는 없었다. 데이터를 관리하고 서버와 통신하여 화면에 나타나기까지 일련의 개발 과정을 다룬다. 이 과정에서 Redux, Axios, Router, 실무에 쓰이는 자바스크립트 라이브러리와 미들웨어들을 적용한다. 인상 깊게 봤던 점은 다음과 같다. 첫 번째로 코드 자체보다는 프로젝트를 진행할 때 요구 명세서부터 화면 설계, 통신 설계까지 어떤 프로세스로 프로젝트를 진행하는지 인상 깊게 읽었다. 두 번째로 리액트 프로젝트를 할 때 리덕스 스토어로 어떻게 하면 데이터를 효율적으로 관리할 수 있는지 궁금했었는데 해소가 됐다. 세 번째로 화면 설계할 때 UI 라이브러리를 사용하는 것이 아니라 Common 컴포넌트도 정의하고 직접 제작한다. CSS 스타일을 어떻게 하면 관리하고 컴포넌트들을 어떻게 분리하는지의 과정을 알 수 있어서 좋았다. 최종 코인 거래소 화면이다. 상단바부터 컴포넌트 배치, 데이터 관리와 네트워크 통신까지 총 집약되어 있다. 마지막 부록에서는 파이어베이스로 리액트 프로젝트를 어떻게 배포할 수 있는지 설명한다. 파이어베이스 배포는 이전에도 해봤던 적이 있기도 하고 어렵지 않은 작업이기에 쉽게 배포가 가능했다. 그리고 리액트와 호환되는 next.js 라이브러리로 서버 사이드 렌더링을 도입해서 검색 엔진에도 표시될 수 있도록 한다. ...

[ 리덕스(Redux)에 대해 알아보자! ] - Redux 초급 안녕하세요. 프렛입니다. 오늘은 Redux에 대해 알아보겠습니다. 자, Redux는 기본적으로 JavaScript application들의 state(상태)를 관리하는 방법입니다. Redux => Javascript application들의 state(상태)를 관리하는 방법 * Javascript이지, React에만 종속되어있는 것이 아닙니다. * Redux는 React와 별개입니다. Redux는 Angular에서도 쓸 수 있고, Vue.js에서도 쓸 수 있고, Vanilla Javascript(framework가 없는 pure한 JS)에서도 쓸 수 있고, 원하는 한 모든 Javascript application에서 모두 쓸 수 있다는 말이죠! 하지만, Redux는 사람들이 React와 많이 사용을 하므로써, 매우 유명해졌기 때문에, React에만 쓸 수 있는 라이브러리라고 착각하는 경우가 많죠! 뭐, 덕분에 그래서 Redux가 많이 유명해지긴 했지만요, 그러나, Redux는 앞서 말씀드린 것과 같이, React에만 의존하는 라이브러리가 아닙니다. 이 Redux에 대한 글에서는 첫번째로, Redux를 normal한 Javascript application에서 우리 힘으로 vanilla javascript로 application을 만드는 방법을 알아보겠습니다. 그래서 이 글에서는, React를 예제로 다루지 않으며, Redux를 Vinilla Javascript와 사용하는 법에 대해서 알아보겠습니다. 그리고 난 후, Redux를 React와 함께 사용하는 방법에 대해 알아보겠습니다. 많은 사람들이 Redux를 배울때, 보통 사람들이 배우라고 해서 배우거나, 그냥 많이들어봐서 배우곤 합니다. 사실, 아주 적은 사람들이 Redux가 정확히 무슨 문제를 해결하는지 알고 배우죠. 그래서 저도 그렇고, 이 글을 ...

SEO (Search Engine Optimization) SEO Search Engine Optimization의 약어이다. 대부분의 웹 크롤러, 봇들이 JavaScript 파일을 실행시키지 못하고 HTML에서만 컨텐츠를 수집한다. 때문에 CSR 방식으로 개발된 페이지를 빈 페이지로 인식하게 된다. 검색엔진에 제대로 노출이 되지 않는다면 웹 페이지의 유입이 줄어드는 악순환이 반복된다. (반면 SSR은 view를 서버에서 전부 렌더링하여 내려주므로 HTML에 모든 컨텐츠가 저장되어 있기 때문에 SEO 적용에 큰 문제가 없다.) 따라서 많은 사람들이 리액트(React), 앵귤러(Angular), 또는 앰버(Ember) 등을 사용하여 웹사이트를 개발하면 검색 엔진 랭킹에 안좋을 것이라고 생각한다. 만약에 HTML 코드가 본문의 내용없이 메타 태그나 스크립트 태그 같은 것들밖에 없다면 검색 엔진은 페이지가 기본적으로 비어 있다고 추정하고 그 페이지의 순위를 낮게 측정할 것이다. 보안 기존의 SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 하지만 CSR 방식은 클라이언트 측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다. React Server Side Rendering(RSSR) 이런 모든 문제를 해결하기 위한 대안이 바로 Server Side Rendering 이다. 전통적인 웹은 대부분 Server Side Rendering 이었다. 즉, 서버에서 브라우저에 나타나는 형태 그대로를 HTML로 만들어서 제공하고 브라우저는 HTML을 표시하는 방식이다. 웹의 초기에는 이런 Server Side Rendering 방식으로 사용하다가 화면의 Script에서 AJAX를 이용하여 데이터를 가져오는 방법이 보편화되면서 서버에서는 일부 HTML과 Script만 브라우저로 전달하고 브라우저에서 Script를 실행 시켜 서버에서 데이터를 조회하여 HTML을 생성하는 방식을 사용하게 되었다. 이렇게 함으로써 웹에서 화면과 ...

JQuery - $ 사용 유형. 최근에 새로운 Javascript 프레임워크와 라이브러리들이 많이 등장했고 시장 점유율 또한 많이 변동 되었다고 한다. 특히 요새 대새는 Angular와 React라고들 한다. 그리고 Jquery 요즘 누가써? Jquery 퇴물이야 등등... 그런 이야기들을 종종 찾아볼 수 있는데, 유행은 돌고 돌듯이 결국 Jquery가 몰락할 일은 없다고 생각하는 바, 묵묵히 Jquery를 고집하기로 한다...ㅎㅎ 먼저 Jquery 교과서랄까.. 기본 문법을 배울 수 있는 링크를 걸어둔다. https://www.w3schools.com/jquery 여기서 기초들을 다 익힐 수 있다. 프로그래밍 문법을 한번이라도 봤다면 + - * / 같은 연산 while, for 등은 다 비슷하기 때문에 $ 사용법만 잘 알면 될 것 같다. $ syntax 사용유형 일단 기본적으로 $는 JQuery에서 미리 정해놓은 변수 값이다. : JQueryStatic 1. $( ) : JQueryObject 가장 많이 사용하는 형태이다. 괄호 안에 들어 갈 수 있는 것들은 클래스 이름, 아이디, 셀렉터 등이다. 예를 들어 $('p')이면 현재 html 페이지에 있는 모든 를 JqueryObject로 가져오겠다는 것이다. hide()는 제이쿼리 메서드이다. $('p')는 제이쿼리 오브젝트이기 때문에 제이쿼리 메서드를 사용할 수 있다. 그중의 하나인 hide()를 사용해 보았다. 결과이다. 에는 스타일이 적용이 되었다. 해당 태그에는 jquery의 메서드가 적용이 된 것을 확인할 수 있다. 2. $.함수 : 플러그인 개발 또는 기본 전역함수 플러그인을 개발 할 때나 Jquery가 갖고 있는 기본 전역함수들을 사용할 때 쓴다. 전역함수에는 여러개가 있는데 그중에 개인적으로 많이 쓰는 것은 $.ajax({}), $.each({}) 등이 있다. 이 함수들의 사용방법은 따...

[Refer] Readings Spring Boot I work a lot with Spring Boot and love it for the enormous set of features it provides for application developers. In these articles, I write down what I learned in my projects to provide crisp tutorials that explain the How and the Why of Spring B reflectoring.io from http://hiddentrap.tistory.com/126 by ccl(A) rewrite - 2020-03-11 04:54:30

jqxGrid 정렬, 필터 메뉴 숨기기 How I can remove filter to particular grid column - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets Hi, I tried that it's working. I set properties to those columns as sortable: false, filterable: false. but when I clicked on the column one drop down is appearing with options "sort ascending", "sort descending", "remove sort" and those are all in disable www.jqwidgets.com from http://devesim.tistory.com/90 by ccl(A) rewrite - 2020-03-11 04:20:29

[AngularJS2] 부모-자식 컴포넌트 데이터 바인딩하기 (1) 하이 ~~ 후... 벌써 삼월이다. 코로나때문에 어디 나가지도 못하고.. 계속 집 회사 집 회사다 ㅜㅜ 어서 코로나가 끝나고 야외활동 좀 하고싶다 ㅜ-ㅜ 오늘은 웹쪽 기술을 좀 다뤄볼꺼다. 자세하게 얘기해보면... 오늘 다뤄볼 내용은 바로 ...! Angular2 에서 프로젝트를 생성하고 안에 컴포넌트를 만든 뒤 자식 컴포넌트에서 부모 컴포넌트로 , 다시 부모 컴포넌트에서 자식 컴포넌트로 데이터를 바인딩하는 걸 간단하게 코딩해볼꺼다. 프로젝트 생성 자...! 먼저 프로젝트를 간단하게 생성해보자. 먼저 터미널을 켜고 ..! 작업을 할 디렉토리로 이동하자. 그러고 난뒤에 ng new [프로젝트명] 을 입력해주자! 응 할거야~~ yes 뭘 선택하든 상관없지만 나는 SCSS 를 쓸거당 그러고나서 조금만 ... 기다리면 ...!!! 축하한다. 이제 Angular로 웹프로젝트를 멋지게 만들어낼 수 있게 되었다. 콘솔을 따로 하나 더 켜서 ng serve 명령어를 통해 앵귤러 프로젝트를 컴파일하고 브라우저에서 열어보자. 조금만 기다리면 !! 컴파일이 완료된다. http://localhost:4200/ 로 접속해보자. 뭐가 많이 나온다.. ㅎㅎ 아쉽지만 과감하게 삭제하자. 생성한 프로젝트를 보면 src/app/app.component.html 안의 내용을 삭제해주면된다. 아까 ng serve로 구동을 해놔서 ... 실시간으로 반영되는걸 볼수 있다. 컴포넌트 생성 이제 나는 이렇게 컴포넌트를 만들어 낼거다. section 컴포넌트는 부모 button 컴포넌트와 display 컴포넌트는 자식이 된다. 여기서 button에서 데이터를 보내면 부모인 section에서 받고 그걸 다시 display로 보내는걸 한번 코딩해볼거다! 자 먼저 부모 컴포넌트인 section 컴포넌트를 한번 만들어보자 ! 컴포넌트 만드는 방법은...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃...

유니티 | 파티클 모델링 Particle Systems Duration : 파티클 시스템이 파티클을 방사하는 기간 Looping : 시스템이 반복하는지의 여부 Start LifeTime : 화면에 존재하는 시간 Random Between TwoConstants : 2개의 값 사이에서 랜덤 Start Speed : 파티클 생성 시 방출 속력값 Start Size : 파티클 생성 시 상대적 크기 Start Rotation : 파티클 생성 시 각도 Start Color : 파티클 생성 시 색 Emission (방사모듈) : 방사되는 파티클의 속도를 제어 Rate : 시간의 경과에 따라 방사되는 파티클의 양이나 거리 Burst : 용출. 특정 양의 파티클이 방사되어야 하는 시간을 명시 Shape (형태모듈) Radius : 생성범위 Sphere : 구의 반경 Hemisphere : 반 구의 반경 Cone : 원뿔 Box : Mesh : 파티클은 꼭지점, 가장자리 혹은 삼각형 중 하나에서 방출 Velocity over Lifetime (수명기간 동안 속도 모듈) Limit Velocity over Lifetime Inherit Velocity Force over Lifetime Color over Lifetime color : alpha값 0 -> 검은색 -> 투명 Color by Speed Size over Lifetime Size : 점점 커지게 Size by Speed Rotation by Lifetime Angular Velocity : 뱅글뱅글 회전 Rotation by Speed External Forces Collision (충돌모듈) Sub Emitters Texture Sheet Animation Renderer Render Mode ⊢ Horizontal Billboard : 바닥에 깔림, XY평면에 평행...

개발자를 위한 React.js 툴 및 리소스 개발자를 위한 React.js 툴 및 리소스 페이스 북이 2013 년에 라이브러리를 처음 공개 한 이후 React.js의 인기는 빠르게 증가하고 있습니다.이 프로젝트는 Github에서 다섯 번째로 가장 많이 출연 한 오픈 소스 프로젝트이며 React 개발자를위한 구인 광고도 크게 증가하고 있습니다. React는 사용자 인터페이스를 구축하기위한 간단한 JavaScript 프레임 워크입니다. 가장 두드러진 예로는 Facebook 및 Instagram이 있습니다. React는보다 간단한 구조와 성능 최적화에 중점을 둔 Angular 또는 Backbone과 같은 MVC 프레임 워크에 대한 대안을 제공합니다. React가 앞으로 몇 년 동안 웹 개발 환경을 확실히 정의 할 것이기 때문에이 기사에서는 React 개발 영역에 발을 딛는 데 도움이되는 개발자 툴킷을 제공하고자합니다. 공식 React.js 문서 Facebook은 개발자에게 React의 주요 개념에 대한 자세한 문서를 제공합니다. 문서 외에도 React를 사용하여 대화 형 틱택 토 게임을 구축하는 방법에 대한 훌륭한 자습서와 React 개발자를위한 토론 포럼을 찾을 수 있습니다. 문서는 오픈 소스이므로 원하는 경우 편집 할 수도 있습니다. 공식 페이스 북 문서 React.js Github Repo React Github Repo에서 필요할 때마다 React의 소스 코드를 확인할 수 있습니다. 현재 개발 상태에 대한 정보를 유지하려면 문제, 중요 시점 및 최신 풀 요청을 살펴볼 수도 있습니다. 문제가 발생하면 문제 해결 가이드를 약간 연구하는 것이 좋습니다. React.js Github Repo 안녕하세요 월드 스타터 코드 빠른 반응을 원한다면 Codepen에서이 "Hello World"대화식 데모로 시작할 수 있습니다. 필요한 모든 자산과 시작 코드도 포함되어 있습니다. Babel도 켜져 있으므로 ECMAScri...

1. Welcome to React! 본 포스팅은 리액트를 처음으로 공부하기 시작하는 사람들을 위해 제작되었다. 구글에 영어로 react라고만 쳐봐도 기본적인 개념을 배울만한 블로그는 아주 많지만 막상 처음부터 하나하나 따라할 수 있는 튜토리얼과 같은 게시글이 없는 것 같아 이 부분에 초점을 맞춰 포스팅을 써보려 한다. 자바스크립트의 라이브러리 우선 리액트는 페이스북이 직접 개발한 자바스크립트의 라이브러리이다. 즉, 문법과 기능에 확장이나 변화가 있을 수는 있지만 그 뼈대는 자바스크립트에 있다는 것이다. 따라서 리액트를 공부하기 전에 자바스크립트의 기본적인 변수선언(const, let, var 등) 같은 문법을 알아둔 후 공부하는 것이 좋다. 참고하면 좋을만한 사이트 : https://opentutorials.org/course/743 Virtual Dom 필자가 리액트를 공부하며 처음으로 느낀 장벽은 바로 virtual DOM이라는 개념이다. 이 개념에 대해 구글에 검색해본 결과 다음과 같이 요약할 수 있다. 변한 부분만 다시 그린다. 이는 다시 말하면 리액트가 출시되기 전까지 모든 프레임워크는 변하지 않은 부분도 불필요하게 다시 그리고 렌더링 했다는 것이다. 아래에서 Angular라는 구글의 웹 개발 프레임워크와 React의 차이를 예시를 들어 비교해보자. 출처 - 블로그 : http://blog.naver.com/PostList.nhn?blogId=songc7 위의 두 그림을 차례로 그린다고 가정하자. 우선 누가 어떤 방법으로 그리던 모두 처음 그림은 캔버스에 백지상태부터 그려야 한다. 하지만 두번째 그림을 이어서 그려야 할때 Angular는 새로운 캔버스에 전체 그림을 다시 그려서 우리에게 보여주는 반면 리액트는 처음과 두번째 그림을 비교해서 달라진 부분만 찾아서 그린 후 원래 그림에 덮어서 보여준다. 여기서 "속도"의 차이가 명확하게 발생한다. Angular을 포함한 기존의 프레임워크들은 전체 그림(...

SPA (Single-page Application) 데스크탑에 비해 성능이 낮은 모바일에 대한 니즈가 증가하면서 스마트폰을 통해 웹페이지를 출력하기 위해서는 기존 방식과는 다른 접근이 필요해졌다. 이를 위해 등장한 기법이 바로 SPA이다. Single-page application (SPA) 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트 SPA에서 HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다. SPA와의 소통은 웹 서버와의 동적인 통신을 수반하기도 한다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막고, 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다. 예를 들어 보통 웹 사이트처럼 여러 페이지가 있고 로그인, 회원가입, 글쓰기 등 복잡한 기능을 지원하지만, 이는 처음 호출된 HTML 상에서 필요한 데이터만 호출하여 화면을 새로 구성해 주는 것으로 실제로 페이지의 이동이 일어나지 않는다. 기존의 웹 사이트는 내용이 변하지 않아도 페이지를 이동할 때마다 서버에서 코드를 생성해 새로 읽고 클라이언트에서는 이 코드를 페이지에 렌더링하게 된다. SPA에서는 이러한 부분들이 처음 웹 사이트 접속 시 한 번만 요청되고 페이지를 이동할 때는 변경되는 view 부분만 데이터를 받아서 렌더링하기 때문에 속도가 빠르다. 불필요한 코드 요청이 줄어 처리량과 트래픽이 적어진다. 물론 SPA에도 단점은 있다. Google 같은 검색 엔진은 SPA를 색인화하는 데 어려움을 겪는다. 한 페이지 내에서 모든 동작을 진행하다 보니 URL이 변경되지 않아 검색의 색인이 어렵다. 대표적인 라이브러리 및 프레임워크로는 React, Angular, Vue가 있다. 장점 간편한 운영 배...

SSR과 CSR SSR 서버 사이드 렌더링의 약어로써 단어 그대로 서버에서 렌더링을 작업한다. 기존에 존재하던 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 하며 서버에서는 HTML, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환한다. 웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 다소 떨어지는 스마트폰의 웹에 대한 요구가 커지면서 새로운 기법이 탄생했다. CSR 클라이언트 사이드 렌더링의 약어로써 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다. 여기에 Angular JS, Backbone JS같이 SPA 개발에 쉬운 JS 프레임워크가 등장했다. 여기에 점점 클라이언트가 무거워지자 다시 view만 관리하자는 철학으로 React JS가 등장하게 된다. *기존 웹에서 사용하는 방식이 모두 SSR이 아닌 것처럼 SPA 방식이 모두 CSR인 것은 아니다. 차이점 크게 초기 렌더링 속도, SEO, 보안으로 볼 수 있다. 초기 렌더링 속도 CSR의 경우, 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 반응속도를 기대할 수 있다. SSR을 한다 하더라도 ajax 기능을 위해 클라이언트 렌더링 요소가 포함될 수 밖에 없다. 이러한 점으로 미루어보아 클라이언트 측에서 렌더링을 하게 되면 서버 사이드 렌더링이 따로 필요하지 않기 때문에 일관성 있는 코드를 작성할 수 있다. CSR은 페이지를 읽어들이는 시간, JavaScript를 읽어들이는 시간, 그리고 JavaScript가 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여진다. 여기에 웹 서버에서 콘텐츠 데이터라도 가져와야 한다면 그 시간은 더욱 길어진다. 즉, 초기 구동속도가 느리다. 초기 구동속도를 제외하고는 빠른 반응...

Angular2 준비 #05 마무리 마무리 To Do 응용 프로그램을 실제 프로토 타입으로 확장해 보겠습니다. 우리는 처음 세장에서 필요한 모든 것을 만들어 작동하는 응용 프로그램을 만들었습니다. 우리는 서비스 태스크를 수정하여 추가 및 제거 메소드를 작성한 다음 Bootstrap 테마를 적용하여 이쁘게 만들어 고겠습니다. /app 폴더에 있는 tasks.service.ts 파일을 수정하면서 시작하겠습니다. import {TASKS} from './sample.tasks' ; import {Injectable} from 'angular2/core' ; @Injectable () export class TaskService { getTasks() { return TASKS; }; addTask(task) { TASKS.push(task); }; deleteTask (task) { for ( var i= 0 ; i 두가지 메소드를 추가 했습니다. addTask 는 task를 매개변수로 허용하고, deleteTask 또한 task 를 매개변수로 허용하고 있습니다. addTask 메소드는 새로운 task를 배열에 추가하고, deleteTask 는 전송 된 작업 개체의 ID 를 기반으로 배열에서 작업을 제거 합니다. 다음으로 수정할 파일은 index.html 은 app폴더 바깥에 위치하고 있습니다. Bootstrap CDN 을 통해서 Bootstrap CSS 를 추가할 것입니다. index.html 를 수정합니다. Angular 2 - My Todo List System.config({ packages: { app: { format: 'register' , defaultExtension: 'js' } } }); System.import( 'app/main' ) .then( null , console.error.bind(con...

[Angular] Angular 1.0 시작하기 Step01_click.html 눌러보셈 {{msg}} 여러번 눌러보셈 {{count}}번 클릭했네? from http://heekim0719.tistory.com/163 by ccl(A) rewrite - 2020-03-07 14:21:31

angular4 custom RouteReuseStrategy import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from "@angular/router"; /* 호출 관계 테스트 1. /proc 열기 shouldReuseRoute. future: /, curr : / retrieve : / retrieve : / retrieve : /proc/ retrieve : /proc/ shouldAttach : / shouldAttach : /proc/ 2. /mem 이동 shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /proc/, curr : /mem/ retrieve : /mem/ retrieve : /mem/ shouldDetach : /proc/ store : /proc/ shouldAttach : /mem/ 3. /net 이동 shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /, curr : / shouldReuseRoute. future: /mem/, curr : /net/ retrieve : /net/ retrieve : /net/ shouldDetach : /mem/ store : /mem/ shouldAttach : /net/ 4. /mem 로 다시...

#DEVIEW 2016 React vs Angular 2 , Angular 2 vs React 2016 DEVIEW 후기! - Angular 2 vs React 강연! 개발환경 언어 생산성 컴포넌트 / 템플릿 데이터 동기화 비동기처리 1. 개발 환경 Setting ( ? ) Angular 2 개발환경 구축하기 2. 언어 생산성 - TypeScript ( 영향력 : ✭✭☆☆☆ ) 그 정체는 무엇인가 TypeScript는 유연함이 장점인 언어인 JavaScript를 잘못 사용하게 되면, 큰 버그를 발생시킬 수 있는 부분을 보안하기 위한 언어이다. ( 굳이 예를 들자면, 인자를 넘겨받을 때 해주는 타입체크라던지…) 일단 여기서 한 가지 짚고 넘어가자. Angular 2에서 MS의 TypeScript를 웹 표준으로 만들기 위해 열심히 밀고 있는 것은 사실이지만, JavaScript, Dart 도 지원하고 있다. 하지만 TypeScript로 공식적으로 지정한 것은 위에서 언급한 JavaScript의 문제점을 구글도 심각하게 받아들이고 있다는 것이다. 그래, 그럼 React도 TypeScript를 쓰면 되잖아? 말이 쉽지 생각해봐야 하는 부분이 있다. TypeScript에는 JavaScript에 타입을 지정했다든데, 자바스크립트의 외부 모듈, 라이브러리를 도입해야하는 경우에도 타입이 지정되어 있나? 외부모듈이 타입을 제공하지 않는다면, 타입 정의 파일을 찾아봐야 하고 최악의 경우 없으면 직접 만들어야 한다. 귀찮으면 Any로 정의하면 되지만 그럴꺼면 TypeScript를 왜 쓰는가! 또 어떤 부분은 타입이 정의되고 어떤 부분은 타입이 정의되지 않아 코드의 일관성이 깨지게 된다. 타입이 정의되면 좋지만 그만큼의 비용이 발생하게 된다. 이러한 이유로 React에서도 TypeScript를 사용할 수 있지만 그렇게 하지 않고 Flow라는 정적 분석 타입기를 사용한다. 또한 Flow와 TypeScript를 함께 사용하는 경우는 거의 없고 그럴...

Angular에서 JavaScript대신 TypeScript사용하는 이유? 참고 도서 결론부터 얘기하자면 "생산성" 때문! 1. JavaScript는 컴파일 과정이 없기 때문에 에러가 런타임에서만 발생한다 문자열을 인자로 받는 함수에 개발자가 실수로 숫자를 넣었다면? 컴파일 과정에서는 에러 없이 돌아가서 문제를 미리 발견하고 고치지 못하게 된다. 런타임에서 에러가 발생하면 어플리케이션이 종료되어 서비스가 멈출 수도 있는 상황인 것이다. JavaScript에서 동적으로 타입을 결정하기 때문에 발생하는 문제! 생산성을 높이기 위해서는: 처음부터 정적 타입을 지원하는 언어로 개발하고 -> JavaScript로 변환해서 배포 컴파일해서 JavaScript으로 만들어 낼 수 있는 언어 : 대표적으로 TypeScript, Dart, CoffeeScript Angular 프레임워크 자체도 TypeScript으로 작성되었기 때문에 자연스럽게 TypeScript으로 개발할 수 있다. TypeScript는 타입을 지원하기 때문에 에러가 발생할 수 있는 코드는 컴파일 단계에서 미리 검출할 수 있다. 2. IDE에서 지원할 수 있는 기능이 JavaScript를 사용할 때보다 많아진다. TypeScript는 인자의 개수가 잘못되거나 잘못된 타입의 인자를 전달해도 에러를 표시한다. 또한 IDE에서 타입 정의 파일을 분석해서 어떤 API를 사용할 수 있는지 그때그때 알려준다. Angular 프레임워크도 타입 정의 파일을 제공한다. 3. TypeScript는 ECMAScript6 표준과 7 표준을 따르고 여기에 타입, 인터페이스, 데코레이터, 클래스 멤버 변수, 제네릭, public과 private과 같은 키워드를 추가로 제공한다 4. 컴파일해서 만든 JavaScript코드를 읽기 쉽다. 5. 가이드 문서에서 제공하는 예제 코드, 블로그에 있는 코드는 모두 TypeScript로 먼저 제공된다. D...

[Angular] Angular CLI로 jQuery, jQuery-ui 사용하기 (datepicker 이용) 최근에 주변 지인 분께서 Angular로 개발중에 있었는데, jQuery를 프로젝트에 넣으려다가 안되는것 같다 말씀 하시길래 한번 찾아보다가 내용을 정리하게 되었다. 따라서 간략하게 jQuery 사용 방법을 설명하려고 한다. ng new jquery-test npm install jquery jqueryui --save npm install --save @types/jquery @types/jqueryui from http://realp.tistory.com/27 by ccl(A) rewrite - 2020-03-07 12:21:26

Angular2 | Component Interaction How do components communicate with each other? The most confusing part with angular was interaction among components. This is because I didn't spend the time to study fundamentals, sending data back and forth was just too confusing. In the official Angular document, component interaction is explained in 5 ways. First 4 are straightforward but the last one about the service is challenging. I'll get back to that after studying the service first. Angular를 처음 사용했을 때 가장 어려웠던 것은 기초를 공부할 시간이 없이 바로 실무로 투입이 되다 보니.. 간단한 컴포넌트를 만들어서 사용하는 것이 너무 어렵고 시간도 오래 걸렸다. 처음에는 컴포넌트를 왜 만드는지.. 조차 모르고 그냥 막 다 copy and paste 하느라 아주 힘들었던 기억이 난다. 그래서 지금이라도 기초를 다시 잡으려고 한다. 시간을 내서 doc을 읽어보니 왜 이해가 되는 거같지? 도큐먼트에서는 component interaction을 할 수 있는 방법을 5가지를 설명한다. 여기서 첫 번째 4개는 금방 이해할 수 있었다. 하지만 5번째는 아직 100% 이해하지 못해서 서비스 쪽 개념을 다시 공부하고 마지막 것을 정리해야겠다. 1. Pass data from parent to child with input binding . 부모 컴포넌트에서 자식 컴토넌트로 데이터를 보낼때는 input binding을 사용한다. Parent Compone...

[WEB] TypeScript 기본 (2) - Angular 코드를 읽기 위해 필요한 TypeScript - 좋아요 하이 ~~!! 오늘은 가볍게 Angular 에서 흔히 쓰이는 TypeScript의 형태에 대해 소개하려고한다. 먼저 TypeScript를 사용하면 프로토타입 기반이 객체지향 프로그래밍이 가능해진다. 아래의 타입 스크립트 코드를 보라. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 class SuperClass { public n1 = 10 protected n2 = 20 private n3 = 30 constructor() { this .n1 = 100 this .n2 = 200 this .n3 = 300 } } class SubClass extends SuperClass { constructor() { super () this .n1 = 1000 this .n2 = 2000 /* n3 접근 불가 */ //this.n3 = 3000 } } let sc = new SuperClass(); 이렇게 TypeScript 를 활용하면 실제 객체지향 언어처럼 코딩이 가능해진다. 이러한 특성을 기반으로 Angular 에서도 TypeScript를 많이 활용하는데.. 두 가지 정도만 말씀드리겠다. 아래 코드를 보자. 1 2 3 4 5 6 7 8 9 10 11 class Person { constructor( public name: string, public age: number) { } } let person = new Person( 'kang' , 31 ) person.name person.age 위의 코드가 angular에서 많이 사용되는 패턴 중 하나이다. 위의 소스는 일반적으로 객체를 생성하고 멤버 변수를 쓰는 아주 간단한 코드인데... ! 특이한게 클래스 안에 멤버변수가 없다..! TypeScript에서는 생성자의 파라미...

[Vue] Angular 2 대신에 Vue.js를 선택한 이유 들어가며 이 글은 Medium 의 "Why we moved from Angular 2 to Vue.js(and why we didn't choose React)" 글을 번역한 글입니다. 항상 이상적일 수만은 없는 실제 프로젝트 여건에서 신중하게 프레임워크를 고민하고 선정해 나가는 과정을 상세하게 기술한 글입니다. Angular 2로 구축되어 있는 프로젝트를 업그레이드 & 마이그레이션 하는 과정에서 프로젝트의 현 상황과 여건을 반영한 프레임워크 선정 기준을 세우고, Vue.js 프레임워크를 적용해 나가는 개인 경험담이 담겨져 있습니다. 급격하게 요동치는 프론트엔드 프레임워크 시대에, 프론트엔드 개발자로서 항상 어떤 프레임워크를 선정해야 할지 고민하는 데 인사이트를 제공하는 글이 되길 바랍니다. 본문 우리는 최근에 Rever 라는 사이트에 Vue.js로 개발한 웹 페이지를 오픈했습니다. 16주 동안 641 개의 커밋이라는 강도 높은 개발 과정을 지나고 나니, Vue.js 도입하기를 잘했다는 생각이 듭니다. 8 달 전에 우리는 Angular 2를 쓰고 있었습니다. 정확하게 말하자면 Angular 2 베타 9 버전이었죠. 외주가 Angular 2로 제작해놓은 웹 사이트가 있었는데, UX/UI부터 설계까지 한 번도 만족한 적이 없었습니다. 심지어 어느 부분에 대해서는 Angular 2 자체가 맘에 들지 않았어요. 경험담을 더 얘기하기 전에, Angular 2 베타 9와 Angular 2.0는 완전히 다른 제품이라고 말하고 싶습니다. 그렇기 때문에 문제가 있었죠. Beta 9부터 2.0.0까지 8 개의 Beta 버전이 있었습니다. RC 8 개와 2.0.0 버전, 그리고 업그레이드까지 합치면 총 17 개의 버전이 있었죠. 우리는 Beta 9에서 2.0.0으로 업그레이드를 시도했지만, 상당히 많은 부분들이 호환되지 않아 업그레이드 작업이 버거워졌습니다. ...

Angular로 게임 만들어보기 - 1 (Angular 시작하기) 안녕하세요. 엄티 입니다. 현재 https://savannaboat.com을 운영 및 개발하고 있는데요. 한번씩 들어와서 보시면 감사하겠습니다. 사바나보트를 개발하면서 어려웠던 점을 몇가지 적으면서 블로그를 운영해 볼라고 했는데 뭐 딱히 생각난것도 없고 다시 하려니 어려워서 그냥 처음부터 시작하는 마음으로 뭔가를 만들어 볼라고요! 불러오는 중입니다... 그래서 첫번째 일단 Angular를 시작해 보려고 합니다. 간단해요 Angular를 간단히 시작해서 점점 커져가는것이 목표가 되겠네요. 먼저 Angular.js를 다운 받아야 합니다. 다운 받은 angular.js를 실제 큰 프로젝트에서는 'lib/src/js' 와 같이 library에 보통 넣곤 하는데 여기는 간단하게 바로 그냥 폴더 밑에다가 넣어 보겠습니다. angular.js는 bower를 써도 되는데 그냥 여기서 복사 붙여넣기를 해도 상관 없습니다. https://github.com/angular/code.angularjs.org/tree/master/1.4.1 전 일단 버전 1.4.1을 쓰고 있기 때문에 여기서 'angular.js'를 받으시고 폴더 밑에 넣어주세요. 또한 같은 폴더 안에 두개의 파일을 만들어야 하는데요 1. app.js 실제로 처음 코드가 돌아가는 파일이 될듯하네요. 2. index.html 처음 페이지가 열릴 때 열리는 페이지에요. 이렇게 3가지 파일을 만들어 주시고 폴더 안에 넣으면 다음과 같은 모습이 될것 같네요. 아주 간단하죠? 어렵지 않아요 그럼 차근차근 Angular에 대하여 파헤쳐 보겠습니다. 먼저, index.html 너무 간단해서 뭐 쓸말이 없네요 일단 빨간 박스안에 있는 내용은 타이틀로 웹사이트에 탭 부분에 나오게 되어있어요. 바로 이부분!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!...

[Angular2] 1. Component 소개 (1) 1. Component 컴포넌트는 애플리케이션의 화면 단을 구성하는 중요한 구성요소이다. Angular에서 화면을 구성하는 요소는 컴포넌트로서, Angular에서는 컴포넌트를 중심으로 개발을 진행 한다. 1. 1 Web Component Angular Component는 W3C 표준인 Web Component 기술을 기반으로 합니다. Web Component를 알아보면 Angular Component를 이해하기 쉽습니다. Web Component 기술은 하나의 기능이 아니라 HTML, CSS, JavaScript 가 합해져 하나의 Web Component를 구성합니다. Web Component의 기술요소는 다음과 같습니다. HTML Template Template 호출 Shadow DOM Custom Element * Web Component는 비교적 최근에 나온 기술이기 때문에 Web Component를 이용하려면 webcomponent.js 또는 polymer 같은 보완 라이브러리를 이용 합니다. - HTML Template HTML Template은 Component의 UI를 표현하는 영역입니다. 웹 페이지의 일부분으로 동작하며, 재사용 가능하다는 특징이 있다 1 2 3 4 5 6 7 메인 소개 로그인 cs - Template 호출 Template을 정의 했다면 외부에서 link 엘리먼트를 이용해 Template을 호출할 수 있습니다. 1 2 3 4 Colored by Color Scripter cs Template을 실제로 사용하려면 쿼리 선택자를 이용해 선택한 Template 노드를 현재 문서의 DOM 노드 밑으로 붙입니다. 1 2 3 4 5 6 var link = document .querySelector( 'link[rel="import"]' ); var content = link.i...