전체 글
-
[TS] 제네릭codeStates front-end/Typescript 2023. 3. 23. 21:52
HTML 삽입 미리보기할 수 없는 소스 📌 제네릭 알려진 타입은 사용하는 것이 아닌 코드에서 호출하는 방식에 따라 다양한 타입으로 작동하도록 하려면 어떻게 해야 할까? 🙋♂️ 타입을 선언하지 않는 다면? any로 간주👉🏻👉🏻 any는 모든 타입을 뜻하는게 아니라 제한을 두지 않는 것일 뿐 👉🏻👉🏻 엄격한 검사를 하지 않기 때문에 문제가 발생할 수 있다. 🙋♂️ 모든 타입을 허용하려면? 제네릭 사용 👉🏻👉🏻 타입 간의 관계를 알아낸다. 🙋♂️ 제네릭이란? 타입을 마치 함수 파라미터로 사용한다는 것, 코드를 수행될 때(런타임) 타입을 명시 any처럼 타입을 지정하지 않지만, 타입을 체크해 컴파일러가 오류를 찾을 수 있다. 재사용성이 높은 컴포넌트를 만들 때 자주 활용 📍 제네릭 함수 매개변수 괄호 바로..
-
[React] 코드 분할codeStates front-end/React 2023. 3. 23. 18:41
HTML 삽입 미리보기할 수 없는 소스 📌 React 심화 📍 코드 분할(Code Spliting) React는 HTML 웹 페이지에 JS를 추가해야 하기 때문에 번들링을 진행한다. 그러나 JS코드가 점점 무거워지기 때문에 실행 속도가 느려지게 된다. 이를 방지하기 위해 해결방법은 번들을 물리적으로 나누는 것이다. 번들 분할 혹은 줄이는 법 번들링이 진행되면 npm을 통해 서드파티 라이브러리가 포함하게 된다. 🤷🏼 서드파티(Third Party) 라이브러리란? 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리, 즉 제 3자 라이브러리 그러나 번들링 시 이 라이브러리는 많은 공간을 차지하기 때문에, 따로 따로 불러서 사용할 수 있어야 한다. /* 이렇게 lodash 라이브러리를 전체를 불러와..
-
[React] React Hooks, useMemo, Custom Hooks카테고리 없음 2023. 3. 22. 21:30
HTML 삽입 미리보기할 수 없는 소스 📌 React Hooks 📍 Function Component와 Class Component Hook은 함수 컴포넌트에서 사용하는 메서드 🔗Class Component VS Function Component 🤷🏼 컴포넌트란? 단순히 템플릿을 넘어 데이터에 맞춰 UI를 만들어 주는 기능과 API를 통해 화면의 움직임 작업을 수행 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다 class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncrease = this.hand..
-
[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속성 : 속성값..