2차 프로젝트 (11) 썸네일형 리스트형 res.json() 과 res.render() res.render('storesearch', { storeList: storeList });와 res.json({ store });는 Express.js에서 서로 다른 응답 방식을 나타냅니다. res.render('storesearch', { storeList: storeList }); 이 코드는 Express.js의 뷰 엔진을 사용하여 HTML 템플릿을 렌더링하는 응답 방식입니다. res.render() 함수는 지정된 뷰 템플릿 파일을 렌더링하고 클라이언트에게 HTML 형식의 응답을 보내줍니다. 이를 통해 서버에서 렌더링된 HTML을 클라이언트로 전달하여 웹 페이지를 표시하는데 사용됩니다. res.json({ store }); 이 코드는 JSON 데이터를 클라이언트에게 응답으로 보내는 방식입니다. r.. API 만들기 ✏️서비스 로직과 라우터를 작성한 다음에는 이 두 요소를 서로 연결하고 서버에 등록하는 단계가 필요합니다. 이 단계를 거쳐야 클라이언트의 요청에 대해 서비스 로직이 실행되고 응답이 제공될 수 있습니다. 서비스 로직과 라우터 연결: 서비스 로직(storeService.js)에서 작성한 함수들을 라우터(storeRoutes.js)에서 호출하여 사용해야 합니다. 예를 들어, 클라이언트의 요청이 들어오면 라우터에서 해당 요청에 맞는 서비스 함수를 호출합니다. 라우터 등록: 라우터 파일을 Express 애플리케이션에 등록하여 요청을 라우팅하도록 설정해야 합니다. 이렇게 하면 클라이언트의 요청 경로에 따라 해당하는 라우터가 실행됩니다. Express 애플리케이션에 라우터 등록: Express 애플리케이션의 핵심 파.. .countDocuments({ field: value }) .countDocuments()는 MongoDB의 명령 중 하나 특정 쿼리 조건에 맞는 문서(Document)의 개수를 반환하는 함수입니다. 즉, 해당 쿼리 조건을 만족하는 문서의 갯수를 계산하여 반환합니다. 예를 들어, MongoDB에서 .countDocuments({ field: value })와 같이 사용하면 field 필드의 값이 value와 일치하는 문서의 개수를 반환합니다. const reviewCount = await Review.countDocuments({ storeId: a._id }); 위 코드에서는 Review 모델에서 storeId가 a._id와 일치하는 리뷰 문서의 개수를 가져옵니다. 이를 통해 특정 가게의 리뷰 갯수를 계산할 수 있습니다. .countDocuments() 대신에.. localeCompare() a.localeCompare(b)은 JavaScript에서 문자열을 비교할 때 사용하는 함수입니다. 이 함수는 두 문자열을 비교하고, 문자열의 정렬 순서에 따라 비교 결과를 반환합니다. localeCompare() 함수는 두 문자열을 비교하여 다음과 같은 값을 반환합니다: 음수 값: 첫 번째 문자열이 두 번째 문자열보다 사전적으로 앞에 옴. 양수 값: 첫 번째 문자열이 두 번째 문자열보다 사전적으로 뒤에 옴. 0: 두 문자열이 동일한 문자열. 이를 사용하여 문자열을 사전순으로 정렬하는 데 사용할 수 있습니다. 지도 API 정보 다루기 카카오맵의 지도 API를 사용할 때, 주소와 위도/경도 정보를 어떻게 다루는 여러 가지 방법이 있을 수 있습니다. 어떤 방법을 선택하느냐는 주로 데이터의 활용 목적과 데이터 구조에 따라 달라질 수 있습니다. 1. 주소 필드 안에 위도/경도 정보 포함: 주소 필드에 위도와 경도 정보를 포함시켜 사용할 수 있습니다. 이 방법은 주로 사용자 친화적인 데이터 표시를 위한 목적으로 활용될 수 있습니다. 사용자가 주소를 봤을 때 바로 위치를 파악할 수 있어 편리합니다. 그러나 프로그래밍적인 접근이나 위치 기반 검색에는 적합하지 않을 수 있습니다. 2. 위도/경도 필드 별도 생성: 데이터베이스나 데이터 구조에서 위도와 경도 정보를 별도의 필드로 관리하는 것도 일반적인 방법입니다. 이 방법은 주소와 위치 정보를 분리하.. 2023.08.14.월 : 프로젝트 시작 . 초기설정 오늘부터 프로젝트 시작! 오늘 할 일은 프로젝트 시안을 짜고 피그마를 완성하는 것! 힘을 내보자 1. 언어와 렌더링 방식 결정 리액트 - 타입스크립트 (CSR) 방식으로 가기로 결정 백은 - express.js 로 결정 CSR로 결정 : 초기 페이지 로딩 후, 클라이언트 측 JavaScript가 실행되어 동적으로 컨텐츠를 렌더링 및 업데이트하고 이로 인해 페이지 전환 시에 부드럽고 빠른 사용자 경험을 제공할 수 있고, 사용자가 바로 인터렉션해야하는 사이트이기 때문에 CSR로 결정 2. 메인 페이지 대강적인 ui 및 로고 대표컬러 결정 화면 사이즈 (가장 사용률 높은 사이즈로 결정) height: 1024px; width: 1440px; 로고(메인로고, 미니로고) 3. 파트배분 로그인/회원가입 마이페이지(.. 2023.08.13.일 : 카테고리 정하기 아침에 일어나서 커피 한 잔 마시고 시작하는 회의~ 🎶 오늘도 순조롭게 회의가 진행되었다. 오늘은 내일부터 시작될 프로젝트를 대비해 기본적인 큰 틀을 정해보는 시간을 가졌다. 언어 및 기능 사용부분에 있어서 의견이 반반이라 재투표를 하기로 하였다. 그리고 각자 알아온 홈페이지의 기능에 대해서 다시 정리해보면서 다음 회의에는 페이지별로 어떤 기능을 넣을지 정확하게 정해보기로 하였다. 회의주제 -홈페이지명 정하기 -타입스크립트와 넥스트의 사용 여부 -홈페이지 기능에 대해 알아보고 의견나누기 정해진 것 고민할 것 1. 홈페이지명 : tasty together 2. 홈페이지 기능 3. 타입스크립트와 넥스트의 사용 여부 -리액트 + 타입스크립트 vs 넥스트+자바스크립트 투표 1. 페이지별로 기능 구상해오기 -월요.. ✏️Next.js 1. Next.js -Vercel이 개발한 오픈 소스 react 프레임워크 -기본적으로 SSR 위주의 풀스택 기반 프레임워크를 주력으로 성장하고 있으며, 풀스택 프레임워크답게 API 기능 및 서버 컴포넌트를 통한 서버단 기능과, React 컴포넌트를 통한 클라이언트 기능으로 나뉘어 통합 제공하는 프레임워크이다. -현재 node.js 기반의 안정적인 풀스택 프레임워크로 사랑받고 있으며, SSG 방식 또한 제공한다. -'react 공식 시작하기' 문서를 열람할 시, 가장 먼저 이 Next.js 프레임워크를 통한 시작하기가 가장 상단에 표시될 정도로 React의 거의 대표급 프레임워크이다. 2. Next.js의 특징 Zero Config: 서비스를 구축하는 데 필요한 최소한의 설정만을 요구하며 컴파일링, 번들.. 이전 1 2 다음
