나만 보는 개발 블로그

이번 프로젝트에서는 aws를 안쓰기로 했다. aws를 안쓰면서 생기는 가장 큰 문제는 ssl인증서와 내 도메인으로 배포하는 부분이였다. 먼저 https로 배포하기 위해선 가장 먼저 수행되어야 하는건 ssl 인증서 발급이다.인증서를 발급해주는 서비스를 하는 사이트는 많이 있지만 비용이 만만치 않다..가비아 기준으로 제일 저렴한 인증서 비용이 1년에 4만원이다 다행이 우리는 차선책이 존재한다바로 Let's Encrypt이다Let's Encrypt는 무료 인증서 보급을 통해 https의 확산을 늘리겠다는 취지로 시작된 비영리 프로젝트이다.무료이긴 하지만 단점은 인증 기간이 매우 짧다 # 1. nginx 설치sudo apt install nginx # 2. letsencrypt 설치sudo apt-get ins..

반응형 웹이 제일 귀찮은 작업같다...이게 맞는진 모르겠는데 하나하나 media태그를 통해 조건을 다 걸어줘서 모바일버전을 구현하는중이다 하지만 구현도중에 핸드폰으로 사이트를 접속했을 때 문제가 생겼다. 모바일 화면에선 height 100vh의 기준이 모바일 주소창은 제외라서 원치 않는 스크롤이 생기는 문제이다. 문제 해결은 간단한 서칭으로 해결할 수 있었다.  let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); window.addEventListener('resize', () => { let vh = window.innerHeight * 0.01; document..

진행하는 프로젝트에서 문장을 비교해서 하이트라이트 처리해주는 기능이 필요했다.처음엔 쌩 js로 구현을 간단하게 했지만 생각할부분이 생각보다 많이 존재했다. 예를 들어 이건 A 문장 입니다이건 B 문장 입니다같은 형태가 동일한 문장에 대해선  이건 B 문장 입니다 처럼 하이라이트 처리가 잘 되지만이건 A 문장 입니다이건 B 문장 일수도 있습니다처럼 형태가 달라져버리면내가 기대하는건 이건 B 문장 일수도 있습니다이지만 실제론이건 B 이건 B 문장 일수도 있습니다  처럼 하이라이트가 되어버린다내가 원하는 완벽한 문장비교를 위해선 생각보다 조건을 까다롭게 잡아야 될거같았다.하지만 그렇게 비중이 큰 기능이 아니다보니 여기에 오랜 시간을 투자하는건 시간낭비라 판단되어 라이브러리를 서칭하다가diff 라는 라이브러리를..

그룹웨어 만드는 과정중에 조직도 페이지를 위해 트리구조 화면단이 필요했다라이브러리를 사용한다면 쉽게 만들순 있겠지만 라이브러리 없이도 만들수 있을 거 같아 그냥 만들어봤다 일단 트리구조를 위해선 당연하게도 트리구조 data가 필요하다 const initialTreeData = [ { id: '1', label: '(주)코스모스오피스', depth: 0, type: 'root', expand: true, children: [ { id: '2', label: '대표', ..

익명 커뮤니티 게시판을 만들고싶었다. 익명 기능은 에브리타임 기능처럼 익명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..

1. wsl 개발자 설정 -> 개발자 모드 켬 2. Linux용 Windows 하위 시스템 windows 기능 켜기/끄기 -> Linux용 Windows 하위 시스템 체크 3. Ubuntu 설치 Microsoft Store -> Ubuntu 설치 4. Ubuntu 실행 및 CodeServer 설치 $ sudo apt-get install build-essential net-tools 최신버전(4.17.1) 설치 $ wget -q wget -q https://github.com/coder/code-server/releases/download/v4.17.1/code-server_4.17.1_amd64.deb $ sudo dpkg -i code-server_4.17.1_amd64.deb config파일 수정 ..

// 스크롤기능 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); ..

// 모달 외부를 클릭하면 모달을 닫습니다. window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } }; 원화 단위 DecimalFormat df = new DecimalFormat("###,###");