JS (31) 썸네일형 리스트형 [ES6] 라이브러리 의존성 관리 Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 의존성 어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것을 뜻함 기존 자바스크립트의 라이브러리 의존성 관리 방법 기존 자바스크립트는 라이브러리나 모듈을 관리하는 방법이 매우 불편했음 1. script 와 같은 엘리먼트를 이용하여 관리 script.js 를 먼저 참조할 경우 정의되지 않는 함수를 참조하는 의존성 문제가 발생 ES6 라이브러리 의존성 관리 방법 1. import 구문 사용 script 엘리멘트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려 받고 코드를 구동하는 방식 import MyModule from './MyModule.js'; //기본 import { ModuleName } fro.. [ES6] 객체 확장 표현식과 구조 분해 할당 Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 객체 확장 표현식 객체 생성 방식을 좀 더 간결하고 동적으로 생성할 수 있음 기존 자바스크립트의 객체 확장 표현식 사용 방법 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당해야 했음. const x = 0; const y = 0; const obj = { x: x, y: y}; const randomKeyString = 'other'; const combined = {}; combined['one' + randomKeyString] = 'some value'; const obj2 = { methodA: function() { console.log('A'); }, methodB: function() .. [ES6] 화살표 함수 (arrow function) Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 화살표 함수에 대해서 - ES6에 추가된 표현식을 사용하는 함수로 화살표 기호 ( => ) 로 함수를 선언함 - 화살표 기둥 = 을 사용하므로 fat arrow function 이라고도 함 - 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 장점을 가지고 있음 화살표 함수의 제한점 - this 나 super 에 대한 바인딩이 없음 - methods 로 사용될 수 없음 - new.target 키워드가 없음 - 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind 메소드를 사용할 수 없음 - 생성자로 사용할 수 없음 (constructor) - yield를 화살표 함수 내부에서 사용.. [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.. 이전 1 2 3 4 다음
