프론트엔드 공부
1.MVC패턴 - FE study1
1. 개념 MVC패턴 : 디자인패턴 중 하나이고 Model View Controller의 약자이다. 디자인패턴 : 바퀴를 다시 발명하지마라! - 소프트웨어를 설계할 때 문제를 해결함에 있어 재사용할 할 수있는 훌륭한 해결책. 쉽게 사용가능한 라이브러리나 프레임워크도 여기에 해당. 2. MVC 패턴 image.png 쉽게 말해서 Model은 data를...
2.DOM / Virtual DOM / 브라우저 렌더링 - FE study2
1.DOM 이란? DOM (Document Object Model) : DOM은 HTML,XML 문서의 객체 기반 표현 방식입니다. image.png 그러므로, document를 포함한 html, 그 아래의 트리구조의 태그들 모두 객체이며 모두 객체로서 접근 및 컨트롤 할 수 있다. HTML (HyperText Markup Language) : 웹페...
3.자바스크립트의 비동기 방식(콜백, promise, async await) -FE study3
1. 동기, 비동기 개념 동기(synchronous) 방식 : 코드의 연산이 하나의 프로세스로 동시에 진행됨. 즉, 코드 연산 한줄 한줄이 프로세스 과정 중 하나이며, 순차적으로 코드가 읽히므로, 다음 작업을 위해서는 그 전 작업이 완료되야함. 장점 : 연산이 직관적이고 간단함. 비동기(asynchronous) 방식 : 코드의 연산이 동시에 진행되는...
4.자바스크립트 작동 원리 (실행 컨텍스트, 호이스팅, 클로저) - FE study4
1. 개념 실행 컨텍스트 : 코드들이 실행되기 위한 환경 즉, 자바스크립트의 실행 컨텍스트는 자바스크립트가 어떠한 방식으로 코드들이 실행되는지에 대한 문법들을 이야기한다. 2. 컨텍스트의 4가지 원칙 먼저 전역 컨텍스트가 생성되고 함수 호출시마다 컨텍스트가 생성됨. 컨텍스트 안에는 변수객체(arguments, variable), scope chai...
5.자바스크립트 변수(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...
6.SPA 프레임워크/라이브러리 React, Vue, Angular - FE study6
1. SPA 개념 SPA : 단일 페이지 애플리케이션 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트이다. (위키백과) 기존방식 : link를 통해 refresh (매 동작마다 페이지 새로고침과 리렌더링) SPA : 한 페이지에서 리렌더링 없이 필요한 동작 수행...
7.자바스크립트 generator, redux-saga (생성기, 리덕스 사가) - FE study7
1. Generator (생성기) Generator : 빠져나갔다가 나중에 다시 돌아와도 사용가능한 함수. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있다. 사용 : 제네레이터 함수가 호출되면 바로 실행하지 않고 iterator(반복기) 객체로 반환되고 next() 메소드를 사용하면 함수의 yield 부분의 값을 돌려주고 멈춤. (다음...
8.함수형 프로그래밍 vs 객체지향 프로그래밍 (feat. 리액트, 리액트 hooks) - FE study8
1. 객체지향 프로그래밍 (OOP) 캡슐화 : 재사용 될만한 상태나 메소드들을 저장해두고 사용할 때 마다 불러올 수 있게 함.이렇게 작성한 코드들은 은닉성을 띈다. 객체 : 이렇게 class로 캡슐화된 코드들을 필요할 때마다 복사해서 하나의 데이터(object) 로 사용. 2. 함수형 프로그래밍 (functional) 모듈화 : 함수형 프로그래밍의 ...
9.ES6 개념, 바벨(Babel), ECMAscript - FE study9
1. ES6? ECMAscript : 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공. Javascript : ECMAScript 사양을 준수하는 범용 스크립팅 언어. Javasciprt는 ECMAscript 라는 코어와 DOM(Document Object Model), BOM(Browser Object Model) 두개의 모델로 이루어...
10.클라이언트 사이드 렌더링 vs 서버 사이드 렌더링 - FE study10
1. 개념 클라이언트 사이드 렌더링 : DOM 렌더링을 클라이언트에서 실행 (Browser) : 서버에서 json만 받아오고 클라이언트 측에서 화면을 구성하고 기능을 수행. (React, 등) 서버 사이드 렌더링 : DOM 렌더링을 서버에서 실행 (Server) : 서버 측에서 화면을 구성하고 기능을 수행하는 html을 작성해서 클라이언트에 뿌림. (Js...
11.자바스크립트 this, call(), apply(), bind() - FE study11
1. this JAVA 의 경우, this 는 클래스의 인스턴트의 레퍼런스 변수를 의미하지만, JAVASCRIPT 의 경우, this 는 현재 실행 문맥에서의 호출자를 의미한다. 자바스크립트 작동원리(실행 컨텍스트) 2. call(), apply() function.call(obj) 형태로 쓰이는 데, 앞의 함수를 실행하는데 obj 를 this 로 사...
12.Ionic (아이오닉) vs React Native (리액트 네이티브) (feat. 하이브리드 앱) - FE study12
1. 사전지식 반응형 웹 (웹) : html, css, js 로 이루어진 웹을 모바일 상의 화면으로 보는 것. 네이티브 앱 (앱): android(코틀린) 혹은 ios(스위프트) 환경의 코드로 제작된 모바일용 어플리케이션 하이브리드 앱 (앱): 웹 코드로 이용해 각 플랫폼(android, ios)으로 패키징한 어플리케이션 (웹 + 앱) 프로그레시브 웹앱 ...
13.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...
14.불변성 유지 (in 리액트 state, 리덕스 store) - FE study14
1. 상태관리에서 불변성을 유지하는 이유 1-1. 리액트, 리덕스 재랜더링 방식 리액트, 리덕스는 setState, dispatch 되었을 때 재렌더링(re-rendering)이 발생함 불필요한 재렌더링을 피하기 위해 shouldComponentUpdate, useCallback(react-hooks)를 씀. 이 메소드는 state와 props 의 변화를...
15.조건문이 아닐 때 사용하는 조건연산자 (&&, || ) (javascript) - FE study15
1. 조건연산자 (&&, ||) && : 조건 and를 의미함 (모두 tru여야 true) || : 조건 or을 의미함 (하나라도 true이면 true) 2. 조건문에서의 조건연산자 3. 조건문이 아닐 때 사용하는 조건연산자 맛보기 잉? 이게뭐지... > 자료형에서 false 로 기록되는 ("", null, undefined, NaN, 0) 을...
16.자바스크립트 동작 원리(이벤트루프, 싱글스레드, 비동기, async await) - FE study16
1. 사전개념 웹서버에 접속만해서는 데이터를 가져올 수 없고 코드가 계속 실행이 되어야한다. 이 때, 코드들의 집합을 프로그램이라 부르고 프로그램은 메모리에 올려져 프로세스가 된다.(현재 작업중인 상태) 그리고 프로세스는 포트를 통해 접속이 가능하다. 프로세스 내에서는 스레드라는 흐름단위를 통해 코드를 읽는다. 2. 자바스크립트가 쓰이는 곳 1...