profile
가치와 의미를 쫓는 개발자 되기✨
post-thumbnail

[ API ] Youtube API 불러오기

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

2022년 5월 22일
·
0개의 댓글
post-thumbnail

[ React ] Event

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

2022년 5월 20일
·
0개의 댓글

VSCODE EXTENTION

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

2022년 5월 20일
·
0개의 댓글
post-thumbnail

[ React ] Props

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

2022년 5월 17일
·
0개의 댓글
post-thumbnail

[ React ] 함수형 vs 클래스형 컴포넌트

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

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[ React ] scaffolding, fonts, 자동 줄바꿈, 함수형 컴포넌트

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

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[ CSS ] - vh, vw, em, rem

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

2022년 5월 14일
·
0개의 댓글
post-thumbnail

vscode 폴더구조 변경하기

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

2022년 5월 14일
·
0개의 댓글
post-thumbnail

[ React ] install(node,sass,router) & structure

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

2022년 5월 10일
·
0개의 댓글

레티나란? (Retina Display)

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

2022년 5월 5일
·
0개의 댓글
post-thumbnail

마크업할 때 기억해야할 것 & 꿀팁!

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

2022년 4월 21일
·
0개의 댓글
post-thumbnail

[ 웹접근성 ] 한국형 웹컨텐츠 접근성 지침 2.1

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

2022년 3월 29일
·
0개의 댓글
post-thumbnail

[ CSS3 총복습 3 ] transform / transform-origin / display:table

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

2022년 3월 26일
·
0개의 댓글
post-thumbnail

[ CSS3 총복습 2 ] gradient / box-shadow / transition / animation / flex

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

2022년 3월 26일
·
0개의 댓글
post-thumbnail

[ JavaScript 총정리 12 ] async / await / Promise APIs

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

2022년 3월 25일
·
0개의 댓글
post-thumbnail

[ JavaScript 총정리 11 ] Promise

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

2022년 3월 25일
·
0개의 댓글
post-thumbnail

[ CSS3 총복습 1 ] outline-offset / background / text-shadow

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

2022년 3월 24일
·
0개의 댓글
post-thumbnail

[ JavaScript 총정리 10 ] Asynchronous Callback (비동기 처리 콜백함수)

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

2022년 3월 23일
·
0개의 댓글
post-thumbnail

[ html ] 사용자입력 form / input / select / label

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

2022년 3월 23일
·
0개의 댓글