토피넛라떼조아

CSR 방식의 React, 한 장의 html 리액트는 CSR(client-side-rendering) 방식의 웹 렌더링이 이루어진다.SPA(single-page-application)는 UX에 도움이 되지만 SEO 관점에서는 단점 투성이다.말 그대로 단일 페이지이기 때문에 HTML 한 장만 존재하기 때문에 메인을 제외하고 갈아끼우는 페이지들은 검색 엔진에 적용시키기 어렵다. SPA === CSR 이라고는 할 수 없지만 결이 비슷하기 때문에 특수한 작업을 하지 않는다면 거의 맞는 말이 된다. react는 SPA이자 CSR이다.CSR이면 SEO 관리가 힘들다.  아무튼 cra로 생성한 react 프로젝트는 SPA + CSR이기 때문에 가장 상위의 index.html에서 head를 관리하게 된다.저번에 og를..

모바일 웹에서 모달을 사용하면서 마주했던 문제에 대해 정리를 해두려 한다.두 가지 문제가 있었는데, 모달을 띄웠을 때 뒷배경이 스크롤 되는 문제와 뒤로 가기 시 브라우저가 닫혀버리는 문제이다. 스크롤 동작 막기뒷 배경이 스클로 되는 문제는 웹에서도 자주 다루기 때문에 간단하게 넘어가겠다. 이벤트 버블링으로 인해 스크롤 이벤트가 body까지 전달되어 스크롤이 되는 현상으로 body에서 이를 제어해주기만 하면 된다.{isOpen && } 예를 들어 open state를 통해 렌더되는 모달이 있다 가정한다. (handleModalOpen은 setOpen 제어 함수이다.)open이 true가 될 때 body의 스크롤 동작을 막아주고, false가 될 때 다시 열어주면 될 것 같다. useEffect(() => ..

카카오 맵을 쓰면서 커스텀해야 할 부분이 너무 많은 것 같다. 내가 고생했던 부분과 해결방법들에 대해 공유해보려한다. 난 간단한 기능만 넣을 생각이었는데 구현은 그리 간단하지 않았다.   일단 내가 원하는 기능을 정리하면 이랬다.내가 원하는 장소를 지도에 포함시키고, 마커로 표시한다.마커 위에 인포를 붙인다.모바일에서 동작하길 기대하기 때문에 맵의 이동은 막는다.(static형식의 지도)대신 맵 영역에서 기존 스와이프 동작은 유지한다.마커와 인포에 클릭 이벤트를 붙인다. 여기까지 봤을 때 굉장히 심플하다. 그냥 맵 넣고 공식 문서에서 제공된 소스로 뚝딱 해결할 줄 알았다. 난 리액트를 사용하여 개발했기 때문에 react-kakao-map-sdk를 사용했다." data-og-host="react-kakao..

이번에 내 모바일 청첩장을 React로 간단하게 웹을 제작하고 있다.그 중에 식장 지도를 카카오 맵을 이용해서 넣고 있었는데, 여기 사용되는 key를 env에 숨겨서 올렸다. // .envREACT_APP_KAKAOMAP_KEY={my kakao api key} 이렇게 루트에 .env를 만들어서 키를 넣어주고 .gitignore에 .env를 포함시켰다. 사실 api key는 스크립트에 들어가는 순간 노출될 수 밖에 없지만 이렇게 숨기는 게 암묵적인 룰이라 나도 넣어 봤다. // imdex.htmlhead 스크립트에 %REACT_APP_KAKAOMAP_KEY% 이렇게 넣어주면 .env에 등록된 환경변수를 넣어준다.   로컬에서 지도가 잘 동작하는 것을 볼 수 있다.(우측 상단 버튼은 새로고침을 위해 그냥 ..

프로젝트 과정 중 어드민 페이지를 담당하여 홈에 들어갈 배너를 업로드 하는 기능을 구현하였습니다. 기존에는 PC, Mobile 각 각 한 개의 배너만 업로드 가능하게 구현해두었는데, 운영사의 요청에 따라 많은 배너를 배치할 수 있도록 수정하는 과정에서 배너의 순서를 커스텀 할 수 있도록 했습니다. ux를 고려하여 드래그 앤 드랍 방식으로 편하게 배너의 순서를 바꿀 수 있도록 react-beautiful-dnd 라이브러리를 활용하였습니다. 기존 배너 업로드 방식 기존에는 사진 영역 클릭 or 이미지 드래그 방식으로 배너 업로드가 구현되어 있었고, pc, mobile 각각 한 개의 이미지만 업로드 할 수 있었습니다. 각 배너를 최대 10개까지 업로드 할 수 있도록 요청받아 새로 구현하게 되었습니다. 수정된 ..

함수형 컴포넌트는 클래스형 컴포넌트와 다르게 라이프 사이클 메서드가 없습니다. 그렇기 때문에 라이프 사이클 관리를 Hooks을 사용하여 하게 됩니다. 저번 포스팅을 통해 useEffect로 mount, unmount, update를 다루는 방법들을 배워봤는데, deps를 활용해 componentDidMount와 componentDidUpdate를 동시에 다루는 방법은 있지만 componentDidUpdate만을 다루는 방법은 소개하지 않았습니다. 2023.06.20 - [개발일기/Web] - [React] 리액트 클래스형 컴포넌트의 생명 주기 메서드(Life Cycle) [React] 리액트 클래스형 컴포넌트의 생명 주기 메서드(Life Cycle) 리액트 생명주기를 LifeCycle Method와 함께..

검색 기능을 구현하다보면 다양한 검색 방식을 사용할 수 있습니다. 그 중 검색 버튼, 엔터 키 등 트리거가 명확한 경우도 있지만, 입력을 마친 시점에 자동으로 검색이 진행되는 경우를 원할 수도 있습니다. 이때 입력할 때마다 검색이 된다면 원치 않는 검색어로 검색을 시도하기 때문에 쿼리 낭비가 심해질 수 있습니다. 이를 개선하기 위해 Debounce를 활용합니다. Input 입력 여기 단순한 Input이 있습니다. 해당 컴포넌트는 다음과 같이 Input 값이 변경될 때마다 onChange함수를 실행합니다. onChange함수는 상위 컴포넌트에서 검색을 요청할 때 사용합니다. 이렇게 구현한다면 입력할 때마다 검색을 실행할 수는 있습니다. 만약 토피넛라떼를 검색하고 싶어 입력을 했다 생각해보겠습니다. 이 경우..

파일 업로드를 할 때, Input태그를 활용하여 기존의 선택 방식이 아닌 영역을 지정해 drag & drop로 업로드하는 방법을 알아보겠습니다. Input과 Label 연결시키기 일단 파일을 업로드시킬 영역을 지정합니다. input 대신 사용할 커스텀 버튼을 만들 때 처럼 label을 활용하여 영역을 설정합니다. // Upload.tsx const Upload = () => { return ( Drag&Drop File Here // 첨부된 파일 리스트 ); }; export default Upload; input의 id와 label의 htmlfor을 연결시켜 주고 입맛에 맞게 css처리합니다. 이벤트 등록 useEffect를 활용해 이벤트 처리를 합니다. const handleDragIn = useCa..

일반적으로 많이 사용하는 react hook에 대해 알아보겠습니다. Hook Hook은 React v.16.8부터 새로 추가되었습니다. 함수형 컴포넌트에서도 life cycle을 효과적으로 관리하며 기존의 방식보다 직관적인 API를 제공합니다. 또한, 상태 관리 로직을 추상화 할 수 있는 장점도 있습니다. render porps이나 HOC와 같은 패턴으로 재사용 로직을 구현했을 당시에는 컴포넌트의 재구성을 강제하고 코드의 추적이 어려웠습니다. (wrapper hell) Hook을 사용한다면 컴포넌트마다 로직을 추상화하여 독립적인 테스트와 재사용이 가능합니다. 또한 계층의 변화없이 로직을 재사용할 수 있습니다. 그렇기 때문에 로직 기반으로 컴포넌트를 나눌 수 있어 함수 단위로 관리 할 수 있는 이점이 있습..

리액트 생명주기를 LifeCycle Method와 함께 알아보겠습니다. 생명 주기(Life Cycle) 클래스형 컴포넌트에서는 컴포넌트(클래스) 위주의 라이프 사이클을 갖게 되며, 컴포넌트가 생성, 업데이트, 제거될 때마다 특정 이벤트들이 발생하게 됩니다. Mount 컴포넌트의 인스턴스가 생성되고 DOM에 삽입될 때 다음과 같은 메서드가 순서대로 호출됩니다. constructor() 컴포넌트의 생성자 메서드로 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드입니다. constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick...