일전에 쇼핑몰에 타이머 기능 구현이 필요하여 코드 찾는데만 며칠 걸렸던 기억이 있다. 근데 최근에 자바스크립트를 배우면서 알게 된 점은 자바스크립트로 현재 날짜와 시간을 구하는 방법은 생각보다 간단했다. 그럼 어떻게 구하는지 알아보자. 현재시간과 현재 날짜 구하기 현재시간과 현재시간을 구하려면 자바스크립트의 Date 객체를 사용하면 쉽게 구할 수 있다. Date 객체의 시간 값은 UTC기준지만, 날짜와 시간등 구성요소를 가져오는 메서드는 모두 현지(로스트 시스템의 위치)의 시간대를 사용한다. const date = new Date(); // 현재날짜와 시간 console.log(date); // output : Tue Feb 22 2022 23:20:01 GMT+0900 (한국 표준시) new Date(..
기존 자바스크립트의 변수 선언은 var로만 가능했다고 한다. 하지만 문제점들이 많아 ES6부터 const와 let이 추가되었다. 그럼 대체 이게 무슨 차이가 있을 것일까? 지금부터 알아보자. 변수 생성 단계 ① 선언 단계 - 변수를 실행 콘텍스트의 변수 객체에 등록한다. - 이 변수 객체는 스코프가 참조하는 대상이 된다. ② 초기화 단계 - 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보. - 이 단계에서 변수는 undefined로 초기화된다. ③ 할당 단계 - undefined로 초기화된 변수에 실제 값을 할당한다. var - 변수 중복 선언 가능. - 재할당 가능. - 하지만 큰 단점은 중복 선언했을 때 에러가 나오지 않고 각기 다른 값이 출력될 수 있음 - 코드량이 많아진다면 var변수를 쓰는..
나만의 웹사이트를 이쁘게 꾸며주기 위한 언어인 CSS, 단순히 HTML로만 코딩을 한다면 정말 못생긴 웹사이트가 되어 버린다. 이런 웹사이트를 꾸며줄 수 있는 도구가 바로 CSS이다. 실제로 코딩을 하려고 하니 자주 사용하지만 헷갈리는 CSS속성들이 있어 정리해보고자 한다. 그럼 CSS의 속성은 무엇이 있는지 어떻게 작성해야 하는지 알아보자. 1. CSS 권장 작성순서 ① 레이아웃 : display, float, postiton, ② 박스모델 : width, height, margin, padding, border ③ 배경 : background ④ 폰트 : font, color, text-align, vertical-align ⑤ 그 외 속성 2. CSS 적용 우선순위 ① 속성 값 뒤에 !importa..
클론 코딩을 하다 보면 HTML과 CSS 코드를 언제 다 쳐야 하나 싶을 때가 있다. 좀 더 간결하고 빠르게 입력할 수 있는 방법은 없을까? 검색하던 중 Emmet 기능에 대해 알게 되었다. 다행히 사용하고 있는 에디터인 VS Code에 내장되어 있다. 물론 VS Code 이외에 다른 에디터들에도 내장되어 있다고 한다. https://code.visualstudio.com/docs/editor/emmet Emmet in Visual Studio Code Using Emmet abbreviations inside Visual Studio Code. code.visualstudio.com 대체 어떻게 사용해야 할까? 그럼 간단하게 작성방법에 대해 알아보자. HTML 에밋 단축키 ① > : 자식 구조를 만들 ..
최근 개발 공부를 하고 있다. 코드 에디터로는 VS code를 사용하고 있고 여기서 작성한 코드를 바로 Git에 연동하는 방법을 알아보고자 찾아보게 되었다. 연동하기에 앞서 우선 몇가지 준비사항이 필요하다. 1. 준비 ① VS code 설치 구글에 'vs code'로 검색하거나 아래 링크로 접속하면 다운로드가 가능하다. 자신에 맞는 운영체제를 선택하여 다운로드해준다. 난 windows 11을 사용하고 있어 windows x64를 설치했다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building a..
