[JavaScript] 4. callback
·
Programming Language/Javascript 공부기록
callback 함수● 콜백함수에 대해서  - 다른 코드의 인자로 넘겨주는 함수 (forEach, setTimeout)  - callback = call(부르다) + back(되돌아오다) = 되돌아와서 호출하는 것    즉, 제어에 대한 권한을 줄테니 입력된 로직으로 처리해라  - 다른 코드(함수 or 메서드)에 인자로 넘겨줌으로 제어권도 함께 위임한 함수  - 자체적으로 내부 로직에 적절한 시점에 실행 ● 제어권 1. 호출 시점let count = 0;// timer : 콜백 내부에서 사용할 수 있는 '어떤 게 돌고있는지' 알려주는 id값let timer = setInterval(function() { console.log(count); if(++count > 4) clearInterval(timer)..
[JavaScript] 3. this
·
Programming Language/Javascript 공부기록
this ● JavaScript에서는 this를 어디에서나 사용 가능● 상황에 따라 달라지는 this 1. this는 실행 컨트렉트가 생성될 때 결정.      = this를 bind → this는 함수를 호출할 때 결정한다  - 전역 공간에서의 this    → 전역 공간에서 this는 전역 객체를 가리킴    → 런타임 환경에 따라 this는 window(브라우저 환경)          또는 global(node 환경)을 각각 가리킴 ※ 런타임 환경이란?더보기 - JavaScript로 만들어 높은 프로그램이 구동 중인 환경.- 콘솔에서 node '파일이름'.js 로 VS code 상에서 구동하니 node환경- 크롬 브라우저 등에서 열면 브라우저 환경 2. 메서드로서 호출할 때 그 메서드 내부에서의 t..
[JavaScript] 2. 일급 객체, Map, Set
·
Programming Language/Javascript 공부기록
일급 객체로서의 함수● 일급 객체(First-Class Object) :  다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체  1) 변수에 함수를 할당- 함수는 변수에 할당 가능- 함수는 값으로 취급하기에 다른 변수와 같이 변수에 할당 가능- 변수에 할당된 함수는 후에 사용 가능const sayHello = function() { console.log('Hello!');};sayHello(); // "Hello!" 출력- sayHello()를 입력했을 때, function() 안에 있는 Hello라는 문구를 콘솔에 출력 2) 함수를 인자로 다른 함수에 전달- 함수는 다른 함수에 인자로 전달 가능- 함수가 값으로 취급되기 때문에 가능- 콜백(callback), 고차 함수(higher-ord..
[JavaScript] 1. es6 문법
·
Programming Language/Javascript 공부기록
es6 문법들● let : 재할당은 가능, 재선언은 불가능let value = "value1"console.log(value) // value1value = "value2" // 재할당 가능console.log(value) // value2let value = "value3" // 재선언 불가능// -> SyntaxError: Identifier 'value' has already been declared ● const : 재할당, 재선언이 불가능. 초기값 없으면 선언 불가const value; // 초기값 없이 선언 불가능// -> SyntaxError: Missing initializer in const declarationconst value = "value1"console.log(value) //..
[Error Note] 1. HTML에서 <script type="module">에서 나는 Error
·
Programming Language/Error Note
// 안에서 JS를 작동할 때와 혼동해서 났었던 Error 코드 예제 1 - 작동 x// banner에 있는 버튼 누르면 Modal 작동$("two").click(async function () { btnId = $(this).attr("id"); $modalContainer.removeAttr("class").addClass(btnId); $content.removeAttr("class").addClass("content"); $body.addClass("modal-active"); if (btnId == "two" || btnId == "closebtn") { $content.addClass(btnId); }});​ 코드 예제 2 - 작동 o// banner에 있는 버튼 누르면 Mo..
3. Firebase 연동
·
Programming Language/HTML, CSS
데이터베이스란?● 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음.  -  왜 데이터 베이스(DB)가 존재하는가?    → 필요한 데이터를 효율적으로 사용하기 위해 ● 데이터베이스의 종류 - 관계형 데이터베이스(=SQL) : 정리된 정보를 다룰 때 사용        주로 사용하는 곳 : 은행, 대기업  - 비관계형 데이터베이스(=NoSQL) : 복잡하거나 유연한 정보를 다룰 때 사용        주로 사용하는 곳 : 스타트업 Firestore Database● 구글 클라우드 기반  NoSQL 데이터베이스 ● 사용 방법         // Firebase SDK 라이브러리 가져오기         import { initializeApp } from "https://www.gstatic.com/fir..
2. 서버(Server) -> 클라이언트(Client), Fetch
·
Programming Language/HTML, CSS
JSON 이해하기● JSON은 Key : Value 로 구성  = 자료형 Dictionary와 비슷함Fetch? 패치!● 수정한 내용을 서버에 보내서 클라이언트 내용을 변경하는 것→ 쉽게 말하면 실시간 멀티 플레이 게임에서 게임 업데이트를 하는 것 = 패치 fetch("여기에 URL을 입력")// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화.then(data => {  console.log(data) // 개발자 도구에 찍어보기 }) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용- fetch("여기에 URL을 입력")    → 이 URL로 웹 통신 요청..
1. HTML, CSS 기초
·
Programming Language/HTML, CSS
서버(Server), 클라이언트(Client)● 웹(Web)의 동작 개념 - 브라우저는 그려주는 역할 > 요청을 보내고 받은 HTML 파일을 그려주는 것        즉, 브라우저는 요청을 보내고, 요청을 답으로 받은 걸 그려주는 것 ● 요청은 어디에 보내는 걸까? - 서버(Server)가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청을 보내는 것   => 크롬 브라우저에서 주소 창에 주소를 입력하고 엔터를 입력하는 것으로 요청 ● 우리가 흔히 쓰는 크롬(=브라우저)에서 주소를 통해 API로 요청을 보내고,   API는 요청에 맞는 HTML파일 돌려주고 크롬(=브라우저)는 받은 것을 화면에 그림 ● 항상 HTML 파일로 돌려주는가? - 데이터만 받아서 갈아 끼우는 식으로 작동 HTML● 웹페..
2. SQL 추가 기능 - Window Function
·
Programming Language
Window Function?● 각 행의 관계를 정의하기 위한 함수   → 그룹 내의 연산을 쉽게 만들어줌 ● 언제 사용할까? - 한 지역 식당 중 음식 종류에 따라 순위를 매기고 싶을 때 - 음식 종류에 따른 전체 주문건수 중 A 식당이 차지하는 비율 등... ● 기본 SQL 구조로 해결하려면 복잡하게 SubQuery 문을 사용하거나   여러 번의 연산을 수행해줘야 하지만, Window Function을 이용하면 조금 더 편리하게 표현 가능 ● 기본 구조WINDOW_FUNCTION(argument) over (partition by 그룹 기준 칼럼 order by 정렬 기준)- WINDOW_FUNCTION : 기능 명을 사용 (=SUM, AVG)- argument : 함수에 따라 작성 or 생략- pa..
[SQL 문제풀이] 4. SQL로 Pivot Table 구현
·
Programming Language/SQL 문제풀이
Pivot Table?● 2개 이상의 기준으로 데이터를 집계할 때, 보기 쉽게 배열해서 나타내는 것 - 기본 구조 구분 칼럼집계 기준데이터 - 예시집계기준 : 일자, 시간 1시 (구분 칼럼)2시3시4시10월 1일(집계 기준)4 (데이터)24710월 2일5105810월 3일7369 ● 문제 : 음식점별 시간별 주문건수 Pivot Table 뷰 만들기(조건 : 15~20시 사이, 20시 주문건수 기준 내림차순 정렬) 예시 TABEL 1 : 주문정보   /   TABEL 2 : 계산정보  주문번호음식점명주문시간11001식스맨15:1221002피자리아16:1331003스케스시17:3041004단리향18:2051005식스맨16:3661006스케스시19:2071007식스맨20:3081008식스맨15:44 1. 음식..