Front-end

📌 Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 프로젝트 생성하기 1. 로그인을 한 뒤 Go to console 을 클릭해 내 console로 이동한다. 2. 프로젝트 추가를 클릭한다. 3. 프로젝트 이름을 입력하고 계속 버튼을 누른다. 4. 계속 클릭! 5. 프로젝트 만들기 클릭하여 프로젝트 생성완료 Realtime Database 1) Realtime Database란? Firebase에서 제공하는 실시간 데이터베이스 서비스로 클라우드 기반으로 호스팅 되며, 웹..

📌 Postman API Platform | Sign Up for Free Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster. www.postman.com Open API를 사용할 때 API 리스트를 확인하고 테스트 할 수 있다. 컬렉션 기능도 있는데 필요한 API를 모아두고 쉽게 찾고, 테스트 할 수 있다. 1. 로그인을 한다. 2. My Workspace 에서 + 를 눌러 컬렉션을 만들어 준다. 3. Variables 탭을 클릭하고 발급받은 AP..

📌 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..

팀 레파지토리 만들기 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..