웹 썸네일형 리스트형 [vscode] Color Theme - 변수, 객체 색상 바꾸기 Color Theme vscode에서 화면에 보이는 색상을 변경해주는 세팅 vue 작업하다 object.item 이런 식으로 되어 있는 선언되어 있는 변수가 같은 색이라 구분이 잘 안 간다는 느낌을 받아서 찾기 시작 내용 F1(ctrl+shift+p) > Color theme를 선택하면 기본적인 color theme를 바꿀 수 있습니다. 그런데.. 여기서 기본 테마를 적용했는데 몇몇 색상만 바꾸고 싶다 하시는 분들만 이 글을 읽으시면 됩니다. 커스텀 setting(ctrl + ,) 에 가서 color를 검색하면 'Editor: Semantic Token Color Customizations' 이 나옵니다. 여기서 'Edit in setting.json' 클릭 setting.json 에서 기본적인 func.. 더보기 [Javascript] Dom 이란? 본 글은 필자가 Dom에 대해 공부하면서 작성한 글 입니다. 요약 위주로 글을 작성하였으므로, 자세한 내용들은 본문 내 링크를 따라 들어가 공부하시면 됩니다 :) [JavaScript] DOM이란 무엇인가? JavaScript를 공부하다보면 브라우저 기반의 여러 객체들에 대해서 듣게 됩니다. 처음부터 이 객체들이 ... blog.naver.com DOM 이란? 문서 객체 모델 / Document Object Model 의 약자. 넓은 의미에서는 웹 브라우저가 HTML을 인식하는 방식, 즉 Document를 Object로 Model(인식하는 방식) 이다. 좁은 의미에서는 document 객체와 관련된 객체의 집합 이다. (ex. document.querySelector) 문서 객체가 생성되는 방식은 두 가.. 더보기 [Javascript] npm, npm script , yarn 이 무엇일까? 자세한 내용들은 본문에 첨부된 링크들을 따라 들어가 읽어보는걸 추천 드립니다. npm 이란? [JavaScript] npm이란? npm이란 무엇일까?npm은 Node Packaged Manager의 약자입니다. 무슨 의미인지 한 번 추측을 해볼까요? ... blog.naver.com npm : Node Packaged Manager의 약자 Node -> node.js 를 의미 Packaged -> 말 그대로 node.js에 사용되는 패키지(module) Manager -> 말 그대로 패키지를 `관리`한다 는 의미이다. 요즘은 node.js를 설치되면 npm이 내장되어 (같이 설치되어 ) 제공된다. npm init Node js를 설치하고, 터미널에서 위와 같이 작성하면 npm init과 npm insta.. 더보기 [CSS] Bem 이란? Bem 은 Block Element Modifier 의 약자이며, CSS 개발 방법론이다. 말 그대로 Block 다음에 Element(내부요소) 다음에 Modifier(기능)순으로 네이밍을 한다는 의미이다. 큰 틀은 article__button--alert 이다. Block은 Header / nav / article / footer 등 block요소를 지칭하는 것이다. Element는 블록 내부에서 실제 기능을 담당하는 요소를 말한다. Modifier는 element의 기능 이나 속성을 지칭한다. 여러 블로그를 보면서 이 방법을 쓰는 이유는 크게 2가지로 생각된다. 1. .lists .list .items .item과 같은 중복 표현을 .list__item 요렇게 간결하게 줄이면서 보기 편하게 만든다는 .. 더보기 [Javascript] AJAX란? ( + XHR란?) AJAX란 무엇인가? AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequ velog.io [RESTful][ajax]ajax란? XMLHttpRequest사용법 - (1) Ajax를 사용하기 전의 웹이란? Ajax가 등장하기 전에는 웹 브라우저가 데이터를 요청하면 서버는 해당 정보를 "통째"로 보내주게 되었었다. 과거에는 사실 이게 큰 문제가 되지 않았는데 현재 사정 kamang-it.tistory.com 우선 위 글들을 읽고 오는걸 추천한다. 내용 요약 - AJAX : Asynchrono.. 더보기 [VSCode] Prettier - 코드를 깔끔하게 정리하기 Prettier란 무엇인가? Code Formatter으로 vscode에서 extensions로 설치가 가능하다. 주요 내용 setting에서 설정해준 값에 따라 파일을 저장할때 마다 자동으로 수정해준다. 예시) 끝에 세미클론을 안붙이고 저장하면 붙여준다 , 탭의 간격은 2로 조정해준다 등 세팅 방법 1. .prettierrc 에 세팅 - tabWidth : 탭 길이 - useTabs : 탭 사용하면 들여쓰기 - endofLine : 마지막 줄에 줄바꿈 - printWidth : 지정 글자수 이상 자동 줄바꿈 - semi : 세미클론 사용 여부 - singleQuote : 기본 쌍따옴표인데 홑따옴표를 사용할지 여부 2. ctrl + shift + p > open settings(JSON) > 아래와 같이.. 더보기 [Javascript] 간단한 타이머 (w.setInterval,classList) 노마드 코드 영상을 보고 setinterval을 배우고 타이머도 만들 수 있을 것 같아서 만들어보았다. setinterval 관련 글 html 10:00 timer 위와 같이 추가해주었다. timer.js 변수 const timerContaniner = document.querySelector(".js-timer"), timerclock = timerContaniner.querySelector("h1"), timerBtn = timerContaniner.querySelector("button"); html의 요소들을 querySelector를 통해 가져왔다. const CLICKEDTIMER = "clickedTimer"; const INITTIME = timerclock.innerText; 또한, re.. 더보기 [Javascript] 함수 setInterval() 이 글은 노마드 코드 영상을 보고 배운 것을 정리한 글입니다. 노마드 코더 영상 링크 setInterval() 형식 : setInterval(fn,millisecond) 함수를 일정 시간마다 실행시켜주는 함수이다. 예시 - clock //HTML 에서 쓰여질 곳을 가져옴 const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); // 시간 함수 function getTime(){ const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = d.. 더보기 이전 1 다음
