본문 바로가기

분류 전체보기

 (157)
Controllers 이전 글에서 썼던 app.get의 두번째 인자, 즉 이후에 실행하게 될 함수를 컨트롤러 라고 부른다. 컨트롤러는 기본적으로 세개의 인자를 가진다. req, res, next 이다. req와 res 는 express가 제공하는데, req에는 요청에 관한 정보가 들어있고, res는 요청에대한 반응을 하기 위한 함수이다. res에는 여러 함수가 있고 res.end() , res.send() 등등이 있다. app.get("/", (req, res) => { return res.send("I love you.."); }) 낭만이 가득한 코드이다. req 와 res를 인자로 사용중이고, 모든 컨트롤러는 응답을 해야만 한다. 안그러면 서버는 계속 기다리고 느려진다고 한다. 응답하는 방식이 end(), send(), ..
Server Server 서버는 항상 켜져있고, 인터넷에 연결되어 있고, 사용자들의 request 를 listening하고 있는 컴퓨터 이다. 이때 request 는 사용자들이 서버에 말 그대로 요청하는 것들이다. 어딘가의 페이지로 이동하는 클릭, 결제 요청 클릭, 등등.... 서버를 사용하기 위해 일단 다음의 코드가 필요하다. import express from "express"; const app = express(); app.listen(PORT, handleListening); 위처럼 express 함수를 호출하면 express 는 express application 을 사용할 수 있게 반환해준다. 서버는 컴퓨터의 특정 창구로 연결되고 그 창구를 통해서 사용자들의 요청을 들을 수 있게되는데 이것이 port 이..
기본적인 Setups 1. package.json JSON 형식으로 구성된 텍스트 파일의 느낌. 이름은 반드시 "package.json" 이어야만 한다. 이 파일에는 해당 프로젝트의 여러 정보가 들어간다. 프로젝트 이름, 버전, 설명 등등.... "scripts" 에는 내가 실행하고 싶은 명령어의 shortcut을 저장한다고 생각하면 될것 같다. 예를들어 서버를 키고 싶을 때 마다 'nodemon server.js' 를 입력하는 번거로움보다는 (사실 번거롭지 않을 수 있지만 파일이름이 길어질 수 있고 babel-node 를 사용할 수 있으므로..) "scripts": { "dev": "nodemon --exec babel-node src/server.js" }, 으로 써 둔다면 서버를 실행 시킬때 npm run start 만..
States(상태) 1. active 마우스 커서로 버튼을 눌렀을때, 활성화 된 상태. 2. hover 마우스 커서를 버튼 위에 올려두었을때. 3. visited 특정 링크를 들어가거나 방문한적이 있다면 색이 바뀜.
Attribute selector 위와 같은 코드에서 특성을 콕 찝어서 selector로 사용할 수 있다. input[type="password"] { background-color:green; } 이런식 ㅋㅋ. 혹은 input[placeholder~="user"] { background-color:pink; } 이렇게하면 placeholder에 user이라는 단어가 포함되어있는 태그들에만 적용이 된다.
Pseudo selector 특정 태그를 조금더 자세하게 선택하고싶을때 사용한다. 원래는 세가지 방법이 있었다. 1. 태그의 이름 2. id의 이름(# 사용) 3. class의 이름(. 사용) 위와 같은 코드가 있을때, 마지막 div만을 지지고 볶고 싶다면 다음과 같이 한다. div:last-child { background-color: tomato; width:1000px; height:900px; } 원래 알던 방식의 selector을 쓰고 : column을 사용하여 특징을 추가하면 된다. 또 다른 방식으로는 부모-자식 관계를 이용하는 것이다. hello lkdajslkifdfkshfkjdhkjdhfkjhdfkjheebbbfdbibdibinside 이와 같은코드가 있을때, p안의 span만 색을 바꾸고 싶다면 p span { c..
Relative & Absolute 1. relative 위치를 조금씩 움직이고 싶을때 사용하는 것. position : relative; top: -10px; 과 같이 작성하면 해당 박스는 위로 10만큼 움직이게 된다. (4방향 모두 가능) 2. absolute 가장 가까운 relative한 부모를 기준으로 움직인다. 자신의 바로 윗 부모가 position:relative이면 그 해당 박스 내에서 움직일 수 있다. 하지만 어떠한 부모도 relative가 아니면, body를 기준으로 움직인다. left : 0px; 로 쓰면 맨왼쪽 벽에 붙어버린다.
Fixed 특정 박스가 스크롤해도 한자리에 계속 있게 하고 싶을때 사용한다. css코드에 position : fixed; 라고 작성하면 해당 박스는 초기의 위치에 고정되어, 스크롤해도 그자리에 남아있게 된다. 두개의 박스로 예를 들어보자. #one { width:100px; height:100px; background-color:green; } #two { width:100px; height:100px; position:fixed; background-color:wheat; } 현재 두 박스는 같은 layer에 위치하여 위아래로 붙어있는 상황이다. 밑에있는 흰색박스가 fixed되어 스크롤해도 원래의 위치를 유지하고 있다. 이때 #two에 top,bottom,right,left중 하나만 수정해도 두 박스는 다른 레이..

티스토리툴바