분류 전체보기
-
[JS] Nomadcoders - Zoom Clone CodingFrontEnd/JavaScript 2022. 5. 6. 17:51
Babel Babel 브라우저가 최신 버전(ES6, ES7)의 JavaScript를 이해할 수 있는 문법으로 변환해주는 JS Compiler 최근 많이 사용되는 TypeScript도 JavaScript로 compile되어야 하는데 이때 사용하는 것이 Babel 다양한 브라우저에서 동작하는 서비스를 만들기 위해 사용(호환성 향상) Babel의 동작 파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계 변환 (Transsforming) : 추상 구문 트리를 변경하는 단계 출력 (Printing) : 변경된 결과물을 출력하는 단계 Babel의 Polyfill Babel은 문법을 변환하는 컴파일러 브라우저가 구현하지 못하는 새로운 함수를 실행 가능 Express Node.js : Ch..
-
[JS] Nomadcoders - Vanila JSFrontEnd/JavaScript 2022. 5. 3. 19:40
LOGIN HTML Element의 APIs 보는 방법 1. console.dir(elem); 2. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement - Web APIs | MDN The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. developer.mozilla.org elem.classList.contains(클래스 이름); : 요소의 클래스 리스트에 해당 클래스가 있는지 여부를 t..
-
[JS] Do it! JS - 03 변수와 자료형, 연산자FrontEnd/JavaScript 2022. 5. 2. 20:17
03-1 변수를 선언하는 규칙 var (let 또는 const) 변수이름; 1. 의미가 있는 이름으로 짓는다. 2. 여러 단어를 연결한 변수 이름은 Camel Case로 지음 - 첫 번째 단어는 소문자로, 두 번째 단어부터는 대문자로 시작하는 방법 3. 선언할 수 없는 이름도 있다. - 변수이름의 첫 글자는 문자, 밑줄(_) 또는 달러 기호($)로 시작 - 그 뒤부터는 문자, 밑줄, 달러 기호, 숫자 사용 가능 변수에 값이나 식 저장하기 Do it! 실습 - 나이 계산 프로그램 만들기 나이 계산하기 (결과 값 표시) let과 const : ES6 버전부터 변수 선언 시 let, const 사용 가능, let으로 선언한 변수는 블록 내에서만 사용 가능 나이 계산하기 (결과 값 표시) 03-2 자료형 이해하..
-
[JS] Do it! JS - 02 자바스크립트와 친해지기FrontEnd/JavaScript 2022. 5. 2. 18:52
알림창으로 출력 var name = prompt("이름을 입력하세요. "); console.log(name); name = prompt("이름을 입력하세요. ", "홍길동"); // 홍길동 : default 값 console.log(name); 웹 브라우저 화면에 출력 - document.write() 함수 var name = prompt("이름 : "); document.write(name + "님, 어서오세요!"); 복습 var age; age = prompt("나이를 입력하세요. "); document.write(age + "살입니다."); 콘솔에 출력하기 - console.log() 함수 var name = prompt("이름을 입력하세요. "); console.log(name + "님 어서오세요..
-
[FE] DOM, WindowFrontEnd 2022. 4. 30. 11:33
DOM(Document Object Model) DOM이란? HTML, XML 문서의 프로그래밍 interface 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공 → 문서 구조, 스타일, 내용 등을 변경 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립트 언어를 이용해 DOM 수정 문서 객체(Document Object) : 스크립트 언어가 이용할 수 있는 객체(HTML 태그) DOM은 넓은 의미로 웹 브라우저가 HTML 문서를 인식하는 방법을 의미 좁은 의미로는 document와 관련된 객체의 집합 (트리 구조) DOM의 문서 객체 생성 정적 문서 객체 : 브라우저가 HTML 문서의 태그를 읽음 동적 문서 객체..
-
[JS] Do it! JS - 01 자바스크립트FrontEnd/JavaScript 2022. 4. 30. 10:56
01 안녕? 자바스크립트! 01-1 웹 프로그래밍이란? 프로그래밍 : 프로그램을 만드는 과정, 사람이 원하는 대로 컴퓨터가 작동할 수 있도록 컴퓨터 언어로 명령어를 나열하는 행위, 어떤 문제를 분석하고, 논리적으로 해결할 수 있는 방법을 찾아 코딩하는 과정까지 포함 코딩 : 소스코드를 작성하는 행위 웹 프로그래밍 : 웹에 관련된 프로그램을 만드는 행위, 웹 브라우저와 관련된 프로그램을 작성하는 것 웹 사이트의 작동 : 서버와 클라이언트의 요청과 응답 클라이언트(웹 브라우저) : 필요한 정보 요청 서버 : 요청을 처리해 알맞은 정보 전달 웹 프로그래밍 백엔드(Back-end) : 서버에서 사용자 요청 처리, 데이터 관리 PHP, DB, ASP, Java, ... 프론트엔드(Front-end) : 서버에..
-
[CSS] 글자 수가 많아지면 ...으로 표시FrontEnd/HTML／CSS 2022. 4. 27. 22:05
통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다 .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis;// 글자 수가 width 범위를 넘어가면 생략부호로 표시 white-space:nowrap;// 공백 1개만 표시, 한 줄에 모두 표시(줄바꿈 X) } white-space normal(기본값) : 공백이 여러 개여도 하나만 표시, 자동 줄바꿈 nowrap : 공백이 여러 개여도 하나만 표시, 줄바꿈 X pre : 공백 모두 표시, 줄바꿈 X pre-wrap : 공백 모두 표시, 자동 줄바꿈 pre-line : 공백 모두 표시, 자동 줄바꿈 출처: https://jos39.tistory.com/211..