분류 전체보기
-
[ NodeJS 기본 ] form을 통한 사용자 데이터 전송Node.js/nodeJS 기본 2023. 3. 18. 18:10
home 위 form 예시에서는 action 속성에 "/create_process"를 할당했고 method 속성을 POST로 지정했습니다. 즉, submit 될 때 발생하는 HTTP request의 url 프로퍼티는 "/create"가 됩니다. 따라서 nodejs에서는 pathname === "/create"란 조건문으로 request에 대응하여 적절한 응답을 전달할 수 있습니다. 이때 사용되는 것이 nodejs의 내장모듈인 querystring 모듈과 request의 on 메서드입니다. request.on 클라이언트가 서버로 HTTP request를 보낼때 서버는 request를 읽을 수 있는 스트림으로 받습니다. request.on 메서드는 매 스트림이 data 이벤트가 발생시킬때 마다 실행되는 ca..
-
[ NodeJS 기본 ] Node JS에서의 CSS 적용Node.js/nodeJS 기본 2023. 3. 18. 10:41
nodejs에서는 외부 html을읽거나 스크립트 상에 정의된 템플렛을 이용해 html을 response로 전달합니다. 이때, html파일에 style.css라는 파일을 적용하고 싶다면, 아래와 같이 css파일 요청에 대한 응답을 정의해 놓으면 됩니다. (html 파싱 과정중 발생한 css와 관련된 request에 대한 응답을 정의함으로써 페이지에 css를 적용가능하게 되는 것입니다.) const http = require('http'); const fs = require('fs'); http.createServer((req, res) => { if (req.url === '/style.css') { fs.readFile('style.css', (err, data) => { if (err) { res.wr..
-
[ NodeJS / http ] response.writeHead()Node.js/모듈 2023. 3. 18. 10:32
writeHead는 http response의 header를 설정하기 위한 http 모듈의 메서드이며 두 개의 인자를 받습니다. response.writeHead(statusCode, headers) statusCode : http response의 상태코드를 특정합니다. 서버로부터 성공적인 응답을 받은경우 200을 할당하고, Not found 오류의 경우 404를 할당합니다. headers : http response header를 나타내는 key-value 쌍이 담긴 객체입니다. 인자를 전달하지 않을 경우 기본값으로 설정됩니다. writeHead 예시 res.writeHead(200, { 'Content-Type': 'text/html', 'Cache-Control': 'no-cache' }); he..
-
[ JS ] 이벤트 버블링(Bubbling) & 캡쳐링(Capturing)Javascript/이론 2023. 3. 11. 01:15
js 에서 요소에 발생한 이벤트의 전파는 bubbling, capturing 두 페이즈로 진행될 수 있습니다. bublling은 말단 요소, 즉, target 요소에서 window 요소까지 올라가며 해당 이벤트가 트리거되며, capturing은 그 반대로 window요소에서부터 target요소까지 내려오며 이벤트가 트리거 됩니다. Bubbling var divs = document.querySelectorAll("div"); divs.forEach((div) => { div.addEventListener("click", logEvent); }); function logEvent(event) { console.log(event.currentTarget); } 위는 핑크색 영역을 선택한 결과입니다. 콘솔의 ..
-
[ CSS ] 가상 요소(::before, ::after)를 써서 얻을 수 있는 이득은 무엇일까?문득 든 의문점 2023. 3. 10. 06:56
css의 가상요소 ::before, ::after은 실제 컨텐츠의 앞 혹은 뒤에 HTML 마크업 조작없이 컨텐츠를 삽입할 수 있도록 해줍니다. 아이콘, 테두리, 배경을 비롯해 텍스트까지 삽입 가능하며 스타일에 관한 요소를 실제 html 구조에 영향을 미치지 않고 조작할 수 있도록 해줍니다. 또한, 코드의 중복을 줄여주어 특정 효과를 구현하는데 필요한 코드 양을 줄여줄 수 있습니다. 즉, 더 적은 코드로 보다 시각적으로 매력적인 사이트를 만들 수 있게 해줍니다.
-
[ 비선형 자료구조 ] 해시 테이블(Hash Table)Computer Science/자료 구조 2023. 3. 9. 18:07
1. 해시 테이블 해시 테이블은 key-value 쌍으로 데이터를 저장하는 자료구조입니다. 해시 테이블은 내부적 배열을 이용하며, 각 key에 해시 함수를 적용해 얻은 인덱스에 value를 저장합니다. 이때 value가 저장되는 장소를 슬롯이라 하며, 이러한 특성을 바탕으로 데이터 검색에서 빠른 퍼포먼스를 보여줍니다. 즉, 해시 테이블에서 각 key는 대응되는 인덱스를 가지며 O(1)의 시간 복잡도를 보여줍니다.(해시 테이블에 데이터가 찰수록 충돌 발생 가능성이 높아지고 가용 가능한 슬롯의 검색에 대한 비용이 추가되어 O(N) 까지 증가할 수 있습니다.) 해시 함수는 문자열 혹은 다른 데이터 타입의 인풋 인자를 받아 인풋 인자에 대응하는 고유하고, 고정된 사이즈의 아웃풋(일반적으로 수 혹은 문자열)을 출..
-
[ 비선형 자료구조 ] 맵(Map) & 셋(Set)Computer Science/자료 구조 2023. 3. 7. 17:47
1. 맵(Map) 1) 특징 map은 key - value 쌍으로 이루어진 자료구조이며, key의 중복을 허용하지 않는 자료구조입니다.(value의 중복은 허용합니다.) 이러한 map의 특징은 각 key에 대응하는 value에 효율적으로 접근 가능하게 해 주며 O(n)의 복잡도를 가집니다. key-value쌍을 메모리에 저장 순서를 고려하지 않는다. key에는 다양한 데이터타입이 올 수 있다.(언어에 따라 약간의 차이를 가진다 ex. python - strings, numbers, tuples, javascript - any data type including objects and functions) key의 중복을 허용하지 않는다. 데이터에 효율적으로 접근 가능하다. 2) 종류 HashMap : 순서를..