Hwang's Develop

LATEST

• 

  카테고리 없음 [React] lodash 디바운스(debounce), 스로틀(throttle) 함수 사용하기 1) Debounce debounce는 연속으로 이벤트 호출이 일어나는 상황에 사용하는 함수로, 마지막 이벤트가 실행되고 일정 시간 동안 추가 이벤트가 발생하지 않을 때 실행됩니다. debounce는 꼭 필요한 시점에만 함수를 실행해 서버 자원을 효율적으로 사용할 수 있게 해줍니다. *설치 방법 npm install --save lodash 예시 코드를 통해 debounce 함수를 알아보겠습니다. import React, { Component } from 'react'; import { debounce } from 'lodash'; class reactDebounce extends Component { debounceFunc = debounce( () => { console.log("Debounce AP..

• 

  프론트엔드 [React] 라우팅(Routing)이란? / react-router-dom / header, footer / 홈페이지 만들기 / react img / require 문법 라우팅(Routing) 이란? 라우팅 : 호출되는 URL에 따라 페이지 이동을 설정하는 것 React에서 view는 component를 사용하고 있습니다. 라우팅을 이용하면, 호출되는 URL에 따라 서로 다른 컴포넌트를 표시할 수 있습니다. react-router-dom 패키지 react에서 라우팅을 지원하는 패키지 중, 웹 개발을 위한 패키지로 적합한 것은 react-router-dom 입니다. *설치 방법 npm install --save react-router-dom react-router-dom 패키지는 BrowserRouter, Route, Link 기능을 제공합니다. Route와 Link를 사용하기 위해서는 태그로 감싸 사용해야 합니다. - Route : 호출되는 URL에 따라 이동할 comp..

• 

  프론트엔드 [React] Reactstrap 기능들 (Carousel, Collapse, Fade, Form, Input Group, Jumbotron) Reactstrap 에서는 여러 기능을 제공합니다. 오늘은 그 중 Carousel, Collapse, Fade, Form에 대해 알아보겠습니다. 예제를 통해 사용하는 방법을 익혀봅시다! 1. Carousel : 컨텐츠를 옆으로 넘기는 기능 - carousel 패키지에는 슬라이드를 일정 시간 단위로 자동으로 회전시키는 기능을 제공합니다. import React from 'react'; import ReactstrapCarousel from './R041_ReactstrapCarousel' import 'bootstrap/dist/css/bootstrap.css' function App() { return ( Start React 200! CSS 적용하기 ); } export default App; App...

• 

  프론트엔드 [CSS] 선택자, 주요 속성 정리(flex, grid, font-size, color, margin, padding, position) 1. 선택자란? 선택자는 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지를 브라우저에 알려주는 요소입니다. 1) 요소 선택자 : 직접 요소명을 적어서 나타내는 선택자 (a, h1, div, img, p, span 등) 2) id 선택자 : id 속성 앞에 #을 붙여서 사용 3) class 선택자 : class 속성 앞에 .(마침표)를 붙여서 사용 4) 선택자 중첩 : 선택자를 이어서 사용 ex) 선택자가 span.main 이라면 span 태그이면서 class 명이 main인 선택자들을 선택합니다. 5) 선택자 묶음 : ,를 이용하여 묶음 6) 후손 선택자 : 띄어쓰기로 연결하면 자식요소를 선택함 ex) 선택자가 img a 라면 img 태그의 자식 요소인 a 선택자를 선택합니다. 2. ..

• 프론트엔드 [HTML] html class 속성과 id 속성의 차이점 목적의 차이 - class : 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 - id : 태그에 유일한 이름을 붙이고 싶을 때 반복가능성의 차이 - class class 속성은 여러번 반복해서 사용할 수 있고, 동일한 class로 분류된 태그들을 쉽게 관리할 수 있습니다. - id id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능합니다. CSS 적용의 차이 이렇게 html에서 지정된 id와 class를 css에서 사용할 때에도 차이가 있습니다. - class id 속성은 앞에 # 기호를 붙이고 쓰고, 유일한 속성이므로 class보다 우선적으로 적용됩니다. - id class 속성은 앞에 .(마침표) 기호를 붙이고 쓰면 됩니다. 정리 class id 스타일의 분류에 사용 특정 요소에..

• 

  프론트엔드 [HTML] HTML 태그 정리(div, span, img, input, a) 1. div 태그 div 태그는 특별한 기능 없이, 여러 소스를 묶을 때 사용합니다. 주로 레이아웃을 나누는데 쓰입니다. 2. span 태그 span 태그도 div 태그와 마찬가지로 특별한 기능을 갖지 않습니다. - 와 의 차이점 div 태그와 span 태그는 display 속성이 다릅니다. div 태그는 dispaly: block 으로 줄바꿈이 가능하고, span 태그는 display: inline으로 줄바꿈이 되지 않습니다. 따라서, 내용을 한 줄로 쓰려면 span 태그를 사용하고, 두 줄 이상 넣으려면 div 태그를 사용합니다. 3. img 태그 태그 의미 이미지 삽입 src= 이미지 파일 경로 alt= 대체용 텍스트 width= height= 가로, 세로 크기 조절 % 브라우저 창의 크기 단위 p..

• 

  프론트엔드 [HTML] HTML, DOM이란? (Hypertext Markup Language, DOM) 1. HTML이란? HTML (Hypertext Markup Language) HTML은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML으로 웹 페이지의 틀을 잡는다고 생각하면 됩니다. - Hypertext 하이퍼텍스트 하이퍼텍스트는 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. - Markup Language 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어입니다. HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 요소를 사용하고, 요소들은 "태그"를 통해 문서의 다른 텍스트와 구분합니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다...