'~2022/FE-개발 개념' 카테고리의 글 목록 (13 Page)

CND이란?

나는 jQuery나 js라이브러리, GoogleFont 등 위주로 많이 들어봤는데, 뭐 남의 서버에 있는거 가져다가 사용하는거 정도로 알고 있었다.

네이버 백과님께 물어봤더니 아래와 같이 답해주시더라.

게임 클라이언트나 콘텐츠를 효율적으로 전달하기 위해 분산된 서버에 데이터를 저장해 사용자에게 전달하는 시스템

즉, 남의 서버에 저장된 콘텐츠를 빌려다가 사용한다는 거다.

근데, 솔직히 말하면 작업할 때, CDN 잘 안쓴다.

왜?

읽어봅시당 >> https://xetown.com/tips/793706

제발 해외 CDN 좀 사용하지 맙시다.

국내 통신 3사 중 최소 한두 군데는 저녁때마다 해외 접속이 느려지곤 합니다. 요즘은 대부분의 해외 사이트가 https인데, 이러면 훨씬 더 느려집니다. 암호화를 위한 패킷이 몇 번 더 오가야 하니 접속이 느린 것이 좀더 티가 나는 것은 물론이고, 80 포트가 아니면 QoS를 더 심하게 거는 것 같거든요. 그런데 최근 나오는 레이아웃, 스킨, 위젯스킨 등을 보면 해외 CDN으로 떡칠해 놓은 것들을 많이 봅니다. CDNJS, jsDelivr, Boo...

xetown.com

그렇습니다.

남의 서버를 쓰다보니 서버가 뻑이나면 답이 없습니다.ㅎㅎㅎㅎㅎ

위의 트래픽 폭주에도 안정적인 CDN서비스 라고 적혀있는 것만 봐도, 트래픽이 폭주하면 = 불안정 이라는 거죠..

회사 클라이언트들은 그런거 싫어합니다.

서버가 뻑이나면 서버엔지니어에게 화내고 싶어하지.. CDN 서버에 화를 낼 수 없어요 (GoogleFont ?)

여튼 고려해서 적당----히 씁시다.

책임은 본인들이! 헤헷 (3년 동안 일하면서 단 한차례도 회사에서 cdn 쓴 적이 없지만^^..)

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

브라우저 쿠키(Cookie), 세션스토리지(Session Storage), 로컬스토리지(Local Storage) (0)	2019.06.05
세션 스토리지(Session Storage) (0)	2019.06.05
로컬 스토리지(Local Storage) (0)	2019.06.05
쿠키(Cookie) (0)	2019.06.05
MVC 패턴 (0)	2019.05.16
CSS를 이용해 객체 가운데 위치하기! (0)	2018.10.29
구글 API KEY생성하는 법 (0)	2018.10.26
void 0 이란? (0)	2018.10.23

디자인 패턴은 개발 도중 발생한 문제에 대해 정리하여 각 상황에 맞게 쉽고 간편하게 적용해서 사용할 수 있도록 돕기위한 패턴으로, 수단 중에 하나입니다.

MVC 패턴 (Model View Controller)

구성요소를 세가지 역할로 구분한 패턴입니다.

페이지, 데이터 처리, 컨트롤 영역의 3가지 파트를 나누어 담당하게 되면 유지보수성, 확장성, 유연성이 증가합니다.

또한 각 역할의 파트가 정해져있기 때문에 중복코딩이 줄어드므로 효율적입니다.

조작은 Controller로 하며 Model을 통해 데이터를 가져옵니다.

그리고 이것을 바탕으로 View를 제어하여 시각적인 것을 사용자에게 노출합니다.

Model

애플리케이션의 정보들을 나타내며 이러한 데이터들의 가공을 책임지는 컴포넌트입니다.

즉, 내부 비즈니스 로직을 처리하기 위한 역할을 합니다.

View나 Controller에 종속적이면 안됩니다. 즉 Model이 View나 Controller로부터 데이터를 참조해서 데이터를 가공하면 안된다는 것을 의미하며 Model은 재사용이 가능해야합니다.

View

데이터, 객체 입력, 출력을 담당하며 사용자들이 볼 수 있는 화면인 요소(사용자 인터페이스, UI)입니다.

View는 여러개가 존재할 수 있습니다.

Model이 보낸 데이터를 그리기만 해야하며 View에서 따로 저장하면 안됩니다.

즉 해당 데이터 만을 제외하고는 다른 요소를 참조하면 안됩니다.

Controller

데이터 Model과 사용자 인터페이스 View를 연결하는 다리 역할입니다.

화면의 로직을 처리하기 위한 역할을 합니다. (사용자가 데이터를 클릭하거나 수정하거나 등의 이벤트를 담당하는 부분)

사용자의 요청을 받아 처리되는 부분이라서 요청을 분석, Model과 View에 업데이트를 요청합니다.

따라서 Model과 View의 존재를 알고 있어야합니다. (Model과 View 두개가 직접적으로 의존하는 것을 막는 역할)

한계

Controller하나에 다수의 Model, View가 존재하는 경우가 생길 수 있는데,

이것을 Massive View Controller (대규모 MVC 어플리케이션) 이라고 하며 테스트나 분석이 어렵습니다.

MVC 한계 출처: https://medium.com/@jang.wangsu/%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4-mvc-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80-1d74fac6e256

복잡해질 수록 Controller 분리가 어려워서 생기는 문제입니다.

Controller는 프로그램 실행 시 로직이 병렬적으로 분기된다면 하나일 필요가 없으며 여러개를 둬도 상관이 없고 더 깔끔한 설계가 될 수 있습니다.

참조해서 읽어 볼 글

velog.io/@ljinsk3/MVC-%ED%8C%A8%ED%84%B4

https://medium.com/@jang.wangsu/%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4-mvc-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80-1d74fac6e256

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

세션 스토리지(Session Storage) (0)	2019.06.05
로컬 스토리지(Local Storage) (0)	2019.06.05
쿠키(Cookie) (0)	2019.06.05
CND이란? (0)	2019.05.16
CSS를 이용해 객체 가운데 위치하기! (0)	2018.10.29
구글 API KEY생성하는 법 (0)	2018.10.26
void 0 이란? (0)	2018.10.23
let 키워드, const 키워드 (0)	2018.10.23

CSS를 이용해 객체 가운데 위치하기!

객체를 가운데에 두는 방법에는 여러 개가 있다.

calc를 기억해두려는 목적으로 글을 쓰기 시작했는데, 내가 작업하면서 써봤던 방법을 작성해두려고 한다. (flex-box는 논외)

조건은 부모 객체의 가운데에 위치시키기다.

HTML

<div class="wrapper">
  <div class="popup">   
  </div>
</div>

CSS

.wrapper{
  position:relative;
  width:400px;
  height:400px;
  background-color:#cacaca;
}
.popup{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-75px;
  margin-left:-75px;
  width:150px;
  height:150px;
  background-color:pink;
}

이런 식으로 영역의 50%를 top, left 내리고 그 객체 사이즈의 반 값을 빼주는 형식으로 작업했다.

(객체 시작 위치를 기준으로 50% 이동하기 때문에 객체의 값을 빼줘야 가운데 위치한다.)

위와 비슷하게 calc를 쓸 수 있다.

CSS

.wrapper{
  position:relative;
  width:400px;
  height:400px;
  background-color:#cacaca;
}
.popup{
  position:absolute;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  width:150px;
  height:150px;
  background-color:pink;
}

top: calc(50% - 75px);

left calc(50% - 75px);

(75px은 객체의 반 값)

[예제]

See the Pen study-alignment css3 by leeyoonseo (@okayoon) on CodePen.

MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/calc

can i use : https://caniuse.com/#search=calc

IE9~ 지원하는데, 부분 지원이라고 나온다.

물론 값이 변수일 경우에는 js로 비슷하게 작업했다.

HTML

<div class="wrapper">
  <div class="popup">   
  </div>
</div>

CSS

.wrapper{
  position:relative;
  width:400px;
  height:400px;
  background-color:#cacaca;
}
.popup{
  position:absolute;
  top:50%;
  left:50%;
  width:150px;
  height:150px;
  background-color:pink;
}

JS

const popup = document.getElementsByClassName('popup')[0];
const _width = popup.offsetWidth;
const _height = popup.offsetHeight;
popup.style.marginTop = -(_width/2)+'px';
popup.style.marginLeft = -(_height/2)+'px';

가운데에 위치하기 위한 margin 값 들을 변수로 받아서 계산한 후에 적용시켜준다.

이렇게 하면 width, height 값이 변하더라도 깨지지 않는다.

[예제]

See the Pen study-alignment js by leeyoonseo (@okayoon) on CodePen.

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

로컬 스토리지(Local Storage) (0)	2019.06.05
쿠키(Cookie) (0)	2019.06.05
CND이란? (0)	2019.05.16
MVC 패턴 (0)	2019.05.16
구글 API KEY생성하는 법 (0)	2018.10.26
void 0 이란? (0)	2018.10.23
let 키워드, const 키워드 (0)	2018.10.23
ES6 매개변수 기본 정의 (0)	2018.10.16

구글 API KEY생성하는 법

*google api 사용은 하루에 2,500건, 초당 10건의 요청에 한해서만 무료라고 합니다.

그 이상 사용하려면 유료로 전환해야 한다고 합니다.

1. 구글 로그인을 합니다.

2.Google API 콘솔 이동

3.프로젝트 등록 ( 프로젝트 만들기 > 만들기 )

최초로 들어오면 프로젝트가 없습니다.

프로젝트가 있을 경우 Google APIs 옆 프로젝트 선택에서 프로젝트 선택하면 됩니다.

프로젝트 이름을 변경하면 아래 프로젝트ID값이 변경이 됩니다.

수정 버튼을 눌러 ID값을 수정할 수 있는 것 같지만 어떠한 규칙에 의해 변경하는 것 같습니다. 저는 하지 않았습니다.

만들기 클릭

4.API 및 서비스 사용 설정

방금 만든 프로젝트 (My project01) 선택된 모습이 보입니다.

API 및 서비스 사용 설정 클릭

이런 API 선택 창이 뜨는데, 왼쪽 사이드 바에서 사용하려는 API를 선택합니다.

저는 Maps를 사용하기 위해 클릭했습니다.

만약 옆에서 찾는 것이 어렵다면.

검색 창에서 내가 사용하려는 API를 검색하면 됩니다.

저는 Maps를 사용하기 위해 Javascript maps를 검색하였습니다.

검색 결과에 나온 API 타일을 클릭해줍니다.

이동한 Maps 페이지에서 사용 설정 클릭하여 Maps Javascript API 설정 페이지로 이동합니다.

Maps 설정 페이지 인지 확인 한 번하고..

사용자 인증 정보를 클릭합니다.

API KEY를 받기 위해, 사용자 인증 정보 인증키 클릭하면 선택 항목이 보입니다.

여기서 API 키를 선택해 줍니다.

API키 생성 완료!

간단하죠?

API 키가 보입니다.

사용자 인증 정보 페이지에 가면 API키가 만들어 진 것이 확인 가능하고 옵션 수정도 가능합니다.

여기서 노란 경고창이 뜬 이유는 애플리케이션 제한 사항을 설정하라는 부분입니다.

무시하고 사용해도 되지만 제한사항 설정을 할 경우 내가 설정한 곳 이외에서 내 인증키를 사용하지 못합니다.

5. 리퍼러 설정

API 설정에서 애플리케이션 제한 사항을 선택해줍니다.

웹에서 사용할 것이기 때문에 HTTP 리퍼러(웹사이트)를 체크하면 도메인 입력칸이 나오는데

내가 key를 사용하는 곳의 도메인 주소를 입력해줍니다.

*리퍼러를 설정 할 경우 다른 애플리케이션에서 이 키를 사용할 수 없게 합니다.

끄읕~~

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

쿠키(Cookie) (0)	2019.06.05
CND이란? (0)	2019.05.16
MVC 패턴 (0)	2019.05.16
CSS를 이용해 객체 가운데 위치하기! (0)	2018.10.29
void 0 이란? (0)	2018.10.23
let 키워드, const 키워드 (0)	2018.10.23
ES6 매개변수 기본 정의 (0)	2018.10.16
javascript .map() 메서드를 알아보자 (0)	2018.09.17

Peep