일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- useQueryClient
- ㅡ
- DOM
- 제어컴포넌트
- CustomHook
- ?? #null병합연산자
- vite
- transition
- QueryClient
- BFC
- 리액트
- parent padding
- 조건부스타일
- react
- ignore padding
- twoarrow
- 부모패딩
- 함수형프로그래밍
- Carousel
- 화살표2개
- debouncing
- BlockFormattingContext
- 부모요소의 패딩 무시
- es6
- 문제해결
- tailwindCSS
- 서초구보건소 #무료CPR교육
- accordian
- createPortal
- alias설정
- Today
- Total
목록개발 공부 (172)
프론트엔드 첫걸음
:root { --width: 30vw; } getComputedStyle(document.documentElement).getPropertyValue('--width');
아래와 같은 코드가 있다. useEffect(() => { setFormIsValid( enteredEmail.includes('@') && enteredPassword.trim().length > 6 ); }, [enteredEmail, enteredPassword]); const emailChangeHandler = (event) => { setEnteredEmail(event.target.value); }; const passwordChangeHandler = (event) => { setEnteredPassword(event.target.value); }; 그러나 이 input에서 입력할때마다 이벤트가 발생하므로 이벤트 지연이 필요할 것 같다. 사용자가 타이핑을 살짝 멈출때 유효성을 확인하도록 개..
리액트 라이브러리 자체의 목적은 UI 렌더링이다. 사용자의 행위와 상호작용하면서 재렌더링 하는 것이다. 화면에 뭔가를 가져오는 것 외의 것을 사이드 이펙트(side-effect)라고 한다. HTTP 리퀘스트를 보내는 것, 브라우저저장소에 정보를 저장하는 것 등이 사이드 이펙트다. 이러한 것은 리액트가 고려해야하는 작업이 아니다. 이런 사이드이펙트는 컴포넌트 평가의 밖에서 이뤄져야한다. 사이드 이펙트가 너무 오래걸리는 작업이면 컴포넌트 렌더링이 지연되며, 사이드 이펙트에 의해 state가 변경된다면 무한루프에 빠질 수 있다. useEffect는 사이드이펙트를 처리하기 위해서 만들어졌다. side effect 작업을 분리시켜 다른 시점(ComponentDidMount)에서 처리하도록 하는 것이 useEffe..
위와 같은 위치의 모달이 있다. 이 모달은 제대로 동작하나 이는 시멘틱한 구조가 아니라고 한다. 중첩을 방지하기 위해서 모달 HTML 을 가능하면 최상위에 두라고 한다. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element. 가능하면 모달 HTML을 최상위 위치에 배치하여 다른 요소의 잠재적인 간섭을 방지하세요. 다른 fixed 스타일을 갖는 요소 내에 중첩할 때 문제가 발생할 수 있습니다 . https:/..
1. 설치 터미널을 열고 해당 리액트프로젝트내에서 npm install --save styled-components 명령어 입력 => styled component 설치 styled component 사용할 파일 상위에 import styled from 'styled-components' 입력 2. 사용 styled.button` styled.a` styled.div` Styled components는 위와 같은 코드로 시작한다. styled는 styled-components에서 import하는 객체이고, 이 객체를 통해 button, a, div 메소드에 접근할 수 있는 것이다. 이 메소드에 백틱으로 만든 리터럴을 넘겨주는 것인데, 이것은 Tagged Templated literal 이라는 문법이다. ..
isValid는 setState로 설정한 state 변수이다. state 에 따라서 style을 다르게 적용시키려고 할 때 인라인 방식으로 스타일을 설정하거나 class로 설정할 수 있다. isValid = true 일 때 줄 스타일 invalid 설정 /*form-control과 invalid 클래스가 동시에 있을 때 .form-control.invalid 내부의 input 스타일 form-control과 invalid 사이에 띄어쓰기가 없음*/ .form-control.invalid input { border-color: red; background: #ffd7d7; } .form-control.invalid label { color: red; } 1. 동적인 인라인 스타일 설정 Course Goal..
useState 사용하여 입력된 데이터 관리하기 import React, { useState } from 'react'; import './ExpenseForm.css'; const ExpenseForm = (props) => { const [enteredTitle, setEnteredTitle] = useState(''); const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; /**중략**/ return ( Title ); }; export default ExpenseForm; input 태그의 onChange 에 달려있는 titleChangeHandler로 title을 바꾼다. titleChangeHandler ..
자바스크립트 메뉴에 넣으려다가 삼항연산자, 논리연산자 자체에 대한 설명이 아니라 리액트에서의 사용에 관한 포스팅이기 때문에 리액트 메뉴에 포함시킴 삼항연산자로 조건부 내용 출력 {filteredExpenses.length === 0 ? ( No expenses found ) : ( filteredExpenses.map((expense) => ( )) )} 논리연산자 &&로 조건부 내용 출력 {filteredExpenses.length === 0 && No expenses found } {filteredExpenses.length > 0 && filteredExpenses.map((expense) => ( ))} 삼항연산자를 사용하는 것도 좋은 방법이지만 논리연산자 &&를 사용하는 것이 더 이해하기 쉬워보..
버튼을 클릭할때마다 HTML이 특정 요소에 insert되어 화면에 보여지는 코드가 있을때 동적으로 추가된 HTML에 이벤트를 붙이고 싶으면 어떻게 해야할까? 우선 이벤트를 달고싶으면 그 DOM 을 선택자로 골라내야하는데 그게 안된다. querySelector가 HTML로 생성된 요소를 찾지 못했다. 콘솔에 바로 찍어보면 또 찍힌다 . See the Pen Untitled by JEONG (@cona) on CodePen. codepen에서 확인할 수 있다시피 'DOMContentLoaded'를 사용하여 DOM이 모두 로드된 뒤에 해도 안된다. let html = ` 생성되는 아이템 `; let $container = document.querySelector('#container'); let $btn = ..
리액트 라우터 사용하기 세팅 터미널에 npm install react-router-dom@6 입력 index.js 코드 추가 //브라우저라우터로 앱을 감싸줌 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Routes function App(){ return ( ) } export default App; export default App; 컴포넌트는 페이지 주소에 상관없이 보이고, /main 접속시에는 페이지만, /detail 접속시에는 페이지만 보임 path="*" 으로 하면 404 페이지 보여준다.(..