JavaScript(7)
-
Node.js란?
Node.js의 사전적 정의를 살펴보면 JavaScript 런타임이라고 소개되어있다. *런타임이란? 런타임은 바로 프로그래밍 언어가 구동되는 환경이다. 이전에는 JavaScript는 브라우저('프론트엔드')에서만 돌아가는 언어였었는데 이제는 Node.js라는 환경, 프로그래밍 구동 환경 덕분에 브라우저뿐만 아니라 서버용으로 혹은 머신러닝과 같은 다양한 분야에서도 사용할 수 있도록 하는 환경을 말한다. 바로 이러한 Node.js의 탄생 덕분에 자바스크립트가 프론트엔드에서만 사용되는 것이 아니라 다양한 개발환경에서 사용될 수 있는 그런 역할을 톡톡히 해냈다고 생각하면 된다. 다음으로는 NPM(Node Package Manager)이다. Node.js를 설치하면 자동적으로 설치되는 툴이다. Node.js에서 ..
2021.06.16 -
[ES6] 문법 익히기
Template Literal 일반적으로 string 자료형을 조합할 때 + 연산자를 사용한다. 그러나 문자열을 더하는 과정이 많아지면 + 연산자가 많아지고 띄어쓰기 같은 작업을 하기가 번거롭다. 이때 Template Literal을 사용하면 더 쉽게 만들 수 있고 가독성이 높아진다. const hello = "안녕"; const introduct = "나는 톰이야." const age = 5; //기존 방식 const text = hello + "! " + introduce + " 그리고 " + age + "살이야." const newText = `${hello}! ${introduce} 그리고 ${age}살이야` Desturcturing(구조 분해 할당) 객체와 배열에 들어있는 값을 가져올 때 Des..
2021.02.05 -
Javascript 핵심 익히기(2)
연산자와 조건문 연산자 -연산자는 변수들(혹은 값)을 가공할 수 있도록 도와준다. -기본적으로 산술(덧셈, 뺄셈)을 돕는 기본 연산자, 값들을 비교하는 비교 연산자, 논리적인 순서를 제공하는 논리 연산자가 있다. 1. 기본 연산자 산술을 돕는 기본 연산자는 +, -, *, / 등이 있다. var num1 = 5; var num2 = 3; var char1 = "경이로운"; var char2 = "소문"; var num3 = num1 + num2; var char3 = char1 + " " + char2; var charNumMixed = char1 + num1; 2. 비교 연산자 값을 서로 비교하는 >, 25); //결과 : true console.log(name === "Tom" && age > 30)..
2021.02.02 -
Javascript 핵심 익히기(1)
Javascript는 웹 개발에 쓰이는 프로그래밍 언어이다. 초기 웹 브라우저의 시대가 열렸을 때 javascript만 작동할 수 있도록 표준이 생겼다. (웹 개발을 하기 위해서 자바스크립트는 필수적!) 변수 변수 : 데이터를 담는 공간 우리가 웹에서 보는 상품 정보, 이미지, ID 입력창 등은 전부 데이터를 바탕으로 보여지는 결과물이다. 선언과 정의 변수를 선언할 때 어떤 변수를 사용할지 정해야한다. 자바스크립트에서는 var, let, const를 사용한다. var = name; name = "Tom"; var name = "Tom"; //1. var는 같은 이름의 변수를 다시 사용할 수 있다. var num1 = 20; var num1 = "Tim"; //2. let은 한번 선언된 변수에 다시 새롭게..
2021.01.30 -
지도 위에 마커 생성하기
기존에 지도 중심으로 지정되어 있던 네이버 그린팩토리의 위도, 경도를 이용하여 마커를 생성해본다. 다음은 CSS 배경색, 투명도, 높이, 길이 설정해주고. border-radius는 원으로 만들기 위한 것! 결과물
2020.10.06 -
지도 위에 배너 만들기
지도 위 배너에 아래와 같이 나타내려고 한다. 현재 날짜 2020.10.03 이제 CSS 입히기~ 흰색 배경 박스, 글자 중간 정렬로 나타내기 #infoBox { position: absolute; top : 100px; z-index : 10000; background : white; left : 20px; padding : 15px; border : ; border-radius: 4px; text-align : center; } 현재날짜도 Bold값으로 나타내기 #intoTitle { font-size font-weight }
2020.10.03