728x90
728x90

web 15

무엇이 다른가? 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로 응답 페이지를 불러온다고 가정하자. 이 과정에서 어떤 ..

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..

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에 비해서 유명 브랜드 ..

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

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

Web] 자바스크립트를 활용한 비밀번호 체크

커뮤니티, 쇼핑몰 같은 웹 사이트에서 회원가입을 하게 되면비밀번호를 확인하는 경우가 있다.자바스크립트를 활용하면 이를 간단하게 해결할 수 있다. 'password'와, 'pass1'을 입력한 상태. 두 칸 모두 'password'를 입력한 상태. 1234567891011121314151617181920function isSame() { var pw = document.twin.wUserPW.value; var confirmPW = document.twin.wUserPWConfirm.value; if (pw.length 16) { window.alert('비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.'); document.getElementById('pw').value=document.getE..

든든한 빽을 둔 브라우저, 네이버 웨일(Whale)

든든한 빽을 둔 브라우저, 네이버 웨일(Whale) 네이버가 웹 브라우저를 하나 내놨다.자체 엔진인 슬링을 이용해서 내놓을 줄 알았지만,이런저런 이유(아마 기존 웹사이트와의 호환 문제가 아닐까 싶다.)로자체 엔진으로만 내놓은 줄 알았는데, 완전한 독립은 포기하고구글에서 오픈 소스로 공개한 크로뮴 엔진을 사용했다.크로뮴 엔진은 오페라, 스윙 등등에서 사용한다.그렇다고 크롬에 네이버를 끼얹었다는 게 아니라, 크롬의 형제라고 보는게 좋을 듯하다. 개인적으로 저는 이 웨일 브라우저의 디자인이다른 웹 브라우저가 너무 익숙해져 지루해졌던 찰나에 접해서 그런지,브라우저들에 비해서 색다르고 뭔가 좀 더 직관적이라서 마음에 든다. 현재는 윈도우에서 32bit/64bit버전으로만 이용이 가능하고,MAC OS와 Linux에..

IT/IT 소식 2017.03.26

Web] 마우스 온/오버 시, 투명도 바꾸기

Web] 마우스 온/오버 시, 투명도 바꾸기 텀 프로젝트 중에, 시각적인 효과를 고려하던 중, 투명도를 조정하여,아래처럼 마우스 포인터가 올려졌을 때 흐려졌다가,마우스 포인터가 해당 위치에서 떠나면 다시 원래대로 돌아오는 효과를 적용했다. 실제로 호스팅을 받는 사이트가 아닌지라,제품 사진은 다른 사이트에서 봤을 수도 있을 것..아무튼 각색하고, 이 기능은 아주 간단하게 구현이 가능하다.나는 저 프레임을 태그로 구성했는데, 소스는 다음과 같다 12345678function changeOpacity1(obj){ obj.style.opacity="0.5";}function changeOpacity2(obj){ obj.style.opacity="1";}cs 1234567 $name $price 원 Colored..

728x90