Javascript (38) 썸네일형 리스트형 [ES6 문법] 템플릿 문자열 (template string) Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 템플릿 문자열이란 - 문자열 안에 변수와 연산식을 혼합하여 사용하는 문자열 리터널 - 작은 따옴표('') 혹은 큰 따옴표("") 대신 백틱 (`) 을 사용해 문자열을 표현함 - 특수 기호 ${} 를 사용해서 변수 또는 식을 포함할 수 있음 템플릿 문자열과 기존 자바스크립트의 문자열 차이 기존 자바스크립트의 문자열 const string1 = "안녕하세요"; const string2 = "어서오세요"; const greeting = string1 + " " + string2; 템플릿 문자열 const string1 = "안녕하세요"; const string2 = "어서오세요"; const greeting = `${strin.. [3] 자바스크립트로 투두리스트(todo-list) 만들기 + localStorage에 대해서 자바스크립트로 투두리스트 (todo-list) 만들기 3편입니다. 완성본과 HTML 과 CSS 는 1편에서 확인해주세요 1편 https://qowbtm45.tistory.com/44 2편 https://qowbtm45.tistory.com/46 기능 설명 (3편) 1. 새로고침해도 데이터가 저장될 수 있도록 하기 2.데이터마다 id, content, status 값 저장하기 local Storage (로컬 스토리지)에 대해서 - 데이터를 사용자 로컬에 보존하는 방식 - 데이터를 저장, 덮어쓰기, 삭제 등 CRUD (Create, Read, Update, Delete를 앞글자를 따서 만든 단어)가 가능 - 자바스크립트로 조작하며, 모바일에서 사용이 가능함 local Storage (로컬 스토리지) 와 쿠키.. [2] 자바스크립트로 투두리스트(todo-list) 만들기 자바스크립트로 투두리스트 (todo-list) 만들기 2편입니다. 완성본과 HTML 과 CSS 는 1편에서 확인해주세요 1편 https://qowbtm45.tistory.com/44 기능 설명 (2편) 1. router 기능 구현 2.카테고리 클릭 시 카테고리에 맞는 주소로 이동하게 하기 라우팅 (routing)에 대해서 - 출발지에서 목적지까지의 경로를 결정하는 기능 - 일반적으로 사용자가 요청한 URL 또는 이벤트를 해석 => 새로운 페이지로 전환하기 위해 데이터를 서버에 요청하고 페이지를 전환하는 일련의 행위 - 애플리케이션의 라우팅 경우에는 사용자가 task 를 수행하기 위해 어떤 화면 (view) 에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미함 브라우저가 화면을 전환.. [1] 자바스크립트로 투두리스트(todo-list) 만들기 자바스크립트로 투두리스트 (todo-list) 만들기 1탄입니다. 강의를 보고 난 후 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다 HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다. 어떻게 기능을 구현했는지를 보시는게 좋을 것 같습니다. (개발환경이 다를 것 같기에) 완성본 기능 설명 (1탄) 1. 할일 추가 2. 할일 수정 3. 할일 지우기 4. 할일 카테고리별로 필터링 HTML 과 CSS 강의 자료이기때문에, 참고용으로 보시라고 캡쳐본으로 올립니다 * 모듈 번들러는 rollup 을 사용했습니다. 커스텀 설정은 제 github 에 있습니다. 기초 작업 스크립트는 ES6 클래스 문법을 사용했습니다. ( 저도 아직 ES6 문법에 익숙치 않아서 기능 구현에 중점을 맞춰서.. 자바스크립트로 그림판 만들기 (+ 다운로드 기능) 강의를 보고 난 후 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다 HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다. 완성본 기능 설명 1. 그림 그리는 기능 붓 크기 조절 가능 color-picker 기능 2. 지우개 3. 네비게이터 4. 되돌아가기 5. 휴지통 기능 (초기화 기능) 6. 그린 그림 다운로드 HTML 과 CSS 강의 자료이기때문에, 참고용으로 보시라고 캡쳐본으로 올립니다 기초 작업 스크립트는 ES6 클래스 문법을 사용했습니다. ( 저도 아직 ES6 문법에 익숙치 않아서 기능 구현에 중점을 맞춰서 설명합니다 ) 사용할 엘리먼트 변수 지정 MODE = "NONE"; // 클릭한 메뉴를 알아내기위한 변수 IsMouseDown = false; // 마우스를.. 자바스크립트로 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 문법에 익숙치 않아서 기능 구현에 중점을 맞춰.. 이전 1 2 3 4 5 다음
