전체 글

📌 YouTube Data API | Google for Developers 동영상 업로드, 재생목록 만들기 및 관리 등의 YouTube 기능을 애플리케이션에 추가합니다. developers.google.com Youtube api key 발급받기 1. youtube api key를 발급받기 위해 아래 사이트에 접속한다. Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 2. 로그인을 한다. 3. 새 프로젝트를 클릭한다. 4. 프로젝트 이름을 작성하고 만들기를 클릭한다. 5. 해당 프로젝트의 대시보드로 와서 API 및 서비스의 사용설정된 API 및 서비스를 클릭한다. 6. 상단에 있는 API 및 서비스 사용 설정을 클릭한다. 7. 필요한 yout..

📍 투두리스트 프로젝트를 진행하며 모달창을 만들어야 할 일이 있었는데 그때는 라이브러리를 사용하는게 좋을지 그냥 코드로 만들어 보는게 좋을지 고민하다가 일단 그냥 만들어보자! 라는 마음으로 만들었다. 이번에 다른 프로젝트를 진행하며 모달창을 만들일이 또 생겼는데 이번에는 chakra를 사용해 간단하게 모달창을 만들어 보았다. 라이브러리 없이 모달창 구현하기 1. 모달창 컴포넌트 생성 및 버튼 만들기 export default function TodoEditModal() { return ( edit_square ); } 모달 컴포넌트를 생성하고 클릭했을 때 모달창을 띄울 버튼을 만든다. 2. 버튼 상태 관리해주기 import React, { useState } from 'react'; export defa..

💡 시작하며 오늘은 패스트캠퍼스의 강사님과 멘토님에 대해 말해보려고합니다! 패스트캠퍼스 강사님은 온라인 강의를 통해 만나는 강사님과 실시간 강의를 통해 만나는 강사님이 있습니다. 온라인 강의와 실시간 강의의 강사님이 겹치는 경우도 있었는데요. 오히려 강의의 연장선이 되는 느낌이라서 더 좋았습니다. 👩🏼‍💻 온라인 강의 강사님 HTML / CSS / JavaScript / TypeScript - 박영웅 강사님 초반의 모든 강의를 담당하셨던 박영웅 강사님 입니다.박영웅 강사님은 처음에 얘기했듯이 온라인 강의, 실시간 강의 모두 만났던 강사님입니다. 온라인강의로 HTML, CSS, JavaScript, TypeScript를 진행하고 실시간 강의로 JavaScript 심화를 진행했습니다. 박영웅 강사님의 가장 ..

팀 레파지토리 만들기 1. 내 깃허브 레파지토리에서 new를 클릭하고 레파지토리를 만들어 준다. 2. 팀원을 초대하기 위해 invite collaboratoes를 클릭한다. 3. add people를 클릭하고 팀원을 초대한다. (일단 레파지토리를 만들었다면 나중에 setting → collaborators 탭에서 확인할 수 있음) 4. 팀원들을 초대한 후 프로젝트 환경을 셋팅해준다. - git init - git add - git commit -m "커밋메세지" - git branch -M main - git remote add origin 레파지토리주소 - git push -u origin main develop 브랜치 만들기 develop 이란 브랜치는 왜 만들어야 될까? 코드를 짜다보면 완벽할 수만..

📍 Pretendard Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는 cactus.tistory.com 내가 가장 많이 사용하는 폰트 중 하나인 프리텐다드! NotoSans와 같이 가장 많이 사용하는 폰트이다. 웹사이트에 적용하기에 가장 깔끔하고 가독성 좋은 폰트인 것 같다. 1. 웹폰트 cdn 사용하기 HTML / CSS 둘 중 하나 선택해서 사용하면 된다. HTML html 파일 태그안에 적용해주면 된다. CSS @import url("https://cdn.jsdelivr.net/gh..

📍 https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 1. 유틸리티 타입이란? 유틸리티 타입이란 타입스크립트가 자체적으로 제공하는 특수한 타입들이다. 제네릭, 맵드 타입, 조건부 타입등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 유용한 타입들을 모아 놓은 것이다. 💡 가장 자주 활용되는 유틸리티 타입 2. 맵드 타입 기반 2.1 Partial 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 변환 기존 객체 타입에 정의된 프로퍼티들 중 일부분만 사용할 수..