Pay it forward

이번에 고민해서 구현한 기능은 아래와 같습니다. 웹소켓으로 구현하면 좋겠지만 이번 프로젝트에 realtime database를 사용해서 조금 아쉽습니다. 그래도 상상한 기능은 비슷하게 구현된 것 같습니다. 이번에 배운 포인트는 총 세가지입니다~ 1. 모든 참여자가 실시간으로 동일하게 받는 이벤트가 필요합니다. 즉, 한 명이 onBlur 이벤트가 발생한다고 해서 모두에게 onBlur가 발생하는 건 아닙니다. onBlur 이벤트에 css를 바꿔주면 나한테만 보입니다. 2. 무수히, 산발적으로 발생하는 이벤트 와중에 적절한 타겟을 골라와야 합니다. 3. setTimeout이 동시에 여러 개 돌아가야 합니다. 즉, 변수명이 동적으로 바뀌는 함수가 여러개 필요합니다. 처음에는 textarea의 onChange이벤..

이번에 첫 프로젝트를 배포하면서 PWA에 대해 공부하다가 알게 된 lighthouse! 크롬에서 제공하는 홈페이지 성능 측정도구?라고 합니다. 처음 배포하고나니 점수가 영 별로네요.. 근데 생각보다 부족한 부분에 대해 정확히 짚어주기 때문에 잘 읽어보고 따라 하면 홈페이지 성능을 높일 수 있습니다. 우리 서비스의 가장 큰 문제는 performance 부분이었는데, 그 이유도 "이미지"가 대부분이었습니다. properly size images는 실제로 유저에게 보이는 사진 크기에 비해 이미지 데이터가 너무 크다는 말 같습니다. serve images in next-gen formats는 이미지 포맷을 적절하게 맞추라는 뜻 같은데, 저는 가이드에 따라 webp라는 파일로 바꿔서 사용했습니다. 검사에서 걸린 ..

안녕하세요! 항해 6기 B반 1조 "너나들이" 입니다 :)저희 "너나들이" 는 실시간으로 여행 계획을 짜는 서비스입니다. 더 이상 혼자서만 계획하지 말고 같이 계획을 만들어보세요! 링크로 친구들을 초대해서 함께 여행 계획을 만들어보고, 다른 사람들의 계획도 구경해보세요 * 5월 24일 (21:00)부터 6월 4일(18:00)까지 서비스 피드백 이벤트를 진행합니다. 정성스러운 피드백은 더 나은 서비스를 제공하는 큰 힘이 됩니다! 1등 : 롯데월드 자유이용권 2인 (1명) 2등 : 배달의 민족 상품권 (2명) 3등 : 스타벅스 아메리카노 기프티콘 (Tall) (20명)* 당첨자 발표 및 상품 발송 (당첨자분들께 개별 연락드릴 예정입니다!) : 2022년 6월 11일 토요일* 더 나은 서비스를 만들기 위해 U..

https://pungwa.tistory.com/103?category=999643 DB의 데이터가 갑자기 사라진다 추가: 문제와 원인을 자세히 살펴보니 데이터가 갑자기 사라지는 건 아닙니다! 위 영상은 저 혼자 테스트할 때 영상입니다. 모두 실시간으로 다른사람에게도 보이는 화면입니다. 프론트에서 real pungwa.tistory.com 위 포스팅의 문제를 해결한 방법입니다. 생각해보니 문제가 이거면,, dayNow도 onChange 발생할 때마다 업데이트해주면 되지 않을까요? 왜 다른 값만 onChange에서 가져와서 다른 dayNow에 넣고 있는거지? 그럼 현재 내가 글을 쓰고 있는 textarea는 몇 번째 dayNow에 있는건지 매번 제대로 찾아가서 저장되게만 해주면 문제가 없다는 생각이 들었습..

추가: 문제와 원인을 자세히 살펴보니 데이터가 갑자기 사라지는 건 아닙니다! 위 영상은 저 혼자 테스트할 때 영상입니다. 모두 실시간으로 다른사람에게도 보이는 화면입니다. 프론트에서 realtime database를 사용해서 만들었습니다. day1, day2같은 날짜를 클릭해서 해당 날짜에 해당하는 정보를 불러오는데요, day마다 페이지를 나눠놓은 게 아니라 day버튼을 클릭할 때 state만 바꿔주고 realtime db에서 바로바로 state에 맞는 정보를 불러와서 리스트와 폴리라인을 뿌려주도록 만들었습니다. 배포하고 여러명이 테스트를 해보니 같은 day에서 작업을 할 때는 괜찮습니다. 몇 명이 들어와서 작업을 하든, input에 전부 잘 반영이 됩니다. 문제는 personA가 day1에서 편집을 하..

진행중인 너나들이 프로젝트 현재 로그인 기능은 소셜로그인(카카오, 구글)과 JWT로그인 인증 방식을 사용하고 있습니다 우리는 Access token만 사용해서 jwt인증을 구현해놨는데 기술멘토님께서 Refresh token까지는 무조건 하는거라고 하셔서 한번 적용해보려고 합니다. access token 과 refresh token 의 개념을 이해하기 위해 jwt인증이 무엇인지, 그 전에 쿠키와 세션은 무엇인지에 대해서 이해하면 좋을것 같습니다. https://inpa.tistory.com/559 [WEB] 📚 JWT(Json Web Token )란? 💯 이해하기 쉽게 정리 Cookie & Session JWT 토큰을 배우기 앞서 쿠키와 세션에 대한 개념이 있으면, 토큰이 왜 사용이 되는지 ..등 보다 명..