'👩‍🎤 프론트엔드' 카테고리의 글 목록 (4 Page)

HTML 기본 틀에 대해 알아보자 - <!DOCTYPE> / <head> / <meta> / <title>

2022.07.11

vscode에서 ! + tab 누르면 나오는 "그 코드" 에 대해서 알아보자 바로 이 코드이다 항상 ! + tab 눌러서 자동완성으로 만들어지는 코드라 뜯어볼 생각도 안하고 그렇군 .. 하고 있었는데 오늘은 코드를 한 줄씩 뜯어볼 예정이다 모든 HTML 문서는 으로 시작해야한다 은 html 태그는 아니지만 브라우저에게 문서 종류를 알려주는 정보로 DTD(Document Type Definition)이다 HTML5 HTML5에서는 우리가 자주 보는 만 작성해주면 된다 HTML 4.01 https://docs.emmet.io/cheat-sheet/ 에서 html를 찾아보면 예전 HTML에서는 어떻게 선언하는지 자세히 볼 수 있다 HTML 4.01 DTD에는 3가지 모드가 있다 Strict mode(엄격 모드..

👩‍🎤 프론트엔드/javascript

[Javascript] var, let, const

2022.06.22

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

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

2022.06.07

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

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

2022.06.03

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..

HTML 기본 틀에 대해 알아보자 - <!DOCTYPE> / <head> / <meta> / <title>

[Javascript] var, let, const

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

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

티스토리툴바