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

개발하다보니 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: ["일", "월", "화", "수", "목"..

현재 저는 제 맥북에서 node.js 웹서버 작업을 하고 있습니다. 로컬에서 작업 시 이미지를 보여지도록 처리하기 위해서는 아래와 같은 작업이 필요합니다. 이미지 관리 폴더 생성 이미지를 관리하는 "public/image" 폴더를 만들어줍니다. 이렇게 만들어진 "public/image" 폴더를 이미지 파일들을 복사해줍니다. 이미지 get 기능 구현 모든 경로에서 공용으로 사용가능하도록 index.js 파일에 아래와 같은 코드를 추가합니다. // index.js var router = express.Router(); ... app.use(express.static('public')); ... router.get('/images/:imageName', function(req, res){ var imgName..

이번 글은 팝업을 띄우는 작업 입니다. 부트스트랩에서 지원하는 모달 팝업을 사용하면 좋은데, 제가 무얼 잘 못했는지 잘 안되네요... 제가 초보인걸 알고 그런가봐요 ㅠ_ㅠ 며칠동안 끙끙대면서 여기저기 수정해봐도 부트스트랩의 모달 팝업이 동작하지 않네요. ㅠ_ㅠ 그래서 css를 사용해서 모달 팝업을 생성해보았습니다. 음... 웹 서버 만드는게 처음이다보니 배워야 할게 너무 많네요. 에고고... css 만드는 부분은 아래 사이트를 참고하였습니다. https://as-you-say.tistory.com/288 css 사용을 위한 사전 준비 css는 공용으로 사용해야 하므로 프로젝트 폴더에 "public" 폴더를 만들고 public 하위에 "css" 폴더를 만들어줍니다. css 폴더에 mypopup.css 파일..

개발 환경을 구성하고 DB연결하고 라우터 처리까지했으니 이제 세션 관리 기능을 개발해야 합니다. 힘드네요... 세션이란? 세션은 서버에 저장되는 key-value 형식의 데이터로 세션은 서버에서만 생성 할 수 있어 사용자의 로그인 상태를 확인할 때 사용 됩니다. 세션의 동작 서버측에서 세션을 생성할 땐, 클라언트에게 SID(session ID)를 발급합니다. SID가 발급되면 connect.sid 쿠키가 생성된 것을 확인 할 수 있습니다. 서버측엔 해당 클라이언트가 사용할 세션을 저장합니다. 클라이언트에 SID 쿠키가 저장되어 있으니 클라이언트로부터 request가 오면 request의 쿠키로부터 SID를 확인 할 수 있으므로 해당 클라이언트의 세션을 매핑해 사용할 수 있습니다. 세션 사용 방법 Expr..

이제 슬슬 코딩에 들어가네요. node.js는 기본적으로 시작 파일인 index.js에서 라우터 관리를 하는데 서비스를 개발하다보면 라우터가 100개 이상이 되는 경우가 자주 생깁니다. 이런 경우 index.js의 코드 복잡도가 매우 증가하므로 관리 차원에서 기능별로 쪼개서 관리할 필요가 있습니다. 이 글에서는 복잡도 관리를 위해 "setting" 라우터를 별도로 분리해서 관리하는 방법에 대해 설명합니다. setting 경로 담당 파일 생성 "routers" 폴더 생성 "routers" 폴더에 setting.js 파일 생성 index.js에 setting 라우터 분산을 위한 코드 추가하기 index.js 파일에 setting 라우터 처리를 위한 코드를 아래와 같이 추가합니다. 아래와 같이 추가 시 이제 ..