개발자연습노트

안전한 접근: trip.author?.name은 trip.author가 null 또는 undefined일 경우, name에 접근하지 않고 undefined를 반환합니다. 이로 인해 오류가 발생하지 않습니다. 기본값 설정: || '알 수 없음' 부분은 trip.author?.name이 undefined일 경우 '알 수 없음'을 반환합니다. 직접 접근 (trip.author.name)의 문제: TypeError 발생: trip.author가 null 또는 undefined인 경우, trip.author.name에 접근하려고 하면 JavaScript는 null 또는 undefined에서 name 속성을 읽으려고 하므로 TypeError가 발생합니다. 요약: 옵셔널 체이닝을 사용하면 안전하게 속성에 접근할 수 ..

화면에서 보여지는 trips 배열의 구조를 분석해 보면, 배열의 각 요소는 trip 객체로 이루어져 있습니다. trip 객체는 여러 가지 속성들을 포함하고 있으며, 대표적으로는 다음과 같은 구조를 가지고 있습니다: [ { author: { email: "a@a.com", // 이메일 주소 name: "이메일", // 작성자 이름 gender: "MALE", // 성별 role: "USER" // 역할 }, authorId: 18, // 작성자 ID createdAt: "2024-09-24T04:16:42.351Z", // 생성 날짜 id: 144, // trip ID reservations: [], // 예약 목록 (현재는 비어 있음) title: "경북대 -> 동대구역 택시 2024-09-24 13:1..

웹소켓을 이용해서 서버와 유저가 실시간 양방향 통신하는 법을 알아봅시다. 웹소켓을 좀쉽게 쓰고 싶으면 socket.io 라이브러리를 쓰면 되겠습니다. express와 가장 많이 쓰는 websocket라이브러리인데 웹소켓 관련 간편한 기능들을 제공해줍니다. socket.io 설치부터 해보도록 합시다.    socket.io 설치는 1. 터미널 열어서 npm install socket.io@4 입력 하고   const { createServer } = require('http')const { Server } = require('socket.io')const server = createServer(app)const io = new Server(server) 2. 서버파일 상단 쯤에 이런거 추가하고  app.l..

새로운 것은 없고 저번시간 숙제만 해보기 때문에 잘 해왔으면 다음강의 넘어가도 될듯 합니다. 전 어떻게 했는지 요약하자면 1. 채팅버튼 누르면 /chat/request 로 요청날리고/chat/request로 요청들어오면 chatroom이라는 컬렉션에 채팅방용 document 하나 발행해서 { member : [내_id, 글쓴이_id] } 같은거 저장해둠 2. /chat/list 로 접속하면 채팅방 목록페이지 (chatList.ejs) 보여줌 - 근데 DB에서 내 _id가 member 필드에 적혀있는 document를 다 찾아와서 chatList.ejs파일에 넣어서 보여줌  3. 채팅방 상세페이지를 만들어야하는데 채팅방은 100만개가 있으므로/chat/detail/바보 로 접속하면 채팅방의 _id가 '바보..

여태까지 서버랑 통신할 때 GET, POST 요청 이런 걸로 통신하는 법을 배워봤는데이걸 멋있는 말로 'HTTP 요청'이라고 부릅니다. 근데 일반적인 HTTP요청은 항상 유저가 먼저 요청을 해야 서버가 응답할 수 있는데그런데 가끔 실시간 데이터를 요청하지도 않았는데 먼저 막 쏴주는 사이트들이 있습니다.그런게 어떻게 가능하냐면 서버랑 유저가 통신하는 법이 몇개 더 있어서 그렇습니다. 서버와 유저가 통신하는 법은 크게 3가지 정도가 있는데  1. 일반 HTTP 요청2. Server sent events3. Websocket각각 뭔지 알아봅시다.    1. 일반 HTTP 요청 우리가 지금까지 했던 GET, POST 등의 요청을 HTTP 요청이라고 부릅니다.   이건 비유하자면 편지같은겁니다.편지는 쓸 때 마다..

리액트를 내가 만든 서버에서 사용하고 싶으면 어떻게 하는지 알아봅시다. 이번 강의 빠른 요약부터 하자면서버는 유저가 메인페이지로 접속하면 리액트로 만든 html 파일을 보내주면 그게 연동 끝입니다.      서버는 누가 html 파일 요청하면 보내주는 간단한 프로그램입니다. 진짜로 서버는 별거 아니고 어떤 고객이 codingapple.com으로 접속하면 거기맞는 html을 보내주는 기계일 뿐입니다.임시 서버를 Nodejs + Express로 쉽게 만들어봅시다.  1. 구글검색해서 nodejs 설치2. 작업폴더만들고 에디터로 오픈3. server.js 파일을 만들고 아래 코드 작성 const express = require('express');const path = require('path');const ..

댓글 기능은 어떻게 만들까요?당연히 댓글 기능 만드는 법을 배워야 만들 수 있는게 아니라...알아서 해오십시오 새로운거 없습니다. 일단 어떻게 동작하는지 설명부터 해보자면1. 글마다 밑에 input이랑 전송버튼이 있고 누르면 서버로 댓글이 전송2. 그럼 서버는 댓글을 DB에 저장3. 상세페이지 방문시 댓글을 가져와서 보여주기 근데 댓글은 DB 어디에 저장하면 좋을지 생각해봅시다.초보 때는 "DB에 이렇게 저장해도 될까" 많이 생각을 할텐데나중에 데이터가 많아져도 출력/수정/삭제가 쉬우면 잘 저장한 것입니다.    댓글은 글 document 안에 저장해도 될듯 당연히 A라는 글에 달린 댓글은A라는 document 안에 필드 하나 새로 만들어서 저장해도 됩니다. (DB에 있는 글 document){ tit..

지금은 개나소나 모든 글을 삭제할 수 있습니다.그건 싫고 글을 쓴 주인만 삭제가 가능하게 만들고 싶습니다.하지만 그 전에 이 글을 누가 썼는지 지금 아무도 모르는데요?그럼 어떡하지 하면서 손가락 빨고 있는게 아니라그래서 글 발행시 작성자의 이름이나 _id 같은 것도 기록해두도록 합시다.    글 발행 기능을 업그레이드하자 글 발행할 때 지금은 title, content 이정도만 기록하고 있는데여기다가 현재 로그인한 유저의 _id와 username을 기록해둡시다.  app.post('/add', upload.single('img1'), async (요청, 응답) => { await db.collection('post').insertOne(        {           title : 요청.body...

빠르게 문자를 부분검색하고 싶으면 search index를 만들어둡시다.다른 데이터베이스에서는 full text index라고 부르기도 합니다.mongodb 사이트에 search 아니면 search index 어쩌구 버튼이 컬렉션 들어가보면 있을텐데 그거 누릅시다.mongodb를 로컬하드에 설치해놓고 쓰는 분들은 아마 못쓸 수도 있습니다.     search index 동작원리 근데 그 전에 search index는 어떻게 만들어지는 것인지 궁금할까봐 잠깐 원리설명하자면    1. 일단 index를 만들 때 document에 있는 문장들을 가져와서 조사나 쓸데없는 불용어들을 다 제거합니다.그러니까 and or the ~s 이런거 제거해준다는 소리입니다.한국어도 비슷하게 을, 를, 이, 가, 그리고, 또는..

Database가 게시물을 찾는 방법  어떤 컬렉션에 { like : 어쩌구 } 가 기재된 document가 되게 많다고 가정해봅시다.갑자기 코드짜서 like : 100이랑 일치하는 document를 가져오라고 코드짜면 컴퓨터는 어떻게 하는지 아십니까.컬렉션의 모든 document를 하나하나 전부 다 검사해봅니다. document가 1억개 있으면 1억개 전부 검사해봅니다.당연히 컴퓨터는 document에 뭐가 적혀있는지 모르기 때문에 당연히 모든 document를 까볼 수 밖에 없는 것입니다.그럼 document가 많아질 수록 되게 느리게 동작하겠죠? 근데 다행히 이걸 해결할 수 있는 방법도 있는데 index라는걸 미리 만들어두면 document가 1억개 있어도 원하는 것만 빠르게 찾아올 수 있습니다. ..