본문 바로가기
[react] 체크 박스 토글 기능 구현 (ft. new Set(), checked) react, set 객체를 이용한 체크박스 토글 기능 구현입니다. 구현 화면 구현 영상 구현 내용 - react, hooks 방식 - 체크 박스 토글 기능(한번 클릭 선택, 두번 클릭 취소) - es6 최신 문법, set 객체를 이용하여 체크된 요소들 넣어주기 react 체크박스 토글 기능 (new Set()) import React, { useState } from "react"; const Check = () => { const formData = [ { id: 1, name: "딸기" }, { id: 2, name: "바나나" }, { id: 3, name: "피자" }, { id: 4, name: "불고기" }, { id: 5, name: "김치" }, { id: 6, name: "볶음밥" }, ..
[react] vs code rsc 입력 후 자동 코드 설치 플로그인 react 기본 자동 완성 코드 기능 플러그인 입니다. react 사용자의 필수인 react 문법 코드 자동완성 플러그인입니다. rsc 또는 rcc를 입력하면 react 기본 코드가 emmet 기능처럼 자동 생성됩니다. rsc: hooks에서 사용하는 함수형 컴포넌트 rcc: class 타입의 컴포넌트 Reactjs code snippets rsc 입력 후 import React from 'react'; const Table = () => { return ( ); }; export default Table; rcc 입력 후 import React, { Component } from 'react'; class Table extends Component { render() { return ( ); } } e..
[react] pie 차트 (ft. 도넛 차트 라이브러리) react 도넛 차트 라이브러리입니다. react에서 간단하게 사용하는 파이 차트(도넛 차트) 라이브러리, react-minimal-pie-chart를 추천합니다. 구현 화면 react-minimal-pie-chart 사이트 https://www.npmjs.com/package/react-minimal-pie-chart react-minimal-pie-chart Lightweight but versatile SVG pie/donut charts for React www.npmjs.com piechart 기본 import { PieChart } from "react-minimal-pie-chart"; const Chart = () => { const data = [ { title: "One", value:..
[css] 이미지 애니메이션 효과 (ft. 무한 회전, 사라지기, 출현하기) css를 이용한 이미지 애니메이션 효과입니다. 웹이나 앱의 인트로 화면에서 주로 이미지 애니메이션 효과를 사용하게 됩니다. CSS - 무한 회전 애니메이션 .img { animation: rotate_image 6s linear infinite; transform-origin: 50% 50%; } @keyframes rotate_image { 100% { transform: rotate(360deg); } } CSS - 나타나는 애니메이션 .img2 { animation: rotate_image 6s linear infinite, scale1 6s linear infinite; transform-origin: 50% 50%; } .img2 { animation: rotate_image 6s linear ..
[html ] data- 속성 (ft. dataset, data-key, data property) html에 태그 안에 의미있는 속성을 추가하여 자바스크립트로 접근가능한 재미있는 기능, data 속성을 소개합니다. data- 속성 의미론적 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. 사용법은 태그 안에 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 자바스크립트와 css로 특정 html 요소에 접근이 가능합니다. blue pink 자바스크립트에서 data 속성 접근 dataset을 통해 접근합니다. 이벤트 위임을 통해 부모에 이벤트를 등록하여, 여러 하위 요소 중 event.target으로 action을 일으킨 특정 요소에만 접근할 수 있습니다. 인터넷 익스플로어10 이하는 dataset을 지원하지 않아 getAttribute()를 대신 사용합니다. let btn = docum..
[js] 스크롤 이동, 스크롤 현재 위치 (ft. scrollTop, scrollIntoView) web 스크롤 API, window.scrollTo() 입니다. 모바일 웹뷰에서 페이지를 이동하거나, 컴포넌트를 교체할때마다 이전 페이지나 컴포넌트의 스크롤 위치가 유지될때 스크롤을 강제로 상위로 이동시킬때 사용합니다. clientHeight, scrollHeight, offsetHeight 차이 clientHeight: 요소의 내부 높이, 패딩 값은 포함, 스크롤바, 테두리, 마진은 제외 scrollHeight: 요소에 들어있는 컨텐츠의 전체 높이(스크롤 끝까지 내렸을때), 패딩과 테두리가 포함, 마진은 제외 offsetHeight: 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함, 마진은 제외 scrollHeight > offsetHeight > clientHeight 스크롤 최상..
[react] react-datepicker 커스텀 react-datepicker를 커스텀하는 방법 입니다. react에서 사용하는 datepicker 중 가장 인기있는 캘린더 데이트피커 라이브러리, react-datepicker 입니다. react-datepicker는 기본적으로 제공하는 기능이 많아 여러가지 옵션으로 출력이 가능하고, 여기서 css를 이용하여 이쁘게 UI를 만들 수 있습니다. 구현 내용 - react, hooks 방식, style은 tailwind, css 사용 - 예약일 버튼 클릭시 datepicker 토글(출력/사라짐) 기능 - datepicker 출현시 현재 날짜 기본 설정 - datepicker에서 날짜 클릭 후 확인 선택시 예약일 저장, 취소시 datepicker 닫기 - datepicker 한국어 설정 - 화면에 날짜 출력시..
[js] set 객체 사용법 (ft. new Set 중복값 제거) Set 객체 es6 최신 문법의 중복을 제거한 값들의 집합입니다. 특정 요소 추가: add 특정 요소가 있는지 확인: has (boolean 값으로 반환) 특정 요소 제거: delete 모든 요소 제거: clear 요소의 개수 반환: size (배열의 length) set 객체 선언 let mySet = new Set(); set 객체 사용법 (MDN 문서 참조) let mySet = new Set(); mySet.add(1); // Set { 1 } mySet.add(3); // Set { 1, 3 } mySet.add(3); // Set { 1, 3 } mySet.add('text'); // Set { 1, 5, 'text' } let i = {a: 1, b: 2}; mySet.add(i); //결과..
[js] null 병합 연산자 '??' (ft. 기본값 매개변수, or 연산자 '||') es6 최신 문법, null 병합 연산자에 대해 알아봅니다. null 병합 연산자 '??' (nullish coalescing operator) es6에서 새로 나온 문법 null 병합 연산자를 이용하여 매우 짧은 문법으로 코드를 심플하게 작성할 수 있습니다. 사용 방법 a ?? b //a가 null 또는 undefined 일때 b 해석: 변수 a의 값이 null도 아니고, undefined가 아니면 a, 그 외에는 b 왼쪽 코드(a)가 null 또는 undefined일 경우, 오른쪽 코드(b)가 실행 a ? "a" : "b"와 같은 형식의 삼항 연산자와 비슷한 문법 x = a ?? b와 동일한 코드를 삼항 연산자로 나타내면, x = (a !== null && a !== undefined) ? a : b..
[git ] error: You have not concluded your merge (MERGE_HEAD exists) 오류 해결 local에서 git을 2번 commit, push 를 하고, 실서버에 git pull origin master 를 하니, 이와 같은 오류 메시지가 떴습니다. 실서버에서 커밋을 한번 한 후에 다시 git pull를 하여 내려받으면 됩니다. 오류 메시지 error: You have not concluded yur merge (MERGE_HEAD exists). 해결 방법 git merge --abort //머지 취소 git commit am "커밋 메시지" //커밋 처리 git pull
[react] pagination 구현 (ft. react-js-pagination) react hooks에서 pagination을 구현하고, 라이브러리 react-js-pagination을 사용하여 구현해봅니다. 구현 내용: 1. react hooks 2. 최소한의 css만을 사용합니다. 3. axios로 jsonplaceholder에서 더미데이터를 가져옵니다. 구현 화면 폴더 구조 npm, axios 설치 cra로 프로젝트를 생성하고, 서버통신을 위해 axios를 설치합니다. npm create react-app react-pagination //react-pagination 프로젝트 생성 npm i axios //axios 설치 App.js import React, {useState, useEffect} from 'react'; import axios from 'axios'; imp..
[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..
반응형

티스토리툴바