FRONTEND20 [Javascript] Date() / new Date()/ +new Date() 비교 (false 이유) Date Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성한다. Date객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 유닉스 타임스탬프를 사용한다. 아래와 같이 다양하게 Date객체를 생성하고 날짜를 지정할 수 있다. new Date(); new Date(value); new Date(dateString); new Date(year, monthIndex[, day[, hour[, minutes[, seconds[, milliseconds]]]]]); var today = new Date(); var birthday = new Date(95,11,17); var birthday = new Date("December 17, 1995 03:2.. 2021. 4. 20. [Mac/VSCODE] ESLint, Prettier, Husky, Lint-staged 설정 ESlint linter는 소스코드를 분석해서 문법 에러, 버그를 찾고 보고해주는 도구를 말한다. ESLint는 JavaScript를 위한 정적 검사 Tool이다. 코드를 실행하기 전에 버그를 찾거나, 괄호나 스페이스의 사용방법 등의 스타일을 통일하거나 하는 것에 도움이 된다. 자바스크립트에서 쓸 수 있는 linter는 JS Lint, JS Hint, ESlint 등 이다. 이중 가장 인기가 많은 것이 ESlint 이다. ESlint는 보고만 해주는 것이 아니라, 고쳐주기까지 해서. 규칙을 자신의 상황에 맞게 바꿀 수도 있어 좋다. Prettier Code Formatter로 작성한 코드를 정리해 주는 Tool이다. ESLint가 설정한 룰에 따라 룰에 맞지 않는 코드를 알려주는 Tool이라면, Pret.. 2021. 4. 19. [Node.js] Node.js 정리 및 설치 NVM & Node 설치 NVM(Node Version Manager) 맥OS에서 설치 & 사용하기 NVM(Node Version Manager) 맥OS에서 설치 & 사용하기. GitHub Gist: instantly share code, notes, and snippets. gist.github.com Node.js 크롬의 JavaScript 엔진(V8 Engine)으로 빌드 된 JavaScript 런타임. JavaScript는 일반적으로 크롬(Chrome)과 같은 브라우저에 내장되어 있다. 그래서 그 동안 JavaScript는 브라우저에 종속되어 있었다. javaScript를 크롬(Chrome)같은 브라우저에서만 쓰는 것이 아닌 브라우저 밖. 즉, 내 컴퓨터에서 다양한 용도로 확장하기 위해 만들어진 .. 2021. 4. 17. [CSS] DIV 그림자 주는 법(box-shadow) box-shadow offset-x 그림자의 수평위치(x)를 설정합니다. 요소로부터 떨어진 거리를 나타낸다. offset-y 그림자의 수직위치(y)를 설정합니다. 요소로부터 떨어진 거리를 나타낸다. blur-radius 그림자 테두리에 흐려지는 효과를 부여합니다. 클수록 테두리가 흐려진다. spread-radius 그림자의 크기를 설정합니다. 클수록 그림자의 크기가 커진다. color 그림자의 색상을 설정합니다. chrome 기준으로 기본값은 black. 2개 인자를 전달하는 경우 : offset-x offset-y (color) .phone-screen { background-color: white; height: 600px; width: 300px; margin: 50px; border: 2px rg.. 2021. 4. 16. [CSS] CSS Hack - div 가운데 정렬 space-between disply : flex - > justify-content : space-between 을 했을 때, 원하는 대로 중심이 딱 맞지 않는 경우가 있다. div 마다 width가 틀리기 때문에 벌어지는 일이다. CSS HACK 1. 부모 div에 justify-content: center; 2. 모든 자식 div에 width:33%; 3. 가운데 자식 div display:flex;, justify-content:center; 4. 오른쪽 자식 div display:flex;, justify-content:flex-end; 2021. 4. 14. [Javascript] CONST, LET, VAR 차이 / SCOPE CONST 상수(변하지 않는 값) 누군가가 인위적으로 변수의 값을 바꿀 수 없으니 보안상 좋다. 다양한 thread가 동시에 접근해서 값을 변경해서 오류가 나는 것을 막아줄 수 있다. human mistake을 방지 할 수 있다. 'const' 는 아래처럼 변수 재선언, 재할당 둘 다 불가능 {} 단위의 scope EX1) - 재선언, 재할당 불가 const name = 'JASN' console.log(name) // JASN const name = 'OK' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = 'OK' console.log(name) //Uncaught TypeError:.. 2021. 4. 9. [CSS] BEM(Block Element Modifier) 이란? BEM(Block Element Modifier) BEM(Block Element Modifier) 은 개발자들이 ID와 Class를 섞어 쓰면서, HTML에서 자신이 ID를 썼는지 Class를 썼는지 헷갈리면서 계속 확인하게 되자 그 시간을 단축시키려고 Class만 사용하기로 통일 하면서 사용되었다고 한다. Block 독립적으로 존재하고 재사용 가능한 요소를 block으로 명명 태그 값, id 사용x 클래스로 정의 position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용해야하니까!) 색상이나 크기 등을 묘사하는 이름x 구조적으로 의미 있는 이름으로 짓기 Ex) Element 블록 내부에 종속되어 실제 기능을 담당하는 것 종속의 의미를 block-name__element-name로 나.. 2021. 3. 29. [CSS] Inline, Block, Inline-Block 비교 Inline in the same line(같은 줄에 위치할 수 있다) 의 줄임말 Height(높이)와 Width(넓이) 가 속성을 지정해도 무시 됨. (해당 태그가 마크업하고 있는 Content의 크기 만큼만 공간을 차지하기 때문) margin의 상하 간격이 적용되지 않는다.(위아래가 적용이 안됨.) Block Width,Height,Margin,Padding 모두 적용 가능하다. margin : box의 boader(경계)로부터 바깥 쪽에 있는 공간 padding : box의 boader(경계)로부터 안 쪽에 있는 공간 Inline-Block Inline처럼 줄 바꿈 없이 한 줄에 엘리먼트 나란히 배치. Inline에서 불가능한 Width,Height 조정 및 Margin,Padding 상하 조정이 .. 2021. 3. 26. [HTML] Semantic HTML이란? What is Semantic HTML? 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 태그는 non-semantic 태그라고 할 수 있고, , 등 이름만 보고 태그의 역할을 유추 할 수 있는 태그는 semantic 태그라고 볼 수 있다. 예전 HTML 문서들을 보면 를 남발한 non-semantic한 문서들이 많았다고 한다. 하지만 지금은 코드만 봤을 때도 왜 사용했는지 유추가능한 Semantic HTML을 많이 쓴다고 한다. WHY? 검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. (SEO 참조). 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용. 의미없고 클래스 이름이 붙여져있거나 그렇지.. 2021. 3. 25. [HTML] OG Tag(Open Graph Tag) 이란? OG Tag 페이스북에서 만들어진 OG Tag는 Open Graph Tag의 줄임말로, 어떤 링크를 공유할 때 어떤 모습으로(미리보기의 제목, 설명, 이미지 등) 보여주고 싶은 지 지정하는 Tag이다. 사용하는 이유 웹 크롤러 또한 하나의 웹 프로그램이기 때문에 HTML 사이트의 3줄 요약이 무엇인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 어렵다. 사용법 References velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 blog.ab180.co/posts/open-graph-as-a-website-preview developers.fac.. 2021. 3. 23. 이전 1 2 다음
