반응형 Embedded169 [JS] ECMA스크립트 ECMA스크립트(ECMAScript, 또는 ES) Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다. 2023. 10. 23. [js] Parcel 번들러 번들러가 대체 뭐지? 번들러는 여러 개로 모듈화된 자바스크립트 파일을 하나로 합치는 도구이다. 브라우저는 모듈화된 자바스크립트는 읽지 못하기 때문에 브라우저에서 코드를 실행하려면 반드시 번들러가 필요하다. 설치 $ npm install -g parcel-bundler 2023. 10. 23. [JS] NPM Node.js를 설치하면 같이 설치되어 사용할 수 있습니다. npm에는 Node.js에서 사용되는 각종 코드 패키지들이 모여있고, 우리는 그 패키지를 다운로드 받아 사용할 수 있습니다. 좀 더 쉽게 npm은 Node.js 생태계의 앱스토어나 플레이스토어 같은 역할을 합니다. 자주 사용하는 npm 명령어 package.json 생성 $ npm init # 기본 설정 $ npm init -y 패키지 설치 # 로컬 설치 $ npm install # 전역 설치 $ npm install -g # 개발 설치 $ npm install --save-dev # package.json의 모든 패키지 설치 $ npm install 패키지 제거 # 로컬/개발 패키지 제거 $ npm uninstall # 전역 패키지 제거 $ .. 2023. 10. 23. [JS] Node.js Node.js란 무엇입니까? 자바스크립트를 브라우저 말고도 로컬 PC에서도 실행시켜줄 수 있는 실행창(런타임)입니다. Node.js를 실행하면 그냥 자바스크립트 입력란이 하나가 뿅 뜨고요. 거기다가 자바스크립트 입력하면 바로바로 해석해서 실행시켜줍니다. 설치 https://nodejs.org/ko 2023. 10. 23. [JS] […] 배열을 나타낼 때 사용한다. 예를 들어 const users = [ {name: 'kim', age: 10, addr:'kor'}, {name: 'joe', age: 20, addr:'usa'}, {name: 'miko', age: 30, addr:'jp'} ]; 이와 같이 사용한다. const headerMenuEls = [...headerEl.querySelectorAll('ul.menu > li')] 다음과 같이 querySelectorAll을 쓸 때도 사용한다. 2023. 10. 23. [JS] stopPropagation 이벤트 객체의 메서드인 Event.stopPropagation() 를 이해하기 위해 일단 이벤트 버블링에 대해 알아보자. 버블링이란? 버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 것을 말하며, 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. event.stopPropagation() 은 현재 이벤트 이후의 전파를 막아 위쪽으로 일어나는 이벤트 버블링을 막아 준다. 2023. 10. 23. [JS] import 자바스크립에서 외부 스크립트 또는 외부 모듈의 export된 함수, 객체를 가져오는데 사용됩니다. 모듈 전체 가져오기 import * as myModule from "my-module.js"; 멤버 가져오기 import {foo, bar} from"my-module.js"; 다른 이름으로 멤버 가져오기 import {reallyReallyLongModuleMemberName as shortName} from "my-module.js"; import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js"; 바인딩 없이 모듈만 실행하기 단순히 특정 모듈을 불러와 실행만 할 목적이라면, .. 2023. 10. 23. [CSS] @media, @keyframe @media{} : 오직 CSS만을 이용하여 반응형 웹을 개발하기 위해서는 @media{}가 필수적으로 쓰인다. @keyframe : 키프레임은 애니메이션을 구현할 때 많이 사용하는 기능인데, 원하는 지점에서 애니메이션 처리를 할 수 있어 디테일한 애니메이션 구현에 용이하다. 하지만, 아직도 이해 잘 못하는 코드. 솔직히 @media 안 써도 잘 되는 것 같고, @keyframe의 경우에는 애니메이션 처리할 일이 있어야 쓸것인데 아직 없다. 2023. 10. 23. [html] HTML 모르는 태그 정리 - nav : 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다. 한마디로 하이퍼텍스트들의 집합을 정의할 때 사용한다. - figure : 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용합니다. figcaption : figcaption은 figure 요소에 캡션을 만든다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킨다. - video : 영상 관련 태그 속성 설명 src 영상의 주소를 가져올 때 사용하는 가장 중요한 태그 controls 영상 컨트롤 막대를 표시합니다. 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있습니다. width, heigh.. 2023. 10. 23. [Web] 마크다운 마크다운(MarkDown)언어란?마크다운 언어는 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었습니다.읽기도 쓰기도 쉽다는 장점이 있습니다.그루버는 작성한 마크다운 언어 문서를 HTML 파일로 변환해주는 펄(Perl) 스크립트도 만들었습니다.그 파일이 우리가 흔히 사용하는 .md 확장자의 파일입니다. (Readme.md 라던지...)- 나무위키 결국에는 프로그램 언어라는 거군…^^그럼 마크업 언어의 일종이라 했는데, 마크업 언어는 뭘까?마크업(MarkUp)언어란?마크업 언어는 "마크(Mark)"로 둘러싸인 언어입니다. "태크(Tag)"로 둘러싸였다고도 표현합니다. HTML, XML 등의 마크업 언어들은 문서의 구조를 정의합니다. 쉽게 말하면 문서.. 2023. 10. 23. 이전 1 ··· 9 10 11 12 13 14 15 ··· 17 다음 반응형