슈퍼코딩 부트캠프/week35 슈퍼코딩 부트캠프 신입연수원 Week3 Day5 일일보고 - 75강 ~ 78강 강의듣기- 일일보고 작성하기 75강 파이어베이스로 유저 인증 및 소설 로그인 * 왜 소설 로그인이 필요할까?- 유저 입장에서 쉽게 로그인할 수 있다.- 보안 측면에서도 이점이 있다.- 개발자 입장에서도 쉽게 개발할 수 있다. >> firebase를 통해 Authentication 셋팅하기- firebase 홈페이지에서 Authentication에서 시작하기 누르기- 연동하려는 소셜로그인을 선택하기(나는 구글로 로그인을 선택함)- firebaseConfig 부분의 코드는 주어진 코드로 변경을 해준다(그 외의 부분은 이미 배포할때 다 설정을 해둔 것임)- 이때 firebaseConfig 부분의 코드는 공유되어서는 안되므로 .gitignore에 firebaseConfig가 작성된 파일명을.. 2024. 7. 20. 2024.07.11(목) 슈퍼코딩 부트캠프 신입연수원 week3 Day4 일일보고 - 72~74강 강의듣기- 일일보고 작성하기 72강 서버 없이 애플리케이션을 제작한다? 파이어베이스 >> Firebase란?- 서버 개발 없이 DB, 유저인증, 이미지 업로드, 배포 가능- 무료제공범위가 넓음- 실시간 데이터베이스를 지원- 인프라 관리에 신경 쓸 필요없이 빠르게 애플리케이션 제작 가능- 소규모 프로젝트에 적합 >> Firebase로 데이터베이스 연동하는 경우- 프로토타입이나 POC, MVP를 만들 때 주로 사용 -> 프로토타입 = 제품 만들기 전 디자인 기능 검증을 위한 시제품 -> POC(Proof Of Concept) = 아이디어가 실행가능한지 검증하는 시제품 -> MVP(Minimum Viable Product) = 최소한의 기능의 제품- 즉 빠르게 개발해서 검증해보고 싶을때 fir.. 2024. 7. 13. 2024.07.10(수) 슈퍼코딩 부트캠프 신입연수원 week3 Day3 일일보고 - 68강 ~ 71강 강의듣기- 일일보고 작성하기 68강 Big Picture >> 지금까지 기초를 배웠으니 생산성을 높여보자 !- 다양한 도구들을 사용해서 더 쉽고 빠르게 어플리케이션을 만들어보자.- HTML, CSS, JS는 프론트엔드의 근본 3대장 but 이것들로만 개발하기에는 생산성이 떨어짐- React, Vue, Angular, Svelte 등의 웹프레임워크가 많음-> React가 가장 많이 쓰이지만 이는 새로운 문법과 원리를 이해해야하므로 우리가 배운 문법을 그대로 사용하는 Svlete를 살짝 배워보겠다 ! 69강 거대한 프로그램을 만들기 위한 번들러의 이해 - Vite>> 자바스크립트의 태생- 자바스크립트는 간단한 동작만을 위해 태어났기에 여러개의 파일을 나눠서 개발하는 모듈 방식이 없는 .. 2024. 7. 11. 2024.07.09(화) 슈퍼코딩 부트캠프 신입연수원 week3 Day2 일일보고 - 64~67강 듣기- 일일보고 작성하기 64강 데이터베이스와 연동해 백엔드 회원 가입 기능 완성하기 1. 회원가입 처리 된 후 로그인 페이지로 옮기기>> 지난번에 작성했던 signup.js의 handleSubmit 부분에서 회원가입 성공시 - alert를 이용해서 메세지 띄우고 - window.location.pathname="/login.html"; 을 이용해서 페이지 옮기기if (data === "200") { div.innerText = "회원가입에 성공했습니다!"; div.style.color = "blue"; alert("회원가입에 성공했습니다."); window.location.pathname = "/login.html"; } } else { .. 2024. 7. 11. 2024.07.08(월) 슈퍼코딩 부트캠프 신입연수원 week3 Day1 일일보고 - 58~63강 강의듣기- 일일보고 작성하기 58~59강 저장된 게시글을 확인하려면? GET!1. index.js를 통해서 메인화면 구성하기 >> 원래 맨 처음에 html에서 화면을 구성했던 코드 블루투스 키보드 팝니다 서초동 4시간 전 5,000원 ; >> html코드를 바탕으로 js에서 다음과 같이 구현할 수 있다.const renderData = (data) => { // data = [{id:1,title:'aa'...},{id:2,title:'bbb'...}..]이런형태 const main = document.querySelector("main"); data.reverse().forEach(async (obj) => { // 배열 각각에 대해서 반복.. 2024. 7. 9. 이전 1 다음
