![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbXuCfo%2FbtsbO4wnTAI%2FBVD1UodLkmitkIUmbb8fsk%2Fimg.png)
이상하리만큼 다시 HTML,CSS 공부를하게되면 내가 작아지는 느낌이든다. 기초라고 생각하지만 늘 잊어먹는 언어들..심기일전 하는 마음으로다시 기초부터 한번싹 공부를 하고 기록해보자. 특히 사소하지만 잊고 있던거, 주요한 내용들 최대한 한번더 봐보도록하자 - HTML은 마크업언어 자료의 구조를 표현하기 위한 언어 안녕하세요2 글자는 p안에 써야한다. - 태그 스타일 1)스타일은 각 태그에 인라인으로 줄 수 있다. 스타일 속성은 매우 다양함 하지만 그때 그때 검색해서 찾아쓰는게 맞다. 김지원 Front-end Developer 태그는 글자안에 쓰는 의미없는태그, inline 속성을 가지고 있다. inline을 가지고 있는 요소는 폭, 높이등을 단독으로 조절할 수 없어서 겉에 태그 등에 주어야 한다. 그리고..
https://flykimjiwon.tistory.com/190 HTTP의 상태코드와 메서드, REST API - HTTP의 상태코드 1xx (정보) : 요청을 받았으며 프로세스를 계속한다. 2XX (성공) : 요청을 성공적으로 받았으며 인식했고 수용한다. - 200OK : 요청이 성공적으로 되었습니다. - 201 created: 요청이 성공 flykimjiwon.tistory.com 내가 과거에 썼던 글이다. 대략적인 개념을 어렴풋이만 알고 있었지만 자세히 알고 있어야 할거같다. - REST API란? REST는 Representational state Transfer의 약자 Representational 상태 전송 대표? 표현적인? 상태전송 이것만 봐선 뭔가 애매하다. HTTP 설계의 우수성에비해 제..
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbwr7L7%2Fbtr76zAhrL9%2Fg89qB0De3S0w9VnQntw6e0%2Fimg.png)
- 데이터 삭제 (DELETE) 삭제버튼을 show.mustache (상세게시글)에 추가해준다. 수정때와 마찬가지로 id를 url 파라메터로 전송해준다. {{>layouts/header}} ID title content {{#article}} {{id}} {{title}} {{content}} {{/article}} Edit Delete Go To Article List {{>layouts/footer}} 그리고 컨트롤러에서 삭제 요청을 받는다. 1) 주소를 매핑하고 2)삭제 대상을 아이디 값으로 가져온다. 3)삭제한뒤 최종 게시글목록 페이지로 리다이렉트 시킨다. // @DeleteMapping("articles/{id}/delete") @GetMapping("articles/{id}/delete") p..
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo0Gin%2Fbtr77PW5hQT%2Fe0Nt0NR4C6kmDkytWeJmx0%2Fimg.png)
- Update : 수정폼 만들기 아래와 같이 게시판의 글을 수정하고 싶다. 먼저 글 상세페이지로 들어가고 글의 상세페지로 들어가 Edit을 누르면 수정으로 들어가게 되는데 그러려면 상세 페이지를 담당하는 show.mustache파일을 수정해야 한다. 테이블밑에 Edit을 추가해주고 아이디를 파라메터로 같이 전송해주는 링크를 만들어준다. show.mustache {{>layouts/header}} ID title content {{#article}} {{id}} {{title}} {{content}} {{/article}} Edit Delete Go To Article List {{>layouts/footer}} 그리고 컨트롤러에 edit와 update를 아래와 같이 만들어준다. 그리고 위그림같이 기존의..
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLkcoR%2Fbtr73ybl14w%2FRXipkHi3TPEwmKGJlAE7E0%2Fimg.png)
- 링크 : 요청을 위함 - 리다이렉트 : 응답을위함,클라이언트에게 다시 재요청을 한다. 기존 사이트의 문제점 새글 작성창도 없다. 이곳에 링크와 리다이렉트를 적용해야 한다. 1)글 전체 목록에서 새 글작성 페이지로 링크를 걸어준다. 왼쪽 아래에 New Article을 추가했다. 그리고 각제목을 클릭하면 상세페이지로 가게 링크도 여기서 걸어주었다. show.mustache {{>layouts/header}} ID title content {{#articleList}} {{id}} {{title}} {{content}} {{/articleList}} New Article {{>layouts/footer}} 2) 목록 페이지로 돌아가기를 추가 Submit옆에 Back 링크를 추가했다. {{>layouts/h..
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FczZvbg%2Fbtr74fvBmbM%2F7rLK0sYh7ahjIwdPBxaQMk%2Fimg.png)
- 데이터 조회하기 (웹에서) 1)웹에서 URL요청을 먼저 받기 위해 GetMapping을 추가한다. 주소/articles/id 그리고 @PathVariable을 통해 URL 변수를 가져온다. 2)처리흐름 id로 데이터를 가져온다 -> 가져온 데이터를 모델에 등록한다 -> 그리고 보여줄 페이지를 설정한다. (show.mustache) ArticleController.java .......... @GetMapping("/articles/{id}") //변하는 수에 따라 게시글 받아오기 public String show(@PathVariable Long id, Model model){ log.info("id = " + id); // 1: id로 데이터를 가져옴 Repository가주체이다. Article a..
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb4HlJj%2Fbtr7StGYT7F%2F0aJbVaADp4unGoXtnFJLbK%2Fimg.png)
- DB테이블과 SQL(레포지토리에서 데이터베이스로) 위 그림과 같이 Repository에서 Database로 넘어가는 과정을 확인해 본다. http://localhost:8080/articles/new 페이지로 들어가 글 작성후 Submit을 누르면 아래와 같이 인텔리제이 콘솔창에서 확인할 수 있다. 그리고 이걸 웹에서 H2콘솔로 들어가 확인해볼 수 있다. http://localhost:8080/h2-console 주소로 들어가면 아래와 같은 화면이 나온다 .JDBC URL은 콘솔창에서 매번 바뀌기때문 에 검색해서 찾아 들어가야한다. 여기서 SELECT문으로 Run해보면 똑같은 결과를 확인할 수 있다. insert into article(id,title,content) values(3, 'cccc', ..
- 생성자(Constructor) 생성자를 사용하면 객체변수에 무조건 값을 설정해야 객체가 생성되게 만들 수 있다. 아래와같은 코드를 그 아래코드와 같이 바꾸면 된다. class HouseDog extends Dog { void sleep() { System.out.println(this.name + " zzz in house"); } void sleep(int hour) { System.out.println(this.name + " zzz in house for " + hour + " hours"); } } class HouseDog extends Dog { HouseDog(String name) { this.setName(name); } void sleep() { System.out.println(t..