기본 콘텐츠로 건너뛰기

[aws] deploy Angular app with s3 | AWS S3로 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] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [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 + 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에서 핫한 개발자분들을 모십니다.

(주)편두리 채용 정보: 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

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...

자바스크립트 문법(1)분할 배열

자바스크립트 문법(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...

[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 추천

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

[ 리덕스(Redux)에 대해 알아보자! ] - Redux 초급

[ 리덕스(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) 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 - $ 사용 유형.

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

[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 정렬, 필터 메뉴 숨기기

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)

[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 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. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃...