Front-End Study89 Event Handling Event(웹에서 일어나는 사용자의 행동) + Handling(다루다, 처리하다) = 웹 사용자의 행동 처리 이벤트 핸들러 export default function Button({color, text, children}) { return( { // vanila JS와 거의 동일(이벤트 핸들러 형식) alert('clicked!'); }} style={{ backgroundColor: color }}> {children} ) } export default function Button({color, text, children}) { const onClick = () => { alert('clicked!'); } return( {children} ) } 이벤트 객체 이벤트 핸들러를 통해 이벤트를 받아오는 과.. 2024. 2. 15. Props props React앱에서 자식 컴포넌트에게 데이터를 보내주고자 할 때 사용하는 문법 // 여러개의 버튼에 각기 다른 텍스트를 적용하고 싶은 경우 return( body ) // 자식 컴포넌트에 요소를 추가할 경우 props프로퍼티로 이를 받아옴 export default function Button(props) { const {color, text} = props return( {"props.text"} ) } -> 객체 형태로 넘어오기 때문에, 구조분해할당도 적용(더 간단하게) export default function Button({color, text}) { return( {text} ) } -> 객체 프로퍼티로 넘어가는 형식이기 때문에, 아예 객체로 정의하여 사용도 가능 export defaul.. 2024. 2. 11. JSX 문법 JavaScriptXML의 약자(JS + HTML) // ex export default function Body(){ const num = 10; const string = "hello"; const bool = true; // boolean 값은 자식요소로 작성 불가 const obj = { // 객체는 자식요소로 작성 불가 obj.a는 가능(number 값이기 때문) a:1, } // 선언문이 아닌 표현식만 작성 return( Body {num} {num % 2 ? '짝수':'홀수'} ) // 조건부 렌더링 return( Body {num % 2 === 0 ? {num}는 짝수입니다.:{num}은 홀수입니다.} ) } JSX 문법 규칙 닫는 태그()를 꼭 사용 return하는 모든 값들은 최상위 부.. 2024. 2. 7. 우주배경 미니멀 로그인 Form 만들기 오랜만에 웹 공부를 하면서 만들어봤다. 사진상으론 안보이지만 왼쪽의 지구는 자전하는중 ㅋㅋ HTML 기본적으로 main-container에 좌우로 div를 나누어 작성해서 CSS 코드 작성이 조금더 간편하도록 작성했다. ID Password Email Phone Submit! CSS 각 태그들의 배치를 원하는대로 하기위해 display:flex 속성을 적극 활용했다. /* main */ .main-container{ width: 60%; display:flex; margin:auto; border:2px solid; height: 80vh; border-radius: 18px; border:none; box-shadow: 0 0 30px rgba(36,51,106,0.7); transition: all .. 2024. 2. 7. React 실행 과정 이해 Module을 통한 요소 생성 npm vite 라이브러리를 활용해 react APP 생성에 필요한 추가적인 파일들을 다운받는 것이 기본 구성 npm create vite@latest > 가장 최신 버전으로 vite 설치 npm install > package-lock.json 및 node_modules 설치 npm run dev > package.json의 script에 작성되어있는 dev(개발자용 vite APP)를 실행 ESM 형식으로 module 불러오기 일반적으로 index.html에 root로 사용하는 div태그 하나만 작성 -> jsx 형식의 다른 파일들을 ESM 형식으로 root로 불러와 활용(빠른 업데이트를 제공하기 위함) import React from 'react'; imp.. 2024. 2. 6. React_Virtual Dom 이해 브라우저의 렌더링 과정 주요 렌더링 경로(critical Rendering Path)를 통해 브라우저가 코드를 알아보기 쉽게 해석 -> DOM트리 형태로 변환 Render Tree HTML로 작성한 요소의 배치 및 모양, CSS로 작성한 요소들의 스타일이 합쳐진 청사진 Layout 화면에 나타날 요소들의 위치 및 크기 결정 Painting 실제 요소를 화면에 그려내는 과정 HTML - DOM Render Tree - Layout - Painting CSS - CSSOM JS의 적용으로 DOM 수정 Reflow, Repainting 렌더링 과정 재진행, 이에 따라 발생하는 Reflow와 Repainting을 최소화를 목표 -> 성능의 최적화 < RE: Browser .. 2024. 2. 6. 이전 1 ··· 7 8 9 10 11 12 13 ··· 15 다음