0. DOM이란? Document Object Model XML / HTML 문서에 접근하기 위한 일종의 인터페이스 문서 내의 모든 요소 정의 각각의 요소에 접근하는 방법 제공 1. DOM의 구조 DOM은 그림에서 확인할 수 있듯이, 트리 형식으로 이루어져 있다. ★ tree란? 방향성이 있으며, 순환하지 않는 그래프의 한 종류 정점(node)와 간선(edge)를 활용해 데이터의 배치 형태를 추상화한 자료구조 노드가 N개인 트리는 항상 N-1개의 간선을 가짐 노드들이 나무 가지처럼 연결되었으며, 나무를 거꾸로 뒤집어 둔 형태와 유사 위쪽의 노드를 부모(parent) 노드라고 하며, 아래쪽 노드를 자식(child) 노드라고 한다. root node : 최상단에 있는 노드, parent node가 존재하지 ..

0. 자바스크립트에서 함수란? 득정 작업을 수행하기 위해 독립적으로 설계된 코드들의 집합 명령어의 묶음 재사용 가능한 영역을 정의 코드를 캡슐화하는 데에 도움이 됨 일반적으로 '입력(input) → 함수 → return문 → 출력(output)' 순으로 구성 함수 정의 : 함수를 "생성" 함수 호출 : 함수를 "사용" [ 특징 ] 함수 = 객체 function이라는 키워드로 정의 / 생성하며 출력이 가능 객체이기 때문에 함수를 변수나 배열에 저장 가능 다른 함수 호출 시 인자를 넘겨줄 수 있음 동일한 작업을 반복 (반복 작업을 줄이며 코드 재사용성 ↑) 유지보수 편리 1. 함수의 종류 1.1 내장 함수 이미 언어에서 자주 쓰이는 기능을 만들어 놓은 함수 ex. alert ( ), confirm ( ), ..

0. flexbox란 웹 페이지의 복잡한 레이아웃을 보다 간단하게 구현할 수 있도록 나오게 된 것이 CSS3에 추가된 flexbox 속성이다. 요소의 크기와 순서를 유연하게 배치할 수 있다는 장점이 있다. 뷰 포트나 요소의 크기가 불명확하거나, 동적으로 변할 때에도 효율적으로 요소들을 배치하거나 정렬할 수 있다. flexbox 기본 용어 flex item : 자식 요소 flex container : 상위 부모 요소 주축 (main axis): 아이템의 배치 방향의 축 교차축 (cross axis): 주축의 수직축 flexbox에 속하는 속성들은 정말 많지만, 대표적인 속성들에 대해 바로바로 보고 이해할 수 있도록 이미지를 첨부하였으니 찬찬히 코드들을 살펴보자. 1. flex-direction 속성 fle..

1. 단일 선택자 단일 선택자란 선택자가 가리키는 요소 혹은 개체가 하나임을 말한다. 다만, 단일 선택자라고 해도 적용받는 태그의 수는 여러 개일 수 있다. 1.1 전체 선택자 ( Universal Selector ) 모든 형태의 모든 요소를 선택 * { color: red; background-color: blue; } /* 페이지의 모든 요소에 대해 스타일 적용 */ 1.2 태그 선택자 ( Type Selector ) 작성한 태그의 모든 요소를 선택 p { color: red; text-align: center; } /* 페이지의 모든 요소에 대해 스타일 적용 */ 1.3 Class 선택자 ( Class Selector ) 작성한 클래스 값을 가지는 모든 요소를 선택 .name { color: red..

1. CSS란? Cascading Style Sheet의 약자 웹 페이지를 디자인하기 위한 언어 HTML이 뼈대 / 구조를 구축하는 작업이라면, CSS는 디자인 / 인테리어를 하는 작업 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적 2. CSS 작성 방식 2.1 인라인 방식 각 요소의 style 속성에 직접적으로 스타일을 작성하는 방식 직관적이고 하나의 태그에 대해 바꾸기가 쉽다는 장점 HTML은 구조, CSS는 디자인을 담당하게 하자고 하는 암묵적인 룰에 어긋나는 부분 존재 작성한 태그에 한해 적용이 되기 때문에, 다른 곳에서 재사용이 불가능 CSS 사용법을 익혀보자 ! 2.2 내장 방식 HTML의 2.3 링크 방식 작성하려는 모든 style을 ..

1. 오류 발생 코드를 push 하려고 할 때, 아래와 같은 에러 메시지가 뜨는 경우가 있다. 구글 검색을 해보니, push 하려는 레파지토리 계정과 다른 경우에 이러한 403 에러가 뜬다고 한다. 리모트 레파지토리를 소유하거나 권한을 부여해 준 계정이 아닌 다른 계정으로 로그인된 상태에서는 권한 오류가 발생한다. 현재 로그인 되어있는 계정을 로그아웃하고 원하는 계정으로 다시 로그인을 해주어야 한다. 다시 말해, 현재 로그인 되어 있는 자격 증명을 다른 계정으로 바꿔주면 되는 것이다. 2. 해결 방법 윈도우 운영체제 기준 해결 방법이다. 로그인되어있는 계정을 삭제해주어야 하니, 우선 자격 증명 관리자를 찾아 들어간다. Windows 자격 증명에 들어간다. 일반 자격 증명에 있는 깃허브 관련 계정을 삭제한..

매번 많이 사용해야 될 명령어들,, 나중에 갑자기 기억이 안 나거나 그럴 수 있으니 한눈에 보기 쉽게 정리해두려고 한다 :- ) cd (change directory) : 디렉터리 위치 변경 (이동) mkdir (make directory) : 새 디렉터리 생성 ls (list segments) : 폴더 안에 있는 파일 목록 확인 [ 옵션 ] ▶ ls -l (long) : 파일/디렉토리의 세부 정보까지 함께 출력 ▶ ls -a (all) : 숨김 파일까지 모두 보여줘 (보통 . 으로 시작하는 파일) ▶ ls -al (all + long) : 숨김 파일을 포함한 모든 파일의 세부 정보를 보여줘 (보통 . 으로 시작하는 파일) pwd (print working directory) : 현재 경로 출력 touc..

1. Anaconda 설치 Windows - https://repo.anaconda.com/archive/Anaconda3-5.2.0-Windows-x86_64.exe OS X - https://repo.anaconda.com/archive/Anaconda3-5.2.0-MacOSX-x86_64.pkg Linux - https://repo.anaconda.com/archive/Anaconda3-5.2.0-Linux-x86_64.sh 2. 텐서플로우, 케라스 설치 2.1 우선 아나콘다 프롬프트를 실행한다. 2.2 텐서플로우 ( tensorflow ) 설치 pip install tensorflow 2.3 케라스 ( keras ) 설치 pip install keras 3. tensorflow 설치 시 오류 이 ..

1. Nested routes 란? 페이지 안에 세부 페이지를 한번 더 생성해 준다. 세부적인 UI를 바꾸고 싶을 때 사용한다. 컴포넌트 숨겨놨다가 보여주는 식으로 만들어도 비슷하지만, URL 자체를 따로 나누고 싶은 경우 사용한다. ★ 상세 페이지는 상대경로로 작성 ( 하단에서 확인 가능 ) 2. 과정 지난번에 만들어둔 Detail.vue에서 세부 페이지를 작성자와 댓글 페이지로 나누고 싶다고 가정해 보자. 1) children : [ ] router.js const routes = [ { path: "/detail/:id", component: Detail, children : [ // 이 부분부터 추가 { path: "/author", component: Author, }, { path: "/com..

1. 상세 페이지 생성 이번엔 detail 페이지 (상세 페이지)를 만들 것이다. [ 페이지 생성 과정 ] 상세 페이지를 생성하기 위해 짧게 더미 데이터를 생성했다. blog.js export default[ { title : '첫번째 글', content : '야호 종강이다', date : '12 16, 2022', number : 0 },{ title : '두번째 글', content : '정신 차려보니 개강', date : '02 28, 2023', number : 1 },{ title : '세번째 글', content : '수강신청 변경 성공!', date : '03 04, 2023', number : 2 } ] Detail.vue 상세 페이지 {{ blog[0].title }} {{blog[0]..