728x90
728x90

Computer Science/Web 22

무엇이 다른가? HTTP/1.1 vs HTTP/2

HTTP/1.1 HTTP/1.0 릴리즈 이후(1996) 표준으로 등록된 새로운 프로토콜(1999) 표준 프로토콜이라 여전히 많은 서비스에서 이를 기본 버전으로 사용하고 있음 특징 Persistent Connection 기존 HTTP/1.0은 연결 당 하나의 요청만 처리 가능 HTTP/1.1부터는 Persistent 기능으로 여러 요청이 가능하도록 개선 HTTP Pipelining TCP 안에 2개 이상의 HTTP 요청을 담아 지연을 줄이는 방식 각각의 요청을 보내고 이에 대한 응답을 받아서 처리할 수 있게 함 Host Header HTTP/1.0은 1개의 IP = 1개의 도메인 HTTP/1.1에서는 Host 헤더의 추가로, Virtual Hosting이 가능해져 1개의 IP = N개의 도메인 지원 인증 ..

Redirect와 Forward에 대한 간단 비교

모든 내용을 언급하기 앞서 둘의 가장 큰 차이를 딱 하나로 말하라고 하면, 사용자에게(웹 브라우저에서) URL이 변경되어 보이는지 여부일 것이다. Forward Web Container에서의 페이지 이동만 진행되므로 웹 브라우저에는 해당 내용이 노출되지 않는다. 웹 브라우저에는 최초 호출 URL만 남아 있고, forward 과정에서 거쳐가는 URL은 노출되지 않으며, forward를 통해서 Request 객체와 Response 객체가 공유된다. 이러한 특성 때문에, 경우에 따라서 forward를 쓰면 문제가 발생할 수 있다. 예를 들어, 유저가 글쓰기나 삭제, 수정 과 같은 변경 작업을 요청으로 보냈고 그에 대해 응답을 할 수 있도록 forward로 응답 페이지를 불러온다고 가정하자. 이 과정에서 어떤 ..

Node.js Express Framework에 대해서 미들웨어와 라우터 등 간략 정리

bin/www http모듈에 express 모듈을 연결하고, 포트 지정하는 부분 콘솔 명령어로도 만들 수 있으며 그때, 주석처리된 #!/usr/bin/env node이 사용됨 전역 설치 후 rimraf와 같이 명령어로도 실행할 수 있음 var app=require('../app'); var debug=require('debug')('learn-express:server'); var http=require('http'); app, debug, http 모듈 가져옴 var port=normalizePort(process.env.PORT || '3000'); app.set('port',port); 실행될 포트 지정, 기본 값 3000 데이터를 app.set으로 지정하고, app.get으로 가져올 수 있음 va..

URI, URL, URN 비교 및 정리

그냥 아무것도 모르고 URL, URL, URL이라고 떠들고 다녔는데, 여기저기 용어들이 섞이면서, 뭔가 다름을 직감하고 조사해봤더니, 명확한 차이가 있는 것 같아 정리해본다. 요약하자면 URI가 가장 상위 개념이고, URL과 URN을 포함한다. URL은 인터넷 상의 자원의 위치, URI는 자원을 식별하기 위한 문자열 구성이다. URI(Uniform Resource Identifier) 통합 자원 식별자 인터넷에 존재하는 자원을 나타내는 유일한 주소 인터넷에 요구되는 기본 조건으로, Internet Protocol에 항상 붙음 URL, URN은 URI의 하위개념 유일한 주소라는 점을 눈여겨 볼 필요가 있음 URL(Uniform Resource Locator) 자원을 의미함 URI와 URL을 혼동하는 이유는..

PHP] mysql_query와 mysqli_query의 차이, 그리고 mysqli

mysqli에 대한 설명과 MySQLi 관련 레퍼런스 https://www.php.net/manual/en/mysqli.overview.php PHP: Overview - Manual mysqli can be great in some circumstances but much work has been put into PHP Portable Data Objects (PDO) which you should also consider when choosing a way to connect to your database using php. For example, PDO supports MySQL with minimal performance hit www.php.net https://www.php.net/manual..

HTTP 상태 코드 종류

2XX성공을 알림.200(성공), 201(작성됨)이 주로 사용됨 3XX리디렉션(다른 페이지로 이동)을 알리는 상태 코드. 어떤 주소를 입력했는데 다른 주소의 페이지로 넘어갈 때 이 코드가 사용.301(영구 이동), 302(임시 이동) 4XX요청 오류. 요청 자체에 오류가 있을 경우.401(권한 없음), 403(금지됨), 404(찾을 수 없음) 5XX서버 오류. 요청은 제대로 왔으나 서버에 오류가 발생한 경우.이 오류가 뜨지 않게 주의하여 프로그래밍할 것. 예기치 못한 에러 발생 시 서버가 알아서 5XX대 코드를 보내는 경우가 많음.500(내부 서버 오류), 502(불량 게이트웨이), 503(서비스를 사용할 수 없음) 등이 자주 사용.

NodeJS의 내장 객체 내용 간단 정리

console보통 디버깅을 위해 사용함. 변수 값 체크나, 에러 확인, 실행 경과 시간을 확인할 대 사용. console.time(레이블), console.timeEnd(레이블)같은 레이블을 가진 time과 timeEnd 사이에서 시간 측정. console.log(내용)로그를 콘솔에 표시. console.error(에러 메세지)에러를 콘솔에 표시. console.dir(객체, 옵션)객체를 콘솔에 표시할 때 사용. 첫 번째 인자로 표시할 객체를 넣고 두 번째 인자로 옵션을 넣음. depth는 객체 안의 객체를 몇 단계까지 보여줄 지 결정하며, 기본값 2. console.trace(레이블)에러 추적할 수 있게 해줌. 에러 발생 시점에 에러 위치가 나와서 흔히 사용하지는 않으나, 위치가 나오지 않을 때 사용...

웹에서 디자인할 때 쓸만한 아이콘 폰트 모음

세 가지를 써봤다. 정확히는 세 가지 중 두 가지만 써봤고, 하나는 안드로이드 앱의 아이콘으로 사용했었지만, 웹에서도 아이콘 폰트로 사용할 수 있다고 한다. Font Awesome https://fontawesome.com/ 과거에 포트폴리오 템플릿 여러 가지를 찾아볼 때, 많이 접하던 아이콘 폰트였다. GPL 라이선스를 따르기 때문에 조금 주의해야 한다. 아이콘도 많고, 브랜드 로고도 있어서 유용하게 사용할 수 있다. XEIcon https://xpressengine.github.io/XEIcon/ 한글화가 되어 있으며 LGPL 라이선스이기 때문에 무리 없이 사용이 가능하다. 현재 필자의 포트폴리오 사이트에서 사용하고 있는 아이콘 폰트가 이 아이콘 폰트다. font-awesome에 비해서 유명 브랜드 ..

뷰(Vue.js)의 라이프 사이클

new Vue 인스턴스 생성 -> event/life cycle 초기화->beforeCreate->화면에 반응성 주입->created->el, template 속성 확인->template 내용을 render()로 변환->beforeMount->$el 생성 후, el 속성 값 대입->mounted 인스턴스 화면에 부착 ->인스턴스 데이터 변경->beforeUpdate->화면 재 렌더링, 데이터 갱신->updated** 해당 부분은 데이터 변경되는 경우에만 해당 ** 인스턴스 내용 갱신 ->인스턴스 접근 가능->beforeDestroy->컴포넌트, 인스턴스, 디렉티브 등을 모두 해제->destroyed

HTML] <input>태그의 type 속성 유형

hidden : 사용자에게 보이지 않으나, 서버로 넘겨지는 값 가지는 필드- 예를 들어 회원가입 폼에서 사용자가 입력하지 않아도 되는 정보를 서버로 넘길 때 사용하는 폼- name 속성으로 필드 이름 지정, value 속성으로 서버로 넘김 text : 텍스트 상자, 한 줄 입력- ID, 이름, 주소 등 텍스트 입력 시 주로 사용- name(필드 이름), size(필드 길이), value(필드 부분에 표시될 내용), maxlength(최대 문자 개수)이름 search : 검색 상자 삽입- HTML5에서 추가된 별도 속성 url : URL 입력 필드 삽입- HTML5에서 요소가 분화함. password : password 입력 필드 삽입- value 속성이 없는 것을 제외하고 일반 텍스트 필드와 동일비밀번호

728x90