[JavaScript] 계산된 속성명 또는 계산된 프로퍼티 이름(Computed property names)

계산된 프로퍼티 이름은 객체의 key값을 동적으로 생성할때 사용된다. 객체 리터럴의 프로퍼티 자리의 key 값에 대괄호 [ ] 를 사용한다.  대괄호 [ ] 에 들어올 수 있는 값은 무조건 문자열이여야 한다. let prop = 'blogger' ; let obj = { [ prop ]: 123 }; console . log ( obj ); // { blogger: 123 } 위 예시에서는 변수 prop의 값이 obj 객체의 키값으로 할당되었다. 아래와 같이 사용자에게 동적으로 key값을 받아와 프로퍼티의 key값으로 사용할 수 있다. let fruit = prompt ( "어떤 과일을 선택했습니까?" ); let list = { [ fruit ]: 5 }; console . log ( bag . apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다. 아래와같이 여러방법으로 사용된다. let i = 0 ; let obj = { [ '사람' + ++ i ]: i + '번' , [ '사람' + ++ i ]: i + '번' , [ '사람' + ++ i ]: i + '번' , } console . log ( obj ); // { '사람1': '1번', '사람2': '2번', '사람3': '3번' } const items = [ "A" , "B" , "C" ]; const obj = { [ items ]: "Hello" } console . log ( obj ); // A,B,C: "Hello" console . log ( obj [ "

[JavaScript] 자바스크립트 엔진의 종류

 자바스크립트 엔진의 종류 V8 : 오픈소스로 구글에서 개발했다. C++로 작성되었으며, 구글 크롬과 Node.js에서 사용된다. 가장 유명하다. SpiderMonkey : 최초의 자바스크립트 엔진이다. 넷스케이프 네비게이터 웹 브라우저를 위해 브랜던 아이크에 의해 개발되었다. 지금은 모질라 파이어폭스에 사용된다. Rhino : 모질라 재단에서 운영한다. 오픈소스이며, 전체가 자바로 개발되었다. JavaScriptCore : 오픈소스, 니트로라는 이름으로도 알려져 있으며 애플이 사파리를 위해 개발했다. Chakra(Jscript9) : 인터넷 익스플로러용이다 Chakra(JavaScript) : 마이크로소프트 엣지용이다. Nashron : 오픈JDK의 일환으로 오픈소스이며 Oracle Java Languages and Tool Group이 개발하였다. JerryScript : 사물인터넷을 위한 경량 엔진이다.

[CSS] 사용자 지정 CSS 속성 사용하기 ( CSS에서 변수 사용하기 )

이미지
CSS에서 사용자 지정 속성이란 JavaScript에서의 변수와 같이 문서 전반적인 부분에서 재사용할 임의의 값을 담는 속성을 말한다. 사용자 지정 속성은 전용 표기법을 정의하고 함수를 사용해 사용자 지정 속성을 사용할 수 있다. 사용법을 알아보면 사용자 지정 속성은 CSS 파일에서 위와같이 속성을 작성한다. :root 의사 클래스에 선언한다. 이렇게 선언하면 어디서든지 해당 속성에 접근할 수 있다. 블럭안에와 동일하게 작성하지 않아도 되며 : (콜론) 기호의 왼쪽에는 사용할 변수명을 작성하며 : (콜론) 기호의 오른쪽에는 사용할 속성값을 작성한다. *참고로 사용자 지정 속성은 대소문자를 구분하기 때문에 --text-Color 와 --text-color 는 다른 속성으로 처리된다. 이렇게 선언된 사용자 지정 속성은 아래와 같이 사용된다. 속성 값에 var키워드와 함께 선언한 속성을 사용할 수 있다. var( 선언한 속성명); 이렇게 사용하게되면 해당 속성이 적용된 모든 색상을 한번에 동일한 색상으로 변경 할 수 있어 일일이 수정해줘야하는 번거러움이 줄어들어 유지보수에 좋다.

Sass(SCSS) 사용방법 및 문법 정리

이미지
Sass(Syntactically Awesome StyleSheets) / Scss Sass는 브라우저에서 바로 인식하지 못하므로 CSS 파일로 컴파일해서 사용해야한다. 여러 방법이 있지만 vscode extension 중 Live Sass Compiler 를 설치하면 따로 컴파일 하지 않아도 바로바로 CSS 문법에 맞게 컴파일 해주어 CSS파일을 생성해주기 때문에 편하게 Sass를 사용할 수 있다. Sass의 확장자는 .scss이다. SSass 문법 정리 1번 $ 달러 특수 기호를 사용해서 변수를 선언하고 해당 변수에 값을 입력한 다음 해당 변수를 여러곳에서 적용할 수 있다. CSS에서도 :root { } 문법을 사용하여 동일한 기능을 사용할 수 있지만 조금 더 간편하게 $ 달러 기호로 동일한 역할을 할 수 있다. 변수 $primaryBtn 을 값으로 작성하면 해당 변수에 담겨져있는 hex color 가 해당 속성의 값으로 적용된다. 위와같이 변수로 속성을 작성하고 적용하면 모든 버튼들의 색상을 변경하고 싶을때 변수에 할당된 값만 변경하면 값으로 변수가 작성된 모든곳에서 동일하게 버튼 색상이 변경된다. 2번 nesting 작성법 사용가능 선택자를 nesting(중첩) 하게 선언하여 작성할 수 있다. 일반적으로 CSS에서는 아래와 같이 작성한다. 하지만 Sass 에서는 아래와 같이 nesting(중첩) 되게 작성할 수 있다. CSS와 동일하게 header 안에 자식 태그인 button 태그에 속성이 적용된다. 위와 같이 작성하면 header 안에 모든 자식 태그들을 작성할 수 있어서 header 부분만 보고도 header 안에 작성된 모든 태그들이 해당 부분안에 작성되어 있다는것을 쉽게 파악할 수 있어서 상당히 직관적이다. 3번 Sass 에서는 가상 선택자를 & 특수 기호를 사용해서 사용할 수 있다. &:focus 등등 가상선택자를 위와 같이 선언할 수 있다. 4번 각 페이지 또는 각각의 부분에 대한 scss 파일을 각각 만들고 @import 키

[Node.js] 주소 문자열과 요청 파라미터

이미지
주소 문자열과 요청 파라미터 위의 URL을 보면  https 는 프로토콜 www.youtube.com 은 도메인이라고도 하며 hostname ?뒤에 문장으로 오는 부분을 query string(요청 파라미터)이라고 한다. 이름과 값으로 이루어져있고 각각의 요청 파라미터 사이에는 &표시로 연결된다. const url = require ( 'url' ); const urlString = 'https://search.naver.com/search.naver?sm=top_hty&fbm=0&ie=utf8&query=tomato' ; let currentUrl = url . parse ( urlString ); //url을 받아와 객체를 반환한다. protocol, path, query 정보를 볼 수 있다. console . log ( currentUrl ); 결과👇🏼 추가적으로 내가 검색했던 tomato만 분리해내는것도 가능하다.  위에 코드에 이어서 아래 코드를 작성하면 const queryString = require ( 'querystring' ); const params = queryString . parse ( currentUrl . query ); console . log ( params . query ); 결과👇🏼 tomato 를 반환한다.

Uncaught TypeError: Cannot read property 'addEventListener' of null

에러의 원인은 HTML이 모두 로드되기 이전에 JavaScript가 HTML을 참조하기 때문이다. 즉, addEventListener 함수가 참조해야할 태그가 HTML에 아직 생성되기 이전이기 때문에 null 값을 참조하여 에러가 발생하는 것이다. 해결방법은 몇가지가 있다. 해결 방법1. 닫는 태그인 </body> 태그 위에 선언 <head></head> 태그안에서 js파일을 호출하지 않고 HTML 코드가 작성된 맨 아래에 즉, <body></body> 태그에서 닫는 태그인 </body> 태그 위에 선언하는것이다. 이렇게 작성하게되면 HTML 코드가 완전히 로드된 후에 JavaScript 파일이 호출되기 때문에 해당 문제를 해결할 수 있다. 해결 방법2. window.onload = function(){} window.onload = function(){} 함수를 사용하면 웹브라우저의 모든 구성요소들의 로드가 완료되었을 때 브라우저에의해 호출되는 함수로  해당 부분에 코드를 작성하면 HTML의 모든 구성요소들의 로드가 완료된 뒤 해당 함수를 호출한다. 해결 방법3. (추천) <script></script> 태그에 defer 속성 사용하기 <head></head> 태그 내부에 script 태그를 사용하고 src 속성을 이용해서 js파일을 불러온다. 그리고 속성으로 defer 키워드도 함께 작성해준다. < script src = "index.js" defer ></ script > defer은 비동기적으로 스크립트를 불러오는 속성이다. 해결 방법2에서 window.onload와 마찬가지로 HTML의 모든 요소들의 로드가 완료되면 그 후에 해당 js파일을 실행하는것이다. 하지만 위의 해결 방법들과 다른점이 존재하는데 이 속성을 사용하면 비동기적으로 코드가 동작한다는것이다. 프로그램은 코드를 해석할때 왼쪽에서 오른쪽으로

[Express.js] Route Parameter (동적 Routing ,동적 params)

이미지
Route Parameter 일단 아래 코드에서 라우팅 경로를 보자. app . get ( ' /category/html ' , ( req , res ) => { res . send ( ` hello html~~~~~ ` ) } ) app . get ( ' /category/css ' , ( req , res ) => { res . send ( ` hello css~~~~~ ` ) } ) app . get ( ' /category/javascript ' , ( req , res ) => { res . send ( ` hello javascript~~~~~ ` ) } ) app . get ( ' /category/nodejs ' , ( req , res ) => { res . send ( ` hello nodejs~~~~~ ` ) } ) .... '/category/html'  '/category/css'  '/category/javascript' '/category/nodejs' ... 공통적인 라우팅 경로로 /category 로 작성되어있고 뒤에 카테고리별 각각의 경로가 추가적으로 작성되어있다. 만약에 category 목록이 100개라면 100개에 대한 경로를 위에서 처럼 하드 코딩으로 100개나 적어줘야한다. 이러한 하드 코딩을 없애고 카테고리 목록에 따른 라우팅 주소를 동적으로 받을 수 있게 해주는 방법이 Route Parameter 이다. 위에서 하드코딩된 라우터를 Route Paramter를 통해 변경해 보자. Route Parameter는 아래 코드에서처럼 :categoryId 와 같이 작성해 주면 된다. 원하는 명칭을 : 기호와 함께 작성한다. app . get ( ' /category/:categoryId ' , async ( req , res )

[저작권] CCL(크리에이티브 커먼즈 라이센스)

웹 개발을 하면서 인터넷에 올라와있는 이미지를 다운로드하여 사용하게 되는 경우가 종종 있다. 다운로드하여 사용할때 제일 걱정되는 부분이 저작권 부분이어서 나중에 큰 문제가 생길것같아 조금 공부해봤다. 처음 찾아보고 공부해보다보니 뭐가 뭔지, 정확히 맞는것인지 잘 모르겠지만 정리해 본다. CCL(크리에이티브 커먼즈 라이센스)란? 창작물을 원저작권자가 지정한 일정한 조건들을 충족시키면서 자유롭게 이용할 수 있다는 것을 기호로 표현한 것이다. 이용 허락 조건은 총 4가지가 존재하는데 아래와 같다.

XML 이란 무엇인가?

XML은 EXtensible Markup Language의 약자이며 HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language) 이다. 이 언어는 사람과 기계가 동시에 읽기 편한 구조로 되어 있다. 그러나 XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌다. 또한, XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있습니다. # XML 주요 특징 1. XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어이다. 2. XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 도와준다. 3. XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋다. 4. XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 한다. 5. XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어진다. 그외에도 XML태그명과 변수명이 동일해야지 된다. 자바 파싱(자바에서 XML의 데이터를 읽어온다) = DOM (데이터베이스 대체) : 수정, 추가, 삭제, 검색 = SAX : 검색 = JAXB : 자바클래스와 XML을 연결 (빅데이터, 외부 XML을 읽을 경우) # XML을 저장하는 방식 <태그>데이터 저장</태그> <태그 속성="데이터저장" /> # HTML과 다른점 1) 문법이 어렵다. 2) HTML은 화면 출력하는 목적, 문서 저장 목적 (파일형 데이터베이스) 3) 태그나 속성에서 대소문을 구분한다. 4) 속성에 값을 대입할 때 반드시 ""(큰따옴표)를 사용한다. 5) 여는태그 닫는 태그는 반드시 일치해야 한다. 6) Spring, Mybatis => XML기반이다. # 장점 1) 호환성이 좋다(스마트폰, 리눅스, 윈도우) => 운영체제에 상관없이 사용이 가능하다. # 단점 1) XML

[MySQL] DB Time Zone 변경

이미지
 [MySQL] DB Time Zone 변경 SQL Developer에 MySQL을 연동시키면서 Time Zone오류가 발생하여 연동이 되지 않았다. 에러 :  The server time zone value 'KST' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the 'serverTimezone' configuration property) to use a more specifc time zone value if you want to utilize time zone support. 찾아보니 MySQL DB작업 완료 후 DB 시간이 UTC로 표시되어 오류가 발생하는 경우가 종종있는듯 했다. 이런 경우 KST 로 표시되도록 변경해야한다.  우선 DB에 접속한다. DB 의 Time Zone 설정이 되어 있는지 아래와 같이 확인한다. Time Zone 설정이 되어 있지 않다면 아래와 같이 표시된다. mysql> select count(*) from mysql.time_zone; Time Zone 설정을 위해 리눅스 환경으로 돌아와  아래와 같이 입력한다. (입력하지 않아도 설정을 변경할 수 있었다.) $ mysql_tzinfo_to_sql /usr/share/zoneinfo | mysql -u root -p mysql 다시 DB 로 접속한다. DB Time Zone 정보를 확인해 보면 아래와 같이 출력된다. 다를수도있지만 나 같은 경우에는 Time Zone 정보가 SYSTEM 으로 표시되어 있다. mysql> SELECT @@global.time_zone, @@session.time_zone; 이제 Time_Zone 정보를 Seoul 기준으로 변경해 준다. mysql> SET GLOBAL time_zone='Asia/Seoul'; mysql> SET