본문 바로가기

웹개발 풀스택 과정

 (174)
59일차(2022.03.23) _ Ajax (Asynchronous JavaScript And XML) - 비동기방식으로 댓글 업데이트 ${dto.contents} ${dto.writer} Update Delete 비동기방식으로 이렇게 응답이 와서 Update버튼을 누르면 테이블의 contents를 담고있는 칸이 입력칸으로 바뀌면서 업데이트 할 수 있게 할 것이다. 우선 Update버튼을 누르면 입력칸으로 바뀌는 작업부터 해보자. ${dto.contents} 이 요소를 선택해서 바꿔주어야 한다는 소리인데, 비동기방식이라 동적으로 생성된 요소라 선택자를 사용하기가 어렵다. 첫번째는 상대선택자를 활용하는 방법이다. replyResult.addEventListener("click", function(event){ if(event.target.classList.contains('update')) { // 상대경로로 선택하는법 : 너무 복잡, 부..
59일차(2022.03.23) _ W3Schools 문서 참조하기 기본적인 HTML, CSS, JavaScript 레퍼런스문서는 mdn 사이트이지만, W3Schools에서 더 쉽게 알려주고 있다. https://www.w3schools.com/jsref/default.asp JavaScript and HTML DOM Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com JavaScript 의 객체들과 메서드들, BOM, DO..
58일차(2022.03.22) _ Ajax (Asynchronous JavaScript And XML) - 비동기방식으로 댓글 리스트 표현하기, 삭제하기 이번시간에는 댓글을 실시간으로 디테일페이지에 가져오는 기능을 구현해보겠다. 어제와 과정은 똑같다. 동기방식과 비동기방식을 다시 한 번 되새겨보자. 동기방식은 요청을 보내면, Spring의 Request&Response 과정을 거쳐서 응답으로 HTML문서를 응답으로 주면 그것을 웹브라우저가 해석을 해서 표출을 해준다. 비동기방식으로 요청을 보낸다는 것은 결국 웹브라우저를 동적으로 새로고침 없이 갱신되는 것이기 때문에 JavaScript를 활용해야 한다. 그래서 JS를 통해 요청을 보내는 것이기 때문에, 응답도 JS로 온다. 웹브라우저로 응답이 오는 것이 아니다. 그래서 HTML문서가 응답으로 올 필요가 없고, 우리가 필요한 데이터를 응답으로 받으면 되는 것이다. 다만, Spring의 Request&Resp..
58일차(2022.03.22) _ 요청을 보내는 방법 정리 요청을 보내는 방법 1. URL 직접 입력 : GET 2. a 태그 : GET 3. form 태그 : GET / POST 4. js location.href : GET 5. Ajax : GET / POST 요청 전송시 필수 요소 1. URL 2. 메서드형식 3. enctype 선택 요소 파라미터 동기 방식 : 요청을 보내는 순간 클라이언트는 서버로부터 응답이 올 때까지 아무것도 하지 못한다. 비동기 방식 : 요청을 보내더라도 서버에서 응답을 기다리지 않으면서 클라이언트는 클라이언트 쪽 일을 그대로 하고 응답을 받음
프로젝트 기능 구현 정리 노션의 아래 페이지에 정리해 놓을 예정입니다. 배우지 않은 내용에서 활용했던 것들, 기능 구현시에 마주했던 문제점, 어떤 방법들이 있을지, 어떻게 해결하면 좋을지, 새롭게 도전해볼만한 방식이 있을지 등등 여러 고민들을 거쳐 어떻게 기능들을 구현했는지 페이지 별로 주요 기능들만 포스팅할 예정입니다. https://cares.notion.site/2-1fb7eba7a04548ce9d9f45a4db1d7d23 2. 프로젝트 구현 A new tool for teams & individuals that blends everyday work apps into one. cares.notion.site
57일차(2022.03.21) _ Ajax (Asynchronous JavaScript And XML) - 비동기방식으로 댓글 등록하기 우리가 그동안 사용했던 방식은 Forward든 Redirect든 동기방식이다. 클라이언트에서 요청이 발생하면 서버로 전송이 와서 시작을 한다. 클라이언트는 요청을 서버로 주고 서버에서 응답이 올 때까지 기다려야 한다. 이게 동기방식이다. 서버랑 동기화 될 때까지 아무것도 못한다는 것이다. 비동기 방식은 요청을 보내도 웹브라우저는 일을 계속 할 수 있는 방식이다. 대표적으로 온라인 쇼핑몰 장바구니에서 몇 개의 장바구니를 삭제를 하면 전체 페이지가 새로고침 되던가? 장바구니 세션만 내가 삭제한 장바구니만 삭제가 되면서 새로고침 되게 된다. 즉, 웹브라우저 전체가 새로고침되는 것이 아니라 웹브라우저는 계속 일을 하고, 서버랑 연결을 되어있지만 서버랑 비동기화 되어있는 것이다. 한번 예시로 알아보자 ${boar..
57일차(2022.03.21) _ RequestMapping, PostMapping, GetMapping @RequestMapping("/noticeReply/**") // 메서드형식을 따로 지정할 일이 없다면 value를 명시하지 않아도 됨 // 메서드형식을 지정할 경우에만 value와 method로 구분해야 함 @RequestMapping(value = "add", method = RequestMethod.POST) @PostMapping("add") // 위와 같음 // value로 명시해도 되고 생략해도 됨 @GetMapping("add") // GET방식일 때는 이렇게 Spring의 4버전 부터 지원하는 GetMapping, PostMapping 어노테이션의 사용법이다. RequestMapping은 요청메서드형식을 따로 지정해주어야 했기에 길어지는 단점이 있었는데, 이렇게 아예 어노테이션에서 부터 ..
56일차(2022.03.18) _ 동적으로 생성된 요소에도 이벤트 적용하기 - 이벤트 전달 응용 자바스크립트로 이벤트를 걸때는, 페이지가 로딩이 될 때 나와있는 요소들에는 이벤트가 걸린다. 근데 나중에 동적으로 만들어지는 HTML 요소들에는 이벤트가 안걸린다. 우선 웹 페이지가 로딩이 되면 HTML요소들을 쭉 한번 읽은 다음에 JS 코드를 실행시킨다. 그래서 이벤트나 다른 JS코드들에 의해 실행되는 것들을 준비시키는데, 동적으로 만들어지는 HTML 요소들은 웹페이지가 초기에 로딩되고 난 이후에 만들어지는 요소들이기 때문에 이벤트 등의 JS코드에 의해 실행되는 것들이 걸리지 않는다. 이럴 경우에 사용할 수 있는 것이 이벤트 전달이다. 클릭이벤트를 부모한테 건 다음에, 그 이벤트를 동적으로 만들어진 자식한테 전달을 할 것이다. 부모는 이미 웹페이지가 로딩이 될 때 생성된 HTML 요소이기 때문에, JS..

티스토리툴바