WEB (47) 썸네일형 리스트형 브라우저 기본 동작원리 브라우저란? HTML 문서와 그림, 멀티미디어 파일 등의 콘텐츠를 검색 및 표현하는 소프트웨어를 말한다. 북한의 문화어로 열람기라고 말하는데 잘 해석한 말 같다. 브라우저의 주요 기능 사용자가 요청한 자원들을 서버에서 요청하여 브라우저에 가져오는 일을 한다. 요청한 자원이 HTML, XML, Image 등등 다양한 형태로 서버로부터 가져온다. 브라우저는 HTML과 CSS 명세에 따라 html 파일을 해석해서 브라우저의 렌더링 한다. 이 '명세'는 웹 표준화 기구인 W3C(World wide web Consortium)에서 정해짐. 이때 렌더링 하는 과정을 보자면 브라우저 렌더링 서버로부터 다운로드한 HTML과 CSS을 파싱 하여 Object Model로 만든다. 1. HTML -> DOM, CSS -> .. [express] 정적(static) 파일 서비스 1. 필요한 이유 multer를 통해 서버에 저장한 이미지를 클라이언트에 줘야할때 어떻게 줘야할지 고민하다가 express에서 정적 파일 전달 서비스를 이용하여 전달하는 방법으로 구상해보았다. png, css, js 등 이미지 이외에도 전달이 가능하다. 2. 사용 방법 app.use(express.static('public')); express 라이브러리에는 stastic이라는 메서드가 있다. 이 메서드를 미들웨어로서 로드해둔다 static의 인자로 전달되는 'public'은 디렉터리의 이름이다. 따라서 'public' 이라는 디렉터리 밑에 있는 데이터들은 웹브라우저의 요청에 따라 제공해줄 수 있게되었다. 가령, 사용자가 localhost:5000/images/cat.jpg 로 접근한다면, 해당 파일.. [express] 데이터 업데이트(update, findAndModify) update // name이 Kwon Hyeok Jin인 문서를 찾아 name을 Kim Hyeok Jin으로 바꾸고 age 또한 15으로 바꾼다 db.test.update({ 'name': 'Kwon Hyeok Jin' }, { 'name': 'Kim Hyeok Jin', 'age': 15 }); 위 메소드를 사용할때 유의할 점은 name이 Kwon Hyeok Jin인 문서의 기존 데이터들은 전부 삭제가 되고 name, age로만 구성이 된다. mongodb.collection.update({ name: 'Kwon Hyeok Jin' }, { $set: { age: 15 } }); 위 메소드는 $set을 사용하였다. 이렇게 사용하면 기존 데이터들은 유지가 되고 age만 15로 변경된다. updateOne.. [express] mongodb 데이터 삭제(remove, delete) // name이 kwon Hyeok Jin인 데이터 모두 삭제 mongodb.collection.remove({ name : Kwon Hyeok Jin }) // name이 Kwon Hyeok Jin인 데이터 중 하나만 삭제한다. mongodb.collection.deleteOne({ name : Kwon Hyeok Jin }) [express] mongodb 데이터 삽입(insert, save) // name의 값을 Kwon Hyeok Jin을 가지는 데이터 삽입 mongodb.collection.save({ name : Kwon Hyeok Jin }) // name의 값을 Kwon Hyeok Jin을 가지는 데이터 삽입 mongodb.collection.insert({ name : Kwon Hyeok Jin }) save와 insert은 둘다 데이터를 삽입하는 메소드이다. 하지만 차이점은 save는 해당 키값이 이미 콜렉션에서 존재한다면 update를 하고 insert는 에러를 출력한다. save는 SQL에서 on duplicate key update와 같은 기능을한다. [express] mongodb 데이터 검색(find, findOne) 컬렉션의 데이터를 전체 조회할때 mongodb.collection.find() // collection 데이터 전체조회 컬렉션의 특정 데이터가 포함된 데이터를 조회할때 // name이 Kwon Hyeok Jin이고 gender가 male인 데이터만 조회 mongodb.collection.find({ name : Kwon Hyeok Jin, gender : male }) 내부 오브젝트는 조건이다. SQL의 Where가 비슷한 기능을 한다. Where name = 'Kwon Hyeock Jin' and gender = 'male'인 셈이다. 쿼리 연산자를 사용하여 조회하는 것도 가능하다. // age의 값이 10이상 30 이하인 값을 조회 mongodb.collection.find( { “age”: { $g.. [Node.js] express란 Express 는 가장 인기있는 Node 웹 프레임 워크 이며, 다른 많은 인기있는 Node web frameworks의 기본 라이브러리 입니다. Express는 다음과 같은 메커니즘을 제공합니다 HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다. 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다. 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다. 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다. 라우팅 라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등.. [JS] Promises & async & await asnyc/await 는 비동기 코드를 작성하는 새로운 방법이다. 이전에는 비동기코드를 작성하기 위해 callback이나 promise를 사용해야 했다. asnyc/await 는 실제로는 최상위에 위치한 promise에 대해서 사용하게 된다. Asnyc/await는 plain callback 이나 node callback과 함께 사용할 수 없다. async/await는 promise처럼 non-blocking 이다. async/await는 비동기 코드의 겉모습과 동작을 좀 더 동기 코드와 유사하게 만들어준다. 이것이 async/await의 가장 큰 장점이다. 문법 getJSON함수를 예로 들어보자. 이 함수는 promise를 반환하고, JSON 오브젝트로 resolve된다. 우리는 간단하게 이 함수를 호.. 이전 1 2 3 4 5 6 다음
