프론트엔드 로드맵 (35) 썸네일형 리스트형 프론트엔드 로드맵 24 - 웹보안지식 : HTTPS/CORS/컨텐츠 보안 정책/OWASP 보안 취약점 HTTP(HyperText Transfer Protocol, 웹 서버와 클라이언트 컴퓨터 사이에 웹 브라우저에 문서를 불러오기 위한 통신 규약)는 정보를 텍스트로 주고 받는다. 단순 텍스트이기 때문에 네트워크에서 전송 신호를 인터셉트하는 경우 원하지 않는 데이터 유출이 발생할 수 있다. 이 취약점을 보안하기 위해 나온 프로토콜이 HTTPS다. HTTP에 S(Secure Socket)가 추가된 것이다. 기본 틀은 HTTP와 거의 동일하나 데이터 주고 받는 과정에서 '보안'요소가 추가됐다. HTTPS는 웹 서버에 접속하는 클라이언트에게 모두 다른 암호를 제공한다. 또 서버와 클라이언트가 2개의 키를 서로 암호화한다. 한 키는 공개키 저장소에 등록해 사용하고, 나머지는 개인키로 이용해 통신한다. 클라이언트는 .. 프론트엔드 로드맵 23 - Github깃허브 계정 생성 및 사용 방법 (왕초보도 따라할 수 있다!) 먼저 깃허브 계정을 만들자. https://github.com/ 위의 깃허브 사이트에 들어가서 닉네임과 이메일 입력하고 가입한다. 이제 다른 사람들과 혹은 내 개인적인 프로젝트가 입력될 저장소라는 것을 만들어 본다. (이메일 인증 등등의 과정을 거쳐야 한다) Start a project를 누른다. 저장소의 이름 Repository과 설명을 입력한 뒤 initialize this repository with a README에 쳌까지 해준 뒤 create repository 저장소 생성! 빠밤- 그러면 이렇게 저장소가 만들어진다. 내 저장소의 주소는 https://github.com/내 아이디/저장소 이름 형식으로 지어진다. 내 저장소 주소는 원격 저장소랑 클론 맨들 때마다 입력해야 하므로 따로 메모장에 복.. 프론트엔드 로드맵 22 - Git 기본 사용법 Git은 다수의 사람들(혹은 개인)이 동일한 작업을 동시에 할때 수정 범위부터 수정된 내용까지 히스토리까지 함께 복제해, 언제든 복구가 가능하도록 만든 분산 버전 관리 시스템이다. 1. 커밋 Commit 파일을 저장소에 기록하려면 커밋을 눌러줘야 한다. 커밋한 기록들은 시간순으로 정렬된다. 커밋은 이력을 남기는 중요한 작업이므로 커밋 버튼을 누를 때 메시지를 필수로 입력해야 한다 (변경된 사항을 확인하고 바로 찾아낼 수 있도록) 첫째 줄 : 헤더 코드 변경 (커밋 내의 변경 내용을 요약) 둘째 줄 : 빈 칸 셋째 줄 : 헤더 라인이 미흡해 다른 디자인으로 변경 (변경한 구체적인 이유 기재) 작업하는 폴더를 작업 트리 Work Tree라고 부르며, 저장소와 작업 트리 사이에 공간을 인덱스Index라고 한다.. 프론트엔드 로드맵 21 - 버전관리 version control systems 버전 관리 시스템(VCS - Version Control System)은 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. 그래픽 디자이너나 웹 디자이너도 버전 관리 시스템을 사용한다. 이미지나 레이아웃의 버전을 변경한 이력과 수정된 내용을 관리함으로써 파일을 이전 상태로 되돌리거나 통째로 처음으로 되돌릴 수 있고, 누가 언제 만들었는지 파악할 수도 있다. 버전 관리를 위해 디렉토리로 파일을 복사하면서 실수로 파일을 잘못 복사하거나 디렉토리를 지워버릴 수도 있다. 이런 이유로 프로그래머들은 로컬 VCS를 만들었다. VCS는 간단한 데이터베이스를 활용해 파일의 변경 정보를 관리했다. VCS 도구 중 RCS (Revision Control System)은 오늘날.. 프론트엔드 로드맵 20 - 자바스크립트의 모든 것 (호이스팅, 이벤트 핸들링, 버블링, 스코프, 프로토타입, shadow DOM, strict mode) 자바스크립트 개념 정리 변수가 선언되기도 전에 변수와 함수 실행 코드가 입력되어도 에러가 나지 않는데, 이는 코드가 호이스팅 되기 때문이다. num = 6 ; // 변수 num이 선언되지 않은 상태에서 입력값이 입력됨 var num; // 나중에 변수 선언 num; // 6 에러없이 정상 출력된다. 호이스팅(끌어올림)은 보통 선언 코드가 최상단으로 끌려 올라가지는 현상이라 이해하는데, 실제로 메모리 상에선 위치의 변화가 없다. 자바스크립트 Parser에서 내부적으로 끌어올려 처리되는 것 뿐이다. Parser는 함수가 실행되기 전 함수를 쭉 훑은 뒤 필요한 변수 값들을 모아 최상단으로 끌어올린다. 이후 이 변수 또는 함수가 등장할 때 이에 대한 선언을 실행시킨다. 호이스팅은 변수 선언문, 함수 선언문에서만.. 프론트엔드 로드맵 19 - 모듈러 자바스크립트와 ES6+ 모듈(Module)이란 ? 모듈은 컴퓨터 프로그램 중 서로 분리되어 작성되는 것을 말한다. 프로그램을 구성하고 있는 작은 부품으로 생각해도 좋다. 라이브러리 역시 모듈과 비슷한 개념이며, JQuery도 자바스크립트의 라이브러리다. 모듈화를 하면 좋은 점 - 자주 사용하는 코드를 별도 파일로 만들어서 필요할 때마다 쓴다 - 별도 파일만 수정하면 모든 애플리케이션 동작에 적용된다 > 유지 보수에 유용하다 - 필요한 때에만 로직을 불러오기 때문에 불필요한 메모리를 줄일 수 있다 호스트 환경 ? 호스트 환경이란 자바스크립트가 구동되는 환경을 말한다. 이전에는 대부분 자바스크립트는 브라우저 환경에서 구동되었으나, 이제는 서버측에서도 이용된다. 서버 측에서 실행되는 자바스크립트는 node.js다. HTML와 Jav.. 프론트엔드 로드맵 18 - 자바스크립트 Fetch API / Ajax (XHR) AJAX란 비동기 자바스크립트와 XML (Asynchronous Javascript And XML)를 말한다. 즉, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것이다. 우리는 AJAX를 통해 JSON, XML, HTML 등 다양한 포맷을 주고 받는다. AJAX의 비동기성 덕분에 전체 페이지를 리프레쉬하지 않아도 페이지의 일부분만 업데이트가 가능하다. 1. 페이지 새로고침 없이 서버에 요청 2. 서버로부터 데이터를 받고 작업 수행 ** open(method, url, [async : true]) Request(요청)에 데이터 전송 방식 (GET이냐 POST냐) 선택/ 응답을 (ASYNC true냐 false냐:동기냐 비동기냐) 선택 / 요청대상 url은 무엇이냐 등등을 입력한다. **.. 프론트엔드 로드맵 17 - 자바스크립트 DOM 조작 방법 DOM 이란? The Document Object Model, 즉 문서 객체 모델을 말한다. 이 모델은 HTML과 XML 문서가 작동하는 기본 틀이다. DOM은 프로그래밍 언어가 DOM 구조를 잘 파악하여 접근한 뒤 문서의 스타일 및 내용을 변경할 수 있도록 한다. 자바스크립트 같은 스크립팅 언어는 DOM를 수정할 수 있다. 자바스크립트는 인라인 요소를 사용하거나 웹 페이지 안에 있는 스크립트를 로딩시켜 DOM에 접근한다. document.getElementByID(아이디명) document.getElementsByTagName(태그명) document.createElement(생성될 요소명) parentNode.appendChild(생성될 자식의 요소명) element.innerHTML //특정 요소의.. 프론트엔드 로드맵 16 - 자바스크립트 구문(Syntax)와 기본 문법 자바스크립트 선언 var : 변수 선언. 추가로 동시에 값을 초기화 let : 블록 범위 (scope) 지역 변수 선언. 추가로 동시에 값을 초기화 const : 블록 범위 전용 상수 선언 **변수 : 식별자 identifier라고 불리며 문자, 밑줄_, 달러$로 시작하며, 이후엔 숫자0-9일 수 있다. 대소문자를 구분한다. **호이스팅 Hoisting : 함수에서는 함수 선언만 상단으로 끌어올려진다. 변수의 경우 끌어올려진 변수는 undefined 값 반환. 변수 사용 후 선언 및 초기화해도 undefined 반환. ECMAscript 표준 데이터는 Boolean, null, undefined, Number, String, Symbol, Object가 있다. **리터럴 : 스크립트에 부여한 고정값. 배.. 프론트엔드 로드맵 15 - CSS 반응형 디자인과 미디어쿼리 - 뷰포트(viewport) : PC 혹은 그외의 다른 환경에서 사용자가 페이지를 열었을 때 (환경에 맞춰) 너비와 높이가 끊임없이 변화하는 창을 말한다. 이용자가 뷰포트의 사이즈를 조정하면 페이지에 렌더링된 화면 배율 역시 변화한다. 뷰포트 높이와 너비를 자연스러운 사이즈로 디폴트 값을 적용하기 위해 메타 태그를 입력한다. 더보기 ex) 모바일웹사이트 크기 조절을 위해 minimum-scale, maximum-scale, initial-scale, user-scalable 속성을 사용한다. minimum-scale, minimum-scale 값은 뷰포트의 최대값과 최소값을 설정한다. 단, minimum-scale은 initial-scale보다 같거나 더 작은 값을, maximum-scale은 initi.. 이전 1 2 3 4 다음
