본문 바로가기

전체 글

(68)
front-end 국비과정 일차 24일차 학습일지 :SCSS SCSS란? CSS작성을 더 효율적으로 작성 할 수 있는 문법이다 브라우저에선 동작하지않기 때문에 번들러(bundler)를 이용해 CSS로 컴파일(변환)해 줘야 한다 SCSS를 사용할때에는 parcel-bundler라는 컴파일 도구를 필요로 하기때문에 설치해야한다 parcel-bundler 설치법 1 프로젝트 터미널에서 npm init -y 라고 명시 2 npm i -D parcel-bundler라고 명시 -D를 붙여주는이유는 브라우저에선 SCSS가 동작하지 않기때문에 개발 의존성 패키지라는 것을 명시해 주는 용도 3 packge.json에 명시된 script에 bulid와 dev라고 명시 bulid:컴파일 + 링크의 느낌이다 즉 컴파일된 파일을 실행가능한 형태로만든다 dev: 이름이 꼭 dev일 필요는..
front-end 국비과정 일차 25일차 학습일지 JS:bundler(webpack,parcel) --- bundler --- parcel-bundler : 1 구성 없는 단순한 자동 번들링 2 소/중형 프로젝트에 적함 webpack: 1 매우 꼼꼼한 구성 2 중/대형 프로젝트에 적합 --parcel-plugin-static-files-copy--- 1parcel-bundler를 사용하여 개발 서버를 열때 dist에 있는 파일이 브라우저에 렌더링 되는데 ico파일 같은 이미지를 추가할 때 dist폴더에 해당 이미지가 존재해야 브라우저에 렌더링 된다 2이때 우리는 매번 dist폴더에 이미지를 복사 붙여넣기 할 수 없기때문에 parcel-plugin-static-files-copy라는 npm 라이브러리에 도움을 받을 수 있다. parcel-plugin-static-files-copy란? 프로젝트에 이미지..
front-end 국비과정 일차 23일차 학습일지 JS: Error,REST API,DOM error의 종류 1 rangeError : 숫자나 배열의 유효 범위를 벗어났을때 출력되는 Error이다 2 ReferenceError: 정의되지않은 함수,변수를 잘못 참조했을 때 출력되는 Error이다 3 TyepError : 변수나 파라미터가 유효한 데이터 타입이 아닐 때 출력되는 Error이다 4 AggregateError:하나의 동작이 다수의 오류를 발생시키는 경우 다수의 오류를 하나의 오류로 그룹화하여 출력되는 Error이다 5 SyntaxError: 작성된 문법이 잘못되었을 때 출력되는 Error이다 6 InternalError: JS엔진 내부에서 오류가 발생했을때 출력되는 Error이다 Strict Mode(엄격 모드) 1JS문법을 엄격하게 체크하는 모드이다 2JS는 변수를 선언하지않아도 값..
front-end 국비과정 일차 22일차 학습일지 TypeScript: 타입 시스템이란? 1Typescript컴파일러에게 타입을 명시적으로 지정하는 시스템 2타입을 명시적으로 지정하지 않았을 경우 컴파일러가 타입을 추론한다 nolmplicitAny 옵션 타입을 명시적으로 지정하지 않았고 typescript 컴파일러가 타입 시스템에 의해 자동으로 타입을 추론 할 때 any라고 판단하면 컴파일error를 발생시켜 개발자에게 타입을 명시하라고 유도하는 옵션이다 strictNullChecks 옵션 모든 타입에 자동으로 null과 undefined가 포함되어있는데, 모든 타입에서 null과 undefined를 제거해주는 옵션 nolmplicitReturns 옵션 함수안에 모든 코드가 값을 리턴하지 않으면 컴파일 error를 발생시킴 Structural Type Systemd이란?: ..
front-end 국비과정 일차 21일차 학습일지 TypeScript:설치와 실행법,Type Annotation typeScript란? 타입스크립트는 자바스크립트에 타입을 부여한 언어이다 JS와 다르게 브라우저에서 동작하기위해 컴파일(compile) 즉 변환 과정을 거쳐야한다. typeScript를 쓰는이유 1JS는 브라우저에서 돌아갈때 속도는 빠른데 버그 발생시 버그잡기어려움 2typescript는 버그 발생시 버그잡기쉬움 3프로젝트 규모커지면 버그 잡는게 더 어려워짐 4고로 시간 좀 걸려도 버그잡기 쉬운 typescript가 JS보다 안정적이기때문에 사용한다. 타입스크립트 설치와 실행법 1터미널에서 npm init -y를 입력하여 package.json과 package-locks.json을 생성한다 2터미널에서 npm i typescript라고 명시하면 package.json에 typescript설치 가능 ty..
front-end 국비과정 일차 20일차 학습일지: this, call(),apply(),bind() 1 this란? this 키워드를 소유하는 소유자를 가리킴 2 this의 소유자가 누군지에 따라 정의되는 내용이 달라짐 즉 this가 가리키는 대상이 달라짐 // --- this를 문서(document)에서 출력한 경우 --- ex) console.log(this) 1 this를 문서에서 출력할 경우 this의 소유자는 window이다 2 위코드는 this를 문서(document)에서 출력한 예시이다 3 JS란확장자를 가진파일은 하나의 문서임 그 문서에서 this를 출력했으니 this의 소유자는 window임 window는 최상위 객체임 4 console창에 출력값 = {}(객체)를 반환 여기서 {}는 빈객체인것 으로 생각 할 수있지만 window객체임 단지 window가 생략된 것 --- method에..
front-end 국비과정 일차 19일차 학습일지:정규 표현식 --- 정규 표현식 --- 정규표현식이란? 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 검색하거나 바꾸는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이다. 플레그(flag)란? 작성한 정규표현식에 기능을 부여해주는 역할을 한다. 정규표현식의 사용방법은 2가지가있다 1 생성자 함수에 사용하는 방식 생성자 함수에 정규표현식을 담아서 사용하는 방식이다 2 리터럴 방식 정규 표현식을 /로 감싸 사용하는 방식이다 ex) const test1 = new RegExp("^hello") //생성자 함수로 정규표현식을 작성한 예시 const test2 = new RegExp("^hello","gi") 여기서 RegExp는 전역객체로써 정규표현식을 생성하는 기능을한다. // 1번파라미터 = 표현식 2번..
front-end 국비과정 일차 18일차 학습일지:JS데이터의 불변성과 가변성,Json사용법,JS파일 import,export , lodash사용법,Storage에대한 개념,깊은복사와 얕은복사, 메모리란? 코드 내용이 저장되는 영역이다. JS 메모리 할당 시점 JS는 값을 선언 할때 데이터를 자동으로 메모리를 할당한다. 함수를 호출하여 새로운 값이 발생 할 경우에도 메모리를 할당한다. 가비지 콜렉션(garbage collection)이란? JS로 메모리에 등록된 내용이 쓸모없어지면 가비지 콜렉션이란 놈이 메모리를 돌면서 쓸모없어진 내용을 메모리에서 삭제한다 --- 데이터 불변성 --- 원시데이터 : 기본데이터를 의미한다 String,Number,Boolen,undefined,null 원시데이터에서 데이터 불변성 어떠한 변수에 값을 저장하면 해당값은 메모리에 특정 주소에 저장된다 새로운 변수에 기존의 있던 변수의 값과 동일하게 설정할때 새로운 변수에 값은 새로운 메모리에 주소를 만드는 것이 아니라..