fffo

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서울을 하면서 느낀 건데 나는 메타인지 능력이 매우 떨어지는 것 같다. 오늘 끝내야 할 목표를 터무니없이 많게 잡거나 아니면 목표 없이 그냥 되는 대로 하다 보니 효율이 떨어지는 것 같다. 그래서 간트 차트를 이용해 내가 어느..

https://github.com/rightkingleftking/tutorials/tree/main/HTML%2CCSS%EC%9A%94%EC%95%BD GitHub - rightkingleftking/tutorials Contribute to rightkingleftking/tutorials development by creating an account on GitHub. github.com 깃허브로 이동

왜 등록된건지 아직도 모르겠음 웹 프론트 취준을 하고있을 때였다. 혼자서 취업을 준비하기 힘들어서 어디든 단체에 들어가고 싶었다. 다른 곳들은 적지 않은 돈을 내야 하는데 여긴 월 90씩 줘서 별 생각 없이 신청했다. 처음 신청했을 때가 작년 여름쯤이었다. 5기를 신청할 때 피시방에서 창을 4개 띄워두고 수강신청 하듯 최선을 다 했다. 그런데도 대기 번호가 몇백 번이길래 단념하고 있었다. 그러다 작년 겨울에 6기 1차 신청이 시작되었다는 메일이 왔다. 메일이 온 시점이 신청을 받기 시작한지 하루가 지난 날이라서 안 되겠구나 생각했다. 별 생각 없이 등록 버튼을 눌렀는데 등록이 됐다. 각 잡고 신청했을 땐 안 되더니,, 어리둥절한 상태로 라피신을 시작했다. 라피신에서 하는 일 : 쉘스크립트, C, 동료평가..

JSX 리액트는 렌더링 로직과 UI로직이 본질적으로 연결된다는 사실을 받아들임 전통적 웹은 각기 다른 파일에 마크업과 로직을 분리해 관리했지만 리엑트는 둘을 모두 포함하는 ‘컴포넌트’로 관심사를 분리함 JSX도 표현식임 컴파일 후 JSX 표현식이 js 객체로 인식됨 JSX는 insection attack을 방지함 ReactDOM이 JSX에 삽입된 모든 값을 렌더링하기 전에 escape하므로 앱에 명시적으로 작성되지 않은 내용은 주입되지 않음 모든 항목은 렌더링 되기 전에 문자열로 변환됨 XSS(cross-site-scripting) 공격 방지 가능 Element Rendering 엘리먼트는 React 앱의 가장 작은 단위 엘리먼트는 컴포넌트의 구성 요소 브라우저 DOM 엘리먼트와 달리 React 엘리먼트..

용어 정리 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) 매개변수로 대상 객체, 필터 함수, 들여쓰기 수..