myo-ma 님의 블로그

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에 대해서는 나중에 알아보자...

SQL 마지막 강의 주차 정리! 조회한 데이터에 아무 값이 없다면 어떤 식으로 대처해야할까? 테이블에 잘못된 데이터가 들어있을 수도 있고, JOIN을 했을 때 값이 없는 경우도 있다. 이런 상황일 때 데이터를 처리 할 수 있는 방법을 하나씩 알아보자. 없는 값을 제외해주기. 테이블을 조회하였을 때 없는 값이 포함되어 있으면 평균 연산을 하였을 때 제대로 된 값을 얻지못한다. 이론만으론 완벽히 이해하기 어렵기에 예시 Query문을 보며 이해해보자.  select restaurant_name, avg(rating) average_of_ratingfrom food_ordersgroup by 1 예시 Query문은 food_orders 테이블에서 음식점별 평균 rating을 구하기 위해 작성 되었는데..

여러 번의 연산을 한 번의 SQL 문으로 수행하기 (Subquery) Subquery? 문자 변경 후 숫자 연산을 하고 그 결과로 또 연산을 해야하거나, Query문이 너무 길 때 조금 더 효율적이고 알아보기 쉽게 하기 위해 사용.여러번의 연산을 수행할 때조건문에 연산 결과를 사용할 때조건에 Query 결과를 사용하고 싶을 때말 그대로 Query문이 너무 복잡해지거나 길어질 때 사용한다. 사용 방법을 쉽게 실습을 통해 알아보자 select order_id, restaurant_name, if(over_time>=0, over_time, 0) over_timefrom (select order_id, restaurant_name, food_preparation_time-25 over_timefrom food..

3주차 SQL 강의는 업무에 필요한 문자 포맷이 다를 때, SQL로 가공하기(REPLACE, SUBSTRING. CONCAT) REPLACE?SQL에서 특정 문자를 다른 것으로 바꿀 수 있는 기능을 제공.EX) 최근 상점 이름이 바뀌었지만 데이터엔 예전 이름으로 저장되어있다.EX) 지역명이 바뀌어서 수정이 필요할 때 사용 방법은 어렵지 않았다. replace (바꿀 컬럼, 현재 값, 바꿀 값)replace (addr, '문곡리', '문가리') 이런 식으로 바꿔주면 되는데 결과를 더욱 쉽게 보기 위해서 select addr "원래 주소" replace(addr, '문곡리', '문가리') "바뀐 주소"from food_orderswhere addr like '%문곡리%' 위 처럼 적으면 addr 컬럼에..

게시글의 제목은 강의 제목이라 2주차지만 사실 2일차... 2주차 때 배우는 내용! 처음에는 1주차, 저번에 배운 내용을 간단하게 상기시키는 느낌으로 복습을 시작한다.가장 기억해야하는 부분은 역시 조건 지정하는 방법이라고 생각한다. 1주차 내용은 어렵지 않기 때문에 바로 2주차 내용으로 넘어간다. 이번엔 조건 지정이 아닌 SQL로 한 번에 계산하기.(SUM, AVERAGE, COUNT, MIN, MAX) 이번 수업은 이론보단 실습으로, 직접 손으로 Query를 작성하며 이해하는 수업을 진행하셨다. select food_preparation_time, delivery_time, food_preparation_time + delivery_time as total_timefrom food..