I'm interested in surfing, but are you afraid to do it for the first time? Or do you want to find people to enjoy surfing with? Do you want to share your surfing places with people? Do you have any? Everyone's surfing community for those people Anabada! Find friends to enjoy surfing together through Anabada! With Anabada, you can share many surfing 🍯 tips You can easily find surfing attractions all over the country! Don't worry about surfing alone now!!
September 2022 ~ Current
| React-Query | FireStore | React | Redux-toolkit | Stomp.js | Websocket | Github | Notion | S3 |
|---|---|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Features | Remarks |
|---|---|
| Open Meeting CRUD | Create Open Meeting Delete Modify |
| Search and categorization | Search meeting posts and categorize by region |
| Real-time Chat | Real-time Chat with websocket and stomp |
| Introduction Page | Use the swiper to provide convenience to users |
👨👨 Frontend 3 | Backend 3 | Designer 1
- You can check the weather information of the beach through Kakao Map!
- You can easily and quickly find a beach where you can surf by searching!
- You can upload images and introduce surfing-related information through posts!
- You can collect posts through the Like function!
- You can use the Open Meeting tab to open and participate in meetings!
- You can specify a date for the meeting to take place on a specific date!
- You can set the number of people to participate in the meeting, and you can also specify how long you want to recruit the meeting!
- You can check the list and the number of people who participated in the meeting!
- You can collect and check the popular groups selected based on the number of views!
- You can send a 1:1 chat right away by clicking on the other person's nickname!
- When you enter the chat room, you can exchange conversations with the other person in real time!
- I like what I wroteWow, if you add comments, you can check it out with a real-time notification!
- You can distinguish between read and unread alerts!
- I think it would be nice to have an introduction tab on the homepage introduction tab.
- It would be nice to produce a separate home screen and present the functions along with the service description.
- When I used it on my mobile, I was embarrassed because only the map came out alone at the beginning. I think it would be nice to add a way to use it.
👉🏻 Reflect feedback
- Create an intro page consisting of service introduction, map usage, and chat buttons, and provide convenience to users using swiper.
- I felt that too many clicks were needed in the process of searching for surfing spots on the main page.
- I wish I could search for the area or the beach.
- I want to print out various surfing spots in the area with a click on the map. I think I can feel tired because I press a lot of buttons.
👉🏻 Reflect feedback
- A search function including an automatic completion function is added to make it easier for users to search the beach.
- When you use it on Safari, you cannot scroll down, raise it back to the top, log in, and click on membership.
👉🏻 Reflect feedback
- By writing the defense code, the phenomenon of not being able to click on membership is prevented.
- I think it would be good to change the function of the main screen to a more intuitive name.
- It took a long time to find the ability to chat to users even after reading Google Forms and recognizing that there is a chat function. I think it'll be easy to find if the button size is a little bigger.
👉🏻 Reflect feedback
- Change the name of the main screen to Surfing Spot so that you can intuitively.
- Add a description of the chat function to the intro page, and increase the size of the button to make it easier to find.
-
Attempt to implement reactive headers where the headers rise and fall according to the direction of the scroll
-
Throttling is implemented with setTimeout to control many scroll events. Set the setTime to 50ms for smooth header movement
- When a large amount of scrolling occurs for a short time, the movement of the header stops (chrome, safari, whale, edge occurs the same)
- Since the problem has not been solved by using the loadash internal throttle, there is no problem with the existing logic.
- Oriented to the problem in the call stack, and measured the call stack capacity of approximately 14,000 based on the chrome 93 version. If there are many scrolls at once, it is judged that there can be a problem in the call stack.
- Throttling logic is completely removed.
- After that, there was a problem with the bounce scroll phenomenon in safari, but it was additionally solved through the defense code.
- Marker rendering failed on Kakao map
- Kakao Map is a method of injecting pre-written markers with html tags through a function to add markers to the cluster. In this way, the markers are not rendered in React.
- To prevent XSS, eact sets Symbol("react.element") to a value in the $$typeof entry of all jsx objects, and refuses to generate an element without this value.Marker element rejected because this part is a problem.
- Using react kakao sdk, third-party packages refactored with react components create markers in the same way as regular components to solve the problem
- In the process of scrolling the previous message indefinitely, all messages are received at once
- When the inview is exposed to the screen, the data is requested, but the previous message has a tag above that observes the inview because it has to scroll up. In this case, the view is constantly exposed on the screen, so it continues to request data, so it receives all data at once.
- Through the useEffect syntax, the inviw is exposed to the screen and requests only when there is a message.
- Because the view continues to be exposed even if there is a message, scroll adjustment prevents the view from being exposed to the screen whenever there is a message.
- Resolve the problem by keeping the scroll position where the last chat was before loading new data whenever a message was changed.
- The phenomenon of client creation per rendering and socket connection
- When connecting sockets, two connections were found, and client was declared as a variable and repeatedly created client every rendering.
- I didn't want to keep the value even if it was re-rendering, and I didn't want to make re-rendering happen even if the stompClient was given a value. Since the connection is made with the client you created, I think the client should be maintained to maintain the connection.
- Resolve stompClient by managing it as useRef.
- Problems that cannot be reflected immediately when changing server data
- When there is a correction of the data received by the query, the validation was made using mutation, but the invalidation was not working properly. Determined to be a problem with the user experience.
- I think it is not recognized as the same query key, so I manage the query key separately and use the same query key.
- The callback of mutation.mutate does not work normally when the component is unmounted.
- The invalidte operation was performed using the return statement and async wait, but some problems did not work.
- Modify the value of the refreshType option in invalidteQueries to 'all' to validate all of the same query keys.
- Network requests will be made without cache data from the cache
- I received data from reaction query to prefetch in advance and stored it in cache, but I made a network request without using the data in the cache.
- The styleTime received in useQuery has default of 0, so I made a request to receive new data without using the data in the existing cache.