백엔드 개발자의 프론트엔드 공부

HTML 은 Hyper Text Markup Language 줄임말로 간단하게 말하면 웹 페이지를 만드는 마크업 언어라고 할 수 있다. HyperText는 기본적으로 웹 페이지에서 다른 페이지로 이동할 수 있는 HyperLink를 지원하도록 설계 되었고 이 덕분에 페이

지금 까지 만들어본 페이지를 주요 css 속성을 이용해서 꾸며봅시다.css 는 선택자, 선언, 속성 이렇게 세 가지로 이루어져 있습니다.선택자는 html 문서상에서 각 태그들을 식별할 수 있게 붙여놓은 이름을 선택자로 활용할 수 있습니다.ex) sematic tag,

변수 선언상수 선언더이상 var은 사용하지 않는다. 함수를 포함한 대부분의 선언은 모두 const로 한다. let이 필요한 경우에만 let을 쓴다.별도의 선언 없이 변수에 대입한다.숫자, 문자열, boolean, null(값이 없다.), undefined(아직 값이 지

배열은 어떤 배열이든 만들수 있다. ex) 숫자배열, 문자열 배열, 객체 배열 등.pushlengthif 나 for문이 끝나는 중괄호뒤에는 ;(세미콜론)을 붙이지 않아도 된다.특정 조건이 참이라면 계속해서 반복하는 반복문이다.반복문 내부에서 조건에 변화를 주고 언젠가는

if-else조건문을 한줄로 간결해서 쓸 때 사용하지만, 가독성이 떨어지니 가급적 쓰지 않는다.삼항 연산자를 중첩해서도 사용할 수 있다.Truthy: true 같은거... Falsy: false 같은거...함수의 인자가 null이거나 undefined일때 오류가 생기는

이 때 만약 b의 값이 주어지지 않았다면, undefined 오류가 날 것이고, 이를 방지하기 위해 b값에 초기값을 줄 수 있다.nickname이라는 값에 '멍멍이'라는 값을 담고 있다.이를 비구조화방식으로 바꾸려면 로 바꿀 수 있다. 비구조화할당은 객체에서만 할 수

html에서 태그에 식별자를(id, className, tagName)을 설정해주면 자바스크립트에서 손쉽게 해당 DOM을 선택할 수 있다. 여기서 DOM(Document Object Model)이란 문서 객체 모델로, 각 태그에 대한 정보를 가지고 있는 js객체를 의미

Promise (more..)async/await (...more)이전에는 비동기 작업을 처리할 때 아래와 같이 콜백함수로 처리했다.숫자 n 을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현해보자이는 프로미스로 방

async/await async/await는 ES8에 해당하는 문법으로 Promise를 더욱 쉽게 사용할 수 있게해준다. 기본적인 사용법은 아래와 같다. 일단 함수를 선언할 때 함수 앞부분에 async키워드를 붙인다. 그리고 Promise 앞부분에 await 을

상태관리를 알기전에 상태를 어떻게 정의하고 있는지 알아야할 것이다. 상태(state)는 쉽게 말하면 데이터라고 생각할 수 있다.객체지향 프로그래밍에서는 기본 단위가 객체이고, 프론트엔드에서는 비슷한 개념으로 컴포넌트라는 용어를 사용한다. 객체가 인스턴스 변수(데이터)로

✅ todo list에 todoItem을 키보드로 입력하여 추가하기✅ todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가)✅ todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제✅ todo li

ESLint는 더 일관성있게 코드를 작성하고 버그를 식별 및 회피할 목적으로 ECMAScript/JavaScript 코드에서 발견된 패턴을 개발자에게 알려주기 위한 도구입니다. ESLint에 작성된 모든 규칙은 플러그인이며 런타임에 더 추가 할 수 있습니다.vue-cl