React에서 Youtube API 데이터 불러오기 구글 클라우드 플랫폼 Google Cloud Platform > API 라이브러리 > YouTube Data API v3 > 사용 클릭 ! 사용자 인증정보 들어가기 키표시 옆 API 키 수정 클릭 ! Restfu

Event onChangeMode 값으로 함수를 전달한다. html 문법은 똑같지 않다. 코드를 작성하면 리액트 개발환경이 최종적으로 브라우저가 이해할 수 있는 html로 컴버팅해주기 때문에

VSCode 사용 시 설치하면 편리한 익스텐션 정리! 이제 없으면 불편하다고 느낄정도. 한번에 정리해놓기 :) 배경 테마 정하기 아이콘 테마, 아이콘이 조금 더 생동감 있게 바뀜코드 포멧팅ctrl+, 눌러서 setting 창으로 이동 -> tab 2로 변경 괄호마다

img 태그에 src 속성이 있듯이 직접 정의한 나만의 태그(컴포넌트)에 속성을 넣을 수 있는데, 리액트는 그 속성을 props 라고 부른다. 그리고 props에는 객체-Object가 들어온다.📌 각각의 컴포넌트(사용자 정의 태그)를 만들어준 후 App()에 위치시켜

리액트 컴포넌트를 선언하는 두 가지 방식에는 함수형과 클래스형이 있다. 클래스형 이후에 함수형이 나왔지만, 클래스형을 쓰던 기업의 프로젝트 유지보수를 위해 개념을 알고 있어야 한다. 최근에는 함수형 + 클래스형의 장점을 넣은 리액트 훅을 사용하는 추세이다.클래스형 컴포

scaffolding 빠른생성 - 터미널 작성순서 - ls (위치확인) cd desktop (이동) npx create-react-app 폴더명 (scaffolding 생성) cd 폴더명 (생성한 폴더로 이동) code . (vscode열기 : 설정필요)

📌 Viewport는 웹사이트에서 보여지는 영역을 뜻하며 vh, vw는 현재 실행중인 스크린 크기를 기준으로 상대적인 크기를 반환하는 단위이다. 예를들어 현재 스크린 높이가 1000px이라면 1vh=10px, 50vh=500px 이 된다. 특징 1) vh 는 widt

settings에 들어간다. Search settings에 'explorer.compactFolders'라고 입력한다. 체크박스 해제하면 끝!

Nodejs.org에서 다운로드 터미널에서 버전확인 npx create-react-app 작성하여 설치 npm start로 페이지 연동Material Icon Theme : 확장자 아이콘 ES7+ React/Redux/React-Native : 자동완성문법Prettie

인간의 눈으로는 화소를 구분할 수 없는 화소 밀도를 가진 애플이 만든 브랜드의 이름이다. 애플의 레티나는 300PPI(Pixel Per Inch) 고해상도 디스플레이를 브랜드화한 것이며, 일반 맥북Pro보다 최대 4배 선명하고, Full-HD(1920X1080) 해상도

사이트를 마크업해보며 실수했던 것, 새로 알게된 것들을 정리해보았다. 웹접근성을 항상 염두해두고 작업할 것!! :)

Web Accessibility, 웹접근성 1. 대체텍스트 제공 (alt="") image 시각장애인은 이미지 안의 텍스트를 볼 수 없기 때문에 속성 안에 따로 텍스트를 입력해준다. 이 때 이미지의 텍스트를 그대로 전달하기보다, 내용의 주요 타이틀도 신경써서 함께

transform 다양한 도형의 변형을 구현하며, 애니메이션을 사용하기 위해서는 transition의 도움이 필요하다. 예를들어 hover시, 원래 요소에는 기본적으로 보여질 transform을, hover에는 변형될 transform을 각각 작성 후 transitio

Gradient background 속성으로 들어가며, 보통 를 사용한다. 은 방향을 나타내며, 오른쪽에서 마지막 색상으로 끝난다. 와 같이 각도를 넣어줄 수도 있음 > ❗️ 포토샵 디자인을 받을 때는 꼭 '레이어스타일'로 그라디언트를 받아야 정확하게 구현해낼 수

async & await 와 은 Promise를 조금 더 간결하게 그리고 동기적으로 실행되는 것처럼 보이도록 만들어준다. Promise chainig과 같이 난잡해진 코드 위에 사용하면, 동기식으로(순서대로) 코드를 작성하는 것처럼 간편하게 만들 수 있다. 이렇게 기

Promise는 JavaScript에서 제공하는 비동기를 간편하게 할 수 있도록 도와주는 오브젝트이다. 정상적인 기능이 수행되었다면 성공 메세지와 함께 처리된 결과값을 전달해주고, 문제가 생겼다면 에러를 전달해준다. pending : 수행중 fulfilled : 완료

outline은 테두리를 그려주는 속성으로 border와 같은 형태로 기입하지만, border-top이나 border-bottom 같이 어느 한 면을 지정하는 것은 불가능하다. outline-offset은 요소와 테두리 사이에 공간을 주며, 그 테두리는 주변의 다른 요

Asynchronous Callback JavaScript는 동기적 언어로써, 호이스팅이 된 이후부터 코드가 순서에 맞게 하나씩 동기적으로 실행된다. 이 때 API를 사용하여 일정한 시간이 지나면 내가 지정한 콜백함수가 실행되도록 하면, 시간차로 인한 비동기적 실행이

form * 사용자 입력에 필요한 레이아웃 구성 * ex) 로그인, 회원가입, 카드번호 등 속성 : 데이터를 주고받는 경로 입력 : 데이터를 주고받는 방식 입력 -> 개발자가 입력하는 것이므로, 퍼블리셔는 빈 속성만 입력 내부태그