프로그래밍 공부 노트

글

9월, 2020의 게시물 표시

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

- 9월 27, 2020

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

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

- 9월 23, 2020

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] 주소 문자열과 요청 파라미터

- 9월 21, 2020

주소 문자열과 요청 파라미터 위의 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

- 9월 21, 2020

에러의 원인은 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)

- 9월 19, 2020

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(크리에이티브 커먼즈 라이센스)

- 9월 15, 2020

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

XML 이란 무엇인가?

- 9월 15, 2020

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 변경

- 9월 12, 2020

[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

[MySQL] 설치 및 사용방법 (Homebrew 사용)

- 9월 12, 2020

MySQL 설치 및 사용방법 (Homebrew 사용) Homebrew를 이용해서 설치했다. 터미널(Terminal)에 brew search mysql 입력 여러가지 목록이 터미널(Terminal)에 뜬다. brew install mysql 을 입력하여 최신버전의 MySQL을 설치 터미널(Terminal)에 brew list 입력하여 설치가 되었는지 확인하기 설치 확인 후 MySQL 설정 시작 mysql.server start 명령어로 MySQL서버를 실행시킨다. MySQL 설정을 하기 위해서 mysql_secure_installation 명령어를 입력한다. 설정시작 (아래 순서대로 설정을 시작한다.) 1. Would you like to setup VALIDATE PASSWORD component?(비밀번호 가이드 설정에 대한 질문) yes: 복잡한 비밀번호 (ex. "q1w2e3r4"와 같은 조합형(?) 비밀번호를 설정하여야 한다.) no: 쉬운 비밀번호 (ex. "1234"처럼 쉬운 비밀번호를 설정할 수 있다.) 앞으로 사용할 비밀번호 입력 2. Remove anonymous users? (Press y|Y for Yes. any other key for No)(사용자 설정에 관한 질문) yes: 접속시 -u 옵션필요 (접속하는 경우 "mysql -uroot"처럼 -u 옵션 필요) no: 접속시 -u 옵션 불필요 (접속하는 경우 "mysql"처럼 -u 옵션 불필요) 3. Disallow root login remotely? (Press y|Y for Yes, any other key for No)(다른 IP에서 root 아이디로 원격접속을 설정) yes: 원격접속 불가능 no: 원격접속 가능 4. Remove test database and access to it? (Press y|Y for Yes, any other key for No)(테스트 데이터베이스 설정) yes:

[Node.js] Node.js 란 무엇인가?

- 9월 10, 2020

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임(실행기)이다. 그리고 비동기 방식으로 작성하고 콜백을 이용하는 방식으로 코드를 작성한다. 노드의 특징 이벤트 기반의 비동기 I/O 프레임워크 이다. 1. 이벤트 기반 2. 논블로킹 I/O 논블로킹이란 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행되게 하고 나중에 오래걸리는 함수를 실행하는것이다. 그렇다고 백그라운드로 보낸 코드들이 랜덤적으로 실행되는것은 아니며 그 안에서 또다른 규칙에 의해 실행된다. 3. 싱글스레드 싱글스레드는 한명의 직원이 여러 고객을 응대하는 방식이다. 일반적으로 한명의 직원은 한명의 고객만 응대가능하므로 나머지 고객은 기다려야하는 일이 발생한다. 멀티스레드는 여러명의 직원이 여러 고객을 나눠서 응대하는 방식이다. 하지만 노드에서는 싱글스레드를 채택했다. 대신 논블로킹 모델을 채택 하여 한명의 직원이 모든 고객의 요청사항을 받아적고 완료가되면 고객을 불러서 처리된 요청사항의 결과물을 반환한다. 정확히 말하자면 client 측에서 어떠한 이벤트가 발생하면 Event Loop(single thread)를 돌게된다. 간단한 작업의경우 이벤트에 대한 결과를 바로 반환하겠지만 복잡한 작업 예를들어 특정이벤트가 발생하면 DB에 접근해서 데이터를 가져오는것과 같은 동작을 수행할 때 이러한 작업을 Non-blocking Worker로 전달하여 비동기로 처리한다. 그리고 해당 이벤트에대한 처리가 완료되면 다시 이벤트 루프로 해당결과를 던져준다. 그러면 그때 처리된 결과를 client에게 전달한다. 그리고 Node.js의 경우 비동기 작업을 기본적으로 4개의 단위로 실행되어 처리한다. 만약 10개의 비동기 작업을 동시에 요청하면 4개 / 4개 / 2개 단위로 비동기 작업을 처리한다. 한번에 10개를 처리하는것은 아니다. 하지만 이러한 작업 처리량을 설정해서 늘려줄 수 있다. ex) UV_THREADPOOL_SIZE=8 이와 같이 작성하면 비동기작업을 8개씩 동시

[JavaScript] innerHTML, textContent, innerText 차이점 비교

- 9월 07, 2020

innerHTML 많은 사람들이 사용하고있고 나 또한 온라인 강의로 Javascript를 배울 때 모든 강의에서 innerHTML을 사용하고 있었다. 그런데 위 세가지 방법중 가장 추천하지 않는 방법이다. 체감적으로 느낄 수 있을지 모르겠지만 다른 방법들에 비해 파싱이 느리고 잠재적인 보안 위험(XXS 공격)이 발생할 수 있다는 점이다. 보안 문제 참고 https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML#security_considerations textContent innerHTML 보다 성능과 보안에 강점이 있다. innerHTML의 경우 이름 그대로 HTML을 반환한다. 상황에 따라 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다. 또한 innerHTML에서 언급되었던 잠재적인 보안 위험인 XXS공격의 위험이 없다. innerText textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져온다. 반면에 innerText는 사람이 읽을 수 있는 요소만 처리한다. textContent는 노드의 모든 요소를 반환한다. 그에 비해 innerText는 스타일링을 고려하며, 숨겨진 요소의 텍스트는 반환하지 않는다. 또한, innerText의 CSS 고려로 인해 innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야한다.) Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴한다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능하다. 그러므로 textContent를 사용하도록 하자

[JavaScript] 일급 객체, 고차함수

- 9월 06, 2020

일급 객체 자바스크립트에서 숫자, 문자, 함수는 모두 일급 객체이다. 이러한 일급 객체는 아래와 같은 특징을 가지고있다. 1. 함수의 매개변수로 전달 할 수 있다. 2. 함수의 반환 값이 될 수 있다. 3. 변수 또는 데이터 구조에 담을 수 있다. 함수가 값으로 다뤄질 수 있다. 1. 함수의 매개변수로 숫자, 문자 뿐만아니라 함수도 전달 할 수 있다. const parameterFunc = ( num , f ) => num + f () ; parameterFunc ( 20 , () => 2 ) ; // 22 2. 함수가 숫자와 문자를 반환(return)하듯 함수도 함수를 반환할 수 있다. const returnFunc = () => () => 10 ; returnFunc () // () => 10 3. 숫자를 변수에 할당하듯 함수도 변수에 할당할 수 있다. let one = 1 let two = () => 2 고차함수 고차함수는 인자로 함수를 받거나 함수를 반환(return)할 수 있는 함수를 말한다. const higher_order_function = ( parameter_function ) => { parameter_function () ; }; higher_order_function ( () => { console . log ( " 고차함수 입니다. " ) } ) ; // 고차함수 입니다. 출력 : 고차함수 입니다.

[CSS] 수직정렬(vertical-align) - inline, inline-block 요소끼리 수직 정렬(동일행 정렬)

- 9월 02, 2020

텍스트 또는 이미지를 수직으로 정렬하는 속성으로 vertical-align 속성을 사용한다. block요소에서는 사용이 불가하며 inline과 inline-block에서만 사용가능한 속성이다. 왜냐하면 vertical-align은 행 방향으로 나열된 요소들을 수직정렬하는 속성이기 때문이다. 즉 inline과 inline-block 소형제 태그끼리 수직정렬하는 속성이다. 그래서 줄바꿈을하는 <div>태그에는 사용이 불가하다. vertical-align속성의 값들은 다음과 같다. /* keyword values */ vertical-align: baseline; => 부모요소 기준 정렬 vertical-align: sub; =>아래첨자 기준 정렬 vertical-align: super; => 위첨자 기준 정렬 vertical-align: text-top; => 요소 상단을 부모 font의 상단에 맞춰 정렬 vertical-align: text-bottom; => 요소 하단을 부모 font의 상단에 맞춰 정렬 vertical-align: middle; => 부모 요소의 중앙에 맞춰 정렬 vertical-align: top; => 부모 요소의 상단에 맞춰 정렬 vertical-align: bottom; => 부모 요소의 하단에 맞춰 정렬 /* <length> values */ vertical-align: 10em; vertical-align: 4px; => 0px은 baseline과 같은 값이다. 0px을 기준으로 위 아래로 위치를 조절 /* <percentage> values */ vertical-align: 20%; => 0%는 baseline과 같은 값이다. 0을 기준으로 위 아래로 위치를 조절 /* Global values */ vertical-align: inherit; 부모 요소로부터 해당 속성의 계산값을 받아 사용 vertical-align: initial; ini