공부
타입스크립트
출처 heropy.blog/2020/01/27/typescript/ 한눈에 보는 타입스크립트(updated) 타입스크립트는 Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스로, 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 heropy.blog 타입스크립트를 쓰는 이유 - C#, JAVA 같은 체계적이고 정제된 언어에서 사용하는 강타입 시스템은 높은 가독성과 코드 품질등을 제공할 수 있고 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류들을 더욱더 쉽게 잡아낼 수 있다. - 반면 자바스크립트는 약타입 언어로 비교적 유연하게 개발할 수 있는 환경을 제공하지만 런타임 환경에서 쉽게 에러가 발생할 수 있다는 단점을 가..
리액트
버츄얼돔 - 렌더링이란? html 요소 또는 React 요소의 코드가 눈에 볼 수 있도록 그려지는것 DOM은 왜 비효율적인가? - 브라우저가 HTML 받으면, 브라우저는 DOM을 만들고 이 DOM을 바탕으로 각 노드들의 스크린 좌표를 구하고 어디에 나타낼지 레이아웃을 짠다. 이 과정은 동기적인 작업인데 DOM에 변화가 생길 때 마다 렌더 트리를 재생성하고 레이아웃을 만드는 과정이 모두 다시 반복되므로 비효율 적임. Virtual DOM 렌더링 방식 - 리액트는 DOM을 직접 제어하는 대신 중간에 가상의 Virtual DOM을 만들어서 이걸 쓴다. Virtual DOM은 실제 DOM과 구조가 비슷한 리액트 객체 트리이다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서..
보안(짧음)
github.com/baeharam/Must-Know-About-Frontend baeharam/Must-Know-About-Frontend :mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub. github.com 가장 아래 보안탭 타이핑 동일 출처 정책(Same-Origin Policy) - 정의 : 어떠한 문서나 스크립트가 다른 프로토콜 / 포트 / 호스트에 있는 리소스를 사용하는 것을 제한하는 정책. 해결방법 - document.domain - 단편적인 방법으로, 동일한 도메인으로 설정함을 통해 SOP ..
플로이드 와샬
출처 : mygumi.tistory.com/110 플로이드 와샬 알고리즘 :: 마이구미 이번 글은 플로이드 와샬 알고리즘에 대해 다뤄본다. 동적계획법을 기반으로 구현되는 알고리즘이다. 위키백과의 정의를 보자. 플로이드-워셜 알고리즘(Floyd-Warshall Algorithm)은 그래프에서 모든 mygumi.tistory.com 그래프에서 모든 꼭지점 사이의 최단 경로의 거리를 구하는 알고리즘. 최단경로를 찾기에 좋은 알고리즘이다. 시간복잡도는 O(n^3) for (int k = 0; k < n; ++k) { // k : 거쳐가는 정점 for (int i = 0; i < n; ++i) { // i : 출발 정점 for(int j = 0; j < n; ++j { // j : 도착 정점 if(d[i][j] ..
네트워크
github.com/baeharam/Must-Know-About-Frontend baeharam/Must-Know-About-Frontend :mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub. github.com 따라치면서 공부 TCP와 UDP - OSI 7계층에서 전송계층에 속하는 데이터 전송 프로토콜 TCP - 연결지향적이다. 2개의 호스트가 통신을 하기전에 연결이 반드시 이루어져야한다. - 높은 신뢰성과 순서대로 전송하는 것을 보장한다. - 흐름제어 : 송신자의 데이터 양을 조절 - 혼잡제어 : 네트워..
JS
github.com/baeharam/Must-Know-About-Frontend baeharam/Must-Know-About-Frontend :mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub. github.com 타자치면서 공부 AJAX Asynchoronous Javascript And XML의 약자로, 비동기적으로 js를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법을 의미한다. 여기서 XML이 있는 이유는 옛날엔 json보다 많이써서 그럼 어떻게 동작하는가? 사용자가 AJA..
CSS
github.com/baeharam/Must-Know-About-Frontend baeharam/Must-Know-About-Frontend :mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub. github.com 타이핑 치면서 공부 박스 모델 이미지 github.com/baeharam/Must-Know-About-Frontend/raw/master/images/css/box%20model.png [ margin [ border [ padding [ content ] ] ] 이렇게 둘러싸여있음. box-siz..
HTML
github.com/baeharam/Must-Know-About-Frontend baeharam/Must-Know-About-Frontend :mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub. github.com 따라 타이핑하면서 공부 DOCTYPE Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바로 표시할 수 있도록 해주는 것. 으로 선언하는데 이걸 해주지 않으면 호환 모드로 동작함. 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 ..
프론트엔드 지식 - 프론트엔드 전반
github.com/baeharam/Must-Know-About-Frontend baeharam/Must-Know-About-Frontend :mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub. github.com 위 사이트 보고 따라 타이핑하면서 공부 SPA와 MPA - SPA : 하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면 컨텐츠를 바꾸는 방식의 웹 어플리케이션 - MPA : 사용자가 페이지를 요청할 때 마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방..
웹팩 바벨 요약
github.com/doonguk/webpack-boilerplate doonguk/webpack-boilerplate Webpack, Babel 를 이용한 프론트엔드 개발환경 셋팅. Contribute to doonguk/webpack-boilerplate development by creating an account on GitHub. github.com 그냥 위 사이트 따라 타이핑하면서 공부함. 1. 바벨 바벨이란? 최신 버전의 자바스크립트 문법을 이전 버전의 문법으로 변환시켜주는 트랜스 컴파일러임. 하지만 바벨을 사용한다고 해서 모든 최신 문법을 사용할 수 있는것은 아니다. Array.from, Object.assign() 등 기존에 없던 문법은 pollyfill 을 추가하야 지원하게 해 줘야한다..