나의 성장 개발일지

포스팅 주제 Node.js에 대한 설명 모듈의 사용법 Node.js란? Node.js는 구글 크롬의 자바스크립트 엔진(V8 Engine)을 기반해 만들어진 Javascript "런타임"이다. 이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적이다. npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리이다. "런타임" - 여기서 사용되는 런타임이란 어떤 프로그램이 동작할 때, 프로그램이 동작하는 장소를 가리키는 말이다. 기존 Javascript의 런타임 환경은 웹 브라우저에서만 존재 했는데, 브라우저 밖에서도 작동하게 만드는게 Node.js이다. 이는 javascript를 서버단 언어로 사용하기 위해 만들어 졌다. Node.js 설치 방법 Node.js를 설치하는 방법으로는 직접 웹 사이트에서 접속..

포스팅 주제 Bootstrap Grid Bootstrap https://getbootstrap.com Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com Bootstrap(부트스트랩)은 웹사이트를 쉽게 만들 수 있게 도와주는 공개 HTML, CSS, JS 프레임워크다 프레임워크란? 어떤 프로그램을 만들기 위한 기본틀로 전체적인 흐름을 자체적으로 가지고 있다(규칙들..

포스팅 주제 반응형 웹 Media Query 반응형 웹 반응형 웹 이란? 웹에 접속한 디바이스 크기에 따라 레이아웃을 다르게 표현한다. 다양한 디바이스들이 개발 되면서 모바일로 웹 사이트를 접속하는 경우가 많아져, 반응형이 중요해 졌다. 적응형 웹 이란? 사용자가 모바일 환경인지, PC 환경인지에 따라 다른 페이지를 보여준다. 두개의 url 주소를 가지고 있다. 반응형 웹 예시 ) 카카오 모빌리티 https://www.kakaomobility.com/ 삼성 뉴스 룸 https://news.samsung.com/kr/ ViewPort 반응형 웹사이트를 만들기 위해서 우리는 ViewPort 부분을 조정해야 한다. 기기마다 화면 사이즈가 다르기 때문에 기기에 맞춰 디자인을 하기 위한 크기요소 디바이스 화면 크..

포스팅 주제 개발모델(agil, watetfall) Git, Branch 개발자들이 협업을 위해 사용하는 방식에 대해 알아보자 개발자들이 협업하기 위해서는 체계적인 개발진행 과정과 코드에 대한 수정, 업데이트가 즉각적으로 이루어져야한다. 여기, 애자일(Agile)과 Git이 있다. 개발진행 과정에는 다양한 모델 기법이 존재한다. 대표적으로는 Waterfall Agile 등이 있고, 이외에도 다양한 모델 기법이 존재한다. Waterfall Waterfall(폭포수 모델)은 가장 익숙한 소프트웨어 개발 기법이다. 가장 고전적인 소프트웨어 생명 주기를 가지고 다음 작업과 병행 수행되지 않고 순차적으로 업무가 수행된다. 장점 단순한 모델이라 이해가 어렵지 않다. 단계별로 정형화된 접근이 가능해 문서화 하여 관리..

날짜 : 내용 : 작성 2022년 7월 日 月 火 水 木 金 土 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Script문을 보면 캘린더의 숫자를 클릭했을 리스너 이벤트가 발동하고, 작성 버튼을 클릭했을 때 함수가 작동한다.

포스팅 주제 jQuery jQuery 메소드 jQuery 이벤트 리스너 jQuery jQuery - 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 오픈 소스 기반의 자바스크립트 라이브러리 장점 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능 HTML DOM을 손쉽게 조작 가능, CSS 스타일도 간단히 적용 가능 애니메이션 효과나 대화형 처리를 간단하게 적용 같은 동작을 하더라도 더욱 짧게 구현 가능 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능 jQuery는 파일을 다운로드 받거나 CDN(Content Delivery Network)로 사용가능 CDN은 url을 복사해서 head쪽에 붙여주면 사용 가능하다. CDN Uncompressed - 압축이 안된 Minified..

포스팅 주제 addEvenLister addEvenLister addEvenLister는 주어진 특정 이벤트(특정 행동)가 발생했을 때 약속 된 명령어를 실행시키는 메소드 addEvenListener 이벤트 종류는 아래와 같다. Click : 클릭 Mouse 계열 Mouseover : 요소에 커서를 올렸을 때(눌렀을 때) Mouseout : 마우스가 요소를 벗어날 때(다른 찾을 눌러 벗어 났을 때) Mousedown : 마우스 버튼을 누르고 있는 상태 Mouseup : 마우스 버튼을 떼는 순간 Focus : 포커스가 갔을 때 Blur : 포커스가 벗어나는 순간 Key 계열 Keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생 Keydown : 키를 누르는 순간에만 발생 Keyup : 키를..

값1: 값2: 연산자 : 결과 : get value reset Body 가장먼저 틀을 잡기 위해 4개의 태그를 body에 작성해주었다. 각각에 input태그에는 그에 맞는 "id" 값을 할당 하여 고유성을 부여했다. ( 이후 해당 태그를 선택해서 사용하기 위함 ) 버튼을 2개 생성하고 버튼이 눌렀을 경우 실행되도록 onclick요소를 사용하였다. onclick에는 해당 버튼을 눌렀을 때 지정된 함수가 작동하도록 함수 이름을 넣어줬다. script 먼저 버튼에 함수를 지정해 놓았으니까, 해당 함수를 만들어 줘야 한다. 함수 function getValue(){}를 생성 버튼을 눌렀을 때 input에 입력된 값(value)을 가지고 사칙연산을 해야하기 때문에 input태그들을 선택해야한다. document...

코드 우선 기본 틀을 잡기 위해 body부터 작성하였다. input 2개가 들어가고 해당 태그들에 입력 값을 이용해서 테이블에 내용을 채워야 하기 때문에 id값들을 부여했다. 버튼을 클릭시 push() 함수가 작동해서 테이블 안에 값들이 들어가게 만들기 위해 onclick을 이용해서 push() 함수와 연결했다. 에 ,로 틀을 잡아 놓았다. 태그들을 선택하기 위해 document.getElementId를 이용해서 각 input id를 지정해 변수를 만들었다. table에 tr과 td를 만들어서 주기 위해서 table을 querySelector('table')로 선택했다. 이렇게 하는 방식과 document.getElementId('table')로 지정하는 방식도 사용 가능 하다. 한개의 tr과 4개의 t..

이번 포스팅 주제 JavaScript 표준 객체 DOM(Document Object Model) JavaScript 표준 객체 Javascript의 표준 객체는 JS(JavaScript)에서 기본적으로 가지고 있는 객체들로, 프로그래밍을 하는데 기본적으로 필요한 도구들을 말한다. ex) String, Number, Array, Date, Math... etc Date 객체 JS에서 매 순간 바뀌는 시간과 날짜에 대한 정보를 얻기 위해 사용하는 객체 Date 객체의 함수는 아래와 같다. Date.now() - 현재 시간을 기준으로 전부 표시 Dateprototype getter 메소드 (var date = new Dare(); ) date.getFullYear() - 년도 표시 date.getMonth()..