# FE
[FE/1주차] Closure를 이용한 Debounce
개념 Debounce는 계속해서 어떤 요청이 들어올 때, 모든 요청을 처리하지 않고, 마지막 요청에 대해서만 응답을 하는 기법을 말한다. 모든 요청에 대응하지 않아도 된다는 점에서, 성능 향상을 노릴 수 있다. 사용법 Debounce는 많은 웹 사이트에서 활용하는 input 창에서 활용할 수 있다. 예를 들어, input 창에 사용자가 글자를 입력할 ...
Web Animation
애니메이션은 반복적인 움직임 처리를 의미하며, CSS3의 transition과 transform 속성 및 javascript 이용해서 구현이 가능하다.일반적으로 CSS 이용하는 것이 javascript 이용한 동작보다 빠르다.1초 동안 화면에 표현할 수 있는 프레임 수
Vue 장단점 (feat. 리액트)
Vue의 장점:Template와 Render Function을 모두 사용할 수 있는 옵션 간편한 Syntax와 프로젝트 설정빠른 렌더링과 더 작은 용량React의 장점:큰 규모에서 더 빛을 발하고, 테스팅이 수월Web과 Navtive 앱 개발에 모두 사용 가능더 큰 개
조건문이 아닐 때 사용하는 조건연산자 (&&, || ) (javascript) - FE study15
1. 조건연산자 (&&, ||) && : 조건 and를 의미함 (모두 tru여야 true) || : 조건 or을 의미함 (하나라도 true이면 true) 2. 조건문에서의 조건연산자 3. 조건문이 아닐 때 사용하는 조건연산자 맛보기 잉? 이게뭐지... > 자료형에서 false 로 기록되는 ("", null, undefined, NaN, 0) 을...
웹에서의 프론트 서버 / 백엔드 서버 (개념) - 네트워크 study6
1. 서버? 서버(server) : 클라이언트에게 네트워크를 통해 서비스하는 컴퓨터를 의미한다. 말그대로 어떤 요청을 원하는 대상에게 요청에 대한 응답을 넘겨주는 모든 것들을 (serve + er) 서버라고 함. 그렇다면 웹에서는 서버는 어떻게 동작할까? 2. 웹에서의 서버 먼저 웹 환경에서는 브라우저가 클라이언트 역할을 한다. 주소에 어떤 도...
CSS vs SASS vs styled Component - FE study13
1. CSS >Cascading Style Sheet : 웹의 디자인을 담당(표준) App.js App.css 해당 js 파일에 css파일을 import 해서 사용. > 특징 : 메뉴얼적인 방법으로 직접 Class , ID 네이밍하며 작성한다. 사용법이 간단함. 하지만 요소들이 많아질수록 관리가 힘들어지고 직관성이 떨어짐. 2. SASS > Synt...
css 선택자 모음
1. 전체 선택자 2. 태그 선택자 3. Class 선택자 4. ID 선택자 4-1. Class vs ID > 1. Class 선택자는 재사용성이 많은 스타일 (box) 에 , ID는 유일한 정보를 가지는 스타일 (selectedBox) 에 사용. > 2. 우선순위는 ID가 Class 보다 높다. 5. div.box / div#selectedBo...
자바스크립트 this, call(), apply(), bind() - FE study11
1. this JAVA 의 경우, this 는 클래스의 인스턴트의 레퍼런스 변수를 의미하지만, JAVASCRIPT 의 경우, this 는 현재 실행 문맥에서의 호출자를 의미한다. 자바스크립트 작동원리(실행 컨텍스트) 2. call(), apply() function.call(obj) 형태로 쓰이는 데, 앞의 함수를 실행하는데 obj 를 this 로 사...
ES6 개념, 바벨(Babel), ECMAscript - FE study9
1. ES6? ECMAscript : 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공. Javascript : ECMAScript 사양을 준수하는 범용 스크립팅 언어. Javasciprt는 ECMAscript 라는 코어와 DOM(Document Object Model), BOM(Browser Object Model) 두개의 모델로 이루어...
자바스크립트 generator, redux-saga (생성기, 리덕스 사가) - FE study7
1. Generator (생성기) Generator : 빠져나갔다가 나중에 다시 돌아와도 사용가능한 함수. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있다. 사용 : 제네레이터 함수가 호출되면 바로 실행하지 않고 iterator(반복기) 객체로 반환되고 next() 메소드를 사용하면 함수의 yield 부분의 값을 돌려주고 멈춤. (다음...
css 속성 모음
1. 내부폰트 적용 2. Flex container 3. Flex item 4. border 5. color 6. size 7. image 8. position 9.pseudo class 10. transform 11. filter 12. text 13. media query (반응형)
SPA 프레임워크/라이브러리 React, Vue, Angular - FE study6
1. SPA 개념 SPA : 단일 페이지 애플리케이션 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트이다. (위키백과) 기존방식 : link를 통해 refresh (매 동작마다 페이지 새로고침과 리렌더링) SPA : 한 페이지에서 리렌더링 없이 필요한 동작 수행...
자바스크립트 변수(var, let, const)와 스코프(function vs block) - FE study5
1. var let const var : 변수 재선언 가능 const, let : 변수 재선언 불가능 const : 변수 재할당 불가능 (상수) let : 변수 재할당 가능 var : functional-scope 로 호이스팅됨 const, let : block-scope 로 호이스팅됨 출력 : undefined 출력 : 에러! 즉, let...
자바스크립트 작동 원리 (실행 컨텍스트, 호이스팅, 클로저) - FE study4
1. 개념 실행 컨텍스트 : 코드들이 실행되기 위한 환경 즉, 자바스크립트의 실행 컨텍스트는 자바스크립트가 어떠한 방식으로 코드들이 실행되는지에 대한 문법들을 이야기한다. 2. 컨텍스트의 4가지 원칙 먼저 전역 컨텍스트가 생성되고 함수 호출시마다 컨텍스트가 생성됨. 컨텍스트 안에는 변수객체(arguments, variable), scope chai...
자바스크립트의 비동기 방식(콜백, promise, async await) -FE study3
1. 동기, 비동기 개념 동기(synchronous) 방식 : 코드의 연산이 하나의 프로세스로 동시에 진행됨. 즉, 코드 연산 한줄 한줄이 프로세스 과정 중 하나이며, 순차적으로 코드가 읽히므로, 다음 작업을 위해서는 그 전 작업이 완료되야함. 장점 : 연산이 직관적이고 간단함. 비동기(asynchronous) 방식 : 코드의 연산이 동시에 진행되는...
DOM / Virtual DOM / 브라우저 렌더링 - FE study2
1.DOM 이란? DOM (Document Object Model) : DOM은 HTML,XML 문서의 객체 기반 표현 방식입니다. image.png 그러므로, document를 포함한 html, 그 아래의 트리구조의 태그들 모두 객체이며 모두 객체로서 접근 및 컨트롤 할 수 있다. HTML (HyperText Markup Language) : 웹페...
MVC패턴 - FE study1
1. 개념 MVC패턴 : 디자인패턴 중 하나이고 Model View Controller의 약자이다. 디자인패턴 : 바퀴를 다시 발명하지마라! - 소프트웨어를 설계할 때 문제를 해결함에 있어 재사용할 할 수있는 훌륭한 해결책. 쉽게 사용가능한 라이브러리나 프레임워크도 여기에 해당. 2. MVC 패턴 image.png 쉽게 말해서 Model은 data를...