CREATE TABLE student ( id INT NOT NULL, name STRING, address STRING, PRIMARY KEY (id) ) SELECT name FROM students WHERE address = "Seoul" ALTER TABLE students ADD scholarship MONEY UPDATE students SET scholarship = 3000000 where id = 2 DELETE FROM students WHERE id = 1

SQL NoSQL 뜻 Structured Query Language 구조화된 Not only SQL 꼭 구조화된 것만은 아닌 주요 언어 MySQL, Postgres MongoDB, Redi 형태 일반적으로 DB하면 생각나는 그 "테이블"중심 JSON 객체 등 문서중심 특성 자료 저장 시 반복되는 레코드를 줄이기 위해 테이블 분할 Null 또는 자료추가에 유연한 대처가능 용도 주문관리 등 같은 카테고리 내 여러 테이블 간 관계설정 필요시 인스타 등 [각 회원 - 개인정보/포스팅] 일대다 관계 필요시 자료방대 시 수직적 증가 -> 비용이 커짐 수평적 증가 -> 속도 원활 (*단 관계 복잡할 경우 SQL이 적합)

웹을 개발할 때는 수많은 페이지를 만들고 이를 URL과 연동하여 관리한다. 이때 중요한 것은 그 많은 페이지를 "효율적"으로 관리해야 하는데, 여기서 효율적이라는 의미는 app.get() 같은 함수의 남발을 지양하는 것을 뜻한다. 물론 일일이 관리할 수야 있겠지. 하지만 /something/category/item... 처럼 점점 계층화되고 페이지가 더 많아진다면, 그만큼 그때마다 손봐야 한다. 그래서 우리는 상황에 따라 유동적이고 경제적으로 대응할 방법이 필요해지고, Express에서 제공하는 Parameter는 이를 해결해준다. app.get('/posts/:id', function (req, res) { res.render('post') }) 만약 어떤 글의 주소가 루트 라우트에서 posts 경로를..

JavaScript의 별난 점! array와 object를 아예 새로운 형태로 초기화하지 않는 한, 그 원소를 추가/삭제하는 정도는 충분히 가능하다.

function(){} 안에 정의된 변수는 그 함수 밖에서 접근할 수 없는 것은 명확하다. 즉 함수 안에서는 var, let, const 모두 지역변수이다. 만약 접근시키려면 function 선언 전에 진작에 맨 위에서 전역으로 선언하면 된다. 그런데..! function이 아니라 if-else문, for/while문에서는 var, let, const의 특성이 조금 달라진다. var는 비록 {} 안에서 변수를 새로 선언했을지라도 {} 밖에서 접근 가능하다. 반면 let과 const는 if-else문, for/while문 역시 function(){}에서처럼 {} 안에서만 접근 가능하다.

Node.js에서, 서버를 담당하는 entry point는 웹앱의 두뇌라고 할 수 있다. 그리고 그 js파일 상의 로직으로 인해 변경되는 값을 HTML로 즉각 쏴주는 것이 EJS다. 이때 entry point -> EJS로 데이터를 전송하는 역할을 하는 함수가 render() 함수이다. 만약 EJS를 사용하지 않고 기본적인 HTML만을 사용한다면, 클라이언트로부터 온 request에 대한 response를 일일이 send 또는 sendFile 해야할 것이다. 하지만 EJS는 기존 HTML코드와 JavaScript코드의 공존을 통해 효율적인 개발을 도와준다. render() 함수를 사용하기 위해 우리는 역시나 Node Express 상의 get() 또는 post() 함수를 이용한다. 예를 들어 사용자로부터..

웹은 많은 정보를 담고 있기에 페이지 수가 상당히 많다. 그리고 개발자는 각 페이지마다 변화하는 정보들을 제때 잘 전달해주어야 한다. 이때 수많은 페이지들에 일일이 접근하고, 또 각 페이지마다 res.send()나 res.sendFile()같이 원시적인 방법을 사용한다면, 살기 싫을 것이다. 그래서 효율적인 개발을 위해 HTML의 "기본바탕"이 되는 템플릿을 고정해두고, 그 안에서 변하는 정보들만 싹 넣어주는 방법이 나왔으니, 그것이 바로 EJS다. 또한 EJS는, [서버구동을 위한 .js]과 [뼈대를 담은 .html] 등등 파일과 코드를 분리 관리함으로써 각 파일의 존재 목적에 부합하는 개발환경을 부여하며, 더 나은 유지보수를 도와준다. EJS 사용을 위한 준비물 1. npm i ejs 2. app.s..

처음에 heroku로 호스팅할 때, git init을 해야한다는 말을 듣고 지레 겁을 먹었다. 내가 여태까지 해온 커밋들에 영향을 줄 것 같아서였다. 하지만 전혀 쓸데없는 걱정이었다. 괜히 buildpack까지 건드렸지만, 그냥 git init부터 git add&commit을 새로한 뒤, heroku create -> git push heroku master하면 끝날 일이었다.

JSON이 뭔데? Java Script로 쓰여진 Object 표기법 그게 왜 필요한데? JSON은 서로 다른 컴퓨터 간 효율적인 정보 송수신을 위한 발명품이다. 대개 정보는 인간의 자연어처럼 String이면 좋겠지만, 컴퓨터에 "기록"하는 이상 객체같은 커다란 덩어리이기 마련이다. 이렇게 용량이 큰 상태로 정보를 주고받는다면, request가 많아질 때 과부하를 면치 못할 것이다. 그래서 단순히 그 내용만을 한줄로 요약해서 줄줄이 사탕처럼 압축하는 방법이 생겼으니, 그것이 바로 JSON이다.

// 유저로부터 키보드로 입력되는 키가 무엇인지 콘솔로 출력하는 예제 document.addEventListener("keydown", printKey); function printKey(event) { console.log(event.key); } High order function(고차함수) : 다른 함수를 인풋으로 받아들이는 함수. ex) addEventListener() Call back function : High order function에서 인풋으로 쓰이는 함수. ex) printKey() * 이 call back function이 먼저 실행되고 나서 실행 또는 반환되는 값을, high order function이 2차적으로 이용한다. 즉 call back function은 유저가 직접 실행..

.oneParent { text-align: center; } container, body 등 부모요소가 class="oneParent" 속성을 가지면, 하위 태그들을 가운데 정렬시킴 단, 하위 태그들은 width 속성이 없는 h, a, p, 등 .itsChild { margin: auto; } 위의 text-align: center;를 적용해도 안먹는 하위 태그들이 있다. 이는 하위 태그가 display: block이면서 그 width 속성을 건드린 경우에 해당한다(ex. h1 태그에 width: 10%; 적용) 이럴 때는 하위 태그에 margin을 0 또는 auto로 적용하면 된다.

.something { position: static; } 브라우저 상 기본 세팅되어 있는 값으로, 쓸 필요 없는 값. .something { position: relative; left: 100px; } 위의 static(기본) 상태였다면 존재했어야 할 위치 기준으로 좌표값을 계산하여 이동시킴(top/bottom/left/right) 해당 태그의 부모에도 relative가 할당되어있어야 하며, 그렇지 않을 경우에는 body 기준으로 움직임. 여기서는 왼쪽으로부터 100px만큼 더 떨어뜨림으로써 margin-left: 100px와 동일한 효과를 준다. 만약 이동하면서 다른 구성요소와 겹친다 해도 그걸 밀어내지 않고 그 위로 가려버림. .something { position: absolute; left: ..

Inline Block Inline-Block None 이 속성을 가진 태그들을 줄바꿈 없이 연이어 표시한다. 이 속성을 가진 태그들마다 줄바꿈을 적용한다. 이 속성을 가진 태그들을 줄바꿈 없이 연이어 표시한다. 해당 태그를 안보이게 한다. width 속성 무의미 width 속성 적용 가능 width 속성 적용 가능 JavaScript를 사용하여 사용자 반응에 맞춰 나중에는 보이게 하도록 응용 가능 .something { display: inline; } display: none; visibility: hidden; 해당 태그는 흔적도 없이 사라짐 해당 태그가 투명할 뿐

CSS 적용에는 3가지 방법이 있다. 1. inline 2. internal 3. external inline은 html 태그안에 style=""속성을 부여하는 것으로 가장 우선순위가 높고 그 태그만을 공략한다는 특징이 있지만, 그래서 다른 태그가 반복될 때는 일일이 복붙을 해야 하는 단점이 있다. internal은 위 inline의 단점을 극복하였다. 적용할 스타일을 html 태그에서 종합세트로 준비해놓는다. 하지만 internal은 그 스타일이 해당 .html파일에만 적용된다는 단점이 있다. external은 위 internal의 단점을 극복하였다. 적용할 스타일을 별도의 .css 파일에 묶어서 관리하고, 그것들을 사용할 html파일에서는 태그 안에 를 건다. link의 href 경로를 설정할 때, ..

Stored Property : 가장 일반적으로 사용하는 형태로, 선언과 동시에 그 형태가 변하지 않음. var는 변수, let은 상수. Computed Property : 변수에 값을 할당할 때 값이 상황에 맞게 알아서 바뀌어 주길 바랄 때 유용. 이름 그대로 값 할당 전에 연산이 필요한데, 그렇다고 함수를 생성하기엔 번거로운 경우 사용. Stored Property는 선언한 후로 형태를 변경할 수 없기 때문에 등장. 조건 1) let이 아닌 var로 지정할 것(전달되는 값에 따라 다른 값을 출력하므로) 조건 2) 자료형을 명시할 것 Computed Property는 2가지 형태가 있다. Getter : 미리 계획한 함수(연산)는 그대로이며, 그것으로부터 return된 값이 필요한 경우 사용. Sett..