본문 바로가기

전체 글

 (220)
알고리즘 GIT 백준 알고리즘 문제 정리해서 푼것 git으로 엑셀과 함께 관리중이다. 완료한 TASK - 알고리즘 초급 - 알고리즘 DP 기본 엑셀에 정리한 문제 (목표 2020안) - DP 중급, 고급 들을 예정인 강의 (목표 2020안) - 알고리즘 중급 - 알고리즘 고급 https://github.com/SeongJinSong/Algorithm SeongJinSong/Algorithm Contribute to SeongJinSong/Algorithm development by creating an account on GitHub. github.com
jQuery 성능 향상 jQuery 성능을 향상하기 위한 몇 가지 방법을 소개하겠습니다. jQuery는 라이브러리이기 때문에 순수 자바스크립트보다 당연히 성능이 안 좋습니다. 안 그래도 느린데 잘못된 방법으로 코딩을 하면 상황을 더 악화시킬 수 있습니다. 그래서 흔히들 하는 실수와 그에 대한 대처 방법을 소개하겠습니다. 변수 저장 우선 첫 번째로 가장 간단한 건데 많이 놓치고 있는 부분이 있습니다. 제이쿼리로 찾은 객체를 변수에 저장하지 않는 겁니다. $('#zero').text('저장하지 않으면 매번 함수가 실행됩니다'); $('#zero').append(''); $('#zero').css('color', '#fff'); 위와 같이 $('#zero')를 여러 번 쓰는 것을 많이 봤습니다. 하지만 흔히 놓치는 사실이 $()는 ..
JQuery animate를 pure자바스크립트로 만들기 function move(elem) { var left = 0 function frame() { left++ // update parameters elem.style.left = left + 'px' // show frame if (left == 100) // check finish condition clearInterval(id) } var id = setInterval(frame, 10) // draw every 10ms } https://stackoverflow.com/questions/15521081/jquery-animate-function-equivalent-in-pure-javascript jQuery animate function equivalent in pure JavaScript Wha..
front 개발하면서 가장 많이 하는 노가다를 정리해보자 1. 컨텐츠 1) 내부 컨텐츠 정렬 - 컨텐츠 중앙정렬하기 - 컨텐츠 양끝으로 정렬하기 - 컨텐츠 별 너비 1/n씩 가져가기 - 컨텐츠 행 또는 열로 배치하기 ※ flex display가 제일 편하다. · 빈 레이아웃으로 맞추는 것 비추 2) 컨텐츠 크기 및 간격 조정 - margin 넣기 - padding, border가 크기에 영향주는 것 고려 - 크기 너비 적용하기 3) 컨텐츠 내용이 넘어가는 것에 대한 예외처리 - 'text'인 경우 ellipsis - '카드'인 경우 overflow hidden 처리 - 스크롤바 처리 · 스크롤바는 너비를 차지하므로 overlay처리 혹은 숨기기 · 스크롤바에 따라서 다음내용 가져오는 서비스 호출해서 append하기 - 펼쳐보기, 접기 - flex:1, frex..
min.css / min.js 등 min이란 무엇인가 템플릿을 다운받아보면 min파일을 자주 보게된다. min파일은 minify 축소하다 의 줄임으로 공백과 줄바꿈을제거하여 용량을 줄인 파일이다. 덕분에 전송량을 줄일 수 있다. css파일은 가독성을 위해 개발할 때 사용하고 이를 압축하여 min.css파일을 만들어 실제 서비스에 사용한다. 따라서 min.css파일을 수정해야 웹에는 적용이 된다 min.css로 변환해주는 API : https://cssminifier.com/ min.js로 변환해주는 사이트 : http://javascriptcompressor.com/ min 파일( javascript, css, html, json )을 읽기 쉽게 변환해 주는 사이트 : http://jsbeautifier.org/ CSS파일이 바로 적용이 안되면 캐시삭제를 ..
CSS 속성 선택자 [att] 값에 관계 없이 해당 속성(att)을 가진 요소 [att=val] 속성(att)이 val인 요소. 이런 형태는 많이 봐서 쉽게 이해가 될 것입니다. 예) span[class="example"] ==> class가 정확하게 example인 span [att~=val] 속성(att)의 값(val)이 공백으로 분리된 단어인 요소. 예) a[rel~="copyright"] { ... } - rel에 copyright 단어가 포함된 "a" 요소 [att|=val] 속성(att)의 값이 정확히 "val"이거나 "val"로 시작하고 곧바로 "-"(U+002D)이 붙는 경우. 다음 예를 살펴보면 쉽게 이해가 되실 것입니다. 예) a[hreflang|="en"] - hreflang 속성이 "en"으로 시작하는..
hosts 파일이란? 1. hosts 파일의 역사와 파밍(pharming)hosts 파일이란? Windows 운영 체제에서 사용하는 파일로 호스트 이름과 이에 대응하는 IP 주소가 저장되어 있는 파일로 인터넷 접속 시 컴퓨터가 가장 먼저 확인하는 파일입니다. 사람이 컴퓨터에 할당된 IP 주소를 기억하기는 쉽지 않습니다. 그래서 고안된 방법이 통신하는 컴퓨터들에게 이름(호스트 이름)을 부여하고 그 이름을 사용하는 것입니다. www.ahnlab.com과 같은 도메인 이름 체계(FQDN)는 생긴지 얼마되지 않습니다. 그전에는 hosts라는 텍스트 파일에 컴퓨터의 IP 주소와 이름을 기록해두고, 사용자가 컴퓨터 이름을 사용해 통신 연결을 요청하면 운영 체제가 hosts 파일에서 컴퓨터 이름에 대응하는 IP 주소와 통신을 수행하는 방..
로컬 스토리지, 세션 스토리지 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)에 대해 알아보자. 로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이고 간단한 키와 값을 저장할 수 있다. 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장하면 된다. 하지만 비밀번호같은 중요한 정보는 절대 저장하면 안된다! 클라이언트에 저장하는 것이기 때문에 언제든지 털릴 수 있다. 로컬 스토리지랑 ..

티스토리툴바