분류 전체보기 (35) 썸네일형 리스트형 [jQuery] 변화량의 증가/감소에 따라 아이콘 다르게 구현하기 안녕하세요 주갬입니다. 오늘은 변화량을 표현할 때 다양하게 활용할 수 있는 간단한 코드를 들고 왔습니다. VOD 데이터는 저번 달 대비 190%가 늘었고 AUTH데이터는 저번 달 대비 33%가 줄었음을 강조하기 위해 색깔과 화살표 모양을 달리해주었습니다. JQuery를 이용하여 이를 구현할 수 있습니다. 1. 주어진 데이터 변화량 계산 저는 저번 달과 이번 달을 비교했기 때문에 다음과 같은 식으로 변화량을 계산했습니다. ('이번 달 값' - '저번 달 값') / '저번 달 값' * 100 = '변화량' / '저번 달 값' *100 = 변화된 % 여기서 '저번 달 값' 이 0이면 Division by zero가 발생하기 때문에 조건문을 이용해 예외처리를 해주어야 합니다. //PHP if($VODLastWe.. [HTML, CSS] Input박스 안에 아이콘 넣기 (fontawesome) 안녕하세요, 주갬입니다. 얼마전 회사에서 기간 설정 ui를 구성하다가 input 박스 안에 달력 아이콘을 넣어야할 일이 생겼습니다. 인터넷을 찾아보니 input박스의 background 속성으로 이미지를 넣는 방법이 많이 보이던데, 실제로 간단한 아이콘을 삽입할때는 이미지보다는 fontawesome이나 google material icons을 태그 형식으로 넣는 경우가 많을 것이라 생각합니다. 저도 fontawesome을 이용해 개발중이기 때문에 제가 알아낸 방법을 공유드리려고 합니다. 예쁘게 인풋박스 안에 달력 아이콘이 들어가있는 모습입니다. 방법의 핵심은 CSS의 position을 이용하는 것입니다! CSS의 position에는 static, relative, absolute, fixed가 있습니다... [DC.js] bar Chart 사용법 정리 및 설명 1. CDN 삽입 jQuery, dc.js, crossfilter CDN 다운 2. barChart 객체 생성 var chart = dc.barChart("#test"); 바 차트를 그려주는 barChart 객체를 생성 후 id="test"인 요소에 해당 차트를 생성해준다는 명령입니다. 3. 데이터를 crossfilter로! Crossfilter is a library for multidimensional filtering and aggregation of tabular data. Crossfilter는 데이터를 다차원으로 바꾸어주고 테이블형식으로 데이터를 통합해주는 자바스크립트 라이브러리입니다. var ndx = crossfilter(testdata), 저는 testdata를 컨트롤러에서 넘겨준 2차원.. Back) Laravel AWS S3와 연결해 이미지 업로드하기 - 1. 설정 안녕하세요 주갬입니다. 저는 포스팅 에디터로 summernote를 사용하려고 찾아보던 중 서머노트의 이미지 업로드 방식은 base64 방식으로 인코딩되어 DB부하가 걸리기 쉽다는 사실을 알게 되었습니다. 그래서 더 좋은 방법이 없을까 찾아보던 중 이미지를 인코딩 없이 S3 버킷에 업로드한 후 불러오는 방식으로 구현한다면 좀 더 효율적이지 않을까 싶어 summernote와 S3를 연결해보려고 합니다. 이번 시간에는 사전 환경 구축에 대해서만 다루고 다음시간부터 본격적인 연동 작업을 보여드리도록 하겠습니다. php73 artisan storage:link 실행 laravel에 league/flysystem-aws-s3-v3 설치 AWS 콘솔에서 S3버킷 생성 & 키 생성 laravel .env파일에 나의 S.. [Back] Laravel AWS S3와 연결해 이미지 업로드하기 - 2. 파일 연동 저번 시간에는 라라벨과 AWS S3를 연동하기 위한 설정들을 함께 구성해 보았습니다. 테스트를 위해 간단한 테스트 페이지를 구성하였습니다. Documents {{ csrf_field() }} 파일을 받아 폼 방식으로 POST 요청을 합니다. 라우팅은 다음과 같습니다. Route::get('/upload', [DocumentController::class, 'index']) -> name('upload.index'); Route::post('/upload', [DocumentController::class, 'store']) -> name('upload.store'); /upload 로 POST요청을 보내면 DocumentController의 store 메소드가 실행이 됩니다. [ajax] 요소 선택시 $(this) 선택 안될 때 안녕하세요 주갬입니다. 오늘은 jQuery를 이용할 때 유용하게 사용할 수 있는 $(this)가 안먹을 때의 해결방법에 대해 말씀드리려고 합니다. 위 사진에는 같은 클래스명을 가진 DELETE버튼이 여러개 생성되어 있습니다. 이처럼 같은 클래스명인 요소들에 하나씩 접근하는 경우, jQuery의 $(this)로 원하는 요소에 접근하여 각종 명령을 수행하게 됩니다. 하지만 ajax에서 그냥 $(this)를 쓰면 인식을 못하는 경우가 있습니다. 댓글 삭제 기능을 만들던 중 DELETE버튼을 누르면 댓글 전체를 지우는 작업을 해야했고 $(this).closest('.media-body'); 를 통해 delete버튼을 누르면 가까이 있는 'media-body'인 요소를 찾아 지우려 했지만 $(this)가 먹지 않.. [NCP] 존, 리전 개념에 대해서 안녕하세요~ 주갬입니다. 저는 요즘 NAVER Cloud Platform, 줄여서 NCP Associate 자격증 준비를 하고 있습니다. 네이버의 온라인 강좌(MOOC) 플랫폼인 edwith의 공인교육과정을 활용해 공부하는 중입니다. https://www.edwith.org/ncloudassociate/lecture/61955/?isDesc=false [LECTURE] 1강. 과정 소개 및 네이버 클라우드 플랫폼 서비스 개요 : edwith 1강에서는 네이버클라우드플랫폼 공인교육 - Assoicate 과정에서 다루게될 내용을 소개하고, 클라우드 서비스란 무엇인지, 그리고 네이버클라우드플랫폼은 어떤 서비스들을 제공하는... - jk www.edwith.org 1강을 수강하다 궁금한 점이 생겨 해당 내용을 .. [Moodle] 카카오톡 나에게 보내기 api 무들에 연결하기 - (2) 카카오톡 "insufficient scopes." 에러 해결, 나에게 카톡 보내기 안녕하세요 주갬입니다. 저는 교육용 오픈소스 moodle과 카카오톡API를 연결하던 중 오류메시지를 확인했습니다. { "msg": "insufficient scopes.", "code": -402, "api_type": "TALK_MEMO_DEFAULT_SEND", "required_scopes": [ "talk_message" ], "allowed_scopes": [] } 라는 내용의 response를 받아 에러의 원인을 찾아보았습니다. response의 "allowed_scopes": [] 는 동의한 권한이 없다는 뜻인데요,, developers.kakao 페이지에서 동의항목을 확인해보면 분명 카카오톡 메시지 전송에 체크가 잘 되어 있습니다!! 그렇다면 "allowed_scopes": ["talk_m.. [Moodle] 카카오톡 나에게 보내기 api 무들에 연결하기 - (1) 카카오톡 access token, refresh token 받는 방법 안녕하세요 주갬입니다! 오늘은 교육용 오픈소스인 moodle에 카카오톡 나에게 보내기 api를 연결해보도록 하겠습니다. 1. 카카오톡 api 계정 생성 및 설정하기 카카오톡 api를 이용하기 위해서는 카카오 개발자 사이트에서 계정을 만들고 몇 가지 동의 사항에 체크를 해야합니다. https://ai-creator.tistory.com/20 카카오 OpenAPI 사용하기 (준비 사항 : 인증키 발급) > 카카오 플랫폼 서비스는 카카오톡, 카카오스토리와 같은 카카오 서비스 및 카카오 플랫폼 기술과 관련된 API를 제공합니다. 이런 서비스를 이용하기 위해 인증 키를 발급 받아 보겠습 ai-creator.tistory.com 저는 이 블로그의 설명에 따라 계정을 생성했습니다. 2. 사용자 코드 발급 받기 api.. [CSS] border-box와 content-box Box sizing에 대해 알아보겠습니다. Box sizing에는 콘텐츠 중심으로 스타일을 적용하는 content-box와 크기를 중심으로 스타일을 적용하는 border-box가 있습니다. content-box의 대장은 '콘텐츠(content)' 입니다. 박스안에 들어가는 콘텐츠의 영역을 침범해서는 안됩니다. 그렇기 때문에 들어가는 박스는 고정되고 패딩과 테두리가 밖으로 생기게 됩니다. border-box의 대장은 '테두리(border)'입니다. 박스의 가장 겉부분인 테두리가 고정되어 있어야 하기 때문에, 패딩과 테두리의 두께가 안으로 생긴다고 생각하시면 편할 것 같습니다! 실제로는 border-box가 더 흔하게 쓰인다고 합니다. 예시를 보겠습니다. 높이와 너비가 같은 노란색의 box 2개가 있습니다... 이전 1 2 3 4 다음
