댓글 기능 삭제 유저들이 많이 올려준 글 들 중에 댓글이 작성된 적을 본 적이 없다. 아무래도 글을 올리고 글에 대한 공감은 '좋아요' 버튼으로 충분해서 그런 것이라고 판단했다. 그래서 과감히 댓글 기능을 삭제기로 마음을 먹었다. 수정 전에는 포스트를 클릭 하면 세로방향으로 커지고 댓글 관련 form영역이 있었다. 그리고 포스트를 작성 한 유저라면 수정/삭제 버튼이 보이도록 되어 있었다. 클라이언트의 Postlist 컴포넌트에서 댓글 관련 코드 UI 및 함수 삭제 서버의 댓글 관련 API 삭제 서버의 댓글 Schema를 삭제 수정 후에는 포스트를 클릭해도 아무일도 일어나지 않는다. 수정/삭제 관련 버튼만 남겨놨다. 물론 유저들의 유입과 활동량이 적어서 그런 것도 있지만 댓글기능이 없는 것이 서비스의 문..
시작하기 버튼의 클릭 영역 에러 시작하기 버튼의 바깥쪽 영역을 클릭하면 반응은 하지만 버튼의 기능은 하지 못한다.(로그인/회원가입 페이지로 안넘어간다는 뜻) export const LoginButton = styled.button` ... padding: 0.4rem 1.2rem; `; 수정 전에는 a태그(리액트라우터의 Link)를 감싸고 있는 button에 padding이 있다. export const LoginButton = styled.button` ... /* padding: 0.4rem 1.2rem; */ a { padding: 0.4rem 1.2rem; } `; button태그에 있던 padding을 지우고 자식인 a태그에 padding을 옮겨줘서 a태그의 영역으로 버튼영역을 채워줘서 해결했다..
스크롤 시 화면 아래가 잘리는 버그(?) 캡쳐에 이상한 점을 느끼셨나요? 스크롤 영역이 두군데로 나눠져서 이런 현상이 나타나버렸다. html, body, #root { overflow: scroll; ... } 문제는 이 코드였다. overflow를 scroll로 해놔서 fixed 상태인 navbar영역 만큼 스크롤이 되어서 저렇게 보이는 것이었다. 해당 코드를 삭제하니 깔끔하게 해결됐다.
PTR이란? Pull To Refresh의 약자로 당겨서 새로고침을 뜻한다. 모바일에서 흔히 새로고침을 위해 터치스크린을 위에서 아래로 내려 새로고침 했던 경험이 있을 것이다. 현재 센텐스유의 포스트들을 새로고침 하기위해서 브라우저는 새로고침 버튼을 눌러야하고, PWA를 사용한 앱 사용자들은 다른페이지로 갔다오거나 앱을 종료했다가 다시 접속해야하는 번거로움이 있었다. 그래서 센텐스유에도 PTR을 적용하기로 했다. react-pull-to-refresh npm에 리액트용 ptr 라이브러리가 있다. react-pull-to-refresh A React component for pull to refresh on the web.. Latest version: 2.0.1, last published: 4 mont..
SweetAlert 사용 기존에 모든 알림창은 redhot-toast를 사용했고, 프롬프트창은 기본 window.promt를 사용했다. SweetAlert를 사용하게 된 계기는 iOS 디바이스에서 window.prompt가 실행되지 않아 서비스워커를 업데이트하지 못하는 문제가 발생했다. SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 너무나 많은 옵션들이 있어서 Alert, Confirm, Promt 등 다양하게 사용할 수 있다. 그리고 확인과 취소의 결과에 따라 promise도 사용 할 수 있다. 그 점에..
로그인 정보 세션 구현 쿠키로 로그인 정보를 저장하고 인증 미들웨어에서는 쿠키에서 유저정보를 가져와 DB에서 복호화한 토큰으로 유저 정보를 찾아 인증상태를 넘겨줬다. 쿠키의 단점 가장 큰 단점은 보안에 취약하다는 점이다. 요청 시 쿠키의 값을 그대로 보내기 때문에 유출 및 조작 당할 위험이 존재한다. 쿠키에는 용량 제한이 있어 많은 정보를 담을 수 없다. 웹 브라우저마다 쿠키에 대한 지원 형태가 다르기 때문에 브라우저간 공유가 불가능하다. 쿠키의 사이즈가 커질수록 네트워크에 부하가 심해진다. [WEB] 🌐 세션 / 쿠키 🍪 차이 정리 비연결성(Connectionless)과 비상태성(Stateless) HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)이라는 특징이 있..
약 1개월 간 뼈를 갈아서 만들어 공식적으로 오픈했습니다. SENTENCE U | 문장공유 커뮤니티 짧은 글로 사람들에게 동기부여와 여러 긍정적인 메시지를 보내보세요! www.sentenceu.co.kr 🙏🏻 센텐스유는 짧은 글로 사람들에게 동기부여와 여러 긍정적인 메시지를 담기위해 만들어진 공간입니다. 오직 온라인의 정보에 의존해 혼자서 제작한 1인 프로젝트입니다. 많은 피드백 부탁드립니다. 어쩌다 만들게 되었는가! "FE개발자가 되어야지!" 하고 어느새 반년이 지났습니다. 6개월 간의 학원 대장정을 마치고 부족한 실력으로 취업에 힘을 쏟을까, 뭐라도 더 공부해봐서 조금이나마 역량을 높인 후 취업을 할까 두 고민 중에 후자를 택해서 학원을 마치고 계속 생각해왔던 프로젝트를 직접 만들어보자고 다짐했습니다..
정적파일 캐싱 정적파일들을 브라우저에 캐싱을 해놓지 않아 로드할 때마다 약 2~3초의 로드시간이 소요됐다 express에서 폰트/이미지/JS파일 등 정적파일들을 캐싱처리해줬다. app.use( express.static(path.join(__dirname, 'build'), { maxAge: 2629800, immutable: true, }), ); app.use( '/src', express.static(path.join(__dirname, 'build/src'), { maxAge: 2629800, immutable: true, }), ); 첫 접속 이후에는 정적파일들이 캐싱되어 밀리초 단위의 로드시간이 소요된다. 애플리케이션 탭에 Cache Storage를 확인해보면 캐싱이 잘 된 것을 볼 수 있다...
카카오 로그인 구현 간편하게 로그인 할 수 있게 카카오 API를 이용해서 로그인/로그아웃을 구현했다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 앱 키 & URI 설정 카카오 개발자에서 애플리케이션에 진행중인 프로젝트를 등록한다. 그럼 앱 키가 발행된다. 카카오 로그인 메뉴에 들어가서 활성화 설정과 OpenID Connect 활성화 설정을 ON으로 켜놓고, Redirect URI와 Logout Redirect URI도 설정한다. Logout Redirect URI는 고급 탭에 있다. 이렇게 기초 설정을 다 하고 서버와 클라이언트 환경변수에 ..
스타일코드 컨벤션 스타일 코드에서 컨벤션이 존재한다는 사실 일반 CSS나 SCSS를 작성 할 때에는 CSS Sort 익스텐션을 사용해서 쉽게 정렬했지만 지금 이 프로젝트는 emotion을 사용해 css-in-js형식으로 작성하고있다. 그래서 기본적인 스타일코드의 문법이 이런식이다. export const Loading = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; width: 100%; height: 30vh; `; 막상 스타일링하고 작성할 때에는 머리에 생각나는대로 편한대로 작성하곤 한다. 하지만 이 프로젝트도 당연히 컨벤션을 적용해야지. 스타일 컨벤션 ..
