👩‍🎤 프론트엔드/javascript

[Javascript][Node.js] Github actions를 이용해서 README 자동 업데이트하기

프로그래머스 코딩 테스트 문제를 풀고 깃허브 레포지토리에 풀이를 올리는 스터디를 진행하고 있었다. 스터디는 아래와 같이 진행된다. 1. 문제를 풀고 통과한다. 2. 통과된 풀이를 [레벨/문제명.js] 파일 형식으로 푸시한다. 3. README에 풀이 링크를 추가한다. 매일 하루에 한 문제 이상을 푸는 것을 목표로 했고 위와 같은 행동이 반복되던 찰나 .. 어쩐지 엄청난 귀찮다🤔 2번만 수행하면 3번 과정이 자동으로 수행될 수 없을까? README를 작성하는 방식은 아래와 같다 README 작성하기 무작정 풀이 파일을 올리게 되면 문제 개수가 많기 때문에 나중에 다시 찾아보기가 어렵다. README에 테이블로 정리해놓으면 어느 문제인지 + 어떻게 풀이했는지를 쉽게 확인할 수 있다. - 번호 - 문제 개수를..

[Javascript] var, let, const

var , let , const 자바스크립트에서 변수를 선언하는 방법은 총 3가지가 있다. var a = 10; let b = 100; const c = 1000; ES6 이전에는 var를 사용해서 변수를 선언하였다. ES6 이후에 let, const가 도입되었다는 것은 기존의 var에 문제점이 있고 이를 개선하기 위해 새로운 문법이 등장했다고 생각할 수 있다. var의 문제점 1. 중복 선언이 가능하다 중복 선언이란, 동일한 스코프 내에 동일한 식별자가 2개 이상 존재하는 것을 뜻한다. var 키워드로 선언된 변수는 같은 스코프 내에 중복 선언하여도 에러가 발생하지 않는다. var x = 1; var x = 100; console.log(x); // 100 위 코드가 제대로 동작하는 이유 초기화문이 있..

[Javascript] 페이지네이션 구현하기

To do list 페이지네이션 구현 json-server를 활용해서 페이지네이션 구현하겠습니다 json-server: https://github.com/typicode/json-server 페이지네이션을 구현하기 위한 설정값은 총 4개가 필요합니다 currentPage: 현재 페이지 totalCount: 총 데이터의 갯수 pageCount: 화면에 나타날 페이지 갯수 limit: 한 페이지 당 나타낼 데이터의 갯수 따라서 currentPage: 1 totalCount: 53 (totalCount는 임의 설정) pageCount: 5 limit: 5 총 페이지 갯수 계산하기 총 데이터의 개수를 한 페이지당 나타낼 데이터의 개수로 나눠줍니다. 이 때, 올림을 하는 이유는 마지막 페이지에 데이터의 개수가 l..

[Javascript] input에서 커서 맨 뒤로 위치 시키기

input.focus() input.focus()로 input에 focus를 하면 커서가 맨 앞에 위치하게 된다 input에서 커서 마지막으로 위치시키기 커서를 맨 뒤로 보내기 위해서는 input에 있던 값을 변수에 저장한 다음 input에 focus 해주고 input의 value 값을 비워준 다음에 다시 value값을 채워준다 코드 const changeEditMode = (e) => { const $item = e.target.closest('.item') const $editInput = $item.querySelector('input[type="text"]') const value = $editInput.value $editInput.focus() $editInput.value = '' $edit..