무한 스크롤에서 사용되는, 스크롤이 맨 아래로 왔을 때 moreData를 호출하는 로직 $(document).ready(function(){ //window는 "#searchPopup"등 으로 스크롤 주체로 변경가능 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var innerHeight = $(this).innerHeight(); var scrollHeight = $(this).prop('scrollHeight'); if(scrollTop + innerHeight >= scrollHeight) { moreData(); } }); }); 스크롤 주체가 어떤 영역인지 모를땐, 스크롤을 내리면서 $('#searchPopup').scro..
로그인이 필요한 서비스에 접근 시 비로그인일 경우 로그인 페이지로 이동이 될 것이다. 그리고 사용자 편의를 위해 로그인 후 이전 페이지로 돌아와 원래 하려던 작업을 할 수 있도록 소스 구현이 필요한데 아래와 같은 소스가 자주 사용된다. location.href = "/login?returnUrl="+location.href; 이렇게 사용할 경우 손쉽게 처리가 가능하지만 한 가지 문제를 직면할 수 있다. 만약 location.href의 값이 "/event/view?mbrId=abc&addr=korea&gender=M" 위와같이 되어 있고 위 정보들이 모두 필요하다면 서버에서 returnUrl은 mbrId=abc까지만 받아지고 그 뒤에 주소와 성별은 짤리게 되는 현상이다. 이는 뒤의 값을 다른 파라미터로 인..
앱에서 에 붙여넣기 시 텍스트 카운트가 안되는 현상이 있습니다. 이와 같은 이유로는 보통 PC환경에서는 keyup이나 blur 이벤트로 실시간 텍스트 카운트 처리를 하게 되는데 모바일 환경에서도 같은 소스를 적용시키기 때문입니다. keyup이기때문에 아무래도 모바일의 키패드가 나와서 눌러줘야 keyup이벤트가 발생하는것으로 보이며 이와 관련해서는 다른 처리가 필요합니다. 그것은 keyup 이벤트를 미리 구현해 놓고 bind 함수를 통해서 keyup 이벤트를 트리거하여 처리가 가능합니다. $("#inputTextarea").on('keyup', function(e) { e.preventDefault(); var content = $(this).val(); $(".inputWrap .count").text(..
서버, 클라이언트 사이드 렌더링이란? 서버 사이드 렌더링은 UI를 서버에서 렌더링 하는 것을 의미합니다. 서버 사이드 렌더링을 구현하면 사용자가 웹 서비스에 방문 했을 때 서버쪽에서 초기 렌더링을 대신 해주는 것 입니다. 그리고 사용자가 html을 전달 받았을 때 그 내부에 렌더링된 결과물이 보입니다. 반대로 클라이언트 사이드 렌더링은 브라우저에서 모두 처리하는 것이죠. 즉, 자바스크립트를 실행해야 우리가 만든 화면이 사용자에게 보입니다. 처음에는 빈 페이지로 시작하여 자바스크립트가 실행되고 리액트 컴포넌트가 렌더링되면서 화면이 보이는 것입니다. 서버 사이드 렌더링의 장점 일단 구글, 네이버, 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 ..
리액트 앱은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트가 여기저기서 필요한 데이터가 있을 때 주로 최상위 컴포넌트인 App의 state에 넣어서 관리합니다. 만약 C 컴포넌트가 전역 상태를 업데이트 시키는 기능을 담당한다면 App에서는 const [value, setValue] = useState('hello'); 생성하여 App > A > B > C 순으로 전달해야 합니다. 이렇게 여러 번에 거쳐서 전달하게 될 경우 유지 보수성이 낮아질 가능성이 높기 때문에 Context API를 사용하여 Context에 만들어서 단 한 번에 원하는 값을 받아와 사용할 수 있습니다. import { createContext } from "react"; const ColorContext = create..
Route 사용하기 실습할 프로젝트를 생성하고 해당 프로젝트 안에서 react-router-dom을 설치하자. yarn add react-router-dom 그리고 라우터를 적용할 때는 src/index.js 파일에서 BrowserRouter 컴포넌트로 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줍니다. import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWor..
SPA란? Single Page Application 즉, 한 개의 페이지로 이루어진 애플리케이션을 의미합니다. 전통적인 웹 페이지는 여러 페이지로 구성되어 있습니다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 주었습니다. 이렇게 사용자에게 보이는 화면은 서버측에서 준비 했습니다. 전통적인 웹은 보통 동적인 html을 생성해주는 템플릿 엔진을 많이 사용했죠. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 새로운 화면을 보여주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있습니다. 트래픽이 너무 많이 나올 수 있고, 사용자가 몰려서 높은 부하가 쉽게 걸릴 수도 있습니다..