프로젝트 개요 강남가는 직행버스의 기점 근처에 살고있는데, 운수업체로부터 받은 시간표가 하나도 맞지 않아 버스가 출발할 때마다 알림도 오고 시간표도 작성해주는 서비스를 만들려고 한다. 기점에서 버스가 출발하자마자 집에서 나가면 시간이 딱 맞기 때문이다. 미리 나가서 기다리면 되지 않는가? 배차시간이 극과 극이다. 운수 업체로부터 받은 시간표는 일부 맞는 것도 있지만 비슷한 시간에 미리 나가봤다가. 버스가 저 멀리 떠나가는 상황이 너무 많았다. 그래서 기점에서 버스가 출발 할 때마다 새로운 시간표에 출발 시간을 기록해주고, 나는 그 시간표를 기준으로 버스를 이용할 예정이다. 공공 데이터 API 사용 준비 서비스에 필요한 정보는 아래와 같다. 버스노선 조회 서비스 정류소 조회 서비스 공공데이터 포털 국가에서..
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; `; 막상 스타일링하고 작성할 때에는 머리에 생각나는대로 편한대로 작성하곤 한다. 하지만 이 프로젝트도 당연히 컨벤션을 적용해야지. 스타일 컨벤션 ..
PWA 추가 유저들 대부분 모바일 환경에서 사용하고있어, PWA(Progressive Web App)를 추가했다. 보통 CRA로 리액트 환경을 만들때 PWA를 사용하지만, 나는 CRA도 사용하지 않았고 이미 개발도 어느정도 완료가 된 상태여서 PWA를 추가하는 방식으로 찾아봤다. PWA란? 웹 앱을 웹 브라우저 API와 결합하여 크로스플랫폼 동작하는 앱으로 만들 수 있다. PWA는 한 번 릴리즈 하고 나서 앱을 다시 배포 할 필요 없이 지속적으로 수정할 수 있다. 모든 코드가 서버에서 호스팅되고 APK나 IPA의 일부가 아니기 때문에 어떤 변경이든 실시간으로 적용할 수 있는 것이다. 네트워크 연결에 의존하는 앱은, 네트워크 연결이 없을 때 아무것도 할 수 없게 된다. PWA는 네트워크에 문제가 있어도 유..
유저명/타이틀 변경, 계정 삭제 기능 추가 수정 버튼 클릭 시 flag State 변경으로 수정모드로 변경한다. const onEditHandler = useCallback(() => { setIsEditing((prev) => !prev); }, []); {isEditing ? ( ) : ( {userName} {userTitle} )} {isEditing ? ( 저장 ) : ( 수정 )} 포스트 변경과 동일한 구조로 유저명과 유저타이틀도 변경된 내용을 POST로 서버로 보낸다. const onEditUserSubmit = useCallback( (e) => { e.preventDefault(); const regexp = /^[가-힣.,?;^_!%\s]+$/g; if (editName) { if (e..
