css함수를 사용하면 css 속성의 값으로 계산식을 지정할 수 있다./* property: calc(expression) */width: calc(100% - 80px); 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다.표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따른다. calc() - CSS: Cascading Style Sheets | MDN, , , , , , 또는 를 받는 속성의 값으로 사용할 수 있습니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/CSS/calc" data-og-url="https://developer.m..

요소의 스택 순서를 지정한다. 스택 순서가 더 큰 요소는 항상 스택 순서가 더 낮은 요소 앞에 있는다. ✍🏻 (easy version) 요소가 겹쳤을 때, 누가 앞에 보일지를 정하는 숫자=> 어떤 요소가 앞에 보이고, 어떤 요소가 뒤로 가는지 정한다. 숫자가 클수록 앞에 보이고 숫자가 작을수록 뒤에 숨는다. z-index는 position이 있는 요소에만 적용된다. z-index에 값을 명시하지 않으면 auto가 된다.

var()사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속서의 값으로 지정할 때 사용var(--header-color, red); 값이 아닌 속성이름, 선택자 등 다른 곳에 사용할 수 없다.시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계 없는 값이 된다. 첫번째 인수는 값을 가져올 사용자 지정 속성의 이름이다.선택적으로 제공할 수 있는 두번째 인수는 대체값이다. 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용한다. 대체 값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용한다.var(--foo, red, blue)의 대체값은 쉼표까지 포함한 red, blue이다.=> 첫번째 쉼표 뒤쪽은 모두 대체값이 된다. 두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자 ..

📘 React Router 개념React에서 라우팅을 구현하기 위한 표준 라이브러리웹 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있게 해준다.라우팅의 개념예를 들어:example.com/home → 서버의 home.html 파일 요청example.com/about → 서버의 about.html 파일 요청React와 같은 단일 페이지 애플리케이션(SPA)에서는 클라이언트 사이드 라우팅이 사용됩니다.웹 애플리케이션이 처음 로드될 때 필요한 모든 JavaScript를 다운로드URL이 변경되면 새로운 페이지를 서버에서 받아오는 대신, JavaScript가 브라우저의 히스토리 API를 사용하여 URL을 변경하고 화면에 표시되는 컴포넌트를 변경페이지 전체를 다시 로드하지 않기 때문에 더 ..

📃 주요 코드 설명 🐛 실습 중 겪은 문제 Objects are not valid as a React child 에러 발생result 값이 string이 아니라 정규표현식(RegExp)처럼 객체로 들어가 있어서 화면에 출력 불가능한 값이 전달됨콘솔 에러 메시지: found: [object RegExp]카드 컴포넌트가 세로로 나열됨카드 2개가 안에서 기본 block 요소로 세로 쌓임버튼을 카드 사이에 넣는 구조도 구현 어려웠음텍스트들이 왼쪽 정렬되어 UI가 어색함결과 텍스트, 설명 텍스트, 버튼 아래 텍스트 등 자잘한 글자들이 가운데 정렬되지 않음 ⚙️ 해결과정 result 타입 오류 디버깅determineWinner() 함수가 '이겼다', '졌다' 같은 문자열만 반환하도록 수정JSX에서 result..

와이어프레임을 만들때부터와이어프레임을 만들때부터 기능 요약을 해야한다.ex) 사용자 입력 필드에 텍스트를 입력하면 상태에 저장됨⬇️컴포넌트 구현에 대한 설명도 하면 좋다.ex) 1. 상태관리사용자가 입력 필드에 텍스트를 입력할 때마다 상태가 업데이트 된다. 📝 유저에게 알림을 줄때는 alert()보단 모달 사용하기⬇️사용자 관점에서 동작 과정도 설명하면 좋다 📃 주요 코드 설명import React, { useState } from 'react'const InputFild = ({ setData }) => { const [inputText, setInputText] = useState('') // 태그들에 이벤트 넣고 함수로 만들어놓기 const inputItem = e => { // 한글..

라이프사이클 (= 생애 주기)Mount ➡️ Update ➡️ UnMount Mount 컴포넌트가 탄생하는 순간               "A 컴포넌트가 Mount되었다."화면에 처음 렌더링 되는 순간          => A 컴포넌트가 화면에 처음으로 렌더링 되었다.  "A 컴포넌트가 Mount되었다." => A 컴포넌트가 화면에 처음으로 렌더링 되었다.  ⬇️  Update  컴포넌트가 다시 렌더링 되는 순간 (변화)리렌더링 될 때를 의미"A 컴포넌트가 Update되었다." => A 컴포넌트가 리렌더링되었다. ⬇️ UnMount컴포넌트가 화면에 사라지는 순간 (죽음)렌더링에서 제외되는 순간을 의미"A 컴포넌트가 UnMount 되었다." => A 컴포넌트가 화면에서 사라졌다. 라이프 스타일 제어 (=>..

1. 컴포넌트 단위로 나누기2. UI 구현컴포넌트에서 Controller.jsx랑 View.jsx를 만들어준다.const Viewer = () => { return ( 현재 카운트 0 );};export default Viewer;const Controller = () => { return ( -1 -10 -100 +100 +10 +1 );};export default Controller; 그뒤 App.jsx의 안에 입력해준다. import './App.css';import Controller from './components/Controller';import Viewer from './compon..

클래스 컴포넌트 기능을 함수 컴포넌트에서도 이용할 수 있는것 2017년도 이전 React.jsClass 컴포넌트Function 컴포넌트모든 기능을 이용할 수 있음UI 렌더링만 할 수 있음문법이 복잡함 Class 컴포넌트의 기능을 낚아채서 가져와서 Function 컴포넌트에 적용낚아채다! 어떻게? Hoooooooooooooooooooooooooooks 🦜🏴‍☠️ useState와 useRef 역시 React Hooks이었음useState - State 기능 낚아챔useRef - Reference 기능 낚아챔 React Hooks는 이름 앞에 use가 붙는다. 리액트 Hooks는 함수 컴포넌트 내부에서만 호출 가능하다. React Hook을 이용해서 나만의 Hook 만들기 가능! Hook 관련 팁1. 함..