IT기록 isaac

Web 구성에 대한 기초 지식 (HTML, CSS, Javascript) 오늘은 Naver의 과거 N드라이브, 현 MYBOX를 정리하려고 한다. 2017년에 처음 웹을 공부했던 자료들이 담겨 있었는데 공부했던 파일은 삭제하고 블로그 포트폴리오로 넣기 위해 작성한다. 내용은 조금씩 수정을 하면서 작성했다. 예를 들면 2017년 당시에는 VS CODE가 핫한 텍스트 에디터였나? 싶은데 지금은 핫한 텍스트 에디터이기 때문에 다른 에디터 내용을 빼고 VS CODE를 언급한다던지 등의 내용 수정은 있을 것이다. Web에 대한 기초 지식 사용자가 마주하는 웹은 보통 다음과 같은 기술로 구성되어 있다. 웹의 3요소 HTML, CSS, Javascript 1. HTML : Hyper Text Markup Languag..

[Vue.js | Vue 2] Getting started with vue.js vue.js 시작하기 Getting started with vue.js vue.js는 대화형 웹 인터페이스, JS 프레임워크입니다. vue.js is an interactive web interface and JS framework. vue.js는 MVVM의 디자인 패턴을 사용합니다. vue.js uses the design pattern of MVVM. View - View Model - Model vue.js를 개발하는 방법은 여러 가지가 있지만 우리는 CDN 방식을 사용합니다. There are many ways to develop vue.js, but we use the CDN method. CDN : Content ..

[Spring] 새로운 댓글 처리 이전 글 2021.08.11 - [Spring] - [Spring] 댓글 목록 HTML 처리 댓글 목록 상단에 버튼을 추가해서 새로운 댓글을 추가할 수 있도록 준비합니다. get.jsp 실행 결과 우측에 [ New Reply ] 버튼이 생성되었습니다. 댓글 추가는 모달창을 이용해서 진행합니다. 모달창의 경우 코드 위치는 크게 신경쓰지 않아도 되어, 데이터를 처리를 위한 댓글 처리 모듈 스크립트를 추가했던 태그 위에 작성합니다. get.jsp 모달창 버튼 부분 소스코드는 아래와 같습니다. Modify Remove Register Close 댓글 추가 버튼 이벤트 처리 - [ New Reply ] 버튼 모달 관련 객체들은 여러 함수에서 사용할 것이므로 바깥쪽으로 빼두어 매번..

[Spring] 댓글의 목록 처리 (javascript) 이전 글 2021.08.10 - [Spring] - [Spring] 댓글 처리 Front-End - 등록 처리 - 2021.08.09 - [Spring] - [Spring] 댓글 처리 Front-End - 세팅편 - 2021.08.03 - [Spring] - [Spring] 댓글 처리, 서비스 영역과 Controller 처리 (feat. @RestController) 2021.08.01 - [Spring] - [Spring] 댓글 처리를 위한 영속 속성 댓글의 목록 처리 댓글 등록이 정상적으로 처리되었다면, 해당 게시물에 있는 댓글의 전체 목록을 가져옵니다. 댓글 목록은 최종적으로 페이징 처리가 되어야 하지만, 우선 전체 댓글을 가져오는 형태를 구..

[Spring] 댓글 처리 Front-End - 세팅편 - 이전 글 2021.08.03 - [Spring] - [Spring] 댓글 처리, 서비스 영역과 Controller 처리 (feat. @RestController) 2021.08.01 - [Spring] - [Spring] 댓글 처리를 위한 영속 속성 JSP 에서 댓글에 대한 처리는 하나의 페이지 내에서 모든 작업이 이루어지기 때문에 조금 복잡합니다. 또한 기존과 달리 js로 동적인 HTML을 처리하기 때문에 주의해서 작업해야 합니다. JavaScript의 모듈화 동적인 HTML을 처리하기 위해 Ajax를 이용하는데, jQuery의 함수를 이용해서 쉽게 처리할 수 있습니다. 화면 내 JS 처리를 하다 보면 이벤트 처리와 DOM 처리, Ajax 처리..

Spring 조회 페이지에서 처리 광고 한 번의 클릭은 개발자에게 매우 큰 도움이 됩니다! 게시물의 조회 페이지에서는 수정과 삭제가 필요한 페이지로 링크를 처리해야 합니다. 직접 버튼에 링크를 처리하는 방식으로 작성했지만, 다양한 상황을 처리하기 위해 태그를 이용해 수정합니다. 참고 글 2021.07.11 - [Spring] - Spring 게시물의 수정/삭제 처리 2021.07.11 - [Spring] - Spring 게시물 조회 페이지 처리 / 히스토리 조작(history.replaceState( ) ) 아래 이미지는 기존 상세 조회 페이지에서 하단에 세팅한 버튼입니다. ※ 태그 이용해서 수정한 코드 사용자가 버튼을 클릭하면 openForm이라는 id를 가진 태그를 전송해야 하므로 추가적인 Javas..

GCP의 ubuntu에 node.js 설치 먼저 GCP를 이용해 만든 VM 인스턴스에 SSH 로그인 한 후 node.js 를 설치한다. github.com/nodesource/distributions/blob/master/README.md nodesource/distributions NodeSource Node.js Binary Distributions. Contribute to nodesource/distributions development by creating an account on GitHub. github.com node.js 공식 홈페이지에서 ubuntu 전용 node.js 를 설치하는 방법을 볼 수 있다. 필자는 Node.js LTS (v14.x) 버전을 설치했다. 아래 이미지는 직접 명령..