Javascript/응용프로젝트 (15) 썸네일형 리스트형 [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 문법에 익숙치 않아서 기능 구현에 중점을 맞춰.. [뉴스 타임즈] API 에러 발생시 UI 보여주기 유저가 입력한 검색 키워드에 대한 데이터가 없을 때, 화면에선 어떻게 보일까요? 아무것도 실행이 되지 않습니다. 물론 콘솔창을 보면 오류가 나오겠지만 user 들은 콘솔 창을 보지 않아요... ㅠㅠ 그래서 저희는 이 오류 상태를 user 에게 ui 로 보여줘야한답니당. 그럼 어떻게 보여줄까요? 먼저 저희가 만들어놓은 공통 api 불러오는 함수 있죠? getNews() 라는 함수입니다. 거기에서 에러핸들링을 사용할 것입니당. (에러 핸들링 모르시는 분들은 응용+예제에 적어놨으니까 봐주셔요!) // api 호출 함수 const getNews = async() => { // 에러 코드 try{ }catch(error){ console.log('잡힌 에러는' , error.message) } let respon.. 이전 1 2 다음
