- Today
- Total
목록ALL (104)
CODE CAVE
웹 기반 개발이 메인인 저는 인텔리제이나 웹스톰을 거의 5년이상 사용하다가, 이번년도에 처음 VSCode를 사용해봤습니다. VSCode로 변경한 가장 큰 이유는 인텔리제이는 기능이 점점 많아져서 계속 무거운 느낌이 들어서 입니다. 근데 기능이 많아져도.. 제가 쓰는 기능은 어차피 거기서 거기라.. 주변 개발자 지인들 통해 새로운 에디터를 추천 받았고 요새 정말 많은 분들이 사용하는 VSCode를 사용하게 되었습니다. 인텔리제이와 비슷한 단축키도 많았지만, 어떤 단축키는 새로 적응해야해서 조금 헷갈리더라구요. 스스로 리마인드 겸, 기본적인 단축키와 유용한 단축키 몇개를 정리해봤습니다. [ VSCode 단축키 ] * 아래 "Ctrl"은 윈도우에선 그대로 컨트롤 키 이고, 맥에서는 "Command" 키로 보면..
"100,000,000" 처럼 숫자 3자리 마다 숫자를 넣는 방법에 대한 포스팅 입니다. 특히 돈 이나 숫자를 많이 나타내는 웹사이트를 개발할 때 필요한 경우가 많더라구요. 1. toLocalString()을 이용하는 방법 저는 이 방법을 주로 씁니다. 가장 간편하더라구요. let order_price = 100000000; order_price.toLocaleString("ko-KR"); 파라미터로 넘기는 "KR"이 있는 이유는 숫자를 또 다르게 표시하는 국가도 있나봅니다. 매우 특수 케이스라, 왠만한 평범한 프로젝트는 ko-KR이나 en-US을 사용하시면 될것 같습니다. 혹, 이 함수에 대해 자세히 알고 사용하고 싶으신 분들은 아래 링크 참고가 가능합니다 :) https://developer.mozi..
인터넷에 아마존 RDS 한글 설정하기, UTF-8 적용하기 같은 키워드로 검색하면 다들 파라미터 그룹을 수정하라고 합니다. 저 또한 이 방법으로 진행했습니다만 여전히 한글이 깨져서 이것저것 찾다가 해결방법을 찾아서 공유 드립니다. 블로그를 찾다보면 파라미터 그룹의 캐릭터셋을 UTF-8로 설정하는 것은 거의 대부분 똑같이 알려줍니다. 하지만 그래도 한글이 깨지시는 분들은 아래 방법을 참고해보세요. Type1. 파라미터 그룹을 바꾸고 RDS 리부팅은 꼭 해주셔야 합니다. Type2. 파라미터 그룹에서 character-set-client-handshake 이 파라미터를 0(false)로 설정해주셔야 합니다.안해주시면 설정하신 캐릭터셋이 적용이 안됩니다.
SVG는 백터 이미지로서, 크기를 줄이거나 늘려도 전혀 깨짐이 없습니다.그래서 안드로이드 해상도별로 각각에 맞춰 이미지를 만들 필요 없이 단 하나의 svg 파일로 해결이 가능합니다. 다만 일반 이미지보다 용량이 클 수 있기 때문에 모든 이미지를 SVG로 하진 않고 주로 아이콘 이미지에 많이 사용되고 있습니다. 적용 방법은 아래와 같습니다. 1. res 폴더 우클릭 > New 클릭 > Vector Asset 클릭 2.Local file 클릭 > svg 파일 선택 3. gradle 파일의 defaultConfig 안에 아래 한 줄 추가 vectorDrawables.useSupportLibrary = true 4. 화면 xml에서 아래와 같이 사용
저는 개발하면서 분명히 할 줄 알았던건데 2~3번 이상 구글링을 했던 내용에 대해서는 종종 기록하는 편입니다. 그 중에 안드로이드 스튜디오 미리보기(Preview) 화면에서 기본적으로 타이틀바가 보이는 현상 입니다. (No title bar on Android Preview Panel) 단순히 미리보기 패널에서 Theme in Editor > NoActionBar를 해도 되지만, 매번 새 화면을 만들때마다 해줘야하는 번거로움이 있고, 안드로이드 스튜디오를 재실행할 경우 원래대로 돌아와있는 아주 짜증나는 현상이 지속됩니다. 그래서 제가 찾은 방법은 아래와 같습니다. 1. styles.xml 을 아래와 같이 수정합니다. true 2. 안드로이드를 재실행 합니다. .. 이제, 새 화면(xml)을 만들때마다 액..
안드로이드에서 이미지 관련 라이브러리로 매우 유명한 라이브러리는 Picasso와 Glide가 있습니다. 두 라이브러리가 거의 투톱을 달리고 있습니다.이 라이브러리들은 업데이트도 몇년간 계속 꾸준하고 있고, 커뮤니티도 활성화 되어 있어서 막히는 부분에 대한 도움을 인터넷 상에서도 쉽게 얻을 수 있는 것이 장점입니다. 피카소가 먼저 시중에 나왔구요, 이후 Glide가 나왔습니다. 사용방법은 Glide가 피카소를 너무 따라한거 아닌가 싶을 정도로 거의 흡사합니다.둘의 차이점이라면 피카소는 화질이나 캐시면에서 좀 더 좋다는 평을 받고, Glide는 성능쪽에서 좋다는 평을 받고 있습니다. 아무튼 이 포스팅에선 이 중 더 먼저 출시된 Picasso의 기본 사용법을 알아보겠습니다. 1. 먼저 피카소를 프로젝트에 다운..
웹 프론트엔드 작업을 하다보면 스와이퍼를 구현해야할 일이 많습니다.이 중 가장 많이 쓰이는 Swiper 라이브러리 사용법을 간단히 소개드립니다. Swiper 라이브러리에는 다양한 속성들이 있는데 자주 쓰이는 속성들만 모아보았습니다. new Swiper('.container', { pagination: '.swiper-pagination', paginationClickable: true, spaceBetween:0, autoplay: 3000, autoplayDisableOnInteraction: false, loop: true, onSlideChangeEnd: function (swiper) { var swiper.activeIndex; var slidesLen = swiper.slides.length;..
CSS가 발전함에 따라 이제 포토샵으로 해야만 했던 작업들이 코딩으로 가능해지고 있습니다. 이번 포스팅은 그 중 이미지 혼합 기능인 blend-mode 에 대한 실험입니다. 색상과 이미지를 혼합하는 기능을 어디서 쓸까 생각하다가 운영중인 쇼핑몰에서 색상과 재질을 선택해서 미리 볼 수 있는 Custom Option 기능을 만드는데 활용했습니다. [재질과 색상의 혼합] - http://www.trymoon.kr - NO BRAND BUT GOOD SENSE 위 화면은 신발 쇼핑몰에서 혼합 모드를 응용하여 개발한 것입니다.정의해놓은 재질을 선택하고, 색상을 선택하면 재질 이미지와 색상을 혼합하여 결과를 아래 보여주는 방식입니다. 위 화면을 개발하기전, 제가 블랜드 모드 관련 샘플로 만들어놓은 화면입니다. 위 ..
트렌디적인 리스트 디자인 혹은 UI를 꼽자면 핀터레스트를 뺄 수 없습니다.한국 서비스로는 피키캐스트가 유명하죠! 아마 리스트에서 각각의 목록이 이미지가 중요한 리스트라면 단순한 2,3단 배열보다 훨씬 볼만합니다. 백번의 말보다 한번의 예제! 샘플 만들어봤어요.아래 이미지 처럼 리스트 카드가 겹쳐서(?) 나오는 형식의 디자인 입니다. 이런 리스트는 자바스크립트로도 개발할 수 있고 CSS로도 개발할 수 있는데요. 저는 CSS로 할 수 있는 거면 CSS단에서 끝내자는 주의라서 CSS로 구현해보았습니다! 소스코드는 제 깃허브에 올렸습니다. github : https://github.com/kkotkkio/pinterest-list 원본 출처 : https://opentutorials.org/course/2473..
이번 포스트는 제가 매번 작업할 때마다 자주 사용하는 명령어 중에서 자꾸 까먹는 명령어들을 메모할 용도로 작성하였습니다. " CentOS / Apache + PHP + MySQL 기준 " # RAM 용량 확인cat /proc/meminfo | grep MemTotal # 웹 서버 버전httpd -v # PHP 버전php -v # 시스템이 비트 수 확인getconf LONG_BIT # 패키지 설치 확인 (ex) PHP 설치 유무 확인 yum list installed | grep php # 패키지 삭제yum remove php* # yum 업데이트yum update # 파일용량 설정파일 업로드 기능을 만들어도, max size를 넘었다며 업로드가 안되는 경우sudo vi /etc/php5/apache2/p..