본문 바로가기
반응형

취미 공부/Daily53

Daily Coding - FE 4주차 - 47강 48강 49강 47강모달과 같은 Overlay 컴포넌트는 전체 HTML에서 동작하게 해야한다.컴포넌트의 위치를 옮겨줄 때 React Portal를 사용한다. 모달을 만들 때 자식 컴포넌트에 만드는 경우가 있는데 이때 모달의 요소를 바꾸기엔 엮에 있는 부분이 많으므로,portal를 활용하여 전체 HTML으로 이동해준다.ErrorModal.jsimport React from 'react';import ReactDOM from "react-dom";import Card from './Card';import Button from './Button';import classes from './ErrorModal.module.css';const Backdrop = (props) => { return ( )}const M.. 2024. 10. 20.
Daily Coding - FE 4주차 - 44강 44강 Number 정렬=> JavaScript의 .sort() 메서드 활용하여 정렬 진행=> sort는 string 기준으로 정렬이 되는 속성이 있음ex) const data = [1, 10, 4, 2]      data.sort() // [1, 10, 2, 4]=> sort 메서드 안에서 comparator 함수를 추가해서 정렬을 진행해야 함.ex) data.sort((a, b) => a - b); // [1, 2, 4, 10]    // a-b : 오름차순, b-a : 오름차순 string 정렬=> 일반적으로 string 정렬 방식ex) const data = ['a', 'b', 'A', 'B', 't'];       data.sort() // ['A', 'B', 'a', 'b', 't']ASKI .. 2024. 10. 15.
Daily Coding - FE 4주차 - 39강 40강 42강 43강 39강React Devtool=> chrome Extention을 통해 설치한다components: 컴포넌트를 트리 상태로 보여주는 툴 40강디버깅 Part 2.- React Devtool (Chrome Extension)Componets : 컴포넌트를 드리 구조로 보여주며 상태 정보를 확인 할 수 있다Profiler : 렌더링된 컴포넌트를 소요 시간과 함께 보여준다 - Google Lighthouse구글에서 만든 Profiler이며 profiling만 하기 위해서 만든 전문적인 tool이다.웹페이지에 퀄리티를 개선시키기 위해 만들어진 tool이며 어떤 웹에서도 모두 사용이 가능하다.SEO와 같은 지표도 확인이 가능하다.크롬을 사용하면 별도 설치가 필요없다.https://github.com/Febase/.. 2024. 10. 14.
Daily Coding - FE 3~4주차 - 35강 36강 37강 38강 35강동적인 인라인 스타일링빈 Input으로 값을 입력하면 배경색이 빨강으로 바뀐다. trim : removes the leading and trailing white space and line terminator characters from a string// 공백도 빈 메서드로 인식하게 만들어 줌.import React, { useState } from 'react';import Button from '../../UI/Button/Button';import './CourseInput.css';const CourseInput = props => { const [enteredValue, setEnteredValue] = useState(''); const [isValid, setIsValid] = u.. 2024. 10. 14.
반응형

티스토리툴바