나만 보는 개발 블로그

익명 커뮤니티 게시판을 만들고싶었다. 익명 기능은 에브리타임 기능처럼 익명1, 익명2, 익명3 식으로 댓글 작성자의 id를 익명으로 가리고 해당 게시물에 댓글을 단 순서대로 1, 2, 3 인덱스를 붙혀주는 기능으로 구현을 하고싶었다. 처음엔 아주 단순해보였지만 개발하다보니 신경을 써야 할 부분이 많았다. 1. 작성자의 id를 익명으로 가림 -> 단순하게 익명 테이블만 작성자 id를 저장하는 방식을 바꾸면 됨 2. 댓글을 단 순서대로 인덱싱 -> 게시글 테이블에 인덱스 관련 컬럼을 추가 후 댓글이 달릴 때마다 컬럼의 값을 1씩 상승 3. 댓글 단 사람의 인덱싱을 기억 -> 이게 가장 까다로웠다. 일단 기본적으로 작성자의 id를 익명으로 가려야 하지만 인덱싱을 기억하기 위해선 작성자의 정보를 가지고 있어야한..

React로 본격적인 프로젝트를 만들어본게 처음이다보니 미흡한 부분이 많았다. 자유게시판 Detail 페이지에 노출되는 정보는 다음과 같다. 1. 글 정보 - 제목 - 내용 2. 작성자 정보 - 작성자 아이디 - 작성자 프로필 3. 댓글, 대댓글 정보 - 작성자 아이디 - 작성자 프로필 불러올 정보가 많다보니 처음 무턱대고 짠 쿼리(?) 문으로 실행 해 봤더니 세상에 댓글,대댓글 까지 모드 랜더링 되는데 3초가 넘는 시간이 걸리기 시작했다. # 해당 코드 // 댓글 조회 함수 const getComment = async () => { try { const res = await axios.get(`http://localhost:8088/comment/commentList?postId=${id}`); let..

커뮤니티 프로젝트를 개발하기 위해선 이미지 기능은 필수불가결하다. 이미지 기능에서 가장 중요한 부분은 어떻게 저장하느냐 이다. Problem 처음 진행했던 프로젝트인 Travel Maker에선 협업을 하다보니 내 컴퓨터에서 올린 이미지가 다른 팀원의 컴퓨터에선 보이지 않기 때문에(로컬에 저장) 작업하기가 불편했다. 이러한 점 때문에 이미지를 Base64코드로 변환해서 DB에 저장하는 지금 생각하면 아주 무식한 방법으로 개발을 진행했다. 기능은 문제없이 잘 작동했다. DB에 있는 코드를 불러와서 이미지화 하면 되기때문에 협업도 잘 되었다. 하지만 문제는 이미지를 Base64코드로 변환하면 크기가 4배 ~ 10배정도 커진다는 문제 때문에 글을 쓸때 이미지를 4~5개 업로드하면 DB 컬럼의 데이터 타입을 Lo..

// 스크롤기능 const scrollRef_port = useRef(null); const scrollRef_market = useRef(null); const [isDrag, setIsDrag] = useState(false); //드레그 중인지의 상태확인 const [startX, setStartX] = useState(); //처음 클릭한 x좌표 const onDragStart_port = e => { e.preventDefault(); setIsDrag(true); setStartX(e.pageX + scrollRef_port.current.scrollLeft); }; const onDragStart_market = e => { e.preventDefault(); setIsDrag(true); ..