키자드에 등록된 총 341개의 포스트를 확인하실 수 있습니다.
자바스크립트, 리액트를 이용해 button 클릭 후 disabled 처리 방법입니다. 자바스크립트 버튼 클릭 후 disabled 처리 html 버튼 javascript let btn = document.querySelector('.btn') btn.addEventLis..
캔버스를 이용하여 자바스크립트 또는 리액트로 공튀기기를 구현합니다. 구현 영상 react 코드 (자바스크립트 코드 삽입) import React, { useEffect } from 'react'; const Balls = () => { const onStart = ()..
react에서 form, input 박스를 사용하던 중 위와 같은 에러가 나왔습니다. 오류 메시지 오류 해결
생년월일 또는 전화번호, 날짜에 들어가는 하이픈을 자바스크립트로 제거하는 방법입니다. 자바스크립트로 하이픈 제거 str.replace(/-/g, "") 예제 const birth="1991-12-22" const newBirth = birth.replace(/-..
input 박스에서 소수점 자리까지 허용하는 속성입니다. 소수점 두 자리 수 허용시 input 태그에 step="0.01" 속성을 추가합니다. 소수점 한 자리수 허용시 input 태그에 step="0.1" 속성을 추가합니다. input 박..
alert 출력시 [object Object] 오류 해결 방법입니다. alert, console.log 출력시 [object Object] 오류 자바스크립트에서 json 형태의 data를 alert(data) 또는 console.log(data)로 출력시 [object Object..
react hooks로 form을 구현하는 가장 효과적인 방법입니다. 구현 화면 react hooks에서 form 구현 방법 admin 페이지에서 가장 많이 사용되는 form을 구현할 때는 수많은 input 또는 select 태그에 입력한 내용..
Next.js에 embed link 적용하는 법입니다. 보통은 index.html 파일에 태그 안에 cdn 코드를 적용하여 폰트 또는 폰트 어썸의 아이콘 등을 삽입하는데, Next.js 는 index.html 파일이 없습니다. Next.js의 기본 구..
vs code의 postman, thunder 사용법입니다. thunder api 요청에 대한 결과를 테스트 하기 위한 postman을 대신 할 수 있는 visual studio code 플러그인 vs code에서 thunder 설치 방법 thunder 사용 방법 사용..
TypeError: Cannot read property 'x' of undefined 오류 해결입니다. 자바스크립트 또는 리액트에서 정말 자주 보게되는 오류 입니다. 어느 사이트에 의하면, Cannot read property 'x' of undefined, Can..
react, toast 라이브러리, react-toastify 사용법 입니다. 화면 구현 react-toastify https://www.npmjs.com/package/react-toastify react-toastify React notification made easy www.npmjs.com react-toas..
open source 모음 사이트, kandi를 소개합니다. kandi 오픈 소스 플랫폼, kandi를 이용하여, 우리가 원하는 무료 오픈 소스의 라이브러리를 검색할 수 있습니다. 제약사항이 적어 대부분의 프로젝트에서 자유롭게..
자바스크립트에서 시간차, 지연을 위한 구현 방법입니다. 자바스크립트를 이용하여 시간차를 두고 출력하는 방법은 setTimeout와 async를 이용한 방법이 있습니다. 여기서 데이터의 양이 많을 경우, for문과 map..
네이버 2021 글꼴, 마루부리 소개합니다. 네이버가 2021년 10월 9일, 한글날을 맞이하여 무료 글꼴, 마루부리를 공개하였습니다. 디지털 환경에 맞춰 한글꼴의 원형을 잇는 마루 마루 부리 글꼴은 디지털 화..
개발자 도구 화면 맥 개발자 도구 단축키 alt(option) + command + i 윈도구 개발자 도구 단축키 f12
svg, path태그에 텍스트를 추가하는 방법입니다. gauge 차트를 사용하기 위해 react-gauge-chart 라이브러리를 사용하였습니다. react-gauge-chart 라이브러리 https://www.npmjs.com/package/react-gauge-chart..
react, 웹 admin, dashbord에서 필요한 nav 바를 구현합니다. 구현 화면 구현 영상 구현 내용 1. react, hooks를 이용한 Nav 바 구현 2. style은 tailiwind 사용 3. 하위 메뉴 hidden에서 상위 메뉴 클릭 시 하..
터미널 입력 코드 - 해당 프로젝트 폴더 열기 cd project //해당 프로젝트로 이동 code . //해당 프로젝트 새창으로 열기 해당 프로젝트 현재 창에서 열기 사실 code . 코드를 사용할때 새창에서 열기에 이전 창..
react에서 sass 사용을 위하여 npm node-sass -save를 통하여 설치를 하고, npm start로 로컬 서버를 구동하다가 아래와 같은 오류가 나왔습니다. 오류 메시지 ./src/App.scss (./node_modules/css-loader/dist/c..
grid를 이용한 반응형 레이아웃 입니다. grid를 이용한 style을 적용하면, 미디어쿼리를 사용할 필요 없이 스크린 화면 사이즈에 맞추어 반응형 레이아웃을 구현할 수 있습니다. 구현 화면 css div { display: g..
예제는 패스트캠퍼스의 "이웅재"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 const [orders, setOrder] = useState([{id: ' ', quantity: 0}]) 의 형식으로 state 관리 장바구니에 상품 추가 선택..
react에서 typescript를 설치하고 app.tsx 에서 router를 설치하는데 이런 오류가 나왔습니다. 오류 메시지 Could not find a declaration file for module 'react'. '/Users/inkijo/Documents/react-te..
react-simple-chatbot 을 이용하여 챗봇을 구현합니다 . react에서 가장 많이 쓰이는 simple 챗봇입니다. documentation 이 잘 되어있고, api를 이용하여 여러가지의 custom이 가능합니다. 구현화면 구현 영상 r..
모달창(팝업) 오픈시 css를 통한 스크롤 방지입니다. css를 이용한 scroll을 방지 모달창이 오픈되었을때, 감싸고 있는 부모요소에 아래의 스타일을 적용하면 됩니다. 모달창 open이 true시 적용하고, false시..
react의 라이브러리, next.js로 만든 사이트 예제입니다. 예제는 유튜버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 영상 구현 화면 Home 페이지 Photes 페이지 photo 이미지별 세부 페..
react 라이브러리, next.js로 만튼 사이트 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 화면 http:.../photos/1 와 같이 상세 페이지로 접근합니다. 폴더 구조..
자바스크립트를 통해 날짜와 시간을 출력하는 라이브러리, day.js 입니다. 자바스크립트로 날짜와 시간을 출력할 경우, 직접 코드를 작성할 경우도 있지만, 라이브러리를 통해 직접 함수를 만드는 번거로움을 피..
자바스크립트로 만나이를 계산합니다. 만 나이 계산하는 함수 (파라미터로 생년월일 넘겨줄때) export const gettingOriginalAge = (birth) => { //birth가 1990-03-05, string 형식 const today = new Date(); /..
css를 이용한 이미지 애니메이션 효과입니다. 웹이나 앱의 인트로 화면에서 주로 이미지 애니메이션 효과를 사용하게 됩니다. CSS - 무한 회전 애니메이션 .img { animation: rotate_image 6s linear infinite;..
react 도넛 차트 라이브러리입니다. react에서 간단하게 사용하는 파이 차트(도넛 차트) 라이브러리, react-minimal-pie-chart를 추천합니다. 구현 화면 react-minimal-pie-chart 사이트 https://www.npmjs.com/..
react 기본 자동 완성 코드 기능 플러그인 입니다. react 사용자의 필수인 react 문법 코드 자동완성 플러그인입니다. rsc 또는 rcc를 입력하면 react 기본 코드가 emmet 기능처럼 자동 생성됩니다. rsc: hooks에..
react, set 객체를 이용한 체크박스 토글 기능 구현입니다. 구현 화면 구현 영상 구현 내용 - react, hooks 방식 - 체크 박스 토글 기능(한번 클릭 선택, 두번 클릭 취소) - es6 최신 문법, set 객체를 이용하여..
react hooks에서 자바스크립트를 이용해 html element에 접근하여 Object is possibly 'null' 이라는 타입스크립트 오류가 났습니다. 이유는 객체가 비어 있을 수도 있는데 해당 객체의 내부 프로퍼티나 메소..
es6 최신 문법, null 병합 연산자에 대해 알아봅니다. null 병합 연산자 '??' (nullish coalescing operator) es6에서 새로 나온 문법 null 병합 연산자를 이용하여 매우 짧은 문법으로 코드를 심플하게 작성할..
Set 객체 es6 최신 문법의 중복을 제거한 값들의 집합입니다. 특정 요소 추가: add 특정 요소가 있는지 확인: has (boolean 값으로 반환) 특정 요소 제거: delete 모든 요소 제거: clear 요소의 개수 반환: size..
react-datepicker를 커스텀하는 방법 입니다. react에서 사용하는 datepicker 중 가장 인기있는 캘린더 데이트피커 라이브러리, react-datepicker 입니다. react-datepicker는 기본적으로 제공하는 기능이 많아..
web 스크롤 API, window.scrollTo() 입니다. 모바일 웹뷰에서 페이지를 이동하거나, 컴포넌트를 교체할때마다 이전 페이지나 컴포넌트의 스크롤 위치가 유지될때 스크롤을 강제로 상위로 이동시킬때 사용합니다...
html에 태그 안에 의미있는 속성을 추가하여 자바스크립트로 접근가능한 재미있는 기능, data 속성을 소개합니다. data- 속성 의미론적 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. 사용법은 태그 안에..
react에서 typescript 로 프로젝트를 진행할 때 이 오류를 많이 보게됩니다. 분명히 변수가 obejct 이고, 변수.속성 또는 변수[속성]을 { } 안에서 사용하는 것이 가능한데 타입스크립트의 오류가 납니다. 오류..
visual studio code에서 emmit 기능이 안될 경우 해결 방법입니다. visual studio code에서는 기본적으로 태그 자동 완성 기능인, emmit 을 지원합니다. 하지만 갑자기 태그를 입력 후 tab 키를 눌러도 태그가 자..
react hooks에서 pagination을 구현하고, 라이브러리 react-js-pagination을 사용하여 구현해봅니다. 구현 내용: 1. react hooks 2. 최소한의 css만을 사용합니다. 3. axios로 jsonplaceholder에서 더미데이터를..
일반 파비콘을 제작하는 사이트는 png 파일을 넣어도, 흰 색 배경의 ico 파일로 생성해줍니다. 하지만 투명 배경의 파비콘이 필요할 때가 많지요? 이럴때 사용하는 사이트입니다. conventico https://convertico...
local에서 git을 2번 commit, push 를 하고, 실서버에 git pull origin master 를 하니, 이와 같은 오류 메시지가 떴습니다. 실서버에서 커밋을 한번 한 후에 다시 git pull를 하여 내려받으면 됩니다. 오류 메..
git commit 동작 중 아래와 같은 오류 메시지가 나왔습니다. 오류 메시지 error: pathspec 'xxx'' did not match any file(s) known to git 해결 방법 정말 초보자 수준의 실수 였습니다. git commit..
react에서 npm install redux react-redux로 리덕스를 설치하는 도중 아래의 오류가 발생했습니다. 오류 메시지 npm ERR! code ENOSELF npm ERR! Refusing to install package with name "react-redux" under a p..
자바스크립트를 이용한 날짜 출력 방법입니다. 현재 날짜, 시간 구하기 let now = new Date(); // 현재 날짜 및 시간 연도 구하기 let year = now.getFullYear(); 월 구하기 let todayMonth = now.getMonth() + 1..
부모 컴포넌트 const [openAlert, setOpenAlert] = useState(false) const onOpenAlert = () => { setOpenAlert(!openAlert); } 자식 컴포넌트 AlertDialog.tsx import React from 'react'; const AlertDialog =..
react에서 Redux 사용 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux의 기본 원리 화면 결과 폴더 구조 폴더 안 파일 구조 react Redux 예제 구현 순서 컴포..
리액트로 hooks로 숫자를 증가 시키는 메소드 코드를 삽입하다가 나온 오류 메시지 입니다. const [i, setI] = useState(0); const onIncrement = () => { //클릭시 숫자 증가 if (i < 10) { i = i+1 } return Se..
JSON 데이터와 브라우저 저장소, local storage 사용방법 입니다. JSON 제이슨, JavaScript Object Notation 자바스크립트의 객체 표기법 문자 데이터 JSON 데이터 사용 방법 json 확장자를 가진 파일은 문자(s..
리액트 hooks, typescript 프로젝트에서 아래와 같은 오류가 났습니다. 오류 메시지 Property 'x' does not exist on type '{}'.ts 해결 방법 useState() 에서 useState ()를 추가해줍니다. 배열 const [a..
리액트에서 Axis post 로 API 호출을 하던 중 다음과 같은 오류가 났습니다. const userFn = () => { const searchData = { userId, count: 1, } axios.post(url + "/report/" + searchData) .then(res => consol..
Redux의 기본 원리와 순수 자바스크립트를 이용한 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux 기본 컨셉 바닐라 자바스크립트(순수 자바스크립트) 리덕스 기본..
자바스크립트 es6, 스프레드 연산자 입니다. spread 연산자 불변성 얕은 복사 spread 연산자 하나의 배열 데이터를 spread 연산자를 이용해 출력하면, 문자 데이터 형태로 출력됩니다. spread 연산자 예제 con..
자바스크립트로 dom을 제어하여 선택한 부분을 프린트 합니다. 구현 내용 버튼 클릭시 프린트 기능 연결 선택 영역을 설정하여 그 부분만 프린트하도록 설정 선택 영역 프린트 하기 window.print() 메소드는 보..
Git commit/push 과정 중 생긴 오류 해결입니다. 오류 메시지: Another git process seems to be running in this repository, e.g. an editor opened by 'git commit'. Please make sure all processes are term..
자바스크립트 라이브러리, lodash 사용법입니다. lodash란 Lodash는 자바스크립트 라이브러리로서, 객체, 배열 등의 데이터의 구조를 쉽게 변환하여 사용하게끔 도와줍니다. 실무에서 데이터를 handling 할때 복..
react datepicker 라이브러리 사용법입니다. 구현 내용 - react, hooks 방식, style은 모두 제외, 상태관리로 useContext 사용 - 버튼 클릭시 datepicker 출현 - datepicker는 마지막일 클릭시 사라짐 - datepick..
git clone 과정 중 생긴 오류입니다. Mac 비공개 계정으로 진행 중인 프로젝트를 다른 window 컴퓨터에서 당겨오려고 git clone 하던 중, Repository not found 라는 오류가 나왔습니다. 오류 메시지 Repository..
함수에서 return 키워드를 사용하는 것은 return 키워드 뒤에 있는 내용이 함수 밖으로 반환된다 라는 것을 의미하지만, return 키워드가 사용된 부분에서 함수가 종료된다는 것도 의미합니..
react hooks에서 간단한 input 을 사용하는 구조에서, focus()를 사용하기 위하여 해당 input 태그에 useRef 를 삽입하고, const inputRef = useRef(null)로 선언을 하였는데, focus 처리시, Object is possibl..
react에서 탭화면을 구현합니다 . 구현 내용 탭 버튼 클릭 시 해당 탭 화면을 바로 보여줍니다. react hooks 방식을 이용합니다. 스타일을 tailwind 를 적용합니다. 구현 화면 리액트로 탭 구현 방법 코드 impor..
자바스크립트 데이터에서 객체를 배열로, 배열을 객체로 바꾸는 방법입니다. 실무에서는 화면에서 게시판, 테이블과 같은 형태의 출력을 위해, 또는 서버 전송을 위해 자주 객체를 배열로 변환하게 됩니다. 객체..
인터넷에서 5분 만에 부가가치세 과세표준 증명원 발급하는 법입니다. 부가가치세 과세표준 증명원 발급 방법 홈택스 로그인 부가가치세 과세증명 발급 홈화면 메뉴바에서 민원증명 > 부가가치세 과세표준증명을..
netlify에서 정적 사이트 배포하는 법입니다. netlify에서 사이트 만들기 netlify 회원가입 netlify 홈페이지로 이동하여, 깃허브 계정으로 회원가입을 진행합니다. https://www.netlify.com/ Netlify: Dev..
css와 자바스크립트로 도넛 차트를 구현합니다. 구현 내용 - 도넛 차트(도넛처럼 같은데가 파진 원형 차트)를 구현 - 라이브러리가 아닌, 자바스크립트와 css로 적용 - css: conic-gradient() - js: setInterval,..
style 라이브러리, tailwind를 적용하여 모달창 띄우기를 구현합니다. 구현 화면 구현 내용 react, hooks 방식 스타일 라이브러리, tailwind로 스타일 적용 확인 클릭시 다이얼로그 출현 X 버튼, 확인 버튼 클릭..
react 로 css, js 를 이용하여 도넛차트를 구현합니다. 아래의 포스트에서, 라이브러리 없이, css와 js 만으로 도넛차트를 구현 하였는데, 이것을 react 버전으로 만들어 보았습니다. https://goddino.tistory..
자바스크립트에서 데이터 타입을 확인하는 방법입니다. typeof 보통 console.log(typeof 데이터)를 이용하여 콘솔에서 데이터 타입을 확인합니다. 이럴 경우, 문제가 발생합니다. null, 객체, 배열을 모두 object..
CSS를 이용한 3차원 애니메이션 효과 설정입니다. 구현 내용 이미지에 마우스 올리면(hover시) 이미지가 옆으로 회전하면서 이미지의 뒷면이 출력되고, 이미지에서 마우스를 내리면 다시 원래 이미지..
html 특수기호를 이용한 마크업이 필요할때, 이용하는 사이트입니다. html 특수기호 검색 사이트 구글에서 html entities를 검색해서 아래의 페이지로 들어가거나, 바로 아래의 링크로 이동해주세요. 원하는 기호..
리액트 hooks로 간단한 모달창을 구현합니다. 구현내용 cdn 설치, 스타일은 기본만 사용 리액트 hooks 방식 버튼 클릭 후, 모달창 팝업 기능 구현 화면 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여,..
우측 하단의 버튼 클릭시 화면의 상단으로 이동하는 애니메이션 효과를 구현합니다. 구현 내용 - material-icon, css 이용하여 버튼 만들기 - 버튼 클릭 시 화면이 페이지의 최상단으로 애니메이션 효과를 내면서..
git, github를 이용한 프로젝트 버전관리 방법입니다. - 목차 - git, github의 차이점 git에서 로컬 버전 관리 github에서 원격 저장소 버전 관리 업로드 git, github에서 수정사항 버전 관리 git, github에서 br..
반응형에 맞는 이미지 가운데 배치 방법입니다. 처음 화면에는 이미지나 컨텐츠가 가운데 정렬로 잘 되다가, 브라우저 너비를 늘리거나 줄였을 경우, 이미지 또는 컨텐츠가 가운데 유지가 안되거나 잘릴 경우가..
관리자 admin 페이지 템플릿을 소개합니다. 웹사이트나 앱을 운영하기 위해서는 관리자 사이트, admin 페이지가 필요합니다. 이때 admin 페이지 템플릿을 이용할 경우, 디자인, 퍼블리싱 단계의 업무 시간을 단축..
16:9의 비율을 유지하는 이미지, 컨텐츠 영역을 만듭니다. 웹 또는 앱에 유튜브 영상 화면을 삽입할 경우, 유튜브 영상의 비율(영상 화면 삽입 이미지 사이즈)인 16대 9의 비율로 영역을 만들어 컨텐츠를 삽입니..
최근에 회사 프로젝트에서 리액트를 이용한 간단한 설문조사 앱을 만드는 중입니다. 여러 가지 시안 중에서 앱에서 많이 볼 수 있는 대화형의 설문 조사 형식이 있어, 마크업의 일부를 간단하게 공유합니다. 여기..
화면상에서 둥둥 떠다니는 요소를 애니메이션 라이브러리, gsap으로 구현합니다. 구현 화면 세 개의 동그라미 요소가 위아래 반복적으로 움직입니다. (애니메이션 구현 화면은 맨 아래에서 확인) 떠다니는 이..
google material icons을 사이트에 설치, 적용하는 방법입니다. 웹사이트 개발할 때 퍼블리싱, 프론트 개발 시점에 꼭 사용되는 것이, 아이콘입니다. 특히 자주 사용하는 icon은 검색에 사용되는 돋..
css로 가운데로 정렬하는 방법입니다. 수직 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { height: 특정 사이즈 px 지정; position: absolute; top: 0; bottom: 0; margin:..
JS 애니메이션 스크립트 라이브러리, gsap의 사용법입니다. 일반적으로 웹에서 애니메이션 효과는 css 또는 제이쿼리를 사용하여 구현합니다. 하지만 최근에는 제이쿼리 보다는 순수 자바스크립트 코드를 사용하..
css 레이아웃의 방법, positon 입니다. position position 속성은 요소들을 자유자재로 배치해 주는 속성으로, 이를 이용하면 텍스트나 이미지를 나란히 배치할 수 있고, 가로나 세로로 원하는 위치에 배치할 수..
swiper.js 를 이용하여 사이트에 슬라이드를 적용합니다. 보통 사이트 메인 페이지의 네비게이션 아래 컨텐츠 부분에는 비주얼 슬라이드가 위치합니다. 홈페이지에 처음 들어갔을 때 가장 먼저 눈에 띄는 곳으로..
수익형 블로그, 티스토리, 네이버 블로그를 비교해보겠습니다 . 처음 블로그를 시작할 때 모두 다 하는 고민이 있습니다. 바로 티스토리를 할까? 아님 네이버 블로그를 할까? 티스토리와 네이버 블로그 비교 광고..
reset css cdn 설치 방법을 알아보겠습니다 . 브라우저의 기본 style을 초기화하기 위하여, reset css를 설치합니다. reset css cdn 검색 구글에서 reset css cdn 검색 reset-css CDN by jsDelivr - A CDN for np..
오픈 그래프와 트위터 카드 사용방법에 대하여 알아보겠습니다. 오픈 그래프 웹사이트가 카카오톡, 페이스북, 트위터, 슬랙과 같은 sns로 공유될 때 우선적으로 활용되는 정보를 지정합니다. 예를 들어 아래와 같..
웹사이트 구글 폰트 적용법을 알아보겠습니다. 구글 폰트 사이트 이동 구글에서 google fonts 또는 구글 폰트를 검색하여, 해당 사이트로 이동합니다. 태그 방식 원하는 폰트 선택 여기서 사용할 폰트와 폰트 사..
타이핑 효과를 주는 라이브러리를 소개합니다. 실무에서 텍스트에 타이핑하는 디자인 효과를 주고 싶을 때가 있습니다. 보통 css로 효과를 주기 하는데 부자연스러운 편입니다. css 대신 라이브러리를 이용하면..
구글 애드센스에서 지급 보류 알림이 떴을 때, 해결하는 방법을 알아보겠습니다. 애드센스를 이용하면 수익이 일정 금액(보통 $100부터) 도달하면 정산을 받게끔 되어있습니다. 지급 계좌를 제대로 ..
경단녀용 정부 취업 지원 제도를 이용하는 재취업 노하우 26살에 첫 취업을 하고, 10년 동안 직장 생활을 하다가 고민 끝에 퇴사를 결정하게 됩니다. 1년의 시간이 순간 삭제가 되듯 빠르게 지나가고 나니, 나에..
CSS, display의 block과 inline의 개념과 사용법에 대하여 알아보겠습니다. display display 속성이란 화면을 배치하는 방법입니다. display 종류 none | contents | block | inline | inline-block | table | ta..
키워드 무료 추출 사이트, keyword shitter를 소개하겠습니다. keyword shitter https://keywordshitter.com/ Keywords Hitter - Mobile Bulk Keyword Tool Subscribe for $9 to save to email. keywordshitter.c..
react에서 context API가 필요한 이유와 사용하는 방법에 대하여 알아보겠습니다. Context API가 필요한 이유 기존에 최상위 컴포넌트에서 여러 레벨을 거쳐 props로 원하는 상태와 함수를 전달 하였지만, contex..
react에서 조건에 따른 스타일링하는 방법입니다. 스타일링은 tailwind라는 리액트 CSS 프레임 워크를 사용하여 디자인 합니다. 조건에 따라 className의 내용에 변화를 주어 다른 스타일을 주는 방법입니다. onC..
tailwind css 무료 사이트 리스트입니다. 실무에서 tailwind를 스타일 프레임워크를 사용하고 있는데, kit 패키지를 구매하지 않고, 무료 배포된 정보를 구글링하여 찾으면서 구현하다 보니 tailwind의 정보가 많..
근로소득원천징수 영수증 홈택스에서 발급받는 방법입니다. 근로자가 이직을 하였을 경우 연말정산 시 전 직장 소득까지 포함해서 신고해야 하므로 전 직장의 근로소득원천징수 영수증을 꼭 제출해야 됩니다. 이..
리액트로 구현한 지뢰찾기 게임(ver.1) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주..
리액트로 구현한 지뢰찾기 게임(ver.2) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주..