본문 바로가기

WEB

(9)

OG(오픈그래프) 이미지를 공연 포스터로 동적으로 설정하고 싶다면? 안녕하세요! WEB 김채현입니다. 티켓 사이트에서 공연 페이지를 공유할 때는 공연의 포스터가 공유가 되는 것이 일반적인데요,비트는 공연 페이지를 공유해도 BEAT 이미지가 보여지고 있습니다.이유는 바로 제가 index.html을 아래와 같이 작성했기 때문입니다.React는 SPA로 CSR방식으로 렌더링을 하기 때문에 하나의 index.html을 두고, 자바스크립트를 활용하여 데이터만 변경됩니다.공통적으로 적용되는 index.html에 OG 이미지를 "og_img.png"로 지정해주었기 때문에 카카오톡에서 페이지를 공유할 때 모든 페이지에서 항상 동일한 BEAT 이미지나 제목이 표시되는 문제가 발생하고 있었습니다. 그렇다면 어떻게 동적으로 각 공연에 맞는 OG를 설정할 수 있을까요? 해결 방법은 바로 r..

구글 애널리틱스(GA) 도입해서 사용자의 유입을 알아보자! 안녕하세요! WEB 정도영입니다!오늘은 구글 애널리틱스를 도입해서 저희 서비스를 이용하는 사용자들의 유입을 알아보겠습니다! 1. Google Analytics 계정 생성1. 구글 Google Anayltics(https://analytics.google.com/analytics/web)에 접속합니다.2. 새 계정 이름을 기입합니다!작성 후, 스크롤을 내리고 다음 버튼을 클릭합니다.3. 속성 이름을 기재하고, 시간대, 통화를 설정합니다.다음 버튼을 클릭합니다.4. 업종 카테고리와 비즈니스 규모를 선택합니다.5. 비즈니스 목표를 선택합니다.6. 웹을 클릭 후, 웹 사이트 URL을 기입하고, 스트림을 생성합니다. 2. 내 웹사이트에 추적코드 추가추적코드를 설치하기에 앞서 추적코드에 대해서 알아보겠습니다. 2...

프론트엔드에서 production 서버와 development 서버 분리하기! 안녕하세요! WEB 정도영입니다!오늘은 저희 비트의 프론트엔드에서 production 서버와 development 서버 분리하기에 대해서 작성해보겠습니다.. ㅎ 저희 비트는 현재 사용자가 존재하는 서비스이기 때문에, 서비스를 배포한 후 배포 환경에서도 이상없이 잘 동작하는지, 확인할 필요가 있었고, 이에 따라서 서비스를 기획할 때 부터, 다른 파트들과 얘기해서 개발(테스트) 서버를 만들기로 결정했습니다! 그래서 저희는 애초에 도메인을 구입할 때 2개를 구입했는데요!먼저 메인 서버(production) 도메인은 https://www.beatlive.kr/ BEATBE AT WHERE YOUR HEART BEATSwww.beatlive.kr 그리고 개발(테스트) 서버(development) 도메인은 http..

캐러셀... 너 뭔데 나를 이렇게 힘들게 해... 비비비상... 감자 윤신지... 메인 페이지 캐러셀을 담당하다!!.... 우당탕탕 캐러셀 일기 시작합니다. 안녕하세요! 메인 화면과 예매 조회 페이지 개발을 맡은 윤신지입니다. 🐤 저는 감자 개발자인데... 메인 페이지가 확장될 여지도 많고, 저같은 감자 개발자에게 적절한 챌린징 요소가 있다고 생각하여 메인 페이지를 하고 싶다고 어필을 하게 되었어요. 🫶 덕분에 메인 페이지를 맡게 되었습니다~~ 햄버거바도, 플로팅 버튼도 예상치 못하게 저를 힘들게 하였지만 개발 전 저에게 가장 걱정되는 부분은 롤링배너라고도 불리는 캐러셀이었습니다! 😢 물론 이전에 진행한 작은 프로젝트에서 캐러샐을 라이브러리 없이 구현한 경험이 있었지만, BEAT의 캐러셀과는 조금 다른 방식으로 동작하기도 하였고 모바일 뷰에서 ..

상태 관리 라이브러리 (Jotai vs Zustand) 프로젝트를 진행하기 전에, 상태 관리 라이브러리를 선택하기 위해 작성하게 된 아티클입니다.비교적 최신 라이브러리를 사용해보고 싶었고, 처음에는 Recoil도 언급되었으나 Recoil은 메타에서 개발했음에도 불구하고 업데이트가 많지 않아 장기적으로 가져갈 프로젝트에서는 부적합하다는 판정을 내렸습니다.따라서 저는 Jotai와 Zustand 중 어느 라이브러리를 도입할 지 고민했습니다. (둘다 타입스크립트를 기반으로 제작되었습니다.)npm trendsRedux는 2015년에 개발된 라이브러리 답게 여전히 많은 사용률을 자랑하네요.Zustand는 2019년에 출시된 라이브러리이고, Jotai는 2020년에 출시된 라이브러리입니다.Zustand 가 더 빨리 출시된 것이 이유인지, Jotai보다는 약 3배 가량 더..

못말리는 Input 달래주기 2편 (이모지 입력) 안녕하세요 WEB 김채현입니다! BEAT는 대학생 공연 동아리들이 타겟층이기 때문에 공연명, 소개, 유의사항 등에 이모지가 들어갈 수 있다고 생각했습니다.그런데 이모지를 입력하면 이슈가 발생했는데요...🥹🥹 ⚠️ 이모지는 한 글자가 아니다. 글자수가 5로 되어야 하는데 이상하게 이모지마다 글자수가 다르고 심지어 이모지 하나에 11을 차지하기도 했습니다. 이유가 무엇일까요?이모지는 유니코드에 포함되어 있습니다. 유니코드 평면 중 다국어 보충 평면(SMP)에 포함되어 있는데이 평면에서 U+1F000 ~ U+1F9FF 영역에 이모지가 위치해있습니다.하지만 모든 이모지가 이 유니코드 평면에 존재하지는 않습니다.이모지에는 여러 유니코드 문자가 결합되어 하나의 이모지를 표현하는 이모지 시퀀스 (Emoji Seq..

비트에서의 React-query 사용해보기! 안녕하세요! WEB 정도영입니다.저는 '간편하게 소규모 공연을 등록하고, 관리할 수 있는 티켓 예매 플랫폼'인 비트를 개발하고 있습니다! 저는 비트라는 서비스를 통해서 일상 생활 속의 불편함을 해결하고, 더 나아가 많은 문제들을 해결하고 싶습니다. 또한, 이 서비스를 통해서 사용자를 만나고, 불편함을 개선하는 과정을 기록하려고 합니다! 저는 이번 프로젝트를 통해서 React-query 의 캐싱에 대해서 많이 배우게 되었는데요! 예전에 velog에 React-Query와 관련된 아티클을 쓸 때에는 조금 이론적으로 많이 알게 되고, 간단한 실습도 진행하였는데, 프로젝트를 통해서 실제로 사용하는 경험은 저도 처음이었습니다! 그리고, 저는 리액트 쿼리를 정말 이해하는데 많은 시간이 걸렸는데요,,, 처음에는 왜..

못말리는 Input 달래주기 1편 (숫자 입력) 안녕하세요! WEB 김채현입니다.BEAT는 공연 정보, 공연진 정보, 예매 정보 등 다양한 정보를 입력해야 하기 때문에 Input 컴포넌트가 많이 쓰이는 서비스이고, Input 공통 컴포넌트 제작을 맡게 되었습니다. 입력하는 항목들이 가격, 수량, 이름 등 다양한 종류가 있어서 `filter`를 `prop`으로 주어서 각 항목에 맞게 필터링을 하도록 구현했습니다. // 값 입력될 때 const handleOnInput = (e: ChangeEventHTMLInputElement>) => { const inputName = e.target.name; let inputValue = e.target.value; if (filter) { inputValue = filter(inputV..

이전 1 2 다음

티스토리툴바