원시 자료형과 참조 자료형 원시 자료형: 고정된 저장 공간 사용 참조 자료형: 동적으로 변하는 저장 공간 사용(함수, 배열, 객체 등) 학습 목표 * 원시 자료형과 참조 자료형의 구분이 필요한 이유? * 원시 자료형과 참조 자료형의 차이? * 원시 자료형은 변수에 값이 할당되고 참조 자료형은 “주소”가 할당된다 * 참조 자료형은 동적으로 크기가 변하는 특별한 보관함을 사용한다원시, 참조 자료형 쉽게 이해하기 원시 자료형: 값(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는 스타일링을 위한 도구 ..

ch - 웹 개발 이해하기 웹 개발과 HTML & CSS Javascript HTML과 CSS는 웹 페이지를 만드는 기초 자바스크립트가 웹 페이지를 컨트롤 하는 방법을 눈으로 확인 가능 HTML: 웹페이지의 구조(Structure) 를 담당하는 Markup 언어 CSS: 디자인 요소를 시각화하는 스타일시트(Presentation) 언어 JS(JavaScript): 단순한 웹페이지를 프로그램으로 만들어 사용자와 상호작용(Interaction) 할 수 있게 해주는 프로그래밍 언어 Visual Studio Code를 설치해서 사용하자 ch – HTML 기초 HTML? → Structure! HyperText Markup Language; 웹페이지를 구성하는 마크업 언어 → 프로그래밍 언어가 아니다. 그러나 H..

ch – 반복문 단순한 반복을 보다 효율적이고 간결하게 할 수 있도록 하는 반복문 [학습 목표] for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용한 다양한 for문 생성 for문과 while문의 차이 이해 반복문에 조건문을 적용하여 특정 조건에서만 반복문 실행되게 하기 이중 for문에 대한 이해 반복문 기초 반복문: 같거나 비슷한 코드를 여러 번 실행시켜야 할 때 쓰는 구문 → 반복할 조건을 코드로 작성 for 구문 반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다 for(초기문;조건문;증감문){ //반복할 내용 } ex) let sum=1; for(1et n=2;n

ch- 문자열 컴퓨터는 코드와 문자열을 구분하기 위해서 작은 따옴표(&#39;&#39;)나 큰 따옴표("")를 사용하여 구분 문자열은 string. 문자 하나는 character(char) [학습목표] # 문자열의 속성과 메소드를 이용해 원하는 형태로 만들기 * length로 길이 확인 str.length * 문자열의 글자 하나하나에 대한 접근 str[1] * 문자열 합치기 * 문자열 원하는 만큼만 선택 str.slice(0,3) 또는 str.substring(0,3) * 영문을 모두 대문자로 변환 str.toUpperCase() * 영문을 모두 소문자로 변환 str.toLowerCase() * 문자열 중 원하는 문자의 index 찾기 str.indexOf(‘a’) 또는 str.lastIndexOf(‘a..