본문 바로가기
[vscode] tab키 입력시 emmet 기능 안될 때 해결방법 visual studio code에서 emmit 기능이 안될 경우 해결 방법입니다. visual studio code에서는 기본적으로 태그 자동 완성 기능인, emmit 을 지원합니다. 하지만 갑자기 태그를 입력 후 tab 키를 눌러도 태그가 자동 완성이 안될때, 해결 방법입니다. vs code의 옵션 설정을 통해 해결합니다. tab키 입력시 emmet 기능 안될 때 해결 방법 vs code preference 설정 창 접근 vs code > File > Preference > Settings setting 창에서 emmet 설정 Extensions > Emmet > Trigger Expansion On Tab 체크 체크만 하면 이제 태그 입력 후, tab키를 누르면 emmet 기능이 됩니다.
[ts] Property 'x' does not exist on type '{}'.ts react에서 typescript 로 프로젝트를 진행할 때 이 오류를 많이 보게됩니다. 분명히 변수가 obejct 이고, 변수.속성 또는 변수[속성]을 { } 안에서 사용하는 것이 가능한데 타입스크립트의 오류가 납니다. 오류 메시지 Property 'doctorName' does not exist on type '{}'.ts 또는 Property 'doctorName' does not exist on type object.ts 오류 해결 1. any {}로 가상 변수 설정 후 얕은 복사 Object.assign({}, 기존 변수)얕은 복사를 하기 전에 let 변수 : any = {};로 변수 설정을 하여서 얕은 복사를 하여 출력하니, 에러가 제거됩니다. let ojtCopy: any = {}; ojtCo..
[git] error: pathspec 'x' did not match any file(s) known to git git commit 동작 중 아래와 같은 오류 메시지가 나왔습니다. 오류 메시지 error: pathspec 'xxx'' did not match any file(s) known to git 해결 방법 정말 초보자 수준의 실수 였습니다. git commit -m " 커밋메세지 " 인데, 쌍따옴표가 아닌, 외따옴표를 쓰고있었습니다. git commit -m " 커밋메세지 "
[react] Redux 예제 (ft. 미들웨어, Redux-thunk, Redux-devtools) react에서 Redux 사용 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux의 기본 원리 화면 결과 폴더 구조 폴더 안 파일 구조 react Redux 예제 구현 순서 컴포넌트 파일 구성 CRA로 프로젝트 생성, components 폴더 구성 components 폴더 내에 Subscribers.js, Display.js, Views.js 세 개의 파일 생성 App.js에서 위의 하위 components 삽입 리덕스 redux 폴더 안에, 하위 폴더 생성(comments, subscribers, views) 각 하위 폴더 마다, types.js, actions.js, reducer.js 순서로 파일 생성 types.js : action type을 변수..
[css] tailwind dialog 창 사용 예제 부모 컴포넌트 const [openAlert, setOpenAlert] = useState(false) const onOpenAlert = () => { setOpenAlert(!openAlert); } 자식 컴포넌트 AlertDialog.tsx import React from 'react'; const AlertDialog = ({ openAlert, onOpenAlert }: any) => { return ( ); }; export default AlertDialog;
[js] 현재 날짜, 시간 가져오기(ft. 월, 일, 요일, 시간) 자바스크립트를 이용한 날짜 출력 방법입니다. 현재 날짜, 시간 구하기 let now = new Date(); // 현재 날짜 및 시간 연도 구하기 let year = now.getFullYear(); 월 구하기 let todayMonth = now.getMonth() + 1; 일 구하기 let todayDate = now.getDate(); 요일 구하기 getDay()는 숫자로 출력됩니다. 화요일의 경우, 2로 나오기 때문에, 숫자를 이용하여, 요일을 출력해야 합니다. const week = ['일', '월', '화', '수', '목', '금', '토']; let dayOfWeek = week[now.getDay()]; 시간 구하기 let hours = now.getHours(); 분 구하기 let mi..
[react] Refusing to install package with name "react-redux" under a package 오류 해결 react에서 npm install redux react-redux로 리덕스를 설치하는 도중 아래의 오류가 발생했습니다. 오류 메시지 npm ERR! code ENOSELF npm ERR! Refusing to install package with name "react-redux" under a package npm ERR! also called "react-redux". Did you name your project the same npm ERR! as the dependency you're installing? npm ERR! npm ERR! For more information, see: npm ERR! 오류 해결 문제는 프로젝트 이름을 제가 react-redux 라고 설정해서, package.js..
[js] Redux 리덕스의 기본 원리(ft. 바닐라 자바스크립트 예제) Redux의 기본 원리와 순수 자바스크립트를 이용한 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux 기본 컨셉 바닐라 자바스크립트(순수 자바스크립트) 리덕스 기본 예제 redux-vanila 폴더 생성 & 리덕스 설치 npm init -y //package.json 기본 설정 npm install redux //리덕스 설치 store.js 파일 생성 const redux = require('redux'); console.log(redux); //redux 잘 불러왔는지 확인 터미널에서 node store.js 입력하면 아래와 같이 터미널에 함수(function)들이 들어있는 object가 반환됩니다. action action 코드 작성(type을 가진..
[react] POST url/[object%20Object] 404 (Not Found) 오류 해결 리액트에서 Axis post 로 API 호출을 하던 중 다음과 같은 오류가 났습니다. const userFn = () => { const searchData = { userId, count: 1, } axios.post(url + "/report/" + searchData) .then(res => console.log(res.data)) .catch(err => console.log(err)) } 오류 메시지 POST url/[object%20Object] 404 (Not Found) 해결 방법 post()안의 + 파라미터에서 ,(콤마) 파라미터로 변경합니다. axios.post(url + "/report/", searchData) .then(res => console.log(res.data)) .cat..
[react] Property 'x' does not exist on type '{}'.ts 오류 해결 리액트 hooks, typescript 프로젝트에서 아래와 같은 오류가 났습니다. 오류 메시지 Property 'x' does not exist on type '{}'.ts 해결 방법 useState() 에서 useState()를 추가해줍니다. 배열 const [arr, setArr] = useState([]) 객체1 const [userInfo, setUserInfo] = useState({}) 객체2 const [searchDate, setSearchDate] = useState({ start: '', end: '' });
[js] local storage 사용 방법 (ft. JSON 데이터, stringify, parse) JSON 데이터와 브라우저 저장소, local storage 사용방법 입니다. JSON 제이슨, JavaScript Object Notation 자바스크립트의 객체 표기법 문자 데이터 JSON 데이터 사용 방법 json 확장자를 가진 파일은 문자(string) 데이터입니다. json의 문자 데이터를 가지고 오면, 자동으로 변환돼서 실제 객체 데이터처럼 출력이 됩니다. user.json user = { 'name': 'goddino', 'city': 'seoul', 'job': 'developer', 'hobby': 'blogging' } main.js import user from './user.json' console.log(user); //결과 {name: "goddino", city: "seoul"..
[react] Cannot assign to 'i' because it is a constant 오류 해결 리액트로 hooks로 숫자를 증가 시키는 메소드 코드를 삽입하다가 나온 오류 메시지 입니다. const [i, setI] = useState(0); const onIncrement = () => { //클릭시 숫자 증가 if (i < 10) { i = i+1 } return SetI(i); } 오류 메시지 Cannot assign to 'i' because it is a constant. 해결 방법 변수 const 를 let으로 바꿔 줍니다. const는 한번 값을 할당하면 값이 절대 바뀌지 않습니다. (immutable data type) 값을 선언함과 동시에 할당한 뒤로는 값 변경이 불가능하기 때문에 let으로 바꿔줘야 합니다.
[git] Repository not found 오류 해결 git clone 과정 중 생긴 오류입니다. Mac 비공개 계정으로 진행 중인 프로젝트를 다른 window 컴퓨터에서 당겨오려고 git clone 하던 중, Repository not found 라는 오류가 나왔습니다. 오류 메시지 Repository not found 해결 방법 before git clone https://github.com/repository username/repository name.git after https:// + ['git user 이름':'git 비밀번호']@ + 나머지 주소를 입력하면 됩니다. git clone https://['git user 이름':'git 비밀번호'@]github.com/repository username/repository name 위 코드로 다시..
[react] react-datepicker 사용법 react datepicker 라이브러리 사용법입니다. 구현 내용 - react, hooks 방식, style은 모두 제외, 상태관리로 useContext 사용 - 버튼 클릭시 datepicker 출현 - datepicker는 마지막일 클릭시 사라짐 - datepicker에서 시작일, 마지막일 클릭시, 화면에 출력 - 화면에 날짜 출력시 연,월,일 문자열로 반환하여 출력 react-datepicker 실무에서 캘린더, datepicker 를 사용할 일이 있어서, 구글로 리액트 datepicker 라이브러리 서칭 후, 가장 유명한 react-datepicker을 설치 후 사용하였습니다. react-datepicker 홈페이지 https://www.npmjs.com/package/react-datepicke..
[js] lodash 사용법, 자주 쓰는 메소드 자바스크립트 라이브러리, lodash 사용법입니다. lodash란 Lodash는 자바스크립트 라이브러리로서, 객체, 배열 등의 데이터의 구조를 쉽게 변환하여 사용하게끔 도와줍니다. 실무에서 데이터를 handling 할때 복잡한 자바스크립트 코드를 lodash를 사용함으로 인하여 보다 빠른 작업과 간결한 코드를 사용할 수 있게 됩니다. _ 라는 기호를 사용하여 명칭이 lodash 입니다. 배열에서 중복값을 제거할때, uniqBy, unionBy 메소드를 사용합니다. 배열에서 원하는 객체 데이터를 추출할 때, find 메소드를 사용하고, 제거할 때는 remove 메소드를 사용합니다. 깊은 복사를 사용할 경우, cloneDeep 메소드를 이용합니다. lodash 설치 lodash 홈페이지 installatio..
[git] Another git process seems to be running in this repository 오류 해결 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 terminated then try again. If it still fails, a git process may have crashed in this repository earlier: remove the file manually to continue. Another git process seems to be running in this repository 해결 방법 git commit, pu..
[js] 자바스크립트로 선택영역 프린트하기(ft. window.print) 자바스크립트로 dom을 제어하여 선택한 부분을 프린트 합니다. 구현 내용 버튼 클릭시 프린트 기능 연결 선택 영역을 설정하여 그 부분만 프린트하도록 설정 선택 영역 프린트 하기 window.print() 메소드는 보이는 화면을 그대로 프린트 하게 합니다. 여기서 선택 영역(printSection)만 태그 요소를 새로 생성하며 그 안에 넣어주고, 이 부분만 window.print() 를 설정합니다. 화면은 display none 과 block 을 이용하며 출력합니다. const onPrintFn = () => { const html = document.querySelector('html'); const printSection = document.querySelector('.main-contents').in..
[js] spread 연산자 (ft. 전개 연산자, 불변성, 얕은 복사) 자바스크립트 es6, 스프레드 연산자 입니다. spread 연산자 불변성 얕은 복사 spread 연산자 하나의 배열 데이터를 spread 연산자를 이용해 출력하면, 문자 데이터 형태로 출력됩니다. spread 연산자 예제 const fruits = ['apple', 'banana', 'orange']; console.log(...fruits); //결과 apple banana orange ------------------------------ console.log('apple', 'banana', 'orange'); 와 같은 결과 즉, 쉼표로 구분되면서 각각의 아이템으로 전개되어 들어가집니다. spead 연산자를 이용한 객체 데이터 생성 예제 1 일일이 배열 데이터 안의 요소를 나열할 필요 없이 spre..
[홈택스] 부가가치세 과세표준 증명원 발급 방법 인터넷에서 5분 만에 부가가치세 과세표준 증명원 발급하는 법입니다. 부가가치세 과세표준 증명원 발급 방법 홈택스 로그인 부가가치세 과세증명 발급 홈화면 메뉴바에서 민원증명 > 부가가치세 과세표준증명을 클릭합니다. 다음 화면에서 기본 인적 사항의 사업자등록번호를 확인하고, 과세기간, 사용용도를 맞게 입력한 후 신청기간을 선택합니다. 2초 후에 바로 발급이 완료됩니다. 발급번호를 클릭하면 바로 인쇄 미리보기 화면이 뜹니다. 컴퓨터에서 연결된 프린터를 인쇄를 하거나, pdf로 파일로 저장하면 됩니다.
[js] 객체를 배열로 바꾸는 법, 배열을 객체로 바꾸는 법 자바스크립트 데이터에서 객체를 배열로, 배열을 객체로 바꾸는 방법입니다. 실무에서는 화면에서 게시판, 테이블과 같은 형태의 출력을 위해, 또는 서버 전송을 위해 자주 객체를 배열로 변환하게 됩니다. 객체를 배열로 변환하는 방법을 알아보겠습니다. 객체를 배열로 바꾸는 법 Object.entries() 객체를 배열로 바꾸는 예제 let fruit = { color: "yellow", name: "banana", taste: 'good', location: 3 } console.log(Object.entries(fruit)) //결과 - 2차원 배열이 리턴됨 (4)[Array(2), Array(2), Array(2), Array(2)] 0: (2)["color", "yellow"] 1: (2)["name", ..
[react] 리액트 탭 구현하기(ft. tailwind) react에서 탭화면을 구현합니다 . 구현 내용 탭 버튼 클릭 시 해당 탭 화면을 바로 보여줍니다. react hooks 방식을 이용합니다. 스타일을 tailwind 를 적용합니다. 구현 화면 리액트로 탭 구현 방법 코드 import React, { useState } from 'react'; const MainContent = () => { const [openTab, setOpenTab] = useState(1); return ( { e.preventDefault(); setOpenTab(1); }} data-toggle="tab" href="#link1" role="tablist" > 1번 탭 { e.preventDefault(); setOpenTab(2); }} data-toggle="tab" h..
[react] Object is possibly 'null' (ft. typescript, useRef) 오류 해결 react hooks에서 간단한 input 을 사용하는 구조에서, focus()를 사용하기 위하여 해당 input 태그에 useRef 를 삽입하고, const inputRef = useRef(null)로 선언을 하였는데, focus 처리시, Object is possibly 'null' 이라는 타입스크립트 오류가 났습니다. 오류 메시지 before import React, { useRef } from "react"; const Login = () => { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); //오류 발생 }, []); return ( ... ); }; export default Login; 해결 방법 con..
[js] return 값에 두개 이상의 명령문 코드를 넣어야 할 때 방법 함수에서 return 키워드를 사용하는 것은 return 키워드 뒤에 있는 내용이 함수 밖으로 반환된다 라는 것을 의미하지만, return 키워드가 사용된 부분에서 함수가 종료된다는 것도 의미합니다. 즉, return 키워드 때문에 함수가 종료되면 그 이후에 있는 코드는 실행되지 않습니다. 실무에서 긴 코드를 작성할때, return 값 자리에 여러가지 내용의 코드를 입력해야할 경우가 많습니다. 예시 const add = (a, b) => { return a + b; //이부분까지 실행 console.log('더하기'); //여기부터 실행안됨 } console.log(add(1, 3)); //결과: 4 return 값에 두개 이상의 명령문 코드를 넣어야 할 때 방법 if문 분기처리 const 함수 이름 =..
[js] 데이터 타입 확인 (ft. typeof 말고 함수) 자바스크립트에서 데이터 타입을 확인하는 방법입니다. typeof 보통 console.log(typeof 데이터)를 이용하여 콘솔에서 데이터 타입을 확인합니다. 이럴 경우, 문제가 발생합니다. null, 객체, 배열을 모두 object 객체로만 출력하는 것을 알 수 있습니다. 즉, 실무에서 객체와 배열의 타입을 확인해야만 할 경우, typeof로는 확인이 어렵습니다 콘솔창(결과창) 객체와 배열 중 데이터 타입이 무엇인지 구분이 필요할 경우 아래의 함수를 사용하면 특정한 타입을 알아낼 수 있습니다. 특히, object와 array를 구별하기 때문에 실무에서 자주 사용할 수 있습니다. function jsType(data) { return Object.prototype.toString.call(data).sl..
[react] 리액트로 css, js로 도넛차트 구현 react 로 css, js 를 이용하여 도넛차트를 구현합니다. 아래의 포스트에서, 라이브러리 없이, css와 js 만으로 도넛차트를 구현 하였는데, 이것을 react 버전으로 만들어 보았습니다. https://goddino.tistory.com/191 [js] css, js 이용하여 도넛차트 만들기 (ft. 원형차트, conic-gradient) css와 자바스크립트로 도넛 차트를 구현합니다. 구현 내용 - 도넛 차트(도넛처럼 같은데가 파진 원형 차트)를 구현 - 라이브러리가 아닌, 자바스크립트와 css로 적용 - css: conic-gradient() - js: setInterva goddino.tistory.com import React, { useEffect, useRef } from 'react..
[react] 리액트 tailwind 다이얼로그(모달, 팝업) 구현 style 라이브러리, tailwind를 적용하여 모달창 띄우기를 구현합니다. 구현 화면 구현 내용 react, hooks 방식 스타일 라이브러리, tailwind로 스타일 적용 확인 클릭시 다이얼로그 출현 X 버튼, 확인 버튼 클릭시 다이얼로그 화면 사라짐 tailwind로 다이얼로그 구현 부모 컴포넌트 import React, { useState, useContext } from "react"; import ModalAlert from "./ModalAlert"; const Parent = () => { const [openAlert, setOpenAlert] = useState(false); const onModalAlert = () => { setOpenAlert(!openAlert); } ret..
[js] css, js 이용하여 도넛차트 만들기 (ft. 원형차트, conic-gradient) css와 자바스크립트로 도넛 차트를 구현합니다. 구현 내용 - 도넛 차트(도넛처럼 같은데가 파진 원형 차트)를 구현 - 라이브러리가 아닌, 자바스크립트와 css로 적용 - css: conic-gradient() - js: setInterval, clearInterval - js를 이용하여 해당 비율만큼 애니메이션 효과 구현 화면 구현 화면 영상 자바스크립트 도넛차트 구현 라이브러리 없이 css와 js로 도넛 차트 애니메이션 구현 html 80% 50% 30% reset버튼 css .wrap { position: relative; padding: 5%; } .container { display: flex; gap: 15px; margin-bottom: 20px; } .chart { //큰 원 positio..
[git] netlify로 사이트 배포하기 (ft. 넷리파이 deploy) netlify에서 정적 사이트 배포하는 법입니다. netlify에서 사이트 만들기 netlify 회원가입 netlify 홈페이지로 이동하여, 깃허브 계정으로 회원가입을 진행합니다. https://www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com 깃허브 저장소의 프로젝트 연동 로그인 후, overview 페이지에서 Ne..
반응형

티스토리툴바