myo-ma 님의 블로그

5주차 숙제 내용 (동적 데이터 생성하기)숙제 내용firebase를 사용하기 위한 기본 세팅을 직접 해보기.firebase 데이터 추가 코드를 완성해보기.firebase 데이터 읽기 및 카드 생성 코드를 완성해보기.(Web-3주차 Homework 해결하지 못했던 포스팅박스 문제도 해결했다.) 이번 숙제 역시 모든 코드를 다 직접 작성하지 않고 기본 뼈대 코드가 주어진 상태에서 빈 공간만 채우는 방식이었다. 먼저 첫 번째 기본세팅이건 저번에 firebase를 배울 때 했지만 다시 복습하는 개념으로 적어보자.firebase에 접속한 후 우측 상단 콘솔로 이동 항목 클릭.본인이 생성했던 프로젝트를 클릭( 없다면 새로 프로젝트 만들기)프로젝트 설정으로 이동 후 일반 > 내 앱을 확인.SDK 설정에서 CDN을 클..

1. 저번에 시간에 배운 내용을 복습 겸 실습 진행.시작하기 앞서 먼저 기존에 했던 스파르타플릭스에서 진행할 것 이며,파이어베이스 설정 방법은 저번 TIL를 확인하자. 영화 데이터 추가 뼈대 코드$("").click(async function () { let doc = { }; await addDoc(collection(db, ""), doc)});$("빈칸").click(async function () { 빈칸 }버튼의 아이디를 넣어서 버튼으 클릭하면 작동되는 함수 만들기.let doc = { 빈칸 };영화 카드에 넣어줄 데이터들 입력.이미지(image), 제목, 별점, 추천이유를 하나씩 변수에 담아 줍니다.await addDoc(collection(db, ""), doc)postbox에 ..

1. Firebasefirebase란?구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌웹 서버를 대신 만들어 주는 서비스서버 개발 없이 제작 가능백엔드 코드 없이 프론트지식(HTML, CSS, JS)만 알아도 웹 서비스 출시 가능 개발코드 1.  서버로 데이터를 전송하는 코드 (프론트에서 작성)개발코드 2. 데이터를 받으면 데이터베이스에 저장하는 코드(파이어베이스에서 작성)  2. 데이터 베이스 개념.데이터 베이스란?데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음데이터를 잘 찾기 위해 존재하는 것데이터 베이스 종류. ( 크게 2가지 ) 여기서 NoSQL은 Not only SQL 이라는 뜻.  3. Fire..

오늘은 Web 3주차 숙제에 대해 작성해보자.(물론 숙제를 완벽하게 하지 못했다...) 먼저 숙제 결과 사진 먼저 보고 가자... 결과 사진이다.일단 나는 왠지 모르겠지만 사이즈조절이 다 뜻대로 안되어 매우 슬펐다.. 해상도의 차이인지.. 화면 크기의 차이인지.. 알 수 없으나.. 크기 조절이 뜻대로 되지 않았다. 숙제에서 제공해주는 기본 뼈대 코드가 있는데 거의 대부분의 이 다 적혀있기에 이걸 수정해야하나..? 라고 생각하다가 수정하는데도 postbox는 어떠한 값을 주어도 아무런 변화가 없기에 포기하였다... 일단 숙제에서 내게 요구한 것은 Bootstrap을 활용해서, jumbotron을 완성하세요.Bootstrap을 활용해서, cards를 추가해보세요.구글 폰트를 내 HTML에 적용해보세요.이 3..

저번에 배웠던 jQuery를 이어서 공부하자. 저번 글에서 실습했던 '나만의 추억 앨범'에서 추억 저장하기 버튼을 누르면 박스가 켜졌다 꺼졌다를 반복할 수 있는 만들어보자. 이처럼 두 가지 상태 사이를 전환하는 동작을 우리는 '토글(toggle)' 이라고 한다. 즉 어떤 속성이나 상태를 켜거나 끄는 동작.  직관적으로 알기 쉽게 openclose 라는 함수를 만들고 $('#...')을 통해 지정해주고, 뒤에 .toggle()을 붙임으로서 우리는 postingbox를 토글한다는 걸 알 수 있다. 여기서 openclose()는 우리가 추억 저장하기 버튼을 누를 때 마다 실행해야하기 때문에 추억 저정하기 버튼에 onclick = "openclose()"를 해준다. 그러면 우리는 추억 저장하기 버튼을 누를 때 ..

Web 기초 2일차. 시작은 어제 배웠던 것들을 복습 및 반복하는 개념으로 간단한 프로젝트 하나를 진행해볼 것 이다. [Spartaflix] 만들기. 어제 배웠던 내용이 기억이 안나면 보면서 진행해도 문제는 전혀없다. 부트스트랩 사이트에서 'jumbotron' 이라고 검색하고 demo 보기를 클릭하면위 형태와 비슷한 뼈대를 보여준다. 저기서 왼쪽 클릭 후 검사를 클릭하면 옆에 개발자 도구창이 뜨고 마우스를 가져다대며 우리가 필요한 형태의 div를 찾고, 다시 왼쪽 클릭 후 'Edit as HTML' 을 누르면 박스 형식으로 나타나는데 그걸 전부 복사 후 body에 넣어준다.  킹덤 병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인..

Web - 1주차. 웹의 동작 개념 - 브라우저의 역할은 1. 요청을 보내고 2. 받은 HTML 파일을 그려주는 것.브라우저는 그려주는 역할인데, 흔히 우리가 보는 웹 페이지는 준비되어있는 것을 받아서 브라우저가 우리가 볼 수 있게 그려주는 역할을 한다고 생각하면 쉽게 이해할 수 있다. 우리가 보는 브라우저는 주소를 통해 API를 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저 받은 것을 화면에 그려준다.   그렇다면 항상 HTML 파일로 돌려준다고 한다면 아니다.데이터만 내려줄 때가 더 많다고 하며 실제로는 웹 서비스에서는 API요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 javascript라는 언어에서 갈아 끼워준다. (JSON에 대해서는 나중에 알아보자...