IT
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..
부스트코스 웹앱개발 -3 Event delegation
list가 여러개인 ui에 각각 비슷한 이벤트를 걸어서 처리하는법 1.기본적인방법 클릭했을 때 이미지 src를 찍어보자 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.효율적인 방법 이벤트 버블링을 이용..
부스트코스 웹앱개발 -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의 경우 원래 배열은 그대로있고 새로운 배열을 반환함 배열의 문자열 합..
DAO와 DTO사용 이유/getter setter
TodoDao와 TodoDto의 클래스를 만들어서 각각 분할해서 사용하는 이유 왜 분할해서 사용하는지 이유가 궁금해서 찾아보았는데 이해가 잘 안됐다. 너무 전문가적으로 장황하게 설명돼있기도 했고 쉽게 설명한 곳이 찾기 어려워 그냥 사용하다가 약간이나마 깨우쳤다. DAO 한가지만 알자. dao를 만들지 않는다면 매번 db로그인을 해야한다. connection객체를 매번 생성해야하기 때문에 간편하게 dao를 만들고 crud작업을 할 때 객체생성 후 인자값만 던져주면 된다. DTO dto는 데이터를 받는 형식을 지정한다. 처음 사용할 때는 DTO를 많이 만들 필요가 없기에 DB테이블과 같은 형식일 것이다. 예를들어 userId, password, email, phone 칼럼이 있다면 dto도 칼럼과 같은 형식..
부스트코스 DB연결웹앱 #9 WEB API, REST API
API란 인터페이스만 알아도 해당 기능을 사용할 수 있게 하는 기능이다. 즉 자세한 코드는 모르고 틀만 알아도 작동되게 하는것이다. 자세한건 유튜브에 니꼴라스가 설명한 API개념을 보고 오는걸 추천한다. REST API란? 말 그래도 REST형식의 API를 말한다. 그게 무슨말이냐? 나도 잘 모른다. 영상도 보고 이것저것 찾아봤는데 생각보다 어려운 개념이다. 설명하시는 분들이 정석적으로 설명해서 더 어려운 부분도 있는 것 같다. 쉽게 말해서 REST라는 형식이 존재한다. REST라는 형식이란 예를들면 영어는 영문법이 존재하고 일본어도 일본어 문법이 존재한다. REST는 REST라는 문법이라고 생각하면 편할것이다. API를 그 REST라는 문법에 맞춰서 만든 것이 REST API이다. REST API가 웹..
부스트코스 DB연결웹앱 #8 JDBC-2
학습 목표 JDBC를 이용해 입력/수정/삭제/조회 프로그래밍을 할 수 있다. 1번째 강의는 20분짜리 내용은 많은데 스크립트는 코드밖에 없어서 자체해석하면서 설명을 하겠습니다. 앞서 db에 만든 role이라는 테이블을 활용해서 셀렉트하는 과정까지가 이번 20분짜리 강의이다. 먼저 만든 클래스 Role.java package kr.or.connect.jdbcexam.dto; public class Role { private Integer roleId; private String description; public Role() { } public Role(Integer roleId, String description) { super(); this.roleId = roleId; this.description ..