본문 바로가기

전체 글

 (73)
자바스크립트로 BMI 계산기 구현하기 강의를 보고 난 후 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다 HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다. 완성본 기능 설명 몸무게와 신장을 입력하면 계산을 통해서 bmi 수치를 알려줌 meter 라는 태그를 활용해, 프로그래스바 를 구현함 초기화 버튼을 클릭 시 리셋이 되는 기능 구현 HTML 과 CSS 강의 자료이기때문에, 참고용으로 보시라고 캡쳐본으로 올립니다 기능 구현하기 submit 을 했을 때, 기능이 돌아가는 구조입니다. submit 할 때 기본 브라우저 기능 막기 const onSubmit = (event) => { event.preventDefault() } Input 에 작성한 값 변수에 저장하기 const onSubmit = (event..
자바스크립트로 Date-Picker 구현하기 강의를 보고 난 뒤에 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다 HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다. 완성본 기능 설명 1. 달력을 toggle 로 보여주기 2. 현재 날짜 (년도, 월) 상단에 보여주기 3. 달에 맞는 일 계산해서 달력에 보여주기 + 첫 일이 무슨 요일인지 알아내서 그 요일부터 일이 생성될 수 있도록 함 4. 토요일과 일요일의 색상 컬러 바꿔주기 5. 현재 날짜 배경 컬러 바꿔주기 + 선택된 날짜의 배경 컬러 바꿔주기 6. 이전 버튼과 다음 버튼 클릭 시, 그 달의 데이터 보여주기 7. 선택 된 날짜 달력이 꺼졌을 때 보여주기 + 처음 접속했을 때, 현재 날짜 보여주기 8. 선택 된 날짜에서 달력 이동하다가, 달력 껐다 켰을 시에 선..
Auto play, Indicator 슬라이더 구현하기 강의를 보며 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다 HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다. 완성본 기능 설명 Previous , Next 버튼 슬라이드 Indicator를 사용해, 현재 슬라이드가 몇 번째인지 알려주고, Indicator 를 클릭 시, 클릭한 인덱스의 슬라이드로 갈 수 있게 함. setInterval 함수와 clearInterval 함수를 활용해, 자동으로 슬라이드가 넘어가고 오토 슬라이드를 정지할 수 있는 기능 HTML 과 CSS 강의 자료이기때문에, 참고용으로 보시라고 캡쳐본으로 올립니다 javascript 초기 작업 스크립트는 ES6 클래스 문법을 사용했습니다. ( 저도 아직 ES6 문법에 익숙치 않아서 기능 구현에 중점을 맞춰..
Call , Apply, Bind 함수 호출 방식과 관계없이 this 를 지정할 수 있는 메소드 function.prototype 객체의 메소드 apply, call : 함수를 호출하는 역할 대표적으로 유사 배열 객체에 배열 메소드를 사용하는 경우에 활용 bind : this 로 사용할 객체만 전달 메소드의 this 와 메소드 내부의 중첩 함수 또는 콜백 함수의 this 가 불일치하는 문제를 해결하기 위해 사용 첫번째 인자를 this 에 바인딩하지만 함수를 실행하지 않고, 새로운 함수를 반환함 기존 함수 호출과의 차이점 - 해당 메소드를 사용해 함수를 "실행" 하면 함수의 첫 번째 인자로 전달하는 객체에 this 를 바인딩 할 수 있다는 것 바인딩 - bind : 결속시키다, 묶다 - 메서드와 객체를 묶어놓는 것 - 함수 또는 메소드를 ..
this this 함수를 호출할 때 생성되는 실행 컨텍스트 객체 실행 컨텍스트 - 자바스크립트의 코드들이 실행되기 위해서 변수객체, 스코프체인, this 정보들을 담고 있는 곳 this 의 값은 함수를 호출하는 방법에 의해 결정된다. 상황별 this 의미 전역 공간 에서의 this 메서드로써 호출 할 때 내부에서의 this 함수로써 호출 할 때 내부에서의 this 콜백 함수 호출 시 내부에서의 this 생성자 함수 내부에서의 this 전역 공간에서의 this 전역 공간에서 this 는 전역 객체 (window) 를 가리킴 console.log(this) // {alert: f(), atob: f(), blur: f(), ...} console.log(window) // {alert: f(), atob: f(),..
이벤트 버블링, 이벤트 캡쳐링과 이벤트 위임 이벤트 버블링이란? 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작 -> 부모 요소의 핸들러 동작 -> 최상단 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상 이벤트 버블링을 막는 방법 event.stopPropagation() 사용 이벤트의 전파를 원하지 않을 경우 사용하는 메소드 이벤트 버블링이 되지 않길 바라는 타겟에게 이벤트 리스너를 줘서, 이 메소드를 사용하면 됨. 예제 target.addEventListener("click", function(e){ e.stopPropagation(); }); 이벤트 캡쳐링이란? 이벤트 버블링과 반대로, 브라우저로부터 이벤트가 발생한 ..
개발환경 설정 - Webpack 에디터 설정 VSCode 에디터 기본 브라우저 설정 크롬 브라우저 모듈 번들러란? 웹 개발에 필요한 자원 (HTML, CSS, JS, Image 등등 ) 을 모두 각각의 모듈로 보고, 이를 조합해서 병합된 하나의 결과물을 만들어주는 도구 웹팩 (WebPack) 이란? 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러 최종 배포용 파일을 만들어줌 태그가 여러개 있을 때 순서보장도 중요하기 때문에 이런 것도 WebPack이 해준다. 사용 이유에 대해서는 참고 웹팩 설치 방법 새로운 폴더를 생성한다 폴더에서 터미널을 열어 아래의 코드를 입력해 package.json 을 초기화해준다. npm init -y package.json 파일이 생성된 것을 확인한다. 아래의 코드를 터미널에 입력해 웹팩을 ..
Git 개념 및 설치 Git 이란? 분산 버전관리 시스템으로, 컴퓨터 파일의 변경사항을 추적하고 여러명의 사용자들 간에 파일에 대한 작업을 조율하는데 사용 주로 여러명의 개발자가 하나의 소프트웨어 개발 프로젝트에 참여할 때 , 소스 코드를 관리하는데 주로 사용 Git 을 사용하는 이유 소스 코드의 변경 이력을 쉽게 확인 가능 특정 시점에서 저장된 버전과 비교 가능 저장된 시점으로 되돌아갈 수 있음 -> 안정적인 개발 가능 Git 저장 영역 Git 은 기본적으로 가상의 영역이 있다 무차별한 기록을 남기는 것을 방지하기 위해 임시 저장 영역이 존재함 작업 디렉토리 : 코딩하는 공간 스테이징 영역 : 임시 저장 공간 로컬 저장소 : 실제 저장 공간 원격 저장소 : 내가 저장한 변경내역을 다른 사람과 공유할 수 있는 원격 공간 G..

티스토리툴바