![]()
*피드백은 언제나 환영합니다🙌 GIthub Pages로 배포까지 마치고 코드를 어떻게 짰었는지, 수정할 건 없는지 보던 와중에 휴식 탭 대신에 달력을 넣기로 결정했다. 이유는 유튜브 영상보다 투두리스트+타이머 기능이 들어있는 생산성 웹 페이지라는 큰 틀에 걸맞게(?) 달력을 넣는게 훨씬 나을 것 같다고 생각했기 때문이다. 가능하다면 작게나마 일정을 추가할 수 있게 만들어보려고 한다. 달력 만들기 1. 설치 및 날짜 설정하기 먼저 npm create-react-app [프로젝트명]을 사용해서 react 파일을 생성해준다. 나는 기존 프로젝트가 있어서 따로 생성하지 않았다. 다음으로 캘린더를 만들기 위한 핵심 라이브러리인 moment.js를 설치해준다. moment.js는 JavaScript에서 날짜 및 시..
![]()
*피드백은 언제나 환영합니다🙌 에러 수정하기 배포하기 전 여러 기능들이 잘 작동되는지 확인하던 중 내일 할 일 , 추후 탭에서 내용이 같은 리스트를 삭제하려고 하면 에러가 나는 것을 확인했다. Warning: Encountered two children with the same key, `산책하기`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. 예를들어 '산책하기'라는..
![]()
*피드백은 언제나 환영합니다🙌 먼저 iframe태그를 이용해서 Youtube영상을 넣었다. 영상 넣는 방법은 간단하다. 먼저 원하는 영상에 들어가서 동영상 아래의 공유버튼을 누른 뒤 첫번째 버튼인 퍼가기를 누르면 이렇게 HTML 코드가 뜨는데 복사해주면 끝이다. 근데 HTML 처음 배웠을 때 비디오를 삽입하고 싶은 경우 video 태그를 사용한다고 배웠었는데 Youtube는 특이하게 iframe을 통해 동영상을 넣어야 한다. - 자동재생, 음소거, 반복재생 등 영상의 옵션은 주소의 매개변수(파라미터)로 작성하면 되고 추가적으로 넣을 매개변수는 &를 사용하면 된다. 나는 자동재생과 음소거를 하기 위해 autoplay와 mute를 각각 1로 설정했다. 이렇게 하면 영상 재생은 잘 된다. 그런데 콘솔창을 보면..
![]()
*피드백은 언제나 환영합니다🙌 오늘은 Tomorrow.js와 Someday.js 투두리스트 만드는 과정을 다뤄볼 예정이다. Tomorrow.js와 Someday.js Today.js의 투두리스트와 다르게 완료 체크, 수정 기능이 없어서 비교적 간단하게 만들 수 있었다. Tomorrow.js 먼저 input에 들어갈 텍스트를 담기위해 state를 하나 생성했다. let [text, setText] = useState(""); 그리고 onChange 속성을 이용해 input에 들어가 있는 값을 실시간으로 받아올 수 있도록 했다. { setText(e.target.value); }} value={text} placeholder='✔ 할 일 추가 (Press Enter)' /> 제출 버튼을 없앴기 때문에 엔터를..
![]()
*피드백은 언제나 환영합니다🙌 오늘은 랜덤 명언 표시 기능을 다뤄보려고 한다. 먼저 QuotesDatabase.js 컴포넌트를 새로 만들었다. 그리고 Today.js 에 import 해주었다. 완료한 작업 개수 : {done} 그리고 명언과 작가가 담긴 배열을 만들었는데 너무 긴 명언은 뺐다. const quotes=[ { "quote": "You can observe a lot just by watching.", "author": "Yogi Berra" }, { "quote": "A house divided against itself cannot stand.", "author": "Abraham Lincoln" }, { "quote": "Difficulties increase the nearer we ..
![]()
*피드백은 언제나 환영합니다🙌 저번 글에서는 할 일 목록 삭제, 완료 체크, 수정 기능에 대해 다뤘다. 이제 남은 건 타이머 만들기와 완료한 시간, 완료한 작업 개수 표시 기능 개발이다. 근데 남은 날짜를 보니 시간이 촉박할 것 같아 완료한 시간 기능 대신 랜덤 명언 표시를 넣기로 했다. 말 그대로 랜덤으로 명언을 표시해서 보여주는 기능인데 예전에 바닐라 자바스크립트 챌린지 때 만들어 본 적이 있다. 완료한 시간 기능 넣으면 진짜 좋을 거 같긴한데... 데드라인 지키는 게 더 중요한 것 같다. 사실 프로젝트 기간을 3주로 잡았는데 기간 내에 다 끝내지 못 할 것 같아서 한 달로 늘렸었다. 그런데 이런식이면 계속계속 미룰 것 같아 차라리 욕심을 줄이기로 했다. 다음달부터는 바빠질 것 같아서 이번달 안에 꼭..
![]()
*피드백은 언제나 환영합니다🙌 저번 글에서는 할 일 목록 추가에 대해 다뤘다. 오늘은 할 일 목록을 삭제, 완료 체크, 수정하는 과정까지 다뤄보겠다. 1. 할 일 목록 삭제 먼저 Today.js에서 onRemove 함수를 생성한다. .filter를 이용해 각 아이템의 고유 id를 받아와서 해당 아이디를 가진 아이템만 제외하고 새로운 배열을 만들었다. const onRemove = id => e => { setTodos(todos.filter(todo => todo.id !== id)); }; filter() 메서드는 해석 그대로 걸러주는 역할을 하는 함수다. 주로 특정 조건을 만족하는 새로운 배열이 필요할 때 사용한다. 생성한 onRemove 함수를 TodoList 컴포넌트에 전달하고 TodoList 컴..
![]()
*피드백은 언제나 환영합니다🙌 저번 글에서는 시계 기능을 개발하면서 useEffect와 new Date()에 대해 알게되었다. 아직은 useEffect 쓰는 게 아직 서툴러서 더 공부해야 할 것 같다고 생각했다. 이번 글에서는 할 일 목록 추가하는 기능을 다뤄보겠다. 우선 각각의 컴포넌트에서 구현하고 싶은 투두리스트 기능은 다음과 같다. (메인페이지): 할 일 추가/수정/삭제/완료 기능 : 할 일 추가/삭제 기능 : 할 일 추가/삭제 기능 추가/삭제/수정/완료 기능은 컴포넌트에만 넣었고 나머지 컴포넌트는 추가/삭제만 가능하도록 했다. 1. 기능 별로 컴포넌트 분리하기 컴포넌트는 다음과 같이 세 가지로 분리했다. TodoInsert.js TodoList.js TodoListItem.js TodoInsert..
![]()
*피드백은 언제나 환영합니다🙌 지난 글에서는 라우터로 컴포넌트별 경로를 설정했었다. 이번 글에서는 시계를 만드는 과정을 다루려고 한다. 내가 원하는 시계 기능은 이렇다. 오전, 오후 표시될 것 시, 분, 초 표시될 것 1초마다 시간 갱신 먼저 현재 시간을 얻기 위해 new Date()를 사용했다. 예전에 바닐라 자바스크립트 공부할 때 배웠었는데... 기억이 새록새록.. 그땐 블로그를 하거나 어딘가에 기록하진 않았었다. 하지만 꼭 블로그 해보라고 추천하고 싶다. 내가 단순히 이해하는 거랑 말로 풀어서 설명하는 건 또 다른 느낌이라 쉽지않다.. 그만큼 내 것으로 만들어지는 것 같아 좋기도 하고😀 이제 진짜 시계만들기 시작! 우선 new Date()를 state에 저장했다. let [time, setTime]..
![]()
*피드백은 언제나 환영합니다🙌 이번 글에서는 라우터와 링크로 컴포넌트를 설정해보려고 한다. 우선 App.js에서 Router로 컴포넌트별 경로를 지정했다. path 속성에는 경로, element 속성에는 컴포넌트를 넣어주면 된다. "/"로 접근시 메인페이지를 보여주는데 나는 Today 컴포넌트를 메인페이지로 설정했다. 다음으로 컴포넌트를 이용했다. HTML 공부할 때는 다른 페이지를 불러올 때 a 태그만 사용했는데 리액트에서는 를 사용한다. 그래서 둘의 차이점을 알고 싶어 검색해봤다. 원래 웹 페이지에서는 링크를 보여줄 때 a 태그를 사용한다. 하지만 a 태그는 클릭시 페이지를 새로 불러오기 때문에 react 앱이 지닌 상태도 초기화 된다. 따라서 react에서 페이지를 이동시킬 때는 react-rout..
