본문 바로가기

분류 전체보기

 (84)
프론트엔드 로드맵 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가 있다. **리터럴 : 스크립트에 부여한 고정값. 배..
자바스크립트 URL에 불러오기 (원하는 파라미터값 가져오기) 현재 보여지는 페이지에 대한 정보를 가져올 때, location을 이용하면 간단하다. location.href (URL 전체 - 현재 페이지 href반환) location.hostname (웹 호스트의 도메인 명을 반환한다 ex. www.naver.com ) location.protocol (웹프로토콜 - http:// 혹은 https:// 를 반환) location.pathname (파일 또는 페이지의 경로를 나타낸다 /exemple/index.php) location.search (URL 끝 물음표 다음에 오는 파라미터 값 반환 ?displayChk=1) 파라미터 값만 뽑아오는 함수도 있는데, 꽤 유용해서 저장해두고 사용하면 좋을 듯 싶다. 더보기 function getParameterByName(n..
프론트엔드 로드맵 15 - CSS 반응형 디자인과 미디어쿼리 - 뷰포트(viewport) : PC 혹은 그외의 다른 환경에서 사용자가 페이지를 열었을 때 (환경에 맞춰) 너비와 높이가 끊임없이 변화하는 창을 말한다. 이용자가 뷰포트의 사이즈를 조정하면 페이지에 렌더링된 화면 배율 역시 변화한다. 뷰포트 높이와 너비를 자연스러운 사이즈로 디폴트 값을 적용하기 위해 메타 태그를 입력한다. 더보기 ex) 모바일웹사이트 크기 조절을 위해 minimum-scale, maximum-scale, initial-scale, user-scalable 속성을 사용한다. minimum-scale, minimum-scale 값은 뷰포트의 최대값과 최소값을 설정한다. 단, minimum-scale은 initial-scale보다 같거나 더 작은 값을, maximum-scale은 initi..
프론트엔드 로드맵 14 - CSS 레이아웃 만들기 레이아웃은 특정 공간에 여러 구성 요소를 효과적으로 배치하는 것을 말한다. css를 이용하거나 table 요소로 구성이 가능하다. 하지만 스타일 변경 및 보수 과정에서 번거로움이 있어 요즘에는 table을 안 쓰는 추세다. HTML 레이아웃 구성 요소 1. float 가장 많이 쓰이는 방법. float된 레이아웃 하단에는 clear: both로 정리한다. 외에도 display: table, display:inline-block 등으로 레이아웃을 나누는 방법들이 다양하다. 2. position 값으로 이동 부모요소에 position: relative를 주고 자식에 position: absolute를 줘서 위치를 잡아주면 된다. float과 position은 height값이 제대로 먹지 않는 경우가 많다. ..
프론트엔드 로드맵 13 - CSS 기초 닦기 HTML이 페이지 상에 정보를 표현하는 문서라면 CSS (Cascading Style Sheets)는 HTML을 시각적으로 꾸미는 역할을 한다. CSS를 통해, - 정보(HTML)와 디자인(CSS)을 분리할 수 있게 됐다. - 정보를 수정하지 않고 디자인만 변경할 수 있다. - 검색엔진이 HTML를 해석 가능하도록 해서 더 많은 방문자들의 방문을 유도한다. - 시각장애인을 위한 스크린리더가 HTML을 해석할 수 있다. CSS적용 방법에는 세가지가 있는데, 첫째는 인라인 스타일 inline style, 내부 인라인 시트 Internal style sheet, 외부 스타일 External style css. CSS 스타일 적용 우선순위 1. 인라인 스타일 >> 2. 내부/외부 스타일 시트(HTML에서 hea..

티스토리툴바