본문 바로가기

분류 전체보기

 (265)
[React] 스켈레톤 로딩이란? 스켈레톤 로딩(스켈레톤 스크린)이란? 스켈레톤=뼈대 페이지 콘텐츠가 완전히 렌더링되기 전에 나타나는 화면, 최종 콘텐츠가 제자리에 로드되기 전에 페이지 구조의 윤곽을 나타내는 연한 색상의 배경, 선 및 텍스트로 구성 대표적인 사이트: 유튜브 아래 연회색 화면 처럼 썸네일 화면이 뜨기전에 자리잡고 있는 스크린 Q. 무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? 스켈레톤 화면을 다 사용하는 것이 올바를까? 이것에 대한 답은 카카오 에서 찾을 수 있었다. Progress Indicator에 대한 UX 리서치 세계적인 UX 리서치 그룹 닐슨 노먼은 Progress Indicator에 대한 중요성을 강조하며 아래와 같은 주요 지침을 이야기 하였습니다. (Progress Indicator: 로딩 ..
[css] 광원효과, glow 효과 css style 참고사이트 https://singun11.tistory.com/111 [TIL] box-shadow로 광원 효과처럼 보이네? 요즘 그냥 Github 페이지로 배포하는데 되게 되게 편해보여서 Github 페이지를 이용해서 여러개를 배포해보고 있었다.. 그러다가 오늘은 css-animation-study라는 레포를 만들고 animation 스킬들을 공부해 singun11.tistory.com box-shadow: 0 0 1px #dee9f19c, 0 0 2px #dee9f19c, 0 0 3px #dee9f19c, 0 0 4px #dee9f19c, 0 0 5px #dee9f19c, 0 0 6px #dee9f19c, 0 0 7px #dee9f19c, 0 0 8px #dee9f19c, 0 0 9px #dee9f19c, 0 ..
[React] react-chartjs-2 라이브러리 사용방법 https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2 React components for Chart.js react-chartjs-2.js.org 리액트 차트 라이브러리로 사용할 것을 고민중, 자바스크립트 기반인 chartjs를 React로 쓸 수 있는 react-chartjs-2 라이브러리가 있다고 하여 이것을 사용하기로 했다. React 스러운 라이브러리 중에서 고민했다. Nivo는 다 좋은데..아쉽게도 혼합된 차트를 제공하지 않아서 일단 패스, D3는.. 진입장벽이 느껴졌고, Apexcharts, Recharts 도 마음에 들었으나 UI적인 부분에서는 Chartjs가 더 맘에 들어서 선택했다. 다양한 차트 라이브러리 추천은 참고사이트..
[React] T Map API (1) : 가입하기 도보 경로의 시작과 끝에 대한 라인이 그려지는 화면을 구현하고 싶었다. 도보 경로는 티맵 API를 사용하여 구현하려 한다. ▼ 공식사이트 Guide | T MAP API tmapapi.sktelecom.com ▼ 앱 사용 가이드 앱 사용하기 1) 마이페이지로 이동하기 SK open API 사이트에 로그인합니다.로그인 후 좌하단의 ❶프로필이나 ❷마이페이지 버튼을 눌러서 마이페이지로 이동합니다. 2) 앱 만들기 마이페이지에서 앱 메뉴를 선 skopenapi.readme.io 1.가입 개인회원으로 가입(나는 핸드폰으로 기존 T 아이디가 있어서 기존꺼 이용) sk open API 아래 링크 들어가기 SK open API SK텔레콤 데이터와 시각화 가공을 지원 받을 수 있는, 데이터 바우처 사업 에 대해서 알아보..
[React] 조직도 라이브러리: React Google Charts(Org Chart) React를 사용해 조직도를 구현하고자 했다. 조직도에 들어갈 내용은 프로필 이미지와 텍스트. 다른 라이브러리(react-d3-tree)를 사용하고자 했는데 텍스트만 적용되고 이미지가 안들어가졌다. 그래서 Google Charts로 진행하여 원하는 대로 UI를 구현할 수 있었다. Org Chart | React Google Charts Example of org chart in react-google-charts. www.react-google-charts.com 1. 설치 npm i react-google-charts npm i --legacy-peer-deps react-google-charts //의존성 충돌나서 이거로 설치함 2. import import { Chart } from 'react-g..
[React] Email.js 를 사용하여 Form 이메일 전송하기 Email을 form을 통해 전송하고자 한다. 아래는 공식 사이트이다. 공식사이트 Send email directly from your code | EmailJS No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com React 코드 참고 React | EmailJS EmailJS integration with React www.emailjs.com https://dashboard.emailjs.com/ Send email from Javascript - no server code require..
[React] .jsx 생략하고 import시 찾을 수 없다는 오류 react 팀 프로젝트 중 원래 파일 뒤의 .jsx 를 생략해도 import 되었는데, 오류가 나는 현상이 발생했다.(eslint) Unable to resolve path to module './pages/Login/index' import/no-unresolved Line 4:19: Missing file extension for "./pages/Login/index".. .eslintrc.js 에서 settings를 아래와 같이 추가하여 해결 (TS안쓸경우는 .ts,.tsx 생략하면됨) .. rules: {}, settings: { "import/resolver": { node: { extensions: [".ts", ".tsx", ".js", ".jsx"], }, }, }, cra + eslint..
[React] .env 개발서버와 실서버 분리하여 환경설정하기 원래 npm start로 이용하고 있던 중 API 서버가 개발 서버와 실서버로 분리되기 때문에 이를 구분해 환경설정을 하고자 했다. 1. 환경변수를 다르게 설정 (.env 파일) env 파일 2개를 생성함 .env.development //개발 .env.production //실서버 각 API를 통신하는 URL을 ~~만 다르게 작성(.dev 서버와 실서버는 다르기 때문) REACT_APP_API_URL='~~' 2. env-cmd 를 설치( 환경변수에 따라 설정 적용) npm i env-cmd 3. package.json 에서 start, build 설정 "scripts": { "start": "env-cmd -f .env.development craco start", "start:dev": "env-c..

티스토리툴바