본문 바로가기

분류 전체보기

 (124)
Class Component vs Functional Component Functional Component import React from 'react'; function App() { return Hello, World!; } 함수형 컴포넌트는 기본적으로 클래스형 컴포넌트의 render함수이다. Props에 접근하고 사용할 수 있지만, state를 가질 수는 없다. → [Hook을 통해 해결 ] lifecycle method를 사용할 수 없다. 따라서 UI에 집중하게 되고 app의 행동에는 크게 관여하지 않는다. this 키워드를 사용할 수 없다. 메모리 자원을 함수 컴포넌트보다 덜 사용한다. 컴포넌트 선언이 편하다. Class Component import React from 'react'; class App extends React.Component { render(..
React Virtual Dom란? [가상 돔] : 리액트, Vue js 웹 브라우저가 네트워크를 통해 HTML을 전달 받으면 브라우저의 렌더링 엔진은 HTML을 파싱하고 돔 노드(DOM Node)로 이루어진 트리를 만듭니다. 또한 CSS 파일과 HTML의 요소들(Element)의 인라인 스타일을 파싱하여 스타일 정보를 가진 스타일 트리도 생성합니다. HTML & CSS 렌더링 과정 이렇게 렌더 트리가 완성되면 브라우저는 Attachment라는 과정을 통해 스타일 정보를 계산합니다. 렌더 트리로 생성된 모든 노드들은 attach라는 함수를 가지고 있는데, 이 Attachment라는 과정에서 이 메소드들이 호출되게 되며, 해당 메소드는 스타일 정보를 계산하고 결과값을 객체 형태로 반환하게 됩니다. ⇒ 렌더 트리로 생성된 모든 노드들은 att..
JWT란? JWT란? Json Web Token의 약자로 인증에 필요한 정보들을 암호화시킨 토큰을 뜻한다. token 구성요소 Encoded Header + "." + Encoded Payload + "." + Verify Signature Header : 위 3가지 정보를 암호화할 방식(alg), 타입(type) 등이 들어갑니다. Payload : 서버에서 보낼 데이터가 들어갑니다. 일반적으로 유저의 고유 ID값, 유효기간이 들어갑니다. Verify Signature : Base64 방식으로 인코딩한 Header, payload, SECRET KEY를 더한 후 서명된다. 사용자가 로그인을 한다. 서버에서는 계정정보를 읽어 사용자를 확인 후, 사용자의 고유한 ID값을 부여한 후, 기타 정보와 함께 Payload에 ..
CORS란? CORS란? 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록하는 매커니즘. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. 하지만 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용한다. url구조 도메인(domain): naver.com 오리진(origin): https://www.naver.com/PORT URL 구조에서 살펴본 Protocal, Host, Port를 합친 것:origin 예를 들어 beomy.github.io라는 도메인 주소를 사용하는 웹페이..
JavaScript의 비동기 기술 동기와 비동기란?(작업 완료 여부를 누가 신경쓰느냐) 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A작업이 모두 진행 될때까지 B작업은 대기해야한다. 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다. blocking/non-blocking(바로 return하느냐 마느냐) 호출된 함수가 바로 return해서 호출한 함수에게 제어권을 넘겨주고호출한 함수가 다른 일을 할 수 있는 기회를 줄 수 있으면 non-blocking이다. 호출된 함수가 자신의 작업을 모두 마칠 때까지호출한 함수에게 제어권을 넘겨주지 않고 대기하게 만든다면 bloc..
TypeScripts란? 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입 언어로 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다. 자바스크립트 슈퍼셋(Superset) 타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다. 객체 지향 프로그래밍 지원 타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다. 장점 코드 작성 단계에서 ..
React / Vue / Angular 기술별 차이점과 장단점 세 가지 모두 MIT 라이선스를 채택하고 있다. (MIT 라이선스는 독점 소프트웨어에서도 재사용에 대한 제한이 없다.) Angular 강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한 번에 갖춰지는 등 필요한 기능을 모두 내장한 프레임워크 타입스크립트를 주력언어로 채택하여 정적 타입을 제공 타입 체크, 리팩토링을 지원, 객체지향적 프로그래밍에 적합 Angular CLI : 프레임워크에 익숙하지 않은 초심자들이 개발환경 구축을 Angular CLI가 제공하는 명령 하나만으로 간단히 해결할 수 있음. 컴포넌트 기반 개발 개발에 필요한 모듈을 기본으로 제공 실제 DOM 위에서 동작함에도 변경감지 구현 기능이 따로 존재하여 성능을 높임 단방향 데이터 바인딩과 양방향 데이터 바인..
webpack vs babel webpack 하나의 소스로 모든 브라우저에서 보여주는 게 웹의 특장점이지만 브라우저는 여전히 파일 단위 모듈을 잘 모른다. 그래서 번들링 과정을 통해 하나의 파일로 묶어줘야하는데 이것을 웹팩이 한다. ⇒ webpack : 개발할 때 수 많은 라이브러리들을 사용하게 되는데 웹팩은 빌드(build)(=의존성을 분석) 과정을 통해 이런 수 많은 모듈들을 하나의 파일로 묶어준다. = 번들링 번들링 bundling : 모듈을 하나의 파일로 묶어 네트워크 비용을 최소화 하는 것. 엔트리는 의존성 그래프의 시작점을 의미한다. 엔트리 파일을 의존하는 파일은 없고, 엔트리가 A를 의존하고, A가 다시 B, C를 의존하고.. 하는 식으로 모듈이 연결된다. 이때 웹팩은 이미지, 폰트, 스타일시트 역시 모듈로 관리한다. 아..

티스토리툴바