프론트엔드

[프론트엔드] REACT ROUTER-TUTORIAL 오류 수정

index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 1. 오류 원인 리엑트 라우터 설치 및 공부중 위와 같은 오류가 발생하였다. [React] A is only ever to be used as the child of element, never rendered directly. Please wrap your in ㅋㅋㅋㅋㅋㅋㅋㅋ 에러문구가 시키는대로 로 감싸주었는데도 해결 못하셔서 찾아오신분들 환영합니다. 'react-router-dom' 라이브러리가 버전 업데이트가 됬어요...! 의 매개변수 이름이 변경되었습 developer..

[프론트엔드] REACT 팝업창 만들기

회사에서 특정페이지에 팝업창을 노출하는 기능을 개발할 필요가 생겨서 팝업창을 만들게 되었다. 요구사항은 1. 페이지 진입 시 팝업창 노출 2. 팝업창 닫기 버튼 추가 3. 팝업창 내 이미지 노출 (이미지는 수시로 변경될 것으로 추측) 4. 오늘 하루 그만보기 추가 1번은 팝업창을 상시로 띄우면 되는 부분이고, 3번에 필요한 이미지 영역을 잡고서 팝업으로 보여줄 필요가 있었다. 2,4번은 동일하게 닫기 기능 + 쿠키 및 localStoarge 사용으로 로컬에서 팝업창 노출시간을 설정하면 된다. 나중에는 특정경로애서 유입되는경우에만 팝업을 띄워야하는 이슈가 있어서 팝업창을 커스텀하기 편하게 직접 만들기로 결정하였다; 1. 팝업창 만들기 팝업창을 만들기 위해서는 2가지 방법이 있다. 1. 직접 만들기 2. r..

[프론트엔드] REACT 프로젝트 초기환경 구성

1. 프로젝트 초기설정 이번에는 react 앱을 생성하고 실행하는 방법에 대하여 작성할 에정이다. 여기서는 yarn을 사용할 예정이다. 'yarn'이란 Facebook에서 만든 자바스크립트 패키지 매니저 yarn은 패키지와 모듈을 관라하기 위하여 페이스북에서 만든 라이브러리로 node-modules에 포함되는 모듈을 관리하기 쉽다는게 강점이다. 먼저 원하는 위치에 폴더를 생성하고 폴더에서 vscode를 연다. 2. yarn 설치 터미널 -> 새터미널 실행 아래의 명령어를 입력하자. $ npm install -g yarn react는 node 안에서 동작하기 떄문에 npm이 기본적으로 설치되어 있어야한다. npm install(설치) -g는 글로벌(전역) yarn을 설치한다는 의미이다. 3. create-..

[프론트엔드] React Project - GA API 개발

1. GA4/UA 태그 API 신규 개발 배경 구글 GA 태그에 대한 API 신규개발 내용울 정리하여 기술한다. GA태그는 NodeJs header 부분에서 호출하고 있는데 실제로 push 하는 클릭 태그를 변경해야하는 작업이 생겼다. 클릭 태그는 프로젝트(도메인)마다 공통으로 삽입되어있어서 프로젝트마다 태그를 수정 해야한다. 요청사항은 클릭태그 가상의 카테고리 -> 실제 카테고리 ID로 변경해달라는 내용이였다. 해당 카테고리를 수정하기 위헤서는 나중을 위해서도 GA 전용 API를 개발하고 REACT에 적용할 필요가 있었다. GA태그 API 백엔드 개발자와 협업하여 필요한 데이터를 제공받아서 REACT에서 호출하는 부분을 만들었다. API는 백엔드는 개발자와 협업하여 생성 후 REACT에서 APi를 호출..