FRONT-END/JAVASCRIPT31

• 

  (JAVASCRIPT) 타입 Typeof Javascript의 타입에 대해 알아보고 typeof를 통해 어떤식으로 타입이 결정되는지 알아보도록 하겠습니다. Type 자바스크립트는 동적으로 실행할 때 할당된 값에 따라 타입이 변경되는 동적(Dynamically Typed)인 타입입니다. 또, 변수에 어떤 값이 들어가냐에 따라 변하는 약한 타입(Weakly Typed)입니다. JAVASCRIPT - 동적인 타입(Dynamically Typed) - 약한 타입(Weakly Typed) typeof typeof를 통해 타입을 확인할 수 도 있습니다. let someVariable console.log(typeof someVariable); //undefined someVariable = ""; console.log(typeof someVariable).. FRONT-END/JAVASCRIPT 2022. 8. 11.

• 

  (JAVASCRIPT) 상수와 변수 Const - SNAKE_CASE 재할당이 불가능한 상수와 변수 const에 대해 알아보도록 하겠습니다. 상수와 변수 const const는 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 재할당이 가능한 let과 재할당이 불가능한 const의 차이를 아래에서 확인할 수 있습니다. // let 재할당 가능한 let name = "서근"; console.log(name); name = "미진"; console.log(name); // const 재할당이 불가능한 // 1. 상수 // 2. 상수변수 혹은 변수 const seogun = "서근"; console.log('seogun:', seogun); seogun = "미진"; // console.log(seogun); //TypeErro.. FRONT-END/JAVASCRIPT 2022. 8. 11.

• 

  (JAVASCRIPT) 원시 타입과 객체 타입 차이 정리 데이터 타입 객체는 Object라고 불립니다. 이번에는 데이터 타입인 단일 데이터와 복합 데이터의 차이에 대해 알아보도록 하겠습니다. 단일 데이터 원시 타입 단일한 값을 하나씩 담을 수 있는 단일 데이터인 원시(primitive) 타입. 단일 데이터는 원시 타입인 숫자 타입, 문자열 타입, 불리언 타입, null 타입, undefined 타입, symbol 타입이 있습니다. let Alphabet = ['A', 'B', 'C']; 단일 데이터인 원시 타입이 메모리에 어떻게 보관이 되냐 하면, 변수에 값을 할당하게 되면 메모리 셀에 값이 들어가게 되고, 변수는 값이 들어있는 메모리셀의 주소를 가리키게 됩니다. 복합 데이터 객체 타입 연관된 데이터를 함께 묶어서 보관할 수 있는 복합 데이터인 객체(objec.. FRONT-END/JAVASCRIPT 2022. 8. 9.

• 

  (JAVASCRIPT) 단일 데이터 타입 - null과 undefined 타입 빈 데이터 타입 데이터 타입에는 빈 데이터 타입이 있는데 바로 null과 undefiend 타입 입니다. 오늘은 이 빈 데이터 타입에 대해 알아보도록 하겠습니다. null / undefined 비교 undefined: 값이 있는지 없는지 확정이 되지 않은 상태 value: 값이 있는 상태 null: 값이 확실히 없는 상태 예를 들어 다음과 같은 값이 들어 있지 않은 코드가 있을 때를 가정해서 콘솔 로그를 찍어보면 undefined가 출력되는 것을 확인할 수 있습니다. 값이 아직 있는지 없는지 모르기 때문이죠. let someIdCard console.log(someIdCard) //undefined 반대로 null을 넣어주면 값은 undefined를 출력하는 것이 아닌 null을 출력하게 됩니다. let.. FRONT-END/JAVASCRIPT 2022. 8. 9.

• 

  (JAVASCRIPT) 단일 데이터 타입 - 불리언 타입 (Boolean) 데이터 타입 중에 하나인 불리언 타입에 대해 알아보도록 하겠습니다. 불리언 타입 불리언(Boolean)은 참/거짓을 의미하는 true와 false 두 개의 값을 가지고 있는 데이터 타입입니다. 숫자 0은 false로 변환되고 0 이외의 모든 숫자는 true로 변환 됩니다. 문자열은 False 이다! 불리언 값을 변수의 값으로 할당하여 사용할 때 큰따옴표 및 작은 따옴표 안에 값을 넣지 않도록 주의해야 합니다. let isTrue = true; let isFalse = false; console.log('isTrue is', isTrue); console.log('isFalse is', isFalse); /* isTrue is true isFalse is false */ Truthy & Falsy 불리언에.. FRONT-END/JAVASCRIPT 2022. 8. 9.

• 

  (JAVASCRIPT) 단일 데이터 타입 - 문자열 타입 (String) 데이터 타입 중에 하나인 문자열 타입에 대해 알아보도록 하겠습니다. 문자열 타입 Javascript 에서 문자열을 사용하는 방법은 여러 가지가 있습니다. "" 큰따옴표 '' 작은따옴표 `` back-quote let string = '서근 개발 노트'; let string2 = "서근 개발 노트" string = `서근 개발 노트 입니다.` console.log(string); console.log(string2); /* 서근 개발 노트 입니다. 서근 개발 노트 */ 특수문자 출력 문자열 안에 작은 또는 큰따옴표를 사용하고 싶다면 밖에 오는 기호를 반전시켜주면 됩니다. let name = '"서근 입니다."' console.log(name) name = "'미진 입니다.'" console.log(name.. FRONT-END/JAVASCRIPT 2022. 8. 9.

• 

  (JAVASCRIPT) 단일 데이터 타입 - 숫자 타입 Data Type에는 여러가지 타입들이 존재하는데 오늘은 단일 데이터 원시(primitive) 타입중 하나인 number 타입에 대해 알아보도록 하겠습니다. 숫자 타입 숫자 타입에는 정수, 음수, 실수 그리고 2진수, 8진수, 16진수 등을 모두 담아줄 수 있습니다. let integer = 12345; //정수 let negative = -12345; //음수 let double = 12.345; //실수 console.log('integer:', integer); console.log('negative:', negative); console.log('double:', double); console.log('/*===============*/') let binary = 0b11000000111001;/.. FRONT-END/JAVASCRIPT 2022. 8. 3.

• 

  (JAVASCRIPT) 변수 이름을 효과적으로 짓는 방법 자바스크립트에서 변수의 이름을 짓는것은 쉬워 보이지만, 아주 중요한 부분중에 하나입니다. 오늘은 변수의 이름을 어떻게 효과적으로 짓는지에 대해 알아보도록 하겠습니다. 변수 이름 짓는 방법 만약 let a = '서근'; 과 같이 변수 이름을 아무 의미 없이 a 로 지어주게 되면, 나중에 찾기도 힘들고 연관성이 전혀 없기 때문에 변수 이름에는 최악인 변수명이라고 볼 수 있습니다. Naming Variables란 저장된 값을 잘 나타낼 수 있는 이름이라는 의미를 지니고 있습니다. 즉, 이름이 구체적이고 연관성이 있으면 좋겠죠. mdn web docs_ 라는 사이트에 변수와 변수 이름 짓는 방법에 대해 아주 잘 설명되어있는데, 이 사이트를 참고하여 작성되었습니다. 사용하면 안 되는 변수 이름 ( 예약어 ) 변수.. FRONT-END/JAVASCRIPT 2022. 8. 3.

• 

  (JAVASCRIPT) ESMAScript란? ES6 / ES7 ESMAscript JavaScript는 1995년 넷스케이프(Netscape) 웹페이지에 동적인 요소를 구현하기 위해서 발명되었습니다. 그 후 넷스 케이브뿐만 아니라 다른 웹 브라우저들까지 이를 탑재하기 시작했고, 다양한 웹 브라우저들에서 JavaScript가 공통되게 잘 작동되기 위해서는 표준 규격이 필요성이 커지게 되었습니다. 때문에 ECMA 국제기구에서는 'ECMAScript standard'라는 스크립트 표준을 만들었습니다. ECMAScript는 ECMA 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어입니다. ES6는 ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙을 하고, ES의 6번째 버전이 .. FRONT-END/JAVASCRIPT 2022. 8. 2.

• 

  JAVASCRIPT 관련 모음 기초 문법 - ESMAScript란? ES6 / ES7 - 변수 이름을 효과적으로 짓는 방법 - 단일 데이터 타입 - 숫자 타입 - 단일 데이터 타입 - 문자열 타입 (String) - 단일 데이터 타입 - 불리언 타입 (Boolean) - 단일 데이터 타입 - null과 undefined 타입 JAVASCRIPT 용어 [인터프리터, interpreter] - 프로그램을 한 줄 단위로 받아들여 번역하고, 런타임시 번역과 동시에 프로그램을 한 줄 단위로 필요 할 때 마다 즉시 실행. (실행 속도 느림) [컴파일러, Compiler] - 코드를 컴퓨터에 번역해주는 번역가. 코드를 실행하기전 모든 코드를 번역한다. (실행 속도 빠름) FRONT-END/JAVASCRIPT 2022. 8. 2.

• 

  (Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 본 게시글은 Ukjin Yang님의 코드를 가져와 기능을 추가한 게시글입니다. 개발자 도구 콘솔 창 차단 오늘은 브라우저의 개발자 도구 콘솔 창을 차단하는 방법에 대해 알아보고 티스토리에 적용하는 방법에 대해 다뤄볼까 합니다. 개발자 도구를 차단하는 이유는 보통 보안 또는 HTML 및 CSS를 숨기고자 하는 이유가 대부분이겠지만 사실은 콘솔 창을 막는 방법은 정상적인 방법이 아닙니다. 그래서 이 기능을 사용하더라도 어떻게는 뚫리기 마련이므로 간단히 사용하는 정도로만 알아두시면 좋을 것 같습니다. 콘솔 창 차단 코드 삽입 위치 Stack Overflow등에도 많은 콘솔 창 차단 코드가 존재하지만, 브라우저가 업데이트되면서 대부분의 코드가 막혀있는 상태입니다. 그렇게 구글링을 한 결과 감사하게도 Ukjin .. FRONT-END/JAVASCRIPT 2022. 7. 3.

• 

  (티스토리) 태그 쉼표 제거 하는 방법 - Javascript 티스토리 스킨을 꾸미다 보면 태그 부분 뒤에 쉼표( , )가 나타나는 경우가 있는데, 오늘은 이 태그 쉼표를 제거하는 방법에 대해 알아보겠습니다. (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 태그 쉼표 제거 방법 태그 클래스 찾기 방법은 아주 간단합니다. 우선, 티스토리 스킨 편집 HTML 부분에서 찾기로 태그 클래스를 찾아줘야 합니다. 보통은 티스토리 태그 치환자인 를 찾아주신뒤, 해당 부분의 클래스가 있다면 그 클래스를 복사하시고, 클래스가 없다면 클래스명을 추가해주시면 됩니다. 제 스킨의 경우.. FRONT-END/JAVASCRIPT 2022. 7. 2.

• 

  (Javascript) HTML SVG파일에 원하는 색상 적용하는 방법 HTML SVG파일 색상 변경 코드 Html에서 Img 태그에 SVG파일을 업로드하고 난 후, 색상을 변경하고 싶을 때가 있는데, 그때 CSS Filter 효과를 통해 원하는 색상을 입혀줄 수 있습니다. 먼저, 원하는 HEX 코드가 필요합니다. HEX 코드는 다양한 경로를 통해 알 수 있는데 아래 사이트에서 Color Picker를 통해 알아내거나, 원하는 이미지를 업로드해서 HEX코드를 따올 수 있습니다. 👍 Color Picker online | HEX Color Picker | HTML Color Picker Color Picker:Color Picker: With this online tool you can upload an image or provide a website URL and get t.. FRONT-END/JAVASCRIPT 2022. 6. 30.

• 

  (티스토리) 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 (플로팅버튼) 저번에 플로팅 버튼 생성하는 방법에 대해 알아보았는데, 이번에는 버튼 클릭 한 번으로 내가 원하는 위치로 이동하는 방법에 대해 알아볼까 합니다. 정말 간단해서 포스팅해야 될지 고민도 했지만, 모르시는 분들을 위해서 작성하니 참고 부탁드립니다 :) 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 플로팅 버튼을 저번에 만들었으니 그것을 응용해볼까 합니다. 만약, 플로팅.. FRONT-END/JAVASCRIPT 2022. 3. 25.

• 

  클릭가능한 요소에 따라 변하는 커서 만드는 방법 (mix-blend-mode) 이번에는 제 블로그에도 적용되어있는 기능인데, 클릭 가능한 요소에 마우스를 올리면 커서가 작아졌다가 커지면서 대비 효과를 가지는 커서를 적용하는 방법에 대해 알아보려고 합니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 따라 하기 쉬우니 본문을 꼼꼼히 읽어주셔서 진행해주세요. 커서 변경 방법 프리뷰 진행하기 앞서 어떤 식으로 보이는지 미리보기를 통해 확인해보겠습니다. 클릭이 가능하지 않은 요소 에서 가능한 요소.. FRONT-END/JAVASCRIPT 2022. 3. 21.