React # React : 사용자 정의 태그를 만드는 기술 - 자바스크립트의 라이브러리 - 사용자 정의 인터페이스를 만들기 위해 사용 - https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org npx create-react-app my-app cd my-app npm start 컴포넌트 # 컴포넌트 : 사용자 정의 태그 - UI를 재사용이 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있음 - 이름의 시작은 항상 대문자 - 함수 컴포넌트 / 클래스 컴포넌트 - props 객체를 인자로 받고, 화면에 어..

event # event : 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 - 이벤트 이용하여 사용자와 상호작용 가능 - ex) onclick, onchange 버튼 두개로 day/night 모드 전환 버튼 하나로 day/night 모드 전환 - if문 사용

웹 호스팅 : github page # 호스팅 (클라우딩) : 인터넷에 연결된 컴퓨터를 빌려줌 # 웹 호스팅 -> 무료인 깃 허브 이용 (호스팅이 주 용도는 x ) GitHub: Let’s build from here GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com # 호스팅 하는 법 저장소 생성 - 파일 업로드 - setting - pages - main 브랜치 선택 - sav..

여행 사이트 만들기 조건1. 모든 요소가 가운데 정렬 상태여야 합니다. 조건2. ‘travel’ 로고는 가로 길이가 165px, 세로 길이가 58px입니다. 조건3. 'travel' 로고 위에는 80px의 여백이 있습니다. 조건4. 메뉴는 16px의 ‘Helvetica’ 폰트, 색상은 Hex값 기준 58595B, RGB 기준 (88, 89, 91)입니다. 조건5. 현재 머물러 있는 창의 메뉴의 폰트는 진하게 나옵니다. 조건6. 각 메뉴 사이의 간격은 20px이고, 매뉴의 위 아래로 60px의 여백이 있습니다. 조건7. 사진의 가로 길이는 페이지의 가로 길이의 90%입니다. 예를 들어 페이지의 가로 길이가 1,000px이면, 사진의 가로 길이는 900px이 되어야 합니다. - index.html Home ..

01. 텍스트 색 지정하기 # CSS에서 색을 표현하는 방식 1. 색 이름 지정하기 h1 { color: blue; } 2. RGB 값 h1 { color: rgb(83, 237, 65); 3. HEX 값 (16진법) h1 { color: #53ED41; } 02. 폰트 굵기 설정 # font-weiight - 사용 가능한 값은 100,200,300...900 까지 100 단위로 - font-weight : normal; 은 font-weight :400; 과 같음 - font-weight : bold; 은 font-weight :700; 과 같음 - 폰트나 브라우저에 따라 지원하는 폰트 굵기 값이 다름 font-weight: 900; 03. 텍스트정렬 # text_align - text-align: c..

01. 추상화 # 추상화 : 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것 - 클래스를 설계하는 것도 추상화 - 클래스 이름, 프로퍼티 이름, 메소드 이름을 직관적으로, 이해하기 쉽도록 잘 정하는 것이 중요 03. 캡슐화 # 캡슐화 : 객체의 특정 프로퍼티에 직접 접근하지 못하도록 막는 것 - 안전성 높일 수 있음 - 멤버변수에 대한 직접 접근을 제한하려는 목적으로(혹은 getter, setter 이름과 구분을 위한 목적으로) 멤버변수의 이름을 언더바(_)로 시작하게 지정 # setter method set email(address){ if(address.includes('@')){ this._email = address; }else{ throw new Error('invaild email..

01. 객체 지향 프로그래밍이란? # 객체 지향 프로그래밍 : 객체 간의 상호작용을 중심으로 하는 프로그래밍 : 프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를 작성하는 것 # 객체 - 변수 : 객체의 상태 - 함수 : 객체의 행동 # 절차 지향 프로그래밍 : 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것 02. 객체 만들기 1-1 : Object-Literal # Object Literal : 중괄호 안에 프로퍼티와 메소드를 나열하는 것 03. 객체 만들기 1-2 : Factory function # factory function : 객체를 생성해서 리턴하는 함수 04. 객체 만들기 2 : Constructor function # Constructor function(..

01, 모듈이란? # 모듈 : 간단하게, 자바스크립트 파일 하나 # 모듈화 : 복잡하고 많은 양의 코드를 기능에 따라 각각의 파일(모듈)로 나누어 관리 - 더 효율적인 코드 관리 가능 - 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 가능 02. 모듈 파일의 조건 # 모듈 스코프 : 모듈 파일이 가지는 독립적인 스코프 - 모듈 파일 내에서 선언한 함수나 변수는 모듈 파일 내에서만 사용이 가능 - HTML 파일에서 JS 파일을 불러올 때 모듈 스코프를 갖게 하려면 script 태그에 type 속성을 module로 지정해줘야 함 03. Live Server 설치하기 - 모듈 문법을 활용할 때에는 브라우저에서 직접 파일을 불러오는 방식이 아니라 서버를 통해 html 파일을 실행해야 함 => VS code ..

01. 배열 메소드Ⅰ. forEach와 map # 콜백함수 (CallBack Function) : 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 # forEach 함수 (method) Array.forEach(callbackfn: (value: number, index: number, array: number[]) => void, thisArg?: any): void : 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드 - 리턴 값이 없다. (undefined) - array 요소들을 제공된 함수로 한 번 실행 - 기존 배열 변경 가능 - 최대 반복 횟수는 최초 호출 시 요소의 개수 const numbers = [1,2,3,4]; numbers.forEach((x, i, arr)=..

01. 문장과 표현식 문장 (statements) : 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 표현식 (expressions) : 결과적으로 하나의 값이 되는 모든 코드 표현식인 문장 vs 표현식이 아닌 문장 - 둘을 구분하는 가장 간단한 방법은 우리가 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것 let x; x = 3; console.log(if (x < 5) { console.log('x는 5보다 작다'); } else { console.log('x는 5보다 크다'); }); const someloop = for (let i = 0; i < 5; i++) { console.log(i); }; - console.log 메소드의 아규먼트로 if문을 전달하거나..