728x90 개발42 React 무한 스크롤 리액트에서 페이징 처리를 해야하는 상황이였다...주로 앱을 작업하였기 때문에 Swift 에서는 tablecell 로 스크롤이 마지막에 닿으면 그때 쓰레드를 통한 페이징처리를 작업하였고 Java에서도 역시 recyclerview 를 이용한 페이징 처리를 진행하였다.하지만 웹에서는 어떻게 스크롤 끝을 감지하여 페이징하는지 잘 몰라서 검색해보았다..무한 스크롤을 통해서 페이징 처리를 하려고 했기 때문에 정보가 필요했다. 뭔가 스크롤 끝 감지해서 그 끝에서 로직을 처리해주면 되는데 스크롤 끝은 감지하는 부분을 몰랐다. 무한스크롤 구현 ! 1. Scroll Event ( 스크롤 이벤트 )처음에는 scroll 이벤트를 감지하다가, 페이지 가장 아래에 닿았을 때 쯤 API 요청을 하면 되지 않을까? 싶었다.하지만 .. 2024. 6. 10. React 새로고침 데이터 저장 리액트 작업 중 회원가입 페이지에서 새로고침했을때 기존에 input 태그에 입력했던 정보들이 전부 없어져버렸다. 원래는 기존 데이터를 가지고 있을 줄 알았으나, 그게 아니었다. 전부 입력했던 데이터들이 그대로 사라져버린 것이다. setState 안에 넣어봐도 깊은 복사를 해보아도 휘발성으로 사라져 버렸다. 왜그러지 ??그래서 방법을 찾아보았는데 React-Redux Persistance 라는 것을 알게 됐다.persistance .. 단어 부터 영구적이다 그렇다면 왜 React-Redux 가 필요한가! Redux 는 React 에서 사용하는 api 기술관리 중 하나이다.처음에는 ContextApi 로 전역관리를 하면서 api 도 같이 작업하고 있었다. 사실 이 Context Api 로도 큰 불편함은.. 2024. 6. 9. React useMemo.. useCallback.. memo.. React Native 에서 useMemo , useCallback , memo 등 다양한 함수들을 써왔다. 불필요한 리렌더링을 방지하기 위한 일련의 대책으로 사용했다. 하지만 useCallback , useMemo 등 비슷한 기능들이여서 정확히 어떤 용도인지 잘 몰랐다. 그래서 이참에 한번 글을 읽어 보았다. 이 부분은 React Native 에서도 똑같이 적용된다. 크로스 플랫폼에서 처음 접했으며 이걸 토대로 공부해 나아가서 React 로 넘어가게 된 것이다. React Native 는 크로스 플랫폼으로 간단한 앱을 2가지 OS 로 하고 싶을땐 정말 좋은 언어이지만 깊이 들어가면 어쩔 수 없이 네이티브 코드를 건드려야 한다 그래서 나는 React Native를 하되 AOS, SWIFT 도 같이 공부하.. 2024. 6. 9. Node.js 파일 업로드 Node.js 로 파일 업로드와 관련한 내용을 찾아보았다. 노드로 백엔드 구축하는데 이번이 처음이기에 Java로 구축한 부분과 사뭇 많이 달랐다. 간결하고 속도가 빠르다고 느껴졌다... 그냥 느낌인가?? Multer 에 대해 알아보도록 하자 Multer Multer는 Node.js 환경에서 파일 업로드를 처리하기 위한 미들웨어야. 주로 Express 프레임워크와 함께 사용되며, 사용자가 서버에 파일을 업로드할 수 있도록 도와주는 역할을 해. Multer는 multipart/form-data 형식의 요청을 처리하고, 업로드된 파일을 디스크에 저장하거나 메모리에 유지할 수 있도록 설정할 수 있어.주요 기능:파일 저장: 사용자가 업로드한 파일을 서버의 특정 디렉토리에 저장할 수 있어.파일 이름 설정: 업로.. 2024. 6. 9. springboot https 적용기 🚀 Spring Boot에서 HTTPS 적용하는 방법Spring Boot 애플리케이션을 HTTPS(SSL/TLS)로 실행하려면 SSL 인증서를 설정하고 HTTPS를 활성화해야 해.주로 Self-Signed Certificate(개발용) 또는 Let's Encrypt/정식 인증서(운영용)를 사용해. cetons 환경에서 springboot jar 파일로 업로드 하고 난 후 https ssl 적용하려고 했다.다른 서버에서 서버로 cors 문제를 해결하기 위해서 nginx 와 ssl .p12 그리고sudo semanage port -l | grep http_port_t이 명령어로 허용가능한 포트를 확인 후 해당하는 포트로 톰캣 포트로 지정했다. nginx 에서는 당연히 url 분기처리로 해당 로케이션에 .. 2024. 6. 5. Springboot_ Redis SSE 작업 실시간으로 데이터 주고 받으면서 사용자들에게 좋은 경험을 만들어 주고 싶었다.예를 들면, SNS 에서 누가 내 게시물을 좋아요 할때 바로 알림이 뜨게 하는 기능이다.그래서 Socket , WebSocket , Kafka , SSE 등 여러가지 양방향, 단방향 통신 기능을 찾아보게 되었고 우선 Redis를 이용한 SSE 를 선택했다.서버기준에서 클라이언트 단방향 통신이여서 불필요한 데이터 교환을 줄일 수 있었고, 클라이언트에서 딱히 서버쪽으로 보낼 데이터도 없었기 때문에 적합하다고 생각했다. 그럼 우선 Redis 의 SSE 에 대해서 알아보도록 하자 ! 🟢 1. SSE(Server-Sent Events)란?SSE는 클라이언트가 서버와 지속적인 연결을 유지하면서 이벤트를 수신하는 방식이야.브라우저에서 Ev.. 2024. 6. 2. 이전 1 ··· 3 4 5 6 7 다음 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 728x90
