👩🏻‍💻 Dev/Front-End

제네릭(Generic)이란?C나 자바 같은 정적 언어에서 다양한 타입 간에 재사용성을 높이기 위해 사용하는 문법이다. 타입스크립트도 정적 타입을 가지므로 제네릭 문법을 지원한다.제네릭의 사전적 의미는 일반적인 것(general)을 뜻하는데, 타입스크립트의 제네릭도 이와 비슷하게 '일반화된 데이터' 타입이라 볼 수 있다.제네릭: 함수, 타입, 클래스 등에서 내부적으로 사용할 타입을 미리 정해두지 않고 타입 변수를 사용해서 해당 위치를 비워 둔 다음에, 실제로 그 값을 사용할 때 외부에서 타입 변수 자리에 타입을 지정하여 사용하는 방식-> 이렇게 하면 함수, 타입, 클래스 등 여러 타입에 대해 하나하나 따로 정의하지 않아도 되기 때문에 재사용성이 크게 향상된다.타입 변수는 일반적으로 와 같이 꺾쇠괄호 내부에..

프론트엔드 개발에서 라이브러리와 프레임워크는 서로 다른 역할을 수행하며, 개발자에게 제공하는 기능과 사용 방식에서도 차이가 있다. 1. 라이브러리와 프레임워크의 기본 개념라이브러리(Library)라이브러리는 특정 기능을 수행하는 도구들의 집합. 개발자는 필요할 때 라이브러리를 호출하여 특정 작업을 수행할 수 있다.라이브러리는 애플리케이션의 흐름을 직접 제어하지 않는다. 대신, 개발자가 필요한 기능을 선택적으로 사용할 수 있다.프레임워크(Framework)프레임워크는 애플리케이션의 기본 구조를 제공하고, 그 안에서 개발이 이루어지도록 한다. 프레임워크는 코드의 흐름을 제어하며, 개발자는 프레임워크가 제시하는 방식에 맞추어 코드를 작성해야 한다.프레임워크는 “제어의 역전(Inversion of Control..

CSSCascading Style SheetsHTML 꾸며주는 언어문서 통째로가 아닌, HTML 하나하나 꾸며줌HTML에 CSS 적용 방법 3가지인라인 (inline): HTML 태그 안에 같이 작성내부 스타일 시트 (internal style sheet): HTML 문서 안에 같이 작성외부 스타일 시트 (external style sheet): HTML 문서 밖에 작성하고 연결* HTML 태그 한쌍을 element라고 부른다.  JavaScript특정 HTML요소를 선택하여 제어할 수 있는 스크립트 언어스크립트 언어란?독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌, (프로그램 내부의 구성 요소 중 하나로) 프로그램을 제어하는 스크립트 역할을 하는 언어-> 런타임의 발전으로, 스크립트 언어만..

DOCTYPEDocument Type의 약자.HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다.이를 선언해주지 않으면, 호환 모드(quirks mode)로 동작하며, 이 경우 크로스 브라우징 이슈가 심해지게 된다. 표준 모드와 호환 모드W3C가 웹 표준을 만들면서, 렌더링을 할 때 표준 모드(Standards mode)와 호환 모드(Quirks mode)로 렌더링할 수 있는 옵션이 생겼다. 호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않기 때문에 각 브라우저마다 다르게 보일 수 있다.따라서 특별한 경우가 아니라면 DOCTYPE을 명시하여 브라우저가 표준 모드로 렌더링하게 하는 게 좋다.https://develo..

웹의 이해인터넷과 웹인터넷 (Internet): 전 세계 컴퓨터를 하나의 통신망으로 연결한 것. '우리는 모두 연결되어 있다'는 개념을 상징.웹 (Web): 인터넷에 연결된 컴퓨터를 통해 정보를 공유하는 공간. 월드 와이드 웹 (World Wide Web, WWW)이라고도 불림.웹의 시작과 특징1980년대 스위스 유럽 입자 물리 연구소에서 팀 버너스리가 연구원들 간 빠른 정보 교환을 위해 고안.특징: 정보를 하이퍼텍스트 형식으로 표현하고, 링크를 통해 다양한 정보와 문서를 연결해 제공.웹 페이지와 웹 사이트웹 페이지 간 링크를 통해 이동하는 것: 웹 서핑 (Web Surfing) 또는 웹 브라우징 (Web Browsing).웹 브라우저웹 페이지나 웹 상의 데이터를 찾고 읽을 때 사용하는 도구.웹의 구조클..

프론트 개발을 할 때 아이콘은 필수 요소다. 처음 html css를 배웠을 때 font awesome 을 사용해서, 계속 여기서 아이콘을 찾았었는데 유료도 많고 한정적이라 아쉬움이 있었다. 앞으로는 리액트 프로젝트 아이콘은 React Icons에서 찾도록 하자! 다양한 Font Awesome, Ant Design, Bootstrap, Material Design 등 리액트에서 사용할 수 있는 유용한 아이콘들을 모두 찾을 수 있다. 다음과 같이 간단하게 사용할 수 있다. yarn add react-icons # or npm install react-icons --save import { FaBeer } from "react-icons/fa"; function Question() { return ( Lets..

자동 말줄임 처리 텍스트가 넘칠 때, 자동으로 말줄임 처리를 해줘야할 때가 있다. 이때 텍스트를 축약하는 기준으로는 크게 두 가지가 있다. 글자수에 따라 축약 CSS ellipsis 각각의 방법을 알아보자! 글자수에 따라 축약 텍스트 글자 수에 따라 조건부 렌더링을 해주면 된다. 그리고 잘린 텍스트에 마우스를 올리면 (hover 하면) 전체 텍스트를 볼 수 있도록 Tooltip으로 띄워줄 수 있다. 아래는 name이 10자를 넘으면 앞에서부터 10자를 보여주고, 뒷 부분은 '...'으로 잘라서 보여주는 코드 예시이다. ( 데이터가 없을 때 '-' 를 출력하도록 하는 조건부 렌더링도 포함되어 있다.) cell: ({ row: { original } }) => { return original.name ? (..

Context란? : Props Drilling의 대안 Context는 컴포넌트에서 Props를 사용하지 않고 필요한 데이터를 넘겨주는 방식이다. 특정 데이터를 컴포넌트 트리 전체에 걸쳐 쉽게 공유할 수 있게 해준다. Context는 Props Drilling 문제를 해결해 줄 수 있다. Props Drilling : 중첩된 여러 계층의 컴포넌트에게 props 전달. 문제점: 특정 prop을 사용하지 않는 컴포넌트들에게도 해당 prop을 내려주어야 하는 비효율. 가독성 하락. 컴포넌트 결합도 상승으로 불필요한 리렌더링 발생 가능, 코드의 복잡도 증가 context는 리액트 버전 16부터 사용 가능한 리액트 내장 API로, 어떤 리액트 프로젝트라도 리액트를 import 하면 context를 바로 생성하고 ..

React에서 컴포넌트의 생명주기는 크게 세 단계로 구분된다. : 마운팅(Mounting), 업데이트(Updating), 그리고 언마운팅(Unmounting) 각 단계는 컴포넌트의 생성, 업데이트 및 파괴 과정에 해당한다. 1. 마운팅(Mounting) 이 단계는 컴포넌트가 처음으로 생성되어 DOM에 삽입되는 과정이다. 마운트 과정에서는 처음으로 render 메서드가 호출되어 컴포넌트가 화면에 렌더링 된다. 다음과 같은 생명주기 메서드가 마운팅 단계에서 호출된다. (자주 사용되는 생명주기 메서드는 볼드체) constructor(): 컴포넌트의 생성자. 컴포넌트의 초기 상태를 설정한다. static getDerivedStateFromProps(): 컴포넌트가 마운트 되기 전에 호출된다. props에 의해 ..

useMemo 사용 목적 useMemo는 React에서 제공하는 훅(Hook) 중 하나로, 주로 두 가지 목적으로 사용된다. 계산 비용이 높은 연산의 결과를 저장하고 재사용하기 위해 - 만약 컴포넌트가 계산 비용이 많이 드는 연산을 수행하고, 그 결과를 여러 번 재사용해야 한다면 useMemo를 사용하여 해당 결과를 저장하고 필요할 때 재사용할 수 있다. 참조 동일성(Reference Equality)을 유지하기 위해 - React에서 객체나 배열과 같은 복잡한 데이터 타입을 props로 넘길 때, 이 데이터가 매번 새로 생성되면 자식 컴포넌트가 불필요하게 재렌더링될 수 있다. useMemo를 사용하여 이러한 객체나 배열을 저장하면, 컴포넌트의 리렌더링이 발생해도 동일한 참조의 데이터를 유지할 수 있다...