본문 바로가기

컴퓨터/웹 : JS29

[Node.js] React로 Show페이지 만들기/서버-클라이언트 통신 쇼페이지 생성 오늘은 몽고DB의 스키마를 조금 다듬은 후에 View페이지를 구현 할 예정이다. 물론 아직 지도 API를 받아오는 것을 물론이고 회원가입 구현조차 되지 않았으므로 우선 보여지는 것만 하고, 후에 지도를 띄우고, 댓글을 띄우는 식으로 채워나가려 한다. 물론 validation역시 다뤄야할 중요한 이슈일 것이다. 우선 지금은 목록을 클릭하면 url을 보내도록 되어 있는데, 이때 목록에 담긴 _id주소로 get요청을 받아서 원하는 페이지를 띄우면 될 것이다...라고 짧게 생각 했는데, 이는 react를 사용하지 않는 경우 구현할 방식이고, react를 적용하기로 했고, 또 그렇게 했으므로 구상을 해야한다. 우선 서버측에서 react페이지로 데이터를 랜더링하여 보내고 그 정보를 react에서 쓰면.. 2023. 2. 21.
[Node.js](개인 프로젝트) React를 적용하다/express + mongoDB + React React 적용 쇼페이지를 만들려다 버튼을 누름에 따라 항목을 보여주고 싶어졌다. 이를 위해 AJAX가 필요한데, 이를 위해 axios를 사용하기로 했다. axios로 간단한 웹을 만들어 본 적이 있으나 axios를 안 쓴지 오래되서 다시 복습부터 진행하였다. 그런데 문득 뷰를 바꾸는 것 역시 중요하다는 것을 깨달아버렸다. 이를 위해 innerHTML을 바꾸는 방법이나 JQuery를 사용해 볼 수 있겠지만, 전자는 무척 비효율적이며 후자는 점점 죽어가는 기술이라는 것을 알게 된 이 시점에서 굳이 배울 필요가 없어졌다. 그래서 입문 단계만 배워놓은 React를 다시 시작해서 페이지를 구성해야되게 생겼다. 즉 Show 페이지 하나만을 위해 React + axios를 다시 복습하는 것이다. 특정 url에 들어.. 2023. 2. 19.
[에러 해결]Refused to apply style from 'http://localhost:3000/OOO.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Node.js Refused to apply style from 'http://localhost:3000/cafe.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 에러 해결 처음에는 경로가 틀린 줄 알고 상대 경로 절대 경로 모두 사용해보고 이름이 틀린 줄 알고 이짓 저짓 다 해봤다. 결론은 정적 파일 서비스를 위한 디렉토리를 설정하고 사용하겠다는 선언을 하였어야한다. 정적 파일이란 클라이언트에게 변하지 않는 파일로, 일반적으로 CSS, JavaScript, 이미지 파일 등을말한다. __dirname은 Node.js에서 전역 변수로 사용 가능.. 2023. 2. 17.
[Node.js](개인 프로젝트) 검색 기능 + 가격 및 편의성 추가 + 모델 수정 검색 기능 + 가격 및 편의성 추가 + 모델 수정 오늘은 드디어 search 기능을 구현했다. 원래는 몽고DB의 Searh쿼리를 이용하여 구현하였는데, 한글은 제대로 검색이 안 되는 이슈가 존재하였다. (어쩌면 내가 해결 못하는 것일지도.) 그래서 검색 문자를 포함하는 경우 검색 되도록 쿼리를 수정하였다. 오늘의 목표 1. 서치 기능 구현 2. 가격 추가 3. 메뉴 모델 구현 * 혹시나 제가 공부하는 과정을 따라서 실습해 볼 분은 제가 진행한 순서대로 따라오면 될 것 같습니다. 현재까지 아래의 순서를 따릅니다.(깃허브 코드 포함) 더보기 https://doompa.tistory.com/308 [Node.js] express 시작하기 (node.js 다운로드, npm, express) 제목 목차 Node... 2023. 2. 17.