백고등어 개발 블로그

오늘 한 일 Javascript 과 DOM을 통한 HTML 조작에 관해서 학습했다. JS + DOM 을 통해 HTML의 요소에 접근할 수 있고, 요소(노드)를 추가, 삭제하거나 기존의 요소(노드)에 자식 요소(노드)를 추가하거나 삭제할 수 있다 DOM 노드의 생성, 수정, 삭제 자바스크립트를 사용하면 DOM 의 모든 노드들을 생성, 수정, 삭제, 복사, 이동 할 수 있습니다. DOM 노드를 제어하는데 필요한 모든 속성과 메서드를 제공하기 때문에 메서드와 속성의 갯수가 많기 whitemackerel.tistory.com 노드란? 노드란 무엇인가? 노드란 네트워크에서 특정 지점을 가리키는 말입니다. 그림을 보면 좀 이해가 가실 것입니다. DOM에서도 비슷합니다. 문서는 곧 노드의 집합이고 문서라는 나무 위에..

오늘 한 일 DOM 에 관해서 학습했다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. DOM은 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있다. DOM은 문서 객체 모델이며 Document Object Model의 약자로, HTML에 접근하여 Object처럼 HTML을 조작할 수 있는 Model이라는 의미를 가지고 있다. DOM 의 문서 객체는 무엇일까? 문서 객체란 이나 같은 html 문서의 태그들을 javascript 가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 한다. 그럼 여기서 얘기하는 Model은 무슨 뜻일까? 문서 객체를 "인식하는 방식"이라고 해석할 수 있다. DOM 과 Javascript 의 차이 페이지 ..

오늘 한 일 HTML 과 CSS 에 관해서 학습했다 HTML 이란? HyperText Markup Language 의 약자 웹 페이지의 틀을 만드는 마크업 언어 마크업 언어란? 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 즉, 문서의 구조를 표현하는 역할을 하는 언어이다. CSS 란? Cascading Style Sheets 의 약자 HTML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. css 를 적용하는 세 가지 방법 속성처럼 style 적용 style tag 를 사용 css 파일을 별도로 만들어 html 문서에 link tag 로 연결 CSS Selector 사용 html 문서 태그의 속성이 id 또는 class 일 때 사용법이 다릅니다. ..

코드 스테이츠를 시작한지 2주가 지났다. 처음 주변사람들에게 부트 캠프라는걸 하게 되었다라고 얘기하면 그게 뭐냐고, 캠핑가냐고 물었다 나도 처음엔 부트캠프가 뭔지 몰라서 검색해보니 "훈련소"라는 뜻이었다... 무튼, 코드 스테이츠 과정을 시작하기 전엔 평소에 밤낮이 자주바껴서 오후 5시에 일어나서 다음날 오전 11시에 자는 일이 빈번했다 하지만 코드 스테이츠 과정이 시작되곤 매일 오전 7시 30분에 일어나서 밤 11~12시에 자는 뭔가 건강한? 일상이 되었다 과정을 진행하며 자바스크립트라는 프로그래밍 언어를 사용하여 코드 스테이츠에서 제공하는 여러가지 강의를 듣고 페어 프로그래밍을 통해 여러 페어분들과 함께 문제를 풀면서 2주를 보냈다 변수타입, 조건문, 반복문, 객체, 알고리즘 등등... 페어 프로그래..

오늘 한 일 자바스크립트 테스트 프레임워크를 사용하여 유닛 테스트에 대해서 학습했다 유닛 테스트를 공부하면서 조건문을 꼼꼼하게 쓰는 방법과 다양한 테스트 케이스들에 대해서 알 수 있었다 자바스크립트 원시 타입과 참조 타입에 관한 문제를 풀면서 아는 것과 모르는 것을 정리할 수 있었다 원시 타입 : number, string, boolean, null, defined, symbol 등 원시 타입은 변수에 값이 복사되어 다른 변수에 저장되는 것을 의미한다. 참조 타입 : Array, Object, Function 등 참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며, 변수에는 데이터에 대한 참조만 저장된다 참조는 참조 타입 데이터의 주소이지 해당 데이터의..

Rest Parameter 란? Rest Parameter는 나머지 인자들, 혹은 여분의 인자들이라는 뜻입니다. 함수를 정의할 때 마지막 인자 앞에 ...을 붙이면 해당 인자 다음에 오는 모든 나머지 인자들을 배열로 만듭니다. 즉, 위의 예시를 보면 3번째 인자인 c 인자 앞에 ...을 붙였으므로 'c', 'd', 'e' 이 3개의 항목이 c라는 이름의 배열로 만들어집니다. arguments 라는 속성이 함수의 모든 파라미터를 유사 배열로 가져오는 것과 비교하면 많은 차이점이 있습니다. Rest Parameter는 유사 배열이 아닌 진짜 배열로 만들어주기 때문에 isArray() 함수를 사용하면 true가 출력됩니다. 유사 배열이란? 자바스크립트에선 배열처럼 인덱스로 접근이 가능하고 length 프로퍼티..

오늘 한 일 테스트 주도 개발 (TDD - Test Driven Development) 에 관해서 학습했다 테스트 주도 개발이란? 테스트를 먼저 만들고 테스트를 통과하기 위한 것을 짜는 것 즉, 만드는 과정에서 우선 테스트를 작성하고 그걸 통과하는 코드를 만들고를 반복하면서 제대로 동작하는지에 대한 피드백을 적극적으로 받는 것이다. 단위 테스트(Unit Test) 프로그램을 작은 단위로 쪼개서 내가 짠 프로그램이 내가 원하는 결과대로 동작하는지 테스트할 수 있다. 단위 테스트를 거치면 프로그램의 안정성이 높아지며, 단위테스트를 믿고 리팩토링을 할 수 있다. mocha 테스트 프레임워크 mocha 프레임워크는 자바스크립트의 테스트 프레임워크중 하나이다. mocha 프레임워크 메소드종류 describe() ..

오늘 한 일 자바스크립트의 변수타입(원시 타입, 참조 타입) 과 변수 키워드, 스코프, 배열, 객체, 전개 구문에 대해서 전체적으로 정리하는 시간을 가졌다. 전체적으로 복습할 수 있었고, 몰랐던 부분도 검색을 통해 추가적으로 알 수 있었다 추가적으로 알게된 것들 렉시컬 스코프 렉시컬 스코프에서는 소스코드가 작성된 그 문맥에서 결정된다. 현대 프로그래밍에서 대부분의 언어들은 렉시컬 스코프 규칙을 따르고 있다. 즉, 함수를 *어디에* 선언하였는지에 따라 결정된다 동적 스코프 동적 스코프는 런타임 도중에 실행 콘텍스트나 호출 콘텍스트에 의해 결정된다. 즉, 함수를 어디에 선언하였는지가 아닌, *어디서* 호출하였는지에 따라 상위 스코프를 결정한다. [렉시컬 스코프] [동적 스코프] 자바스크립트는 렉시컬 규칙을 ..

클로저란? - 클로저는 외부함수의 변수에 접근할 수 있는 내부 함수를 뜻합니다 - 클로저 함수 안에선 세가지의 변수에 접근할 수 있습니다 - 지역 변수 - 해당 클로저 함수를 포함하는 외부 함수의 변수 - 전역 변수 - 클로저 함수는 외부 함수의 변수뿐만 아니라 매개변수에도 접근할 수 있습니다 - 아래와 같이 클로저 함수를 사용할 수 있습니다 - 그렇다면 이러한 클로저 함수를 어떻게 활용할 수 있을까요? 커링 이용 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법 캡슐화 이용 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법 - 캡슐화란 중요한 데이터를 보존, 보호하는 것을 뜻합니다 템플릿 함수 이용 : html 태그 만들기

- 자바스크립트는 변수나 상수, 매개변수가 생성될 때 스코프가 정해집니다. - 이때 각 변수, 상수, 매개변수가 미치는 범위를 스코프라고 합니다. - 스코프에는 글로벌 스코프와 로컬 스코프가 존재합니다. 글로벌 스코프 VS 로컬 스코프 비교 - 스코프란 현재 접근할 수 있는 변수들의 범위를 뜻합니다. 글로벌 스코프 - 글로벌 스코프란 전역 변수 또는 함수를 뜻하기도 합니다. - 내부 스코프(함수의 내부 스코프 등..) 에서 전역 변수 또는 함수에 접근 할 수 있습니다 - 예를 들면 아래와 같습니다 - myName 변수는 글로벌 스코프를 갖는 전역 변수로 선언되었습니다 즉, 함수 내부에서도 myName 변수에 접근할 수 있습니다 로컬 스코프 - 로컬 스코프란 블록 또는 함수 내에서만 접근할 수 있는 변수이..