분류 전체보기

React | Swiper.js를 사용하여 이미지 슬라이드 구현하기

Preview swiper 기본 세팅 및 무한 루프 기능 swiper.js 설치 npm i swiper --save 서버에서 받아오는 데이터 처럼 .json 형태의 파일을 fetch로 가져와 slide를 map으로 돌리려 합니다. // swiper_event.json { "data": [ { "img": "https://images.unsplash.com/photo-1661956603025-8310b2e3036d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80", "url": "https://www.naver.com/" }, { "img": "https://images.unspl..

React | 모바일, 데스크톱기기 구분하여 url 리다이렉트 시키기

이슈 도메인을 PC용, 모바일용으로 분리하면서 모바일 기기에서 PC 도메인으로 접속 시에 css가 깨져 보이고, pc버전과 같은 api를 쓰기 때문에 리다이렉트 하는 주소를 맞춰주어야 하는 이슈가 생기면서 모바일 기기로 PC url을 접속하면 모바일 url로 리다이렉트를 시켜야 하는 필요성이 있었습니다. 고정 메인 도메인으로만 이동하는 것이 아닌, path와 query도 동일하게 변경되어야 했습니다. 목적 모바일 기기에서 PC 도메인에 접속 시, 모바일 도메인으로 변경하기. (PC 프로젝트에서 작업) https://domain.com/search?login=success ⬇️ https://m.domain.com/search?login=success 방법 src> index.tsx 에서 useAgent를..

React | javascript 로 받은 form형태 react form으로 변환 하기 (에스크로 인증마크 설정)

전달받은 코드 회사에서 프로젝트가 1차 마무리 될 쯤, 운영팀 쪽에서 에스크로 인증 마크를 푸터 하단에 넣어달라는 요청을 받았습니다. 단순히 인증마크 이미지만 추가하면 되는건가 생각했는데, 전달 받은 내용엔 자바스크립트가 포함이...🧐 전달받은 코드를 간단하게 살펴보자면, 인증마크 버튼을 누르면 전달받은 키를 은행쪽의 주소로 전달하게 되고 그 전달받은 값을 윈도우 팝업형식으로 띄어주는 코드네요. index.html 파일에 전달받은 코드 그대로 복붙하게 되면 결과를 바로 볼 수 있지만 저는 원하는 위치에 삽입해야했고 react에 그대로 적용했을때는 타입에러가 나서 그대로 사용할 수 없었기 때문에 react form 형식으로 바꿔보려 했습니다. React form const key = "전달받은키" cons..

React | 간단하게 public 경로의 파일 (소개서, 템플릿) 다운로드

1. public 경로에 파일 넣기 2. a태그 추가 회사소개 💡 로컬에서는 잘 나오는데 배포시 다운로드 파일이 열리지 않을 때, 다운로드 파일의 용량이 1KB로 나올 때 = aws로 배포되는 프로젝트라면 아마존 세팅값을 확인해보아야 합니다.

React SEO | Sitemap에 동적페이지 추가 및 배포시 자동생성하기

프로젝트에 사이트맵 생성하기 사이트 맵 확인 하기 robots.txt 설정하기 ✋🏻 잠깐! 들어가기 전에... 이 글은 react-router-sitemap 등의 사이트맵 라이브러리를 사용하지 않고 javascript 파일로 사이트 맵을 생성합니다. 정적인 페이지와 API로 데이터를 받아 동적인 페이지를 함께 사이트맵에 입력하는 스크립트입니다. ✅ 정적인 페이지만 사이트맵에 생성하고 싶다면 밑에 글을 참고해주세요. https://3d-yeju.tistory.com/70 React SEO | Sitemap과 robots.txt 생성하기 사이트맵이란? 사이트 맵(Sitemap.xml) 파일 형식 프로젝트에 사이트맵 생성하기 사이트 맵 확인 하기 robots.txt 설정하기 ✋🏻 잠깐! 들어가기 전에... 이..

VS Code | git branch 사라졌을 때, source control 레파지토리 연결 끊길 때 해결 방법

git에 올라간 작업들을 vscode에 연동하여 작업을 주로 하는데 아~~주 가끔 희박한 확률로 github 저장소와 연결되지 않는 것처럼 뜨는 일이 있다. (소스컨트롤에 변경사항이 적용되지 않을 때) 그런데 막상 터미널로 git log 나 git branch를 치면 아주 잘 연동이 되어있다고 보여주는데 vs code나 컴퓨터를 껐다켜도 똑같은 상황 🤦🏻‍♀️ 다시 돌아오는 것도 정말 랜덤으로 돌아오는 것 같은데 정확한 해결 방법을 찾지 못하다 이번에 찾게 되어 공유하고자 한다. 해결 방법 1. extension 에서 @builtin git를 검색한다. 2. Enable이라고 나오지만 Disable을 눌러주고 다시 Enable을 눌러준다. 해결 🧚🏼‍♀️ 작업표시줄에도 잘 뜨고, 소스컨트롤에서도 잘 연동..

GitHub | private 저장소의 작업 잔디에 추가하기

평일 5일 동안은 꼭 1일 1커밋을 실천하여 잔디밭을 채워놔야지 하는 생각으로 1년 가까이 잔디밭을 꾸준히 가꾸어왔다. 요새 git 레파지토리를 정리하면서 다른 계정으로 내 작업 계정 프로필을 들어가보았는데 이게 왠걸,, 낯선 비어있는 나의 잔디밭이 날 반겨주었다 😭 알고보니, 기본 설정은 public 저장소에 있는 잔디만 보여지기 때문이라고 한다는 것을 알게되었고, private 저장소에서 커밋을 많이 했었기에 모두 같이 보여지는 옵션을 찾아보았는데 의외로 정말 간단했다! 해결 방법 1. 잔디밭 위에 있는 Contribution settings 옵션창 클릭 2. Private contributions 선택 돌아온 나의 잔디밭! 🌱

javascript | Cookie 설정하기, value 가져오기, 삭제하기

오늘 하루 보지 않기 기능을 구현할 때, Local Storage나 Cookies를 사용합니다. Local Storage는 간단하게 key-value 형식으로 저장할 수 있지만 Cookies를 사용하게 되면 만료기간을 설정 시에 저장할 수 있어서, 만료기간이 지나면 자동으로 쿠키가 삭제되기 때문에 더 유용하게 쓸 수 있습니다. 🍋 구현 방법 저 같은 경우에는 프로젝트를 진행할때 쿠키 관련 스크립트를 utils 폴더에 넣어놓고 사용합니다. setCookie 함수에서는 쿠키이름, 쿠키의 value, 만료일자(1일, 2일, 3일...) , getCookieValue와 deleteValue 함수의 인자로는 앞단에서 설정한 쿠키의 이름만 설정해주면 됩니다. const setCookie = (name: string..

jQuery | 주요 기능 정리 (css, 태그, 이벤트, 모달)

CSS 컨트롤 css 속성 지정하여 추가하기 $('#searchBtn').css('display', 'none'); class 추가 하기 , 삭제 하기 $('#searchBtn').addClass('disabled-btn'); $('#searchBtn').removeClass('disabled-btn'); class 가 있는지 없는지 확인 $('#searchBtn').hasClass('on') // true & false 로 반환 태그 속성 컨트롤 a 태그 href 변경하기 마이페이지 $('#mypage').attr( 'href', `/mypage?offset=0&limit=20` ); a 태그의 href 제거하기 (클릭 disabled) $('#mypage').removeAttr('href'); but..

Typescript 에러 | 객체의 key를 변수(객체키)로 접근 하기

'string' 형식의 식을 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. 'string' 형식의 매개 변수가 포함된 인덱스 시그니처를 찾을 수 없습니다.ts(7053) 게시판 기능을 구현 중에 카테고리 - 세부카테고리를 상수 데이터로 미리 정의하고, 사용자가 선택한 카테고리(writeBody.board_type)값에 맞는 세부카테고리를 보여주고자 했습니다. 객체명[변수명] 이렇게 접근하면 될 줄 알았지만 타입스크립트는 호락호락하지 않았고 빨간줄을 띄며 에러를 또 내뱉엇습니다. 이 에러는 상수객체에 타입을 지정해주지 않았기에 접근할 수 없다는 에러였으며, 타입을 지정해주면 해결할 수 있었습니다. 🚧 해결 방법 interface BoardDetailType { [props..

Typescript 에러 | 모듈 '~~~~'에 대한 선언 파일을 찾을 수 없습니다. 해결 방법

모듈 'quill-image-resize'에 대한 선언 파일을 찾을 수 없습니다. '/Users/quill-image-resize/image-resize.min.js'에는 암시적으로 'any' 형식이 포함됩니다. 해당 항목이 있는 경우 'npm i --save-dev @types/quill-image-resize'을(를) 시도하거나, 'declare module 'quill-image-resize';'을(를) 포함하는 새 선언(.d.ts) 파일 추가ts(7016) 타입스크립트에서 npm install 또는 yarn add로 모듈들을 설치하고 import해서 사용하려고 할 때 모듈 '~~~'에 대한 선언 파일을 찾을 수 없습니다. 라는 에러가 뜨는 경우가 종종 있습니다. 이러한 오류는 대게 모듈을 만든 개..

React | 페이스북 픽셀 연결하기 (React Facebook Pixel)

✋🏻잠깐! 들어가기 전에 React-pixel 라이브러리를 사용하여 구현하였습니다. 광고를 통해 들어온 사람들만의 행동을 따로 측정할 수 있도록 하였습니다. 픽셀의 고급 매칭 기능은 자세히 다루지 않습니다. 앞 부분은 설명입니다. 바로 구현하길 원하시는 분은 React Facebook Pixel - 실제사용법 부터 봐주세요 페이스북 픽셀이란? 페이스북 픽셀은 잠재 고객이 광고를 클릭한 이후에 웹사이트에 도착해서 어떤 특정 행동을 하는지 알려 줍니다. 페이스북 픽셀을 사용함으로써 이 타겟을 기반으로 광고 효율을 높일 수 있습니다. 픽셀로 사용자들의 어떤 행동들을 확인할 수 있을까요? 전반적으로 페이지를 보거나, 상품을 구매하거나 문서를 등록하는 행동들을 통계로 확인할 수 있게됩니다. 버튼을 클릭하는 것으로..

React SEO | Sitemap과 robots.txt 생성하기

사이트맵이란? 사이트 맵(Sitemap.xml) 파일 형식 프로젝트에 사이트맵 생성하기 사이트 맵 확인 하기 robots.txt 설정하기 ✋🏻 잠깐! 들어가기 전에... 이 글은 react-router-sitemap 등의 사이트맵 라이브러리를 사용하지 않고 사이트 맵을 생성합니다. Why? react sitemap 를 검색했을 때 나오는 글들을 참고하여 구현하려다가 오랜시간을 들여 시도해도 sitemap.xml 이 생성되지 않아 직접 javascript로 구현하였습니다.🤦🏻‍♀️ 사이트맵이란? 💡 검색 엔진 크롤링 로봇에게 웹 사이트에서 크롤링 해야 할 URL을 전달하는 역할 사이트 맵 파일은 해당 사이트의 URL 모두를 XML 파일 형식으로 포함하는데 웹 사이트 운영자는 각 URL과 추가 정보로서 이 ..

블록체인 시대, 플랫폼 가치에 주목 - 미래에셋대우 리포트

I. Investment Summary 블록체인 게임은 시대의 조류 21년 블록체인 게임의 전체 게임 시장 침투율은 2.3%에 불과하지만 25년까지 19.3%로 상승할 전망이다. 유저 친화적 수익 구조로 변화 유저가 컨텐츠 생산자로 인정됨에 따라 플랫폼과 게임사 중심의 수익 구조가 유저 중심의 수익 구 조로 변화한다. 게임사로부터 아이템을 구매하는 인앱 결제가 감소하고 유저 간 NFT 거래가 메인이 된다. Top Pick (카카오게임즈, 위메이드) II. 블록체인 게임 시대로의 전환 게임 산업의 전환기 2000~2006년: 모바일 게임 태동기 2007~2011년: 스마트폰과 앱스토어의 등장 2012~2015년: for Kakao 열풍 2016~2021년: PC 게임의 모바일화(MMORPG) 2022년 현..

Javascript | 문자열, 글자 마스킹하는 함수

유저들의 랭킹을 보여줄 때, 닉네임을 그대로 노출하지 않고 앞에서부터 2글자만 노출한 뒤 뒷글자는 모두 *로 마스킹해야하는 기능을 구현하여야했다. 🍋 구현 방법 간단하게 닉네임의 길이별로 조건을 걸어주고, 정규표현식을 사용하여 노출하는 글자 이후 문자는 모두 * 로 대체해준다. 나는 3글자 이상의 닉네임이 들어올때에는 2글자 이후의 모든 문자는 *로 대체했고, 2글자 닉네임이 들어올때에는 1글자만 문자만 대체, 1글자의 닉네임이 들어오면 그대로 노출시켰다. const maskingName = (value) => { if (value.length === 2) { return value.replace(/(? 2) { return value.replace(/(?

React 에러 | Type Error: Cannot read properties of undefined (reading '0')

TypeError: Cannot read properties of undefined (reading '0') API 통신 전에 Mock data로 작업하는 중에 number 형식의 배열을 가져와 React JSX 형식의 텍스트로 요소 하나씩 뿌려주는 부분에서만 에러가 났다. 단순한 number나, string 형식은 문제없이 보이는데 arrayData[0], arrayData[1] 이렇게 요소 하나씩 접근하는 부분에서 undefined 에러가 났다. 🚧 받아오는 데이터 형식과 JSX 문제는 "pair_profit" 배열이다. 🤦🏻‍♀️ { "data": { "id": "1", "max_price": 51200000.333, "min_price": 40000000.333, "pair_profit": [0...

React | \n으로 받은 string data를 <br/> 처리하여 줄바꿈하기

string 형식의 데이터를 JSX문법으로 렌더링 할 때 제목, 날짜 등 한 줄짜리 string은 문제없이 출력이 된다. 그렇지만 본문의 내용이든지, 채팅할 때 줄 바꿈 처리는 어떻게 렌더링 해야 할까? JSX문법은 \n 을 줄바꿈으로 읽지 않고 string 형식으로 그대로 출력을 한다. 불러오는 데이터 자체가 문자열이니 \n 을 줄바꿈의 표시라고 읽는것도 말이 안되는 것 같기도 ... 🧐 🍋 받아오는 데이터 형식 react에서는 수많은 데이터의 양으로 반복되는 부분을 줄이기 위해 데이터 파일을 따로 만들어 map을 사용하여 불필요한 코드를 줄여준다. [ { id: 1, title: '첫번째 글', date: '2022-01-01', main: '새해입니다!\n모두모두 건강하세요.', }, { id: 2..

VS Code | Eslint, Prettier 적용 안될 때

에러 eslint(pretter/prettier) [6,10] 저장을 하면 줄바꿈, 문자 수정이 되어 코드가 예쁘게 저장이 되어야하는데, 저장도 안되고 오히려 에러 문구가 난다. 확장팩으로 두가지 다 설치하고 설정 파일도 생성하고 수정해줬는데... 해결법 VS code 설정으로 들어가 확인을 해주어야하는 부분들이 있다. Format on Save 체크 Default Formatter 확인 Prettier - Code formatter 으로 설정해준다.

React 초기 세팅, CRA 세팅하기 (Router v6 / styled-component)

node, npm 설치 CRA(Create-React-App) CRA Setting 라이브러리 설치 프로젝트 파일 , 폴더 수정 및 삭제 ESLint + Prettier node, npm 설치 node.js를 설치하면 npm도 함께 설치된다. 설치가 잘 되었는지 확인하려면 터미널을 실행시켜 node-v / npm-v 를 입력후 버전을 확인해준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org CRA(Create-React-App) 💡 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 (toolchain) 리액트는 UI 기능만 제공한..

AWS EC2에 웹 프로젝트 배포하기 (React)

EC2 인스턴스 생성하기 터미널에서 EC2 인스턴스에 접속하기 웹 프로젝트 배포 하기 웹 프로젝트 배포 확인 리액트로 만든 웹페이지를 로컬 호스트 주소가 아닌 누구든 볼 수 있는 url로 변경하기 위해서는 배포라는 작업을 해야 합니다. aws로 배포하기 위해서는 크게 s3 방식과 EC2 방식이 있는데, 기존 회사들은 s3 방식보다 EC2 방식을 많이 사용하고 있어 알아두어야 했습니다. 정리한 글은 가장 기본적이고 무겁지 않은 React 코드로 테스트하였기 때문에 프로젝트별 설정해야 하는 값이 다를 수 있습니다. ✅ 인터페이스가 많이 변경되어 22.12.04 자로 내용을 업데이트 하였습니다. EC2 인스턴스 생성하기 인스턴스 시작 aws에서 EC2를 검색한 후 EC2 대시보드에 위치한 인스턴스 시작을 누릅..