[react] react로 api 이용하여 뉴스 사이트 만들기
newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러와 블로그 형태의 뉴스 사이트를 만들겠습니다. 예제는 길벗의 리액트를 다루는 기술을 보면서 공부한 예제입니다. 화면 결과 axios로 뉴스 api 호출..
키자드에 등록된 총 341개의 포스트를 확인하실 수 있습니다.
newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러와 블로그 형태의 뉴스 사이트를 만들겠습니다. 예제는 길벗의 리액트를 다루는 기술을 보면서 공부한 예제입니다. 화면 결과 axios로 뉴스 api 호출..
react-router-dom 설치하는 방법을 알아보겠습니다. routing ・ 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다. ・ 리액트 자체에 이 기능이 내장되어 있지 않기 때문에 라이브러리를 사용하여..
리액트 class/hooks로 구현한 로또 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://godd..
리액트 hooks로 구현한 틱택토 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.ti..
useReducer state가 많을 경우, state를 하나로 묶어주는 역할을 합니다. useReducer 사용 방법 state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을..
구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오..
구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈..
리액트 class/hooks로 구현한 끝말잇기 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx const React = require('react'); const ReactDom = require('react-..
리액트 class/hooks로 구현한 숫자야구 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4..
리액트 class/hooks로 구현한 반응속도 테스트 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom fr..
리액트 class/hooks로 구현한 가위바위보 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom from 'reac..
자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.4)입니다. - 게임 공격 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현내용 · 상대방의 영웅 ..
리액트 클래스로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. class 방식 사용 방법 · state: 변하는 데이터는 state(변경 전 데이터)로 넣습니다....
리액트 hooks로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. Class 방식과 Hooks 방식의 비교 Class 방식과 Hooks 방식의 비교 · Class보..
리액트를 위한 webpack 설정 하는 법입니다. webpack을 사용하는 이유 수많은 자바스크립트 파일(컴포넌트)을 합쳐서 한개의 자바스크립트 파일로 만들어 관리하기 위함입니다. node 설치 자바스크..
리액트 반복문 map()의 사용법에 대하여 알아보겠습니다. · 리액트에서는 반복문을 map으로 사용합니다. · 자바스크립트에서 배열의 반복문에 사용하는 map() 입니다. · vue는 v-for를 통한 반복문을 사용..
리액트에서 컴포넌트간 데이터 전달 방법, props에 대하여 알아보겠습니다. props 부모컴포넌트에서 자식 컴포넌트로 데이터 전달 방식입니다. props 사용방법 //컴포넌트 태그내 예제1. 반복문을 컴포넌트..
생성자 패턴을 팩토리 패턴과 비교하여 알아보겠습니다. 생성자/인스턴스 객체지향 프로그래밍입니다. 객체를 생성하는 함수를 생성자(constructor) 함수라고 부릅니다. 함수 이름 첫 글자를 대문자로 표기하는..
자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅, 팩토리, 생성자 패턴, cloneNode() - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다..
자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.2)입니다. - 카드 세팅, 팩토리, 생성자 패턴 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현..
자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.3)입니다. - 카드세팅 리팩토링 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 리팩토링 중복되는 코드는..
피셔-예이츠 셔플 알고리즘에 대하여 알아보겠습니다. 피셔 예이츠 셔플(Fisher-Yates Shuffle) 알고리즘 값을 랜덤 하게 섞을 때 사용하는 알고리즘입니다. 로날드 피셔(Ronald Fisher)와 프랭크..
자바스크립트 forEach 메서드의 사용법 입니다. forEach문 배열의 반복문 배열에서만 사용하는 메서드 배열의 처음부터 마지막 요소까지 반복하여 실행 인자로 콜백함수를 받아옴 주어진 콜백함수를 배열 요소 각..
자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.2)입니다. - 기능 구현, 초기화 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 2개씩만 오..
자주 쓰이는 정규식 1. 암호 조건1. 6~20 영문 대소문자, 최소 1개의 숫자 혹은 특수 문자를 포함해야 함 /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/ 조건2. 8 ~ 10자 영문, 숫자 조합 var regExp =..
디자인 패턴 중, 팩토리 패턴에 대하여 알아보겠습니다. 객체에서 중복되는 코드를 팩토리 패턴을 사용하여, 코드를 줄이거나 제거할 수 있습니다. BEFORE let friend1 = { name: '박지수', age: 20, job: 'n..
일반적인 컴포넌트에서의 데이터 전달 방식인 props, emit의 사용방법을 알아보겠습니다. 구현 화면 코드 예제 폴더 구조 AppHeader.vue(하위 컴포넌트1) 상위 컴포넌트에서 제목을 props로 받아와 출력..
최근에 가장 인기있는 코드 에디터, 비주얼 스튜디오의 대표적인 플러그인을 소개합니다. 비주얼 스튜디오 플러그인 리스트 Live Server : 정적 파일을 로컬 서버에 올리고 자동 갱신해주는 플러그인 A..
자바스크립트를 이용한 toggle 메서드의 사용을 알아보겠습니다. toggle() 토글이란, on/off switch의 개념으로 스위치를 켰다, 껐다 하는 기능을 가지고 있습니다. add()와 remove() 메서드를 한번에..
자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 세팅 총 14개의 카드..
오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.6)입니다. - 리팩토링 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개..
사이트를 제작할 때 css 작업 초기에는 reset css 자료를 꼭 찾게 됩니다. 기본 reset css 코드를 소개하겠습니다. Reset CSS 스타일 초기화를 위한 css 기본값 Eric Meyer’s “Reset CSS” ..
css로 수직 수평 가운데 정렬하는 가장 간편한 방법입니다 css를 통하여 text-align: center 또는 margin: 0 auto 등을 이용하여, 수평 가운데 정렬을 하는 방법은 많이 알고 있지만, 수직 가운데 정렬..
이미지 작업할 때 꼭 한 번씩 하게 되는 누끼 따기. 무료로 누끼따기를 초간편하게 할 수 있는 사이트를 추천하겠습니다. 1. 배경 제거 사이트 removebg https://www.remove.bg/ko 이미지에서 배경 제거..
오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.7)입니다. - 리팩토링, 공통 컴포넌트화 - 예제는 인프런의 캡틴 판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로..
오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.3)입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서..
오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.4)입니다. - 동적 라우트 매칭 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는..
UI 디자인을 위한 컬러 선택에 참고할 사이트를 추천합니다. 프로젝트 UI 디자인 작업을 할 때, 가장 중요한 것이 컬러 구성입니다. 어떤 컬러를 선택할지, 몇가지 컬러는 사용할지, 컬러를 어..
오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.5)입니다. - getters/v-html - getters 적용 코드 정리를 위하여 getters를 이용하여 긴 코드를 줄이고, 가독성을 높일 수 있..
스타일링을 할때 ellipsis에 대해 정리해 보도록 하겠습니다. 게시판 또는 카드 타입의 다이얼로그의 제목 부분이 길어질 경우, css를 이용하여 일정 크기 이상에서는 '...' 으로 정리합니다. css 코드 한..
vue.js에서 사용되는 computed속성에 대하여 알아보겠습니다. computed 속성 실시간으로 계산, 로직을 화면에 출력할 때 사용합니다. 실습 예제 <!DOCTYPE html> vue class {{ header.toLocaleUpperCase..
이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 틱택토 구현 BEFORE 버전은 아래 포스트로..
오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한..
오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.2)입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서..
자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰판 만들기(화면..
자바스크립트를 이용하여, 반응속도 테스트를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 특이사항 준비 화면 상태 일 때 랜덤 한 시간..
vue.js에서 속성 바인딩으로 클래스를 적용하는 방법을 알아보겠습니다. 다이너믹 클래스(Dynamic class) 미리 클래스 이름에 스타일을 지정해 놓고, 조건에 맞추어 해당 클래스 적용시킬 때 사용합..
스코프(scope) scope는 영어로 범위라는 뜻 함수 스코프는 자바스크립트 함수의 범위, 즉 { } 안을 의미 스코프는 함수 호출할 때가 아니라 함수선언할 때 생깁니다. 함수 선언도 변수와 같이 스코프의 적용을 받..
vue.js에서 v-if를 이용한 조건부 렌더링을 알아보겠습니다. v-if v-if와 v-else는 자바스크립트의 조건문 if, else if와 같은 의미입니다. 조건이 성립하지 않으면 렌더링 자체를 하지 않아 태그 자체가..
자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 전체 코드 <..
자바스크립트를 이용하여, 로또 추첨기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 번호 순서 사용 메서드 1 45개의 후보 숫자 만들기..
자바스크립트를 이용하여, 가위바위보 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. html 코드 바위 가위 보 css 코드 #computer { height: 250px..
구글애드센스 입금을 위하여 pin번호를 받고 등록하는 과정을 이야기하겠습니다. 구글 애드센스 홈페이지에서 오랫동안 알림이 떠왔었습니다. pin번호 우편을 보냈고, pin번호를 입력해달라는. 이런 ..
form 에서 자주 사용하는 기능, 검색을 구현하는 법입니다. 화면 결과 html, css <!DOCTYPE html> Document 수도: Australia Canberra Argentina Buenos Aires Austria Vienna Bahamas Nassau Belgium Brussels..
자바스크립트를 이용하여, 구구단을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 방법 1. 순수 자바스크립트 2. vue.js 화면 결과 1. 순수 자바스크립..
Buy me coffee 위젯을 내 블로그에 적용하는 방법을 알아보겠습니다. Buy me coffee 사이트 회원 가입 및 계정 생성 아래의 사이트에서 회원가입을 하고, buymeacoffee 뒤에 붙는 link 이름을 등록합니다. 회..
자바스크립트를 이용하여, 끝말잇기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트 <!DOCTYPE html> Document 화면 결과(Result 클릭)
자바스크립트를 이용하여, 숫자야구를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 438..
vue.js 가이드를 활용하여 모달창을 구현하겠습니다. 참고문서 vuejs.org/v2/examples/modal.html Modal Component — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 위의 링크로 이동하여, h..
vue.js로 게시판을 만들고, 검색, 게시물 추가, 편집, 삭제하는 기능 구현입니다. 게시판 구현 화면 구현 내용: · vue, vue material CDN 방식으로 html 문서에 설치 · api 서버 통신 대체용 임..
배열에 사용되는 함수, map()과 filter() 에 대하여 알아보겠습니다. map() 메서드 map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다. 결과를 "return ..." 리..
jsonplacehoder의 fetch를 사용하여 ajax 통신으로 데이터를 요청하여 화면에 출력해 보겠습니다. 구현내용 · fetch API 이용하여 ajax 통신으로 user 정보 가져오기 · 자바스크립트를 이용하여 버튼 클..
vue.js 하위 컴포넌트 만들기 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 vue 파일에서 통합 관리 하는 것을 컴포넌트화 라고 합니다. 순서 1. 폴더 안에 각 하위 컴포넌트 vue 파일 생..
간단한 예제를 통하여 vue에서 axios를 통하여 서버 통신 하는 법을 알아보겠습니다. axios란 · axios는 Vue에서 서버를 통신할때 사용하는 HTTP 통신 라이브러리 입니다. · axios는 자바스크립트 비동기 처리..
vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header,..
vue.js와 vue material을 이용한 todolist 앱 리팩토링 리팩토링 전의 앱의 구현 내용은 아래의 포스트로 이동해주세요. https://goddino.tistory.com/90 [js] vue.js로 todolist 투두리스트앱 만들기(refactorin..
vue.js의 폼데이터를 axios를 이용하여 서버통신하는 방법을 알아보겠습니다. form 화면 구현 내용: · vue, axios, vue material CDN 방식으로 html 문서에 설치 · axios, post방식으로 form da..
오늘 아침에 이메일을 확인하였다가, 제가 예전에 블루호스트 사이트를 통하여 만든 워드프레스 사이트의 도메인과 관련된 내용의 이메일을 받았습니다. "간단하게, 도메인 비용을 계속 지불하지 않고 있으니,..
vue.js 기초 정리편 vue 공식 문서, 기술 블로그와 인프런의 vue.js 기초강의, Vue.js 시작하기 - Age of Vue를 듣고 참조하여 정리하였습니다. Vue.js 공식 문서 https://vuejs.org/v2/guide/ Introduction —..
간단한 자바스크립트, 클릭 이벤트를 이용하여 3가지 동작을 구현하겠습니다. 구현내용 · 클릭시마다 이미지 변경 · 클릭시마다 컬러 변경 · 클릭 후 팝업창 오픈 화면 결과 코드 이미지 바꾸기 컬러 바꾸기..
90년대 PC통신에서 사용되었던 글꼴, 둥근모꼴입니다. 둥근모꼴은 옛날에 사용하던 고전식 스타일 폰트입니다. 레트로한 감성과 디자인이 필요한 문구에 딱 사용하기 좋은 폰트입니다. 마리오 또는 한글타자 게임..
고객이 응모하는 이벤트 페이지를 제작할 때, 고객의 정보 및 개인정보 활용동의 체크 등의 데이터를 입력받는 부분이 필요합니다. 그리고 응모한 데이터를 넘기는 작업도 필요합니다. 이럴때 필요한 이벤트 페이..
엑셀 replace 함수를 이용하여 문자를 치환, 대체하는 방법 입니다. 콘텐츠를 올릴때, 보통 개인정보의 경우는, 또는 * 로 대체 작업 후에 올립니다. 엑셀을 통해 빠르게 문자 치환 하는 방법을 알아보겠습니..
빙그레에서 2020년 10월 9일 한글날을 맞이하여 상업적 무료서체, 빙그레 싸만코체를 8일에 배포하였습니다. 갖나온 뉴 폰트 "빙그레 싸만코체"는 빙그레의 대표 아이스크림 붕어싸만코, 여러분이 잘 알고 계시는..
자바스크립트를 이용하여 모달창(팝업창)을 만들겠습니다. 요즘에는 제이쿼리를 사용하지 않고, 순수한 자바스크립트, 바닐라 js를 이용한 기능 구현을 많이 합니다. 모달창 띄우기 구현내용 · 버튼 클릭시 모달..
이벤트의 아이디어를 기획하고, 이벤트 페이지를 구성하고, 제작하는 일은 제법 시간이 많이 필요합니다. 페이지에 삽입할 홍보 문구, 개인정보 요구의 여부, 사용할 이미지에 관하여, 어떤 것을 사용할지, 이미..
웹사이트를 만들 때 아이콘 많이 사용하시죠? 아이콘은 이미지와 텍스트를 대체하는, 보다 직관적으로 표현하면서, 사이트를 심플하게 디자인해 줍니다. 제가 퍼블리싱 학원을 다닐 때 선생님께서 사이트에 이미..
자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과 addEventListener 와 onclick의 차이점을 알아보겠습니다. 이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event..
변수선언 방식인 let, const, var에 대한 차이점과 var의 문제점, hoisting에 대해 알아봅니다. variable, 변수는 프로그래밍 언어에서 우리가 처리해야 하는 데이터를 담을 수 있도록 도와주는, 즉 데이터를 담..
사직서 작성하기 입니다. 직장생활에서 가장 홀가분한 순간? 바로 사직서를 제출할 때와 회사 단체 카톡방을 나올 때입니다. 샐러리맨들이라면 누구나 이 순간을 꿈꾸지만, 다음 달 카드값, 대출원금 이자 상환,..
자바스크립트의 기본 DOM 과 BOM 에 대하여 알아보겠습니다. DOM(Document Object Model, 문서 객체 구조) 브라우저들은 사용자가 띄운 웹문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(텍스트, 버튼, 이미..
국민연금 가입자 가입증명서 인터넷 발급방법 입니다 . 우리가 이직을 하게 될 경우, 옮기는 회사에서 직장 이력을 확인하기 위하여 국민연금 가입증명서를 제출자료로 내는 경우가 많습니다. 예전에는 재직증..
3개월 일주일 만에 길고 긴 여정이었습니다. 드디어 저도 애드센스의 승인이 되어 이렇게 포스트를 할 수 있게 되었습니다. 아직도 실감이 잘 나지 않습니다. 그동안의 히스토리를 살펴보니 6월 15일에 처음 승인..
센트디로 기프티콘 보내는 방법입니다. 회사에서 모바일 쿠폰을 대량으로 구입해야 할 경우가 많습니다. 저는 회사에서 이벤트 페이지를 기획하면서 당첨자 선물로 스타벅스 아메리카노와 베스킨라빈스 싱글컵 기..
홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다. <글쓰는 갓디노> 블로그의 메인 페이지도 float: left 속성을 사용하였습니다. float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습..
제가 코로나 19의 장애물을 뛰어넘어 15번째 도전만에 결국, 애드센스에 승인이 되었다는 포스팅을 하였었는데요. 저뿐만이 아니라 많은 블로거분들이 이렇게 애드고시라고 하는 애드센스에 사활을 거는 이유는..
css 사용의 필수템 background 속성에 대하여 알아보겠습니다. background 속성은 배경을 지정하는 속성으로 해당 영역에 컬러 또는 이미지를 삽입할 때 주로 사용합니다. background 속성 종류 · background-co..
실무를 하다가 상장 양식의 제목 및 이름에 사용할 폰트가 필요하여 찾아보았습니다. 인쇄용 문서 제목에 사용하기 좋은 상업용 무료 바탕체 2가지를 추천하겠습니다. 바른 바탕체 (대한인쇄문화협회) 대한인쇄..
홈페이지 자주 사용하는 input 태그입니다. 자바스크립트 이용하여 조건에 맞게 input 태그의 select의 option 값을 출력하겠습니다. 자바스크립트를 이용한 input 태그 출력 구현내용 · 구현 1 option 선택 값(..
화면 크기에 반응하여 화면 요소들을 자동으로 바꿔 사이트를 구현하는 것이 반응형 웹입니다. PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게..
리액트 개발 환경 설치 방법입니다. 1. Node.js 설치 Node.js는 크롬 v8 자바스크립트 엔진을 기반으로 한 서버사이드 자바스크립트 런타임입니다. 아래 Node.js 공식 홈페이지로 이동해주세요. nodejs.org/ko/..
국비지원 훈련기관을 통하여 훈련과정 수료한 취업에 성공한 후기입니다. 저의 경험을 바탕으로 경력단절여성용 취업지원제도를 이용한 경력단절여성 재취업 가이드 전자책을 발행하였습니다. 현재 아래의 사이트..
제2의 월급통장! 소소한 투잡을 시작하기 위하여 개인사업자 등록을 하였습니다. 스토어팜과 아마존 판매를 타겟으로 하여 판매 사업과 재능 플랫폼을 통하여 코딩 재능 판매를 진행해 볼 계획입니다. 온라인 사..
요즘 본업 외에 제2의 통장을 꿈꾸며, 새로운 부업을 찾는 분들이 많습니다. 특히 코로나 19로 인한 재택근무, 실업, 연봉 삭감, 급변하는 미래에 대한 불안감으로 인하여 사이드 허슬을 계획하거나 하고 실행하..
제2의 월급통장! 소소한 투잡을 위하여 개인사업자 등록을 완료하였고, 이제 네이버 스마트 스토어에 판매자로 등록을 하겠습니다. 참고로 스마트 스토어는 네이버에서 직접 운영하는 인터넷 쇼핑몰 플랫폼이고,..
2021 최저임금 8,720원 월급으로 환산하면 182만 2,480원 최저시급은 나라에서 노동자의 기본권을 보장하기 위해서 만든 제도로써, 고용인에게 법으로 정해둔 수준 이상의 임금을 지급하도록 하는 제도입니다. 매..