꾸매코딩

결과 Timer의 시간과 Title(제목) 저장 기능을 만들었다. React-Native 컴포넌트인 Modal을 사용하여 만들었다. 오류 타이머 기록한 내용을 삭제 시 전체가 사라지는 오류 (해결) → 변수를 잘못 설정해주었다. 너비가 고정이 아니라 Title 길이에 따라 변경되는 오류 (해결) → 가장 바깥 tag에 CSS가 잘못 지정되어 있었다. 계획 expo AsyncStorage 기능으로 DB 기능 구현할 계획이다. ToDoList에 완료 버튼을 누르면 모든 스타일이 변경되는 문제를 해결할 예정이다.

결과 간단하게 ToDoList와 Timer 기능을 만들었다. 타이머의 시작, 멈춤 정지 기능을 구현했다. 이미지는 https://icons.expo.fyi/ 위 사이트에서 가져왔다. ToDos expo의 API 중 AsyncStorage를 사용하여 저장하고 있다. 완료 버튼과 삭제 버튼을 만들어 놓았는데, 삭제는 가능하나 완료 상태는 아직 구현하지 못하였다. const addToDo = () => { if (text === '') { return; } const newToDos = { ...toDos, [Date.now()]: { text, inToDos } }; setToDos(newToDos); saveToDos(newToDos); setText(''); }; const deleteToDo = asy..

서론 지금까지의 짧은 경험으로는 익숙해지는 데에는, 직접 해보는 게 가장 효과적이라고 생각해서 무작정 내가 사용할만한 ToDoList 어플을 만들어볼 계획이다. 프로젝트 계획 만들고 싶은 것 ToDoList와 Timer, 날짜별로 내가 했던 일들, 하는대에 걸린 시간을 저장하는 어플을 만들 계획이다. 사용 할 기술 - React-Native - Expo 구현 할 기능 - 날짜별로 저장할 수 있는 DB 기능 - ToDoList 기능 - 계획 진행 시간 체크 기능 (= 타이머) - 고정적으로 하는 일정 따로 지정해 놓는 기능 (ex, 운동) 일정 계획 10월 17일까지 구현 13일 : 시작 및 ToDoList 기능 구현 14일 : 타이머 기능과 시간 저장 기능 구현 15일 : 시간 저장, 타이틀 설정과 To..

서론 React를 사용하면서 페이지 이동에 가 아닌 Router를 사용해야하는 이유가 궁금해졌다. SPA란? React에서 Router를 사용하는 이유를 알기 위해선 먼저 SPA를 이해해야한다. SPA에 대한 이전 글 참고 SPA(Single Page Application)는 말 그대로 한개의 페이지로 이루어진 어플리케이션이라는 의미이다. SPA가 등장하기 전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링(SSR)방식의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다. 를 통한 이동이 가능하다. 하지만, SPA의 경우 렌더링의 역할을 서버가 아니라 브라우저에서 처리하는 방식이다. 요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때 ..

결과물 https://loving-einstein-68589f.netlify.app/ React App loving-einstein-68589f.netlify.app 결과 슬라이더 포함하여 모든 페이지를 반응형으로 변경하였다. netlify를 사용하여 배포를 완료하였다. [ 상세 페이지 ] 회고 프로젝트를 계획하고 만드는 기간 중 이런저런 일들이 있었지만, 무사히 마무리한 것 같아서 다행이라고 생각한다. 프로젝트는 목표했던 기간보다 늦어졌다. 어디서 본 내용중에 프로젝트를 2일 안에 완료할 거 같으면 2~2.5배를 늘린 4~5일로 기간을 정하라는 글이 뒤늦게 생각났다. 그만큼 알지 못하는 오류와 변수들이 숨어있다는 뜻이라고 생각했었는데 직접 느껴본 것 같다. 저번 프로젝트를 마무리하고 회고 할 당시에도 ..

결과 [ 홈 / TV / 영화 / 검색 ] 페이지를 반응형으로 변경하였다. gh-pages를 활용하여 웹 사이트를 배포하였다. 계획 9월 26일까지 모든 페이지를 반응형으로 변경할 예정이다. gh-pages를 사용해본 경험이 있어서 우선 gh-pages로 비교하면서 진행하고 최종적으로 netlify를 사용하여 배포할 예정이다. 느낀 점 아직 세부 페이지는 변경하지 못하였는데 모니터로 보이는 화면은 괜찮아 보였는데, 스마트폰 화면으로 보니까 배치도 망가지고 글자도 겹치는 문제가 발생하였다. 미디어 쿼리와 css를 변경해가며 페이지를 수정하였다. '처음엔 막막하게 어떻게 변경하지?'라는 생각을 가지고 있었는데 역시 하면 된다는 걸 느꼈다. 페이지를 반응형으로 변경하는 과정이 계속 비교하면서 노가다하는 것이 ..