전체 글 24

웹개발 A to Z (4) - Firebase, Firestore를 사용한 데이터베이스 작업

3주차까지는 Fetch를 사용해서 서버에 올라와있었던 JSON 데이터로부터 내가 필요한 정보만을 가져왔었다. 그리고 서버와 클라이언트 개념을 이해했었는데,   이제까지 내가 만든 사이트들을 보면, 내가 직접 html 코드를 작성하고 [기록하기] 버튼을 눌러서 페이지에 새로 앨범 카드가 쓰여진 걸 확인할 수 있었지만, 새로고침하면 모든 것이 무색하게 초기 상태로 돌아갔다. 다시 한번, 왜 이렇게 된 것일까?  아무리 클라이언트 페이지에서 HTML 데이터를 만들어서 페이지 구조를 덧붙인다고 한들, 결국 서버-클라이언트 구조에서는 페이지를 새로 로드할 시 서버에서 모든 페이지 정보를 가져와서 사용자에게 표시하기만 할 뿐이다. 즉 내가 서버에 내 데이터를 옮겨서 저장해 놓지 않는다면, 내가 만들었던 html 코..

SQL 실무 기초 (4) - Subquery, Join

이번 주차에는 Subquery와 Join에 대해 공부했으며, 이 연산은 이런 상황에서 어울린다. 1. 많은 연산을 한번에 수행해야 할 경우, 너무 길어지는 Query를 나눌 수 있는 방법이 없을까?2. 연산한 결과를 다른 연산에도 사용해야 하는데, 같은 코드를 반복해서 적지 않아도 되는 방법이 있을까?3. 출력해야 하는 데이터가 여러 테이블에 나누어져 있는 경우 어떻게 데이터를 서로 다른 테이블에서 가져와 사용할 수 있을까? 그러면, 먼저 Subquery에 대해 알아보자!  Subquery는 말 그대로 쿼리 안에 다른 쿼리가 있는 것을 뜻한다.모든 Query별로 연산이 한번씩만 필요하다면 얼마나 좋을까, 하지만 인생은 결코 그리 간단하지 않다.. 예를 들어 놀이공원에서 티켓 값을 계산해야 하는 상황을 생..

SQL 실무 기초 (3) - 문자 다듬기, 수치 계산/문자 연산

* 문자 데이터를 원하는 포맷으로 출력하기 위해서는 어떻게 할까?* 배달 시간 구간에 따라서 수수료를 다르게 계산하고 싶은데, 시간을 조건으로 둘 수는 없을까?* 왜 Query를 쓰는데 오류가 나는걸까? 이 3가지 키포인트를 중점으로 오늘 SQL을 공부해보겠다. ============================ 먼저 문자를 다듬는 방법으로, 크게 3가지 함수를 살펴보려고 한다!바로 Replace, Substring, Concat 함수다. 데이터베이스 값을 만약 사람이 썼다면, 실수는 언제나 발생할 수 있다. 데이터베이스 값을 애초에 적을 때 잘못 적었을 수도 있을 것이고, 그 값이 중간에 수정되어 다른 값으로 변경해 줘야 할 필요도 있을 것이다. 이럴 때 Replace 함수를 사용한다. replace(..

웹개발 A to Z (3) - JQuery, Fetch

오늘은 이어서 JQuery를 학습하고, 새로운 개념인 Fetch에 대해서 배워보려고 한다.  오늘 먼저 만들어 보고자 하는 것은 바로 두가지, [영화 기록하기]를 눌렀을 때 기록하기 탭이 나타났다가 없어지는 것과 영화 정보를 입력하고 기록하기를 눌렀을 때 새로운 영화 정보가 표시되게 하는 것이다.   먼저 태그를 사용할 건데, 이 태그는 과 사이에 넣는다.   style>  script>    function openclose() {      $('#postingbox').toggle();    }  script>head>이처럼 새로 만들고 싶은 함수 이름을 정하고, function 함수이름() { }을 사용한다.그리고 JQuery를 사용하려면 언제나 대상을 지정해야 하므로, 여기에서는 '기록하기' ..

SQL 실무 기초 (2) - 더 복잡한 Query 작성하기

자 살~짝만 더 복잡하게 Query를 작성해보도록 하자. 지난번에 이어서 오늘도 food_order 데이터베이스를 이용해서 예제를 작성할 거다. 예를 들어서 내가 배달음식을 시켜 먹을 건데, 데이터베이스를 확인해보니 food_preparation_time과 delivery_time Column이 있다. 아무래도 배달 시간이 빠르면 빠를 수록 좋은데, 주변 음식점들의 평균 배달 시간을 확인해서 평균보다 훨씬 빠르게 걸리는 음식점을 찾고 싶을 때, select avg(delivery_time) as '배달음식시간'from food_orders이런 식으로 내 배한테 평균 24분정도만 더 기다려달라고 말할 수 있을 것이다. 다음으로 레스토랑에서 지금 몇명의 고객들이 주문을 해 왔는지를 알아볼 수도 있을 것이다...

SQL 실무형 기초 (1) - 데이터베이스 이해 / SELECT, FROM, WHERE문 이용하기

학교에서도 많이 배웠던 SQL이었는데.. ㅋㅋ 여기서 이렇게 다시 정리를 하게 될줄은 몰랐다. 아무튼 SQL에 대해 알아보자~먼저 SQL이란, 데이터베이스와 대화를 하기 위한 언어를 뜻한다! 마치 사용자가 데이터베이스에게 A라는 친구의 정보를 달라고 요청한다거나, 구체적으로는 202X년 11월 26일 저녁 시간대에 30000원 어치 이상 메뉴를 주문해서 먹고 간 남자 손님들의 전화번호를 알려달라고 요청하는 상황이 생길 때(실제에서는 이렇게 구체적으로 알 수 없지만)! 사용한다. 데이터베이스에게 질문하는 것을 Query라고 한다.  이번에는 DBeaver라는 프로그램을 사용해서 SQL Query를 조작해보았다! 이 프로그램 설명은 따로 하지 않겠다..  먼저 데이터를 요청할 때 필수적으로 사용되는 SELE..

웹개발 A to Z (2) - 자바스크립트와 JQuery

1주차때는 HTML과 CSS를 이용해서 간단한 웹사이트의 뼈대를 만들어 보았다면, 오늘은 자바스크립트를 이용해서 움직이도록 만들어 보자. 1주차때까지 HTML와 CSS로만으로는 정적인 이미지밖에 보여 줄수 없었다면, 자바스크립트를 더하면 클릭을 해서 사진이 바뀔 수도 있고, 스크롤을 하면 사진이 이동하게 만들 수도 있다! 오늘은 아래와 비슷한 홈페이지를 만들어 볼 거다.. 뭔가 상당히 넷플릭스와 비슷해 보이긴 하지만아무튼 시작~ 먼저 새로운 폴더를 만들고 그 안에 index.html 문서를 만든 후 html:5로 자동완성 코드를 작성한다. 먼저 상단 head를 만들어 볼건데, 1주차때 훑어봤던 폰트를 추가하고, 부트스트랩에서 헤더를 갖다 사용할 예정이다! 폰트는 구글 폰트 > Korean > 원하는 폰트..

웹 개발 A to Z (1주차: 웹 브라우저 동작 원리, HTML & CSS 기초)

웹 사이트는 어떻게 만드는 걸까? 먼저 오늘은 웹사이트를 만드는 것에 있어서 뼈대만 구성해 보려고 한다.바로 HTML과 CSS를 활용하는 것.그리고 더 나아가 Javascript와 JQUERY까지 찍먹해 보려고 한다. 먼저 HTML은 웹사이트의 뼈대에 해당하고, CSS는 디자인, 그리고 움직임을 추가하려면 자바스크립트를 넣어야 한다. 오늘은 HTML과 CSS를 통해 웹사이트를 만드는 방법과 Bootstrap을 사용하는 방법에 대해 공부해보자.  먼저 네이버를 검색하면, 어떻게 네이버 화면이 내 컴퓨터로 옮겨져 나오는걸까?어렸을 때는 컴퓨터 안에 사람들이 살고 있어서... 그 사람들이 열심히 일을 하면 나오는줄 알았다. (사실 옛날 컴퓨터는 사이즈가 커서 어린 마음에 진짜 그렇게 생각했었다, 텔레비전도 ㅋ..

080624 TIL

개별 학습:자바 문법 강의 시청:웹개발 강의(1주차, 2주차 영상 시청)HTML과 CSS를 통해 웹사이트를 만드는 방법웹 브라우저 동작 원리자바스크립트 기초문법자바스크립트란?자바스크립트를 사용하는 이유자바와 자바스크립트의 차이는 뭐죠? 사이에 JS를 작성한다. 개발자 도구... console.log()리스트, 딕셔너리, 조건문, 반복문 DOMJQUERY란? JQUERY 문법