goddino의 등록된 링크

 goddino로 등록된 티스토리 포스트 수는 341건입니다.

[py] 네이버 블로그 좋아요 자동화 (ft. 셀레니움 actionchains) [내부링크]

구현 내용 1. 셀레니움 라이브러리의 웹드라이버 크롬 실행 2. 네이버 자동 로그인 3. 네이버 블로그로 이동 (3~5번 무한 반복) 4. 최근 포스팅 클릭 5. 좋아요 클릭 actionchains 매크로 프로그램을 만들때 사용..

[py] 사이트 로그인 방법 (ft. 보안 처리 유무) [내부링크]

구현 과정 셀레니움 라이브러리의 웹드라이버 크롬 실행 사이트 자동 로그인 실행 로그인 자동화(단순 로그인, 보안 처리 없음) id = driver.find_element(By.XPATH, 'id xpath') #xpath, css selector, id, class..

[py] 인스타그램 좋아요 자동화 [내부링크]

구현 화면 구현 내용 인스타그램 로그인 후 '좋아요반사' 태그 페이지 호출 페이지 내 모든 게시물 클릭 후 세부 페이지에서 좋아요 후 닫기 아쉬운 점 현재 페이지에 9개의 피드가 올라와 9가지 좋아요 자동화가..

[api] api 사이트 모음 [내부링크]

더미 api를 제공하는 사이트들 입니다. 여러가지 API 모음 https://github.com/public-apis/public-apis GitHub - public-apis/public-apis: A collective list of free APIs A collective list of free APIs. Co..

[git] git commit 없이 강제 git pull [내부링크]

git 최신버전으로 커밋 없이 강제 git pull로 덮어쓰는 방법입니다. 홈페이지를 여러 개발자가 작업하다보면 git pull시 merge 오류와 git commit 하라는 메시지가 뜨는데요. 로컬 상태에 상관없이 commit 없이..

[py] pyqt5 설치, 기본 세팅, Qt designer 설치 [내부링크]

Qt designer 설치 Qt designer는 PyQt 디자인 편집기 + 구글에서 qt desinger download 검색하여 다운로드 Mac 오류 해결 방법 개발자를 확인할 수 없기 때문에 열 수 없습니다. 알림창 해결 방법 - 시스템 환..

[py] 네이버 연관검색어 결과 크롤링 [내부링크]

ajax를 이용한 네이버 자동검색 결과 크롤링 구현 내용 네이버 검색어 입력시 연관 검색어 리스트 크롤링 ajax를 호출하는 request url을 이용해 페이지 호출 검색어 + ㄱ ~ ㅎ까지 추출하여 메모장(.txt)에 저장..

[react] 검색어 자동완성 구현하기 [내부링크]

검색어 자동완성 구현하기 구현화면 구현내용 react hooks를 이용한 검색어 자동완성 기능 useSelect, useDispatch 사용 searchForFood 함수는 음식 찾기 api onResetSearchedFood 찾은 음식 없애기 api searche..

[css] 텍스트 줄바꿈 해결 [내부링크]

텍스트가 영역을 넘칠때 줄바꿈 처리하는 css 줄바꿈 처리 css 태그 안에 텍스트 입력을 하고 바로 출력시 줄바꿈이 적용안되었을 경우, 줄바꿈을 그대로 적용해주는 css white-space: break-spaces; before af..

[py] 크롤링 데이터 엑셀에 저장 [내부링크]

예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. 구현 내용 openpyxl 라이브러리 사용 네이버 주식정보의 3가지 종목 현재가 크롤링 현재가만 비워진 엑셀파일 미리 저장 크롤링..

[react] throttle 적용하기 [내부링크]

react에 throttle를 적용한 코드입니다. throttle 동일한 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격으로 콜백 함수의 실행을 보장합니다. 즉 일정시..

[py] request 이용하여 웹 크롤링 예제 [내부링크]

request를 라이브러리를 이용해 네이버 크롤링 예제입니다. 크롤링 주제: 네이버에 코딩하는 갓디노를 검색하여 나오는 데이터 크롤링 코드 import requests from bs4 import BeautifulSoup #print(response.stat..

[py] 메일 자동화 발송 (ft. 셀레니움) [내부링크]

파이썬, 셀레니움을 이용한 네이버 메일 자동화 보내기 입니다. 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. 네이버 메일 자동화 보내기 코드 본문인 body 부분이 iframe 태그에 쌓여..

티스토리 블로그 html 배너 출력 플러그인 사용법 [내부링크]

티스토리의 플러그인을 사용하여 html 배너 생성하는 방법입니다. 사이드바에 배너 생성하기 티스토리 블로그 메인화면의 사이드바에 html 배너를 생성하겠습니다. html 배너 플러그인 설치 티스토리 관리 > 플..

[py] 이미지 사이즈 줄이기 [내부링크]

파이썬을 이용하여 이미지 사이즈를 일괄 수정하는 방법입니다. 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. 이미지 조정 라이브러리 pillow pip install pillow #이미지 처..

[py] 파이썬 랜덤 이미지 생성 [내부링크]

파이썬을 이용한 랜덤 이미지 100개를 자동 생성입니다. 구현 화면 랜덤이미지 만들기 라이브러리 numpy pip insall pandas #pandas 설치하면 numpy가 같이 설치 됨 pillow pip install pillow #이미지 처리 라..

[react] react-infinite-scroll-component 사용법 (ft. 무한 스크롤) [내부링크]

react-infinite-scroll-component 라이브러리 사용법입니다. 화면구현 react-infinite-scroll-component 기본 예제 import React from 'react'; import InfiniteScroll from 'react-infinite-scroll-component';..

[py] 파일 및 폴더 정리하기 [내부링크]

예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. os 라이브러리 os라는 라이브러리를 사용하고, 내부 저장된 라이브러리로 별도 설치 필요 없습니다. import os 폴더 생성, 폴더 내 파일..

[py] 파이썬 마우스 조작, 키보드 조작 (ft. pyautogui) [내부링크]

pyautogui 설치 파이썬 마우스 키보드 조작 라이브러리 pip install pyautogui # mac은 pip 대신 pip3 마우스 좌표 찾기 import pyautogui pyautogui.mouseInfo() # 좌표 찾은 후 F2 단축키로 복사 마우스 자..

[py] 파이썬 반복문 예제 (ft. for문, while문) [내부링크]

예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. for문 list 예제 num_lists = [1,2,3,4] for i in num_lists: print(i*2) //2 //4 //6 //8 range 예제 gugudan = int(input('몇단을 출력..

[py] 네이버 로그인 자동화 (ft. 셀레니움) [내부링크]

셀레니움을 이용한 네이버 로그인 자동화 구현 입니다. 예제는 스타트 코딩, 이것이 진짜 크롤링이다 기본편 강의를 들으면서 공부한 내용입니다. 구현 화면 자동입력 방지 문자 알림 해결 id.send_key..

[py] 셀레니움 기본 설정 [내부링크]

셀레니움 작업시 필요한 기본 설정 코드입니다. 셀레니움 설치된 버전 확인 pip list # 결과창에서 selenium 찾기 mac은 pip 대신 pip3 셀레니움 설치 pip install selenium #window pip3 install selenium #..

[py] 네이버 상품 목록 크롤링 해오기 (ft. 셀레니움, csv로 옮기기) [내부링크]

셀레니움을 이용한 동적사이트 데이터 csv로 가져오기 예제는 스타트 코딩, 이것이 진짜 크롤링이다 기본편 강의를 들으면서 공부한 내용입니다. 구현 화면 mac - 여러페이지 크롤링 mac- 단일 페이지 크롤링 win..

[py] ModuleNotFoundError: No module named 'selenium' [내부링크]

selenium 설치 후 에러 대응 No module named 'selenium' 오류 셀레니움 라이브러리를 사용하기 위해서 먼저 필요한 두가지 조건이 선행되어야 합니다. 구글 드라이버 설치 pip install selenium 명령어로 셀레..

[react] 여러개 토글 버튼 구현 [내부링크]

react에서 한 페이지 여러개의 토글 버튼 구현하기 입니다. 구현화면 구현 영상 부모요소 import React from 'react'; import ToggleBar from "../../components/myInfo/ToggleBar"; const Alarm = () => { cons..

[js] 자바스크립트 null 이지만 0은 아닐 때 [내부링크]

자바스크립트에서 변수가 null 이지만 0은 아닐 때를 찾는 방법입니다. 자바스크립트 null 이지만 0은 아닐 때 null이지만 0을 걸러낼 경우 if (!foo && foo !== 0)

[react] resize 적용하는 법 [내부링크]

react에서 자바스크립트의 이벤트를 이용해 미디어쿼리 적용하는 방법입니다. resize 적용 코드 const Container = () => { const [narrowWidth, setNarrowWidth] = useState(false) const widthControlFn = () =..

[react] 하위 컴포넌트별로 특정 요소 on/off 설정 [내부링크]

하위 컴포넌트별로 버튼과 같은 특정 요소 on/off 설정입니다. 화면구현 구현내용 상위와 하위 컴포넌트(oneday card)로 구성된다. 더보기 아이콘 클릭시 해당 카드의 팝업 버튼이 오픈된다  토글 기능으로 한번..

[react] background-image 에 data 넣기 [내부링크]

background-image 에 data 넣을때 코드 입니다. background-image 에 data 넣기 style={{ background: "url(" + `${url}` + ") no-repeat center" }}

[css] 넘치는 텍스트 줄바꿈 처리 [내부링크]

css를 이용한 넘치는 텍스트 줄바꿈 처리입니다. 넘치는 텍스트 줄바꿈 처리 div {word-break:break-all;} before after

[py] 크롤링한 데이터 엑셀 저장, 수정 [내부링크]

파이썬의 openpyxl 라이브러리를 이용하여 데이터를 엑셀에 저장/수정을 해보겠습니다. openpyxl 라이브러리 파이썬에서 엑셀을 다를 수 있게 도와주는 라이브러리 자세한 사용방법은 공식 문서 참조 openpyxl 설..

[py] 네이버 뉴스 타이틀, url 크롤링 [내부링크]

네이버 뉴스의 특정 검색어를 여러페이지에 걸쳐 제목과 링크를 크롤링합니다. 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. 인터넷 주소 형식 Protocol - Domain - Path - Parame..

[js] 서버 없이 form에서 데이터 전송 기능 구현 (ft. Google Apps Mail) [내부링크]

웹사이트에서 서버 없이 프론트에서 contact 기능을 구현 합니다. 웹사이트에서 본인의 이름, 연락처, 메일, 메시지를 보내는 컨택트 기능을 사용할 때, 보통 백엔드를 이용해 서버에 데이터를 저장합니다...

[react] env 환경변수 세팅 (ft. process.env) [내부링크]

react에서 env 변수 설정과 사용법 입니다. env 프로젝트 개발 시 API_KEY 또는 DB 정보, port url 등 git 오픈소스에 올리면 안되고, 개발자만 알아야 하는 고유의 값들이 있습니다. 이 값들 파일 외부에 저장시..

[js] 배열과 배열의 비교 (compare arrays in javascript) [내부링크]

배열과 배열이 같은지 여부를 확인하는 방법입니다. 배열과 배열을 === 로 비교하였을 때 값은 false 입니다. let arr1 = [1,2,3]; let arr2 = [1,2,3]; console.log(arr1===arr2); //false 배열과 배열의 비교..

[css] 강제 가로 모드 [내부링크]

세로화면에서 강제로 가로 모드로 적용하는 법입니다. 모바일 화면 웹을 만들 때, 텍스트가 꽉 찬 테이블(시간표, 식단표)를 만들때 세로 화면에서 강제로 가로모드의 화면을 만들때가 있습니다. 단순히 스타일에..

[js] 디데이 카운더 기능 라이브러리 [내부링크]

웹 디데이 카운터 표시할때 유용한 라이브러리 입니다. Time and Date https://www.timeanddate.com/ timeanddate.com 5 Planets queue up along with the Moon, a Super Strawberry Moon shines in the night sk..

[js] 팝업창 오픈 후 배경 스크롤 방지 [내부링크]

자바스크립트에서 팝업창 오픈 후 뒤의 배경의 스크롤 막는법입니다. 팝업창 오픈 후 배경 스크롤 방지 const body = document.querySelector('body') const onOpenGuide = () => { //팝업창 오픈시 body.st..

[js] 천자리 콤마 적용 (천자리 점찍기) [내부링크]

자바스크립트를 이용하여 숫자에 천자리 콤마 찍는 방법입니다. toLocaleString() 추천하는 방법입니다.  toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 세팅해줍니다. 파라미터가 빈..

[react] 카카오톡 공유하기 기능 구현 [내부링크]

react에서 카카오톡 공유하기입니다. kakao development 앱 등록하여 자바스립트 키 복사 앱 등록 후 사이트 도메인 url 주소를 등록합니다. 자바스립트 키를 복사해 둡니다. 카카오톡 sdk 추가 useEffect(() =..

[git] You have not concluded your merge (MERGE_HEAD exists) [내부링크]

git pull 후 에러메시지 error: You have not concluded your merge (MERGE_HEAD exists). 해결방법 merge 취소 git merge --abort commit git status git commit -m "커밋 내용" git pull git pull origin master

[js] 페이지내 특정 위치로 스크롤 이동하기 [내부링크]

제이쿼리를 이용해 버튼 클릭시 특정위치로 스크롤 이동하는 방법입니다. 주로 랜딩페이지 상단 메뉴바에 많이 사용되는 기능합니다. 버튼 클릭시 페이지내 특정 위치로 스크롤 이동합니다. 아래의 코드를 사용하..

[js] 문자열 특정 문자 추출하기 [내부링크]

substring을 사용하여 특정문자열만 추출합니다. url path에서 특정 구간만 추출하여야 할 경우, substring을 이용해 특정문자열만 추출할 수 있습니다. 원본 코드: 아래 코드에서 EncodeData= 뒤에 복호화된 코..

[js] 배열 map으로 object에 key 추가하기, value 추가 [내부링크]

map으로 object에 key 추가하는 방법입니다. before //datas 0: {day: '2022-05-10'} 1: {day: '2022-05-11'} 2: {day: '2022-05-12'} 3: {day: '2022-05-13'} 4: {day: '2022-05-14'} 5: {day: '2022-05-15'} 6:..

[css] table border에 border-radius 적용하기 [내부링크]

table border에 border-radius 적용하는 방법입니다. 스타일에서 border-radius와 border를 적용시 border가 rounded 처리가 안될 때가 있습니다 . 이럴때는 스타일에 추가적으로 border-collapse: seperate 을..

[react] useState는 비동기? [내부링크]

useState의 비동기적 동작에 대해 알아보았습니다. react로 프로젝트로 몇 개 진행하면서 자연스럽게 알게 되었지만 개념을 제대로 정리해 본 적이 없어 아주 중요한 react hooks useState는 동기인가 비동기인가..

[react] react-datepicker를 커스텀 (ft. 여러개 날짜 표시) [내부링크]

react-datepicker로 여러개의 날짜를 표시하는 커스텀입니다. 보통의 데이트 피커는 달력을 오픈하여 원하는 날짜를 지정하는 방식의 구현을 하는데 이번에는 달력에서 여러개의 날짜를 한번에 보여주는 디자인으..

[js] 자바스크립트 debugger 활용 [내부링크]

자바스크립트에서 디버깅시 debugger 기능을 활용할 수 있습니다. debugger debugger문을 삽입한 시점이 breakpoint가 되어 디버깅을 할 수 있음 Call Stack 내역을 통해 호출 스택의 진행 순서를 알 수 있..

[js] 자바스크립트 함수 선언과 함수 호출 [내부링크]

자바스크립트 함수와 함수 호출에 관한 설명입니다. 함수 선언 코드 형식1 es6 함수 문법: 화살표 함수 아래 함수에서 { } 는 객체가 아니라 블럭 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 -> const add = (..

[react] react 차트 라이브러리 추천 [내부링크]

react 차트 라이브러리 괜찮은 것을 소개합니다. 1. nivo 커스텀 기능이 정말 잘 되어 있음 다양한 차트 종류 사이트 상에서 커스텀 적용하여 미리보기 가능 결과 코드를 바로 복사하여 사용 https://nivo.rocks/..

[css] 웹페이지 이미지 영역에 맞추어 영상 삽입 [내부링크]

웹페이지에서 정해진 이미지 영역에 딱 맞추어 영상 삽입하는 방법입니다. 주로 웹사이트나 블로그의 상세 페이지에서 html, css로 페이지를 만들때 미리 만들어 놓은 이미지 안에 맞추어 유튜브와 같은 영상을..

[js] onclick 이벤트 링크 넣기 [내부링크]

onclick 이벤트를 이용해 링크를 넣는 방법입니다. html에서 링크를 연결할 때는 주로 를 연결하는데 다른 방법으로 태그에 onclick 이벤트를 걸어 링크를 삽입할 수 있습니다. onclick 이벤트 링크 넣기 oncl..

[git] git 실서버 올리기 [내부링크]

git 프로젝트 실서버 올리기 프로젝트를 어느정도 구현을 하면 실서버에 올리는 작업을 하게 됩니다. 먼저 실서버 주소와 최신 작업까지 git에 올라가 있어야 합니다. git 실서버 올리기(처음 등록 후 올리기) 실..

[js] html 이미지 저장하기 기능 구현 (ft. html2canvas) [내부링크]

html 라이브러리를 통해 이미지 저장하기 기능입니다. html2canvas html을 canvas로 변환하여 캡처된 화면을 이미지 저장해주는 라이브러리 입니다. https://www.npmjs.com/package/html2canvas html2canvas Scre..

[react] react의 scroll 이벤트 사용법 [내부링크]

react hooks에서 스크롤 이벤트 사용법입니다. 지난 포스팅에서 useEffect 안에서 scroll으로 인한 렌더링 문제에 관해 다룬 적이 있었는데, 오늘은 react에서 스크롤 이벤트를 사용하는 방법을 공유하고자 합니..

[react] html 카메라 갤러리 이미지 불러오기 보여주기 DB 보내기 [내부링크]

react에서 web API를 이용해 html 갤러리 이미지 불러오기 보여주기 기능입니다. 구현영상 web api 이미지 불러오기 보여주기 기능 코드 이미지 파일 불러오기 input type="file" 로 파일 업로드 기능 input 태..

[react] react-datepicker 커스텀 (ft. redux-toolkit 연결) [내부링크]

react-datepicker를 커스텀하여 redux-toolkit을 이용해 데이터를 관리합니다. 프로젝트를 할 때 react-datepicker를 사용할 때가 빈번합니다. 커스텀하기에 가장 flexible한것 같아서 사용하고 있는데 이번에는..

[react] react에서 svg 불러오는 방법 [내부링크]

react에서 이미지 적용을 위해 svg 파일을 불러오는 방법입니다. 1. img src에서 불러오는 경우 2. import 후 img src에서 불러오는 경우 import Home from 'mobile/Home.svg'; 3. background image에 불러오는..

[react] 체크박스 구현 (ft. 전체 선택, 전체 해제) [내부링크]

react에서 체크박스 부분 체크, 전체 체크, 전체 해제 구현입니다. 구현 영상 부모 컴포넌트 import React, { useState } from 'react'; import MealTimeCard from './MealTimeCard'; const MealChooseCard = ()..

[react] useEffect 안에서 scroll으로 인한 렌더링 문제 [내부링크]

useEffect 내 scroll 이벤트 반복 렌더링을 lodash throttle로 최적화 시키는 법입니다. 프로젝트 진행 중에 스크롤 이벤트를 걸어 스크롤 높이에 따라 조건을 걸어 hidden, block 처리 기능이 필요했습니다. 하..

[js] 단어 filtering 다중 단어 filtering (ft. includes, some) [내부링크]

원하는 단어 또는 다중 단어 한번에 필터링하기 입니다. 배열 안에서 특정 단어 또는 text가 들어간 요소만 추출하거나 제외시키는 작업이 필요할 경우 사용합니다. filtering에 자바스크립트의 includes와 some..

[js] 반응형 이미지 맵 구현 (ft. image-map 라이브러리) [내부링크]

js 또는 react에서 라이브러리를 이용해 반응형 이미지 맵을 구현합니다.  react에서 resposive image map 구현을 시도할때 가장 유명한 라이브러리는 jQuery를 이용한 rwdimagemap 라이브러리인데 react에서 jQ..

[react] react 에서 jQuery 사용하기 [내부링크]

react에서 제이쿼리를 설치하여 사용하는 방법입니다. npm으로 jQuery 설치 npm i jquery npm 설치 후 package.json에서 jquery를 확인합니다. import jquery code import $ from "jquery"

키보드 이모티콘 이모지 단축키 (ft. window, mac) [내부링크]

이모티콘 이모지를 불러오는 키보드 단축키입니다. 키보드 이모티콘 단축키 window window 키 + 마침표 또는 window 키 + ; mac control + command + space 키

[react] npm install 설치시 npm ERR! code ERESOLVE [내부링크]

npm install 중 npm ERR! code ERESOLVE 오류입니다. react에서 react 차트 패키지인 recharts를 설치하려고 npm install을 하던 중 에러가 발생하였습니다. 오류 메시지 npm ERR! code ERESOLVE npm ERR! ERESOL..

[react] Warning: `value` prop on `input` should not be null. [내부링크]

react로 form 작업할 때 자주 나타나게 되는 warning 이에요. Warning 오류 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for..

[js] 두가지 배열 합치기, 중복되는 요소 찾기 [내부링크]

두가지 배열 합치기(배열 합집합) 배열 합치기 예시 전개 연산자 spread operator(...)를 이용해 두 배열을 그대로 합칩니다. 여기서 중복된 요소를 제거하기 위해 new Set으로 한번 묶어줍니다. let arr1 =[1,2,..

[js] find includes 차이 [내부링크]

array에서 사용하는 메소드 find()와 includes()의 비교입니다. array.find() find() 메서드는 주어진 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefinded를 반환합니다. 찾은..

[js] 자바스크립트 코드 줄이는 방법 [내부링크]

js 코드를 더 짧게 줄이는 몇가지 방법입니다. 자바스크립트 코드 축약 방법 1. or 조건문 (||) 2. and 조건문 (&&) 3. null, undefined, ' ' 체크 4. 삼항연산자 5. 숫자 형변환 1. or 조건문 (||) || 대신 in..

[react] axios headers authorization 추가 [내부링크]

axios headers authorization 추가 방법입니다. 아무나 데이터 접근을 못하게 하기 위해서 headers에 token값을 추가하여 token값이 있어야 데이터를 불러오게끔 처리합니다. Bearer란 기본적인 의미는 정보의..

[html] 자바스크립트 코드 없이 자동완성 검색 구현하기 [내부링크]

js코드 없이 html 만으로 자동완성검색을 구현합니다. 구현화면 자바스크립트 코드 없이 자동완성 검색 구현 html 코드

[js] button submit 막기 (ft. form) [내부링크]

button의 submit 방지하는 방법입니다. form 태그에서 내에 위치하는 button은 클릭 시 항상 onSubmit 속성의 함수를 실행하는데요. button에 뒤로 가기 또는 취소의 기능을 원할때는 onSubmit 기능을 막아야 합..

[react] 검색 기능 구현하기 [내부링크]

react에서 fitler, include를 이용한 검색 기능 구현입니다. html input 코드 input value 속성을 넣어줍니다. onSearch(e)}> 검색 onChange action 코드 input 태그에서 onChange action을 통해 input value값에..

[react] Warning: A component is changing an uncontrolled input to be controlled... [내부링크]

react에서 태그 사용후 나온 warning입니다. Warning 오류 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defin..

[react] Warning: `value` prop on `select` should not be null. [내부링크]

react에서 select 태그 사용할때 나오는 warning입니다. Warning 오류 Warning: `value` prop on `select` should not be null. Consider using an empty string to clear the component or `undefined` for unco..

[react] useEffect 메모리 누수 Can't perform a React state update on an unmounted component... [내부링크]

useEffect의 잘못된 사용으로 인한 메모리 누수 warning 입니다. Warning 오류 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory..

[js] 이미지 특정 위치 클릭시 이벤트 처리 (ft. 특정 좌표 area, map) [내부링크]

이미지에서 특정 좌표 클릭시 이벤트 구현입니다. 태그는 이미지맵을 만드는 태그입니다. jpg, png, svg 와 같은 이미지에 링크를 걸어주어 화면 이동을 가능하게 합니다. 많이 사용할 일은 없지만 복잡한 지도같..

[react] framer motion 사용법 [내부링크]

react faramer motion 라이브러리를 이용해 동적인 애니메이션을 구현합니다. framer motion 설치 npm install framer-motion framer motion 제공 기능 react에서 framer motion을 이용하여 디양한 애니메이션(tr..

[react] swiper.js으로 timepicker 커스텀 (swipe slide event) [내부링크]

swiper.js를 커스텀하여  timepicker를 구현합니다. 구현 화면 구현 영상 구현 내용 swiper.js를 설치하여 react에서 사용 css는 tailwind 라이브러리 사용(중요하지 않아 아래 제공된 코드에서는 거의 삭제)..

무료 아이콘 다운로드 사이트 (ft. icon svg, png, 일러스트, 벡터) [내부링크]

아이콘 무료 다운로드 사이트 입니다. 1. icon finder 아이콘파인더 https://www.iconfinder.com/ 6,025,000+ free and premium vector icons, illustrations and 3D illustrations Iconfinder is the world's la..

[js] 자바스크립트 import , export 개념 [내부링크]

import, exprot의 가져오기, 내보내기 개념입니다. 자바스크립트의 import, export라는 키워드를 통해서 가져오기, 내보내기를 실행합니다. import 사용 예제 1 npm install로 node module 설치 후  node_m..

[js] object의 key name을 함수 parameter로 받아 바꾸는 방법 [내부링크]

함수 argument로 부터 값을 받아 객체 key 이름을 지정하는 방법입니다. 적용 전 예시 fnName = (type) => { return { type: { fill: 'gray' } } } 적용 후 사용 후 key를 대가로로 묶어주시면 됩니다. fnName =..

[react] 데이터(json) html 태그 화면 렌더링 방법 (ft. html-react-parser) [내부링크]

api 호출로 data 출력할때 html를 넣어 바로 렌더링 시킬때 사용법 입니다. html-react-parser 라이브러리를 사용할 수 있습니다. 라이브러리를 이용해 html를 react의 문법인 jsx 로 변환합니다. HTML to React..

[react] react에서 inline style 적용 방법 (ft. 인라인 css) [내부링크]

react에서 inline style(inline css) 적용 방법입니다. 인라인 스타일 방식은 태그 내에 자바스크립트 객체 형식으로 직접 넣는 스타일 방식입니다. react inline style 적용 방법 예제1 가장 보편적으로 쓰이는..

[css] tailwind fontsize, color 커스텀 하는 법 [내부링크]

tailwind 에서 fontsize, color 커스텀 하는 방법입니다. ailwind.config.js 파일에서 아래와 같이 color 추가하면 됩니다. postcss.config.js가 아니라 tailwind.config.js 이니 주의 하세요. 여기서 주의할 점..

[react] react-router-dom 버전 6에서 변경된 사항 (ft. 'Switch' is not exported from 'react-router-dom' 오류) [내부링크]

react-router-dom 6에서 변경된 사항입니다.  react-router-dom이 버전 6으로 바뀌면서 몇가지가 바뀌었습니다. switch -> routes component -> element useHistory -> useNavigate route, switch before: react..

[react] npx create-react-app You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 오류 [내부링크]

npx create-react-app 오류입니다. 원래 사용하던 npx create-react-app 앱이름 코드로 react 프로젝트를 시작하려는데 아래와 같은 오류가 발생하였습니다. npx create-react-app 앱이름 npx create-react-app..

[js] default parameter 디폴트 매개변수 (ft. es6) [내부링크]

자바스크립트 es6 default parameter 입니다. 매개변수 = 'x'로 default 값을 지정합니다. 매개변수가 없을 경우, undefined 일 경우 default 값을 사용합니다. function multiply(a, b = 1) { //디폴트 매개변수..

버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요. (ft.구글 플레이) [내부링크]

구글플레이콘솔에서 app bundle 업로드 후 오류메시지입니다. 오류 메시지 react native에서 빌드 과정을 거친지 구글플레이콘솔에서 앱 출시를 위해 aab 파일을 업로드 하였더니 아래와 같은 오류 메시지가 나왔..

[js] 배열인지 아닌지 확인하기 (ft. Array.isArray() ) [내부링크]

변수가 배열인지 아닌지를 확인하는 방법입니다. Array.isArray() 메서드는 가로 안의 인자가 array 인지를 판별합니다. array이면  true를 반환하고, 아니면 false를 반환합니다. Array.isArray() 예제 Array...

[react] 카운트다운 구현 (ft. 5, 4, 3, 2, 1) [내부링크]

보통 게임에 많이 사용하는 카운트다운을 react로 구현합니다. 구현 영상 카운드다운 react 코드 import React, { useRef, useState, useEffect } from 'react'; const Count = () => { const [num, setNum] = us..

[react] switch toggle 버튼 [내부링크]

구현 화면 구현 영상 react 코드 기존의 알림 값이 true/false인지를 api로 가져오기 버튼 클릭시마다 input의 checked, onChange 속성을 이용해 구현 css는 tailwind style을 적용 import React, { useEffect,..

[web] netlify 배포 후 https 에러 해결 [내부링크]

netlify에서 배포 하면서 발생된 https 에러 입니다. react 프로그램을 netlify에서 배포를 한 후, 실행해보니, tweenmax is not defined 라는 오류가 나고 gsap, tweenmax를 이용한 애니메이션이 작동을 하지 않..

[react] Input elements should have autocomplete attributes (suggested: "current-password") 오류 [내부링크]

react의 input에서 type="password" 사용시 나오는 오류입니다. 오류 메시지 오류: [DOM] Input elements should have autocomplete attributes (suggested: "current-password") 해결 방법 input 태그..

파일질라(FileZilla) FTP 사용법 (ft. FTP사용이 필요한 경우) [내부링크]

파일질라 다운로드 후 접속 방법입니다. FTP사용이 필요한 경우 보통 git을 이용하여 실서버에서 git pull을 하여 빌드하여 배포를 하는데 mp4 파일과 같이 고용량의 파일을 올릴 경우, git에 올리는 것이 불편하..

[js] 비밀번호 영문 숫자 조합 8자리 이상, 영문 숫자 특수기호 조합 8자리 이상 체크 (ft. 정규식) [내부링크]

비밀번호 유효성 검사에 사용되는 정규식입니다. 비밀번호 영문 숫자 조합 8자리 이상 (정규식) let regPass = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,25}$/; if (!regPass.test(password)) alert("영문, 숫자 조합으로..

[git] git commit 내역 commit 히스토리 엑셀 다운로드 [내부링크]

git commit history를 엑셀에 저장하는 방법입니다. 프로젝트를 종료 할 때 쯤 문서화를 위해 git repository 안의 모든 커밋 내역을 출력할 일이 있습니다. 터미널에서 간단한 명령어로 날짜, 메시지, 커밋한 us..

[git] git 강제 push (ft. 강제 git push의 문제점) [내부링크]

강제로 git push 하는 명령어 입니다. 강제 git push 하는 명령어 git push -u origin master --force //기존에는 git push origin master 여러 컴퓨터에서 한 프로젝트를 동시 진행하다 보니 git push 도중 아래..

[js] 룰렛 라이브러리 (ft. 돌림판, roulette) [내부링크]

룰렛 라이브러러리 winwheel.js를 소개합니다. 게임 프로젝트에서 사용할 자바스크립트 룰렛 라이브러리를 찾다가 다양한 기능과 뷰를 적용할 수 있는 룰렛 라이브러리, winwheel.js를 소개합니다. http://dougte..

[html] input type="number" 에서 소수점 자리 허용 기능 [내부링크]

input 박스에서 소수점 자리까지 허용하는 속성입니다. 소수점 두 자리 수 허용시 input 태그에 step="0.01" 속성을 추가합니다. 소수점 한 자리수 허용시 input 태그에 step="0.1" 속성을 추가합니다. input 박..

[js] 자바스크립트로 하이픈 제거하기 (ft. 생년월일, 전화번호) [내부링크]

생년월일 또는 전화번호, 날짜에 들어가는 하이픈을 자바스크립트로 제거하는 방법입니다. 자바스크립트로 하이픈 제거 str.replace(/-/g, "") 예제 const birth="1991-12-22" const newBirth = birth.replace(/-..

[react] [DOM] Input elements should have autocomplete attributes (suggested: "current-password") 오류 해결 [내부링크]

react에서 form, input 박스를 사용하던 중 위와 같은 에러가 나왔습니다. 오류 메시지 오류 해결

[js] 공튀기기 자바스크립트 구현 (ft. react) [내부링크]

캔버스를 이용하여 자바스크립트 또는 리액트로 공튀기기를 구현합니다. 구현 영상 react 코드 (자바스크립트 코드 삽입) import React, { useEffect } from 'react'; const Balls = () => { const onStart = ()..

[js] 자바스크립트 버튼 클릭 후 disabled 처리 (ft. react, css) [내부링크]

자바스크립트, 리액트를 이용해 button 클릭 후 disabled 처리 방법입니다.  자바스크립트 버튼 클릭 후  disabled 처리 html 버튼 javascript let btn = document.querySelector('.btn') btn.addEventLis..

[css] loading bar css with tailwind, 로딩이 필요한 경우 (ft. tailwind) [내부링크]

tailwind, css로 작업한 간단한 로딩바입니다. 구현 화면 구현 영상 로딩이 필요한 이유 loading은 보통 결과값이 도출 되기 이전에 몇 초 동안 실행하여 사용자가 대기중 임을 인지할 수 있도록 UX로서 필요합..

[js] TypeError: Cannot read property 'x' of undefined (ft. javascript, react) [내부링크]

TypeError: Cannot read property 'x' of undefined 오류 해결입니다. 자바스크립트 또는 리액트에서 정말 자주 보게되는 오류 입니다. 어느 사이트에 의하면, Cannot read property 'x' of undefined, Can..

[vscode] visual studio thunder 사용법 (ft. postman) [내부링크]

vs code의 postman, thunder 사용법입니다. thunder api 요청에 대한 결과를 테스트 하기 위한 postman을 대신 할 수 있는 visual studio code 플러그인 vs code에서 thunder 설치 방법 thunder 사용 방법 사용..

[react] Next.js에 global 폰트 삽입하기 (ft. index.html 역할) [내부링크]

Next.js에 embed link 적용하는 법입니다. 보통은 index.html 파일에 태그 안에 cdn 코드를 적용하여 폰트 또는 폰트 어썸의 아이콘 등을 삽입하는데, Next.js 는 index.html 파일이 없습니다. Next.js의 기본 구..

[react] react hooks로 form 구현 (ft. input이 많을 때) [내부링크]

react hooks로 form을 구현하는 가장 효과적인 방법입니다. 구현 화면 react hooks에서 form 구현 방법 admin 페이지에서 가장 많이 사용되는 form을 구현할 때는 수많은 input 또는 select 태그에 입력한 내용..

[js] alert, console.log 출력시 [object Object] 오류 해결 방법 [내부링크]

alert 출력시 [object Object] 오류 해결 방법입니다. alert, console.log 출력시 [object Object] 오류 자바스크립트에서 json 형태의 data를 alert(data) 또는 console.log(data)로 출력시 [object Object..

mac, window 개발자 도구 단축키 [내부링크]

개발자 도구 화면 맥 개발자 도구 단축키 alt(option) + command + i 윈도구 개발자 도구 단축키 f12

[상업용 무료폰트] 마루부리 다운로드 (ft. 2021 네이버 글꼴) [내부링크]

네이버 2021 글꼴, 마루부리 소개합니다. 네이버가 2021년 10월 9일, 한글날을 맞이하여 무료 글꼴, 마루부리를 공개하였습니다. 디지털 환경에 맞춰 한글꼴의 원형을 잇는 마루 마루 부리 글꼴은 디지털 화..

[js] 자바스크립트로 시간차 지연 출력 (ft. for문, setTimeout, react) [내부링크]

자바스크립트에서 시간차, 지연을 위한 구현 방법입니다. 자바스크립트를 이용하여 시간차를 두고 출력하는 방법은 setTimeout와 async를 이용한 방법이 있습니다. 여기서 데이터의 양이 많을 경우, for문과 map..

무료 오픈 소스 모음 사이트 추천 (ft. kandi) [내부링크]

open source 모음 사이트, kandi를 소개합니다. kandi 오픈 소스 플랫폼, kandi를 이용하여, 우리가 원하는 무료 오픈 소스의 라이브러리를 검색할 수 있습니다. 제약사항이 적어 대부분의 프로젝트에서 자유롭게..

[reast] react-toastify 사용법 [내부링크]

 react, toast 라이브러리, react-toastify 사용법 입니다. 화면 구현 react-toastify https://www.npmjs.com/package/react-toastify react-toastify React notification made easy www.npmjs.com react-toas..

[css] grid 반응형 layout 적용 [내부링크]

grid를 이용한 반응형 레이아웃 입니다. grid를 이용한 style을 적용하면, 미디어쿼리를 사용할 필요 없이 스크린 화면 사이즈에 맞추어 반응형 레이아웃을 구현할 수 있습니다. 구현 화면 css div { display: g..

[react] Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. 오류 해결 [내부링크]

react에서 sass 사용을 위하여 npm node-sass -save를 통하여 설치를 하고, npm start로 로컬 서버를 구동하다가 아래와 같은 오류가 나왔습니다. 오류 메시지 ./src/App.scss (./node_modules/css-loader/dist/c..

code . 현재 창에서 열기 입력 코드 (ft. 터미널) [내부링크]

터미널 입력 코드 - 해당 프로젝트 폴더 열기 cd project //해당 프로젝트로 이동 code . //해당 프로젝트 새창으로 열기 해당 프로젝트 현재 창에서 열기 사실 code . 코드를 사용할때 새창에서 열기에 이전 창..

[react] 네비게이션 구현 [내부링크]

react, 웹 admin, dashbord에서 필요한 nav 바를 구현합니다. 구현 화면 구현 영상 구현 내용 1. react, hooks를 이용한 Nav 바 구현 2. style은 tailiwind 사용 3. 하위 메뉴 hidden에서 상위 메뉴 클릭 시 하..

[react] gauge 차트에 svg, path태그에 text 추가하기 [내부링크]

svg, path태그에 텍스트를 추가하는 방법입니다. gauge 차트를 사용하기 위해 react-gauge-chart 라이브러리를 사용하였습니다. react-gauge-chart 라이브러리 https://www.npmjs.com/package/react-gauge-chart..

[react] 챗봇 구현하기 (ft. react-simple-chatbot) [내부링크]

react-simple-chatbot 을 이용하여 챗봇을 구현합니다 . react에서 가장 많이 쓰이는 simple 챗봇입니다. documentation 이 잘 되어있고, api를 이용하여 여러가지의 custom이 가능합니다. 구현화면 구현 영상 r..

[ts] Could not find a declaration file for module 'react' [내부링크]

react에서 typescript를 설치하고 app.tsx 에서 router를 설치하는데 이런 오류가 나왔습니다. 오류 메시지 Could not find a declaration file for module 'react'. '/Users/inkijo/Documents/react-te..

[react] 장바구니 추가, 삭제, 전체 삭제 기능 구현 [내부링크]

예제는 패스트캠퍼스의 "이웅재"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 const [orders, setOrder] = useState([{id: ' ', quantity: 0}]) 의 형식으로 state 관리 장바구니에 상품 추가 선택..

[js] 만 나이 계산하기 [내부링크]

자바스크립트로 만나이를 계산합니다. 만 나이 계산하는 함수 (파라미터로 생년월일 넘겨줄때) export const gettingOriginalAge = (birth) => { //birth가 1990-03-05, string 형식 const today = new Date(); /..

[js] day.js 사용법 (ft. 날짜, 시간 라이브러리, moment.js) [내부링크]

자바스크립트를 통해 날짜와 시간을 출력하는 라이브러리, day.js 입니다. 자바스크립트로 날짜와 시간을 출력할 경우, 직접 코드를 작성할 경우도 있지만, 라이브러리를 통해 직접 함수를 만드는 번거로움을 피..

[react] next.js 사이트 만들기 (ft. 동적 라우팅) ver.2 [내부링크]

react 라이브러리, next.js로 만튼 사이트 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 화면 http:.../photos/1 와 같이 상세 페이지로 접근합니다. 폴더 구조..

[react] next.js 사이트 만들기 (ft. getStaticProps, getServerSideProps) ver.1 [내부링크]

react의 라이브러리, next.js로 만든 사이트 예제입니다. 예제는 유튜버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 영상 구현 화면 Home 페이지 Photes 페이지 photo 이미지별 세부 페..

[css] 모달창 오픈시 css로 스크롤 방지 [내부링크]

 모달창(팝업) 오픈시 css를 통한 스크롤 방지입니다. css를 이용한 scroll을 방지 모달창이 오픈되었을때, 감싸고 있는 부모요소에 아래의 스타일을 적용하면 됩니다. 모달창 open이 true시 적용하고, false시..

[react] Object is possibly 'null' (ft. typescript, style) 오류 해결 [내부링크]

react hooks에서 자바스크립트를 이용해 html element에 접근하여 Object is possibly 'null' 이라는 타입스크립트 오류가 났습니다.  이유는 객체가 비어 있을 수도 있는데 해당 객체의 내부 프로퍼티나 메소..

[react] 체크 박스 토글 기능 구현 (ft. new Set(), checked) [내부링크]

react, set 객체를 이용한 체크박스 토글 기능 구현입니다. 구현 화면 구현 영상 구현 내용 - react, hooks 방식 - 체크 박스 토글 기능(한번 클릭 선택, 두번 클릭 취소) - es6 최신 문법, set 객체를 이용하여..

[react] vs code rsc 입력 후 자동 코드 설치 플로그인 [내부링크]

react 기본 자동 완성 코드 기능 플러그인 입니다. react 사용자의 필수인 react 문법 코드 자동완성 플러그인입니다. rsc 또는 rcc를 입력하면 react 기본 코드가 emmet 기능처럼 자동 생성됩니다. rsc: hooks에..

[react] pie 차트 (ft. 도넛 차트 라이브러리) [내부링크]

react 도넛 차트 라이브러리입니다. react에서 간단하게 사용하는 파이 차트(도넛 차트) 라이브러리, react-minimal-pie-chart를 추천합니다. 구현 화면 react-minimal-pie-chart 사이트 https://www.npmjs.com/..

[css] 이미지 애니메이션 효과 (ft. 무한 회전, 사라지기, 출현하기) [내부링크]

css를 이용한 이미지 애니메이션 효과입니다. 웹이나 앱의 인트로 화면에서 주로 이미지 애니메이션 효과를 사용하게 됩니다. CSS - 무한 회전 애니메이션 .img { animation: rotate_image 6s linear infinite;..

[html ] data- 속성 (ft. dataset, data-key, data property) [내부링크]

html에 태그 안에 의미있는 속성을 추가하여 자바스크립트로 접근가능한 재미있는 기능, data 속성을 소개합니다. data- 속성 의미론적 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. 사용법은 태그 안에..

[js] 스크롤 상단 이동, 스크롤 위치 (ft. scrollTop) [내부링크]

web 스크롤 API, window.scrollTo() 입니다. 모바일 웹뷰에서 페이지를 이동하거나, 컴포넌트를 교체할때마다 이전 페이지나 컴포넌트의 스크롤 위치가 유지될때 스크롤을 강제로 상위로 이동시킬때 사용합니다...

[react] react-datepicker 커스텀 [내부링크]

react-datepicker를 커스텀하는 방법 입니다. react에서 사용하는 datepicker 중 가장 인기있는 캘린더 데이트피커 라이브러리, react-datepicker 입니다. react-datepicker는 기본적으로 제공하는 기능이 많아..

[js] set 객체 사용법 (ft. new Set 중복값 제거) [내부링크]

Set 객체 es6 최신 문법의 중복을 제거한 값들의 집합입니다. 특정 요소 추가: add 특정 요소가 있는지 확인: has (boolean 값으로 반환) 특정 요소 제거: delete 모든 요소 제거: clear 요소의 개수 반환: size..

[js] null 병합 연산자 '??' (ft. 기본값 매개변수, or 연산자 '||') [내부링크]

es6 최신 문법, null 병합 연산자에 대해 알아봅니다. null 병합 연산자 '??' (nullish coalescing operator) es6에서 새로 나온 문법 null 병합 연산자를 이용하여 매우 짧은 문법으로 코드를 심플하게 작성할..

[git ] error: You have not concluded your merge (MERGE_HEAD exists) 오류 해결 [내부링크]

local에서 git을 2번 commit, push 를 하고, 실서버에 git pull origin master 를 하니, 이와 같은 오류 메시지가 떴습니다. 실서버에서 커밋을 한번 한 후에 다시 git pull를 하여 내려받으면 됩니다. 오류 메..

투명 배경의 파비콘 만드는 법(ft. favicon) [내부링크]

일반 파비콘을 제작하는 사이트는 png 파일을 넣어도, 흰 색 배경의 ico 파일로 생성해줍니다. 하지만 투명 배경의 파비콘이 필요할 때가 많지요? 이럴때 사용하는 사이트입니다. conventico https://convertico...

[react] pagination 구현 (ft. react-js-pagination) [내부링크]

react hooks에서 pagination을 구현하고, 라이브러리 react-js-pagination을 사용하여 구현해봅니다. 구현 내용: 1. react hooks 2. 최소한의 css만을 사용합니다. 3. axios로 jsonplaceholder에서 더미데이터를..

[vscode] tab키 입력시 emmet 기능 안될 때 해결방법 [내부링크]

visual studio code에서 emmit 기능이 안될 경우 해결 방법입니다. visual studio code에서는 기본적으로 태그 자동 완성 기능인, emmit 을 지원합니다. 하지만 갑자기 태그를 입력 후 tab 키를 눌러도 태그가 자..

[ts] Property 'x' does not exist on type '{}'.ts [내부링크]

react에서 typescript 로 프로젝트를 진행할 때 이 오류를 많이 보게됩니다. 분명히 변수가 obejct 이고, 변수.속성 또는 변수[속성]을 { } 안에서 사용하는 것이 가능한데 타입스크립트의 오류가 납니다. 오류..

[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..

[react] Redux 예제 (ft. 미들웨어, Redux-thunk, Redux-devtools) [내부링크]

react에서 Redux 사용 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux의 기본 원리 화면 결과 폴더 구조 폴더 안 파일 구조 react Redux 예제 구현 순서 컴포..

[css] tailwind dialog 창 사용 예제 [내부링크]

부모 컴포넌트 const [openAlert, setOpenAlert] = useState(false) const onOpenAlert = () => { setOpenAlert(!openAlert); } 자식 컴포넌트 AlertDialog.tsx import React from 'react'; const AlertDialog =..

[js] 현재 날짜, 시간 가져오기(ft. 월, 일, 요일, 시간) [내부링크]

자바스크립트를 이용한 날짜 출력 방법입니다. 현재 날짜, 시간 구하기 let now = new Date(); // 현재 날짜 및 시간 연도 구하기 let year = now.getFullYear(); 월 구하기 let todayMonth = now.getMonth() + 1..

[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 p..

[js] Redux 리덕스의 기본 원리(ft. 바닐라 자바스크립트 예제) [내부링크]

Redux의 기본 원리와 순수 자바스크립트를 이용한 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux 기본 컨셉 바닐라 자바스크립트(순수 자바스크립트) 리덕스 기본..

[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 => consol..

[react] Property 'x' does not exist on type '{}'.ts 오류 해결 [내부링크]

리액트 hooks, typescript 프로젝트에서 아래와 같은 오류가 났습니다. 오류 메시지 Property 'x' does not exist on type '{}'.ts 해결 방법 useState() 에서 useState ()를 추가해줍니다. 배열 const [a..

[js] local storage 사용 방법 (ft. JSON 데이터, stringify, parse) [내부링크]

JSON 데이터와 브라우저 저장소, local storage 사용방법 입니다. JSON 제이슨, JavaScript Object Notation 자바스크립트의 객체 표기법 문자 데이터 JSON 데이터 사용 방법 json 확장자를 가진 파일은 문자(s..

[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 Se..

[git] Repository not found 오류 해결 [내부링크]

git clone 과정 중 생긴 오류입니다. Mac 비공개 계정으로 진행 중인 프로젝트를 다른 window 컴퓨터에서 당겨오려고 git clone 하던 중, Repository not found 라는 오류가 나왔습니다. 오류 메시지 Repository..

[react] react-datepicker 사용법 [내부링크]

react datepicker 라이브러리 사용법입니다. 구현 내용 - react, hooks 방식, style은 모두 제외, 상태관리로 useContext 사용 - 버튼 클릭시 datepicker 출현 - datepicker는 마지막일 클릭시 사라짐 - datepick..

[js] lodash 사용법, 자주 쓰는 메소드 [내부링크]

자바스크립트 라이브러리, lodash 사용법입니다. lodash란 Lodash는 자바스크립트 라이브러리로서, 객체, 배열 등의 데이터의 구조를 쉽게 변환하여 사용하게끔 도와줍니다. 실무에서 데이터를 handling 할때 복..

[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 term..

[js] 자바스크립트로 선택영역 프린트하기(ft. window.print) [내부링크]

자바스크립트로 dom을 제어하여 선택한 부분을 프린트 합니다. 구현 내용 버튼 클릭시 프린트 기능 연결 선택 영역을 설정하여 그 부분만 프린트하도록 설정  선택 영역 프린트 하기 window.print() 메소드는 보..

[js] spread 연산자 (ft. 전개 연산자, 불변성, 얕은 복사) [내부링크]

자바스크립트 es6, 스프레드 연산자 입니다. spread 연산자 불변성 얕은 복사 spread 연산자 하나의 배열 데이터를 spread 연산자를 이용해 출력하면, 문자 데이터 형태로 출력됩니다. spread 연산자 예제 con..

[홈택스] 부가가치세 과세표준 증명원 발급 방법 [내부링크]

인터넷에서 5분 만에 부가가치세 과세표준 증명원 발급하는 법입니다. 부가가치세 과세표준 증명원 발급 방법 홈택스 로그인 부가가치세 과세증명 발급 홈화면 메뉴바에서 민원증명 > 부가가치세 과세표준증명을..

[js] 객체를 배열로 바꾸는 법, 배열을 객체로 바꾸는 법 [내부링크]

자바스크립트 데이터에서 객체를 배열로, 배열을 객체로 바꾸는 방법입니다. 실무에서는 화면에서 게시판, 테이블과 같은 형태의 출력을 위해, 또는 서버 전송을 위해 자주 객체를 배열로 변환하게 됩니다. 객체..

[react] 리액트 탭 구현하기(ft. tailwind) [내부링크]

react에서 탭화면을 구현합니다 . 구현 내용 탭 버튼 클릭 시 해당 탭 화면을 바로 보여줍니다. react hooks 방식을 이용합니다. 스타일을 tailwind 를 적용합니다. 구현 화면 리액트로 탭 구현 방법 코드 impor..

[react] Object is possibly 'null' (ft. typescript, useRef) 오류 해결 [내부링크]

react hooks에서 간단한 input 을 사용하는 구조에서, focus()를 사용하기 위하여  해당 input 태그에 useRef 를 삽입하고, const inputRef = useRef(null)로 선언을 하였는데, focus 처리시, Object is possibl..

[js] return 값에 두개 이상의 명령문 코드를 넣어야 할 때 방법 [내부링크]

함수에서 return 키워드를 사용하는 것은 return 키워드 뒤에 있는 내용이 함수 밖으로 반환된다 라는 것을 의미하지만, return 키워드가 사용된 부분에서 함수가 종료된다는 것도 의미합니..

[js] 데이터 타입 확인 (ft. typeof 말고 함수) [내부링크]

자바스크립트에서 데이터 타입을 확인하는 방법입니다. typeof 보통 console.log(typeof 데이터)를 이용하여 콘솔에서 데이터 타입을 확인합니다. 이럴 경우, 문제가 발생합니다. null, 객체, 배열을 모두 object..

[react] 리액트로 css, js로 도넛차트 구현 [내부링크]

 react 로 css, js 를 이용하여 도넛차트를 구현합니다. 아래의 포스트에서, 라이브러리 없이, css와 js 만으로 도넛차트를 구현 하였는데, 이것을 react 버전으로 만들어 보았습니다. https://goddino.tistory..

[react] 리액트 tailwind 다이얼로그, 모달창 구현 [내부링크]

style 라이브러리, tailwind를 적용하여 모달창 띄우기를 구현합니다. 구현 화면 구현 내용 react, hooks 방식 스타일 라이브러리, tailwind로 스타일 적용 확인 클릭시 다이얼로그 출현 X 버튼, 확인 버튼 클릭..

[js] css, js 이용하여 도넛차트 만들기 (ft. 원형차트, conic-gradient) [내부링크]

css와 자바스크립트로 도넛 차트를 구현합니다. 구현 내용 - 도넛 차트(도넛처럼 같은데가 파진 원형 차트)를 구현 - 라이브러리가 아닌, 자바스크립트와 css로 적용 - css: conic-gradient() - js: setInterval,..

[git] netlify로 사이트 배포하기 (ft. 넷리파이 deploy) [내부링크]

netlify에서 정적 사이트 배포하는 법입니다. netlify에서 사이트 만들기 netlify 회원가입 netlify 홈페이지로 이동하여, 깃허브 계정으로 회원가입을 진행합니다. https://www.netlify.com/ Netlify: Dev..

git, github 사용법 (ft. 깃허브, commit, push, pull 버전 관리) [내부링크]

git, github를 이용한 프로젝트 버전관리 방법입니다. - 목차 - git, github의 차이점 git에서 로컬 버전 관리 github에서 원격 저장소 버전 관리 업로드 git, github에서 수정사항 버전 관리 git, github에서 br..

[js] 페이지 상단으로 자동 스크롤 이동 구현 (ft. gsap scrollTo) [내부링크]

우측 하단의 버튼 클릭시 화면의 상단으로 이동하는 애니메이션 효과를 구현합니다. 구현 내용 - material-icon, css 이용하여 버튼 만들기 - 버튼 클릭 시 화면이 페이지의 최상단으로 애니메이션 효과를 내면서..

[react] react 모달창(팝업창) 구현 [내부링크]

리액트 hooks로 간단한 모달창을 구현합니다. 구현내용 cdn 설치, 스타일은 기본만 사용 리액트 hooks 방식 버튼 클릭 후, 모달창 팝업 기능 구현 화면 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여,..

[html] html 특수기호 코드 찾기 [내부링크]

html 특수기호를 이용한 마크업이 필요할때, 이용하는 사이트입니다. html 특수기호 검색 사이트 구글에서 html entities를 검색해서 아래의 페이지로 들어가거나, 바로 아래의 링크로 이동해주세요. 원하는 기호..

[css] 카드 뒤집기, 이미지 앞뒤 회전 3d 애니메이션 효과 [내부링크]

CSS를 이용한 3차원 애니메이션 효과 설정입니다. 구현 내용 이미지에 마우스 올리면(hover시) 이미지가 옆으로 회전하면서 이미지의 뒷면이 출력되고, 이미지에서 마우스를 내리면 다시 원래 이미지..

[js] 떠다니는 이미지 애니메이션 구현(ft. 부유하는 요소, gsap.to) [내부링크]

화면상에서 둥둥 떠다니는 요소를 애니메이션 라이브러리, gsap으로 구현합니다. 구현 화면 세 개의 동그라미 요소가 위아래 반복적으로 움직입니다. (애니메이션 구현 화면은 맨 아래에서 확인) 떠다니는 이..

[react] 리액트 챗봇 스타일의 대화형 설문 조사 화면 구현 [내부링크]

최근에 회사 프로젝트에서 리액트를 이용한 간단한 설문조사 앱을 만드는 중입니다. 여러 가지 시안 중에서 앱에서 많이 볼 수 있는 대화형의 설문 조사 형식이 있어, 마크업의 일부를 간단하게 공유합니다. 여기..

[css] 반응형 16:9 비율 유지 박스 컨텐츠 영상 삽입 [내부링크]

16:9의 비율을 유지하는 이미지, 컨텐츠 영역을 만듭니다. 웹 또는 앱에 유튜브 영상 화면을 삽입할 경우, 유튜브 영상의 비율(영상 화면 삽입 이미지 사이즈)인 16대 9의 비율로 영역을 만들어 컨텐츠를 삽입니..

admin 페이지, 관리자 사이트 템플릿 소개(ft. metronic) [내부링크]

관리자 admin 페이지 템플릿을 소개합니다. 웹사이트나 앱을 운영하기 위해서는 관리자 사이트, admin 페이지가 필요합니다. 이때 admin 페이지 템플릿을 이용할 경우, 디자인, 퍼블리싱 단계의 업무 시간을 단축..

[css] 반응형 유동적 너비에 따른 이미지 가운데 정렬 방법 [내부링크]

반응형에 맞는 이미지 가운데 배치 방법입니다. 처음 화면에는 이미지나 컨텐츠가 가운데 정렬로 잘 되다가, 브라우저 너비를 늘리거나 줄였을 경우, 이미지 또는 컨텐츠가 가운데 유지가 안되거나 잘릴 경우가..

[js] 자바스크립트스와이퍼 슬라이드 라이브러리, swiper.js 사용법 [내부링크]

swiper.js 를 이용하여 사이트에 슬라이드를 적용합니다. 보통 사이트 메인 페이지의 네비게이션 아래 컨텐츠 부분에는 비주얼 슬라이드가 위치합니다. 홈페이지에 처음 들어갔을 때 가장 먼저 눈에 띄는 곳으로..

[css] 레이아웃 position 배치 사용법(ft. css 포지셔닝) [내부링크]

css 레이아웃의 방법, positon 입니다. position position 속성은 요소들을 자유자재로 배치해 주는 속성으로, 이를 이용하면 텍스트나 이미지를 나란히 배치할 수 있고, 가로나 세로로 원하는 위치에 배치할 수..

[js] 자바스크립트 애니메이션 라이브러리, gsap 사용법 [내부링크]

JS 애니메이션 스크립트 라이브러리, gsap의 사용법입니다. 일반적으로 웹에서 애니메이션 효과는 css 또는 제이쿼리를 사용하여 구현합니다. 하지만 최근에는 제이쿼리 보다는 순수 자바스크립트 코드를 사용하..

[css] position으로 가운데 배치, 정렬 [내부링크]

css로 가운데로 정렬하는 방법입니다. 수직 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { height: 특정 사이즈 px 지정; position: absolute; top: 0; bottom: 0; margin:..

[css] 구글 메터리얼 아이콘 사용 방법(ft. 무료 아이콘 제공 사이트) [내부링크]

google material icons을 사이트에 설치, 적용하는 방법입니다. 웹사이트 개발할 때 퍼블리싱, 프론트 개발 시점에 꼭 사용되는 것이, 아이콘입니다. 특히 자주 사용하는 icon은 검색에 사용되는 돋..

[css] 구글 폰트 사용법 (ft. google fonts, 무료 웹폰트 적용) [내부링크]

웹사이트 구글 폰트 적용법을 알아보겠습니다. 구글 폰트 사이트 이동 구글에서 google fonts 또는 구글 폰트를 검색하여, 해당 사이트로 이동합니다. 태그 방식 원하는 폰트 선택 여기서 사용할 폰트와 폰트 사..

오픈 그래프, 트위터 카드 사용 방법 (ft. seo) [내부링크]

오픈 그래프와 트위터 카드 사용방법에 대하여 알아보겠습니다. 오픈 그래프 웹사이트가 카카오톡, 페이스북, 트위터, 슬랙과 같은 sns로 공유될 때 우선적으로 활용되는 정보를 지정합니다. 예를 들어 아래와 같..

[css] reset css cdn 설치(ft. 기본 css style 세팅) [내부링크]

reset css cdn 설치 방법을 알아보겠습니다 . 브라우저의 기본 style을 초기화하기 위하여, reset css를 설치합니다. reset css cdn 검색 구글에서 reset css cdn 검색 reset-css CDN by jsDelivr - A CDN for np..

티스토리 vs 네이버 블로그(ft. 애드센스, 애드포스트) [내부링크]

수익형 블로그, 티스토리, 네이버 블로그를 비교해보겠습니다 . 처음 블로그를 시작할 때 모두 다 하는 고민이 있습니다. 바로 티스토리를 할까? 아님 네이버 블로그를 할까? 티스토리와 네이버 블로그 비교 광고..

키워드 추출 사이트 추천(ft. 키워드 쉬터, keyword shitter) [내부링크]

키워드 무료 추출 사이트, keyword shitter를 소개하겠습니다. keyword shitter https://keywordshitter.com/ Keywords Hitter - Mobile Bulk Keyword Tool Subscribe for $9 to save to email. keywordshitter.c..

[css] block, inline의 뜻과 사용법(ft. display, inline-block) [내부링크]

CSS, display의 block과 inline의 개념과 사용법에 대하여 알아보겠습니다. display display 속성이란 화면을 배치하는 방법입니다. display 종류 none | contents | block | inline | inline-block | table | ta..

경력단절여성을 위한 재취업 가이드(ft. 30대 경단녀 국민내일배움카드) [내부링크]

경단녀용 정부 취업 지원 제도를 이용하는 재취업 노하우 26살에 첫 취업을 하고, 10년 동안 직장 생활을 하다가 고민 끝에 퇴사를 결정하게 됩니다. 1년의 시간이 순간 삭제가 되듯 빠르게 지나가고 나니, 나에..

구글 애드센스 지급 보류 해결 방법(ft. 지급 계좌 등록) [내부링크]

구글 애드센스에서 지급 보류 알림이 떴을 때, 해결하는 방법을 알아보겠습니다. 애드센스를 이용하면 수익이 일정 금액(보통 $100부터) 도달하면 정산을 받게끔 되어있습니다. 지급 계좌를 제대로 ..

[js] 글자 타이핑 효과 라이브러리 소개 [내부링크]

타이핑 효과를 주는 라이브러리를 소개합니다. 실무에서 텍스트에 타이핑하는 디자인 효과를 주고 싶을 때가 있습니다. 보통 css로 효과를 주기 하는데 부자연스러운 편입니다. css 대신 라이브러리를 이용하면..

이전회사 원천징수 영수증 홈택스에서 5분 만에 발급받는 방법(ft. 직인) [내부링크]

근로소득원천징수 영수증 홈택스에서 발급받는 방법입니다. 근로자가 이직을 하였을 경우 연말정산 시 전 직장 소득까지 포함해서 신고해야 하므로 전 직장의 근로소득원천징수 영수증을 꼭 제출해야 됩니다. 이..

thailwind css 스타일 프레임워크 (ft. 무료 컴포넌트 사이트 제공) [내부링크]

tailwind css 무료 사이트 리스트입니다. 실무에서 tailwind를 스타일 프레임워크를 사용하고 있는데, kit 패키지를 구매하지 않고, 무료 배포된 정보를 구글링하여 찾으면서 구현하다 보니 tailwind의 정보가 많..

[react] 리액트 삼항 연산자 조건부 스타일링(ft. tailwind, className) [내부링크]

react에서 조건에 따른 스타일링하는 방법입니다. 스타일링은 tailwind라는 리액트 CSS 프레임 워크를 사용하여 디자인 합니다. 조건에 따라 className의 내용에 변화를 주어 다른 스타일을 주는 방법입니다. onC..

[react] react 상태관리 context API, useContext 사용법 [내부링크]

react에서 context API가 필요한 이유와 사용하는 방법에 대하여 알아보겠습니다. Context API가 필요한 이유 기존에 최상위 컴포넌트에서 여러 레벨을 거쳐 props로 원하는 상태와 함수를 전달 하였지만, contex..

[react] react-router-dom 설치, 라우팅하기 [내부링크]

react-router-dom 설치하는 방법을 알아보겠습니다. routing ・ 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다. ・ 리액트 자체에 이 기능이 내장되어 있지 않기 때문에 라이브러리를 사용하여..

[react] react로 api 이용하여 뉴스 사이트 만들기 [내부링크]

newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러와 블로그 형태의 뉴스 사이트를 만들겠습니다. 예제는 길벗의 리액트를 다루는 기술을 보면서 공부한 예제입니다. 화면 결과  axios로 뉴스 api 호출..

[react] react로 axios로 API 호출 (ft. promise, hooks) [내부링크]

API에 대한 간단한 설명과 axios로 API를 호출한 예제를 살펴보겠습니다. axios axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트로서 HTTP 요청을 promise 기반으로 처리합니다. axios 설치..

[react] react로 지뢰찾기 게임 만들기 ver.2 [내부링크]

리액트로 구현한 지뢰찾기 게임(ver.2) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주..

[react] react로 지뢰찾기 게임 만들기 ver.1(ft. context API, useReducer) [내부링크]

리액트로 구현한 지뢰찾기 게임(ver.1) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주..

[react] 리액트 테이블 게시판 만들기 ver.2 (데이터 추가, 수정, 저장, hooks, form) [내부링크]

구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈..

[react] 리액트 테이블 게시판 만들기 ver.1 (axios, useEffect, 글삭제) [내부링크]

구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오..

[react] react의 useReducer 사용법 [내부링크]

useReducer state가 많을 경우, state를 하나로 묶어주는 역할을 합니다. useReducer 사용 방법 state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을..

[react] react로 틱택토 게임 만들기(ft. useReducer) [내부링크]

리액트 hooks로 구현한 틱택토 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.ti..

[js] react로 로또 게임 만들기 [내부링크]

리액트 class/hooks로 구현한 로또 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://godd..

[react] react로 가위바위보 게임 만들기 [내부링크]

리액트 class/hooks로 구현한 가위바위보 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom from 'reac..

[react] react로 반응속도 테스트 게임 만들기(ft. useRef, 조건문, spread 연산자) [내부링크]

리액트 class/hooks로 구현한 반응속도 테스트 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom fr..

[react] 리액트 끝말잇기 게임 만들기(ft. 컴포넌트 구조) [내부링크]

리액트 class/hooks로 구현한 숫자야구 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4..

[react] 리액트로 끝말잇기 게임 만들기 [내부링크]

리액트 class/hooks로 구현한 끝말잇기 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx const React = require('react'); const ReactDom = require('react-..

[react] 리액트 컴포넌트 props로 데이터 전달 [내부링크]

리액트에서 컴포넌트간 데이터 전달 방법, props에 대하여 알아보겠습니다. props 부모컴포넌트에서 자식 컴포넌트로 데이터 전달 방식입니다. props 사용방법 //컴포넌트 태그내 예제1. 반복문을 컴포넌트..

[react] react의 반복문 map, 컴포넌트 사용법(ft. props) [내부링크]

리액트 반복문 map()의 사용법에 대하여 알아보겠습니다. · 리액트에서는 반복문을 map으로 사용합니다. · 자바스크립트에서 배열의 반복문에 사용하는 map() 입니다. · vue는 v-for를 통한 반복문을 사용..

[react] 리액트 webpack 설정(ft. npm, babel, webpack.config.js) [내부링크]

리액트를 위한 webpack 설정 하는 법입니다. webpack을 사용하는 이유 수많은 자바스크립트 파일(컴포넌트)을 합쳐서 한개의 자바스크립트 파일로 만들어 관리하기 위함입니다. node 설치 자바스크..

[react] 리액트로 구구단 게임 만들기(ft. hooks 방식, cdn 설치) [내부링크]

리액트 hooks로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. Class 방식과 Hooks 방식의 비교 Class 방식과 Hooks 방식의 비교 · Class보..

[js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) [내부링크]

리액트 클래스로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. class 방식 사용 방법 · state: 변하는 데이터는 state(변경 전 데이터)로 넣습니다....

[js] 카드 공격 게임 완성 (ft. 자바스크립트로 자스스톤 게임 구현 ver.4) [내부링크]

자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.4)입니다. - 게임 공격 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현내용 · 상대방의 영웅 ..

[js] 카드세팅 리팩토링 딕셔너리 구조 (ft. 자바스크립트로 자스스톤 게임 구현 ver.3) [내부링크]

자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.3)입니다. - 카드세팅 리팩토링 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 리팩토링 중복되는 코드는..

[js] 생성자, 카드세팅 (ft. 자바스크립트로 자스스톤 게임 구현 ver.2) [내부링크]

자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.2)입니다. - 카드 세팅, 팩토리, 생성자 패턴 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현..

[js] 팩토리, 생성자 패턴, 카드세팅 (ft. 자바스크립트 자스스톤 게임 구현 ver.1) [내부링크]

자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅, 팩토리, 생성자 패턴, cloneNode() - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다..

[js] 생성자 패턴/인스턴스(ft. this, 팩토리 패턴과의 비교) [내부링크]

생성자 패턴을 팩토리 패턴과 비교하여 알아보겠습니다. 생성자/인스턴스 객체지향 프로그래밍입니다. 객체를 생성하는 함수를 생성자(constructor) 함수라고 부릅니다. 함수 이름 첫 글자를 대문자로 표기하는..

[js] 팩토리 패턴(ft. 프로토 타입, Object.create(), 코드 중복 방지 방법) [내부링크]

디자인 패턴 중, 팩토리 패턴에 대하여 알아보겠습니다. 객체에서 중복되는 코드를 팩토리 패턴을 사용하여, 코드를 줄이거나 제거할 수 있습니다. BEFORE let friend1 = { name: '박지수', age: 20, job: 'n..

[js] 자주 쓰이는 정규식(regular expression) 모음 (ft. 정규표현식) [내부링크]

자주 쓰이는 정규식 1. 암호 조건1. 6~20 영문 대소문자, 최소 1개의 숫자 혹은 특수 문자를 포함해야 함 /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/ 조건2. 8 ~ 10자 영문, 숫자 조합 var regExp =..

[js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.2) [내부링크]

자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.2)입니다. - 기능 구현, 초기화 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 2개씩만 오..

[js] 자바스크립트 forEach() 사용법 [내부링크]

자바스크립트 forEach 메서드의 사용법 입니다. forEach문 배열의 반복문 배열에서만 사용하는 메서드 배열의 처음부터 마지막 요소까지 반복하여 실행 인자로 콜백함수를 받아옴 주어진 콜백함수를 배열 요소 각..

[js] 피셔 예이츠 셔플, 알고리즘 [내부링크]

피셔-예이츠 셔플 알고리즘에 대하여 알아보겠습니다. 피셔 예이츠 셔플(Fisher-Yates Shuffle) 알고리즘  값을 랜덤 하게 섞을 때 사용하는 알고리즘입니다. 로날드 피셔(Ronald Fisher)와 프랭크..

[js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.1) [내부링크]

자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 세팅 총 14개의 카드..

[js] 자바스크립트 toggle 적용하기(ft. add, remove) [내부링크]

자바스크립트를 이용한 toggle 메서드의 사용을 알아보겠습니다. toggle() 토글이란, on/off switch의 개념으로 스위치를 켰다, 껐다 하는 기능을 가지고 있습니다. add()와 remove() 메서드를 한번에..

[vscode]비주얼스튜디오 유용한 플러그인 추천 [내부링크]

최근에 가장 인기있는 코드 에디터, 비주얼 스튜디오의 대표적인 플러그인을 소개합니다. 비주얼 스튜디오 플러그인 리스트 Live Server : 정적 파일을 로컬 서버에 올리고 자동 갱신해주는 플러그인 A..

[vue] vue.js props / emit 사용방법 [내부링크]

일반적인 컴포넌트에서의 데이터 전달 방식인 props, emit의 사용방법을 알아보겠습니다. 구현 화면 코드 예제 폴더 구조 AppHeader.vue(하위 컴포넌트1) 상위 컴포넌트에서 제목을 props로 받아와 출력..

[vue] vue.js 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.7) [내부링크]

오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.7)입니다. - 리팩토링, 공통 컴포넌트화 - 예제는 인프런의 캡틴 판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로..

무료 이미지 배경 제거 사이트 추천(ft. 포토샵 없이 누끼따기) [내부링크]

이미지 작업할 때 꼭 한 번씩 하게 되는 누끼 따기. 무료로 누끼따기를 초간편하게 할 수 있는 사이트를 추천하겠습니다. 1. 배경 제거 사이트 removebg https://www.remove.bg/ko 이미지에서 배경 제거..

[css] 수직 수평 가운데 정렬(ft. flex, align-items: center, justify-content: center;) [내부링크]

css로 수직 수평 가운데 정렬하는 가장 간편한 방법입니다 css를 통하여 text-align: center 또는 margin: 0 auto 등을 이용하여, 수평 가운데 정렬을 하는 방법은 많이 알고 있지만, 수직 가운데 정렬..

[css] reset css 기본값 코드(ft. 기본 css 세팅) [내부링크]

사이트를 제작할 때 css 작업 초기에는 reset css 자료를 꼭 찾게 됩니다. 기본 reset css 코드를 소개하겠습니다. Reset CSS 스타일  초기화를 위한 css 기본값 Eric Meyer’s “Reset CSS” ..

[vue] vue 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.6) [내부링크]

오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.6)입니다. - 리팩토링 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개..

[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형) [내부링크]

스타일링을 할때 ellipsis에 대해 정리해 보도록 하겠습니다. 게시판 또는 카드 타입의 다이얼로그의 제목 부분이 길어질 경우, css를 이용하여 일정 크기 이상에서는 '...' 으로 정리합니다. css 코드 한..

[vue] vue getters, v-html, transition(api 통해 뉴스 사이트 구현 ver.5) [내부링크]

오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.5)입니다. - getters/v-html - getters 적용 코드 정리를 위하여 getters를 이용하여 긴 코드를 줄이고, 가독성을 높일 수 있..

웹, 앱 무료 컬러 색상 추출 사이트 추천 (ft. color 추천, 두 컬러 조합) [내부링크]

UI 디자인을 위한 컬러 선택에 참고할 사이트를 추천합니다. 프로젝트 UI 디자인 작업을 할 때, 가장 중요한 것이 컬러 구성입니다. 어떤 컬러를 선택할지, 몇가지 컬러는 사용할지, 컬러를 어..

[vue] vue.js vue 동적 라우트(api 통해 뉴스 사이트 구현 ver.4) [내부링크]

오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.4)입니다. - 동적 라우트 매칭 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는..

[vue] vue vuex , store적용(api 통해 뉴스 사이트 구현 ver.3) [내부링크]

오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.3)입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서..

[vue] vue axios 이용한 api 서버 통신(api 통해 뉴스 사이트 구현 ver.2) [내부링크]

오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.2)입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서..

[vue] vue.js 라우터 연결, nav 출력(api 통해 뉴스 사이트 구현 ver.1) [내부링크]

오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한..

[js] 자바스크립트로 틱택토(심화버전) 구현하기 [내부링크]

이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 틱택토 구현 BEFORE 버전은 아래 포스트로..

[vue] vue.js computed 속성 [내부링크]

vue.js에서 사용되는 computed속성에 대하여 알아보겠습니다. computed 속성 실시간으로 계산, 로직을 화면에 출력할 때 사용합니다. 실습 예제 <!DOCTYPE html> vue class {{ header.toLocaleUpperCase..

[vue] v-if, v-else, v-show (ft. v-if와 v-show 차이점) [내부링크]

vue.js에서 v-if를 이용한 조건부 렌더링을 알아보겠습니다. v-if v-if와 v-else는 자바스크립트의 조건문 if, else if와 같은 의미입니다. 조건이 성립하지 않으면 렌더링 자체를 하지 않아 태그 자체가..

[js]자바스크립트 스코프, 클로저(ft. 지역/글로벌/렉시컬 scope) [내부링크]

스코프(scope) scope는 영어로 범위라는 뜻 함수 스코프는 자바스크립트 함수의 범위, 즉 { } 안을 의미 스코프는 함수 호출할 때가 아니라 함수선언할 때 생깁니다. 함수 선언도 변수와 같이 스코프의 적용을 받..

[vue] vue 클래스 바인딩(다이너믹 클래스, 객체, 배열, 토글, 스타일 바로 적용) [내부링크]

vue.js에서 속성 바인딩으로 클래스를 적용하는 방법을 알아보겠습니다. 다이너믹 클래스(Dynamic class) 미리 클래스 이름에 스타일을 지정해 놓고, 조건에 맞추어 해당 클래스 적용시킬 때 사용합..

[js] 자바스크립트로 반응속도 테스트 구현 [내부링크]

자바스크립트를 이용하여, 반응속도 테스트를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 특이사항 준비 화면 상태 일 때 랜덤 한 시간..

[js] 자바스크립트로 지뢰찾기 게임 구현하기 [내부링크]

자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰판 만들기(화면..

구글 애드센스 pin 번호 우편물 도착(ft. pin 번호 등록. 은행 계좌 등록) [내부링크]

구글애드센스 입금을 위하여 pin번호를 받고 등록하는 과정을 이야기하겠습니다. 구글 애드센스 홈페이지에서 오랫동안 알림이 떠왔었습니다. pin번호 우편을 보냈고, pin번호를 입력해달라는. 이런 ..

[js] 자바스크립트로 가위바위보 게임 구현하기 [내부링크]

자바스크립트를 이용하여, 가위바위보 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. html 코드 바위 가위 보 css 코드 #computer { height: 250px..

[js] 자바스크립트로 로또추첨기 구현하기 [내부링크]

자바스크립트를 이용하여, 로또 추첨기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 번호 순서 사용 메서드 1 45개의 후보 숫자 만들기..

[js] 자바스크립트로 틱택토 구현하기 (ft. e.target.value, forEach) [내부링크]

자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 전체 코드 <..

Buy me a coffee 티스토리에 적용하기(바이미어커피 위젯 달기) [내부링크]

Buy me coffee 위젯을 내 블로그에 적용하는 방법을 알아보겠습니다. Buy me coffee 사이트 회원 가입 및 계정 생성 아래의 사이트에서 회원가입을 하고, buymeacoffee 뒤에 붙는 link 이름을 등록합니다. 회..

[js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) [내부링크]

자바스크립트를 이용하여, 구구단을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 방법 1. 순수 자바스크립트 2. vue.js 화면 결과 1. 순수 자바스크립..

[js] 자바스크립트로 검색 기능 구현하기 [내부링크]

form 에서 자주 사용하는 기능, 검색을 구현하는 법입니다. 화면 결과 html, css <!DOCTYPE html> Document 수도: Australia Canberra Argentina Buenos Aires Austria Vienna Bahamas Nassau Belgium Brussels..

[js] 자바스크립트로 숫자야구 게임 구현하기 [내부링크]

자바스크립트를 이용하여, 숫자야구를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 438..

[js] 자바스크립트로 끝말잇기 구현하기 [내부링크]

자바스크립트를 이용하여, 끝말잇기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트 <!DOCTYPE html> Document 화면 결과(Result 클릭)

[js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) [내부링크]

jsonplacehoder의 fetch를 사용하여  ajax 통신으로 데이터를 요청하여 화면에 출력해 보겠습니다. 구현내용 · fetch API 이용하여 ajax 통신으로 user 정보 가져오기 · 자바스크립트를 이용하여 버튼 클..

[js] 자바스크립트 map(), filter() 사용법(ft. 배열) [내부링크]

배열에 사용되는 함수, map()과 filter() 에 대하여 알아보겠습니다. map() 메서드 map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다. 결과를 "return ..." 리..

[vue] vue로 게시판 구현하기(ft. 검색, 게시물 추가, 편집, 삭제 기능) [내부링크]

vue.js로 게시판을 만들고, 검색, 게시물 추가, 편집, 삭제하는 기능 구현입니다. 게시판 구현 화면 구현 내용: · vue, vue material CDN 방식으로 html 문서에 설치 · api 서버 통신 대체용 임..

[vue] vue 모달창, 다이얼로그 기능 구현하기(ft. slot) [내부링크]

vue.js 가이드를 활용하여 모달창을 구현하겠습니다. 참고문서 vuejs.org/v2/examples/modal.html Modal Component — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 위의 링크로 이동하여, h..

[vue] vue.js Post 폼 데이터 api 전송하기(axios, 유효성 검사) [내부링크]

vue.js의 폼데이터를 axios를 이용하여 서버통신하는 방법을 알아보겠습니다. form 화면 구현 내용: · vue, axios, vue material CDN 방식으로 html 문서에 설치 · axios, post방식으로 form da..

[vue] vue.js로 todolist 투두리스트 앱 만들기(리팩토링 후) [내부링크]

vue.js와 vue material을 이용한 todolist 앱 리팩토링 리팩토링 전의 앱의 구현 내용은 아래의 포스트로 이동해주세요. https://goddino.tistory.com/90 [js] vue.js로 todolist 투두리스트앱 만들기(refactorin..

[vue] vue.js로 todolist 투두리스트앱 만들기(리팩토링 전) [내부링크]

vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header,..

[vue] vue.js에서 axios 사용하여 서버 통신(vue material 테이블에 데이터 뿌리기) [내부링크]

간단한 예제를 통하여 vue에서 axios를 통하여 서버 통신 하는 법을 알아보겠습니다. axios란 · axios는 Vue에서 서버를 통신할때 사용하는 HTTP 통신 라이브러리 입니다. · axios는 자바스크립트 비동기 처리..

[vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) [내부링크]

vue.js 하위 컴포넌트 만들기 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 vue 파일에서 통합 관리 하는 것을 컴포넌트화 라고 합니다. 순서 1. 폴더 안에 각 하위 컴포넌트 vue 파일 생..

[vue] vue.js 기초 정리 요약(pass props/emit event) [내부링크]

vue.js 기초 정리편 vue 공식 문서, 기술 블로그와 인프런의 vue.js 기초강의, Vue.js 시작하기 - Age of Vue를 듣고 참조하여 정리하였습니다. Vue.js 공식 문서 https://vuejs.org/v2/guide/ Introduction —..

[서식] 견적서 양식 다운로드 [내부링크]

견적서양식(한글파일)을 다운로드 해주세요. 다운로드 파일 견적서 작성요령

[서식] 교육신청서 다운로드 [내부링크]

교육신청서 excel, pdf, jpg 파일 중 골라서 다운로드 해주세요. 다운로드 파일

[서식] 휴가신청서 다운로드 [내부링크]

휴가신청서 excel, pdf, jpg 파일 중 골라서 다운로드 해주세요. 다운로드 파일

[워드프레스] 블루호스트 해지 후 도메인 비용 청구 스팸 메일 처리 방법 [내부링크]

오늘 아침에 이메일을 확인하였다가, 제가 예전에 블루호스트 사이트를 통하여 만든 워드프레스 사이트의 도메인과 관련된 내용의 이메일을 받았습니다. "간단하게, 도메인 비용을 계속 지불하지 않고 있으니,..

[엑셀] 문자 치환, 문자 바꾸기(ft. REPLACE 함수) [내부링크]

엑셀 replace 함수를 이용하여 문자를 치환, 대체하는 방법 입니다. 콘텐츠를 올릴때, 보통 개인정보의 경우는, 또는 * 로 대체 작업 후에 올립니다. 엑셀을 통해 빠르게 문자 치환 하는 방법을 알아보겠습니..

[js/jQuery] input 값의 데이터를 ajax json 형식으로 전송 (ft. 이벤트페이지 ) [내부링크]

고객이 응모하는 이벤트 페이지를 제작할 때, 고객의 정보 및 개인정보 활용동의 체크 등의 데이터를 입력받는 부분이 필요합니다. 그리고 응모한 데이터를 넘기는 작업도 필요합니다. 이럴때 필요한 이벤트 페이..

[상업용 무료폰트] 둥근모꼴 다운로드 [내부링크]

90년대 PC통신에서 사용되었던 글꼴, 둥근모꼴입니다. 둥근모꼴은 옛날에 사용하던 고전식 스타일 폰트입니다. 레트로한 감성과 디자인이 필요한 문구에 딱 사용하기 좋은 폰트입니다. 마리오 또는 한글타자 게임..

[js] 클릭 이벤트 후 이미지 변경, 컬러 변경, 팝업창 오픈 [내부링크]

간단한 자바스크립트, 클릭 이벤트를 이용하여 3가지 동작을 구현하겠습니다. 구현내용 · 클릭시마다 이미지 변경 · 클릭시마다 컬러 변경 · 클릭 후 팝업창 오픈 화면 결과 코드 이미지 바꾸기 컬러 바꾸기..

[무료아이콘폰트] 폰트어썸 Font Awesome6 사용법. 사이트 적용하기 [내부링크]

웹사이트를 만들 때 아이콘 많이 사용하시죠? 아이콘은 이미지와 텍스트를 대체하는, 보다 직관적으로 표현하면서, 사이트를 심플하게 디자인해 줍니다. 제가 퍼블리싱 학원을 다닐 때 선생님께서 사이트에 이미..

[무료템플릿] 미리캔버스로 이벤트 배너 만들기 [내부링크]

이벤트의 아이디어를 기획하고, 이벤트 페이지를 구성하고, 제작하는 일은 제법 시간이 많이 필요합니다. 페이지에 삽입할 홍보 문구, 개인정보 요구의 여부, 사용할 이미지에 관하여, 어떤 것을 사용할지, 이미..

[js] 자바스크립트 모달창(팝업창) 구현 [내부링크]

자바스크립트를 이용하여 모달창(팝업창)을 만들겠습니다. 요즘에는 제이쿼리를 사용하지 않고, 순수한 자바스크립트, 바닐라 js를 이용한 기능 구현을 많이 합니다. 모달창 띄우기 구현내용 · 버튼 클릭시 모달..

[상업용무료폰트] 빙그레 싸만코체 2020 다운로드 [내부링크]

빙그레에서 2020년 10월 9일 한글날을 맞이하여 상업적 무료서체, 빙그레 싸만코체를 8일에 배포하였습니다. 갖나온 뉴 폰트 "빙그레 싸만코체"는 빙그레의 대표 아이스크림 붕어싸만코, 여러분이 잘 알고 계시는..

국민연금 가입증명서 인터넷 발급방법(ft. 국민연금 가입증명) [내부링크]

 국민연금 가입자 가입증명서 인터넷 발급방법 입니다 . 우리가 이직을 하게 될 경우, 옮기는 회사에서 직장 이력을 확인하기 위하여 국민연금 가입증명서를 제출자료로 내는 경우가 많습니다. 예전에는 재직증..

[js] DOM과 BOM의 차이점 [내부링크]

자바스크립트의 기본 DOM 과 BOM 에 대하여 알아보겠습니다. DOM(Document Object Model, 문서 객체 구조) 브라우저들은 사용자가 띄운 웹문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(텍스트, 버튼, 이미..

사직서 작성 방법(ft. 무료 사직서 양식 다운로드, 근로기준법 사직 통보기간) [내부링크]

사직서 작성하기 입니다. 직장생활에서 가장 홀가분한 순간? 바로 사직서를 제출할 때와 회사 단체 카톡방을 나올 때입니다. 샐러리맨들이라면 누구나 이 순간을 꿈꾸지만, 다음 달 카드값, 대출원금 이자 상환,..

[js] let vs const vs var (ft. var의 문제점, 호이스팅) [내부링크]

변수선언 방식인 let, const, var에 대한 차이점과 var의 문제점, hoisting에 대해 알아봅니다. variable, 변수는 프로그래밍 언어에서 우리가 처리해야 하는 데이터를 담을 수 있도록 도와주는, 즉 데이터를 담..

[js] 자바스크립트 onclick · addEventListener 비교 사용법 [내부링크]

자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과 addEventListener 와 onclick의 차이점을 알아보겠습니다. 이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event..

[티스토리] 구글 애드센스 신청하기 [내부링크]

제가 코로나 19의 장애물을 뛰어넘어 15번째 도전만에 결국, 애드센스에 승인이 되었다는 포스팅을 하였었는데요. 저뿐만이 아니라 많은 블로거분들이 이렇게 애드고시라고 하는 애드센스에 사활을 거는 이유는..

[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁) [내부링크]

홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다. <글쓰는 갓디노> 블로그의 메인 페이지도 float: left 속성을 사용하였습니다. float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습..

센드비 기프티콘 모바일쿠폰 구입 및 발송(ft. 샌드비) [내부링크]

센트디로 기프티콘 보내는 방법입니다. 회사에서 모바일 쿠폰을 대량으로 구입해야 할 경우가 많습니다. 저는 회사에서 이벤트 페이지를 기획하면서 당첨자 선물로 스타벅스 아메리카노와 베스킨라빈스 싱글컵 기..

[티스토리] 애드센스 합격 후기 (ft. 애드고시 승인받는 법 꿀팁) [내부링크]

3개월 일주일 만에 길고 긴 여정이었습니다. 드디어 저도 애드센스의 승인이 되어 이렇게 포스트를 할 수 있게 되었습니다. 아직도 실감이 잘 나지 않습니다. 그동안의 히스토리를 살펴보니 6월 15일에 처음 승인..

[react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn) [내부링크]

리액트 개발 환경 설치 방법입니다. 1. Node.js 설치 Node.js는 크롬 v8 자바스크립트 엔진을 기반으로 한 서버사이드 자바스크립트 런타임입니다. 아래 Node.js 공식 홈페이지로 이동해주세요. nodejs.org/ko/..

[css]뷰포트 미디어쿼리 사용하기(ft. 반응형웹 만들기) [내부링크]

화면 크기에 반응하여 화면 요소들을 자동으로 바꿔 사이트를 구현하는 것이 반응형 웹입니다. PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게..

[js] input option 값 출력하기(ft. onchange onfocus) [내부링크]

홈페이지 자주 사용하는 input 태그입니다. 자바스크립트 이용하여 조건에 맞게 input 태그의 select의 option 값을 출력하겠습니다. 자바스크립트를 이용한 input 태그 출력 구현내용 · 구현 1 option 선택 값(..

[상업용무료폰트] 인쇄용 제목용 바탕체 추천(ft. 바른바탕체 kopub바탕체) [내부링크]

실무를 하다가 상장 양식의 제목 및 이름에 사용할 폰트가 필요하여 찾아보았습니다. 인쇄용 문서 제목에 사용하기 좋은 상업용 무료 바탕체 2가지를 추천하겠습니다. 바른 바탕체 (대한인쇄문화협회) 대한인쇄..

[css] background속성 한번에 사용하기 [내부링크]

css 사용의 필수템 background 속성에 대하여 알아보겠습니다. background 속성은 배경을 지정하는 속성으로 해당 영역에 컬러 또는 이미지를 삽입할 때 주로 사용합니다. background 속성 종류 · background-co..

통신판매업 신고증 온라인 신청하기(ft. 스마트스토어 판매자) [내부링크]

제2의 월급통장! 소소한 투잡을 위하여 개인사업자 등록을 완료하였고, 이제 네이버 스마트 스토어에 판매자로 등록을 하겠습니다. 참고로 스마트 스토어는 네이버에서 직접 운영하는 인터넷 쇼핑몰 플랫폼이고,..

에이비앤비 호스트되기(일주일에 6시간 일하고 한달에 150 벌기, 슈퍼호스트 찐후기) [내부링크]

요즘 본업 외에 제2의 통장을 꿈꾸며, 새로운 부업을 찾는 분들이 많습니다. 특히 코로나 19로 인한 재택근무, 실업, 연봉 삭감, 급변하는 미래에 대한 불안감으로 인하여 사이드 허슬을 계획하거나 하고 실행하..

홈택스로 개인 사업자 등록·국민은행 사업자 통장 발급하기(ft. 스마트스토어, 아마존) [내부링크]

제2의 월급통장! 소소한 투잡을 시작하기 위하여 개인사업자 등록을 하였습니다. 스토어팜과 아마존 판매를 타겟으로 하여 판매 사업과 재능 플랫폼을 통하여 코딩 재능 판매를 진행해 볼 계획입니다. 온라인 사..

국비지원 학원 수료 후 취업 성공 후기(ft. 경단녀 국민내일배움카드) [내부링크]

국비지원 훈련기관을 통하여 훈련과정 수료한 취업에 성공한 후기입니다. 저의 경험을 바탕으로 경력단절여성용 취업지원제도를 이용한 경력단절여성 재취업 가이드 전자책을 발행하였습니다. 현재 아래의 사이트..

[크몽] 자소서 첨삭 의뢰 구매 이용후기(ft. 경단녀 자기소개서) [내부링크]

요즘에는 크몽, 숨고와 같은 프리랜서 마켓이 아주 핫한데요. 그 이유는 바쁜 현대인들에게 최대한 시간을 아껴줄 수 있도록 경제적인 비용으로 내가 필요한 분야를 전문가를 통하여 효과적으로 아웃소싱을 할 수..

[js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식) [내부링크]

회원가입 페이지의 유효성 검사에 대하여 알아보겠습니다. 유효성 검사 회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 정보를 잘못 입력했을 경우, 유효성 검사를 통하여 사용자가..

[상업용무료폰트] 교보문고 교보 손글씨 2019 다운로드 [내부링크]

저작권 걱정 없이 상업적으로 사용 가능한 폰트 중 출판 인쇄물, 웹, 광고물 등 여러 가지 다양한 분야에 사용할 수 있는 폰트를 소개하겠습니다. 교보문고의 "교보 손글씨 2019"입니다. 교보 손글씨 2019는 <제5..

2021 최저시급·최저임금·주휴수당 챙기기(ft.고용자실지급액) [내부링크]

2021 최저임금 8,720원 월급으로 환산하면 182만 2,480원 최저시급은 나라에서 노동자의 기본권을 보장하기 위해서 만든 제도로써, 고용인에게 법으로 정해둔 수준 이상의 임금을 지급하도록 하는 제도입니다. 매..

[js] 자바스크립트 버튼 클릭시(onclick) 마다 배경 색상 변경하기 [내부링크]

자바스크립트를 이용하여 버튼을 클릭할 때마다 화면 배경 색상 변경을 구현하겠습니다. 화면 출력내용 · 배경색상(backgroundcolor) 총 6개 배열 · 버튼 1개 사용 · 버튼 클릭시마다 색상값 중 1개가 랜덤으..

[상업용무료폰트] 티몬 몬소리체·티움체 다운로드 [내부링크]

티몬 몬소리체는 몬스터 세계의 언어 '몬소리'를 컨셉으로 만들어진 언어입니다. 오늘은 소셜커머스 오픈마켓의 '티몬'에서 제작하여 배포중인 상업용 무료폰트 "몬소리체", "티움체"를 소개하겠습니다. 티몬 몬..

[js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener) [내부링크]

자바스크립트를 이용하여 이미지들을 사용하여 클릭할 때마다 이미지를 변경을 구현하겠습니다. 화면 출력내용 · 총 8개의 이미지· 총 8개의 이미지 사용 · 첫 화면에는 이미지 1번 나옴 · 버튼 2개 사용(다..

[상업용무료폰트] 빙그레체 다운로드 [내부링크]

오늘 소개할 무료 상업용 폰트는 빙그레체 입니다. 국민 모두가 즐길 수 있는 ‘바나나맛우유',‘투게더', '요플레',‘메로나'의, 그 빙그레 입니다. 1976년 창립되어 국내 식품 산업을 선도해 왔습니다. 이전에..

[css] 가상요소 선택자 ::before, ::after 사용법(ft. 가상 클래스) [내부링크]

웹의 타이틀에 자주 사용되는 ::before, ::after 사용법을 알아보겠습니다. ::before, ::after이 필요한 경우: 홈페이지 헤더나 푸터에 구분선을 삽입할 때 홈페이지 헤더: 로그인ㅣ회원가입ㅣ마이페이지ㅣ사이트..

[상업용무료폰트] 야놀자체 다운로드 [내부링크]

오늘의 무료폰트는 상업용 무료폰트 야놀자체(=야체) 입니다. 동글동글하게 친근하게 생긴 글자입니다. 특히 자음 "ㅇ"과 "ㄹ" 이 유난히 귀엽습니다. 야놀자체는 전국 숙박업체의 미니홈피 스타일의 홈페이지에..

그린컴퓨터아카데미 국비 컴퓨터 학원 후기(ft. 국민내일배움카드) [내부링크]

국비 학원 시리즈 3탄!!입니다. 고용노동부 지정 우수 국비지원훈련기관 그린컴퓨터아카데미, 그린컴퓨터아트학원을 소개하겠습니다. 저는 이곳에서 작년에 UX/UI 디자인 웹 퍼블리셔 6개월 과정을 다녔고, 올해..

[포토샵] 배너 배경. 방사능 패턴 만들기 [내부링크]

배너 배경용으로 많이 사용하는 방사능 패턴을 만들겠습니다. 웹사이트에 사용할 배너를 만들때, 배너의 배경을 어떻게 할지 고민을 많이 합니다. 이럴 경우 사용하는 방사능 패턴입니다. 포토샵의 Define Patter..

[상업용무료폰트] 스웨거 폰트 다운로드 [내부링크]

상업용 무료폰트, 스웨거 폰트에 대하여 알아보겠습니다. 스웨거 폰트(스웨거체, SWAGGER FONT) 남성 라이프 스타일 브랜드 스웨거에서 디자인 컨셉 및 시안 개발에 직접 참여하고, 국내 최대 폰트 개발사인 산돌..

[js/jQuery] 응용편_카운트업 숫자 올라가는 효과 구현. 숫자 자동 증가 [내부링크]

자바스크립트, 제이쿼리의 setInterval, clearInterval 메서드를 이용하여 웹페이지에서 많이 사용되는 숫자 카운트업을 구현하겠습니다. 이전 카운트업 구현하기 포스트는 맛보기용 기초였고, 오늘은 실전편이라..

[상업용무료폰트] 고도체 다운로드 [내부링크]

쇼핑몰 상세 페이지나 유투브에 폰트를 이용할때 상업적으로 사용이 가능한지 사전에 확인해야 합니다. 아무 폰트를 다운받아서 사용하면 추후에 저작권 법에 위반되어 거금을 벌금을 내야하거나, 양이 많을 경우..

[js] 홈페이지 배너 팝업창 띄우기, 창닫기 [내부링크]

홈페이지를 운영을 하다 보면, 꼭 필요한 이벤트나 공지 배너를 홈페이지 첫 창에 띄우는 일이 많습니다. 배너 이미지를 자바스크립트를 이용하여 팝업창에 띄우고, 창닫기를 구현해 보겠습니다. 먼저 팝업창에..

[포토샵] 일자 리본, 둥근 리본 만들기 [내부링크]

이벤트 페이지 또는 상세 페이지를 작업할 때 많이 사용하는 리본을 만들겠습니다. 주로 페이지의 타이틀이나 중요한 파트 제목을 작업할 때 유용하게 사용합니다. 반듯한 일자 리본 & 아치형의 둥근 리본 모두..

[인디자인] 셀프 명함 만들기 [내부링크]

오늘은 셀프로 돈 안 들이고, 간단하게 인디자인을 이용하여 나만의 명함을 만들어 보겠습니다. 사전에 로고가 담긴 일러스트 파일이 필요하고, 기본적인 레이아웃 구상이 필요합니다. 1. 문서 설정하기 ctrl n..

[js] 개인정보 이메일 유효성 검사 후 출력하기 [내부링크]

문자열 객체를 메서드를 이용하여 사용자로부터 입력받은 이메일 주소의 유효성을 검사하는 방법을 알아보겠습니다. 구현내용: · prompt를 이용하여, 사용자의 이름, 핸드폰 번호, 이메일 주소를 입력받음 · 이..

[상업용무료폰트] 배달의민족체 폰트 다운로드 [내부링크]

오늘은 소개할 상업용 무료 폰트는 '배달의 민족 폰트'를 입니다. 제가 블로그 포스팅 첫 배너에 사용하는 폰트는 배달의 민족 도현체입니다. 배달의 민족 회사인 우아한 형제들에서 제약 없이 한글을 쓸 수 있도..

[js] 디데이 시간 날짜 카운트 계산하기 (ft. 자동 날짜 구하기) [내부링크]

javascript를 이용하여 현재 날짜와 특정 날짜, 디데이를 구현합니다. 날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체를 생성합니다. 날짜 객체를 이용하면 달력과 특정 기념일 디데이 계산기를 만들 수..

[일러스트] 블렌드툴 이용하여 긴그림자 글자 만들기(ft. 글자 그림자) [내부링크]

긴 그림자 글자를 일러스트를 활용하여 만드는 법입니다. 배너를 만들 때 텍스트를 이용한 디자인을 많이 하게 됩니다. 일러스트 글자 그림자 만들기 일러스트에 배너 사이즈의 사각형 툴을 만들고, 색상을 넣어..

[vscode] 비주얼스튜디오코드 실시간 미리보기(ft. live server 플러그인 ) [내부링크]

실시간 미리보기 확장 플러그인 설치 방법을 알아보겠습니다. 저는 웹에디터를 braket, atom, visual studio code, noto pad++, dream weaver 를 사용해 보았는데, 최근에는 가독성과 UI 편리성의 이유로 visual..

[티스토리 새에디터] 다음지도. 네이버지도 삽입 [내부링크]

맛집이나 특정 장소를 소개하거나 후기를 쓰는 포스팅을 할 경우, 지도를 삽입합니다. 해외 장소의 경우, 구글맵을 이용하지만, 국내 장소 지도를 삽입할 경우는 다음 지도 또는 네이버 지도를 이용합니다. 티스..

[티스토리 새에디터] 구글맵. 구글지도 삽입 [내부링크]

티스토리에 구글 지도를 삽입하는 방법을 알아보겠습니다. 지도를 넣을때 보통 해외 장소는 구글맵을 이용하고, 국내는 다음 또는 네이버 지도를 이용합니다. 구글맵은 실제로 해외 여행을 다닐 때 정말 작은 식..

[네이버] 셀프 홈페이지 홍보 방법·네이버 홈페이지 마케팅 [내부링크]

네이버에서 홈페이지 홍보하기 (version 2) 블로그 홈페이지 홍보하기 version1은 검색엔진 최적화(SEO) 방법으로 내 블로그·홈페이지를 홍보하는 방법을 알아보았습니다. 궁금하시면 아래 포스트를 확인해주세..

[WEB] 웹에서 하는 내 블로그, 홈페이지 홍보 방법 [내부링크]

오늘은 온라인을 통하여 할 수 있는 홈페이지 홍보 방법을 알아보겠습니다. 우리가 새로운 블로그 · 홈페이지를 만들거나 리뉴얼할 때 관련 고객 또는 불특정 다수에게 홍보하는 방법을 찾게 됩니다. 제가 실제..

[js/jQuery] 기본편_카운트업 숫자 올라가는 효과 구현 (ft. 숫자 자동 증가) [내부링크]

숫자 카운트업 효과를 setInterval, clearInterval 메서드를 이용하여 구현하겠습니다. 실무에서 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. setInterval() / clearInterval() 일정..

연관 키워드 무료 추출 사이트 추천(ft. 웨얼이즈포스트, 블랙키위넷) [내부링크]

무료로 블로그 & 홈페이지 키워드를 분석하여 주는 사이트를 소개하겠습니다. 포스트에 글을 쓰고 혹은 웹페이지에 알맞은 조회수 높은 연관 키워드를 찾고자 할 때 이용합니다. 키워드가 상위 노출되어 조회수가..

[상업용무료폰트] 출판용서체 코펍체 (kopub돋음체, 바탕체) 다운로드 [내부링크]

인쇄물에 사용할 무료 폰트, kopub돋음체, kopub바탕체를 소개합니다. kopub 돋음체, 바탕체란? 한국출판회의에서 전자출판용 서체용으로 개발하여 저작권을 가지고 있고, 무료 배포를 하고 있습니다. 한국출판인..

[인디자인] 나만의 달력. 셀프 달력 만들기 [내부링크]

요즘 학원을 통해 인디자인을 배우고 있는데, 오늘 배운, 알고 나면 나중에 쓸 일 있을 인디자인으로 만들어보는 달력! 나만의 달력을 만들어 봅니다. 현재 6월이기 때문에 6월 달력을 예제로 만들어 보겠습니다...

[인디자인] 영문판에서 한글판으로 변경하기(ft. cs6와 cc 비교) [내부링크]

인디자인에서 영문판에서 한글판으로 언어 변경하는 방법입니다. 포토샵과 일러스트레이터는 영문판을 주로 사용했기 때문에 디자인도 영문판으로 사용해야 하는게 아닐까 라고 생각하는 경우가 많은것 같습니다...

[js/jQuery] 반응형 캐러셀(carousel) 슬라이드 구현하기 [내부링크]

반응형 캐러셀 슬라이드를 구현합니다. swiper, slick slide, owl slide와 같은 자바스크립트 라이브러리를 사용하면 매우 편하지만, 자바스크립트와 제이쿼리를 이용하여 슬라이드를 직접 구현 합니다. 슬라이드..

색상추출 색상조합 컬러추천 무료 사이트 추천 [내부링크]

색상추출/색상조합 사이트를 추천합니다. 디자인 작업을 하다 보면 COLOR의 중요성을 아주 많이 느끼게 됩니다. 예쁜 색, 어울리는 컬러를 고르거나, 컬러 조합이 필요할 경우가 많은데, 색알못인 저는 이럴 때..

[js/jQuery] 자바스크립트 이용한 반응형웹 이미지 가운데 정렬 [내부링크]

반응형 사이트에서 javascript/jQuery를 이용한 가운데 정렬입니다. 반응형 웹에서 이미지 또는 컨텐츠를 같은 크기의 비율로 수직 수평 가운데 위치하는 것은 보기에는 쉬워보이지만 의외로 html, css 만으로는..

고용노동부 국민내일배움카드 신청하기(ft. 경단녀, 국비학원) [내부링크]

국민내일배움 카드 신청과 사용방법에 대하여 이야기해보려고 합니다. 저의 경험과 재취업에 꼭 필요한 유익한 정보를 바탕으로 경력단절여성용 취업지원제도를 이용한 경력단절여성 재취업 가이드 전자책을 발..

[css] css 이미지, 컨텐츠 가운데 정렬 2가지 방법 [내부링크]

css만으로 요소를 가운데 정렬하는 방법을 소개하겠습니다. 반응형 웹이 아닌 일반 pc 또는 mobile용 웹을 만들 때는 javascript, jQuery를 사용할 없이 css만으로 가운데 정렬을 할 수가 있어 간단합니다. css로..

이젠 아카데미 국비지원 컴퓨터 학원 후기(ft. 국민내일배움카드) [내부링크]

국비학원 시리즈 2탄이라고나 할까요. 오늘은 내돈내공 컴퓨터학원, 제가 현재 다니고 있는 이젠 아카데미 컴퓨터학원을 소개해보겠습니다. 두개의 과정을 듣고있는데, 하나는 프론트엔드 프로그램, 또 하나는 디..

[js/jQuery] 탭메뉴 구현하기 [내부링크]

javascript/jQuery를 이용한 탭메뉴를 구현하기 홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다. javascript/jQuery를 이용하여 구현하겠습니다. 구현방법: · 첫번째 탭제목에 컬..

경단녀, 3주 만에 토익 900점대 달성후기(ft. 토익 900점 꿀팁) [내부링크]

경단녀 탈출을 위한 십 년 만의 토익 재도전! 대학교 때 취준생 때 보았던 토익을, 10년이 지난 후 재취업을 위하여 도전하였습니다. 1년 동안 백수로 지냈던 저는 어느새 경단녀(경력단절녀)가 되었고, 재취업을..

블루호스트(워드프레스호스트) 탈퇴 환불받기 [내부링크]

몇달전부터 워드프레스를 알아보고, 호스팅과 도메인 신청을 위한 사이트인, 블루호스트에 가입하고, 1년치 구독을 신청하였습니다! Total 가격은 $196.20(한화로 약 23만원) 이렇게 부픈 꿈과 나만의 블로그 또..

고용노동부 국비지원 컴퓨터학원 3곳 후기 학원별 비교(ft. 국민내일배움카드) [내부링크]

국비지원 컴퓨터학원 3곳 후기 및 학원별 평점 입니다. 저는 2019년부터 현재까지 6군데 이상 고용노동부 국비지원 훈련기관에 대하여 사전조사를 하고, 이 중 3군데를 다녔습니다. 국비지원 훈련기관은 내일배움..

웹디자인 기능사 자격증 합격후기(ft. 합격꿀팁! 실기시험 문제 소스 구현) [내부링크]

안녕하세요. 2019년 9월 초에 이틀에 걸쳐 웹디자인 기능사 자격시험을 치르고, 약 20일 후에 합격소식을 전해 들었습니다. 코알못으로 시작하여 6개월동안 국비지원 학원을 다니며 공부하면서 고생아닌 고생을..