Plummmm♪

ASCII 인코딩 부터 알아보자. American Standard Code for Information Interchange 의 약자로, 영문 알파벳을 사용하는 대표적인 문자 인코딩 방법이다. 1Byte 중 7bit를 이용하여 127개의 문자를 표현한다. 아래는 아스키 코드표이다.. 그냥 이게 다다. 저 표에 있는대로 인코딩을 하는 것이다. ASCII 코드 같은 경우는.. 우리들이 쓰는 컴퓨터들은 0과 1밖에 인식하지 못하기에.. 그것들로 문자를 표현하기 위해 구현된 것이라고 이해하면 된다.

이번에는 HTTP 프로토콜에 대해 한번 알아보자. HTTP란? Hyper Text Transfer Protocol의 약자로, 인터넷 상에서 웹 서버와 클라이언트가 통신할 때 필요한 프로토콜이다. TCP기반의 응용 계층 프로토콜으로 TCP 3 ways handshaking 과정을 통해 TCP 세션이 맺힌 상태에서 동작한다. 보통 TCP라 하면 연결 지향형을 떠올리는데, HTTP는 통신이 끝나면 바로 서버와 클라이언트의 접속이 끊긴다. 그래서 비연결 지향형이라고 함. 또한 HTTP는 암호화 되지않은 Plain text 즉, 평문 전송을 한다. 보안에 취약함. (그래서 HTTPS 라는게 나오는데 그거는 다음에 설명하겠음.) 한가지 더, HTTP 메세지는 단방향성 특징을 가지고 있다. 이말이 무슨 말이냐.. 서..

웹이란 무엇일까? WWW (World Wide Web) 이란 말은 다들 들어봤을 거임. 여기서 3번째 W(Web)이 지금 우리가 공부할 Web을 뜻한다. WWW란, 일종의 정보를 공유하는 공간이다. 전세계 모든 시스템들은 네트워크로 연결이 되어있다. 우리는 월드 와이드 웹을 통하여 이 모든 것들을 공유할 수 있다. 웹에 관련된 기술들은 W3C(World Wide Web Consortium)에서 제정한다. (역사나 발전과정 이런 부분들은 설명하지 않겠음.) 그렇다면 Web은 어떤식으로 동작할까? 우리가 늘상 사용하는 웹브라우저의 주소창에 있는 주소를 URL(Uniform Resource Locator) 이라고 하는데, URL의 구조가 Web동작 형태에 맞추어 구성되어 있다. 그림을 보면서 설명하겠음. 인터..

루비 온 레일즈는 웹 서버 개발을 위한 프레임워크이다. 프레임워크.. 이게 정확하게 이건 뭐다 뭐다 정의하기가 애매하다. 그냥 '사용자가 개발할 때 편하게 하기 위해 뼈대를 미리 구축해둔 틀' 정도로 이해하면 된다. Sinatra, Padrino 등의 웹 프레임워크도 있지만 레일즈의 사용비율이 가장 높다. 레일즈의 특징이 몇가지 있는데 알아보자. 1. 개발 속도가 빠른다. 2. 유연성이 높다. (수정이 쉽다.) 3. 비용이 적게든다. 4. 개발 커뮤니티가 활성화 되어 있다. 트위터, github 같은 우리 주변에서 많이 볼 수 있는 웹 사이트들 다수가 루비 온 레일즈로 만들어졌다. 그럼 이제 레일즈의 핵심 요소들에 대해 좀 알아보자. 예전에 JSP를 배우며 스프링 프레임워크를 살짝 맛봤었는데 그때 스프링..

CSS의 기본적인 문법? 이라고 할 수 있는 선택자에 대해 공부해 보겠다. 여러가지 선택자가 있지만 가장 많이 쓰이는 4개만 알아보겠다. 하기 이전에 선택자는 뭔가? 뭘 선택하는 녀석인가. 앞에서 CSS 기본 개념 설명할 때, 중괄호 앞에 * 붙이고 테그 이름붙이고 그랬잖아. "style 속성을 적용할 대상" 이게 선택자이다. CSS는 박스 단위로 선택해서 스타일 적용 시킨다고 저번에 말했다. *은 모든 박스를 다 선택해서 적용시키는 것, 테그를 직접 집어서 스타일을 적용하는 방법 이 두가지는 알았는데, 박스 3개가 나란히 있는데 첫번째, 세번째에만 적용하고 싶으면 어떻게 함? 바로 이것 때문에 선택자에서 몇가지 개념들이 더 등장한다. 표에다 정리를 하고 설명해드리리다. 보세요. 먼저 * (asteris..

이번에는 css 박스 모델에 대해 알아보자. 박스 모델이란게 도대체 무엇일까??? HTML의 대부분의 구성요소들은 모두 박스 형태이다. 저번 포스팅에서 배경색을 바꾸니 박스형태로 설정이 된거.. 봤죠? 이런식으로.. CSS는 이 박스에 대한 이해만 잘해도 반이상 먹고 가는거라고 한다. 위 예제는 아무 설정도 하지 않은 박스다. CSS에서는 이 박스단위로 여러가지 스타일 지정을 한다. 그래서 중요하지. 사진을 담는 액자와 비슷한 개념이라고 생각하면 될 것이다. 그 액자는 크기가 조정도 되고 위치를 옮길 수 도 있다. 테두리를 칠 수도 있고 액자 안에 넣는 그림, 문자 등은 사용자 임의로 자유롭게 설정할 수 있다. w3schools에서 따온 그림을 함 보자. 딱보면 뭔지 느낌이 오지 않는가. Margin :..

CSS란 무엇인가. 클라이언트 사이드 스크립트가 아니어라 Cascading Style Sheet의 약자로, 웹페이지를 꾸미는 녀석이다. HTML과 항상 붙어다니는 실과 바늘같은 존재라고 보면됨. 이녀석이 없으면 그냥 HTML페이지는 허접함 그 자체이다. 뼈만 앙상하게 남은 가시고기 같은.. 거기에 살을 덕지덕지 붙여주는게 CSS다. 여타 우리가 알던 언어들과는 다르게 그냥 코딩된거 보면 더럽다. 그냥 구글 홈에서 페이지 소스보기하면 이렇게 나온다. css덕분에 이런 멀미를 유발하는 소스가 존재하게 되는거임. 그렇다고 우리가 이런식으로 CSS를 코딩하라는건 아님. 기초적인 구조만 알면 디자인하는 툴들이 많으니. 기본적으로 어떤식으로 돌아가는지 정도는 알아야 할거 아닙니까. 더군다나 CSS 이놈은 브라우저마..

HTML은 Hyper Text Markup Language의 약자로. 웹 브라우저에 보여지는 화면 그 자체라고 말할 수 있다. HTML을 일단 알아보자면, 기본적으로 테그(Tag)라는 개념이 있다. html 파일의 예문을 한번 보자. 이런 구조가 눈에좀 들어오나 모르겠다. 걍 저게 테그다. 시작테그와 닫기테그() 이런 테그들이 HTML에 100가지가 넘게 있다고 한다. 뭐.. 글자 크기 바꾸기, 줄바꾸기, 속성 부여하기 등등.. 많은 테그들이 있는데. 다 외울 필요없다. 자주 쓰이고 눈에 밟히는 녀석들만 외워주면 된다. 모르면 그때그때 구글링을 하면된다. 구글링은 진리다. 그럼 이렇게 난잡하게 적혀있는 테그를 뭐 어떻게 봐야 하나. 쉽다. 그냥 시작테그와 닫기테그 안에 있는 녀석들이 상위테그에 종속되어 ..

PIE는 Position Independant Executable 의 약자, 한글로 해석해보자면 위치 독립적 실행가능? 이런 말이다. PIE를 공부하기 이전에 일단 PIC(Position Independant Code) 와 유사하다는 것을 알고계세요. PIC는 공유 라이브러리 파일을 생성할 때 이 라이브러리 파일이 어떤 파일과 링크가 될지 알 수 없기 때문에 -fPIC 옵션을 주어 다른 파일과 동적 링크가 가능하도록 해주게 된다. 이와 비슷한 맥락으로.. PIE는 위치 독립적으로 실행 가능한 코드 형태로 컴파일 한다.. 그런 뜻이다. 예제를 보면서 이해해봅시다. ---------------------------------- #include void foo(){ printf("hello\n"); } int..

SSP란 gcc 4.1버전 이후에 지원하는 BOF 방어 기법이다. 흔히 Propolice 라고 하는데, 일단 이녀석은 스택가드 다음에 나오는 방어 기법이다. 일단 아래 캡쳐화면을 보고 설명하게씀. 저번에 설명한 것과 같다. canary가 변조 되면 RET가 변조 되었다고 가정하는 것이다. 그림에서 mov eax, gs:0x14 mov DWORD PTR [ebp-0xc], eax 이 부분이 카나리아 값을 스택에 저장하는 부분이다. 그리고 __stack_chk_fail@plt 이부분이 카나리아 변조 여부를 체크하는 루틴이다. 스택가드의 정확한 동작을 자세히는 모르지만 일단 SSP는 카나리아를 넣어두고 변조 여부를 체크하는 루틴을 호출하여 확인하는 거다. 이 부분에서 차이나는듯. SSP는 GCC에서 옵션으로 ..