$ ls -lt posts/ | sed -n 201,220p

SY Tech Blog_

• 2020-08-30

  Javascript 30 Day 15

  Day 15 Local Storage local storage에 값을 저장해 새로고침을 해도 데이터가 유지되는 페이지를 만든다. 에 이벤트 등록 이렇게 생긴 폼이 있을 때, 보통은 button에 이벤트를 등록할 것이다. 하지만 대신 에 이벤트를 걸어주면 동작 뿐만이 아니라 로 들어오는 submit 작업 등 다양한 방식에…

  [frontend]
• 2020-08-30

  Javascript 30 Day 14

  Day 14 Javascript References vs Copying value copy & reference copy 어느 프로그래밍 언어를 공부해도 공통적으로 들어있는 내용이 있다. 얕은 복사(shallow copy)와 깊은 복사(deep copy)이다. 보통 변수 값을 복사하면 변수가 가진 value가 복사되는…

  [frontend]
• 2020-08-29

  Javascript 30 Day 13

  13. Slide in on Scroll 스크롤을 내릴 때 마다 본문에 포함된 이미지들에 없어져다가 나타나는 효과를 적용한다. Debouncing 스크롤을 내리는 동작은 한 번 휠을 굴릴 때 마다 엄청나게 많은 이벤트를 발생시킨다. 이는 높은 가능성으로 성능저하를 발생시킬 수 있다. 이를 방지하고자 이벤트를 제한 하는…

  [frontend]
• 2020-08-29

  Python web scrapping (Beautiful Soup)

  Web Scrappping 이란 웹페이지에서 데이터를 수집하는 모든 과정을 말한다. 크롤링과 혼용되어 사용되는 일이 많은데, 크롤링은 웹 페이지들을 수집, 분류하여 나중에 쉽게 찾아 볼 수 있도록 인덱싱 하는 작업이다. 따라서 스크래핑이 더 큰 범주에 속한다고 보면 된다. 파이썬에는 웹 스크래핑을 도와주는 다양한 모듈들…

  [backend]
• 2020-08-29

  [Node.js] Module Pattern

  Module Pattern 모든 코드를 App.js 에 몰아넣기 보다는 기능에 맞게 모듈화 하여 분리해 관리하는 것이 전체 프로젝트를 관리하기에 훨 씬 좋다. 모듈화 작업은 나중에 리팩토링 하려 하지 말고 처음부터 잡아놓는 것이 좋은 것 같다. 이후에 하려고 하면 복잡하다. Node.js의 standard 모듈화 방법은…

  [backend]
• 2020-08-28

  Binary Search

  🚨 ’이것이 취업을 위한 코딩테스트다’ 교재 정리 이진탐색 이진탐색은 데이터의 크기가 클 때 효율적인 탐색 알고리즘이다. 한번 탐색 할 때 마다 탐색 범위를 반 씩 줄여나가면서 값을 찾기 때문에 속도가 매우 빠르다. 이진탐색은 정렬된 자료에 대해서만 사용할 수 있다. 코딩테스트에 자주 출제되는데, 문제에서 탐색해야 할…

  [algorithms]
• 2020-08-28

  [HTML] 태그

  태그 구성요소 w head 태그에는 웹페이지에 대한 정보를 담는다. 페이지 인코딩 방식이나 css 파일 링크, 페이지의 제목 등 다양한 데이터를 포함한다. meta 태그는 웹페이지에 대한 메타데이터를 나타내는 태그이다. 메타데이터란 이다. 문서 작성자나 문서 요약과 같은 정보를 담고 있다. 주로 인코딩 방식을 나타내기…

  [frontend]
• 2020-08-27

  Javascript 30 Day 12

  Key Sequence Detection(KONAMI CODE) Konami Code 위키피디아 Konami Code란 몇몇 웹 사이트에서 동작하는 비밀 코드이다. 일련의 코드를 키보드로 입력하면 동작한다. 오늘은 이런 Konami Code를 동작시키기 위한 유저의 key sequence를 감지하는 기능을 자바스크립트로…

  [frontend]
• 2020-08-26

  Codeforces 맛보기

  Codeforces 첫 도전 몇 개월 간 알고리즘 공부를 꽤 했다고 생각해 말로만 들었던 코드포스 알고리즘 대회에 참가해봤다. 별 기대가 없긴 했지만 한 문제라도 풀 수 있지 않을까 하여 들어가봤는데 .. 처참하게 패배했다. 일단 영어 문제를 푸는 것이 처음이라 문제를 이해하는데 시간이 좀 오래걸렸다. 프로그래머스 같은…

  [history]
• 2020-08-26

  Javascript 30 - Day 11

  Javascript30 Day 11. video 요소로 재생/일시정지 토글, 건너뛰기, progress bar를 갖춘 커스텀 비디오 플레이어를 직접 구현했다.

  [frontend]
• 2020-08-24

  [css] Block & Inline block

  Block & Inline Block HTML element는 블럭 요소와 인라인블럭 요소로 나뉜다. Block 종류 div h1, h2, h3... header, footer p section video 특징 크기를 지정할 수 있다. 사용 가능한 최대 가로 너비 (100%), 높이는 ’content height’를 사…

  [frontend]
• 2020-08-24

  [css] margin & padding

  margin 은 element의 바깥 여백 속성이다. 두 요소가 붙어있을 경우 marign이 상쇄되는 상황이 있는데 잘 정리된 블로그 글을 찾았다. 정말 깔끔하게 잘 정리해주셨다. 헷갈릴때 마다 확인해야 할 것 같다. margin이 상쇄되는 여러가지 조건이 있는데 이를 방지하기 위해서는 border 값을 주던가 padd…

  [frontend]
• 2020-08-23

  Sorting

  🚨 ’이것이 취업을 위한 코딩테스트다’ 교재 정리 정렬 정렬을 위한 알고리즘은 여러가지가 있다. 대부분 언어의 라이브러리에는 이미 효율적인 정렬 라이브러리를 제공하고 있지만 기본적으로 정렬 알고리즘의 원리를 이해하고 있는 것도 기업 면접에도 많이 등장하는 문제이기 때문에 중요하다고 한다. 선택 정렬 가장 단순하고 직관…

  [algorithms]
• 2020-08-23

  Blogger 에서 Hexo로 전환하기

  Blogger에 남겨둔 많은 포스트들을 어떻게 할까 생각했는데 아무래도 앞으로는 계속 Hexo에서 포스팅을 하게 될 것 같아 포스트를 이동시켜야 되겠다는 생각을 했다. Migration 플러그인이 있지 않을까 싶어서 찾아봤는데 역시 있었다! hexo 공식 Migration plugins 하지만 여기 Blogger는 없었…

  [history]
• 2020-08-23

  Javascript 30 Day 10

  Javascript30 Day10<br Hold Shif and Check Checkboxes 프로그램 기능 구현해야 하는 기능은 하나의 체크 박스를 선택하고 키를 누른 상태로 위/아래의 다른 체크 박스를 선택하면 그 사이에 있는 모든 체크 박스가 함께 선택되는 기능이다. 이런 기능은 다양한 프로그램에서 사용되는 기능이…

  [frontend]
• 2020-08-22

  Windows에서 WSL 사용하기

  :rotating light: \ nomadecoders의 윈도우 세팅 강좌 정리 내용 WSL : Windows Subsystem for Linux WSL은 Windows10 2004 업데이트 부터 지원되는 기능이다. 2020년에 나온 업데이트 버젼인데 왜 이름을 이렇게 붙였는지는 모르겠다. Linux 환경에서 뭔가 설…

  [misc]
• 2020-08-21

  Javascript 30 - Day 9

  Javascript30 Day9 Dev Tools Domination Javascript로 수행하는 동작을 확인하기 위해서는 data들을 콘솔 창에 출력해봐야 한다. 주로 가 사용되는데 개발에 도움이 되는 비슷한 여러 함수들이 있다. console.log() 콘솔 창에 인자로 받은 문자열을 그대로 출력한다. 키워드를 사…

  [frontend]
• 2020-08-21

  [이코테] Greedy - 무지의 먹방 라이브

  🚨 ’이것이 취업을 위한 코딩테스트다’ 교재 정리 프로그래머스 문제 링크 문제 평소 식욕이 왕성한 무지는 자신의 재능을 뽐내고 싶어 졌고 고민 끝에 카카오 TV 라이브로 방송을 하기로 마음먹었다. 그냥 먹방을 하면 다른 방송과 차별성이 없기 때문에 무지는 아래와 같이 독특한 방식을 생각해냈다. 회전판에 먹어야 할 N…

  [algorithms]
• 2020-08-21

  [이코테] Greedy - 만들 수 없는 금액

  🚨 ’이것이 취업을 위한 코딩테스트다’ 교재 정리 문제 N개의 동전이 주어질 때 만들 수 없는 양의 정수 금액 중 최솟값을 구하는 프로그램을 작성하시오. 입력 조건 첫째 줄에는 동전의 개수를 나타내는 양의 정수 N이 주어진다. ( 1 <= N 1,000) 둘째 줄에는 각 동전의 화폐 단위를 나타내는 N개의 자연수가 주…

  [algorithms]
• 2020-08-20

  Javascript 30 - Day 8

  Javascript30 Day8 Fun with HTML5 Canvas W3C 튜토리얼 HTML element는 웹 페이지에서 그래픽을 그리기 위해 사용하는 요소이다. 아래 캔버스에서 테스트 해볼 수 있다! (우클릭으로 캔버스 비우기) <canvas id="draw" width="700" height="300" styl…

  [frontend]