node.js프로젝트(김아현,이무헌,박민우,신근호) 썸네일형 리스트형 project day-8(지금까지 작성한 코드 분석) 앞으로 해나가야할 로드맵 ------------------------------------ (1) 이제 데이터베이스에 column을 추가할건데 receiver랑 isRead를 추가해줄것이다. 채팅은 user랑user는 할수가 없고 admin이랑 user만 채팅 가능하다. receiver를 추가해 주는 이유는 누구랑 대화를 했는지 알기 위해서다. admin은 고유 키값이 1로 지정되어있어서 receiver에서는 1(관리자를)제외한 그 관리자를 채팅한 유저를 찾아낼수 있기에 추가해주는것 isRead는 boolean 값으로 0(false) , 1(true)로 글을 읽었는지 안읽었는지 판단 해줄수 있다. --------------------------------------(2) 채팅은 앞서 말했듯이 admin이.. 더보기 sequelize orm을 사용하여 mysql 데이터베이스와 연동/ foreach 함수 User.associate(db); Post.associate(db); User 모델과 Post 모델을 db 객체와 연동시키는 역할 db.User.hasmany(db.post, { foreignKey: "user_id", sourceKey: "id"}) 를 통해 user 모델과 Post 모델 간의 N:1 관계 db.Post.belongsTo(db.User, { foreignKey: "user_id", targetKey: "id" }) 따라서, User와 Post 간의 관계에서 User는 여러 개의 Post를 가질 수 있으므로 hasMany를 사용하였고, Post는 하나의 User에 속해야 하므로 belongsTo를 사용하였습니다. foreignKey: "user_id", sourceKey: "id"는 .. 더보기 프로젝트 d-7(채팅 내용 데이터베이스에 기록할때 유저아이디 전달) 어제 페이지 접속시 유저 목록 가져와서 채팅쪽 유저 목록에 모든 유저 다 보여주는 것까지 했으니까 이제 해야할것은 해당 유저의 이전 채팅내용을 보여주는 것이다. 인터파크에 문의하기 ⨳ 보통 수십 분 내 답변 인터파크 안녕하세요? 고객의 편의성을 돕는 인터파크입니다. 문의를 남겨주시면 최대한 신속하게 답변 드리겠습니다.😀 전송 중간에 이 부분이 채팅 메시지가 표시될 영역을 html에 넣어두었다. chatMessages는 채팅 메시지들을 표시하는 영역을 나타내는 DOM요소이다. 이 요소의 자식 요소로는 각각의 채팅 메시지를 표시하기 위한 요소들이 추가된다. appendchild를 사용하여 p 요소를 chatMessages 의 자식 요소로 추가하는 이유는 새로운 채팅 메시지를 이전 메시지들과 함께 보여주기 위.. 더보기 project day-6 데이터베이스로 html 요소 동적으로 추가 이제 데이터베이스에서 동적으로 user를 생성하면 html에도 추가가 되는 형식으로 해볼것이다. 여기 사진을 보면 html 태그 내에서 만든게 아니란 것을 알수있다. (데이터베이스에서 동적으로 만들었다는 증거) popup contet 전체 틀에다가 데이터베이스에서는 이미지 태그랑 p태그(user이름 부분)이랑 아래쪽 회색 바 이렇게 popupcontent 부분에 추가를 시켜주고 이걸 foreach 로 반복시켜서 데이터 베이스에서 user를 추가해줄때마다 하나씩 생성해준다(위에 findall를 적용했기 때문이다.) 간략하게 user.finaAll({})을 통해 데이터베이스에서 모든 사용자 정보를 불러온후에 foreach로 div,img,p태그들을 반복시켜준다. 더보기 내일 할것 내용좀 router.get("/Users",async(req,res)=>{ const user = await User.findAll({}); res.json(user) }) 이제 인터파크 채팅창에 user1 user2 이거는 그냥 보여지는 창이니까 mysql에 저장되어 있는 user목록으로 대체시켜 줄것. 채팅창의 큰틀의 클래스를 가져와서 popup-content를 그후에 foreach로 user한명마다 반복시켜준다. 더보기 project day-5 (axios 사용해서 mysql에 채팅 내용과 유저아이디 기록) 오늘 해볼것은 저번에 만들었던 채팅창에서 전송버튼을 누르면 mysql에 기록이 되는 과정을 해볼것이다. const sendButton = document.querySelector('.chat-send-botton'); sendButton.addEventListener('click', async() => { // 입력된 채팅 내용 가져오기 const chatInput = document.querySelector('#chatId'); console.log(chatInput); const message = chatInput.value; // 채팅 내용을 서버로 전송 //socket.emit('chatMessage', message); await axios.post('http://127.0.0.1:8080/ch.. 더보기 project day-4 json web token(JWT)을 활용한 인증 미들웨어 1. jsonwebtoken 모듈을 가져온다. const jwt = require("jsonwebtoken"); 2. exports.isLogin은 isLogin 함수를 모듈로 내보내는 구문 exports.isLogin = (req, res, next) =>{ 3. req.session에서 access_token을 가져온다. * req session은 express.js에서 세션을 관리하기 위한 객체 express.js는 기본적으로 클라이언트와 서버 간의 상태를 유지하기 위해 세션을 사용한다.(세션이란 서버 측에서 클라이언트의 상태를 저장하는 방법) req.session은 이 세션 객체에 접근하기 위한 express.js의 속성 req.ses.. 더보기 프로젝트 도중 고칠것 1.class 작성 방식 하이푼으로 작성 ex)chatting-room 2. 태그로는 (css 스타일 x) gpt 가 기능은 구현 가능하게 해주지만 평소에 자주 사용하는 코드를 막 제시해 주지 않는데 (div에다가 css 스타일을 주는 현상) 만약 gpt가 제시한 코드 그대로 사용하게된다 하면 협업 프로젝트때 div에다가 class를 주면 완전히 꼬여버리는 현상이 발생 ex) 잘못된 예시 메시지를 입력해주세요. ex) 옳은 예시 .input-field{ background-color: rgb(255, 255, 255); width: 250px; height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 340%); b.. 더보기 이전 1 2 다음 목록 더보기
