참고 영상: https://www.youtube.com/watch?v=x4q86IjJFag
[ Storage ]
로컬스토리지, 세션스토리지, 쿠키 차이점
(각 예 - 어떤 유형의 데이터를 어디에 저장하면 좋을까?)
스토리지 접근해서 값 가져오는 법
세팅하는 법
로컬스토리지, 세션스토리지, 쿠키 차이점
세 가지 모두 키(key)-값(value)를 데이터 저장소이지만, 데이터 저장 기한에서 가장 큰 차이를 보인다.
1. 로컬스토리지(Local Storage): 사용자가 지우지 않는 이상 계속 남아 있는 데이터
- ex. 자동 로그인
2. 세션스토리지(Session Storage): 탭(페이지)가 켜져 있는 동안 남아 있는 데이터
- ex. 은행 로그인 시스템, 비회원 장바구니
3. 쿠키(Cookies): 만료 기한이 있는 저장소
- ex. 광고 팝업(오늘만 보기, 7일 동안 띄우지 않기)
쿠키로 로컬스토리지와 세션스토리지 모두를 대체할 수 있지만, 쿠키 사이즈는 최대 4KB로 많은 양의 데이터는 저장이 불가하며, 매 요청마다 모든 쿠키를 불러오기 때문에 데이터가 낭비된다. 또한, 쿠키는 암호화 없이 전달되기 때문에 보안에 취약한 단점이 있다.
스토리지와 쿠키 접근 방법
1. 관리자도구에 들어가서 확인하는 방법
2. 콘솔에 찍어 보는 방법
console.log(window.localStorage);
console.log(window.sessionStorage);
console.log(document.cookie);
[ API ]
Api 주소, 엔드포인트
응답이 어떻게 왔는지 파일로 제출하기
Method는 무엇인지
Content-type은 무엇인지
대부분의 홈페이지는 개발자도구에 데이터를 암호화하거나 보기 힘들게 작성하기 때문에 원 데이터를 보기 힘들다.
('개발자도구 - Sources - 폴더 안 js' 파일을 보면 한줄로 길게 보기 힘들게 되어 있다.)
하지만 마켓컬리는 원 데이터를 있는 그대로 보여주고 있어 자주 참고하면 좋을 것 같다.
다시 본론으로 돌아와, API란 Application Programming Interface의 약자로 쉽게 말하면 응용 프로그램끼리 데이터를 주고 받기 위한 수단이다. 용도에 따라 오픈API, 비공개API가 있는데 가장 자주 볼 수 있는 오픈API는 카카오톡 간편 로그인이 있다.
API는 다양한 프로그래밍 언어에서 사용이 가능해야하기 때문에 규격을 만들었으며, 대표적으로 XML이나 json을 많이 사용한다. (자바스크립트의 경우 json을 많이 사용한다)
또한 API는 프론트와 백이 소통을 많이 하면서 서비스를 설계해야 하고, 어디서 에러가 났는지, 어떤 것이 작동이 잘 안되는지 보려면 아래의 Network를 잘 봐야 한다.
마켓컬리의 카테고리API를 예로 설명하겠다.
여기서 '왜 카테고리를 HTML이 아닌 API로 만들지?'란 의문이 있을 수 있다.
마켓컬리의 카테고리는 사용자의 편의성에 따라 자주 바뀌다보니 HTML로 수정하기에 번거로움이 있다. 따라서 백엔드에서 해당 카테고리를 저장해 놨다가 호출하고, 추후에 수정사항이 있으면 백엔드 데이터만 수정해서 그대로 프론트에 노출시키는 방법을 택한 것이라 생각된다.
Network를 클릭하면 정말 수 많은 데이터들이 떠서 내가 찾고자 하는 것이 무엇인지, 어떻게 찾아야 하는지 막막할 수 있다.
우리가 현재 원하는 데이터는 API이기 때문에 상단에 프론트와 백이 통신하는 API를 지칭하는 XHR를 선택하겠다. 그 다음 카테고리로 유추할 만한 categories를 클릭하고, 우측에 preview 탭을 선택하면 맞는 데이터임을 확인할 수 있다.
남은 질문들에 답하기 위해서 다시 Headers 탭으로 돌아오겠다.
Headers로 오면 categories에 대한 기본 정보를 볼 수 있다.
General에 있는 Request URL로 API원본으로 주소를 치고 들어가면 수 많은 객체로 이루어진 데이터를 볼 수 있다. (암호화가 되어 있기 때문에 해당 파일만 보고 어떤 내용인지 알아보기는 힘들 것이다.) 해당 주소 끝단에 있는 식별자 역할을 해주는 단어를 보통 엔드포인트라 지칭한다. 여기서는 'categoreis'가 엔드포인트이다.
그 다음으로 Method가 있는데, 메소드는 프론트 단에서 작성하는 것으로 해당 데이터의 접근 방법을 정의해 준다.
마켓컬리의 카테고리는 데이터 조회를 하는 GET 메소드를 사용했으며, 이 외에 POST(데이터 생성), PUT(데이터 수정), DELETE(데이터 삭제) 등이 있다.
[ 호환성 ]
ie 에서 브라우저버전 낮춰서 보는 법
맥-아이폰 연결해서 맥의 사파리에서 아이폰 사파리 개발자도구 탐색하는 법
ie와 사파리의 application tab과 같은것
사파리에서 반응형 보는 법
ie에서 브라우저 버전 낮춰 보는 법
1. ie 11 버전
- 개발자도구 - 애뮬레이션 탭 - 좌측 모드 - 사용자 에이전트 문자열 옆 버전 체크
- 개발자도구 - 개발자도구 탭 우측 컴퓨터/스마트폰 탭 클릭 - 버전 변경
2. 기타 버전
- 도구 - 호환성 보기
- 개발자도구 - 문서도구 or 브라우저 모드에서 확인 가능
맥-아이폰 연결해서 맥의 사파리에서 아이폰 사파리 개발자도구 탐색하는 법
(참조: https://d0gf00t.tistory.com/41)
a. 맥 - 아이폰 각각 사파리 설치 후 USB 연결
b. <아이폰> 설정 - 사파리 이동 JavaScript, 웹 속성 활성화 확인
c. <맥> 사파리 - 환경설정 - 고급 - 메뉴 막대에서 개발자용 메뉴보기 클릭
d. <맥> 사파리 - 개발자용 - '누구누구'의 아이폰 - 개발자용으로 사용 클릭
e. <아이폰> 사파리 실행 후 코드 확인 필요한 페이지 열기
ie와 사파리의 application tab과 같은 것
application tab은 Cookie, Storage, Web SQL 등의 데이터를 볼 수 있는 탭을 뜻한다.
1. ie
a. 쿠키: 개발자도구 - 네트워크 - URL선택 - 쿠키
b. 스토리지: 콘솔 내 console.log(sessionstorage) / console.log(localstorage) 입력
2. 사파리
쿠키 & 스토리지 : 개발자용 - 웹 속성보기 - 리소스 - 로컬/세션 저장공간, 쿠키 탭 확인
사파리 반응형 보는 법
1. <맥> 사파리 - 개발자용 - 응답형 디자인 모드 시작 (Ctrl + cmd + R)
2. <윈도우> 사파리 - 개발자용 - 사용자 에이전트
[ CSS ]
css부분에서 순서가 의미하는 것
user agent sheet이란
hover했을때 css적용법
css 속성값 100% 지정되어 있는 요소 들 찾기
header에 있는 로고 요소 복사해서 footer에 추가 해보기
마켓컬리 메인페이지를 예로 들겠다.
Elements의 오른쪽을 보면 Style 부분이 있다. 이는 해당 페이지의 CSS를 보여주는 것인데 좌측의 HTML 위치에 따라 우측에 나오는 CSS 위치도 달라진다. 상단에 중요도 순서대로 표시되며, 밑에는 해당 태그의 부모태그의 CSS를 보여준다.
User Agent Sheet
user agnet sheet란 브라우저마다 기본 값으로 잡혀 있는 CSS 값이다. 크롬, IE, 오페라, 사파리 등 여러 웹 브라우저에서 내가 설정하지 않아도 생겨있는 공백은 해당 브라우저에 기본 값으로 설정된 경우가 많다. 따라서 나중에 크로스 브라우징(어느 브라우저에서든 동일하게 보여지게 하는 것)으로 통일해 줘야 한다.
[ Console ]
3초에 한번씩 페이지 강제 리로드 되게 하세요
현재시간을 콘솔에 나타나게 하세요.
그리고 리프레시를 해도 콘솔이 지워지지 않고 남게 하시오
console.log err warn dir차이
콘솔에서 warn은 빼고 콘솔보는법
모든탭에서 콘솔창같이 보는법
크롬을 기준으로 콘솔 옆에 있는 설정 모양에 있는 Preserve log를 클릭하면 새로고침해도 전에 입력했던 콘솔이 없어지지 않는다.
콘솔에 시간을 나타내고, 3초에 한 번씩 강제로 새로고침 하는 코드는 아래와 같다.
// 현재 시간을 화면에 출력하기
let date = new Date();
console.log(date);
// 3초에 한번 새로고침 하기
setInterval( () => {
window.location.reload();
}, 3000);크롬 콘솔에 해당 코드를 바로 찍을 경우, 한 번만 실행하고 끝나기 때문에 반드시 VSCode나 Atom으로 실행해야 한다..
console.log, console.dir, console.warn, console.error 차이
var a = {
'콘솔': '테스트'
};
console.log(a);
console.dir(a);
console.warn('경고');
console.error('에러');
console.log는 해당 결과 값을 바로 출력해주는 것이며, console.dir는 해당 객체의 메소드가 어떤 것이 있는지 알아볼때 쓴다. 객체, 배열, 함수에서 console.log와 console.dir를 같이 쓰면 편하다.
console.warn은 보통 어떤 데이터를 불러오는데 실패 할 때 뜨는 경고창이고, console.error는 코드를 쳐보면 항상 볼 수 있는 그런 에러창이다.
근데 막상 아무것도 하지 않았는데 대량의 warn창이 뜰 경우가 있다. 나는 그저 console창에서 코딩해보고 싶은데 대량의 warn으로 결과값이 브라우저 맨 밑에 나온다.
이럴 땐 위 그림처럼 보고 싶지 않은 항목을 체크 해제해주면 제외하고 볼 수 있다.
프론트엔드 개발자라면 항상 콘솔창을 띄워서 확인해야 하는데, Element, Application, Network탭을 확인해야 하는 경우가 많을 것이다. 이럴 땐 ESC를 눌러서 하단에 콘솔창을 띄울 수 있다.
'■ 프로그래밍 > Front-end' 카테고리의 다른 글
| Git & GitHub (1) - 정의, 명령어 (0) | 2020.04.01 |
|---|---|
| 리눅스 & 터미널 기초 (0) | 2020.03.31 |
| 프론트엔드 개발 무료 공부 사이트 (해외) (0) | 2020.01.23 |
| 프론트엔드 개발 무료 공부 사이트 (국내) - 2 (0) | 2019.12.27 |
| 프론트엔드 개발 무료 공부 사이트 (국내) - 1 (0) | 2019.12.10 |
