봄날은 갔다. 이제 그 정신으로 공부하자

이번 글에서는 이전 글에서 생성한 VM 인스턴스에 연결하는 방법 3가지에 대해 기록합니다. 각 연결 방법별 차이점은 아래와 같습니다. - SSH (원하는 VM 인스턴스에 바로 연결) - Cloud Shell (프로젝트 쉘 연결 후, VM 인스턴스 쉘로 전환해야 함.) - FTP (파일 주고 받을 때 사용함.) SSH 연결 가장 간단하고 쉬운 연결 방법으로 프로젝트 좌측 메뉴에서 "VM 인스턴스" 클릭 후 "세부정보"에 보여지는 "SSH" 버튼을 클릭합니다. 별도 브라우저 창이 떠서 SSH를 통해 연결을 시도하는 과정에서 아래 그림과 같이 허용 요청 팝업이 뜨면 "Ahthorize" 버튼 클릭 잠시 대기 후 아래와 같이 SSH 연결 성공 정보가 보여지면 연결 완료 입니다. Cloud Shell 연결 "VM..

지난번 글까지해서 이제 로컬 PC에서 node.js로 웹서비스를 만들어 보았습니다. 이제 웹 서비스를 클라우드 서버(GCP: Google Cloud Platform)에 적용하는 방법에 대해 기록하도록 하겠습니다. 이번 글에서는 GCP에 가입해 우선 웹 서비스에 사용할 VM 인스턴스를 생성하고 외부 접속이 가능하도록 방화벽 규칙을 추가하고 외부에서 접근이 용이하도록 고정 IP 생성하는 부분까지 기록하도록 하겠습니다. 1. GCP 가입 2. 프로젝트 생성 3. VM 인스턴스 생성 4. 외부 접속이 가능하도록 방화벽 규칙 추가 5. 고정 IP 생성 사전 준비 구글 클라우드 플랫폼(https://cloud.google.com/)에 접속해서 가입 합니다. 가입 시 "90일 무료(or $300 모두 소진시까지)" ..

개발하다보니 table에서 체크 선택한 것만 삭제하는 기능과 체크한 row의 정보를 가져와 local storage에 저장해야할 필요가 생겼네요. Table에서 체크 선택한것만 삭제하는 기능 구현하기 아래와 같이 선택 삭제 버튼을 누르면 테이블에서 사용자가 체크한 아이템을 삭제하는 기능을 가진 화면을 구현할 예정입니다. ejs 파일에 아래와 같이 선택 삭제 버튼과 테이블의 체크박스를 추가합니다. ... 선택 삭제 ... 선택 오전/오후 순서 ID 퀴즈 타입 퀴즈 내용 퀴즈 등록일 순서 변경 .... ... ... 선택 삭제 버튼 클릭 시 이벤트를 처리할 코드를 아래와 같이 jQuery로 작성해줍니다. $("#deleteSelect").click(function() { // 태그의 name이 "checkS..

이번 글은 웹서비스 개발하다보니 백엔드 없이 프론트 간에 데이터를 공유할 수 있는 방법이 필요해 구글링해보았더니 로컬 스토리지라는게 있다고 해서 해당 기능을 사용하여 프론트간 데이터 공유 기능을 구현한 내용을 기록한 글입니다. 로컬 스토리지란? 서버의 도움없이 브라우저에 데이터를 저장하는 스토리지로 화면간 데이터가 서로 공유되며 브라우저의 탭이나 창을 닫아도 데이터는 그대로 브라우저에 남아 있습니다. 그러므로 로컬 스토리지를 사용할 때는 반드시 주기적으로 스토리지를 clear해주어야 합니다. 로컬 스토리지 사용법 로컬 스토리지는 자료구조의 맵과 같이 key 사용해 value를 저장하는 방식으로 사용법도 이와 매우 유사합니다. 사용법은 아래 예시와 같습니다. // 데이터 쓰기 localStorage.set..

table로 데이터를 표시할 때 한 화면에 모든 데이터를 다 보여주는 것은 불가능한 일이므로 20개 또는 30개 단위를 한페이지로 데이터를 보여주는 방식을 페이지네이션이라고 합니다. 이번 글은 부트스트랩에서 지원하는 페이지네이션을 적용해서 node.js에서 페이지 단위로 데이터를 읽어와 프론트로 전달하는 방법에 대해 작성한 글입니다. 부트스트랩 페이지네이션 관련 자세한 사항은 아래 링크 참고 부탁 드리겠습니다. https://getbootstrap.kr/docs/5.0/components/pagination/ 웹도 처음이고 페이지네이션 사용도 처음이라 최대한 간략하게 개발해보았습니다. 프론트에 페이지네이션 추가 퀴즈 목록을 보여주는 quizlist.ejs 파일의 html body 하단에 아래와 같이 페이..

이번 글은 날짜를 보여주고 선택하는 DatePicker에 대해 적어보려고 합니다. 이것도 쉽지가 않네요... 한참을 낑낑대다 겨우 해결하고 잊어버리지 않게 이렇게 글로 기록합니다. ㅠ_ㅠ date picker 한글 지원 js 파일 추가 date picker는 한글을 지원하지 않기 때문에 한글을 지원하기 위해 프로젝트의 public 폴더에 js 폴더를 생성하고 bootstrap-datapicker.kr.js 파일을 생성하고 아래와 같이 작성합니다. ;(function($){ $.fn.datepicker.dates['kr'] = { days: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"], daysShort: ["일", "월", "화", "수", "목"..

개발하다보니 Table row를 동적으로 추가,삭제, 위치 변경해야 하는 이슈가 발생했습니다. 이번 글은 페이지 로딩 시 스크립트를 사용해 Table row를 추가하고 이후 동적으로 추가, 삭제, 위치를 변경하는 기능 구현한 과정을 기록한 글입니다. ejs 파일 생성 우선 Table row를 표시할 ejs 파일을 아래와 같이 추가해줍니다. 날짜별 퀴즈 등록하기 관리자님 반갑습니다. 로그아웃 ... 현재 선택 등록 완료 노출 날짜 선택 삭제 오전 퀴즈: 목록에서 선택 추가(OX퀴즈) 추가(4지선다) 오후 퀴즈: 목록에서 선택 추가(OX퀴즈) 추가(4지선다) 선택 오전/오후 순서 ID 퀴즈 타입 퀴즈 내용 퀴즈 등록일 순서 변경 ejs를 사용해 페이지 로딩 시 table row 생성 ejs 문법을 사용해 h..

이번 글은 이전 글의 반대로 프론트에서 백엔드로 데이터를 전달하는 방법에 대해 기록하도록 하겠습니다. 프론트에서 백엔드로 값을 전달하는 방법은 여러가지인데 이번글에서 기록하는 내용은 url parameter로 데이터를 전달하는 방법과 body parameter로 데이터를 전달하는 방법에 대해 기록합니다. 첫번째, GET 방식 url parameter로 데이터 전달하기 퀴즈 목록에서 테이블 row의 버튼 클릭 시 상세보기로 이동하는 시나리오를 예시로 들겠습니다. 이러한 경우, 특별한 값의 전달없이 url을 아래와 같이 구성해서 보내주면 됩니다. > '/quiz/detail_quiz/10 // 마지막 10은 퀴즈의 qid입니다. 테이블 row의 버튼 클릭에서 저는 여기서 jQuery가 아닌 javaScrip..