[React] React 컴포넌트 라이프사이클 및 메소드

컴포넌트 라이프사이클 라이프사이클 메서드는 총 9가지가 있다. 아래와 같은 접두사가 붙어있는 경우도 있다. Will + ~ : 어떤 작업을 작동하기 전 실행 Did + ~ : 어떤 작업을 작동한 후 실행 🔍 리액트 컴포넌트의 라이프사이클 마운트(Mount) : DOM이 생성된 후 웹 브라우저에 나타나는 것. 업데이트(Update) : 컴포넌트에서 props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트 리렌더링 때, this.forceUpdate로 강제 렌더링할 때 업데이트 됨. 언마운트(Unmount) : 마운트의 반대 과정. DOM에서 컴포넌트를 제거하는 과정 * 생명 주기 React의 생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어..

• format_list_bulleted Frontend/React
• · 2023. 7. 5.
• textsms

[CSS] 블럭요소와 인라인요소

* 블럭요소(block element)와 인라인요소(inline element)란? - 블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다. - 인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다. 블럭요소(block element)와 인라인요소(inline element)의 종류 - 블럭요소 : ,,~,,,,,,,,,,등 - 인라인요소 : ,, ,,,,, 특징 및 주의점 - 블럭요소는 내부에 블럭요소와 인라인요소를 포함할 수 있습니다. 인라인요소는 내부에 블럭요소를 포함할 수 없습니다. - 블럭요소들 중에..

• format_list_bulleted Frontend/css
• · 2023. 6. 29.
• textsms

[API] Youtube 데이터 가져오기

유튜브 영상 리스트를 만들기 위해서 유튜브 API를 가져와보자. 공식문서 사이트 : https://developers.google.com/youtube/v3/getting-started?hl=ko 시작하기 | YouTube Data API | Google Developers 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 소개 이 문서는 YouTube와 상호작용할 수 있는 애플리케이션을 개발하려는 개발자를 위해 작성되었 developers.google.com 1. google cloud platform 등록 https://code.google.com/apis/console/?hl=ko Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 acco..

• format_list_bulleted Frontend/React
• · 2023. 4. 13.
• textsms

[CSS] Content 화면 중앙배치

화면의 상단에 배치되어 있는 것을 화면 중앙에 배치해보도록 하겠다. width: 100vw; height: 100vh; display: flex; justify-content: center; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;

• format_list_bulleted Frontend/css
• · 2023. 4. 5.
• textsms

React주석과 JSX주석처리

React코드 주석 javascript와 동일하게 한 줄주석은 //로, 여러 줄은 /* */로 처리합니다. // singleline comments componentDidMount() { //console.log("test"); this._getProducts(); }; // multiline comments componentDidMount() { /*console.log("test"); this._getProducts();*/ }; React JSX코드 주석 javascript의 여러줄 주석을 {}로 감싸준 형태로 사용합니다. {/* 주석연습 */} 출처 : https://fe-flower.tistory.com/38

• format_list_bulleted Frontend/React
• · 2022. 10. 31.
• textsms

[CSS] 웹화면의 가운데 정렬하기

HTML 1 2 3 4 5 CONTENTS cs CSS 1 2 3 4 5 6 7 8 9 body { width:100%; height:100%; } #box{ width:300px; height:300px; margin:0 auto; } cs 또는 수평에서 align-items, 중심축에서의 justify-content를 이용하여 다음과 같이 정렬할 수 있다. 1 2 3 4 5 6 7 body{ background-color: var(--color-black); display: flex; flex-direction: column; justify-content: center; align-items: center; } Colored by Color Scripter cs

• format_list_bulleted Frontend/css
• · 2021. 11. 6.
• textsms