designer DK의 블로그

검색 기능에 이어서 queryString으로 페이지 정보를 api로 주고 받아서 페이지네이션 기능을 구현하는 작업을 진행해보았다.지난번에 페이지네이션 구현을 한번 해보았는데 너무 복잡하고 어렵게 구축이 되어서 좀 더 편한 방법을 찾아보려고 페이지네이션 라이브러리들을 많이 찾아보았는데 나만 그런건지 뭐가 문제인진 몰라도 계속해서 에러가 발생했다 ㅜㅜ;; (시간만 엄청 날림)결국 우여곡절 끝에 그냥 기본 자바스크립트로 구현되었는데  그래도 페이지네이션 치고? 생각보다 많이 복잡한 로직은 아니게 구현되었다. 일단 페이지네이션을 위한 프론트엔드 코드이다. currentPage라는 변수는 최초 1로 설정되어있으며 이따가 나오는 changePage라는 함수에 의해 값이 변한다.원래 구성되어있었던 getProduct..

드디어 내가 평소에 궁금했던 회원가입, 로그인 과정을 배우게 되었다.구현은 기존에 진행한 todo-app에 연장선으로 진행했다. 먼저 회원가입부터 진행을 했는데 회원가입의 경우 어떤 특별한 별개 기능이라기보단 유저의 이름, 메일주소, 패스워드를 POST하는 과정이었다. 기존 todo-app은 task라는 api만 있었는데 신규로 user라는 api를 만들고 라우터 세팅 후 User라는 model 스키마도 설계했다. 스키마에는 이름, 이메일주소, 패스워드를 넣어주었다.const userSchema = Schema({ name: { type:String, required:true }, email: { type:String, required:true }, password: { type:String, requi..

강의 예제로 할일 앱 프론트엔드 부분 작업을 진행했다.강의의 경우 리액트 기반으로 프론트엔드를 제공하는데 나는 리액트로 프론트엔드를 진행하지 않고 생 자바스크립트로 진행하기 때문에 처음부터 끝까지 직접 구현해보았다. (물론 gpt에게 물어가면서) 서버 데이터를 가져오는 방식은 fetch api 방식을 썼다.처음에는 읽기, 생성, 수정, 삭제 네가지 fetch를 만들어서 진행했었는데 진행하다보니 생성을 제외한 케이스들은 처음 fetch를 실행하는 방식이 일치해서 getTasks라는 하나의 함수로 묶이게되었다. '할 일'이라는 리소스를 tasks라는 url로부터 가져와서 할일 목록을 만들어냈다. (읽기)function getTasks() { fetch("http://localhost:5001/tasks") ..

강의를 통해 배우는 첫 백엔드 설정 예제를 진행해보았다. mongoDB와 node.js를 연결하고 백엔드 설정을해서 프론트엔드와 소통하는 할일 앱을 만드는 과제. 사실 한번에 너무 방대한 양을 배우는 데다가 페이지가 잘게 쪼개져 있어서 아직도 좀 아리송한 부분들은 있지만 대략적으로는 백엔드와 프론트엔드가 어떻게 돌아가는지 알게 된 것 같다. 시작 전에 npm을 이용해서 express, mongoose, body-parser를 설치. (바디파서는 이제 설치 필요 없음)express를 이용해서는 서버를 간편하게 열 수 있었고 mongoose를 이용해서 mongoDB 스키마를 설계할 수 있었다.const express = require('express');const mongoose = require('mong..

최근 만들어본 ‘킨더서울’ 사이트를 비롯해서 기존에 오픈 되어있는 api 정보들을 가져와서 만드는 사이트들을 여러번 만들다보니 자연스럽게 내가 자체적으로 서버와 데이터베이스를 구축해보고싶은 욕심이 생겼다. 지금까지 자바스크립트 위주로 공부해왔었는데 조사해보니 같은 자바스크립트 베이스의 백엔드 툴로 node.js가 괜찮아보였고 나의 코딩 바이블인 ‘생활코딩’사이트를 통해 node.js를 전반적으로 접해보니 너무 넘사벽 느낌이라기보다 한번 해 볼만 하겠다고 느껴졌다. 좀 더 깊숙하게 공부하면서 실용적인 기능들을 익혀가고 싶었고 (db사용법, 로그인, 주문, 결제 등)이리저리 서치해보니 ‘코딩알려주는누나’의 node.js 강의가 커리큘럼 상 실용적인 부분이 많아보였다. 할일앱부터 쇼핑몰까지 실전예제들을 다루는..