Spell

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 = '웹개발 종합반' 총 두 개의 과목이 있으니, 두 개의 쿼리를 작성해서 각각 위의 사진처럼..