Sungtt

토요일 초저녁 디시인사이드에 글을 올렸다. 전보다 사용자가 많을 시간이라 10명뿐이던 1차에 비해 오후7시기준 60명까지도 접속하였다. 오후 8시 50분 기준 110명. 오후 11시 22분 기준 127명! 유저 피드백 - 디코처럼 좌측 하단에 알람 오는형태로 만들어달라 - 방이 다차면(닌텐도 상에서) 수동적으로 등록한 리스트를 삭제할 수 있도록 해달라 - 태그추가 해달라 = 스킬스왑 / 방장딜러 / 방장서폿 / - 어차피 메타인 태그 없어도 될거같다 = 1딜3서폿 - 홈페이지 한켠에 ?이나 도움말로 레이드 메타같은거 설명해주면 좋겠다 - 암호 더 가독성 좋게 해달라 - 작성폼에서 암호와 포켓몬명 순서 바꿔달라 추가하면 좋을거라고 느낀점은 - 공지사항 - 자유게시판 - 이전 레이드 조회 - 앱내부 알림이 ..

디시인사이드에 사이트를 만들었다고 글을 올렸다. 새벽이라 보는이가 많지 않았지만 글을 올린 순간 7~8명정도가 접속한것을 알 수 있었다. 보완해야할 점은 아래와 같았다 1. 아이폰에서의 게시글 출력 오류 모든 게시글이 방금 전이라고 뜨는 오류가 있다. moment 사용으로 해결 https://velog.io/@dody_/React-Library-Momentjs-fromNow-locale-%ED%95%9C%EA%B5%AD-%EC%8B%9C%EA%B0%84%EC%9C%BC%EB%A1%9C-%EC%88%98%EC%A0%95 [React Library📚] Momentjs fromNow(), locale 한국 시간으로 수정 안녕하세용 도디예용 오늘은 momentjs 가져왔어용! 시간관련된 작업은 momentjs를..

세모이를 마치며... 처음 웹 개발을 시작하면서 만들고싶었던 기능을 구현해보는 긴 시간이었다. 클론할 대상이나, 구체적인 목표가 있던것이 아니었다. 손을 놓은지는 꽤 지났지만 개발하는동안 겪었던 고난과 역경, 기쁨 등 희노애락을 기록하고자한다. Used Stack 프론트 React create-react-app react-router-dom 백 Node.js express axios cheerio AWS EC2 AWS S3 가비아 nginx Let’s Encrypt ( Socket Secure Layer 인증서) 데이터베이스 MySql MySql WorkBench 암호화 crypto-js jwt (json web token) 세모이 세모이란 세상의 모든 이벤트의 줄임말로 온라인상에서 진행되는 이벤트를 수..

DB users테이블 favorites 추가 ( 사용자가 즐겨찾기한 사이트 보관 용도) jwt 페이로드에 users favorites값 추가 ( 즐겨찾기 컴포넌트 마운트 시 페이로드의 값에 따라 렌더링해줄것을 결정하기 위함) 카테고리에서 사이트명 옆에 빈 별표 구현 (사용자가 즐겨찾기를 하게해주는 버튼) api/addfavorites (사용자가 즐겨찾기한 값을 추가/삭제 해주는 api) 클릭 시 users 테이블 컬럼에 사이트값 조회 후 없을 시추가 다시 클릭 시 users 테이블 컬럼에 사이트값 조회 후 있을 시 삭제 즐겨찾기 컴포넌트 렌더링 시 api/viewfavorites (페이로드의 즐겨찾기값을 담아서 요청하고, 서버에선 그에 상응하는 db쿼리문을 사용하여 객체 응답) 응답 받아온값을 상태값에 ..

"arn:aws:s3:::saemoi/*.jpg", "arn:aws:s3:::saemoi/*.JPG", "arn:aws:s3:::saemoi/*.jpeg", "arn:aws:s3:::saemoi/*.JPEG", "arn:aws:s3:::saemoi/*.png", "arn:aws:s3:::saemoi/*.PNG", "arn:aws:s3:::saemoi/*.gif", "arn:aws:s3:::saemoi/*.GIF"

개요 세모이의 메인아이템인 브랜드 이벤트 데이터 수집을 리팩토링한다. 로직 기존에는 클라이언트에서 GET메서드로 이벤트 페이지를 받아왔지만 변화한 로직은 먼저 클라이언트는 서버에게 이벤트페이지 URL을 담아 POST 요청을 한다. 서버에서 GET메서드로 페이지 데이터를 받아와 가공한 뒤, DB에 저장하거나, API주소에 따라 필요한 데이터를 반환해준다. 이를 통한 이점은 클라이언트에서 CORS오류로 앓던 문제를 해결할 수 있다. 구성 필요한 데이터는 아래와 같다. DB event_index event_title event_date event_img event_link event_view SERVER - 현재 이벤트페이지에 진행중인 이벤트 정보가 담긴 A배열 (이벤트 제목, 이미지, 행사 기간, 이벤트 링..

우선 방식에 대해 고민하였다 - 게시판 테이블에 유저의 프로필 주소를 같이 저장하여 게시판에 출력하는 것 이러면 사용자가 이전에 사용하던 프로필 사진이 그대로 남아 사용자의 사용기록을 남겨둘 수 있다는 점은 좋은 방향이라 생각했다. - 게시판 조회마다 두개의 테이블을 join 하여 게시판에 출력하는 것 이전에 작성한 게시글이더라도, 사용자가 프로필을 변경한다면, 변경한 프로필로 적용된다. 게시판을 봤을 때 게시물이 동일한 아이디, 다른 프로필로 지정되어있다면 사용자가 볼 때 같은 사용자임을 인지하기까지 시간이 불친절하다고 느꼈다. 그래서 join을 사용하여 항상 최신의 프로필을 보여주는 것으로 택했다. 각기 다른 테이블이 있다. 유저 정보가 담겨있는 유저테이블 게시판 정보가 담겨있는 게시판 테이블 게시판..

개요 댓글 삭제 시 화면상에서 바로 댓글이 삭제되어 렌더링되는것을 구현중이다. 삭제 후 다시 댓글리스트를 받아와 상태값에 할당하여 리렌더링하려했다. 댓글삭제를 요청하는 removeCommnet API통신이 pending인채로 비동기 처리가 완료되지않고 페이지 이동 및 새로고침하여야만 삭제가 되었다. 댓글 등록은 잘되는데 말이다....이 글에서 pending이 되는 이유와 화면이 정상적으로 렌더링되는 과정을 기록해보자. 왜 자꾸 pending ? 우선 세모이가 사용하는 api통신수단인 axios는 promise함수다. promise는 3가지 상태로 분류된다. 대기(pending): 이행하거나 거부되지 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실..

개요 컴포넌트 개발중 비이상적으로 많이 렌더링되는 컴포넌트가 나타났다. 이를 해결하는 기록을 남겨보려고한다. 해결과정에서 컴포넌트가 렌더링 되는 조건이나 최적화 방법에 대해 다시 한번 머릿속에 되새기자. 세모이의 Viewboard 컴포넌트는 게시물을 보여줄 때 쓰인다. 하위 컴포넌트로는 댓글을 작성해주는 폼인 CommentFooter 컴포넌트를 가지고있다. 리렌더링되는 원인을 추적해보자 컴포넌트가 의도치않게 렌더링되는 이유는 대표적으로 1. 상위 컴포넌트가 렌더링 될 경우 하위 컴포넌트도 렌더링된다. 2. 상속받은 props의 변경이 있겠다. 3. 해당 컴포넌트의 state 변경 리렌더링 횟수는 총 4번이다. 그중에 3개의 원인은 아래를 보자. viewboard의 코드중에 state값이 바뀌는 코드다. ..

개요 처음 세모이를 개발할 때 짰던 로직이 문제가 있는거같다. 로직은 아래와 같다 1. DB에 들어있는 배열을 리턴하는 함수 (종료된 이벤트가 들어있을 수도 있는 배열) 2. 웹크롤링한 배열을 리턴하는 함수 (새로운 이벤트가 들어있을 수도 있는 배열) 3. 두 함수의 배열을 가져온다 4. 각 배열의 타이틀(이벤트명)을 새로운 배열에 담아낸다. 5. 다시 한번 각 타이틀명이 들어있는 배열을 비교하여 new배열엔 없는 db배열을 반환 const db_Title = ['첫째', '둘째', '셋째', '넷째', '다섯째', 'haha']; const new_Title = ['첫째', '둘째', '셋째', '넷째', '여섯째']; const pareTitle = db_Title.filter((i) => !new_..