소소해서 소중한 일상

Interfaces function hello1(person: { name: string; age: number }): void { console.log(`안녕하세요 ${person.name}입니다.`); } const p1: { name: string; age: number } = { name: "Mark", age: 39, }; hello1(p1); // { name: string; age: number } 대신 interface Person1 { name: string; age: number; } function hello1(person: Person1): void { console.log(`안녕하세요 ${person.name}입니다.`); } const p1: Person1 = { name: "M..

TypeScript 란 무엇인가 https://www.typescriptlang.org/ TypeScript is JavaScript with syntax for types. By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code Any brower, any OS, anywhere Javascript runs. Entirely Open Source. 타입스크립트는 'Programming Language 언어' 입니다. 타입스크립트는 'Compiled Language' 입니다. 전통적인 Compiled Language 와는 다른 점이 많습니다. 그래서 'Transp..

React ?? 라이브러리는 개발 편의를 위한 도구의 모음 (= 공구) 프레임워크는 기반 구조까지 잡혀있음 (= 공장) React를 배워야 하는 이유 생태계 (구글링) 크다 해당 기술에 대한 관심도/ 실제 사용 빈도/ 사용자수 관련 라이브러리(도구)가 많고, 문제 해결할 방법을 찾기 쉽고, 나와 같은 고민을 한 혹은 했던 사람이 많고, 실무에서 사용할 확률이 높다. 새로운 기술을 배우는 시작점으로 좋다 생태계가 점점 성숙해지면서 기술적으로 확실한 장점이 있다. DOM (Document Object Model) 문서를 논리 트리로 표현한다. https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model 순수 자바스크립 특정 라이브러리나 프레임워크를..

JS 데이터 MDN 문자 String: 전역 객체는 문자열(문자의 나열)의 생성자입니다. 자주 사용되는 Methods String.prototype.indexOf() indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 - 1을 반환합니다. const result = "Hello world!".indexOf("world"); const result2 = "Hello world!".indexOf("huisu"); console.log(result); // 6 console.log(result2); // -1 length() 메소드는 문자열의 길이를 측정하여 숫자로 반환한다 const str = "01 23"; console.log(..

데이터 타입 확인 // getType.js export default function getType(data) { return Object.prototype.toString.call(data).slice(8, -1); } // main.js import getType from './getType'; console.log(getType(123)); console.log(getType(false)); console.log(getType(null)); console.log(getType({})); console.log(getType([])); 산술, 할당 연산자 arithmetic operator console.log(1 + 2); console.log(5 - 8); console.log(3 *..

개요 표기법 dash-case(kabab-case): HTML, CSS snake_case: HTML, CSS camelCase: Javascript ParcelCase: Javascript Zero-based Numbering 0 기반 번호 매기기! 특수한 경우를 제외하고 0부터 숫자를 시작합니다 주석 Comments // 한 줄 메모 /* 한 줄 메모 */ /** * 여러 줄 * 메모1 * 메모2 * / 데이터 종류 (자료형) String (문자 데이터) 따옴표를 사용합니다. let myName = 'huisu'; let email = 'my email'; let hello = `Hello ${myName}`; console.log(myName); // huisu cons..

전환 transition: 속성명 지속시간 타이밍함수 대기시간; 요소의 전환(시작과 끝)효과를 지정하는 단축 속성 지속시간: 단축형으로 작성할 때, 필수 포함 속성! transition-property 전환 효과를 사용할 속성 이름을 지정 all: 기본값 모든 속성에 적용 속성이름: 전환 효과를 사용할 속석 이름 명시 transition-duration 전환 효과의 지속시간을 지정 0s: 기본값 전환 효과 없음 시간: 지속시간(s)을 지정 transition-timing-functoin 전환 효과의 타이밍(Easing) 함수를 지정 ease: 기본값 느리게 빠르게 느리게 = cubic-bezier(0.25, 0.1, 0.25, 0.1) linear: 일정하게 = cubic-bezier(0, 0, 1, 1..

배치 position (기준을 잡고 위치를 지정하라!) 요소의 위치 지정 기준 static: 기본값, 기준없음 relative: 요소 자신을 기준 (잘 사용되지 않음) absolute: 위치 상 부모 요소를 기준 (위치 상 부모 요소를 꼭 확인해야 함!) fixed: 뷰포트(브라우저)기준 CSS 속성: top, bottom, left, right, z-index (음수 사용 가능) 요소의 각 방향별 거리 지정 auto: 기본값 브라우저가 계산 단위: px, em, rem 등 단위로 지정 1 2 3 body { height: 3000px; } .container { width: 300px; background-color: royalblue; position: relative; /* position 상의 부..

기본 문법, 주석 선택자 { 속성 : 값 ; } 선택자 (Selector) : 스타일(CSS)을 적용할 대상 속성 (Property) : 스타일(CSS)의 종류 값 (Value) : 스타일(CSS)의 값 선택자 { 속성 : 값 ; 속성 : 값 ; } : 2개이상 부여시 /* 주석: 설명 작성 */ div { color: red; margin: 20px; } 선언 방식 내장 방식 의 내용 (Contents) 으로 스타일을 작성하는 방식 CSS 내용을 HTML 안에 작성 장점: 별도의 CSS 파일을 만들지 않아도 됨 단점: CSS 내용이 많아지면 HTML 문서 내에서 처리하기 복잡함, 유지보수 어려움 링크방식 로 외부 CSS 문서를 가져와서 연결하는 방식 병렬 방식 .css_link { color: gree..

기본 문법 내용 : 요소 Element : 시작 : 종료 내용 : 요소의 내용 Content 부모와 자식 관계의 이해 : 들여쓰기(Indent)를 통해 시각적으로 구분 내용 부모요소 (자식요소 (내용)) 코드를 정리 하면서 작성하기 내용 상위요소 (조상요소) : 나를 기준으로 감싸고 있는 모든 부모 요소 빈 태그 : 뒤쪽에 태그가 없음, 빈 태그라고도 불린다 : 편리함, HTML 1/2/3/4/5 : 안전함, 명확함 XHTML / HTML5 HTML5 : 둘다 가능 내용 속성 : Attribute 기능의 확장 rel : html과의 관계 src : 삽입할 대상 파일의 경로 alt : 삽입할 대상의 이름 ( img 대신 나올) 이미지를 삽입 하는 요소, 속성이 필요하다 어떤 데이터의 타입을 받을지 속성이 ..