728x90 반응형 개발자 이야기/JavaScript - Html - CSS8 자바스크립트에 매우 유용한 12가지 1) 연산자 를 사용하여 부울로 변환 때때로 우리는 어떤 변수가 존재하는지 또는 유효한 값을 가지고 있는지 확인하여 그것들을 참 값으로 간주할 필요가 있습니다. 이러한 종류의 유효성 검사를 수행하기 위해 !!(이중 부정 연산자) simple 을 사용할 수 있습니다 !!variable. 이는 모든 종류의 데이터를 부울로 자동 변환하고 이 변수는 다음 값 중 일부가 있는 경우에만 false를 반환합니다. 0, null, 또는 "", 그렇지 않으면 그것은 돌아올 것이다 . 실제로 이해하려면 다음과 같은 간단한 예를 살펴보십시오.undefinedNaNtrue function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var account = new.. 2022. 5. 23. DataTable - JS 데이터 테이블 표현 Data를 테이블 표현하는 것은 모든 데이터 서비스의 기본이다. 매번 이 부분을 구현하고 검색하고, 페이지네이션에 Export 기능까지 따로따로 하는데 이 모든것이 이미 구현이 되어 있다. Datatable.net 꼭 이 라이브러리를 활용하자. 여기서 정리한 모든 내용은 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) DataTable 일단은 한번 보면 안다. 아래 예제 사이트로 가서 봐라 데이터를 표현하는 테이블은 이걸 써야 한다. https://datatables.net/examples/ajax/objects.html 간단하게 Vue.js 를 이용하여 구현한 코드를 보자. Django 에서 .. 2022. 3. 30. 스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기 DOC Hide header on scroll down, show on scroll up DEMO Hide Header on on scroll down 고정된 헤더(네비게이션) 사용 불편함 인지 많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고 있는 경우 오히려 사이트의 사용자경험을 떨어뜨리는 요인이 되기도 한다. 이는 모바일과 같은 뷰포트가 작은 기기들에서는 더욱 그러하다. 기존의 단순히 고정된 형태의 헤더 디자인을 제공하는 것 보다는 사용자의 스크롤 방향에 따라 헤더부분을.. 2022. 3. 23. 파비콘 생성기 - ico파일 만들기 권장하는 15 (무료) Favicon 생성기 Favicon이란 무엇이며 어디서 구할 수 있습니까? 실제로 파비콘은 무엇입니까? URL 페이지, 북마크 목록, 웹 사이트 주소 표시 줄, 탭 브라우저 및 기타 인터페이스 요소 앞에 나타나는 작은 아이콘입니다. 파비콘의 크기는 일반적으로 16 × 16, 32 × 32, 48 × 48, 64 × 64, 128 × 128입니다. 대부분의 브라우저는 .ICO 형식을 사용하지만 일부는 * .GIF 및 * .PNG도 사용합니다. 파비콘을 만드는 것은 그리 어렵지 않습니다. 우리가 절대적으로 추천하는 15 개의 무료 파비콘 생성기를 사용하면 즉시 사이트에 전문적인 파비콘을 만들 수 있습니다! 1. 파비콘 생성기 웹 사이트: 파비콘 생성기 사용하기 가장 쉬운 생성기 인 Favicon Generator를 사용하면 이미.. 2022. 3. 22. HTML5 게임 템플릿 20가지 플래시는 브라우저에 기반을 둔 게임 세계를 열었습니다. 이후 플래시가 저물고 HTML5가 등장하면서 똑같은 플래시 기반의 게임은 그 걸어온 길을 HTML5를 위해 비켜주었습니다. 아마 여러분은 아래에 나열한, HTML5로 제작된 게임 중 하나는 해본 적이 있을 것입니다. 아마 브라우저가 아닌 앱 형식으로라도 말이죠. 여러분에게 게임 아이디어나 컨셉이 있나요? 게임 아이디어의 적절한 출발점을 찾거나 웹사이트에 쓸 완벽한 솔루션을 찾는다면 Envato Market에서 인기 짱인 HTML5 게임 템플릿 20가지를 자세히 살펴보시기 바랍니다. 1. Canvas Puzzle Canvas Puzzle은 Envato Market에서 최초의 HTML5였습니다. 이 게임이 좋은 출발점인 것 같네요. 게임 컨셉은 단순합니.. 2022. 3. 18. JavaScript에서 MD5로 해시 및 암호 해독하는 방법 JavaScript에서 MD5 해시를 만드는 방법 이 섹션에서는 MD5 해시를 생성할 수 있는 몇 가지 라이브러리를 탐색합니다. 가장 인기 있는 라이브러리 중 하나인 blueimp/JavaScript-MD5 부터 시작하겠습니다 . script태그 에 소스 JavaScript 파일을 포함하기만 하면 되므로 blueimp/JavaScript-MD5 라이브러리를 프로젝트에 통합하는 것은 정말 쉽습니다 . Node.js와 같은 서버 측 환경과도 호환됩니다. 그 외에도 RequireJS 및 webpack과 같은 모듈 로더도 지원하며 모든 주요 웹 브라우저에서 작동합니다. Node.js를 지원하므로 다음 스니펫과 같이 NPM으로 빠르게 설치할 수 있습니다. 1 npm install blueimp-md5 프로젝트에서.. 2022. 3. 16. [Web] 오픈소스 웹 사이트 모음 총정리 오픈소스를 쉽게 받을 수 있는 사이트 목록 Bootstrap (https://getbootstrap.com/) Bootstrap은 세계적으로 반응형 웹 사이트 구축할때 사용되는 가장 인기 있는 프레임워크입니다. 필수 공식 테마에서 웹 사이트 템플릿을 받아서 자유롭게 커스터마이징 하신다면 빠르게 웹 사이트를 제작하실 수 있습니다. 웹 페이지를 구성함에 있어 필요한 아이콘, 목록, 메뉴, 이미지 등등 다양한 요소들이 CSS와 Javascript로 제작되어 있어 폭발적인 인기를 얻고 있습니다. GitHub (https://github.com/) 깃허브를 빼놓고 오픈소스를 말할수는 없을 것 같습니다. 깃허브에 있는 검색창에다가 내가 원하는 기술을 검색만 하면 개발자들이 공개해놓은 오픈소스들을 어마어마하게 많이 .. 2022. 3. 16. [Web] 정규표현식 테스트 사이트 모음 총정리 정규표현식을 사용하다 보면 이 문법이 맞는지 아닌지 헷갈리는 경우가 있습니다. 또 언어마다 정규표현식이 조금씩 다른 부분도 있어 테스트를 많이 해야 합니다. 개발을 할 때 자체 테스트로 확인하는 방법도 있겠지만 오늘 소개해드릴 정규표현식 테스트 사이트를 사용하면 코딩 시점에서 정규식 문법이 맞는지 쉽게 체크하실 수 있습니다. 자주 사용하는 정규표현식 정규 표현식 설명 ^[0-9]*$ 숫자 ^[a-zA-Z]*$ 영문자 ^[가-힣]*$ 한글 \\w+@\\w+\\.\\w+(\\.\\w+)? E-Mail ^\d{2,3}-\d{3,4}-\d{4}$ 전화번호 ^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$ 휴대전화번호 \d{6} \- [1-4]\d{6} 주민등록번호 ^\d{3}-\d{2}$ .. 2022. 3. 16. 이전 1 다음 728x90 반응형
