분류 전체보기

CS-50 컴퓨터는 이미지를 어떻게 인식할까?

이미지 형식(jpeg, png, bmp...)은 맨앞 비트의 형식이 고정값으로 구성돼있다. 그렇기 때문에 컴퓨터는 그 비트값을 읽고 아 이것은 이미지구나!! 하면서 바로 그래픽을 띄운다. 예를들어 특정 파일의 앞3비트가 255, 215, 255 라면 컴퓨터는 이 비트를 읽고 아 이건 jpeg파일이겠구나 라고 인식한 후 그래픽 작업을 한다. 그렇다면 컴퓨터는 비트로 어떻게 이미지를 나타낼까? 비트가 나열되어 있으면 컴퓨터는 픽셀마다 0이면 비우고 1이면 색칠한다. 이렇게 나열된 비트대로 색칠해서 이미지를 완성시킨다. 복사해서 붙여넣더라도 이미지가 같은 이유가 이것이다. 숫자값으로 이미지를 받으니 컴퓨터는 그 숫자대로 색칠하면 된다.

CS50-ASCII코드와 16진수

ASCII코드는 알파벳을 숫자로 나타낸것이다. A = 숫자 65처럼 알파벳마다 대응하는 숫자가 있다. 왜 이런식으로 나타낸걸까? 그건 가독성을 위해서다. A = 65라면 65는 이진수로 다시 나타내서 컴퓨터가 해석한다. 하지만 그 이진수는 길이가 매우 길기 때문에 한번에 보기쉽게 65라는 십진수로 나타낸다. 16진수 16진수는 숫자를 16진법으로 나타낸것이다. 0~9 + a,b,c,d,e,f,까지 총 16개다. 16진수로 나타내는 이유는 마찬가지로 가독성이다. 한가지 예로 jpeg파일의 경우 앞의 세자리 비트수가 255 216 255 인데 이걸 이진수로 바꾸면 8자리가 된다. 즉 8비트인데 이 8비트를 절반으로 나눈 4비트값이 16진수 숫자에 하나씩 대응된다. 예를들어 4비트중 가장 큰 값인 1111의 ..

cs50-2 컴퓨터는 많은 정보를 어떻게 저장할까?

기억장치에는 여러종류가 있다. 대표적으로 하드디스크, 램이다. CPU는 연산을 기억장치에 저장돼있는 비트, 바이트를 가지고 와서 처리한다. CPU의 속도가 고정이라면 기억장치의 속도가 빠를 수록 CPU의 연산 처리 속도는 빨라지는 경향이 있다. 더 빠르게, 더 많이 CPU에게 비트와 바이트를 줄 수 있기 때문이다. 하드디스크는 전원이 꺼져도 유지가 되며 램은 전원이 끄면 데이터가 사라진다. 하지만 램이 하드디스크에 비해 용량대비 훨씬 빠르고 비싸다. 그렇기에 하드디스크에서 꺼낸 정보를 램에서 일부 들고와서 CPU로 보낸다. (램이 하드보다 빠르기 때문에) 램이 하드디스크보다 상대적으로 빠르지만 컴퓨터입장에선 여전히 느리다. 그래서 CPU내부에 L1캐시와 L2캐시가 있다. 이 또한 휘발성이며 램보다 용량이..

부스트코스 -7 스프링MVC

MVC는 모델 뷰 컨트롤러의 약자이다. 모델은 데이터가 들어있는 데이터셋이다. 주문목록, 사용자정보, 주문내역이 이에 해당한다. 뷰는 보이는 화면이다. 모델의 데이터를 사용해서 렌더링한다. jsp나 pdf, xml등의 파일로 구현한다. 컨트롤러는 사용자의 액션에 응답하는 컴포넌트다. 사용자가 데이터입력을 하면 컨트롤러가 입력한 데이터를 모델에다 넣는등 이벤트를 다루는 것을 의미한다. 스프링 MVC 기본 동작 흐름 그림에서 파란색 부분은 스프링에서 제공한다. 그림의 순서를 살펴보자 1. 클라이언트가 요청한다. 클릭을하던, url을 입력하든 등등... 그런 모든 요청들이 DispatcherServlet이 받는다. 2. 요청을 분할하기 위해 HandlerMapping에게 물어본다. 어떤컨트롤러, 어떤 메소드를..

부스트코스 웹앱개발 -6 스프링JDBC

하면 할수록 어렵다. 그래서 이번엔 강의따라 만든 JDBC프로그램을 아는 한도 내에서 해체해보는 시간을 가져야겠다. 이 사진을 보고 어떻게 만들지 머리속으로 구상해야 한다는데 전혀 되지 않는다. 그래서 생각의 과정을 무작정 따라해보기로 했다. 저 사진중에 몇몇은 스프링이 알아서 만드니 따로 클래스를 만들 필요는 없다. 사진해석 ApplicationContext는 따로 안만들어도 된다. 그림1을 보면 config가 두개 dao가 2개 dto가 한개다. 그래서 각각 패키지를 만들어준다. config 패키지 dao패키지 dto 패키지 그리고 저 클래스들을 가져와 실행해줄 실행파일이 들어있는 main패키지 첫 번째 생각 순서 먼저 db연결이 잘 되는지 확인하기 위해 DBConfig클래스와 ApplicationC..

부스트코스 웹앱개발 -5 스프링

Bean class란 스프링에서 만든 자바객체라고 이해하면 편하다. XML로 파일을 읽을 때 Bean을 사용하는 방법은 bean에다 나중에 호출할 때 찾을 수 있게 id값과 내가만든bean의 위치를 class="주소"에 넣는다. 이렇게 bean을 설정하면 Engine e = new Engine(); Car c = new Car(); 이 부분을 실제코드에서 작성하지 않아도 되고 ApplicationContext ac = new ClassPathXmlApplicationContext( "classpath:applicationContext.xml"); Car car = (Car)ac.getBean("car"); car.run(); 실제 동작부분만 입력하면 된다. 위의 방법보다 더 간편한 것이 java conf..

부스트코스 웹앱개발 -4 HTML Templating

html template이란 객체지향으로 설명하자면 붕어빵틀이 template이고 팥이 데이터이다. template을 만들어놓고 거기다 데이터만 넣으면 값을 바로 보여줄수 있는 것을 말한다. 예를들어 ajax를 활용해 쇼핑몰에 상품광고를 한다치면 옆방향키를 누르면 다음광고상품들이 쭈르륵 나와야하는데 이럴 때 쓰는것이 htmltemplate이다. 기본적으로 replace를 활용해서 한다. var data = [{ title : "hello", content : "lorem", price : 2000 }, { title : "ww", content : "rr", price : 2000 }, { title : "ee", content : "tt", price : 2000 }]; var html = "{titl..

부스트코스 웹앱개발 -3 Event delegation

list가 여러개인 ui에 각각 비슷한 이벤트를 걸어서 처리하는법 1.기본적인방법 클릭했을 때 이미지 ｓｒｃ를 찍어보자 var log = document.querySelector(".log"); var lists = document.querySelectorAll("ul > li"); for(var i=0, len=lists.length; i < len; i++){ //에러가걸릴경우 debugger;로 멈추고 브라우저로 점검함 lists[i].addEventListener("click", function(evt){ //이미지의 주소값찍기 log.innerHTML = "clicked" + evt.currentTarget.firstElementChild.src; }) } ２．효율적인 방법 이벤트 버블링을 이용..

부스트코스 웹앱개발 -2 AJAX

function ajax() { var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() { console.log(this.responseText); }); oReq.open("GET", "./json.txt"); oReq.send(); } ajax의 기본 코드다. 설명하자면 xmlhttprequest로 ajax객체를 만든다. 그리고 addeventlistener는 이벤트큐로 보내지고 open과 send가 실행된 후 이벤트큐가 실행된다. ajax는 기본적으로 비동기라서 밑에 코드가 다 실행된 후 이벤트큐가 실행된다. 여기서 this.responseText를 해부하자면 this는 이벤트리스너를 가리킨다. 즉 load가 실행된 후 이..

부스트코스 웹 앱 개발-1: 자바스크립트 배열 및 오브젝트

자바스크립트에서 배열선언은 var a [];로 한다. var a = new Array()도 가능하지만 잘 사용하지 않는다. 선언 동시에 초기화도 가능하다. var b = [1,2,3,"Hello",null,[]]; 배열의 길이는 .length를 사용한다. 배열의 원소 추가 배열의 원소 추가는 인덱스 번호와 값으로 할 수 있다. a[4] = 5 또는 push메서드를 이용해 뒤에 순차적으로 삽입가능하다. a.push(5) 배열의 유용한 메서드들 배열원소 조회 a.indexOf(3) // indexOf의 경우 해당 값이 없다면 -1을 반환한다. 배열 합치기 [1,2,3,4].concat(2,3) // [1,2,3,4,2,3] //concat의 경우 원래 배열은 그대로있고 새로운 배열을 반환함 배열의 문자열 합..