https://velog.io/@emawlrdl/DDL-DML-DCL-TCL-%EC%9D%98-%EC%A0%95%EC%9D%98-%EC%99%80-Auto-Commit

Study

String 관련 메서드 reverse() 메서드는 Array 메서드이기때문에 string을 배열로 변경후 역순을 시켜줘야 한다. 사용) const str = 'testList' str.split('').reverse().join('')

스트링 값을 밸리데이션 처리할 경우

1. 스트링 값이 아닐경우
2. 트림 앞뒤 공백 trim 없애기
3. 입력할때 아예 첫 글자 공백 없애기

• URL 문법, URL 컴포넌트의 의미와 수행 행동
• 웹 클라이언트가 지원하는 상대 URL, 확장 URL(단축 URL)
• URL의 인코딩과 문자 규칙
• 공통 URL 스킴
• URN을 포함한 URL의 미래

2.1 인터넷의 리소스 탐색하기

URL은 브라우저가 필요한 정보의 리소스의 위치를 가리키며 공유할 수 있다.

URL을 사용하면 인터넷이 있는 어떤 리소스든지 가리킬 수 있다.

URL을 사용하면 일관된 방식으로 리소스를 지칭할 수 있다.

URL의 구조

URI 통합자원 식별자

• URL 리소스가 어디있는지 설명해서 리소스 식별
• URN 리소스의 이름만으로 식별

1. http는 URL의 스킴이다. 스킴은 웹 클라이언트가 리소스에 어떻게 접근하는지 알려준다.

2. 서버의 위치다. 웹 클라이언트가 리소스가 어디에 호스팅 되어있는지 알려준다.

3. 리소스의 경로다. 서버에 존재하는 로컬 리소스들 중에서 요청받은 리소스가 무엇인지 알려준다.

다른 프로토콜

mailto: 이메일 주소

ftp: 서버에 올라가 있는 파일

rtsp: 스트리밍을 제공하기 위해 비디오 서버에서의 영화 파일

2.2 URL 문법

URL은 스킴에 따라서 달라진다.

URL의 스킴의 문법은 9개 부분으로 나뉜다.

2.3.1 스킴 : 사용할 프로토콜

규칙

• 알파벳으로 시작
• URL의 첫번째와 나머지 부분은 :(콜론) 구분한다
• 스킴명은 대소문자를 가리지 않는다.

EX) 대소문자 구분하지 않는다. http://www.naver.com HTTP://WWW.NAVER.COM

2.3.2 호스트와 포트

애플리케이션이 인터넷에 있는 리소스를 찾으려면, 리소스를 호스팅하고 있는 장비와 그 장비 내에서 리소스에 접근할 수 있는 서버가 어디에 있는지 알아야 한다.

호스트 컴포넌트

접근하려고 하는 리소스를 가지고 있는 인터넷 상의 호스트 장비를 가리킨다.

EX) 같은 리소스를 가리킨다. http://www.joes-hardware.com:80/index.html -호스트명 http://161.58.228.45:80/index.html - IP주소

포트 컴포넌트

서버가 열어놓은 네트워크 포트를 가리킨다.

내부적으로 TCP 프로토콜을 사용하는 HTTP는 기본 포트로 80을 사용한다.

2.3.3 사용자 이름과 비밀번호

많은 서버가 데이터에 접근을 허용하기 전에 이름과 비밀번호를 요구한다.

2.3.4 경로

• 리소스가 어디에 있는지 알려준다.
• HTTP URL에서 경로 컴포넌트는 '/'문자를 기준으로 경로 조각으로 나뉜다.
• 각 경로조각은 자체만의 파라미터 컴포넌트를 가질 수 있다.

2.3.5 파라미터

리소스에 접근하려면 프로토콜 파라미터가 필요하다. 이름/값 쌍의 리스트로 URL 나머지 부분들로부터 ; 문자로 구분하여 URL에 기술한다. 파라미터를 통해 리소스에 접근하는데 추가 정보를 전달할 수 있다. EX) ftp://www.test.com/fruits;sale=false/index.html;

2.3.6 질의 문자열

? 문자로 구분하여 URL에 기술한다. 특정 문자들을 제외하고는 포맷에 제약사항은 없다. 대부분 & 문자로 구분하고 이름=값 쌍형식의 질의 문자열을 사용한다. EX) ftp://www.test.com/fruits-list.cgi?item=101010

2.3.7 프래그먼트

리소스의 특정 부분을 가리킬 수 있도록, URL은 리소스 내의 조각을 가리킬 수 있는 프래그먼트 컴포넌트를 제공한다.

http://www.test.com/member.html#name

• 일반적으로 HTTP 서버는 객체 일부가 아닌 전체만 다룬다.
• 클라이언트는 서버에 프래그 먼트를 전달하지 않는다.
• 브라우저가 서버로부터 전체 리소스를 받은후 해당 프래그먼트를 사용하여 클라이언트가 보고자 하는 일부를 보여준다.

2.3 단축 URL

2.3.1 상대 URL

2.3.2 URL 확장

2.4 안전하지 않은 문자

URL 문자 집합

인코딩 체계

문자 제한

2.5 스킴의 바다

2.6미래..?

2.7추가 정보

프로젝트 내에서 문제를 어떻게 해결했다. ex) 반복적인 문제, 어떤 고민 배포 방법 http 관련 프록시 프로미스 호이스팅 클로저

css

calc()-css

텍스트가 div 범위 밖으로 나가는 현상 해결하기 word-break:break-all; https://jhrun.tistory.com/209

목업테스트 데이터 만들기

1. 배열 생성, New 태그 사용(- JS는 배열을 객체로 인지하기 때문에 NEW 태그 사용이 가능함)
2. fill()메서드로 empty값에 0을 넣어준다.
3. map 메서드를 사용해서 만들고 싶은 객체의 키와 값을 넣어준다.

const mockTestData = (): TestType[] => [
  ...new Array(30).fill(0).map((value, index) => ({
    studentUid: index + 1,
    studentGradeVersion: (Math.random() * (100 - 1 + 1)).toFixed(1),
    studentGradeLevelVersion: (Math.random() * (100 - 1 + 1)).toFixed(1),
    createdAt: dayjs()
      .add(index + 1, 'days')
      .format('YYYY-MM-DD'),
    editedAt: dayjs()
      .add(index + 1, 'days')
      .format('YYYY-MM-DD'),
    contents: `${index + 1} 내용입니다.`,
    creator: `${index + 1} 등록인`,
    displayable: true,
  })),
];

eslint - 어떤 기능을 쓸지 - -ApiService -플러그인 -라이브러리 -공통 UI .env 빌드 방식 배포 방식 배포 후 최적화 테스트 도구 선택

** 오늘 스키마 관련 새롭게 정의된 회의에 참석하여서 회사 관련 스키마에 대해 듣게 되었다. 실무에서 스키마 관련 사용했던 적은 url을 통해 해당 이미지나, 파일, 각 페이지로 이동할때 각 스키마에 맞게 이동하는 input을 작업하면서 스키마라는 단어를 알게 되었다. 해당 회의를 들으면서 스키마란 무엇인지 궁금하게 되어서 간략하게 정의해봤다.

스키마란

데이터 베이스 언어 '스키마'

의미

• 데이터의 구조 또는 데이터 베이스의 설계
• 데이터 베이스를 구성하는 개체, 속성, 관계 및 데이터 값들이 갖는 제약 조건등에 관해 정의한다.
• 데이터 베이스의 구조와 제약조건에 관한 전반적인 명세를 기술한 메타데이터 집합니다.

검색하는 사람들이 검색을 하게 되었을 때 데이터베이스까지의 처리 과정, 일련의 데이터 처리 프로세스, 자료간의 전반적인 협력 관계 등을 나타낸 데이터 베이스의 구조를 뜻합니다.

https://www.hedleyonline.com/ko/blog/%EC%8A%A4%ED%82%A4%EB%A7%88%EC%97%90-%EB%8C%80%ED%95%9C-%EB%AA%A8%EB%93%A0%EA%B2%83-2022/

User-Agent란? 브라우저는 서버에 보내는 모든 요청에 사용자 에이전트 문자열이라고 부르는, 자신의 정체를 알리는 User-Agent HTTP 헤더를 보낸다.

https://developer.mozilla.org/ko/docs/Glossary/User_agent

프론트엔드 작업을 할때 어떤 브라우저인지, 하이브리드 웹 같은 경우 어떤 os에서 사용을 하는지, 분기 처리 할때 사용한다. npm 라이브러리 같은 경우 UAParser.js 을 사용하기도 한다. https://www.npmjs.com/package/ua-parser-js

이슈 부분

• 크롬 버전 확인
• 해당 이슈가 동일하게 발생하지 않는다. 특정 노트북에서 발생된다.
• input 이벤트확인
• 검색창 입력후 검색 클릭 전 다른 탭클릭후 다시 되돌아 왔을때 마지막 한 글자 지워지는 현상

https://support.google.com/chrome/thread/7444594?hl=ko

Q 두배열 객체 비교해서 중복된 값 제거

기존 원본 배열와 수정된 배열을 비교해서 수정되어진 배열 부분에서 꺼내와야 했다. 로직에서 이미 토글ON 데이터와 삭제된 데이터 리스트가 있는 와중에 전체 데이터에서 수정된 부분이 있는 경우도 데이터를 뽑아야만 했다.

A 해결과정 filter 함수를 사용하여서 콜백 함수안에 있는 true 인 데이터를 새로운 배열을 반환해 준다. 여기에서 some함수를 사용해서 배열을 비교한다. 배열에 값들이 많아서 JSON.stringify 문자열로 풀어준뒤 비교한다. 원본과 비교해서 수정된 데이터를 뽑아온 값에서 filter 함수를 사용해서 some에서 기존 토글ON 데이터와 삭제된 데이터 리스트에서 중복된 값을 뺸다. 그리고 해당 데이터에서 값을 null로 줘야 하는 값이 있었기 때문에 스프레드 연산자를 사용해서 풀어준 다음 해당 키에다가 값을 넣어주었다.

//기존 코드

const test = editedItems
  .filter(({ list: list1 }) => {
     return !beforeRegisteredBanners.some(
       ({ list: list2 }) => JSON.stringify(list2) === JSON.stringify(list1),
     );
   })
   .map(({ list }) => ({ ...list }));

 const items = editedItems
   .filter(({ item:itemUid }) => {
   // 기존 로직에서 해당 토글온 데이터, 삭제된 리스트만 뽑아져 있는 함수가 있었다.
     return ![...bannerDisplays, ...deletedBannerDisplays].some(
       ({ item: mergedListUid }) => mergedListUid === itemUid,
     );
   })
   .map((item) => ({ ...item,gender: null}));

//수정된 코드

const editBannerDisplays = registeredBanners
      .filter(({ bannerDisplay }) => {
        return !beforeRegisteredBanners.some(
          ({ bannerDisplay: originalBanner }) => JSON.stringify(originalBanner) === JSON.stringify(bannerDisplay),
        );
      })
      .filter(({ bannerDisplay }) => {
        return ![...bannerDisplays, ...deletedBannerDisplays].some(
          ({ bannerUid: mergedListbannerUid }) => mergedListbannerUid === bannerDisplay.bannerUid,
        );
      })
      .map(({ bannerDisplay }) => ({ ...bannerDisplay, gender: null }));

1.1 HTTP: 인터넷의 멀티미디어 배달부

HTTP는 전세계의 웹 서버로부터 많은 정보를 빠르고, 간편하고 정확하게 사람들의 PC에 설치된 웹브라우저로 옮겨준다.

1.2 웹 클라이언트와 서버

웹 콘텐츠는 웹 서버에 존재한다.

웹 서버는 HTTP 프로토콜로 의사소통하기 때문에 보통 HTTP 서버라고 불린다.

이들 웹 서버는 인터넷의 데이터를 저장하고, HTTP 클라이언트가 요청한 데이터를 제공한다.

HTTP 클라이언트와 HTTP 서버는 월드 와이드 웹의 기본 요소다.

1.3 리소스

웹 서버는 웹 리소스를 관리하고 제공한다.

웹 리소스는 웹 콘텐츠의 원천이다.

가장 단순한 웹 리소스는 웹 서버파일 시스템의 정적 파일이다.

• 텍스트 파일
• HTML 파일
• 마이크로소프트 파일
• 어도비 아크로뱃 파일
• JPEG 이미지
• 그 외 모든 종류의 파일을 포함한다.

리소스는 반드시 정적 파일이어야 할 필요는 없다. 리소스는 요청에 따라 콘텐츠를 생산하는 프로그램이 될 수 도 있다.

이들 동적 콘텐츠 리소스는 사용자가 누구인지, 어떤 정보를 요청했는지에 따라 다른 콘텐츠를 생성한다.

어떤 종류의 콘텐츠 소스도 리소스가 될수 있다.

Ex) 인터넷 검색엔진 , 지역 공공 도서관의 서가를 탐색하는 웹 게이트웨이

1.3.1 미디어 타입

MIME(Multipurpose Internet Mail Extension, 다목적 인터넷 메일 확장) HTTP는 웹에서 전송되는 객체 각각에 MIME타입이라는 데이터 포맷 라벨을 붙인다.

MIME은 이메일에서 워낙 잘 동작했기 때문에, HTTP에서도 멀티미디어 콘텐츠를 기술하고 라벨을 붙이기 위해 채택되었다.

웹서버는 모든 HTTP 객체 데이터에 MIME타입을 붙인다.

웹브라우저는 서버로부터 객체를 돌려받을 때, 다룰수 있는 객체인지 MIME 타입을 통해 확인한다.

Content-type: image/jpeg Content-length: 12984

MIME 타입은 사선( / )으로 구분된 주 타입과 부 타입으로 이루어진 문자열 라벨이다.

1.3.2 URI

웹 서버 리소스는 각자 이름을 갖고 있기 때문에, 클라이언트는 관심 있는 리소스를 지목할 수 있다.

서버 리소스 이름을 통합 자원 식별자(uniform resource identifier), URI로 불린다.

URI는 인터넷의 우편물 주소 같은 것으로, 정보 리소스를 고유하게 식별하고 위치를 지정할 수 있다.

** 1-http://2-www.joes-hardware.com3-/specials/saw-blade.gif**

1. HTTP 프로토콜을 사용해라
2. www.joes-hardware.com으로 이동하라
3. /specials/saw-blade.gif라고 불리우는 리소스를 가져와라

1.3.3 URL

URL: 통합 자원 지시자 (Uniform Resource Locator)

특정 서버의 리소스에 대한 구체적 위치 설명

오늘날 대부분 URI == URL

표현 형식 : 스킴(HTTP 프로토콜) + 서버의 인터넷 주소 + 웹 서버의 리소스

1.3.4 URN

URN: 유니폼 리소스 이름 (Uniform Resource Name)

리소스의 위치에 영향을 받지 않는 유일무이한 이름 역활

1.4 트랜잭션

HTTP 트랜잭션은 요청명령과 응답 결과로 구성되어 있다.

이 상호작용은 HTTP메시지를 통해 이루어진다.

1.4.1 메서드

모든 HTTP요처 메시지는 한 개의 메서드만 갖는다.

서버에서 어떤 동작이 취해져야 하는지 말해준다. (웹페이지 가져오기, 게이트웨이 프로그램 실행하기 등)

1.4.2 상태 코드

모든 HTTP 응답 메시지는 상태 코드와 함께 반환된다.

클라이언트의 요청의 성공 여부 등을 알려주는 세가지 숫자다.

1.4.3 웹페이지는 여러 객체로 이루어질 수 있다.

애플리케이션은 보통 하나의 작업을 수행하기 위해 여러 HTTP 트랜잭션을 수행한다.

‘웹 페이지’는 보통 하나의 리소스가 아닌 리소스의 모음이다.

1.5 메시지

HTTP 메시지는 단순한 줄 단위의 문자열이다.

종류: 요청 메시지(클라이언트 → 서버), 응답 메시지(서버 → 클라이언트) 시작줄

• 요청 및 응답에 대한 내용
• 임의의 이진데이터 포함 불가

헤더

• 0개 이상의 헤더 필드로 구성
• 쌍점(:)으로 구분되어 있는 하나의 이름과 하나의 값으로 구성된다.
• 헤더는 빈 줄로 끝난다
• 임의의 이진데이터 포함 불가

본문

• 어떤 종류의 데이터든 들어갈 수 있는 메시지 본문
• 요청 본문: 웹 서버로 데이터를 실어보냄, 본문이 없을수 있음
• 응답 본문: 클라이언트로 데이터 반환
• 임의의 이진 데이터 포함 가능(이미지, 비디오, 오디오, 텍스트 등)

  1.5.1 간단한 메시지의 예

content-type 헤더에 문서의 MIME 타입이 적혀있다.

1.6 TCP 커넥션

HTTP 메시지가 TCP 커넥션을 통해 한곳에서 다른 곳으로 옮겨가는지 알아보자

1.6.1 TCP/IP

TCP (Transmission Control Protocol, 전송 제어 프로토콜)

역활

• 오류 없는 데이터 전송
• 순서에 맞게 전달(언제나 보낸 순서대로 도착)
• 조각나지 않는 데이터 스트림(언제나 어떤 크기로든 전송 가능)

TCP/IP

패킷 교환 네트워크 프로토콜의 집합니다.

각 네트워크와 하드웨어의 특성을 숨기고, 어떤 종류의 컴퓨터나 네트워크든 서로 신뢰성 있는 의사소통을 하게 한다.

일단 TCP 커넥션이 맺어지면, 클라이언트와 서버 컴퓨터 간에 교환되는 메시지가 없어지거나, 손상되거나, 순서가 뒤바뀌어 수신되는 일은 결코 없다.

1.6.2 접속, IP 주소 그리고 포트번호

HTTP 메시지를 전송하려면 인터넷 프로토콜(Internet protocol, IP) 주소와 포트번호를 사용해 클라이언트와 서버 사이에 TCP/OP 커넥션을 맺어야 한다.

HTTP서버의 IP주소와 포트번호를 어떻게 알아낼 수 있을까? URL을 이용하면 된다.

http://207.200.83.29:80/index.html http://www.naver.com:80/index.html http://www.naver.com/index.html

• 기본적으로 IP 주소는 숫자로 구성되어 있으나, IP 주소의 별명과도 같은 도메인 이름, 호스트명으로 표현되어 있어도 도메인 이름 서비스(Domain Name Service, DNS)라 불리는 장치를 통해 쉽게 IP 주소로 다시 변환이 가능하다.

• 포트번호가 주소에 보이지 않는다면 기본 80라고 생각하면 된다.

• 클라이언트 - 서버 사이의 통신 순서

  1. 웹브라우저는 서버의 URL에서 호스트 명을 추출

  2. 서버의 호스트 명을 IP로 변환 및 포트번호 추출

  3. 웹 서버와 TCP 커넥션 맺음

  4. 서버에 HTTP 요청을 보냄

  5. 서버는 웹브라우저에 HTTP 응답을 돌려줌

  6. 커넥션이 닫히면 웹브라우저는 문서(응답)를 보여줌

1.7 프로토콜 버전

HTTP/1.0 - 처음으로 널리 쓰이기 시작한 HTTP 버전

HTTP/1.1 - HTTP 설계의 구조적 결함 교정, 성능 최적화, 잘못된 기능 제거에 집중한 현재의 HTTP 버전

1.8 웹의 구성 요소

프락시,프록시

HTTP 중개자

웹 보안, 애플리케이션 통합, 성능 최적화를 위한 중요한 구성요소이다.

프락시는 클라이언트와 서버 사이에 위치하여, 클라이언트의 모든 HTTP 요청을 받아 서버에 전달한다.

이 애플리케이션은 사용자를 위한 프락시로 동작하며 사용자를 대신해서 서버에 접근한다.

프락시는 주로 보안을 위해 사용된다.

프락시는 요청과 응답을 필터링 한다.

EX) 다운로드 받을때 애플리케이션 바이러스 검출, 초등학교 성인 콘텐츠 차단

캐시

많이 찾는 웹페이지를 클라이언트 가까이에 보관하는 HTTP 창고

게이트웨이

다른 애플리케이션과 연결된 특별한 웹 서버

주로 HTTP 트래픽을 다른 프로토콜로 변환하기 위해 사용된다.

터널

HTTP 통신을 전달하는 특별한 프록시

EX

암호화된 SSL 트래픽을 HTTP 커넥션으로 전송함으로써 웹 트래픽만 허용하는 사내 방화벽을 통과시키는 것

에이전트

자동화된 HTTP 요청을 만드는 준지능적 웹 클라이언트

EX

스파이더- 웹을 돌아다니며 검색엔진의 데이터베이스로 유용한 웹콘텐츠 보관소를 만든다.

웹로봇

사용법

중괄호 보간법, v-bind 표현법에서 사용할 수 있다. 파이프 (|) 기호와 함께 사용한다.

//**중괄호 보간법**//
{{number | commas}}

//**v-bind 표현법**//
<div :id ="rawId | formatId"></div>

전역 필터 정의

Vue.filter('commas', (number: string | number) => {
  const num = number.toString().split('.');
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});

필터 체이닝 필터 함수의 첫번째 전달인자는 자바스크립트의 표현식의 값이다.

{{ phoneNumber | filterA | filterB }}

git status git log git reset --hard HEAD^

머지해야 할 파일에 삭제된 파일과 새로운 파일이 xxx.ts -> xxx.d.ts 파일 이라서 xxx.d.ts에 기존 내가 작업한 코드를 추가해야 했다.

keep modified version keep base version

이라는 Alert 이 나와서 당황했다. 삭제되어야 할 파일들은 delete 관련 버튼을 눌러서 삭제하고 새로 수정된 파일들은 keep modified version을 하고 webstorm으로 와서 conflict파일로 가보면 내 로컬에 있는 기본 파일과 새로온 버전파일들이 비교해서 볼수 있다. .ts 파일과 d.ts 파일을 비교해 준다. 새롭게 넣어야 할 데이터를 넣고 커밋완료 하고 해결하였다.