[TIL] URL과 정규식

Narastro·2021년 8월 10일
0

TIL

목록 보기
14/16
post-thumbnail
post-custom-banner

Mocha vs Jest

배우기 쉽다길래-> Jest...

💰 URL

URL?

웹에서 리소스를 식별하는 식별자의 종류로서, 접근 가능한 리소스의 주소를 일관되게 표현하는 형식이다. URI 중 URN도 있으나 일관성이 없어서 잘 쓰이지 않는다.

URL 구성 체계

프로토콜

URL은 자원을 접근하는 방법인 스킴scheme으로 시작한다. 스킴보다는 프로토콜이라고 부르는게 일반적이다.

사용자 정보

사용자 아이디와 비밀번호를 사용자정보라 부르며 잘 사용하지 않는다. 호스트 앞에 온다.

호스트

호스트 주소 또는 도메인명을 말한다. 이는 사람이 직관적으로 판단할 수 있는 문자로 이루어져 있으며 데이터 전송시 클라이언트에서 DNS서버에 요청하여 IP주소를 받아서 전송한다.

포트번호

선택사항이다. 0~65535까지 할당 가능하며 0~1023이 잘 알려진 포트로 HTTP는 주로 80 HTTPS는 주로 443을 쓴다.

경로

/으로 시작하는 경로가 나온다. 루트 경로의 경우 /이다.

쿼리

웹서버에 보내는 추가 매개변수(Query 또는 Parameters)이다.
여러개면 &문자로 구분한다. 키와 값은 =문자로 구분한다. 웹서버에서 어떤 파라메터를 실제로 지원하는지는 웹서버마다 다르다.

부분 식별자

#으로 시작하는 부분 식별자(fragment identifier). URL이 지정하는 자원의 세부 부분을 지정할때 쓴다. 부분 식별자가 없어도 그 앞에 오는 URL만으로도 웹의 어떤 자원을 정확히 지정할 수 있다.

정규 표현식 문법 정리

test, match

  • Regex.test(str)
  • String.match(Regex)

문법들

/./ 		: 어떤 문자든
/[a-e]/ 	: a~e
/[^a-e]/	: a~e가 아닌 것
/a+/		: a가 1개 이상
/^[a-e]/	: a~e로 시작하는
/[a-e]$/	: a~e로 끝나는
\w		: [A-Za-z0-9_]와 같음
\W		: [^A-Za-z0-9_]
\d		: 숫자만
\D		: 숫자 아닌 것만
\s		: 모든 공백 찾기
\S		: 공백 아닌 것만
Oh{3,}		: 최소 3개 이상
Oh{3}		: 3개
Oh{3,5}		: 3개~5개
colou?r		: u는 있어도 되고 없어도 되고
colou*r		: u는 없어도 되고 1개이상 있어도 되고
/[a].+?[/]/	: a와 / 사이 중 좁은 범위

모듈 의존성 관리 방법

전통적인 방식의 문제점

<html>
    <head>
    <body>
    ...
        <script src="./foo.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

코드가 복잡해질수록 관리가 복잡하다.

모듈 시스템들

  • Node.js 에서 사용하는 모듈 시스템인 CommonJS
var $ = require('jquery');
var _ = require('lodash');

function privateFn() {};
function publicFn() {};

module.exports = {
  publicFn: publicFn
};
  • 브라우저 환경에 적합한 모듈 시스템인 AMD,
define(['jquery', 'lodash'], function($, _) {
  function privateFn() {};
  function publicFn() {};

  return {
    publicFn: publicFn
  };
});
  • ES6에서 표준 모듈 시스템이 된 ES6 Module,
// lib.js
export function sayHello() {
  console.log('Hello');
}

// index.js
import { sayHello } from './lib';

sayHello(); // Hello
  • 다양한 모듈 방식을 지원하는 코드 패턴인 UMD,
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery', 'lodash'], factory);
  } else if (typeof exports === 'object') {
    // Node, CommonJS-like
    module.exports = factory(require('jquery'), require('lodash'));
  } else {
    // Browser globals (root is window)
    root.myModule = factory(root.jQuery, root._);
  }
}(this, function ($, _) {
  function privateFn() {};
  function publicFn() {};

  return {
    publicFn: publicFn
  }
}));

출처 : http://tlog.tammolo.com/blog/JS-NPM-ca507e45-6a79-48d9-ae6b-108ed5e5163a/

npm (Nodejs Package Manager)

의존성 관리 도구로서 자바스크립트 패키지 저장소이다. 누구든 자신의 패키지를 공개할 수 있고 다른 사람이 공개한 패키지를 설치하여 사용할 수 있다.
package.json으로 각종 정보를 관리한다.

내가 쓴 방법들

  • ES6 Module
주로 이 방법을 사용하였다. 꽤 직관적이고 가독성도 좋다. nodejs 기본세팅이 CommonJS으로 설정되어 있어 타입을 매번 바꿔줘야하는 번거로움이 있으며, 때로는 지원하지 않는 경우가 있어 Babel을 이용해야 했다.
  • CommonJS
때때로 이 방법으로 작성하였다. 바벨을 설치하기 귀찮을 때 주로 그냥 사용하였는데, const가 너무 많아 주관적으로는 별로라고 느껴진다.

URL 인코딩

필요한 이유

URL 인코딩을 통해 URL 문자열에 있는 텍스트를 보편적으로 허용되는 형식으로 안전하게 전송하기 위해 필요하다. ASCII 문자열이 아닌 경우 다양한 특수문자들이 잘리거나 변형될 수 있는데 이런 경우 인코딩이 되어 전송되는 것이 필요하다. 즉 모든 브라우저에서 제대로 전송하기 위해 필요한 것이다. 특히 한글과 같이 안전하지 않은 ASCII문자를 %뒤에 16진수를 붙임으로써 안전하게 전송한다. 또한 공백을 포함하면 안되기 때문에 %20 또는 +로 표기한다.

  • 자바스크립트에서는 encodeURLComponent()함수가 있다.

자바스크립트 URL 관련

  • new URL, new URLSearchParams 등 다양한 관련 모듈이 있으니 활용하면 좋겠다.

정규표현식을 활용하는 사례들

  • 문자열을 파싱할 때
  • HTML 등 문서를 파싱할 때
  • 이메일 형식 체크할 때
    `regex = /[0-9a-zA-Z][_0-9a-zA-Z-]*@[_0-9a-zA-Z-]+([.][_0-9a-zA-Z-]+){1,2}$/
  • 파일 확장자 확인
profile
Earn this, Earn it.
post-custom-banner

0개의 댓글