프론트엔드 7

[Vanilla JS] State와 Router로 원활한 뒤로가기 및 페이지 이동 구축 (디자인 마켓플레이스 프로젝트)

리액트와 같은 프레임워크를 안쓰고 사이트를 구축해보려고하니가장 부딪혔던 부분이 바로 주소창 URL과 내 화면 간의 일치 작업이 매우 힘들다는 부분이었다.그 작업이 복잡해지다보니 자꾸 뒤로가기를 눌렀을 때 두번 뒤로가기를 하면 인덱스로 가버리는 현상이 발생했다. 사실 이 부분의 경우 지난번 프로젝트때 Vanilla JS 기반으로 해결해보는걸 시도는 했었으나 그땐 실패했었다.결국 이번 프로젝트 어드민 구축에 있어서 그런 문제가 또 발생했고이번에 풀지 않으면 계속해서 발생하겠다고 판단이 되어서 커서와 함께 다시 이 문제를 해결해보았다. 화면에 맞는 주소반영, 원활한 뒤로가기, 페이지 관리 등이 중요했고이를 해결하는 방법으로 State와 Router 파일을 구축해서 사용하게 되었다.(리액트를 안썼지만 결국 작업..

카테고리 구조 개발하기 - 백엔드, 프론트엔드 (디자인 마켓플레이스 프로젝트)

새로운 프로젝트를 시작하며 (디자인 마켓프레이스)대부분 직전에 진행해보았던 쇼핑몰 프로젝트와 유사했고그 과정과 유사하게 많은 부분들을 진행 중이다. 하지만 기존 쇼핑몰에서 내가 패스하고 지나갔던 게 바로 카테고리 부분이었는데디자인 마켓플레이스 프로젝트의 경우 이 카테고리 부분이 매우 중요해서초기 설계부터 잘 해두고 진행하고 싶었다. 그래서 나의 새로운 코딩 선생님. Cursor와 함께 이 카테고리 설계를 체계적으로 진행해보았다.사실 이게 대략하려면 크게 안어려울 부분 같았으나, 나름 체계적으로 구축하려다보니 꽤 복잡하고 어려웠다. 내가 나에게 요청하는 카테고리 요구사항은 이러했다.- 메인카테고리가 있고 그 하위로 서브카테고리가 있다. (서브카테고리가 필터 역할도 할 것)- 메인카테고리는 하나만 선택 가능..

프론트엔드 페이지 라우팅 정리 - window.addEventListener("DOMContentLoaded"), window.addEventListener("popstate")

인덱스 페이지(메인 홈 화면) 한 html 안에서 여러 함수를 통해서 페이지 변화를 보여주는 SPA 방식을 구현하려다보니 그 페이지가 늘어남에 따라 url주소와 페이지 간의 매칭이 점점 엉키게 되었다. 예를들어 버튼으로 페이지는 띄울 수 있지만 url주소를 새로고침하면 전혀 다른 곳으로 간다거나, 뒤로가기나 앞으로가기 시 에러가 발생하는 등 여러모로 url주소와 페이지 간의 라우팅 처리가 필요했다. 이 부분은 생각보다 굉장히 난해했고gpt랑도 감정소모?를 많이 했다...그래도 씨름끝에 나름 내 방식 안에서 최적화 된 방법을 찾았고 일단 이 방식으로 구현해보았다.// 주소 정보에 맞게 페이지를 반영하는 함수function handleRoute() { const path = window.location.pa..

검색 기능 - URL에 query string 붙여서 요청과 응답 해보기

상품 목록에 대해 원하는 상품 목록만 나오도록 할 수 있는 검색 기능을 진행해보았다.특히 url 주소에 검색어를 넣어서 get 요청을하고 거기에 대한 응답을 할 수 있도록 만들어서 프론트엔드 백엔드 간 api를 통해 검색결과가 보여지도록 구현해보았다. 이번에도 gpt와 함께 코드를 짜서 모르는 개념들도 많이 나왔는데 새롭게 알게 된 개념들 위주로 정리해본다.아래 코드가 url을 통한 검색을 구현한 프론트엔드 코드이다. // 검색 기능을 수행하는 함수function searchProducts(searchQuery) { if (searchQuery) { // 검색어가 있을 경우 해당 검색어로 검색 요청 fetch(`${URI}/api/product?name=${encodeURIComponent(searchQ..

[Netlify] 프론트엔드 무료 배포 + 도메인 얻는 방법

풀스택 todo-app제작의 마지막 단계인 프론트엔드 배포. 기존에 해오던대로 netlify로 배포를 진행했다. netlify로 배포하면 git-hub연동이어서 업로드 과정도 매우 편하고 무엇보다 무료로 배포+도메인주소도 얻을 수 있어서 너무나 좋다. 로그인을 깃허브로 진행하면 깃허브 파일들을 연동시켜서 사용할 수 있다.  add new site 버튼을 누르고 import existing project를 진행.  여기서 깃허브를 누르고 내가 깃허브에 올린 리포지토리를 선택해주면 된다.  여기서 사이트네임을 설정할 수 있는데 이 사이트 명이 내 사이트 url 주소가 된다. 겹치는지 체크 필요!  Deploy를 진행하면~   이렇게 내가 만든 사이트를 퍼블리쉬할 수 있다. 잠깐 기다려서 퍼블리쉬 완료를 확인..

[Node.js 스터디] 할일 앱 만들기 - 프론트엔드 부분 작업

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

[Node.js 스터디] mongoDB와 연결한 백엔드 설정 (feat. cors에러 해결 방법)

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