본문 바로가기
[js] 자바스크립트로 숫자야구 게임 구현하기 자바스크립트를 이용하여, 숫자야구를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4385, 조건)겹치지 않는 4개 사용자가 답을 입력 입력한 답의 결과 발표 결과 발표: 홈런/스트라이크/볼 홈런) 숫자가 모두 일치할 경우 스트라이크) 자리수가 맞을 경우 볼) 자리수는 맞이 않으나, 숫자가 맞을 경우 답이 맞을때까지 10회 제한을 둠 순수 자바스크립트(리팩토링 전) 순수 자바스크립트(리팩토링 후) 리팩토링 부분 다음 문제 내는 코드가 3번 반복되므로 이를 함수로 만들어 준다. function selectNumFn() { candidate = [1, 2, 3, 4, 5, 6, 7, 8, ..
[js] 자바스크립트로 끝말잇기 구현하기 자바스크립트를 이용하여, 끝말잇기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트 화면 결과(Result 클릭)
[js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) 자바스크립트를 이용하여, 구구단을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 방법 1. 순수 자바스크립트 2. vue.js 화면 결과 1. 순수 자바스크립트 2. vue.js 간단한 구현 내용으로 vue.js cdn을 설치하였습니다. 구구단 {{ num1 }} 곱하기 {{ num2 }} 는? //focus() 처리를 위하여 ref 사용 결과 {{result}} parseInt() String을 Number 타입으로 바꾸는 함수 입니다. 타입을 바꾸기 위해 Number() 또는 String()을 사용하기도 합니다. parseIng() 예제 parseInt("10"); // 10 parseInt("-10") // -10 parseInt("10.5")..
[js] 자바스크립트로 검색 기능 구현하기 form 에서 자주 사용하는 기능, 검색을 구현하는 법입니다. 화면 결과 html, css 수도: Australia Canberra Argentina Buenos Aires Austria Vienna Bahamas Nassau Belgium Brussels Canada Ottawa Chile Santiago China Beijing Cuba Havana Czechia Prague Denmark Copenhagen Ecuador Quito Egypt Cairo Finland Helsinki France Paris Germany Berlin Greece Athens Hungary Budapest India New Delhi script 코드 1) indexOf() function filter() { let ..
[js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) jsonplacehoder의 fetch를 사용하여 ajax 통신으로 데이터를 요청하여 화면에 출력해 보겠습니다. 구현내용 · fetch API 이용하여 ajax 통신으로 user 정보 가져오기 · 자바스크립트를 이용하여 버튼 클릭시 name, email 화면에 출력 평소에 데이터 서버 기능 구현을 위해서 테스트용으로 많이 사용하는 JSONPlaceholder 사용법을 알아보겠니다. 사이트 이동 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Fake online REST API for testing and prototyping When to use JSONPlaceholder is a free online REST API that you can use ..
[js] 자바스크립트 map(), filter() 사용법(ft. 배열) 배열에 사용되는 함수, map()과 filter() 에 대하여 알아보겠습니다. map() 메서드 map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다. 결과를 "return ..." 리턴 값으로 추출합니다. 단, 실행문이 한 개만 반환될 경우, return 키워드와 {} 를 생략할 수 있습니다. 예시 cosnt a = numbers.map(number => { return number number < 3) map 함수 구문 array.map(callbackFunction(current value, index, array), thisArg) currentV..
[vue] vue로 게시판 구현하기(ft. 검색, 게시물 추가, 편집, 삭제 기능) vue.js로 게시판을 만들고, 검색, 게시물 추가, 편집, 삭제하는 기능 구현입니다. 게시판 구현 화면 구현 내용: · vue, vue material CDN 방식으로 html 문서에 설치 · api 서버 통신 대체용 임시 테스트 데이터 script 내 설정 · 게시판에 게시물 추가 - 추가 기능 · 해당 게시물 편집 - 편집 기능 · 해당 게시물 삭제 - 삭제 기능 · 게시물 제목 이용한 검색 기능 html 간단한 마크업을 위해 vue, vue material을 cdn 방식으로 설치하고, 임의의 더미데이터를 삽입하여 데이터 추가, 검색, 편집, 삭제 기능을 구현한 코드입니다. Todo List Search for SUBJECT DESCRIPTION {{ listItem.subject }} {{ lis..
[vue] vue 모달창, 다이얼로그 기능 구현하기(ft. slot) vue.js 가이드를 활용하여 모달창을 구현하겠습니다. 참고문서 vuejs.org/v2/examples/modal.html Modal Component — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 위의 링크로 이동하여, html과 css의 코드를 그대로 나의 문서에 적용시키면 됩니다. 모달창 적용 방법 1. Modal.vue 의 파일(모달용 하위 컴포넌트)을 하나 생성합니다. 2. 상위 컴포넌트에 Modal 컴포넌트를 부릅니다.(import) 3. 가이드의 코드를 위의 컴포넌트들에게 적용합니다. 구현 화면 Modal.vue(모달용 하위 컴포넌트) default header default body default footer close ..
[vue] vue.js Post 폼 데이터 api 전송하기(axios, 유효성 검사) vue.js의 폼데이터를 axios를 이용하여 서버통신하는 방법을 알아보겠습니다. form 화면 구현 내용: · vue, axios, vue material CDN 방식으로 html 문서에 설치 · axios, post방식으로 form data api로 전송 · 가상의 post url : http://jsonplaceholder.typicode.com/posts · 디자인 vue material 사용 · 유효성 검사 - 이름, 이메일, 성별, 동의 체크박스 필수 입력 · 전송후 form 데이터 입력값 다 지우기 · 특정 값 선택시 textarea disabled 속성 처리 html 문서 내 코드 Sign up Name Email address Gender Male Femail Your job Develo..
[vue] vue.js로 todolist 투두리스트 앱 만들기(리팩토링 후) vue.js와 vue material을 이용한 todolist 앱 리팩토링 리팩토링 전의 앱의 구현 내용은 아래의 포스트로 이동해주세요. https://goddino.tistory.com/90 [js] vue.js로 todolist 투두리스트앱 만들기(refactoring전) vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header,.. goddino.tistory.com 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. TodoList 앱화면 리팩토링 작업 과정: 하위 컴포넌트..
[vue] vue.js로 todolist 투두리스트앱 만들기(리팩토링 전) vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header, input, list, footer component로 분리 · Things To Do라는 input 박스에 해야할일을 기입 · 해야할일 기입 후 enter 또는 오른쪽 plus버튼 클릭시, 아래 리스트에 추가 · CLEAR ALL 버튼 클릭시 전체 삭제 · refactoring 전 구현이 미완성된 상태 · vue material을 이용한 css · localstorage를 이용한 데이터 저장/불러오기/삭제하기 기능 App.vue TodoHeader..
[vue] vue.js에서 axios 사용하여 서버 통신(vue material 테이블에 데이터 뿌리기) 간단한 예제를 통하여 vue에서 axios를 통하여 서버 통신 하는 법을 알아보겠습니다. axios란 · axios는 Vue에서 서버를 통신할때 사용하는 HTTP 통신 라이브러리 입니다. · axios는 자바스크립트 비동기 처리에 사용되는 객체인 promise를 기반으로 이루어졌습니다. · aixos는 오픈소스이므로 axios github를 통하여 자세한 내용을 확인할 수 있습니다. · 이와 비슷하게 jQuery에서는 ajax를 이용하여 데이터를 호출, 받아오고, 수정하는 작업을 합니다. axios 요청 방법 데이터 불러오기: axios.get(url[, config]) 데이터 입력하기: axios.post(url[, data[, config]]) 데이터 수정하기: axios.patch(url[, dat..
[vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) vue.js 하위 컴포넌트 만들기 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 vue 파일에서 통합 관리 하는 것을 컴포넌트화 라고 합니다. 순서 1. 폴더 안에 각 하위 컴포넌트 vue 파일 생성 2. 상위 컴포넌트(App.vue) script 내에 하위 컴포넌트로 import로 콜 3. export default, components 메소드 안, import한 하위 컴포넌트 export 처리 4. 상위 컴포넌트 template 태그내, 각 하위 컴포넌트 태그 삽입 이렇게 컴포넌트 작업이 완료되었습니다. main.js 파일을 확인해 보면, 각각의 하위 컴포넌트가 하나로 합쳐진 App.vue 파일이 import가 되어 아래 vue 인스턴스를 통하여 Virtual Dom 화면에 출력..
[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 — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Vue.js란? Progressive Javascript framework for buiding user interfaces and front-end applications Vue.js의 핵심 Reactivity (반응성) Vue의 가장 큰 특징으로서, 데이터에 대한 변화를 vue에서 감지하여 화면에 바로 반영합니다. 즉, 데이터..
[js/jQuery] input 값의 데이터를 ajax json 형식으로 전송 (ft. 이벤트페이지 ) 고객이 응모하는 이벤트 페이지를 제작할 때, 고객의 정보 및 개인정보 활용동의 체크 등의 데이터를 입력받는 부분이 필요합니다. 그리고 응모한 데이터를 넘기는 작업도 필요합니다. 이럴때 필요한 이벤트 페이지용, 개인정보 입력 후, 자바스크립트를 이용하여 유효성 검사를 한 후 ajax의 json type으로 데이터를 넘겨주는 작업을 하겠습니다. 구현내용: · UI: html 태그를 사용 · getElementById 를 이용한 객체 접근 방식 사용 · 올드한 방법인, form을 이용한 객체 접근 방식 사용 · 자바스크립트를 이용한 유효성 검사 · ajax json 타입으로 데이터 전송 유의사항: · ajax url 연결 안 됨 · 주소검색은 api 연결 안 됨 · 먼저 제이쿼리 스크립트 연결 getEleme..
[js] 클릭 이벤트 후 이미지 변경, 컬러 변경, 팝업창 오픈 간단한 자바스크립트, 클릭 이벤트를 이용하여 3가지 동작을 구현하겠습니다. 구현내용 · 클릭시마다 이미지 변경 · 클릭시마다 컬러 변경 · 클릭 후 팝업창 오픈 화면 결과 코드 이미지 바꾸기 컬러 바꾸기 팝업창 코드 .box { text-align: center; margin-bottom: 10px; } .bgColor { width: 200px; height: 200px; margin: 0 auto; background-color: #f9b514; } 한번에 보기
[js] 자바스크립트 모달창(팝업창) 구현 자바스크립트를 이용하여 모달창(팝업창)을 만들겠습니다. 요즘에는 제이쿼리를 사용하지 않고, 순수한 자바스크립트, 바닐라 js를 이용한 기능 구현을 많이 합니다. 모달창 띄우기 구현내용 · 버튼 클릭시 모달창 open · 모달창을 제외한 배경(background)는 어두운 검은 배경 · X 버튼 클릭시 모달창 close · 검은 배경 클릭시 모달창 close 모달창(팝업창, 다이얼로그)창 띄우기 예제 html, javascript 모달창 open Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quam nobis quis corrupti amet maxime neque, optio, in illo, voluptatibus cons..
[js] DOM과 BOM의 차이점 자바스크립트의 기본 DOM 과 BOM 에 대하여 알아보겠습니다. DOM(Document Object Model, 문서 객체 구조) 브라우저들은 사용자가 띄운 웹문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(텍스트, 버튼, 이미지 등)으로 구조화 합니다. 이 요소들은 상,하위 구조나 병렬구조로 체계화 되는데 이 웹문서(document)에 대한 모든 내용을 담고있는 객체를 DOM 이라고 합니다. document는 window의 document (html 문서) 입니다. document object model(돔 객체)는 html과 javascript를 연결해주는 통역사 같은 역할입니다. 웹페이지 구조는 이 모든 태그들을 감싸고 있으며, 그내부는 다시 와 로 나누에 집니다. 태그에는 의 구조로 나뉘고, ..
[js] let vs const vs var (ft. var의 문제점, 호이스팅) 변수선언 방식인 let, const, var에 대한 차이점과 var의 문제점, hoisting에 대해 알아봅니다. variable, 변수는 프로그래밍 언어에서 우리가 처리해야 하는 데이터를 담을 수 있도록 도와주는, 즉 데이터를 담고 있는 값을 의미합니다. ES6에서 기존의 변수 var를 보완하기 위하여 나온 변수 선언 방식이 let과 const입니다. 더 이상 var 키워드는 사용하지 않는 것을 추천합니다. var의 문제점 ES6 이전에 사용해왔던 더 이상 사용하지 않는 변수 선언 방식입니다. 왜 더이상 사용하면 안 될까요? 변수는 선언하고 나서 값을 할당하는 것이 정상입니다. 하지만 var를 사용할 때는 이상하게도 선언하기 전에 변수의 값을 할당해도 작동이 됩니다. 예제 - var : 호이스팅 발생 ..
[js] 자바스크립트 onclick · addEventListener 비교 사용법 자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과 addEventListener 와 onclick의 차이점을 알아보겠습니다. 이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 이벤트가 특정 element에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. 가장 보편적으로 자주 사용되는 이벤트 리스너는 click 이벤트입니다. click event는 사용자가 element에 클릭하였을 때의 동작하는 이벤트입니다. click 이벤트 사용 방법 1. onclick 이벤트 - HTML 코드에서 inline 방식 (in HTML) 자바스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를..
[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁) 홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다. 블로그의 메인 페이지도 float: left 속성을 사용하였습니다. float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습니다. 최근에는 플렉서블 박스 레이아웃(flexible box layout) 이란 그리드 레이아웃을 이용하여 매우 간편하게 위치를 변형할 수 있지만, 브라우저별로 지원의 한계가 있기 때문에 아직까지는 float속성을 이용한 레이아웃을 더 많이 사용하고 있습니다. 그래서 오늘은, flaot 속성에 대하여 이야기하겠습니다. float 속성은 웹요소를 문서 위에 떠있게 만듭니다.(=부유하다.) float의 성격 · block 의 성격을 무시합니다. · 형제 구조로 이루어져있습니다. · 해당 요소들의..
[react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn) 리액트 개발 환경 설치 방법입니다. 1. Node.js 설치 Node.js는 크롬 v8 자바스크립트 엔진을 기반으로 한 서버사이드 자바스크립트 런타임입니다. 아래 Node.js 공식 홈페이지로 이동해주세요. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 첫 화면에서 오른쪽의 최신 버전으로 다운로드합니다. 설치 화면 위의 추가적인 설치 화면이 나오면서 설치가 완료됩니다. 최신 node.js는 설치와 동시에 npm이라는 패키지 관리 도구까지 설치가 됩니다. 이제 npm을 이용하여 create react app을 설치하여 리액트 프로젝트를 시작할 수 있..
[css]뷰포트 미디어쿼리 사용하기(ft. 반응형웹 만들기) 화면 크기에 반응하여 화면 요소들을 자동으로 바꿔 사이트를 구현하는 것이 반응형 웹입니다. PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게 바꾸어 보여주는 웹 디자인을 반응형 웹 디자인이라고 합니다. 반응형 웹을 제작하기 위해서 기본적으로 알아두어야 할 것이 뷰포트(viewport)와 미디어쿼리(mediaqueri) 입니다. 뷰포트 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다. 뷰포트 지정 방법 아래는 가장 일반적으로 사용되는 설정 입니다. · width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다. · initial-scale=1 : ..
[js] input option 값 출력하기(ft. onchange onfocus) 홈페이지 자주 사용하는 input 태그입니다. 자바스크립트 이용하여 조건에 맞게 input 태그의 select의 option 값을 출력하겠습니다. 자바스크립트를 이용한 input 태그 출력 구현내용 · 구현 1 option 선택 값(탐구과목)이 그대로 아래 label 값에 적용 -> 탐구과목의 과목명을 선택하면 아래 탐구 1, 탐구 2 과목명이 선택한 과목명으로 바뀜 onchange, innerHTML 이용 · 구현 2: 리셋(option값 선택 후 다시 option값을 선택으로 바꾸었을 때) -> 탐구과목 과목명 선택하였다가 다시 과목명을 선택으로 리셋하였을 때 1. 아래 label값이 탐구 1/탐구 2로 자동 리셋 2. 아래 수능 등급, 백분위 점수가 선택으로 자동 리셋 if( value == "" ..
[css] background속성 한번에 사용하기 css 사용의 필수템 background 속성에 대하여 알아보겠습니다. background 속성은 배경을 지정하는 속성으로 해당 영역에 컬러 또는 이미지를 삽입할 때 주로 사용합니다. background 속성 종류 · background-color : 배경색 · background-image : 배경 이미지 · background-repeat : 배경 이미지 반복여부 · background-size : 배경 이미지 크기 조절 · background-position : 배경 이미지 위치 조절 한 번에 사용하는 background 속성: background: url('image 경로') no-repeat center center; background-size: contain 또는 cover; 위의 소스가 제..
[js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식) 회원가입 페이지의 유효성 검사에 대하여 알아보겠습니다. 유효성 검사 회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 정보를 잘못 입력했을 경우, 유효성 검사를 통하여 사용자가 회원가입 정보를 잘못 입력하는 경우를 사전에 방지해주고, 비밀번호 재확인을 통하여 사용자로 하여금 본인이 입력한 데이터를 보다 정확하게 인지 시켜줍니다. 최근에 개인정보를 입력하는 사용자와 개인정보 데이터를 보관, 관리하는 개발자 입장에서 최대한 오류를 줄이기 위하여 좀 더 쉽게 정보를 입력하고, 관리하는 방법으로 폼들이 변화되고 있습니다. 최근 사용하는 폼 유형으로 회원가입 폼을 html으로 마크업 해보고, javascript를 이용하여 유효성 검사를 하겠습니다. (사용자 데이터를 처리하는 php 작업은..
[js] 자바스크립트 버튼 클릭시(onclick) 마다 배경 색상 변경하기 자바스크립트를 이용하여 버튼을 클릭할 때마다 화면 배경 색상 변경을 구현하겠습니다. 화면 출력내용 · 배경색상(backgroundcolor) 총 6개 배열 · 버튼 1개 사용 · 버튼 클릭시마다 색상값 중 1개가 랜덤으로 선택되어 body에 적용 버튼 클릭시마다 화면 배경 색상 바꾸기 예제 색상 변경 function colorChange() { var color = ["#FC5C7D", "#6A82FB", "#38ef7d", "#fffbd5", "#b20a2c", "#CAC531"]; var num = Math.floor(Math.random() * color.length); //Math.random()이용하여 배열의 데이터 개수(length) 이용하여 배열의 인덱스, 변수 num이 랜덤으로 나옴 var..
[js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener) 자바스크립트를 이용하여 이미지들을 사용하여 클릭할 때마다 이미지를 변경을 구현하겠습니다. 화면 출력내용 · 총 8개의 이미지· 총 8개의 이미지 사용 · 첫 화면에는 이미지 1번 나옴 · 버튼 2개 사용(다음, 이전) · 다음버튼 클릭 시 다음 이미지 순서대로 나타남 · 이전버튼 클릭 시 이전 이미지 순서대로 나타남 · 마지막 8번째 이미지 다음 버튼 클릭 시 return문을 사용하여 강제 종료 · 처음 1번째 이미지 이전버튼 클릭 시 return문을 사용하여 강제 종료 클릭시마다 이미지 변경 예제1 · click 이벤트를 onclick를 이용하여 구현 · 각자 저장되어있는 이미지 8장 사용 -> 이미지 사용이 번거로우신 분들은 예제2번으로 이동해주세요 html 이전 다음 css *{margin: 0;p..
반응형

티스토리툴바