본문 바로가기
[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..
git, github 사용법 (ft. 깃허브, commit, push, pull 버전 관리) git, github를 이용한 프로젝트 버전관리 방법입니다. - 목차 - git, github의 차이점 git에서 로컬 버전 관리 github에서 원격 저장소 버전 관리 업로드 git, github에서 수정사항 버전 관리 git, github에서 branch 생성, 병합 git clone 방법 git reset 방법 git pull 방법 git과 github의 차이점 git은 로컬(나의 컴퓨터)에서 관리되는 버전 관리 시스템 github는저장소를 깃허브에서 제공해주는 클라우드 서버(원격 저장소) 방식으로 관리되는 버전 관리 시스템 팀을 통한 협업이 필요할 경우, 소스 공유가 필요하거나, 원격 저장소에 관리하여 로컬이외 다른 곳에서 사용하기를 원한다면 github에 업로드를 합니다. 따라서 git으로 먼저..
[js] 페이지 상단으로 자동 스크롤 이동 구현 (ft. gsap scrollTo) 우측 하단의 버튼 클릭시 화면의 상단으로 이동하는 애니메이션 효과를 구현합니다. 구현 내용 - material-icon, css 이용하여 버튼 만들기 - 버튼 클릭 시 화면이 페이지의 최상단으로 애니메이션 효과를 내면서 이동 - 페이지 최상단으로 이동하면서 버튼이 우측으로 사라짐 - 스크롤 내리면 일정 부분부터 버튼이 우측에서 나옴 구현 화면 스크롤 버튼 작동화면은 맨 아래에서 확인해주세요. 스크롤 탑 버튼 구현 material-icon, gsap cdn 설치 구글에서 material icon cdn을 검색 후 페이지로 이동하여 cdn 코드 복사 후 태그 사이에 삽입해주세요. 구글에서 gsap cdn을 검색하여 페이지 이동 후 gsap.min.js와 ScrollToPlugin.min.js 코드를 복사 후..
[react] react 모달창(팝업창) 구현 리액트 hooks로 간단한 모달창을 구현합니다. 구현내용 cdn 설치, 스타일은 기본만 사용 리액트 hooks 방식 버튼 클릭 후, 모달창 팝업 기능 구현 화면 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 구글에서 react cdn, bable cdn을 검색하여 페이지에서 cdn 코드 복사후, 태그 사이에 삽입합니다. 리액트 hooks 모달창, 팝업창 띄우기 html css body { padding: 50px; } .openBtn { background-color: #F9B514; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .modal { position: fixed; top: 0; lef..
[html] html 특수기호 코드 찾기 html 특수기호를 이용한 마크업이 필요할때, 이용하는 사이트입니다. html 특수기호 검색 사이트 구글에서 html entities를 검색해서 아래의 페이지로 들어가거나, 바로 아래의 링크로 이동해주세요. 원하는 기호를 찾아, 바로 복사하여 마크업 하면 됩니다. https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 자주 쓰는 html 특수 기호들 html 특수기호 마크업 예제 카피라이트(저작권) 의미하는 기호는 아래의 html 특수기호로 표시합니다. © 저작권 html 특수기호 사용방법 © Goddino. All Rights Reserved. 구현 화면
[css] 카드 뒤집기, 이미지 앞뒤 회전 3d 애니메이션 효과 CSS를 이용한 3차원 애니메이션 효과 설정입니다. 구현 내용 이미지에 마우스 올리면(hover시) 이미지가 옆으로 회전하면서 이미지의 뒷면이 출력되고, 이미지에서 마우스를 내리면 다시 원래 이미지로 회전하면서 다시 앞면 이미지가 나오게 됩니다. 카드 뒤집기와 같이 이미지를 앞면, 뒷면을 교차적으로 출력하면서 3차원의 애니메이션 효과를 css를 통하여 구현할 수 있습니다. css로 3차원 애니메이션 효과 기본 동작 html 앞면(이미지 앞면) 뒷면(이미지 뒷면) css body { padding: 30px; } .container { width: 150px; height: 200px; perspective: 300px; //부모의 자식 요소가 3차원의 애니메이션 효과를 가질때, 300px의 거리에서 보는..
[js] 떠다니는 이미지 애니메이션 구현(ft. 부유하는 요소, gsap.to) 화면상에서 둥둥 떠다니는 요소를 애니메이션 라이브러리, gsap으로 구현합니다. 구현 화면 세 개의 동그라미 요소가 위아래 반복적으로 움직입니다. (애니메이션 구현 화면은 맨 아래에서 확인) 떠다니는 이미지 애니메이션 구현 방법 gsap cdn 설치 easing 함수 사용하여 gsap.to() 속성 적용 gsap cdn 설치 구글에서 gsap cdn을 검색하여 해당 페이지로 이동하여 cdn 코드를 복사한 후 태그 사이에 삽입합니다. html css .wrap { position: relative; width: 600px; height: 500px; background-color: skyblue; overflow: hidden; margin: 0 auto; } .floating { position: abs..
[react] 리액트 챗봇 스타일의 대화형 설문 조사 화면 구현 최근에 회사 프로젝트에서 리액트를 이용한 간단한 설문조사 앱을 만드는 중입니다. 여러 가지 시안 중에서 앱에서 많이 볼 수 있는 대화형의 설문 조사 형식이 있어, 마크업의 일부를 간단하게 공유합니다. 여기서는 앱 화면에 차례대로 설문 문제와 대답을 보여주는 일부만 공개를 하였고, 모든 문제를 마치면 결과지를 보여주는 화면은 없습니다. 구현 화면 react 대화형 설문조사 앱 구현 설정 npm: npm 패키지 설정(create react 폴더 설정) style css: tailwind 설치 중앙 상태 관리: context api 화면 구현 순서: 테스트 문제, 보기 5문항 -> 나의 대답 선택 -> 나의 대답 결과 -> 다음 문제 폴더 구조 리액트 대화형 설문 테스트 화면 formData.js - 설문 조..
[css] 반응형 16:9 비율 유지 박스 컨텐츠 영상 삽입 16:9의 비율을 유지하는 이미지, 컨텐츠 영역을 만듭니다. 웹 또는 앱에 유튜브 영상 화면을 삽입할 경우, 유튜브 영상의 비율(영상 화면 삽입 이미지 사이즈)인 16대 9의 비율로 영역을 만들어 컨텐츠를 삽입니다. css에서 부모 요소와 padding-top 속성을 이용하여 너비와 높이를 일정 비율로 하는 크기의 박스를 만들 수 있습니다. 이런 방법으로 유튜브 영상 사이즈 16:9 비율 크기의 요소를 만들어 사이트에 삽입할 수 있습니다. 일정 비율 크기 설정 예제 html css .container { width: 400px; background-color: gold; } .item { width: 100%; height: 0; padding-top: 50%; } 화면 해당 요소에 height: 0; ..
admin 페이지, 관리자 사이트 템플릿 소개(ft. metronic) 관리자 admin 페이지 템플릿을 소개합니다. 웹사이트나 앱을 운영하기 위해서는 관리자 사이트, admin 페이지가 필요합니다. 이때 admin 페이지 템플릿을 이용할 경우, 디자인, 퍼블리싱 단계의 업무 시간을 단축시키고, 디자인과 기능이 훌륭한 사이트를 만들 수 있습니다. 어드민 페이지의 경우, 소비자에게 노출되는 것이 아니라, 관리자만 접속해서 보는 화면이기 때문에 따로 디자인이나 기획에 많은 resource를 투자하지 않기 위해, 간편한 템플릿을 많이 사용하기도 합니다. 그래서 퍼블리셔, 프론트엔드 개발자, 디자이너가 admin 사이트를 기획, 디자인, 퍼블리싱하는 과정에 활용할 수 있는 메트로닉 어드민 디자인 템플릿을 소개하겠습니다. metronic 템플릿 https://keenthemes.co..
[css] 반응형 유동적 너비에 따른 이미지 가운데 정렬 방법 반응형에 맞는 이미지 가운데 배치 방법입니다. 처음 화면에는 이미지나 컨텐츠가 가운데 정렬로 잘 되다가, 브라우저 너비를 늘리거나 줄였을 경우, 이미지 또는 컨텐츠가 가운데 유지가 안되거나 잘릴 경우가 많습니다. 부모 요소 혹은 요소에 css로 text-align: center 또는 margin: 0 auto 값을 주어도 브라우저가 유동적으로 움직임에 따라 요소가 가운데 유지가 안되는 한계를 가지고 있을 경우, 사용하는 정가운데에 배치하는 방법입니다. 가운데 배치 적용한 예 아래와 같이 브라우저 너비를 줄였을 경우에도 계속해서 이미지가 가운데 잘 배치되어있습니다. 처음 화면 브라우저 너비 줄였을 경우 화면 예제 코드 css 요소 가운데 정렬 구현 방법 left: 50%으로 브라우저의 절반만큼 왼쪽에서부터..
반응형

티스토리툴바