2. 인터페이스 2-1. 인터페이스란(Interface) ? 정의한 약속 혹은 규칙을 의미하는데, 이는 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것. 인터페이스(Interface)가 정의할 수 있는 약속 혹은 규칙 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 비교 예시 : 인터페이스를 사용하지 않은 경우 function printLabel(labeledObj: { label: string }) { console.log(labeledObj.label) } let myObj = { size: 10, label: "Size 10 Object" } printLabel(myObj) 인..
FrontEnd_Study
1. 기본타입 1-1 불리언 (Boolean) : true, false 참/거짓값 let isDone: boolean = false; 1-2 숫자 (Number) : 모든 숫자값이며 10진수, 16진수 (0x), 2진수(0b), 8진수 (0o) 등을 사용할 수 있다. let decimal: number = 6; let hex: number = 0xf00d; (16진수) let binary: number = 0b1010; (2진수) let octal: number = 0o744; (8진수) 1-3 문자열 (String) : 텍스트 데이터 타입을 표현하며 큰따옴표 (")나 작은따옴표 (')를 문자열 데이터를 감싸는데 사용한다. let color: string = "blue"; color = 'red'; 또한..
1. React-Query란 React Query는 React 애플리케이션에서 데이터 상태 및 비동기 데이터 관리를 용이하게 해주는 JavaScript 라이브러리이다. React Query의 역할은 서버로부터 데이터를 가져오고, 저장하고, 동기화하며, 상태를 관리하는데 도움을 준다. - 공식문서 주소: https://tanstack.com/query/v3 * 상태관리 라이브러리 중 React Query를 사용하는 이유 : 비슷한 상태관리 라이브러리로는 redux, recoil이 있다. 대부분의 기존 상태관리 라이브러리는 비동기 또는 서버상태 작업에 적합하지 않고 클라이언트 상태와 서버 상태를 함께 담아두고 있다. 적합하지않은 이유는 서버상태가 완전히 다르기 때문이다 하지만 react-query를 사용해 ..
- [ React.lazy 의 기능 ] lazy 함수는 구성요소를 개별 Javascript chunk로 분리하며 불필요한 요소들(컴포넌트)들을 다운받는 시점을 조절 할 수 있게해준다. 이를통해 불필요한 요소를 미리 다운받지 않게 하고 필요한 렌더링시점에서 비동기적으로 로딩하여 성능을 최적화 해줄 수 있다. 사용하는 이유 : react는 많은 요소와 라이브러리로 구성되어 있습니다. 만약 import로 정의하고 동적으로 불러오기를 사용하게 되면 *에러가 발생되며 첫 페이지를 로드하는 즉시 대규모 단일 Javascript 번들이 사용자에게 전송되어 페이지 성능에 상당한 영향을 줄 수 있다. lazy는 다운받는 시점과 chunk화를 통해 이를 개선할 수 있다. * 어떤 에러가 발생하는가? import 구문을 코..
JavaScript 데이터 유형 및 데이터 구조 자바스크립트의 데이터 유형 - Boolean type - Null type - Undefined type - Number type - BigInt type - String type - Symbol type 1. Boolean type true and false 2.Null type, Undefined type 값이 존재하지 않음 3.Number type 숫자값 (정수, 실수) 4.String type JavaScript의 String 유형은 텍스트 데이터를 나타내는 데 사용된다. 문자열 문자타입(데이터)이다. String의 각 요소는 String의 한 위치를 차지합니다. 첫 번째 요소는 index 0에 있고 다음 요소는 index 에 있는 식 1입니다. S..
식별자 - 식별자는 코드 내의 변수, 함수, 혹은 속성 (en-US)을 식별하는 문자열입니다. - JavaScript의 식별자는 대소문자를 구별하며 유니코드 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수 없으며 공백문자도 쓸수 없습니다. (길이제한은 없지만 선호하지 않는다.) - 식별자는 코드의 일부이지만 문자열은 데이터이기 때문에, 식별자와 문자열은 다릅니다. JavaScript에서 식별자(함수,변수,속성)를 문자열(데이터)로 변환하는 방법은 없지만, 어떤 경우 문자열을 분석해 식별자로 사용할 수 있습니다. - ex) //변수 let(키워드,명령어) age(식별자) = 10(데이터); //함수 function setAge () {} //속성(상수) const o = { age:..
리액트를 설치하고 실행 관련 명령어 및 자동 생성되는 파일에 관한 정리를 하려고 합니다. 1. 리액트(React) 실행관련 명령어 (터미널) - mkdir : 폴더 생성 (ex/ mkdir test) - ls : 폴더 안에 있는 하위파일들 목록을 조회 하는 명령어 - cd : (ex/ cd test) > test 라는 폴더 경로로 들어가라는 명령어 - yarn create react-app test: 프로그램에 필요한 파일들을 알아서 생성해서 test라는 폴더에 넣음 - yarn start : starts the development server. 작성한 코드 실행 - yarn build : bundles the app into static 실행은 하지않고 배포할수 있도록 빌드해줌 - yarn test ..
리액트(React)이란 무엇인지, 사용하는 이유와 사용하면서 체크해봐야 할 것들에 대한 리스트를 정리하려고 합니다. 1.React란? 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다. 출처 : 위키백과 API - 위키백과, 우리 모두의 백과사전 API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스[*], 응용 프로그램 프..
1. Virtual DOM이란? -> DOM이란 (Document Object Model)의 약자로 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미하며 기존에는 화면의 변경사항을 돔을 직접 조작하여 반영하였다. 하지만 돔트리가 수정될때마다 렌더 트리가 실시간으로 갱신되기에 수정 횟수만큼 새롭게 렌더링 된다는것이 큰단점으로 이 단점을 보완하고자 가상돔을 활용한다 가상돔을 이용한 리액트나 뷰 같은 프레임워크는 실시간으로 수정하지않고 변경사항이 모두 반양된 가상 돔을 만들어 내기 떄문에 이러한 불필요한 렌더링 횟수를 줄일 수 있다. 2. Virtual DOM 작동 원리 -> 데이터가 업데이트 되면 전체 UI를 가상 돔에 리렌더링하고 이전 가상돔에 있던 ..
태그의 xmlns 속성 xmlns 속성은 해당 문서가 XHTML 문서일 경우 반드시 명시되어야 하며, HTML 4.01에서는 유효하지 않으며, HTML5에서는 선택 사항입니다. 하지만 W3C에서 제공하는 HTML 유효성 검사에서는 XHTML 문서의 태그에 xmlns 속성이 명시되어 있지 않아도 유효성 검사를 무사히 통과할 것입니다. 이것은 해당 유효성 검사에 사용되는 네임스페이스(namespace)의 기본값이 “xmlns=http://www.w3.org/1999/xhtml”로 설정되어 있기 때문에 태그에 xmlns 속성이 명시되어 있지 않더라도 태그에 xmlns 속성을 자동으로 추가해 주기 때문입니다. [출처 : http://tcpschool.com/html-tag-attrs/html-xmlns]
