1일 차 진도 - 자바스크립트는 웹페이지를 동적으로 만들어주기 위해 개발된 언어이고, 모던 자바스크립트는 자바스크립트 ES6와 그 이후의 버전들을 모두 포함한 자바스크립트를 말한다. - 자바스크립트로는 웹 개발, 서버개발, 애플리케이션 개발등을 할 수 있다. - 자바스크립트는 자바스크립트 코드를 실행하는 프로그램인 자바스크립트 엔진이 들어있는 모든 곳에서 동작한다. 변수란? 프로그램이 실행되는 도중 변경되는 값을 저장하기 위한, 이름을 가진 저장소 [let 이름 = 값;]을 통해서 선언한다. 변수 명명 규칙 1. $와 _를 제외한 기호는 사용 불가 2. 변수명의 맨 앞은 숫자 사용 불가 3. 예약어 사용 불가 4. 카멜표기법(첫 번째 단어를 제외한 각 단어의 첫 글자를 대문자로) - 자바스크립트는 변수의..

TodoList를 처음에 생각했을 때는 페이지 하단부에 따로 넣을 것이 없을 것이라고 생각했습니다. 그래서 Footer 부분에 고려를 하지 않은 채 시작했는데요 하지만 완료 모달 버튼이 페이지의 하단부에 들어가게 되면서, 임시방편으로 사진처럼 최상위 태그에 그냥 바로 썼습니다. 더 많은 기능을 구현할 가능성도 있기에, 나중을 위해서 간단하지만 구조를 개편해 볼 거예요 요렇게 footer 컴포넌트를 추가할 거예요 기존의 코드를 그대로 옮겨서 Footer 컴포넌트를 새로 생성했습니다. 최상위 컴포넌트인 Home.jsx에서 Footer 컴포넌트를 불러옵니다. 이때 Footer 또한 Context를 통해 함수를 제공할 것이기에 TodoContext.provider 컴포넌트 내부에 넣었습니다. 또한 Footer에..

React Router 라이브러리 설치 https://reactrouter.com/en/main Home v6.20.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 리액트 라우터 공식 사이트이다 npm install react-router-dom 위의 명령어를 통해 리액트 라우터를 설치한다 package.json을 확인해 보면 설치가 잘 됐음을 확인..

git 연습도 할 겸 새로운 branch를 생성해서 작업할 거예요 Context를 사용하기 위해 TodoContext 컴포넌트를 생성합니다. TodoList 관련 모든 컴포넌트를 관리하는 최상위 컴포넌트인 Home.jsx에서 TodoContext를 import 하고 TodoContext.Provider로 Context를 사용할 컴포넌트들을 감싸줍니다. 우선 Modal 컴포넌트 하나만 예시로 들겠습니다. Modal 컴포넌트에 전달되던 'modalHandler'를 Provider의 value 값으로 넣어줍니다. Modal 컴포넌트로 넘어가서, Context로부터 데이터를 불러오는 useContext를 사용합니다. 그리고 TodoContext로부터 값을 불러올 것이기에 TodoContext를 인수로 넣어줍니다..

오랜만에 바닐라 JS만 사용해서 무언가를 만드니까 어색함과 불편함을 느꼈어요. 하지만 덕분에 제 부족한 점을 찾을 수 있었습니다. 일단 저는 html 구조를 못 짜고요.. class명도 못 지으며, 코드 분리를 못 시킵니다... 마지막으로 코드를 굉장히 더럽게 씁니다... 예... 뭐, 개선해 나가면 되는 거죠! 교양과제 때문에 만들게 됐지만 제 부족한 점을 느낄 수 있어서 좋았습니다 아 그리고 색 조합이 구리구리 너구리니까 바꾸라는 의견을 들었는데, 전 구린게 개성이라고 생각합니다. 개성 왕만두 먹고 싶다 코드가 많이 더러워서, 올릴까 말까 고민을 했지만 그냥 올립니다. 더 성장했을 때 보면 감회가 새롭지 않겠습니까 하하 [HTML & JavaScript] 더보기 TO DO LIST 할 일 입력 입력 ..

https://studysmart.tistory.com/94 투두리스트 오류 탐험기(id 중복을 피하자!) 문제점! 이전에 로컬스토리지에 저장을 해놨기에, 새로고침을 해도 투두리스트가 그대로 유지된다. 문제점은 새로고침을 한 이후부터이다. 새로고침 이후, 네 번째를 추가했다. 그리고 첫 번째 studysmart.tistory.com 지난 글에서 삭제버튼 클릭 시 id가 중복되는 사례를 해결했었습니다. 하지만 드로그 앤 드롭 적용 이후에 또 다른 문제가 생겼습니다. 문제점이다! 다음과 같이 3개의 todo를 만들면 id가 0번부터 큰 문제없이 잘 생성됩니다. 하지만 드래그 앤 드롭을 통해 다음과 같이 세 번째 투두를 제일 위로 올리고, 새로운 투두를 생성하면! 다음과 같이 id가 중복되게 됩니다. 원인은 ..