모르는건 한번으로 족해 모르는건 한번으로 족해

분류 전체보기

• Throttle: 함수가 주기적으로 실행되는지 확인하기

  FrontEnd/JavsScript 2021. 4. 17. 00:21

  명시적인 리턴값이 없는 경우, 함수가 의도대로 작동하는지를 어떻게 확인할 수 있을까 하는 의문이 생겼다. throttle은 함수와 delay를 인자로 받고, delay 동안에는 실행 요청이 들어오더라도 1회 이상 실행되지 않는 함수를 리턴해준다. 코드를 작성한 후 인자로 들어온 함수가 정말로 특정 시간 동안 실행되지 않는지 여부를 어떻게 확인할 수 있을까를 고민하다가 인자 함수가 실행되면 로그를 찍어주면 되겠다는 생각이 들었다. 잠깐 짚고 넘어가는 throttle과 debounce의 차이 (JavaScript) 쓰로틀링과 디바운싱 안녕하세요. 이번 시간에는 쓰로틀링(throttling)과 디바운싱(debouncing)에 대해 알아보겠습니다. 원래 예정에 없던 강좌이지만 요청을 받았기 때문에 써봅니다. 프..

  Read More
• SVG로 Progress-bar 만들기 with JS로 width 변경

  FrontEnd/JavsScript 2021. 3. 23. 01:28

  남은 시간을 진행바로 표시해줘야 하는 상황이 생겼다. CSS에 -webkit-progress-bar 라는 프로퍼티가 있다고 듣기는 했는데 아직 생소해서 이번에는 최대한 아는 걸로 만들어보기로 했다. 시간이 주어지면 (ex 10초) 남은 시간만큼 타임바가 짧아지다가 사라지는 형태다. 큰 아이디어는 이쪽에서 얻었다: ProgressBar 구현하는 3가지 방법 먼저 직선 모양이 있어야하니 svg 태그를 추가한다. 이미지를 잡기 위해서 우선 기본값을 넣어주었다. (Move to 좌표(0, 0) -> Horizontal 가로 좌표(변수) -> Vertical 세로 좌표 10으로 이동 -> 거기서 0으로 되돌아와서 마저 채우기) 그리고 js를 구성한다. 먼저 상수처리. 셀렉터를 가져오고, 시간 제한을 정해준다. c..

  Read More
• [git] fork/branch를 origin/branch로 push하기

  git 2021. 3. 12. 19:17

  fork된 branch에는 push까지 완료된 상황이라고 가정한다. 일단 로컬에 새 프로젝트를 만들고 origin을 클론한다. git clone origin-master.git 그리고 push할 브랜치(아마도 PR 혹은 MR을 보낼 브랜치)로 체크아웃을 하고 git checkout -b remote에 fork된 브랜치를 등록한다. git remote add 저장소이름 포크된-브랜치-클론.git 혹시 해당 remote에 branch가 많아서 특정 브랜치를 가져와야 하는 상황이라면 아래처럼 브랜치명을 명시해주자. git remote add 저장소이름 -b 브랜치명 포크된-브랜치-클론.git 로컬 상태를 remote(현재는 fork된 브랜치)를 따라가도록 업데이트를 하고 git remote update log..

  Read More
• ESLint 사용하기 - eslint-config-airbnb

  FrontEnd/좋은코드작성하기 2021. 3. 8. 19:22

  ESLint 린트는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류 등을 표시해주는 도구를 가리킨다. ESLint는 요즘 많이 쓰이고 있는 린트의 하나. 최근 코드 작성시에 Airbnb JS Style Guide를 많이 참고하고 있는데, 마침 에어비앤비에서 린트 규칙을 제공하고 있어서 이걸 사용하기로 했다. 일단 린트를 설치하고 npm install eslint --save-dev 에어비앤비 린트를 설치하고 npx install-peerdeps --dev eslint-config-airbnb 사용하려는 프로젝트에서 npm init을 한 다음, 린트도 init을 해준다. npx eslint --init 그러고 나면 프로젝트 폴더에 .eslintrc.js 라는 파일이 생긴다. 내 파일에는 아래와 같..

  Read More
• Permutation Power Set (순서를 구분하는 멱집합)

  FrontEnd/알고리즘 2021. 3. 6. 05:09

  input: 배열 [1, 2, 3] output: (원 배열의 멱집합에 순서 배리에이션까지 더해진 배열 [1, 2] ≠ [2, 1]) [], [1], [2], [3], [1, 2], [2, 1], [1, 3], [3, 1], [2, 3], [3, 2], [1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1] 순열 멱집합이라는 명칭이 실제로 있는 것인지는 잘 모르겠다. 일반적인 PowerSet은 순서를 구분하지 않는 부분 집합을 가리키는데, 프로그래머스에서 완전탐색 > 소수 찾기 풀이를 하다가 순서를 구분하는 부분 집합이 필요해졌다. 인풋으로 1~7개의 숫자가 주어지고, 주어진 숫자로 만들 수 있는 수 중 소수인 것이 몇 개인가를 묻는 문제다. ..

  Read More
• 프로그래머스 MySQL 고득점 Kit 풀이 정리

  MySQL 2021. 3. 3. 13:05

  MAX/MIN 최소/최댓값 SELECT MAX(컬럼) FROM 테이블; SELECT MIN(컬럼) FROM 테이블; 다만 컬럼 이름이 MAX(컬럼) 처럼 나오기 때문에 원하는 컬럼명이 있다면 MAX(컬럼) as '원하는 컬럼명'처럼 써야한다. COUNT 데이터 ROW 개수 SELECT COUNT(*) FROM 테이블; ROW 개수를 세는데, 특정 컬럼에 중복값이 있고, 그건 빼고 세고싶다면 DISTINCT를 쓰면 된다. NULL 값과 중복된 값은 제외하고 세준다. SELECT COUNT(DISTINCT 컬럼) 테이블; 중복은 빼되 NULL은 포함해야 한다면 SELECT COUNT(*) FROM (SELECT * FROM 테이블 GROUP BY 컬럼)sub; GROUP BY, HAVING 특정 컬럼에 특정..

  Read More
• [HTML & CSS] Google Clone (2) 내비게이션, 검색

  FrontEnd/CSS 2021. 2. 22. 18:22

  Google 페이지를 클론코딩하는 작업을 했다. 기능적인 부분은 무시하고 외양에만 집중했다. 분량 이슈로 나머지는 아래쪽에서 마무리했다. 2021/02/21 - [FrontEnd/Prep] - [HTML & CSS] Google Clone (1) Flex Container, 로고, footer [내비게이션] svg, justify-content: flex-end; vertical-align: middle; inline whitespace 내비게이션에는 Gmail, 이미지, 다른 기능 추가 로드, 로그인 버튼의 총 4가지가 필요하다. 그리고 화면 오른쪽에 정렬돼야 한다. 전체 블록을 차지하는 div 안에 작은 div로 오른쪽 영역이 다시 한번 묶여있고, Gmail, 이미지가 한 묶음, 추가 로드버튼과 로그..

  Read More
• [HTML & CSS] Google Clone (1) Flex Container, 로고, footer

  FrontEnd/CSS 2021. 2. 21. 15:45

  Google 페이지를 클론코딩하는 작업을 했다. 기능적인 부분은 무시하고 외양에만 집중했다. 분량 이슈로 나머지는 아래쪽에서 마무리했다. 2021/02/22 - [FrontEnd/Prep] - [HTML & CSS] Google Clone (2) 내비게이션, 검색 먼저 페이지를 Box 단위로 나누어 보았다. 큰 박스 6개가 제일 먼저 눈에 띈다. 위의 로그인 메뉴는 내비게이션인 것 같고, 로고는 아무 기능이 없는 그냥 로고 이미지, 중간의 검색창이 메인으로 보인다. 검색창 아래에는 현재 설정된 언어를 보여주는 부분이 나오고, 그 아래로 접속한 국가, 마지막으로 정보 및 약관 라인이 있다. 순서대로 nav, div, main, section, footer(div(접속국가), div(정보 및 약관) 태그로 ..

  Read More