전체 글 썸네일형 리스트형 내일배움캠프 사전캠프 TIL/15일차 유튜브 클론코딩 api활용 데이터 동적연결 Fetch를 활용해서 유튜브 동영상을 가져온다url https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25®ionCode=kr&key=받은키복사 > 아래처럼 나오면 성공 여기서 내가 필요한 데이터만 가져오도록 한다 function getData() { let html = ''; fetch("https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=10®ionCode=kr&key=키").then(res => res.json()).then(data => { .. 더보기 내일배움캠프 사전캠프 TIL/14일차 GIt(깃) 정리 , VScode 깃 연동 해보기,Git ignore Git(깃)이란?깃이란 컴퓨터 파일의 변경 사항을 추적하고 파일들의 작업을 조율하는 분산 버전 관리 시스템입니다.즉, 소프트웨어 개발에서 코드를 관리하고 기록하고 버전 관리를 해주므로 체계적인 개발이 가능하도록 도와주는 무료 공개 소프트웨어입니다. 여기서 형상관리 도구라는 말을 많이 들으실 텐데요이걸 쉽게 풀어 이야기한다면, 개발의 코드를 짜다가실수를 하거나 오류가 나면 쉽게 취소할 수 있고과거의 원하는 어느 시점으로 돌아갈 수 있고과거의 코드와 현재의 코드를 비교해 볼 수 있어서이러한 형상을 관리해 주는 도구라고 해서 형상관리 도구라고 이야기합니다.Git은 항상 여러분이 만든 모든 파일을 지켜보고 있고추가 수정 삭제된 사항들을 기록하고 있습니다.같은 프로젝트여도 다른 버전으로 생성하여같은 밑그림에서 .. 더보기 내일배움캠프 사전캠프 TIL/13일차 깃 공부 GIT앞으로 개발을 하며 중요하게 다룰 깃에 대해서 정리해보았다 GIT, VScode 연동하기vscode 들어와서 우측에 소스제어를 클릭한다 그 후 2번을 눌러서 다운로드 페이지로 간다깃 다운로드 본인에게 맞는 버전의 깃다운로드 해주고 별다른 설정이 필요없으므로 설치창이 나오면 빠르게 next 눌러서 넘겨준다깃 리포지터리 설정 미리 만들어 둔 기존 프로젝트를 깃허브에서 가져와 연결하고 싶다면 맨 아래 확인 깃 터미널 설정처음에 아무 소스 클릭하고 커밋을 눌러보면깃 이메일 및 이름을 설정하라는 창이 나왔다 그래서 터미널에서 git config user.name 아이디 git config user.name 이메일 입력해준다 터미널 오류 위와 같은 오류가 나왔는데 기본 터미널 세팅이 git 명령어을 사용.. 더보기 내일배움캠프 사전캠프 TIL/13일차 유튜브 클론 코딩 - 2 목표어제 결과물사이드 메뉴 전체 구조는 display flex로 해주고 중간중간 태그로 구역을 나눠줬다 마우스를 올리면 스크롤바가 보이게 해줬다.side-menu:hover{ overflow-y: auto;} > 요약보기 버튼을 누르면 요약 메뉴 나오게 했다function viewSideMenu() { var id_display = $('#side-menu')[0]; if (id_display.style.display == 'none') { id_display.style.display = 'flex' $('#sideHiddenMenu')[0].style.display = 'none' } else { id_display.style.display.. 더보기 내일배움캠프 사전캠프 TIL/12일차 유튜브 클론 코딩 부트스트랩 및 jquery 추가> head부분에 넣어준다//부트스트랩//jquery >dispay flex로 구분해준다 s s asdffs /css #main-header{ height:10vh; background-color:rgb(60, 255, 0); } #side-menu{ flex-basis: 10%; background-color: aqua; } #container{ display: flex; height: 90vh; } #contents{ flex-basis: 90%; background-color: bisque; }동영상 보여질 카.. 더보기 자바스크립트 async/await 알아보기 시작하기웹개발 강의 듣던 중 async function 함수가 나와 궁금해서 따로 찾아봤다비동기> 비동기 작업이란 특정 코드의 로직이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 것Promise > async 대해 알기 전 promise에 대해 알아야 하는데 아래 글 참고 하면 좋다https://www.tosspayments.com/blog/articles/dev-8?utm_source=velog&utm_medium=blog&utm_campaign=dev-9 Promise 실전에서 사용해보기오늘은 Promise가 무엇이고 어떻게 사용해야 되는지 토스페이먼츠 결제위젯 예제로 알아볼게요. Promise는 비동기 함수가 반환하는 객체에요. 함수의 성공 또는 실패 상태를 알려줘요. 콜백을 직접ww.. 더보기 내일배움캠프 사전캠프 TIL/11일차 웹개발 강의 5주차 마무리,숙제 시작하기5주차는 깃허브 + 파이썬에 대해 간단히 배웠다 마무리 숙제로는 파이어베이스 연결해서 데이터 출력이였다깃허브로 페이지 베포도 배워서 옛날에 만든 것 들을 베포해봐야겠다깃허브 깃은 개발자에겐 거의 필수라 할 정도로 많이 쓰는 오픈소스 공유하고 협업에도 좋은 사이트다 내가 만든 프로젝트 베포 방법은 setting에서 none를 -> main 로 바꿔준다 그리고 View site를 눌러주면 잘 나온다 index.html만 루트에 놔주면 오류없이 잘 나왔다 https://dnjs5024.github.io/tetris/ Tetris dnjs5024.github.io 숙제3주차 숙제에 파이어베이스를 연결 하는게 숙제 였다프로젝트 개요 옆의 설정을 눌러서 프로젝트 설정으로 간다 프로젝트 설정 > 일반에서 .. 더보기 내일배움캠프 사전캠프 TIL/9일차 웹개발 강의 3주차 숙제 부트스트랩에서 점보트론 css가져온다https://getbootstrap.com/docs/5.3/examples/jumbotron/ Custom jumbotron Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking. Example button div class="header" 만들고 안에 점보트론과 기존 div id = input-card를 넣어준다 .. 더보기 이전 1 2 3 4 5 6 7 8 다음
