본문 바로가기
[js] 만 나이 계산하기 자바스크립트로 만나이를 계산합니다. 만 나이 계산하는 함수 (파라미터로 생년월일 넘겨줄때) export const gettingOriginalAge = (birth) => { //birth가 1990-03-05, string 형식 const today = new Date(); //현재 날짜 let age = today.getFullYear() - Number(birth.slice(0, 4)); let mon = (today.getMonth()+1) - Number(birth.slice(5, 7));//getMonth()는 0-11로 출력되므로 +1 if (mon < 0 || (mon === 0 && today.getDate() < Number(birth.slice(8, 10)))) { return age..
[js] day.js 사용법 (ft. 날짜, 시간 라이브러리, moment.js) 자바스크립트를 통해 날짜와 시간을 출력하는 라이브러리, day.js 입니다. 자바스크립트로 날짜와 시간을 출력할 경우, 직접 코드를 작성할 경우도 있지만, 라이브러리를 통해 직접 함수를 만드는 번거로움을 피할 수 있습니다. 과거에는 Moment.js을 많이 사용하였지만, 용량이 너무 많이 차지하여, 최근에는 Moment.js의 경량 버전인 day.js를 많이 사용하고 있습니다. day.js moment.js의 API 형식은 그대로 유지하면서 용량은 33배 가볍습니다. 사용법이 moment.js와 거의 같다고 보면 되기에 편하게 day.js로 갈아탈 수 있습니다. day.js 사이트 https://www.npmjs.com/package/dayjs dayjs 2KB immutable date time lib..
[react] next.js 사이트 만들기 (ft. 동적 라우팅) ver.2 react 라이브러리, next.js로 만튼 사이트 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 화면 http:.../photos/1 와 같이 상세 페이지로 접근합니다. 폴더 구조 pages > photos.js import HeadInfo from "../components/HeadInfo" import Image from 'next/image' import styles from "../styles/Photos.module.css" import Link from 'next/link' const photos = ({ photos }) => { return ( Gallery {photos.map(photo => //여기서 id를 path로 보내면서 링크 ..
[react] next.js 사이트 만들기 (ft. getStaticProps, getServerSideProps) ver.1 react의 라이브러리, next.js로 만든 사이트 예제입니다. 예제는 유튜버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 영상 구현 화면 Home 페이지 Photes 페이지 photo 이미지별 세부 페이지 폴더 구조 getServerSideProps, getStaticProps getServerSideProps 페이지에 들어올때마다 즉시 데이터 전송 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옴 export const getServerSideProps = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/posts?_start=0&_end=10') const posts = awai..
[css] 모달창 오픈시 css로 스크롤 방지 모달창(팝업) 오픈시 css를 통한 스크롤 방지입니다. css를 이용한 scroll을 방지 모달창이 오픈되었을때, 감싸고 있는 부모요소에 아래의 스타일을 적용하면 됩니다. 모달창 open이 true시 적용하고, false시 없애주어 scroll 기능을 되살려줍니다. .wrapper = { position: fixed; width :100%; height: 100%; overflow: hidden; }
[react] Object is possibly 'null' (ft. typescript, style) 오류 해결 react hooks에서 자바스크립트를 이용해 html element에 접근하여 Object is possibly 'null' 이라는 타입스크립트 오류가 났습니다. 이유는 객체가 비어 있을 수도 있는데 해당 객체의 내부 프로퍼티나 메소드를 사용할 때 입니다. before const handleClick = () => { let scrollBlock = document.querySelector('.scrollBlock'); scrollBlock.style.backgroundColor = "#F6CB44"; }; 해결 방법 타입 단언 사용 (type assertion) const handleClick = () => { let scrollBlock = document.querySelector('.scrollB..
[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
투명 배경의 파비콘 만드는 법(ft. favicon) 일반 파비콘을 제작하는 사이트는 png 파일을 넣어도, 흰 색 배경의 ico 파일로 생성해줍니다. 하지만 투명 배경의 파비콘이 필요할 때가 많지요? 이럴때 사용하는 사이트입니다. conventico https://convertico.com/ ConvertICO.com - Convert PNG to ICO and ICO to PNG files This free online icons converter allows you to convert PNG to ICO files with ease. convertico.com 점선 안의 박스에 이미 작업된 로고의 png나 img 파일을 넣으면 >바로 배경이 없는 ico 파일이 제작됩니다. icoconvert 위의 사이트로 진행시 크기가 클 경우, 원이미지 사이즈를 조..
[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: '' });
반응형

티스토리툴바