Spell

Order by는 문자열 기준으로도 정렬이 된다. select * from users order by email Users 테이블에서 email을 오름차순 정렬해줘! 의 결과다. 보이는봐와 같이 문자열도 오름차순이 된 화면이다. 물론 내림차순도 가능하다. select * from users order by email desc 문자열인 이름도 가능하겠지? select * from users order by name Users 테이블에서 name을 오름차순 정렬해줘! 이 경우에도 역시나 내림차순도 마찬가지다. select * from users order by name desc 날짜 및 시간도 가능하다. select * from users order by created_at Users 테이블에서 create..

아이템은 아무거나 선정해서 만들어 볼 것이다. 사전에 준비된 Bootstrap시작 템플릿을 가지고 만들어 볼 것이다. (feat. 기획서 레이아웃) 이 과정에서 내가 행동했던 (멍청한것 포함) 기록을 남겨본다.. 흑.. 시작 템플릿과 기획서 레이아웃은 다음과 같다. 시작해보죠! 일단.. 안에 기획서와 비슷하게 텍스트들을 넣고 구역을 나눠보자. Spell's Shopping 상품제목 해당 제품은 어쩌구저쩌구 내용 주문하기 주석 처리로 해당 구역이 어떤 구역인지 헷갈리지 않게 적어두었다. (내가 작업하기 편하려고) 이제 상품 이미지를 찾아서 일단 꾸며볼꺼고, 상세내용을 좀 더 수정해줄꺼다. 추가로 글꼴을 입혓으며, 전체를 하나의 구역으로 묶어 가운데로 읻동시켜주었다. 중간중간 글씨크기를 수정해주기 위해 cl..

오늘도 역시나 개발자 도구의 console창과 함께한다. 여러 예제들을 바탕으로 연습해볼꺼다. (1) 미세먼지(IDEX_MVL)의 값이 40 초과인 구 이름(MSRSTE_NM)과 값을 출력하기 연습에 앞서 아래의 값들을 console창으로 미리 넣어주어야 된다. 좀 길다. 밑에 더보기를 클릭하여 펼치면 나온다. 더보기 let mise_list = [ { MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, O3: 0.018, NO2: 0.015, CO: 0.4, SO2: 0.002, IDEX_NM: "좋음", IDEX_MVL: 31, ARPLT_MAIN: "O3", }, { MSRDT: "201912052100", MS..

변수, 자료형은 한번 다뤄보았고! 이제 함수, 조건문, 반복문이 남았다. 오늘도 여전히 개발자 도구의 console창을 띄운 뒤에 시작할꺼다. 함수 함수부터 다뤄보자. 내가 아는 함수는 값을 넣으면 값이 나오는 것. 프로그래밍에서의 함수는 정해진 동작을 입력하면 그 동작을 하는 것이다. console창에 입력해보자. function sum(num1, num2){ return num1+num2 } sum은 함수의 이름이다. 임의로 정한 이름. 풀이해 보자면 num1, num2라는 변수를 받아서 그것을 더한 값을 return해라. 함수에서의 return은 작업을 긑내고 나를 변신시켜줘! 라는 말이다. 어떻게 활용을 하는 것인가? let result = sum(2,3) 해당 문구를 입력하면 다음 화면이 나온다..

변수란? 값을 담는 것이라고 간단히 생각하면 된다. 개발자 도구를 키고 console창을 활용해서 학습해볼꺼다. 여기서 let a = 2 라는 코드를 적었다. 즉, a에다가 2라는 변수를 담은 것이다. 그럼 a+4=? 6이겠지? 이번에는 5라는 숫자를 담아보자. 그리고 a+4를 다시 계산해보면? 숫자가 아니라 문자열도 담을 수 있다. (문자열이기에 따옴표가 필요하다. '...' or "...") 그림과 같이 담았다면, first_name + last_name = ? 음 SpellKim이라고 나오겠지? Good! 그럼 First_name + a = ? 아마 Spell5? Nice! 여기서 우리는 알 수 있다. let text = x 라는 문구를 사용하면 text 에 x 라는 변수를 담는 것! (단 여기서 ..

Javascript? 브라우저가 유일하게 알아 들을 수 있는 프로그래밍 언어다. 초기에 공부할 때 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 Html+CSS+Javascript를 준다고 했떤 것을 기억하자. 근데 왜 브라우저가 알아 들을 수 있는 유일한 프로그래밍 언어일까? Java나 파이썬등은 안될까? 말이 안되는건 아니다. 하지만 이는 역사적인 이유와 이미 만들어진 표준이 존재하기 때문인데, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어 있으며, 모든 웹서버는 HTml+CSS+Javascript를 주게 되어있다. 예를 들어보면 첫 브라우저를 만든 사람이 Javascript를 알아들을 수 있게 만들었다. 그런데 친구가 와서 "오 뭐야 그거 신기하다, 나도 그걸로 만들어볼래"..

이번에는 다음 화면처럼 posting box를 만들어서 넣어줄꺼다. 저 가운데 있는 box를 추가할꺼다. 일단 내가 작업해둔 코드와 페이지부터 보자. 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 하기 여기에 기사 제목 기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약 코멘트 란 여기에 기사 제목 기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약 코멘트 란 여기에 기사 제목 기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약 코멘트 란 여기에 기사 제목 기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블..

전에 만든 페이지를.. 이제 좀 더 추가작업을 할 것이다. 예시 화면은 다음과 같고 현재 내 코드를 보자. Hello, world! This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. It uses utility classes for typography and spacing to space content out within the larger container. Learn more Card title that wraps to a new line This is a longer card with supporting text below ..

배운걸 바로 사용해서 활용해봐야겠지? https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/06.+%EB%82%98%ED%99%80%EB%A1%9C%EB%A9%94%EB%AA%A8%EC%9E%A5%EB%BC%88%EB%8C%80.html 해당 링크로 들어가면 이런 화면이 나온다. 이걸 참고로 따라해서 꾸며 볼 예정이다. 가장 상단에 Hello, world!라고 적혀있는 구역을 Jumbotron 이라고 한다. bootstrap에서 Jumbotron을 들어가 볼까? (https://getbootstrap.com/docs/4.0/components/jumbotron/) 와우! 아주 그대로 있꾸만! 크크크 밑에 있는..

Bootstrap이 뭔데? 괜찮은 CSS를 미리 모아둔 것이라고 생각하면 된다. 마치 컨닝하는 기분이겠다. (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 Bootstrap을 가져다 쓰는 경우가 많다고 한다. 그래.. 나의 미적감각이 어느정도 인지 모르잖아?) 누군가 미리 작성한 CSS를 내가 작성한 Html파일에 적용시킨다? 전에 나는 html과 CSS의 파일 분리를 배웠다. Bootstrap의 적용은 CSS파일 분리와 원리가 똑같다고 생각하면 된다. 그저 CSS의 파일이 인터넷 어딘가에 있다는 점이 다르다. 새로운 것을 해볼테니 새로운 html작성을 해보자. 이름은 index.html로 지정했다. 내용을 다 지우고 실습용 코드를..

폰트 활용 실습용으로 폰트 주소가 필요하다. 해당 사이트에서 원하는 폰트를 정한 뒤, 클릭하면 [Select this style+]라는 버튼을 클릭해서 링크를 얻어두자. https://fonts.google.com/?subset=korean 그럼 이런 창이 뜨는데, 위의 링크란을 복사 하자. 이후 밑에 CSS rules to specify families란도 복사해두자. 사용 할 내용은 다음과 같다. font-family: 'East Sea Dokdo', cursive; 첫번짼 안에 넣어 줄 것이고, 두번짼 CSS rule이기 때문에 style 안에 사용할 것이다. 첫번째 내용을 타이틀 아래에 추가해 줄 것이다. 추가로 아래에는 스타일을 하나 만들어주어 다음과 같이 입력하자. 로그인 페이지 아이디, 패스..

가장 자주하는 실수? 오류? 를 한번 짚고 넘어가자. 범주에 따른 통계치를 구하고 싶어 group by를 사용해 보았는데.. select * from orders group by payment_method 하지만, 통계치는 나오지 않고 4개의 데이터만 출력된 것을 알 수 있다. group by로 묶어 주긴 했지만 무엇을 통계내라는 건지 명령이 없어서 이렇게 나온다. 그래서 대표적으로 하나씩 보여준 것이다. 몇 개의 값이 있는지에 대한 명령을 넣어보자. select count(*) from orders group by payment_method payment_method라는 범주를 group by로 묶어주었으나, 첫번째 줄에서 그저 세기만 하라고 명령을 내려서 구분이 안된다. 그러면? 아! 범주를 첫번째 ..

◆Order by 전에 group by로 같은 성씨의 데이터를 하나로 묶고, 각 성씨의 회원수를 구했었다. select name, count(*) from users group by name 이것을 정렬을 해보자. 무엇을 정렬하던 계산할 것은 하고, 자료를 추출 한 후 마지막에 이루어져야 한다. 그 말은? 마지막에 와야한다! select name, count(*) from users group by name order by count(*) 기본적으로 작은 것부터 나온다. (즉, 오름차순으로 나온다) 큰 것부터 보고싶다면(즉, 내림차순으로 보고싶다면) 추가적인 descending의 약자인 desc라는 문구가 필요하다. (참고로 오름차순은 asc, ascending의 약자인데 써주지 않아도 된다) selec..

범주의 통계를 내주는 group by 성씨별로 몇 명의 회원이 있는지 알아보자. 성씨별로 몇 명이 회원이 있는지 구하려고 where 절을 사용해서 수십개의 쿼리를 작성하는 것은 너무 비효율적이다. 이 문제를 group by를 사용해서 바로 해결이 가능하다. select name, count(*) from users group by name 성씨별로 카운터가 되어지며 맨 아래 숫자를 확인하면 54개의 성씨가 있다는 정보도 알 수 있다. 여기서 SQL 쿼리가 실행되는 순서 select name, count(*) from users group by name​ 위 쿼리가 실행되는 순서는 from → group by → select 1. from users : users 테이블 데이터 전체를 가져온다 2. gro..

데이터베이스 테이블에 저장된 데이터는 쌓여있는 날 것의 데이터이다. 쌓여있는 날 것의 데이터를 뽑아 썻다면, 이후에는 이를 가지고 의미를 갖는 '정보'로 변환하여 데이터베이스 테이블에 저장된 데이터를 사용할꺼다. 예를들어 가장 많은 like를 받은 사람의 이름, 전체 신청자수, 평균 연령 등은 의미있는 '정보'이다. (더 나아가면 범주(category) 각각의 정보가 궁금할 수 있다) 우선 과목별 신청자수를 구한다고 한다면? select count(*) from orders where course_title = '앱개발 종합반' select count(*) from orders where course_title = '웹개발 종합반' 총 두 개의 과목이 있으니, 두 개의 쿼리를 작성해서 각각 위의 사진처럼..