Binary Search
🚨 ‘이것이 취업을 위한 코딩테스트다’ 교재 정리 이진탐색이진탐색은 데이터의 크기가 클 때 효율적인 탐색 알고리즘이다. 한번 탐색 할 때 마다 탐색 범위를 반 씩 줄여나가면서 값을 찾기 때문에 속도가 매우 빠르다. 이진탐색은 정렬된 자료에 대해서만 사용할 수 있다. 코딩테스트에 자주 출제되는데, 문제에서 탐색해야 할 데이터의 양이 1,000만 단위 이상으로 넘어간다면 이진탐색 사용을 고려해보는 것이 좋다. 그 아이디어만 생각해내도 문제푸는데 도움이 될 것이다.자주 출제되는 유형인 만큼 코드를 자주 보고 외워두는 것이 좋다. 원리이진탐색은 start, end, middle 세가지 값을 이용한다. start와 end 사이의 값이 middle 인데, 중간값이 찾고자 하는 target 값보다 큰 경우, middle과 end 사이의 값들은 탐색할 필요가 없기 때문에 그 부분을 탐색 범위에서 빼버리는 것이다. 파이썬 코드재귀 함수 이용12345678910def...
[HTML] 태그
<head> 태그 구성요소whead 태그에는 웹페이지에 대한 정보를 담는다. 페이지 인코딩 방식이나 css 파일 링크, 페이지의 제목 등 다양한 데이터를 포함한다. <meta>meta 태그는 웹페이지에 대한 메타데이터를 나타내는 태그이다. 메타데이터란 데이터를 설명하는 데이터이다. 문서 작성자나 문서 요약과 같은 정보를 담고 있다. 1<meta charset="UTF-8" /> 주로 인코딩 방식을 나타내기 위해 사용된다. <link>MDN-linklink는 외부 리소스를 불러올 때 사용한다. 주로 stylesheet를 연결할 때 가장 많이 사용하지만, 다른 속성을 이용해 그 외의 resource들도 불러 올 수 있다. 1<link rel="stylesheet" href="./css/style.css" /> <title>웹 페이지의 제목을 설정하는...
Javascript 30 Day 12
Key Sequence Detection(KONAMI CODE)Konami Code위키피디아Konami Code란 몇몇 웹 사이트에서 동작하는 비밀 코드이다. 일련의 코드를 키보드로 입력하면 동작한다. 오늘은 이런 Konami Code를 동작시키기 위한 유저의 key sequence를 감지하는 기능을 자바스크립트로 구현해보았다. splice()지난 7일차 강의에서 공부했던 splice()를 사용한다. splice()는 list 메서드로, start index 부터 삭제할 원소의 수를 입력해 리스트로 부터 원소를 삭제하는 메서드이다. 1234567const pressed = [];const secretCode = "wesbos";window.addEventListener("keyup", (e) => { pressed.push(e.key); pressed.splice(-secretCode.length - 1,...
Codeforces 맛보기
Codeforces 첫 도전몇 개월 간 알고리즘 공부를 꽤 했다고 생각해 말로만 들었던 코드포스 알고리즘 대회에 참가해봤다. 별 기대가 없긴 했지만 한 문제라도 풀 수 있지 않을까 하여 들어가봤는데 .. 처참하게 패배했다. 일단 영어 문제를 푸는 것이 처음이라 문제를 이해하는데 시간이 좀 오래걸렸다. 프로그래머스 같은 환경에 익숙해져 있어서 그런지 코드를 제출하는 환경도 낯설었다. 한시간을 넘게 첫번째 A번 문제를 붙잡고 있었지만 결국 풀지 못했다 😢역시 아직도 가야 할 길이 멀고 멀었구나 라는 생각을 했다. 코딩테스트 공부는 해도해도 얼마나 더 해야할지 모르겠다.,, 세상에는 잘하는 사람이 정말 많다는 것도 이런 행사에 참가할 때마다 새삼 느끼게 된다. 꾸준히 부지런히 공부에 매진하면 나도 감을 찾을 수 있지 않을까..🥹 다음번엔 더 좋은 결과가 있기를!
Javascript 30 - Day 11
Javascript30 Day11 - Custom Video Player ► « 10s 25s » 웹페이지에 일반적인 플레이어와 똑같이 동작하는 비디오 플레이어를 생성한다.마크다운 페이지에 소스를 붙여넣으려니 전체 동작이 실행되지는 않는다. 될때까지 계속해서 고쳐봐야겠다 .. 주요 기능 버튼 클릭시 영상 재생/일시정지 toggle 기능 비디오 view 화면 클릭 시 영상 재생/일시정지 toggle 기능 skip 버튼 클릭시 해당 data-set 만큼 영상 skip progress bar로 재생 range 표시하기 사용한 DOM 객체<video> - Mozila 설명 주 사용 메서드 & 속성video 객체는 image와 비슷하게 src로 link를 줘 불러올 수...
[css] Block & Inline block
Block & Inline BlockHTML element는 블럭 요소와 인라인블럭 요소로 나뉜다. Block종류 div h1, h2, h3… header, footer p section video 특징 크기를 지정할 수 있다. 사용 가능한 최대 가로 너비 (100%), 높이는 ‘content-height’를 사용한다. 줄바꿈이 된다. (수직으로 쌓인다) 다른 인라인 요소를 포함할 수 있다. width, height, margin, padding 등의 속성을 사용해 레이아웃을 수정할 수 있다. 레이아웃을 잡을 때 사용 Inline Block종류 span a label strong 특징 필요한 만큼의 너비를 사용한다. 크기를 지정할 수 없다. 줄바꿈이 없다. (수평으로 쌓인다) 항상 블럭 요소 안에 포함되어 있으며, 다른 인라인 요소를 포함할 수는 없다. line-height 속성으로 줄의 높낮이를 조절할 수 있다. text-align 속성으로 텍스트의 정렬을...
[css] margin & padding
marginmargin은 element의 바깥 여백 속성이다. 두 요소가 붙어있을 경우 marign이 상쇄되는 상황이 있는데 잘 정리된 블로그 글을 찾았다. 정말 깔끔하게 잘 정리해주셨다. 헷갈릴때 마다 확인해야 할 것 같다. margin이 상쇄되는 여러가지 조건이 있는데 이를 방지하기 위해서는 border 값을 주던가 padding을 조절하는 방법이 있다. element를 중앙에 정렬시킬 때 다양한 방법이 있지만 margin을 활용하는 방법도 있다. 기본적으로 div 요소는 위, 아래는 content 내용에 딱 맞게, 그리고 양 사이드의 너비는 100%로 주어진다. 이런 div 요소에 width를 지정하고 margin을 auto로 줄 경우 위, 아래 크기 즉 height는 content 크기 만큼으로 유지하지만 width는 지정한 크기만큼만 갖게 되면서 사이드의 marign 값을 같은 값으로 가지게 되어 결과적으로 중앙 정렬을 하게 된다. paddingpadding은...
Sorting
🚨 ‘이것이 취업을 위한 코딩테스트다’ 교재 정리 정렬정렬을 위한 알고리즘은 여러가지가 있다. 대부분 언어의 라이브러리에는 이미 효율적인 정렬 라이브러리를 제공하고 있지만 기본적으로 정렬 알고리즘의 원리를 이해하고 있는 것도 기업 면접에도 많이 등장하는 문제이기 때문에 중요하다고 한다. 선택 정렬가장 단순하고 직관적으로 떠올릴 수 있는 정렬 방법이다. 배열에서 가장 작은 값을 선택해 차례대로 정렬하는 알고리즘이다. 12345678910data = [3,6,7,1,2,9,10,4,5,8]def selection_sort(): for i in range(len(data)): idx = i for j in range(i,len(data)): if data[idx] > data[j]: idx = j data[idx],data[i] =...
Blogger 에서 Hexo로 전환하기
Blogger에 남겨둔 많은 포스트들을 어떻게 할까 생각했는데 아무래도 앞으로는 계속 Hexo에서 포스팅을 하게 될 것 같아 포스트를 이동시켜야 되겠다는 생각을 했다. Migration 플러그인이 있지 않을까 싶어서 찾아봤는데 역시 있었다!hexo 공식 Migration plugins 하지만 여기 Blogger는 없었다. 그 밖에 처음 찾았던 플러그인은 Blogger to Hexo 로 블로거만을 위한 플러그인이었는데 설치하면서 자꾸 에러를 만나고 설치에 실패했다.. Issues 를 보면 node 버젼이 업데이트 되면서 뭔가 에러가 나는데 수정이 안되는것 같았다. 이번엔 rss를 사용하는 플러그인을 찾았다. 링크 다른 사용자의 블로그 에서 찾은 방법인데 설치는 제대로 되었다. 나도 글쓴분 처럼 import 용 새로운 hexo blog를 만들어서 테스트 해봤다. 123npm install hexo-migrator-rss --savehexo init...
Javascript 30 Day 10
Javascript30 Day10 - Hold Shif and Check Checkboxes프로그램 기능구현해야 하는 기능은 하나의 체크 박스를 선택하고 Shift 키를 누른 상태로 위/아래의 다른 체크 박스를 선택하면 그 사이에 있는 모든 체크 박스가 함께 선택되는 기능이다.이런 기능은 다양한 프로그램에서 사용되는 기능이다. 예를 들어 Gmail에서 여러개의 메일을 선택할 때 등등. 스스로 풀이 도전스스로 해볼 수 있을 것 같아서 강의를 듣기 전에 내가 구현해보려고 했다. 그동안 배웠던 keydown을 사용해서 해봤다. input elements 들을 querySelectorAll로 선택해둔다. forEach를 사용해 각 checkbox들에 click 이벤트를 등록한다. flag 변수를 선언해놓고 click 이벤트 내부에서 keydown이벤트를 또 걸어놓는다. flag 변수가 False 일 경우 이번에 선택 된 엘리먼드의 index를 lastChecked에...