개발공부일지

목차 1. 과제로 만들었던 Comment 코드의 이슈사항 2. Class 만들어서 Comment 구현하기 ⓛ 1. 과제로 만들었던 Comment 코드의 이슈사항 - 이벤트 중복처리를 하지 않아서 생긴 이슈 - 추가되거나 삭제했을때의 리랜더링 - 재활용할수없는 코드의 가독성 문제 - 댓글을 구현하는 작업은 CSR - NodeJS 프로젝트는 SSR - 비동기통신 (AJAX)이 필요 - 언어적 깊은 이해도가 있어야 한다! 2. Class 만들어서 Comment 구현하기 ⓛ - html,css 작성 - ul, li 태그를 사용해서 가장 바깥 ul에 li으로 댓글을 작성하는 블록과 작성한 댓글을 보는 리스트로 나눈다. - 댓글을 보는 리스트 li 안에서 다시 ul과 li 태그를 사용해서 댓글이 생성될때마다 ul ..

form.addEventListener("submit", (e) => { e.preventDefault(); renderComments(); form.reset(); }); - preventDefault() - form.reset() : form안에 내용을 적었고 submit을 한다음엔 form안에 작성한내용을 지워주는것 elem.addEventListener("click", (e) => { const idElem = e.target.closest(".comment_row").querySelector(".id"); }); - closest function counter() { const comments = document.querySelector(".count"); const total = localSt..

목차 1. 의존성 주입 (DI) 2. 제어의 역전(IoC) 3. 오버라이딩 (overriding) 4. 오버로딩 (overloading) 1. 의존성 주입 (DI) - 자원을 효율적으로 사용하여 확장성 있게 코드를 작성할 수 있다. - MVC 계층으로 코드를 작성할때 하나의 service를 여러개의 controller가 사용해야할 경우 - 똑같은 코드인 service를 n번 사용하게 되어 비효율적이므로 ( 프로젝트했을때 board.controller, notice.controller 했던것처럼) - class를 만들고 module.exports로 내보내고 - module 파일을 만들어서 인스턴스를 생성만을 모아둔다. - 만들어둔 class의 인스턴스 생성을하면서 인자에 넣어 조립해준다. - 그걸 다른 파..

let slideIndex = 0; let slides = document.getElementsByClassName("slide"); let ellipses = document.getElementsByClassName("ellipse"); let isProcessing = false; let slideInterval; function initializeSlides() { for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; ellipses[i].classList.remove("active"); } slides[0].style.display = "block"; ellipses[0].classList.add("active");..

1. 프로젝트 2. 와이어프레임 그리기 3. Figma 사용해보기 1. 프로젝트 - 메인페이지, 로그인, 회원가입, 공지사항, 자유게시판 구현 - 메인페이지에 슬라이드 - User관리 (id, pw 회원정보) - figma - 스키마만들기 : ERD, 스웨거 - postman, thunder client - 칸드보드 : 트렐로, 노션, github - 컨셉잡고 메인 색상과 사용할 색상 고르기 - 로고 만들기 2. 와이어프레임 그리기 3. Figma 사용해보기 - 각 페이지 디자인하기 https://www.figma.com/proto/vmZrD7AuXhu7AHw74ARvkn/project?type=design&node-id=01&viewport=457%2C481%2C0.27&t=3MlNwwgvYKxek1s..

// src/index.js router.get("/", (req, res) => { // console.log(req.headers.cookie); res.render("index.html", { user: req.user }); });​ 목차 1. 로그인 했을때 쿠키를 만들고 화면 다르게 보여주기 2. token 정보 증명하기 3. DB에 user_id 요청해서 로그인 구현 완성하기 1. 로그인 했을때 쿠키를 만들고 화면 다르게 보여주기 - user_id, user_pw를 쿠키안에 jwt토큰을 넣어주기 // src/user/user.servcie.js const userRepository = require("./user.repository"); const JWT = require("../../lib/..

목차 1. 로그인 구현 설계 2. express 설치, 디렉토리 생성, 파일 작성하기 3. router 만들기 4. controller 만들기 5. service만들기 6. repository만들기 7. User 스키마 만들기 8. DB connection 9. repository 완성하기 10. service 완성하기 11. jwt 1. 로그인 구현 설계 - express 서버 열기 - html 작성하기 ( 로그인화면 ) - 디렉토리 생성하기 - 서버 골격 만들기 ( 라우터 나누기) - DB connection - JWT 만들기 2. express 설치, 디렉토리 생성, 파일 작성하기 npm init -y npm install express nunjucks / | - /lib | --- jwt.js |..

목차 1. cookie 2. Set-Cookie 3. cookie-parser 4. 암호화 1. cookie - 쿠키는 요청메세지를 만들어 요청헤더에 나임을 식별하게 알려준다. - 쿠키는 key와 value 쌍으로 이루어져있고, 브라우저(Client)에 저장된다. - F12 애플리케이션 storage에서 'name'과 'value'로 입력해볼수있다. - 쿠키는 브라우저(Client)에서 만들어준것으로 server는 요청헤더를 읽는것이다! - 클라이언트가 웹 사이트를 방문할 때 서버로부터 받은 "Set-Cookie" 헤더에 따라 설정된다. - 이러한 쿠키는 클라이언트에서 관리된다. - 다음 요청 시 서버로 다시 전송되고 이를 통해 서버는 클라이언트를 식별한다. 2. Set-Cookie app.get("/c..

목차 1. 기초설정하기 2. LIST페이지 구현하기 1. 기초설정하기 npm init -y npm install express nunjucks mysql2 - express, nunjucks,mysql2 설치하기 create database block10; use block10; CREATE TABLE boards( id INT AUTO_INCREMENT, title VARCHAR(200) NOT NULL, content TEXT, writer VARCHAR(20) NOT NULL, created_at DATETIME DEFAULT NOW(), hit INT DEFAULT 0, PRIMARY KEY(id) ); show tables; desc boards; SHOW STATUS LIKE 'Threads_..

목차 1. database 만들기 2. connection 해보기 3.connection pool 4. mysql2/promise 사용하기 1. database 만들기 sudo service mysql restart sudo mysql -u[유저네임] -p # 비밀번호 입력하기 create database block10; use block10; CREATE TABLE boards( id INT AUTO_INCREMENT, title VARCHAR(200) NOT NULL, content TEXT, writer VARCHAR(20) NOT NULL, created_at DATETIME DEFAULT NOW(), hit INT DEFAULT 0, PRIMARY KEY(id) ); show tables; de..