댓글 기능 삭제 유저들이 많이 올려준 글 들 중에 댓글이 작성된 적을 본 적이 없다. 아무래도 글을 올리고 글에 대한 공감은 '좋아요' 버튼으로 충분해서 그런 것이라고 판단했다. 그래서 과감히 댓글 기능을 삭제기로 마음을 먹었다. 수정 전에는 포스트를 클릭 하면 세로방향으로 커지고 댓글 관련 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영역 만큼 스크롤이 되어서 저렇게 보이는 것이었다. 해당 코드를 삭제하니 깔끔하게 해결됐다.
처음부터 부딪힌 CORS 에러 버스노선정보나, 실시간 위치나 모든 데이터를 리액트쿼리로 관리하려고 한다. 그래서 아래와 같이 코드를 작성하고 일단 버스노선정보부터 API호출을 해봤다. import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; export const useGetBusInfo = () => { const { data, isLoading, error, refetch } = useQuery( ['businfo'], async () => { return await axios .get( `https://cors-anywhere.herokuapp.com/http://apis.data.go.kr/6410000/busrout..
MongoDB 설정 회원가입 후 새로운 프로젝트 생성 New Project를 클릭 프로젝트명을 입력 후 Next를 클릭 Create Project 클릭하여 프로젝트 생성 클러스터 생성 Build a Database 클릭 DB의 무료요금제(M0)선택 후 리전(Region)은 한국 선택 후 클러스터명을 작성 후 Create를 클릭 연결 및 인증에 사용할 유저명과 비밀번호 설정 IP 엑세스 리스트에 0.0.0.0 추가 후 Finish Admin 권한 설정 Database Access에서 Actions의 EDIT클릭 Built-in Role Atlas admin으로 변경 클러스터에서 Application 연결 Database의 클러스터에서 Connect 클릭 Connect your application 클릭 N..
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..
Express Express란? Node.js의 프레임워크이다. 자바스크립트 프레임워크로 React, 자바 프레임워크로 Spring 등등이 있는 것처럼 Express는 Node.js를 빠르고 간결하게 사용할 수 있게 해준다. Express의 특징 Express는 서버 사이드 프레임워크로 Node.js의 API를 단순화하고 유용한 기능을 추가해 쉽게 서버를 구축할 수 있게 해준다. 코드의 양을 줄여주고 유지 보수가 쉽게 해준다. 확장성을 지향한다. 불필요한 간섭이 없고 사용자가 필요한 라이브러리를 추가해서 확장 가능하다. HTTP request와 response를 컨트롤할 수 있다. Express 시작하기 설치 npm init //package.json 파일을 작성한다. npm install express..
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개월 간의 학원 대장정을 마치고 부족한 실력으로 취업에 힘을 쏟을까, 뭐라도 더 공부해봐서 조금이나마 역량을 높인 후 취업을 할까 두 고민 중에 후자를 택해서 학원을 마치고 계속 생각해왔던 프로젝트를 직접 만들어보자고 다짐했습니다..
