js/brower - DOM -1
·
SE Bootcamp 내용 정리
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 해석을 일시 정지하고 요소를 먼저 실행한다. ..
얕은 복사, 깊은 복사 내용에 대한 정리?
·
SE Bootcamp 내용 정리
얕은 복사 vs 깊은복사 참고 얕은 복사(shallow copy) vs 깊은 복사(deep copy) 결론적으로 말하면 얕은 복사의 경우 껍데기만 복사본이고 내용은 기본적으로 동일한 객체를 쓰는데, 이 때 내용의 요소(element)가 immutable한 요소(ex. 원시 자료형)이라면 그 값을 변경하면 새로운 값으로 대체되어서 새로운 객체가 생성되는 것이고 내용의 요소가 mutable한 요소(ex. 참조 자료형)이라면 그 값을 변경하면 그 객체 내에서 수정이 이루어져서 여전히 그 동일한 객체를 사용하고 있다(다른 것과 공유해서)라고 이해해야 할 것 같다...
js/node - spread/rest 문법
·
SE Bootcamp 내용 정리
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..
js/node - 자료형, 스코프, 클로저
·
SE Bootcamp 내용 정리
원시 자료형과 참조 자료형 원시 자료형: 고정된 저장 공간 사용 참조 자료형: 동적으로 변하는 저장 공간 사용(함수, 배열, 객체 등) 학습 목표 * 원시 자료형과 참조 자료형의 구분이 필요한 이유? * 원시 자료형과 참조 자료형의 차이? * 원시 자료형은 변수에 값이 할당되고 참조 자료형은 “주소”가 할당된다 * 참조 자료형은 동적으로 크기가 변하는 특별한 보관함을 사용한다원시, 참조 자료형 쉽게 이해하기 원시 자료형: 값(value)가 stack에 직접적으로 저장되어 있다. 값을 stack 보관함에서 바로 꺼내오는 구조 참조 자료형: 보관함에 값이 저장이 된 것이 아니라 어디를 참조 해라는 “주소”가 저장되어 있다. 그 주소에 해당하는 값은 heap에 저장이 되어 있어서 보관함에서 주소를 보고 hea..
css - 레이아웃, selector
·
SE Bootcamp 내용 정리
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을 다..
js/node - 배열, 객체 checkpoint
·
SE Bootcamp 내용 정리
배열, 객체 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...
js/node - 배열, 객체
·
SE Bootcamp 내용 정리
배열, 객체 배열과 객체라는 개념을 통해, 수 많은 데이터를 한 번에 처리 배열과 객체는 참조 타입(reference type) 데이터 참조 타입 데이터는 이전에 학습한 원시 타입(숫자, 문자열, boolean, undefined 등) 데이터와 다른 성격을 가짐 배열 기초 학습 목표 [배열 기초] * 용어들에 대한 이해 - index, element, length - arr[0], push, pop * 배열에서 특정 인덱스의 요소(element)를 조회하거나 변경 * 이중 배열: 배열의 요소가 배열 * 이중 배열의 요소를 조회, 변경 [배열의 반복] * 배열의 요소를 반복적으로 불러오는 방법 * 배열에 각 요소에 대해 반복하는 코드 실행 - 기본적인 for문을 응용한 다양한 for문 만들기 - 반복문에 ..
git 기초
·
SE Bootcamp 내용 정리
git 기초 버전 관리 시스템 git git이란 “분산형 버전 관리 시스템” 버전 관리 시스템? 이전에 작성한 내용들(버전들)을 보존하면서 관리하는 시스템 학습목표 * Git의 환경설정 * 버전 관리 시스템의 필요성 이해 * Github와 Git의 관계 이해 * Repository에 대한 이해 - local Repository와 Remote Repository의 차이 이해git intro 버전 관리를 사용하는 이유? 1. 파일이 변경되면 변경 이력을 저장할 수 있다 2. 이전 버전으로 돌아갈 수 있다 3. 어떤 변경 사항이 발생했는지 알아보기 쉽다 4. 협업하기에 좋다 → github, gitlab 등의 원격 저장소를 이용한 협업 가능 5. 백업용 특정 시점에 생성되는 백업 복사본: 스냅샷 → 스냅샷을 ..
Linux 기초 - 2
·
SE Bootcamp 내용 정리
패키지와 패키지 매니저 패키지 안에 존재하는 파일들 → 패키지 안에는 모든 파일이 압축되어 있다 * 프로그램 파일 * 프로그램 설치 파일 * 프로그램 설치 설명서 * 프로그램에 대한 정보를 담은 파일프로그램에 대한 정보를 담은 파일: 프로그램 A를 설치하기 위해 프로그램 B가 필요하다는 정보 → 프로그램 A 설치를 위해 프로그램 B를 먼저 설치한다 패키지 매니저를 이용하지 않고 개별로 설치하는 경우? 여러 프로그램을 개별 설치하는 경우 각각의 프로그램이 저장된 위치를 모두 알아야 함 업데이트 여부를 확인하기 위해 주기적으로 저장소를 방문해서 확인 → 프로그램 수가 늘어나면 이를 모두 확인하기 쉽나?→ 이런 단점을 보완하는 도구: 패키지 매니저(일종의 앱 스토어/구글 스토어) 패키지 매니저의 용도: 업데이..
Linux 기초 - 1
·
SE Bootcamp 내용 정리
Linux 기초 CLI 기본 명령어 패키지와 패키지 매니저 nvm, node.js, npm 짝수생성기 만들어보기 CLI 기본 명령어 학습 목표 * 리눅스 터미널 실행하기 * 리눅스 터미널 기본 명령어 익히기 - pwd: 현재 위치 확인 - mkdir: 디렉토리 생성 - ls: 폴더나 파일의 목록을 출력 - nautilus(ubuntu), open(masOS): 현재 폴더를 탐색기로 염 - cd: 폴더에 진입 - touch: 새로운 파일을 생성 - cat: 파일의 내용을 터미널에 출력 - rm: 폴더나 파일을 삭제 - mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경 - cp: 폴더나 파일을 복사 - sudo: 관리자 권한을 이해 * 명령어 사용시의 키워드 이해 `/`: 루트 디렉토리 `~`: 홈 디렉..
css 기초 - 2
·
SE Bootcamp 내용 정리
텍스트 꾸미기 색상(color) hex코드 또는 주요 색상의 이름을 사용 가능 글꼴(font-family) 글꼴 이름은 “ “(따옴표)를 붙여서 적용 글꼴이 없거나 지원하지 않는 경우를 대비하여 여러 글꼴 추가 가능(fallback 글꼴) → ,(쉼표)를 구분자로 사용. 입력 순서대로 fallback이 적용됨 ex) .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } 보다 다양한 글꼴을 사용하고 싶은 경우? “웹 폰트 기술” 이용 개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드 받게 하는 기술 Google Fonts 서비스 이용 HTML의 link태그를 사용하여 간단하게 embed 가능 크기..
css 기초 - 1
·
SE Bootcamp 내용 정리
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는 스타일링을 위한 도구 ..