본문 바로가기

FrontEnd33

BEM ( Block Element Modifier ) BEM이란? HTML 클래스 속성의 작명법 요소__일부분 : Underscore(LoDash)기호로 요소의 일부분을 표시 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시 BEM이 필요한 이유 요소__일부분 아래 코드를 먼저 보자. container내부에 name이라는 class가 있고, item내에도 name이라는 클래스가 있다. 후손 선택자를 사용해서 구분할 수도 있지만, 복잡해지기 때문에 명확하게 하기 위해서 BEM을 사용해서 바꿔 줄 수 있다. 아래 그림처럼 사용한다면 css만 봐도 어떤 부분의 요소를 선택해서 작성하였는지 알 수있다. 요소--상태 버튼의 경우 버튼을 클릭하기 전 후 그외의 상태들이 존재 할 수 있다. 또 버튼들이 동시에 가져야 할 속성들도 있을 수 있다. 아래코드.. 2022. 10. 11.
Generics Generics이란? any는 어떤 타입이 들어오는지 상관없이 때문에 타입마다 잘못된 내부 함수를 사용하거나 타입 추론할 때 유용하지 못하다. 하지만 Generic의 경우에는 컴파일 타임에 타입을 추론하여 return과 parameter의 타입을 추론할 수 있도록 도와준다. function hello(message: any): any { return message; } console.log(hello("Mark").length); console.log(hello(39).length); // undefined가 된다. function helloGeneric(message: T): T { return message; } console.log(helloGeneric('Mark').length); console.. 2022. 10. 10.
Class static / 싱글톤 / 상속 / Abstract static 사용하기 static키워드는 메모리에 멤버를 항상 상주하게 해주는 키워드이다. 그래서 클래스로 초기화하지 않아도 바로 사용할 수 있으며 모든 객체들이 같은 멤버(함수) 를 참조하게 된다. class Person { private static CITY = "Seoul"; public static hello() { console.log("안녕하세요", Person.CITY); } } const p1 = new Person(); Person.hello(); Singleton Pattern구현하기 싱글톤패턴은 같은 객체를 사용하기 위해 필요한 객체이다. 자세한 부분 - class ClassName { private static _INSTANCE: ClassName | null = null; priv.. 2022. 10. 9.
Class 정의 / 초기화 / Getter And Setter Class란 object를 만드는 blueprint이다. class내부에는 함수, 멤버 등 여러가지를 정의할 수 있다. 클래스를 정의하는 방법 class키워드를 이용하여 클래스를 만들 수 있다. class 이름은 보통 대문자를 이용한다. new를 이용하여 class를 통해 object를 만들 수 있다. contsructor를 이용하여 object를 생성하면서 값을 전달 할 수 있다. this를 이용해서 만들어진 object를 가르킬 수 있다. JS로 컴파일되면 es5의 경우 function으로 변경된다. class Person { name: string; constructor(name: string) { this.name = name; } } 클래스 초기화 멤버는 무조건적으로 변수가 들어가야만 한다. 직.. 2022. 10. 8.
Interface Interface란? 데이터의 골격을 정해준다. interface Person1 { name : string; age: number; }; function hello1(person: Person1): void { console.log(`안녕하세요. ${person.name} 입니다.`); }; const p1: Person1 = { name: 'Mark', age: 39, }; hello1(p1); 하지만 js로 컴파일 했을 때 나타나지는 않는다. typescript를 사용할 때에만 사용하는 문법이다. "use strict"; function hello1(person) { console.log(`안녕하세요. ${person.name} 입니다.`); }; const p1 = { name: 'Mark', a.. 2022. 10. 7.
TypeScript 컴파일러 The compilation context tsconfig.json파일내에 어떤 파일을 컴파일 할것인지 어떤 옵션을 적용할것인지를 정할 수 있다. 또, TypeScript를 파싱하거나 유효성 검증하는 맥락들을 설정할 수 있다. tsconfig schema 최상위 프로퍼티 compileOnSave extends compileOptions files include exclude references typeAcquisition tsNode compileOnSave 프로퍼티 save를 하게 되면 컴파일을 하게 해준다. visual studio 2015 with Typescript 1.8.4이상 atom-typescript 플러그인 "compileOnSave": true extends 외부 config파일을 im.. 2022. 9. 28.
TypeScript 타입호환성 서브타입 sub1는 1이라는 타입을 가지고 sup1는 number라는 타입을 가진다. sub1은 sup1의 서브타입이라서 sup1을 sub1에 대입할 수 있지만, 반대는 되지 않는다. number[]보다는 object가 더 상위 타입이므로 sub2 = sup2는 에러가 발생한다. 튜플보다는 Array가 상위타입이다. number보다는 any가 상위 타입이다. never보다는 number가 상위 타입이다. 상위 클래스가 상위 타입이다. 공변 같거나 서브타입인 경우 할당이 가능하다. 반병 함수의 매개변수 타입만 같거나 슈퍼타입인 경우, 할당이 가능하다. strictFunctionTypes 옵션 함수를 할당할 시에 함수의 매개변수 타입이 같거나 슈퍼타입인 경우가 아닌 경우, 에러를 통해 경고한다. 타입 별칭 .. 2022. 9. 27.
TypeScript의 옵션 타입이 없는 자바스크립트의 경우 함수의 사용법을 오해하여 잘못 사용 할 수 있다. 특히, 타입을 잘못 넣을 수 있기도 한데 타입스크립트 같은 경우에는 명시하여 컴파일 에러를 만들어 찾을 수 있게 할 수 있다. noImplicitAny 옵션 타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 `any`라고 판단하게 되면 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다. noImplicitAny옵션을 켜면 a라는 변수에 타입을 지정하지 않으면 에러를 발생시킨다. number는 undefined를 포함하고 있어서 코드는 f4(-5)에서 undefined를 리턴하게 되면서 잘못된 정보를 출력하게 된다. strictNullChecks 옵션 모든 타입에 자동으로 포함되어 있는 `null` 과 `un.. 2022. 9. 26.
TypeScript 타입 TypeScript의 타입 프로그램이 유용하려면, 가장 간단한 데이터 단위로 작업 할 수 있어야한다. TypeScript는 JavaScript에서 기대하는 것과 동일타입을 지원하며 추가적인 열거타입이 제공된다. JavaScript 타입 Boolean Number String Null Undefined Symbol Array 타입스크립트에서 추가적으로 제공하는 타입 추가타입 Any Void Never Unknown Tuple: Object형 boolean타입 let isOk: Boolean = true; Number타입 let decimal: number = 6; // 10진수 let hex: number = 0xf00d; // 16진수 let binary: number = 0b1010; // 2진수 le.. 2022. 9. 20.
TypeScript란? TypeScript란? 자바스크립트에서 타입을 추가해서 확장시킨 언어이다. 자바스크립트를 이해하면서 에러를 잡는 것을 도와주어 시간을 절약하고 코드들을 실행하기 전에 수정을 할 수 있도록 도와준다. 어떤 환경에서도 잘 작동하도록 되어있다. TypeScript의 특징 타입스크립트는 ' Programming Language 언어 '이다. 타입스크립트는 ' Compiled Language '이다. 전통적인 Compiled Language와는 다른 점이 많아 Transpile이라는 용어를 사용하기도 합니다. 자바스크립트는 Interpreted Language이다. Compiled Interpreted 컴파일 필요 불필요 시점 컴파일시점 코드가 실해되는 시점 TypeSciprt설치 방법 명령어 설 명 npm i .. 2022. 9. 20.
JavaScript DOM API DOM ( Document Object Model ) HTML에 있는 속성과 태그들을 객체화시켜 사용 할 수 있게 하는 것 document.querySelector(클래스 이름) HTML 요소 1개 검색/찾기 let boxEl = document.querySelector('.box'); document.querySelectorAll(클래스 이름) HTML요소 전부 찾기 const boxEls = document.querySelectorAll('.box'); document.addEventListener(이벤트, 함수) 이벤트 추가하기 boxEl.addEventListener('click', function () { console.log('Click!!!'); boxEl.classList.add('acti.. 2022. 9. 18.
JavaScript 정규표현식 정규표현식 문자열을 검색하고 대체하는데 사용 가능한 일종의 형식 언어다. 간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행한다. 정규식 패턴이 수행 내용과 매치가 잘 안되어 가독성이 많이 떨어지기 때문에 어렵다. 정규표현식의 역할 문자 검색 문자 대체 문자 추출 정규표현식 문법 // 생성자 new RegExp('표현', '옵션') new RegExp('[a-z], 'gi') // 리터럴 /표현/옵션 /[a-z]/gi 정규표현식 예제 생성자 방식 const str = ` 010-1234-5678 thesecong@gmail.com https://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown f.. 2022. 9. 17.
JavaScript Object Notation JSON이란? 자바스크립트 객체 표기법으로 경량 데이터를 송수신하는 용도로 많이 사용한다. 자바스크립트에서 사용하는 JSON형태는 좀 다를 수 있다. key는 따옴표를 쓰지 않고 그대로 쓴다. 특수기호가 있는 경우에만 단일 따옴표를 사용한다. JSON파일 가져다 사용하기 import myData from myData.json 자바스크립트 속성을 JSON타입으로 바꾸기 const json = JSON.stringify(user) JSON타입을 다시 자바스크립트 속성으로 바꾸기 const attr = JSON.parse(json) localStorage와 sessionStorage localStorage는 반영구적인 웹 데이터 저장공간이다. sessionStorage는 세션이 끝날때 사라지지만 localSt.. 2022. 9. 16.
JavaScript 모듈 모듈을 사용하는 방법 import 키워드에 가지고 올 객체나 이름을 지정하고 from 뒤에는 모듈의 경로을 적는다. import getType from ./getType Defalut export : function이름을 지정하지 않아도 되며 import 다음 적는 키워드로 사용하지 않아도 된다. js당 한개만 지정이 가능하다. Named export : function에 이름을 지정해야 하며 여러개를 지정해서 사용 할 수 있다. Defalut export function만드는 방법 export default function (data) { return Object.prototype.toString.call(data).slice(8, -1) } Named export function만드는 방법 expor.. 2022. 9. 16.
JavaScript 데이터 자바스크립트 데이터 명세 https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 기호표시 객체 데이터 객체 데이터를 정의하면 안에 값을 같지만 서로 다른 메모리를 가지기 때문에 다른 객체가 된다. const var1 = {k : 123} const var2 = {k : 123} Object.assign(target, source) source의 내용은 target에다가 덮여씌우고 .. 2022. 9. 15.
JavaScript 함수 함수 function sum(x, y) { return x + y } arguments 모든 인수를 가지고 있는 객체 데이터 function sum(x, y) { return arguments[0] + arguments[1] } 함수표현 (익명함수) let sum = function (x,y) { return x + y } 화살표함수 익명함수를 화살표함수로 축약해서 사용 할 수 있다. const doubleArrow = (x) => { return x * 2 } 축약형 단순 인수와 리턴만 있는 경우 축약해서 사용 할 수 있다. 아래와 같이 축약해서 쓸 수 있다. 인수가 한개 이면 (x)의 소괄호를 제외해도 된다. const doubleArrow = (x) => x * 2 객체 데이터 반환하는 방법 con.. 2022. 9. 13.
JavaScript 변수 변수 JavaScript는 var, let, const 3가지 변수가 있다. 변 수 변경 가능 레 벨 var 가능 블록 let 가능 블록 const 불가 함수 오른쪽 그림에서 변수가 var라면 var는 함수 레벨에서 정의되기 때문에 console에 undefined가 나온다. 하지만, const, let의 경우는 에러가 나온다. 형 변환 형 변환에 앞서 참과 같은 값과 거짓과 같은 값을 알아볼 필요가 있다. 참과 같은 값은 변수에 정당한 값이 존재하거나 true(boolean타입)을 가지게 된다. 거짓과 같은 값은 변수에 알수 없는 값이 가지거나 false(boolean타입)을 가지게 된다. 참과 같은 값 true, {}, [], 1, 2, 'false', -12, '3.14', ... 거짓과 같은 값 .. 2022. 9. 12.
JavaScript 조건문과 반복 조건문 if 문 조건문 처음은 if로 시작한다. 추가 조건을 넣고 싶으면 else if로 정의한다. 그 외 나머지 모두를 하고 싶다면 else로 정의한다. if (a == 0) { console.log('a is 0') } else if (a == 2) { console.log('a is 2') } else if (a == 4) { console.log('a is 4') } else { console.log('rest...') } switch문 switch(변수)를 넣는다. case로 조건과 로직을 넣는다. break를 붙여줘야 한다. 붙이지 않으면 아래 조건들도 검사하게 된다. defalut는 if의 else와 같은 의미이다. switch(a) { case a === 0 : console.log('a .. 2022. 9. 12.
JavaScript 연산자 JavaScript 타입 확인하기 typeof키워드를 사용해서 데이터 타입을 확인 할 수 있지만 정확하지 않다. console.log(typeof 'hello world') // string console.log(typeof 123) // number console.log(typeof false) // boolean console.log(typeof null) // object console.log(typeof {}) // object console.log(typeof []) // object getType함수를 만들어 확인하여 더 정확하게 타입을 확인 할 수 있다. function getType(data) { return Object.prototype.toString.call(data).slice(8,.. 2022. 9. 12.
Node.js란? Node.js란? Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavsScript 런타임이다. 쉽게 풀어서 Chrom V8 기반 환경에서 동작하는 JavaScript환경이라는 뜻이다. 웹 브라우저는 HTML, CSS, JavaScript로 동작하여야 하지만 이러한 언어들만으로 언어를 작성하는 것은 비효율적이다. Node.js에서 여러가지 프레임 워크들의 도움을 받아 작성한 후 웹브라우저에서는 HTML, CSS, JavaScript로 변환하여 동작하도록 도와준다. Node Version Manager Node Version Manager, 또는 NVM이라고 불리는 이 도구는 Node.js의 버전을 관리해주는 도구이다. 실제로는 웹 브라우저가 하나의 버전이 아니라 여러 도구와 도구마.. 2022. 9. 12.
CSS변환 변환 회전이나 원근법 기울임 등 전환보다 더 디테일한 애니매이션 효과를 준다. 2D 변환과 3D 변환 함수가 있다. 2D변환 함수 함 수 명 설 명 단 위 translate(x,y) x축, y축 동시 이동 px translateX(x) x축 이동 trasnlateY(y) y축 이동 scale(x, y) x, y 크기 변경 배수 scaleX(x) x축 scaleY(y) y축 rotate(degree) 회전 deg skew(x, y) x, y축 기울임 skewX(x) x축 기울임 skewY(y) y축 기울임 matrix(n,n,n,n,n,n) 2차원 변환 효과 3D변환 함수 함 수 명 설 명 단 위 translateZ(z) z축 이동 px translate3d(x, y, z) x, y, z축 이동 scale.. 2022. 9. 11.
CSS전환 전환(transition) 요소를 다른 요소로 변환시키는 것 전환 속성 속 성 설 명 값 transition-property 요소의 전환(시작과 끝)효과를 지정하는 단축 속성 all : 모든 속성에 적용 속성 이름 : 전환효과를 사용할 속성 이름 명시 transition-duration 요소의 전환효과의 지속시간 속성 0s : 지속시간 없음 시간 : 지속시간 값 transition-timing-function 전환 효과의 타이밍(easing)함수를 지정 여러가지 함수가 있음 transition-delay 전환 효과가 몇 초 뒤에 시작할지 대기시간 지정 0s : 대기시간 없음 시간 : 대기시간(s) 지정 transition-property와 transition duration 속성 1초 동안 width 3.. 2022. 9. 11.
CSS정렬 - Flex Items Flex Items 속성 속 성 설 명 값 order Flex Item의 순서 0 : 순서 없음 숫자 : 숫자가 작을 수록 먼저 flex-grow Flex Item의 증가 너비 비율 0 : 증가 비율 없음 숫자 : 증가 비율 flex-shrink Flex Item의 감소 너비 비율 1 : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율 flex-basis Flex Item의 공간 배분 전 기본 너비 auto : 요소의 content 너비 단위 : px, em, rem 등 단위로 지정 order 속성 작을수록 정렬된다. flex-grow 속성 Flex Container에 나머지가 있을 경우 나머지 부분을 어느 비율로 채울 것인가를 계산 flex-grow가 0일 경우 지정해준 크기.. 2022. 9. 11.
CSS 정렬 - Flex Container (2) Flex Container 속성( 주황색 defalut ) 속 성 설 명 값 flex-wrap Flex Items 묶음(줄 바꿈) 여부 nowrap : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 justify-content 주 축의 정렬 방법 flex-start : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝으로 정렬 center : Flex Items 가운데 정렬 space-between : 각 Flex Item 사이를 균등하게 정렬 space-around : 각 Flex Item의 외부 여백을 균등하게 정렬 align-content 교차 축의 여러 줄 정렬하는 방법 stretch : Flex Item.. 2022. 9. 11.
CSS 정렬 - Flex Container (1) 플렉스 1차원 레이아웃을 정렬하는 방법 * 1차원이라고 하는 이유? x축이나 y축으로 하나의 축으로 정렬하기 때문 Flex정렬하는 속성은 Flex Container(부모요소)에 지정하는 속성과 Felx Item(자식요소)에 지정하는 속성으로 나뉘어져 있다. Flex Container 속성 속 성 설 명 값 display Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 flex-direction 주 축을 설정 row : 행 축 ( 좌 -> 우 ) row-reverse : 행 축 ( 우 -> 좌 ) column : 열 축 ( 위 -> 아래 ) column-rever.. 2022. 9. 11.
CSS 배치 배치 속성 속 성 설 명 값 position 요소의 위치 지정 기준 static : 기준 없음 relative : 요소 자신을 기준 absolute : 위치 상 부모 요소를 기준 fixed : 뷰포트(브라우저)를 기준 sticky : 스크롤 영역 기준 top, bottom, left, right 요소의 각 방향별 거리 지정 auto : 브라우저가 계산 단위 : px, em, rem등 단위로 지정 z-index position 속성의 값이 있는 경우 위에 쌓임(static제외) → z-index속성의 값이 높을수록 위에 쌓임 → HTML의 다음 구조일수록 위에 쌓임 auto : 부모 요소와 동일한 쌓임 정도 숫자 : 숫자가 높을 수록 위에 쌓임 position속성의 값들 relative : 디폴드로 자신이.. 2022. 9. 9.
CSS 글꼴과 배경 글꼴 속성 속 성 설 명 값 font-style 글자의 기울기 normal : 기울기 없음 italic : 이텔릭체 oblique : 기울어진 글자 font-weight 글자의 두께(가중치) nornal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위(부모) 요소보다 더 두껍게 lighter : 상위(부모) 요소보다 더 얇기 100 ~ 900 : 100단위 숫자 9개 font-size 글자의 크기 16px : 기본크기 단위 : px, em, rem등 단위로 지정 % : 부모 요소의 폰트 크기에 대한 비율 samller : 상위(부모) 요소보다 작은 크기 larger : 상위(부모) 요소보다 큰 크기 xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기 (7단계.. 2022. 9. 9.
CSS 박스모델 (2) CSS 박스모델 속 성 설 명 값 border 요소의 테투리 선을 설정함 요소가 커짐 border: 선-두께 선-종류 선-색상; border의 세부속성 세 부 속 성 설 명 사용법 값 border-width 선의 두께 top, right, left, bottom (top, bottom), (left, right) top, (left, right), bottom top, right, bottom, left border-style 선의 스타일 none : 선없음 (defalut) solid : 실선 dotted : 점선 dashed : 파선 double : 두 줄 선 groove : 홈이 파져있는 모양 ridge : 솟은 모양 inset : 요소 전체가 있는 모양 outset : 요소 전체가 나온 모양 bo.. 2022. 9. 9.
CSS 박스모델 (1) css의 단위 단 위 설 명 px 한 픽셀 % 백분율 em 조상 요소의 글꼴 크기기준으로 해서 크기를 사용 rem 루트 요소(html)의 글꼴 크기 vw 뷰포트 가로 너비의 백분율 vh 뷰포트 세로 너비의 백분율 em예제 .parent { width: 300px; height: 200px; background-color: royalblue; } .child { width: 20em; height: 50%; background-color: orange; } rem예제 CSS html { font-size: 14px; } HTML .parent { width: 300px; height: 200px; background-color: royalblue; } .child { width: 20rem; height:.. 2022. 9. 9.
CSS 속성 박스모델 : HTML요소의 기본적인 모양을 만들어 내는 것 가로, 세로, 내부여백, 외부여백 글꼴, 문자 : 폰트 및 글자 크기 두께 글자와 관련된 제어할 수 있다 배경 : 배경 이미지, 배경 색상을 제어 배치 : 원하는 위치에다가 가져다 놓을 수 있음 플렉스(정렬) : 수평 정렬하는 기능 전환 : 상태가 변할 때 전/후 상태를 매끄럽게 애니매이션 해주는 기능 변환 : 크기를 변환, 회전을 해줌 2D변환과 3D변환이 있음 띄움 : 요소를 공중에 띄움; 띄워진 주변으로 글자가 흘러가면서 작성 가능 애니매이션 : 전환보다 더 복잡한 애니매이션 기능이 가능 그리드 : 2차원의 레이아웃을 만들기 위한 기능 다단 : 하나의 페이지에서 단을 여러개로 나눌 수 있음 필터 : 사진 필터 2022. 9. 9.

티스토리툴바