본문 바로가기
[js] 자바스크립트 코드 줄이는 방법 js 코드를 더 짧게 줄이는 몇가지 방법입니다. 자바스크립트 코드 축약 방법 1. or 조건문 (||) 2. and 조건문 (&&) 3. null, undefined, ' ' 체크 4. 삼항연산자 5. 숫자 형변환 1. or 조건문 (||) || 대신 includes()를 사용하면 끝없이 긴 조건문을 짧게 줄일 수 있습니다. before if (a === 'hi' || a === 'hello' || a === 'hallo') { code... } after if (['hi', 'hello', 'hallo'].includes(a)) { code... } 2. and 조건문 (&&) ?. 연산자인 optional chaining operator를 사용하여 객체의 속성값을 접근합니다. 속성 값이 없을 경우 u..
[react] axios headers authorization 추가 axios headers authorization 추가 방법입니다. 아무나 데이터 접근을 못하게 하기 위해서 headers에 token값을 추가하여 token값이 있어야 데이터를 불러오게끔 처리합니다. Bearer란 기본적인 의미는 정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스를 말합니다. axios.get axios.get(url, headers: { Authorization: `Bearer ${accessToken}` }) axios.post axios.post(url, data, headers: { Authorization: `Bearer ${accessToken}` }) 프로젝트에서 편하게 import 형식으로 사용하는 방법 const common = { SERVER_..
[html] 자바스크립트 코드 없이 자동완성 검색 구현하기 js코드 없이 html 만으로 자동완성검색을 구현합니다. 구현화면 자바스크립트 코드 없이 자동완성 검색 구현 html 코드
[js] button submit 막기 (ft. form) button의 submit 방지하는 방법입니다. form 태그에서 내에 위치하는 button은 클릭 시 항상 onSubmit 속성의 함수를 실행하는데요. button에 뒤로 가기 또는 취소의 기능을 원할때는 onSubmit 기능을 막아야 합니다. button submit 방지 button type 속성을 button으로 설정합니다. 버튼 form 태그 안의 button 사용법 저장 //submit 실행 취소 //submit 방지
[react] tailwind로 메뉴바 세팅 bottom 쪽 nav바 tailwind className 코드 import React, { useMemo } from "react"; const BottomMenuBar = () => { const naviIcon = useMemo(() => ({ background: "url('/images/mobile/home/hamburger.svg') no-repeat center" }), []) const plusIcon = useMemo(() => ({ background: "url('/images/mobile/home/plus.svg') no-repeat center" }), []) const userIcon = useMemo(() => ({ background: "url('/images/mobile/ho..
[react] 검색 기능 구현하기 react에서 fitler, include를 이용한 검색 기능 구현입니다. html input 코드 input value 속성을 넣어줍니다. onSearch(e)}> 검색 onChange action 코드 input 태그에서 onChange action을 통해 input value값에 저장된 검색어를 가져옵니다. const [search, setSearch] = useState(""); const onChangeSearch = (e) => { e.preventDefault(); setSearch(e.target.value); }; 검색 기능 코드 filter, includes를 이용하여 userId가 검색어를 포함시 필터링을 해주어 검색을 구현합니다. const onSearch = (e) => { e.p..
[react] Warning: A component is changing an uncontrolled input to be controlled... react에서 태그 사용후 나온 warning입니다. Warning 오류 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. input의 value에 undefined가 들어갔을 경우에 대한 처리가 없는다는 경고메시지 입니다. before Warning 해결 방법 inp..
[react] Warning: `value` prop on `select` should not be null. react에서 select 태그 사용할때 나오는 warning입니다. Warning 오류 Warning: `value` prop on `select` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. before 선택하세요 관리자 최고 관리자 Warning 해결 방법 value="" 으로 빈 string 값을 넣어주었습니다. 선택하세요 관리자 최고 관리자
[react] useEffect 메모리 누수 Can't perform a React state update on an unmounted component... useEffect의 잘못된 사용으로 인한 메모리 누수 warning 입니다. Warning 오류 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. useEffect 안에서 비동기로직을 실행할때 위와 같은 warning이지만 빨간색의 오류 메시지가 출현합니다. before useEffect(() => { if (!adminId) { history.push(`/admin..
[js] 이미지 특정 위치 클릭시 이벤트 처리 (ft. 특정 좌표 area, map) 이미지에서 특정 좌표 클릭시 이벤트 구현입니다. 태그는 이미지맵을 만드는 태그입니다. jpg, png, svg 와 같은 이미지에 링크를 걸어주어 화면 이동을 가능하게 합니다. 많이 사용할 일은 없지만 복잡한 지도같은 이미지에 주요 사용됩니다. 과 태그를 이용하여 특정 좌표에 영역을 지정하고 클릭 이벤트를 걸 수 있습니다. image map 태그 예제 image 태그의 usemap 의 이름과 map 태그의 name을 동일 map은 area 요소를 포함 area에서 shape(영역 모양)을 정의(rect(사각형), circle(원형), poly(다각형), default(기본값으로 전체 영역)의 속성 값) coords 좌표 위치 지정(x1, y1, x2, y 2가 속성 값으로 사각형의 왼쪽 위 모서리와 오른쪽..
[react] framer motion 사용법 react faramer motion 라이브러리를 이용해 동적인 애니메이션을 구현합니다. framer motion 설치 npm install framer-motion framer motion 제공 기능 react에서 framer motion을 이용하여 디양한 애니메이션(transition, repeat, delay ), Gesture(hover, drag, tap) 등의 다양한 동적 무브먼트를 smooth하게 구현이 가능합니다. 기본 예 사라지는 현상 구현 영상 사라지는 현상 구현 import React from "react"; import { motion } from "framer-motion" const Example = () => { const variants = { hidden: { opacity..
[react] redux-toolkit으로 쇼핑몰 사이트 만들기 (ft. 장바구니) react, redux-toolkit를 이용한 쇼핑몰(장바구니) 사이트 예제입니다. 예제는 유투버, chaoo charles님의 강의를 들으면서 공부한 내용입니다. 구현 화면 메인 화면 장바구니 페이지 구현 내용 react, hooks css 파일 코드는 중요하지 않아 불포함 redux-toolkit react-toastify 화면: 전체 아이템 리스트 화면, 장바구니 상세 화면 설치 패키지 1. npx create-react-app 앱이름(version 5.2.0) 2. npm install redux react-redux @reduxjs/toolkit 3. npm install axios 4. npm install react-router-dom 5. npm install react-toastify 폴..
[react] swiper.js으로 timepicker 커스텀 (swipe slide event) swiper.js를 커스텀하여 timepicker를 구현합니다. 구현 화면 구현 영상 구현 내용 swiper.js를 설치하여 react에서 사용 css는 tailwind 라이브러리 사용(중요하지 않아 아래 제공된 코드에서는 거의 삭제) onSliceChange로 이벤트 사용 onSlideChange={(swiper) => console.log(swiper.realIndex + 1)} 로 현재 active된 슬라이드 표시 initialSlide={숫자} 를 이용해 처음 시작 슬라이드 지정 swiper 코드 console.log(swiper.realIndex + 1)} //이벤트 사용 > react 코드 import React from 'react'; import { Swiper, SwiperSlide } ..
[js] 자바스크립트 import , export 개념 import, exprot의 가져오기, 내보내기 개념입니다. 자바스크립트의 import, export라는 키워드를 통해서 가져오기, 내보내기를 실행합니다. import 사용 예제 1 npm install로 node module 설치 후 node_modules 폴더 안의 lodash 패키지를 _라는 이름으로 가지고 와서 main.js에서 활용을 하겠다는 선언입니다. main.js import _ from 'lodash' //node_modules 폴더에서 가져오기 import 사용 예제 2 - 상대 경로로 import 상대 경로를 통해서 외부에서 특정한 자바스크립트 파일(getToday.js)의 getToday 함수를 가져옵니다. main.js import getToday from './getToday' ..
[js] object의 key name을 함수 parameter로 받아 바꾸는 방법 함수 argument로 부터 값을 받아 객체 key 이름을 지정하는 방법입니다. 적용 전 예시 fnName = (type) => { return { type: { fill: 'gray' } } } 적용 후 사용 후 key를 대가로로 묶어주시면 됩니다. fnName = (type) => { return { [type]: { fill: 'gray' } } }
[react] 데이터(json) html 태그 화면 렌더링 방법 (ft. html-react-parser) api 호출로 data 출력할때 html를 넣어 바로 렌더링 시킬때 사용법 입니다. html-react-parser 라이브러리를 사용할 수 있습니다. 라이브러리를 이용해 html를 react의 문법인 jsx 로 변환합니다. HTML to React parser that works on both the server (Node.js) and the client (browser) - 공식문서 html-react-parser 설치 npm install html-react-parser --save 또는 yarn add html-react-parser html-react-parser 사용법 import Parser from 'html-react-parser'; //1. import 삽입 ... return ({Pa..
[react] react에서 inline style 적용 방법 (ft. 인라인 css) react에서 inline style(inline css) 적용 방법입니다. 인라인 스타일 방식은 태그 내에 자바스크립트 객체 형식으로 직접 넣는 스타일 방식입니다. react inline style 적용 방법 예제1 가장 보편적으로 쓰이는 태그 내 스타일 전체 삽입 방법입니다. 예제2 변수를 이용하여 스타일을 적용한 방법입니다. import React from 'react'; const SingIn = () => { const leftIcon = { backgroundImage: "url('/images/homebar.svg')" }; return ( ); }; export default SingIn; 예제3 리렌더링 방지를 위해 PureComponent로 감싸주었고, 분기 처리 된 인라인 스타일 적용..
[css] tailwind fontsize, color 커스텀 하는 법 tailwind 에서 fontsize, color 커스텀 하는 방법입니다. ailwind.config.js 파일에서 아래와 같이 color 추가하면 됩니다. postcss.config.js가 아니라 tailwind.config.js 이니 주의 하세요. 여기서 주의할 점: extend: { .. } extend 객체로 fontsize와 color를 한번 더 감싸줘야 기존 tailwind에서 제공하는 기본 style을 유지하면서 추가할 수 있다. tailwind.config.js 코드 module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: { fontSize: { xs: ['12px', { lineHeight: '18px..
[react] react-router-dom 버전 6에서 변경된 사항 (ft. 'Switch' is not exported from 'react-router-dom' 오류) react-router-dom 6에서 변경된 사항입니다. react-router-dom이 버전 6으로 바뀌면서 몇가지가 바뀌었습니다. switch -> routes component -> element useHistory -> useNavigate route, switch before: react-router-dom이 버전 5 import React from "react"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import Header from "./components/Header/Header"; import MovieDetail from "./components/MovieDetail/MovieDetail";..
[react] npx create-react-app You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 오류 npx create-react-app 오류입니다. 원래 사용하던 npx create-react-app 앱이름 코드로 react 프로젝트를 시작하려는데 아래와 같은 오류가 발생하였습니다. npx create-react-app 앱이름 npx create-react-app 오류 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-r..
[js] default parameter 디폴트 매개변수 (ft. es6) 자바스크립트 es6 default parameter 입니다. 매개변수 = 'x'로 default 값을 지정합니다. 매개변수가 없을 경우, undefined 일 경우 default 값을 사용합니다. function multiply(a, b = 1) { //디폴트 매개변수 사용 return a * b; } //위와 아래가 동일합니다. function multiply(a, b) { //디폴트 매개변수 사용안했을때 b = b || 1 return a * b; } default parameter 사용 예시 const multyply = (a, b=1) => a * b; multyply(5) //5 multyply(2,3) //6
[react] redux-toolkit를 이용한 사이트 만들기 ver.1 보호되어 있는 글 입니다. 2021. 12. 19.
버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요. (ft.구글 플레이) 구글플레이콘솔에서 app bundle 업로드 후 오류메시지입니다. 오류 메시지 react native에서 빌드 과정을 거친지 구글플레이콘솔에서 앱 출시를 위해 aab 파일을 업로드 하였더니 아래와 같은 오류 메시지가 나왔습니다 . 버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요. 해결 방법 react-native를 사용하였다면 app.json 파일에서 version, versionCode를 기존의 1에서 다른 것으로 바꿔야합니다. { "expo": { ... "version": "2.1.0", ... }, "ios": { ... "buildNumber": "2.0.0", }, "android": { ... "versionCode": 2, ... } } }
[js] 배열인지 아닌지 확인하기 (ft. Array.isArray() ) 변수가 배열인지 아닌지를 확인하는 방법입니다. Array.isArray() 메서드는 가로 안의 인자가 array 인지를 판별합니다. array이면 true를 반환하고, 아니면 false를 반환합니다. Array.isArray() 예제 Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray('foobar'); // false Array.isArray(undefined); // false 실무에서 실제 사용했던 코드 입니다. result에 데이터가 들어왔을 때만 실행하는 코드를 만들었습니다. result라는 변수가 초기값이 null이고 데이터가 채워지면 객체의 형태인데, 무슨 이유인지 어쩔때는 초기값이 null이 ..
[react] 카운트다운 구현 (ft. 5, 4, 3, 2, 1) 보통 게임에 많이 사용하는 카운트다운을 react로 구현합니다. 구현 영상 카운드다운 react 코드 import React, { useRef, useState, useEffect } from 'react'; const Count = () => { const [num, setNum] = useState(5) const [openResult, setOpenResult] = useState(false) const timeRef = useRef([]) useEffect(() => { for (let i = 1; i 0) { console.log('i', i) timeRef.current[i] = setTimeout(() => { setNum(num - 1) }, i * ..
[react] switch toggle 버튼 구현 화면 구현 영상 react 코드 기존의 알림 값이 true/false인지를 api로 가져오기 버튼 클릭시마다 input의 checked, onChange 속성을 이용해 구현 css는 tailwind style을 적용 import React, { useEffect, useState, useRef } from "react" const Alarm = () => { const [pushStatus, setPushStatus] = useState(null) useEffect(() => { api.get(`xxx`) .then(res => { setPushStatus(res.data.pushOn) }) //기존 알림 설정값 받아오기 .catch(err => console.log(err)) } }, []) co..
[web] netlify 배포 후 https 에러 해결 netlify에서 배포 하면서 발생된 https 에러 입니다. react 프로그램을 netlify에서 배포를 한 후, 실행해보니, tweenmax is not defined 라는 오류가 나고 gsap, tweenmax를 이용한 애니메이션이 작동을 하지 않았습니다. 좀 더 정확히 확인해 보니 아래의 오류 메시지가 떳습니다. 오류 메시지 Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'. This request has been blocked; the content must be s..
[react] Input elements should have autocomplete attributes (suggested: "current-password") 오류 react의 input에서 type="password" 사용시 나오는 오류입니다. 오류 메시지 오류: [DOM] Input elements should have autocomplete attributes (suggested: "current-password") 해결 방법 input 태그 안에 autoComplete="on" 속성을 추가합니다.
반응형

티스토리툴바