TIL(Web)

오늘의 웹 개발 학습내용입니다.doGet and doPost method in ServletSQL DML with INSERT and DELETE필요성사용자의 요청에 따른 servlet 매핑시 init()을 거쳐 service method가 실행되는데, 모든 요청에 대

드디어 오늘부터 웹에 관한 공부를 시작합니다!Internet and WebInternet : 네트워크와 네트워크를 연결네트워크는 다양한 방식으로 구성되어 있음.(LAN)이러한 네트워크들을 연결한 기술이 인터넷Web : 인터넷이라는 도로 위에서 문서를 전달하는 서비스프로

오늘은 웹만들기에 필요한 기초부터 HTML학습까지 진행해 보았습니다.웹 만들기 기초HTML 기초웹을 만들기 전에, 고려해야할 부분이 있다.누가 쓸 것인가?(사용자가 누구인가) 고민하기뿌리가 되는 기능은 무엇인가?아무때나 다른 기능과 연관되지 않고 수행할 수 있는 것역할

오늘은 html 태그에서 table과 list에 대해서 학습하였습니다.table taglist tag테이블 태그는 행과 열이 존재한다.코드는 다음과 같다.태그의 구조는 아주 직관적이다.행 : tr열 : td하나의 행이 제목과같은 역할을 할 때에는 해당 tr 태그를 th

어제, 오늘(7일 8일)은 데이터베이스 구축을 위한 데이터모델링(Data Modeling)과 정규화(Normalization)를 학습하였습니다Data ModelingNormalization설계 : 계획을 도표화, 문서화 하는 것개념설계논리설계물리설계기본키(Primary

오늘은 DAO 개체를 사용하여 3tier 구조를 만들어 보았습니다. > ## Today I Learned DAO 개체를 활용한 3 tier 구조 만들기 3 Tier Structure 사용 이유 업무와 데이터 처리를 나누어 분업화 하기 위해서.

오늘은 SELECT 구문을 학습하였습니다.이미지첨부하기DML SELECT산술연산을 통한 조회숫자연산 +select title, hit+1 as hit from notice;컬럼명이 hit+1이 되므로 as를 통해 이름 지정만일 title에 +1을 한다면? 에러가 남(수

오늘은 화면의 레이아웃 구성을 잡으면서 section을 활용하는 법을 배워보도록 하겠습니다.Section Tag레이아웃 구조를 구성하기 위해 제목과 컨텐츠를 묶어서 div 박스로 묶어주는데, 작성 후에 새로운 상위 구조가 비집고 들어오는 경우, 제목의 레벨링을 따로 일

오늘은 SELECT 구문에서 JOIN, UNION, VIEW를 학습하였습니다.JOINUNIONVIEW정규화로 쪼개놓은 테이블들을 이어서(합쳐서) 활용할 수 있도록 하는 방법inner join, outer join, self join, cross join(cartesia

오늘은 파일 업로드를 구현하는 학습을 하였습니다File Upload in webform 태그 설정enctype="multipart/form-data"파일 전송을 위한 인코딩 방식(전송하는 내용 섹션마다 형식을 다르게 지정해 줌)문자열이 아닌 것이 전송될 수 있으므로 m

오늘은 이벤트 객체에 대해서 학습하였습니다.Event objectEvent bubblingEvent notificationEvent inner function이벤트가 발생하였을 때, 어디에서 발생했는지와 같은 이벤트에 관한 정보를 담고 있는 객체가 Event Objec

오늘은 비동기 통신방식인 ajax를 학습하였습니다AJAX동기형 요청XMLHttpRequest : window객체가 갖고있는 통신을 위한 메소드XML에서 Http로 Request(요청)를 하여 정보를 가져올 수 있도록 하는 기능cross origin : 외부 서버에 접근

어제에 이어 ajax를 좀 더 알아보도록 하겠습니다.XHR Load Eventxhr의 상태에 따라 수행되는 이벤트로서, 지난시간 onreadystatechange를 사용하였다.하지만 현재 xhr은 load event를 제공하며, 단순히 상태가 변경되었을때 실행되는 이벤

오늘은 사용자의 인증 및 권한을 위한 Session을 배워보았습니다.Session어원 : 특정 기간(어떤 주제를 다루는 기간)즉, 사용자가 서비스를 이용하는 시간그렇다면, 어떻게 사용자를 구분하고, 사용자가 이용한 시간을 알 수 있을까?WAS세션정보를 관리함처음 요청시

오늘은 DOM 이벤트 Trigger와 Drag and Drop이벤트에 대해서 학습하였습니다.DOM 이벤트 TriggerDrag and Drop파일 업로드를 위한 파일 선택 ui를 꾸미고 싶다?input file은 스타일이 먹지 않는다.input file을 display

오늘은 Spring framework에 대해 알아보았습니다.Spring Boothttps://spring.io/tools 접속설치 후 spring starter project 생성하기서버 실행하기지금까지 웹서버의 메인함수는 톰캣이 가지고 있었다.하지만, 스프링

오늘은 ES6를 학습하였습니다.ES6let기존에 자바스크립트(ES5)는 지역변수의 개념이 없었다.ES6에서는 let이라는 예약어를 통해 지역변수의 개념을 만들었다.변수명의 중복 여부도 확인할 수 있다.const자바의 final과 같은 기능상수를 문자화 할 수 있다.한

오늘은 spring framework 두번째 시간입니다!spring-boot-devtools 의존성 추가View Page Home directory 설정JSP 파일 인식을 위한 라이브러리 추가Controller에서 Forwarding사용자에게 직접 JSP가 요청되지 않

오늘은 ES6 두번째 시간입니다!변수로 속성명 지정하기Object Destructuring대괄호 + 속성명 = 키 사용 가능데이터 구조는 중첩을 낮춰서 사용할 것구조적인 데이터를 사용할 때는객체 속성 뽀개기(destruct)뽀갤 속성의 순서, 갯수는 상관 없다. 하지만

오늘은 Spring Framework 3번째 시간입니다.Tiles Library스프링의 흐름 이해하기기존 페이지 모듈 집중화의 문제점 해결레이아웃 + 콘텐트를 각각 분리해서 만든뒤 조합해서 사용할거야(마치 타일을 가져다 이어 붙이듯이)레이아웃이 중심 + 헤더,푸터,어사

오늘은 ES6 4번째 수업시간입니다 > ## Today I Learned set map rest parameter spread operator default value arrow function default value javascript는

오늘은 ES6 4번째 시간입니다.OOP(캡슐화)과거에 객체 생성 방식function으로 class를 정의했음마치 클래스가 정의되어있는 것 처럼절차에 의해 정의되는.. 미리 정의 되는 것이 아니다..(자바스크립트 특징)조금 더 개선 된 방식(중복 생성 제거)prototy

오늘은 Spring Framework 3번째 시간입니다.Spring JDBC일체형 부품 조립하는 방법a > b > c삽입형 부품 조립 방법c > b > a기존에는 코드상에서 일일이 부품을 조립하는 과정이 필요했음.사용하고자 하는 부품이 미리 준비되어있고, 그 부품을 다

오늘은 ES6 5번째 시간입니다.new.targetIterator함수가 위임된 경우 this를 쓸수 없다 이유는?this는 객체를 통해서 함수가 호출될때 전달된다. 객체를 통해서 호출된 것이 아닌 위임을 통해 호출된 경우, this는 전달되지 않는다.static met

오늘은 Spring Boot 5번째 시간입니다.MyBatissql이랑 구현할 인터페이스 메소드만 알려줘(매핑) 그럼 내가 다 알아서 구현해줄게설정(라이브러리 추가)사용법(select)구현하고자 하는 dao 인터페이스에 Mapper 어노테이션 달기구현하고자 하는 함수에

오늘은 ES6 6번째 시간입니다SymbolPromise내장 객체 클래스고유한 값을 생성왜 만들었나?다형성 : 자바스크립트는 태생이 다형성을 갖고있어서 인터페이스를 구현하지 않음자바스크립트는 함수로 어디든 꽂아서 쓸 수 있음약속된 '로직을 꽂아서' 사용하기 위해 만듬(인

오늘은 Spring Boot 6번째 시간입니다PathVariableMyBatis - xml 활용의존성 주입(DI) 3가지 방법queryString을 사용하지 않고, 값으로 경로를 바로 지정할 수 있다.매핑은 @RequestMapping("{id}") 과같은 방식으로 설

오늘은 ES6 7번째 시간입니다.async, awaitpromise - then, catchES Module비동기로 수행되는 함수를 호출하면서 동기적으로 일을 수행하고 싶을때(얼마 안걸릴거같으니 비동기 끝나면 다음거 수행하자) await 키워드를 통해 기다리게 할 수

오늘은 Spring Boot 7번째 시간입니다.xml방식의 MyBatis rowMapping2가지 방법select문에서 별칭사용하기resultMap 사용하기(resultMap 정의하고 resultType대신 사용)view entity와 데이터베이스 컬럼을 mapping

오늘은 Spring Boot 8번째 시간입니다.검색기능 + 페이저queryString과 기본값을 통한 검색기본값 설정을 통해 값이 전달되지 않아도 정상적인 쿼리를 실행할 수 있도록 세팅기본값을 사용하지 않고, MyBatis가 제공하는 조건절을 사용하여 쿼리 수행하기전달

오늘은 ES6 9번째 시간입니다Drag and Drop드래그 드랍을 위한 박스 2개 만들고, 마우스가 큰 박스 안에서 움직일때 작은박스가 커서와 함께 움직이도록 이벤트 달아주기클릭시에만 작은 상자가 커서를 따라다니도록 설정상자에서 클릭한 위치 유지한채 드래그 하게 설정

오늘은 modal 페이지를 만들어보았습니다.Modalalert, confirm과 같은 창을 window가 아닌 새롭게 디자인한 modal 페이지로 만들고자 한다.한번 만들어두면 재사용하기 쉽게 만들 예정modal box 생성을 위한 클래스 정의정의된 클래스로 객체 생성

오늘은 spring boot 상세페이지 작성을 학습하였습니다.detail page상세 페이지에 사용할 모델 저장하기get()상세 페이지에 표현할 아이템getPrev()이전글 정보getNext() \- 다음글 정보쿼리문 작성(mapper)get, getPrev, g

오늘은 웹 프론트 개발에 있어서 다양한 framework들을 살펴보았습니다. > ## Today I Learned fetch를 활용한 Ajax MVC FLUX Vue React fetch를 활용한 Ajax promise를 활용한 Ajax 통신

오늘은 채팅을 구현하기 위한 web socket을 학습하였습니다.Web SocketWeb Socket URL mapping을 위한 config 클래스 생성mapping된 소켓을 다루기 위한 Handler 클래스 생성간단한 ui 구현소켓 연결 설정텍스트만 처리하기 위한

react 학습내용입니다.react 라이브러리react stateCDN 추가.Virtual DOM rendering주의사항 : render안에 들어오는 엘리먼트는 무조건 root 여야함. 2개의 root node가 들어올 수 없음궂이 이걸 쓰는게 무슨 이득이 있나? 자

오늘은 React 2번째 시간입니다.dfdf만들고자 하는 ui component 단위로 나누기input value = 0으로 초기화VDOM 부분을 Calc라는 컴포넌트로 분리해서 작성(using function)VDOM 부분을 Calc라는 컴포넌트로 분리해서 작성(us

오늘은 React 3번째 시간입니다. > ## Today I Learned React를 활용한 list 페이지 만들기 React를 활용한 list 페이지 만들기 기존에 jsp에서 만들던 view에서 react component로 옮길때 jstl, el 태그는

view 페이지 delete 버튼과 컨트롤러 매핑주의사항 \- 삭제버튼 클릭시 바로 삭제요청이 되는것이 아니라 확인창이 뜨게끔 만들어줘야함(script로 구현)서비스, DAO 구현 및 MyBatisMapper 작성일괄삭제, 일괄공개 버튼 구별하기submit 버튼에

오늘은 React 5번째 시간입니다.검색 기능페이저 기능검색 field와 query 값 설정this.field, queryDOM 객체 사용하지 않고, React.createReg() 사용하여 현재 값 가져오기설정된 field와 query값을 통해 데이터 바인딩검색 fo

오늘은 NodeJS를 학습하였습니다.NodeJS 등장NodeJS core스크립트가 웹에서만 동작하는 것이 아닌, 외부에서 동작할수 있는 v8 엔진 개발탈 브라우저브라우저가 아닌 터미널에서 스크립트 인터프리터를 작동 시킬 수 있음이를 이용하여 서버 구현이 가능해짐스크립트

오늘은 Tiles Preparer, AuthenticationSuccessHandler에 대해서 학습하였습니다.Tiles PreparerAuthenticationSuccessHandler레이아웃의 공통된 부분을 준비하는데 사용main영역은 컨트롤러를 통해 데이터를 가져

DI 도구dependency(의존성) : 사용하는 부품/모듈/클래스/개체객체가 다른 객체를 참조하고 있는 경우 의존성을 가짐왜 DI가 필요한가?인터페이스 : 분리를 위한 도구간접적으로 사용하게 하는 도구분리를 통해 인터페이스만 지켜준다면, 원래 본체가 바뀌어도 상관 없

로그인 컨트롤러 로그인을 위한 컨트롤러 Tiles 설정(view) login은 왜 home.\.\인가? root 디렉토리이지만, 이것을 그냥 \.\으로 설정할 경우, 다른 tiles도 모두 호출되어 문제가 발생할 수 있어으므로 루트 디렉토리의 것만 호출

Transaction : 논리적인 실행 단위 (반드시) 한번에 수행되어야 할 명령들의 집합 반대 > 물리적인 실행 단위 : update 등 논리적 실행단위 : 계좌이체 물리적 실행단위 : update 2회 하나의 논리적인 실행을 위해 물리적 실행이 2