js/browser – DOM(Document Object Model) DOM은 프로그래머 관점에서 바라 본 HTML DOM 이해하기 DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. 학습 목표 * DOM의 개념 * DOM의 구조와 HTML과 비교 * HTML에서 JavaScript 파일을 불러올 때의 주의점 - ` // html 파일과 같은 디렉토리에 있는 ~파일 불러옴 → 웹 브라우저는 코드를 해석하는 과정에서 요소를 만나면 html 해석을 일시 정지하고 요소를 먼저 실행한다. ..

얕은 복사 vs 깊은복사 참고 얕은 복사(shallow copy) vs 깊은 복사(deep copy) 결론적으로 말하면 얕은 복사의 경우 껍데기만 복사본이고 내용은 기본적으로 동일한 객체를 쓰는데, 이 때 내용의 요소(element)가 immutable한 요소(ex. 원시 자료형)이라면 그 값을 변경하면 새로운 값으로 대체되어서 새로운 객체가 생성되는 것이고 내용의 요소가 mutable한 요소(ex. 참조 자료형)이라면 그 값을 변경하면 그 객체 내에서 수정이 이루어져서 여전히 그 동일한 객체를 사용하고 있다(다른 것과 공유해서)라고 이해해야 할 것 같다...

Spread/Rest 문법 Spread 문법(immutable) ; 전개 구문(각 요소를 펼쳐주는 문법) 주로 “배열을 풀어서” 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용 인터넷 익스플로러는 지원하지 않음(브라우저 호환성) function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 1+2+3=6을 리턴 // `...` 을 붙이는 게 핵심? Rest 문법: ... 파라미터 쓰는 것! 파라미터를 배열의 형태로 받아서 사용 가능 → 정해지지 않은 파라미터는 배열로 나타냄 파라미터 개수가 가변적일 때 유용 function f(a, b, ...theArgs) { // ... } function..

원시 자료형과 참조 자료형 원시 자료형: 고정된 저장 공간 사용 참조 자료형: 동적으로 변하는 저장 공간 사용(함수, 배열, 객체 등) 학습 목표 * 원시 자료형과 참조 자료형의 구분이 필요한 이유? * 원시 자료형과 참조 자료형의 차이? * 원시 자료형은 변수에 값이 할당되고 참조 자료형은 “주소”가 할당된다 * 참조 자료형은 동적으로 크기가 변하는 특별한 보관함을 사용한다원시, 참조 자료형 쉽게 이해하기 원시 자료형: 값(value)가 stack에 직접적으로 저장되어 있다. 값을 stack 보관함에서 바로 꺼내오는 구조 참조 자료형: 보관함에 값이 저장이 된 것이 아니라 어디를 참조 해라는 “주소”가 저장되어 있다. 그 주소에 해당하는 값은 heap에 저장이 되어 있어서 보관함에서 주소를 보고 hea..

CSS - 레이아웃, Selector: 화면 설계의 기본 학습 목표 * 다양한 CSS 셀렉터 규칙 이해 - 후손 셀렉터와 자식 셀렉터의 차이 * 레이아웃을 위한 HTML 작성 * Flexbox를 이용한 레이아웃 작성 - 방향: flex-direction - 늘리기: flex-grow - 크기 차지: flex-basis - 수평 정렬: justify-content - 수직 정렬: align-items Checkpoint – CSS Selector 일반 셀렉터 h1 { } // “모든” h1을 선택 div { } // 모든 div 를 선택 등전체 셀렉터 모든 엘리먼트를 선택(전체가 아닌 모든) * { } tag 셀렉터 ,(쉼표)는 다중으로 선택한다 section, h1 { } // section과 h1을 다..

배열, 객체 checkpoint 간단 정리 배열 unshift/shift/push/pop의 특징 → 원본 배열을 변화시킨다(mutable) 메서드 기능 return ================================================================ unshift 배열의 맨 앞에 요소 추가 배열의 새로운 길이(length) shift 배열의 맨 앞의 요소 제거 제거된 요소(element) push 배열의 맨 뒤에 요소 추가 배열의 새로운 길이(length) pop 배열의 맨 뒤의 요소 제거 제거된 요소(element) array.slice() → immutable 메서드(원본 배열을 변화x) → start는 포함 end는 미포함(strat, end는 index값임) arr...

배열, 객체 배열과 객체라는 개념을 통해, 수 많은 데이터를 한 번에 처리 배열과 객체는 참조 타입(reference type) 데이터 참조 타입 데이터는 이전에 학습한 원시 타입(숫자, 문자열, boolean, undefined 등) 데이터와 다른 성격을 가짐 배열 기초 학습 목표 [배열 기초] * 용어들에 대한 이해 - index, element, length - arr[0], push, pop * 배열에서 특정 인덱스의 요소(element)를 조회하거나 변경 * 이중 배열: 배열의 요소가 배열 * 이중 배열의 요소를 조회, 변경 [배열의 반복] * 배열의 요소를 반복적으로 불러오는 방법 * 배열에 각 요소에 대해 반복하는 코드 실행 - 기본적인 for문을 응용한 다양한 for문 만들기 - 반복문에 ..

git 기초 버전 관리 시스템 git git이란 “분산형 버전 관리 시스템” 버전 관리 시스템? 이전에 작성한 내용들(버전들)을 보존하면서 관리하는 시스템 학습목표 * Git의 환경설정 * 버전 관리 시스템의 필요성 이해 * Github와 Git의 관계 이해 * Repository에 대한 이해 - local Repository와 Remote Repository의 차이 이해git intro 버전 관리를 사용하는 이유? 1. 파일이 변경되면 변경 이력을 저장할 수 있다 2. 이전 버전으로 돌아갈 수 있다 3. 어떤 변경 사항이 발생했는지 알아보기 쉽다 4. 협업하기에 좋다 → github, gitlab 등의 원격 저장소를 이용한 협업 가능 5. 백업용 특정 시점에 생성되는 백업 복사본: 스냅샷 → 스냅샷을 ..

패키지와 패키지 매니저 패키지 안에 존재하는 파일들 → 패키지 안에는 모든 파일이 압축되어 있다 * 프로그램 파일 * 프로그램 설치 파일 * 프로그램 설치 설명서 * 프로그램에 대한 정보를 담은 파일프로그램에 대한 정보를 담은 파일: 프로그램 A를 설치하기 위해 프로그램 B가 필요하다는 정보 → 프로그램 A 설치를 위해 프로그램 B를 먼저 설치한다 패키지 매니저를 이용하지 않고 개별로 설치하는 경우? 여러 프로그램을 개별 설치하는 경우 각각의 프로그램이 저장된 위치를 모두 알아야 함 업데이트 여부를 확인하기 위해 주기적으로 저장소를 방문해서 확인 → 프로그램 수가 늘어나면 이를 모두 확인하기 쉽나?→ 이런 단점을 보완하는 도구: 패키지 매니저(일종의 앱 스토어/구글 스토어) 패키지 매니저의 용도: 업데이..

Linux 기초 CLI 기본 명령어 패키지와 패키지 매니저 nvm, node.js, npm 짝수생성기 만들어보기 CLI 기본 명령어 학습 목표 * 리눅스 터미널 실행하기 * 리눅스 터미널 기본 명령어 익히기 - pwd: 현재 위치 확인 - mkdir: 디렉토리 생성 - ls: 폴더나 파일의 목록을 출력 - nautilus(ubuntu), open(masOS): 현재 폴더를 탐색기로 염 - cd: 폴더에 진입 - touch: 새로운 파일을 생성 - cat: 파일의 내용을 터미널에 출력 - rm: 폴더나 파일을 삭제 - mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경 - cp: 폴더나 파일을 복사 - sudo: 관리자 권한을 이해 * 명령어 사용시의 키워드 이해 `/`: 루트 디렉토리 `~`: 홈 디렉..

텍스트 꾸미기 색상(color) hex코드 또는 주요 색상의 이름을 사용 가능 글꼴(font-family) 글꼴 이름은 “ “(따옴표)를 붙여서 적용 글꼴이 없거나 지원하지 않는 경우를 대비하여 여러 글꼴 추가 가능(fallback 글꼴) → ,(쉼표)를 구분자로 사용. 입력 순서대로 fallback이 적용됨 ex) .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } 보다 다양한 글꼴을 사용하고 싶은 경우? “웹 폰트 기술” 이용 개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드 받게 하는 기술 Google Fonts 서비스 이용 HTML의 link태그를 사용하여 간단하게 embed 가능 크기..

ch – CSS 기초 CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정 → CSS는 구조의 외부와 내부를 꾸미는 역할 학습 목표CSS의 사용목적 이해 프론트엔드 개발자의 기초소양 CSS의 기본문법과 구조 → 직접 html 안에 css를 정의하는 것을 권장하지 않는 것을 이해 id 및 class와 관련된 selector 규칙 CSS에서 쓰이는 단위(2가지 구분) → 각 단위가 적합한 경우를 구분 CSS 박스 모델 → width, height → margin, padding, border → 박스 크기를 측정하는 2가지 기준의 차이 이해 MDN, w3school 같은 레퍼런스 사이트를 통한 검색과 이용법 CSS 소개 CSS는 스타일링을 위한 도구 ..