본문 바로가기

Dev128

일용직 소득세 계산 방법 2023년 근로소득 세율 간이세액표 갑근세 조견표 자바스크립트 계산기 2023년 근로소득 세율 변동 사항과 근로 소득세 계산 방법 매년 신경 써야 하는 주제, 바로 '소득세'에 대해 이야기해 볼까 합니다. 2023년 근로소득 세율 변동이 있었는데요, 이에 대한 내용을 잘 이해하고 적절하게 대처할 수 있도록 함께 알아봅시다. 2023년 소득세법 개정 소식 우선, 앞서 말한 2023년 소득세법 개정 소식부터 알려드리겠습니다. 그 변동 사항 중 가장 중요한 부분은 근로소득 세율의 일부 구간 변동입니다. 기존에 6%의 세율이 적용되던 과세표준액 구간이 1200만 원에서 1400만 원으로 확대되었습니다. 또한, 24% 세율 구간도 4600만 원 초과에서 5천만 원 초과로 변경되었습니다. 이 두 가지 변동 사항은 실질적으로 일반 근로자들의 세금 부담을 줄이는 효과가 있습니다. 그러나.. 2023. 7. 4.
CSS 텍스트 네온사인 만드는 방법 네온 텍스트는 웹 사이트에 독특하고 현대적인 느낌을 더할 수 있는 멋진 기능입니다. 저도 항상 네온사인의 매력에 빠져들었고, CSS를 사용하여 그 효과를 다시 만들어보고 싶었습니다. 그래서 이번에는 네온사인 효과를 텍스트에 추가하는 방법에 대해 몇 가지 유용한 팁을 공유해보고자 합니다. 또한 CSS와 키프레임을 활용하여 다양한 네온사인 효과를 구현하는 방법도 알아보겠습니다. 다음은 우리가 만들 CSS 텍스트 네온사인입니다. 텍스트에 글로우 효과 추가 글로우 효과를 텍스트에 추가해보겠습니다. 이를 위해 CSS의 text-shadow 속성을 사용할 수 있습니다. text-shadow 속성은 여러 그림자를 적용할 수 있는데, 각 그림자는 쉼표로 구분하여 지정합니다. .neonText { color: #fff;.. 2023. 6. 14.
javascript classList.toggle로 jquery addClass, removeClass, toggleClass 구현하기 / 더보기 버튼 클릭시 영역 확장 아래처럼 더 보기 버튼을 누르면 위 영역이 확장되면서 내용을 더 보여주는 컴포넌트를 구현하려고 한다. 사실 jquery라면 일도 아니지만, javascript 특히 react에서는 귀찮다. 여러분이 느끼셨을 것 같지만, JavaScript, 특히 React를 사용하면서 DOM을 선택하는 작업이 매우 번거로울 때가 많습니다. 그리고 이것은 jQuery를 사용하시던 분들에게는 특히 더 그렇게 느껴질 수 있습니다. jQuery의 힘을 알고 있는 우리에게 이는 상당히 실망스러운 측면 중 하나일 것입니다. 그러나, 이렇게 불편함을 겪고 있는 것은 저희들만은 아닙니다. 사실, 이 문제를 해결하기 위한 방법은 많습니다. 여러 가지 가능한 방법들이 있지만, 주요한 두 가지 해결책은 ref 사용과 useState 사용입.. 2022. 11. 3.
autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. 뜻 해결 방법 /end value has mixed support, consider using flex-end instead / Node-sass incompatible with ^4.0.0 VSCODE업데이트 이후 갑자기 에러가 뜨기 시작했다. 하아...뭐야... 아 물론 내 소스는 아니다. 난 이미 해결을 했으므로... WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css) Module .. 2022. 10. 20.
리액트 모달창 드래그 방법 react bootstrap modal draggable jquery에서 bootstrap 모달 창을 드래그하는 방법은 굉장히 직관적이고 쉽다. 반면에 리액트 부트스트랩 콤포넌트 라이브러리를 사용하면서 react bootstrap modal draggable 하기는 쉽지 않다. 아니, 쉽다. 쉬운데 레퍼런스가 부족하다. react bootstrap, react-draggable만을 사용해서 정통으로 리액트 부트스트랩의 모달을 드래그하는 것을 웬만하면 포기하고 antd, dragm 조합으로 넘어가는 사람들이 많은 듯하다. 구글에서 react Bootstrap modal draggable주제로 검색하면, 대부분 리액트 예제를 클래스형으로 설명해두고 있다. how to make react-bootstrap modal draggable I've tried making.. 2022. 9. 13.
리액트 api axios 엑셀 다운로드 버튼 구현 react.JS filesaver.saveAs javascript blob response.headers 값에서 filename추출하기 리액트 api 엑셀 다운로드 버튼 구현 filesaver.saveAs javascript blob response.headers 값에서 filename 추출하기 리액트를 제대로 시작한지 그리 오래되지 않은 관계로, php나 angular에서는 당연하게 되는 것들이 react에서는 제약이 많은 경우가 있다. 특히 파일다운로드를 구현하는데 좀 애를 먹긴 하는데, 그게 엑셀 다운로드라면 더... 일단 엑셀 파일은 백엔드에서 만들어준다 치고... api를 통해서 axios로 token을 통해서 인증도 있어야 한다. token axios는 별제로 다루도록 하고, 일단 axios instance를 만들어 둔 프로젝트에서 엑셀 다운로드를 구현하는 법은 filesaver컴포넌트를 사용하면 간단하다. 다만 멋들어지게 f.. 2022. 2. 4.
react-toastify new line 줄바꿈 리액트 토스트 라이브러리를 사용하다 보면, 토스트를 띄울 때 2줄을 써야 할 때가 있다. 한 줄이면 문제가 안되는데, 개행처리를 해서 이쁘게 보이고 싶을 때는 문제가 된다. 리액트는 개행처리가 까다롭다. \n을 사용하면 될 것 같지만, \\n이건, \n이건 이건 다 안 먹힌다. react-toastify가 toastMsg로 입력된 값을 자동으로 텍스트로 전환시켜버리기 때문이다. 그래서 리액트 토스트에서 멀티라인을 사용하려면 함수로 직접 쏴줘야 한다. 컴포넌트로 사용하기 때문에, 리덕스를 통해서 props를 넘기는데, 이번 프로젝트에서는 보통 이렇게 사용했다. dispatch( createToastNoti({ toastType: "SUCCESS", toastMsg: "회원가입이 저장되었습니다.이메일 인증을.. 2022. 1. 5.
vscode Failed to load jshint library. 에러 처리 방법 어느 날 새 노트북에 vscode를 설치하고 각종 플러그인을 설정하는데.... 갑자기 output에 Failed to load jshint library. Please install jshint in your workspace folder using 'npm install jshint' and then press Retry. 라는 에러가 출몰한다. 결론부터 말하자면 문제의 원흉은 JSHint 플러그인 탓이다. The extension looks for a jshint module in the current directory and in the global package location. 이 vscode 확장 프로그램은 자바스크립트용 Linter역할을 하는 익스텐션이다. 기본적으로 vscode는 jshin.. 2021. 8. 6.
PowerShell] VSCode 터미널 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ .ps1 파일을 로드할 수 없습니다 PowerShell] VSCode 터미널 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ .ps1 파일을 로드할 수 없습니다. VSCode 에서 npm을 설치하고 사용하고자 할 때 아래와 같은 어려움에 부딪칠 수 있다. 이는 스크립트 실행 권한이 제한되어 있는 상태이기 때문이다. 스크립트 실행 권한을 변경하기 위해서는 Windows PowerShell을 관리자 권한으로 실행해서 변경해줘야 한다. 1. Windows PowerShell을 관리자 권한으로 실행 Window10 기준: 시작에서 windows PowerShell을 검색해서 관리자로 실행 2. get-help Set-ExecutionPolicy로 어떤 권한을 설정할 수 있는지 확인 Restricted : PowerShell의 실행 권한 .. 2021. 8. 3.
자바스크립트 브라우저 언어 추출 체크 방법 JAVASCRIPT FOR DETECTING BROWSER LANGUAGE 현재 브라우저 언어 설정값을 가져오는 방법에는 IE와 비 IE(파폭, 크롬 등등)의 차이가 있습니다. IE의 navigator객체에는 systemLanguage, userLanguage, browserLanguage 가 있어 마치 브라우저 언어를 보여줄 것 같지만, 전혀 그렇지 않아 사람을 혼란에 빠트리죠. 혼란을 주는 IE전용 속성 navigator.userLanguage OS의 제어판 – 국가 및 언어 – 입력 언어를 나타낸다. navigator.browserLanguage, navigator.systemLanguage OS의 제어판 – 국가 및 언어 – 표시 언어의 반환한다.(browserLanguage와 systemLanguage의 차이는 발견하지 못했다.) 모두 OS 언어 설정과 연관되어있다 $.. 2021. 7. 21.
bootstrap selectpicker multiple js 수정 전체선택 해제 변경 css bootstrap selectpicker multiple js 수정 전체선택 해제 변경. 이 제목을 뭐라고 설명해야 할지 모르겠다. 아무튼 요지는 이렇다. 부트스트랩4의 selectpicker multiple 옵션을 사용할 때 디폴트로 주어지는 모두선택 모두해제 토글 되는게 클라이언트 마음에 안들었나보다. 모든 option이 선택되면 모두 해제되는 것은 당연하지만 하나의 옵션만 선택해도 모두해제로 바뀌는 것이 클라이언트는 이해가 안된 모양이다. 그래서 클라이언트는 전체가 아닌 옵션을 선택하면 전체옵션은 변하지 않고, 전체옵션을 선택하면 모든 옵션도 체크가 된 것 처럼 보이게 해 달라는 것이다. 기본적인 셀렉트피커의 태그 구조는 다음과 같다. 그룹명 그룹설명 부서명 새로 변경해서 스크립트를 짠 html구조.. 2021. 7. 19.
jquery .sort() 요소 이동하면서 제이쿼리 소트 정렬하기 jquery .sort() 요소 이동하면서 제이쿼리 소트 정렬하기 부서나 트리구조의 UL, OL의 LI요소를 다른 UL로 이동하고자 할 때 이동한 후 소팅 정렬 되도록 할 때 jquery .sort() 함수는 요긴하게 사용된다. 다음과 같이 부서 목록에서 특정 부서를 선택해서 선택된 부서로 옮기려고 할 때 순서대로 정렬하는 구조의 제이쿼리를 짜보자. 먼저 복사 이동은 클릭 이벤트 발생과 동시에 .appendTo() 함수로 이동된다. appendTo 함수가 두번 사용된 것은 선택된 부서의 목록에서 클릭 이벤트는 부서 목록으로 다시 옮기기 위한 이벤트 처리다. 원리 자체는 같다. 두 경우 모두 요소가 이동된 뒤에 소팅 정렬을 해야 해서 임의의 함수를 만들어 공통으로 사용하고 있게 구성했다. HTML HTML.. 2021. 7. 17.

티스토리툴바