codeStates front-end
-
[React] 코드 분할codeStates front-end/React 2023. 3. 23. 18:41
HTML 삽입 미리보기할 수 없는 소스 📌 React 심화 📍 코드 분할(Code Spliting) React는 HTML 웹 페이지에 JS를 추가해야 하기 때문에 번들링을 진행한다. 그러나 JS코드가 점점 무거워지기 때문에 실행 속도가 느려지게 된다. 이를 방지하기 위해 해결방법은 번들을 물리적으로 나누는 것이다. 번들 분할 혹은 줄이는 법 번들링이 진행되면 npm을 통해 서드파티 라이브러리가 포함하게 된다. 🤷🏼 서드파티(Third Party) 라이브러리란? 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리, 즉 제 3자 라이브러리 그러나 번들링 시 이 라이브러리는 많은 공간을 차지하기 때문에, 따로 따로 불러서 사용할 수 있어야 한다. /* 이렇게 lodash 라이브러리를 전체를 불러와..
-
[React] Virtual DOM, React Diffing AlgorithmcodeStates front-end/React 2023. 3. 22. 19:04
HTML 삽입 미리보기할 수 없는 소스 📌 리액트 심화 📍Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트 할 수 있도록 가상의 DOM 객체를 활용한다. Real DOM (Document Object Model) DOM은 문서 객체 모델은 의미, 문서 객체란? 브라우저가 JS와 같은 스크링팅 언어가 html 태그들에 접근하고 조작할 수 있도록 문서를 트리 구조로 객체화 한 것을 의미한다. 즉, DOM은 브라우저가 HYML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다. DOM의 조작 속도가 느려지는 이유 트리는 "저장된 데이터를 더 효과적으로 검색"을 위해 사용, 그러므로 트리구조 된 DOM은 탐색속도는 빠르다. 그러나 DOM이 변경되고 업데이트 된다..
-
[TS] 타입 제한자codeStates front-end/Typescript 2023. 3. 21. 17:01
HTML 삽입 미리보기할 수 없는 소스 📌 타입 제한자 지금 까지 기본 자바스크립트 구성요소와 함께 작동방식을 봤더라면. 이제부터는 타입 시스템에서 한 걸음 나아가 다른 타입을 기반으로 하는 타입뿐만 아니라 더 정확한 타입 작성에 중점을 둔 기능을 본다. 📍top 타입 top 타입은 시스템에서 가능한 모든 값을 나타내는 타입 any 다시 보기 any 타입은 모든 타입의 위치에 제공 될수 있는 점에서 top타입처럼 작동할 수 있다. But!!!! any 👉🏻👉🏻 해당 값에 대한 할당 가능성 또는 멤버에 대해 타입 검사를 수행하지 않도록 명시적으로 지시 타입 검사를 건너 뛰어 용용하지만, 타입스크립트의 유용성이 줄어든다. any 타입을 사용한 예시 function greet(name: any) { cons..
-
[TS] 클래스codeStates front-end/Typescript 2023. 3. 20. 21:26
HTML 삽입 미리보기할 수 없는 소스 📌 클래스 📍클래스 타입스크립트는 자바스크립트와 동일하게 클래스를 선언하고 사용할 수 있다. 클래스란? 여러 객체들을 생성하기 위한 탬플릿 (EX) 클래스 : 붕어빵 기계, 객체 : 붕어빵) 클래스의 핵심 기능은 상속!!!! 👉🏼👉🏼 효율적이고 유지보수가 편함 빈 클래스를 생성해서 새로운 프로퍼티를 선언 class Site { no: number = 0; } 🔗 클래스 메서드 클래스는 기본적으로 속성과 메서드를 갖는다. 클래스에서 매게변수 타입에 타입이나 기본값을 지정하지 않으면 any 메서드를 호출하려면 허용 가능한 수의 인수가 필요하고, 재귀함수가 아니라면 대부분 반환타입 유추 가능 빈 프로퍼티 아래에 메소드를 추가 class Site { no: number; ..
-
[React] 번들링과 웹팩codeStates front-end/React 2023. 3. 20. 17:20
HTML 삽입 미리보기할 수 없는 소스 📌 번들링과 웹팩 📍번들링 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음" 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받고, 이 파일을 브라우저가 실행하여 멋진 웹 애플리케이션을 사용자에게 제공 🔗 번들링의 필요성 변수 간의 충돌 인터넷 속도가 느린 국가의 모바일 환경에서 사용자의 불편 호소 떨어지는 가독성 배포 코드의 쉬움으로 인한 보안 문제 📍Webpack "프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러" 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 웹팩은 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링이 가능하다. 빌드와 번들링 💁♂️ 빌드..
-
[css] css 애니메이션codeStates front-end/Css 2023. 3. 17. 13:19
HTML 삽입 미리보기할 수 없는 소스 📌 css 애니메이션 css 애니메이션은 여러 개의 css 스타일을 부드럽게 전화시켜준다. @keyfremes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다. 📍 @keyframes @keyframes를 지정하는 방법 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : 속성값..
-
[css] 반응형 웹codeStates front-end/Css 2023. 3. 16. 20:08
HTML 삽입 미리보기할 수 없는 소스 📌 반응형 웹 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 📍 리플로우(Reflow)와 리페인트(Repaint 화면을 늘리거나 줄이는 등 크기를 조절하거나, 다른 사이트로 이동을 하는 등 화면에 있던 요소들의 크기가 바뀌게 되는데, 화면에 나타나는 모습을 바꾸기 위해 모든 요소의 위치와 크기를 다시 계산하고, 다시 그려야 한다. 웹 인터렉션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복 수행하는 것을 리페인트라 한다. 🔗 리플로우와 리페인트의 최적화 말 그대로 다시 필하고 다시 플로우를 정해야하는데, 이런 과정은 최소..
-
[자료구조] Tree, GraphcodeStates front-end/Algorithm 2023. 3. 15. 20:19
HTML 삽입 미리보기할 수 없는 소스 📌 자료구조 자료구조란 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것 데이터란? 문자, 숫자, 그림, 영상 등 실생활을 구설하고 있는 모든 값 데이터는 분석하고 정리하여 활용해야만 의미를 가질 수 있다. 📍Tree (거꾸로 뒤집어 놓은)나무의 형태 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태 컴퓨터의 디렉토리 구조가 가장 큰 예이다. 🔗 Tree의 특징 아래 그림과 같이 하나 이상의 데이터에 한 개의 경로와 하나의 방향으로만 연결된 계층적 자료구조 하나의 데이터 아래에 여러 개의 데이터가 존재할 수 있는 비선형 구조이다. 🤷♂️싸이클(cycle)이란? 시작 노드에서 출발해 다른 노드를 거쳐 시작 노드로 돌아올 수 있다면 사..