fffo

새로고침에도 task가 유지되게 백엔드는 크게 신경 쓰지 않고 task가 유지되게 진행하려고 한다. 가장 간단한 방법이 웹 스토리지에 task의 리스트를 저장하는 방법인 것 같았다. task를 초기에 생성할 때와 변경될 때마다 스토리지를 새로 저장하는 방법으로 구현했다. 이러면 하나가 변경될 때마다 리스트 전체를 새로 덮어 씌워야 하는 한계가 있을 것이다. 지금 생각난 건데 리스트 전체를 하나의 키로 저장했을 때 이런 문제가 발생한거고 @하나의 task당 하나의 키를 사용한다면 이 문제를 해결 할 수 있을 것 같다. 내일 시도해봐야겠다. @task가 변경되는 곳곳에 로컬스토리지에 리스트를 갱신하는 코드를 넣으니 코드가 매우 산만해졌다. 좀 더 단순한 구조를 고민해봐야겠다. // taskControler...

task의 id 생성 task라는 자료를 어떻게 구조화할 지 고민했다. task에서 필요한 자료는 내용과 id였다. id 생성은 task들을 담는 list에 list에 들어간 task들의 개수를 따로 저장해서 개수를 id로 삼았다. @task가 삭제되었을 때 따로 처리를 하지 않고 id 값이 계속 증가하기만 하는 로직이라 한계가 명확하다. 시간 날 때 고쳐야겠다. // 무족권 증가시켜 벌이기 function getId(taskList) { return (taskList.taskCount++); } task list와 taskDOM task들의 정보를 담는 list는 처음엔 array로 만들었다. 그런데 어차피 task 접근은 id값으로 하기 때문에 각각의 id 값을 key로 하는 object로 만들었다...

오랜만의 자바스크립트라서 몸 풀기 느낌으로 목표를 정했다. 넉넉잡아 3시간을 잡았고 시작했다. task 추가 버튼을 눌렀을 때 새로운 task가 뜨도록 만드는 게 목표였다. 최대한 함수를 분리하고 가독성 좋은 코드를 만드는 것에 노력했다. 에러 상황 Uncaught SyntaxError: Cannot use import statement outside a module 원인 함수를 분리할 때 require 대신 import를 사용해서 나는 에러였다. 아무런 설정을 하지 않았을 때 기본적으로 사용되는 모듈은 require을 사용하는 commonjs 방식이다. 해결 html 내의 script태그의 속성으로 type = “module”으로 줘서 해결할 수 있었다. 이 때 주의해야할 점은 type = “modul..

Google Calendar Advanced 내가 좋아하는 앱인 구글 캘린더를 클론코딩 해보고 싶어서 만든다. 클론코딩 후에는 내가 원하는 기능을 이것 저것 추가할 계획이다. 그 중 하나가 간트차트를 캘린더에 연동하는 것이다. 궁극적 목표는 위와 같고, 일단 작은 목표는 2월까지 구글 캘린더 앱 안에있는 tasks 앱을 구현하는 것이다. todo list 느낌의 앱이라 간단할 것이다. 마감을 정하는 개인 프로젝트 혼자 프로젝트를 하다 보니 한 없이 늘어지는 경우가 많다. 그리고 42서울을 하면서 느낀 건데 나는 메타인지 능력이 매우 떨어지는 것 같다. 오늘 끝내야 할 목표를 터무니없이 많게 잡거나 아니면 목표 없이 그냥 되는 대로 하다 보니 효율이 떨어지는 것 같다. 그래서 간트 차트를 이용해 내가 어느..

용어 정리 REST : HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 RESTful : REST의 기본 원칙을 잘 지킨 서비스 디자인 REST API : REST를 기반으로 서비스 API를 구현한 것 REST API의 구성 REST API는 자원resource, 행위verb, 표현representations의 3요소로 구성됨 REST는 자체 표현 구조self-descriptiveness로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음 구성 요소 내용 표현 방법 resource 자원 URI(엔드포인트) verb 자원에 대한 행위 HTTP 요청 메서드 representations 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 RE..

Ajax란? Ajax : js를 사용해 브라우저가 서버에게 비동기적으로 데이터를 요청, 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 프로그래밍 방식 WebAPI인 XMLHttpRequest객체를 기반으로 동작하고 이 객체는 HTTP 비동기 통신을 위한 메서드와 프로퍼티 제공 전통적 방식과 비교해 다음과 같은 장점 존재 변경할 부분만 서버로부터 전송받기 때문에 불필요한 통신 줄임 변경할 필요 없는 부분은 렌더링을 다시 하지 않음 비동기 방식이기 때문에 서버로 요청 보낸 후 블로킹이 발생하지 않음 JSON 클라이언트-서버 간의 HTTP통신을 위한 텍스트 데이터 포맷 JSON.stringify 객체를 문자열로 바꿔줌(직렬화, serializing) 매개변수로 대상 객체, 필터 함수, 들여쓰기 수..

이벤트 드리븐 프로그래밍 이벤트 : 무언가 일어났다는 신호 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 함수 이벤트 핸들러 등록 : 브라우저에게 이벤트 핸들러의 호출을 위임 브라우저가 행동을 감지해 이벤트를 발생 시킴 이벤트 드리븐 프로그래밍 : 이벤트 중심으로 프로그램의 흐름을 제어하는 프로그래밍 방식 이벤트 타입 이벤트 타입 : 이벤트의 종류를 나타내는 문자열 이벤트 핸들러 등록 이벤트 핸들러 어트리뷰트 방식 HTML 요소의 이벤트 핸들러 어트리뷰트에 값으로 문(statement)을 할당 각 어트리뷰트 이름은 'on + 이벤트 타입' Click me 이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 몸체를 의미함 위 예에서 onclick="sayHi('dlwlrma')" 어트리뷰트는..

싱글 스레드 방식 자바스크립트는 한 번에 하나씩 일을 처리하는 싱글 스레드 방식으로 작동합니다. 코드 한 줄을 실행할 때 다음 줄의 코드는 이전 코드가 끝날 때까지 대기하게 됩니다. 만약 코드상에서 무거운 작업이 있다면 그 이후 작업들은 먼저 있는 무거운 작업이 끝날 때까지 대기할 수 밖에 없습니다. 자바스크립트를 비동기적으로 처리하려면 싱글 스레드 방식의 자바스크립트 엔진만으로는 불가능 합니다. 이를 해결하기 위해 자바스크립트 엔진은 콜백 패턴을 사용합니다. 콜백 패턴 콜백 또는 콜백함수란 매개변수로 전달되는 함수를 의미합니다. 자바스크립트는 비동기 처리를 하기 위해 비동기로 처리 하고자 하는 함수를 매개변수에 담아서 자바스크립트 엔진 외부로 전달합니다. 이 때 엔진 외부는 호스트 환경에 따라 달라질 ..