본문 바로가기

분류 전체보기

 (104)
<국비지원 개발자 과정> 5달 수료 후기 - 국비학원, 강사님, 추천책 등 - 국비지원 개발자 과정 회고 국비지원 개발자 과정을 수료한지 약 2주가 지났다. 사실 프론트엔드로 진로를 정한 이후 얼른 다음 진도를 나갈 예정이었지만, 막상 과정을 마치고 나니 지쳐버려서 쉬어가는 시간을 가졌다. 낮잠도 실컷 자보고 그랬더니 다행히 조금 회복이 되더라. 마지막으로 진행했던 개인 프로젝트 때 너무 긴장해서 달렸던 것이 화근이었던 것 같다. 교육을 시작했던 시기가 마침 코로나 확진자가 1000명대를 돌파했을 때여서, 5개월 내내 수업은 온라인으로 진행되었다. 한 3개월 정도 지난 즈음에야 위드 코로나로 방역 대책이 변경되면서, 일정 인원에 한해 학원 출석이 가능했으나 다들 거의 현장 출석은 안했다는 점(...). 그나마 마지막 프로젝트를 팀 프로젝트로 진행하는 분들은 팀 회의를 위해 학원..
<자바스크립트 Javascript> DOM (2) - 요소에 접근하기 1) 하나의 요소에 접근(DOM Query) *document.getElementById(id) - id 어트리뷰트 값으로 요소 노드를 한 개 선택하여 가져옴. 복수개 선택 시 첫번째 요소만 반환함. *document.querySelector(cssSelector) - CSS 셀렉터를 사용하여 요소 노드를 한 개 선택하여 가져옴. 복수개 선택 시 첫번째 요소만 반환함. IE8 이상의 브라우저에서만 사용가능. 2) 여러 개의 요소에 접근(DOM Query) *document.getElementsByClassName(class) - class 어트리뷰트 값으로 요소 노드를 모두 선택하여 가져옴. 공백으로 구분하면 여러 개의 class 지정 가능함. IE9 이상의 브라우저에서만 사용가능. ..
<자바스크립트 Javascript> DOM (1) - DOM(Document Object Model)이란? 직역하면 문서 객체 모델을 뜻한다. 텍스트 파일로 이루어진 웹 문서를 브라우저에 렌더링 하려면 브라우저가 이해할 수 있는 구조로 메모리에 저장하는 일이 필요하다. 즉, DOM이란 이 때 텍스트를 객체로 만들고, 이들을 다시 트리 구조로 만든 것으로 이 DOM이 렌더링에 쓰인다. DOM은 일반적으로 자바스크립트를 통해 동적 변경이 가능하다. 따라서 DOM은 자바스크립트 객체로 제공되는데, 이를 DOM API(Application Programming Interface)라 한다. 즉, DOM API는 웹 문서의 동적 변경을 위한 자바스크립트 프로퍼티와 메소드의 집합이다. - DOM tree란? 브라우저가 HTML 문서를 로드하고 파싱하여 생성하는 모델..
<자바스크립트 Javascript> this의 사용 - this의 사용 자바스크립트에서 함수는 객체의 프로퍼티에 할당되었을 때 메서드라 칭한다. 메서드는 그 존재 이유인 기능을 실행하기 위해 객체에 저장된 정보에 접근할 수 있어야 한다. 이 때, 메서드가 자신이 속한 객체의 프로퍼티 값을 사용할 때에 this 키워드를 사용한다. 즉, this 키워드는 객체 자신을 가리키는 키워드이다. - this 사용의 이점 this 키워드를 사용하지 않고 외부 객체를 참조하여 객체에 접근하는 것도 가능하다. 다만 이 경우 해당 객체의 값이 변경되면 에러가 발생할 수 있다는 단점이 있다. 따라서 외부 객체를 참조하는 방법보다 this 키워드를 사용하여 객체에 접근하는 것이 안전하다. - 자바스크립트 this의 특징 자바스크립트에서의 this 키워드는 다른 언어와는 달리 ..
<자바스크립트 Javascript> 전역 객체 - 전역 객체(Global Object)란? 모든 객체를 아우르는 최상위 객체를 일컫는다. 브라우저 관점에서는 window 객체, 서버 관점에서는 global 객체가 전역 객체로서 작용한다. - 전역 객체의 특징 1) 개발자가 직접 생성하지 않는다. 2) 전역 객체는 전역 스코프를 갖는다 3) 꼭 필요한 경우를 제외하고 전역 객체의 작성은 생략될 수 있다(사실 거의 생략). 4) 전역 변수는 전역 객체의 프로퍼티이고, 전역 함수는 전역 객체의 메서드이다. 5) 표준 빌트인 객체(Standard Built-in Objects)도 전역 객체의 자식 객체 중 하나다. - 전역 프로퍼티 전역 객체의 프로퍼티를 말한다. 애플리케이션 전역에서 사용하는 값을 나타내기 위해 사용된다. 전역 프로퍼티에는 다음과 같은 것..
<HTML> 시맨틱 태그 - 시맨틱 태그란? 시맨틱(semantic), 단어 그대로 의미를 담고 있는 태그를 일컫는다. HTML5에서 새롭게 도입된 요소다. 시맨틱 태그를 통해 웹 페이지 내의 콘텐츠들에 의미 단위의 중요성을 부과하여 보다 의미론적인 페이지 구성이 가능하다. - 시맨틱 태그 종류 우리가 일반적으로 잘 알고 있고 사용하고 있는 div, span 태그는 이에 포함되지 않으며 다음과 같은 것들이 있다. *header : 헤더를 나타냄 *nav : 내비게이션을 나타냄 *aside : 사이드에 위치하는 공간을 나타냄 *section : 본문의 내용들을 포함하는 공간을 나타냄 *article : 본문의 내용을 나타냄 *footer : 푸터를 나타냄 - 시맨틱 태그의 필요성 웹 사이트는 사람들이 찾고 이용할 때에만 그 존재 ..
<자바스크립트 Javascript> 스코프(Scope) (2) - 함수의 상위 스코프를 결정하는 방법 1) 동적 스코프(Dynamic scope) : 함수를 호출한 위치에 따라 상위 스코프를 결정 2) 정적 스코프(Static scope) 혹은 렉시컬 스코프(Lexical scope) : 함수를 선언한 위치에 따라 상위 스코프를 결정 이 둘 중 자바스크립트와 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다. 따라서 함수를 선언한 시점에 상위 스코프를 결정한다. - 암묵적 전역(implicit global) 어떤 함수에, 선언하지 않은 식별자가 있는 경우 해당 함수를 호출하면 자바스크립트는 이를 프로퍼티로 동적 생성한다. 따라서 이 선언하지 않는 식별자는 전역 객체의 프로퍼티가 되며, 전역 변수처럼 동작하게 된다. 다만 이 선언하지 않은 식별자는 변수가 아니므로 변..
<자바스크립트 Javascript> 스코프(Scope) (1) - 스코프란? 일종의 규칙이다. 유효범위를 뜻하는 단어로서, 식별자가 사용될 수 있는, 스스로가 속한 범위를 말한다. 스코프 자체로 범위라는 구분 단위를 제공해주기 때문에, 식별자 이름이 같더라도 범위가 다르면 중복이 허용되므로 이러한 방식으로 충돌을 방지한다. - 스코프의 구분 자바스크립트에서의 스코프는 두 가지로 나눌 수 있다. 또한, 모든 변수는 스코프를 기본으로 가지므로 스코프에 따라 변수 구분도 가능하다. 1) 전역 스코프(Global scope) - 전역 변수(Global variable) : 모든 곳에서 참조가(해당 식별자의 사용) 가능하다. 자바스크립트는 보통의 언어와 달리 시작점을 갖지 않기 때문에 쉽게 외부에 전역 변수 선언이 가능하다. 다만, 이러한 편리함이 도리어 전역 변수의 남용을..
<자바스크립트 Javascript> 객체 사용 시 주의점 - 객체 사용 시 주의점 사소하지만 가볍게 여기면 어느새 버그로 나타나 1시간 이상을 헤메이게도 하는 그런 주의점들(...)을 모아보았다. 객체 사용 시 주의할 점이다. 1) 프로퍼티 키 이름이 두 단어 이상일 때 프로퍼티 키 이름이 두 단어 이상일 때는 반드시 따옴표로 감싸주어야 한다. 그렇지 않은 경우 자바스크립트는 이를 인식하지 못하고 에러를 발생시킨다. let user = { "Oh yeah" : "something" } 이는 객체 접근 시에도 주의해야 할 부분으로, 키 이름이 두 단어 이상일 때는 대괄호( [] )를 사용해야 자바스크립트에서 정상적으로 인식이 가능하다. 다만 단어의 연결에 $, _ 기호를 사용한 경우는 대괄호를 쓰지 않아도 무방하다. 2) 객체 내의 프로퍼티가 여러개일 때 프로퍼..
<CSS> 반응형 웹 디자인 - 메뉴바 (3) 지난 (1), (2) 글에서 반응형 웹 디자인의 메뉴바를 완성하였으나, 드림코딩 강의를 참조하여 코드를 다시 수정해보았다. 일명 리팩토링! 하였다. 디자인은 위처럼 에어비앤비를 테마로하여 다시 만들어보았다. - HTML 전체 헤더는 클래스명 nav로 하여 section 태그로 만들었다. 지난번과 달리 nav를 감싸는 더 큰 div 박스는 불필요하여 제거하였다. 브랜드명에는 로고 이미지도 새롭게 추가하였다. 메뉴는 지난번처럼 중단점 이하에서 나타나는 메뉴를 따로 만들지 않고, 하나의 메뉴만 만들고 이를 CSS에서 조작하여 미디어 쿼리를 통해 중단점 이하일 경우 다르게 나타나도록 만들었다. 코드가 훨씬 간결하고 보기 편해졌다. 맨 하단의 클래스 fas는 중단점 이하에서 나타나는 햄버거 모양의 메뉴바 아이콘이..

티스토리툴바