I'm a Fig, Not a Pig

*피드백은 언제나 환영합니다🙌 저번 글에서는 할 일 목록 삭제, 완료 체크, 수정 기능에 대해 다뤘다. 이제 남은 건 타이머 만들기와 완료한 시간, 완료한 작업 개수 표시 기능 개발이다. 근데 남은 날짜를 보니 시간이 촉박할 것 같아 완료한 시간 기능 대신 랜덤 명언 표시를 넣기로 했다. 말 그대로 랜덤으로 명언을 표시해서 보여주는 기능인데 예전에 바닐라 자바스크립트 챌린지 때 만들어 본 적이 있다. 완료한 시간 기능 넣으면 진짜 좋을 거 같긴한데... 데드라인 지키는 게 더 중요한 것 같다. 사실 프로젝트 기간을 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..

*피드백은 언제나 환영합니다🙌 프로젝트 소개일정을 관리 할 수 있는 투두리스트 + 집중력을 높여주는 뽀모도로 타이머가 결합된 웹페이지를 만들었다. 뽀모도로 타이머란 25분 공부하고 5분 휴식하는 것을 반복하는 공부법 이다. 뽀모도로 타이머를 만든 이유는 투두리스트와 함께 있으면 유용하게 쓸 수 있을 것 같아서다.사실 내 경험에 기인해서 만들게 됐다. 난 시험기간 때 뽀모도로 타이머를 정말 애용한다. 휴식시간이 금방금방 돌아와서 공부를 시작하기 전에 크게 부담가질 이유도 없고 무엇보다 25분이라는 짧은 시간안에 빡 집중할 수 있기 때문이다. 그래서 뽀모도로 타이머와 시험기간 필수인 투두리스트를 결합해서 웹 페이지를 만들어보았다. 기획하기프로젝트 기간은 한 달로 잡았고 시작하기 전 어떤 식으로 진행할지 간단..

*피드백은 언제나 환영합니다🙌 토이프로젝트를 시작하게 된 계기 1. 계속 이론적인 부분만 공부하다보니 잘 와닿지 않았다. 리액트 공식문서도 찾아보고 여러 강의도 들었지만 단순히 따라치는 것 같은 느낌이 들어 아쉬웠다. 2. 모든 개념을 완벽하게 알고 프로젝트를 시작해야 할 것 같은 생각이 있었다. 하지만 공부하다보니 시험처럼 범위가 있는 것도 아니고 정해진 분량이 있는게 아니라 끝이 없을 거 같았다... 그래서 언제까지고 미룰 순 없을 거 같아 시작하게 됐다. 첫 토이 프로젝트로 선택한 것은 뽀모도로 타이머와 투두리스트이다. 어떤 걸 토이 프로젝트로 하면 좋을지 생각해봤는데 리액트를 배운지 한 달 밖에 되지 않은 시점에서 너무 어려운 프로젝트를 하는 것 보단 간단한 걸 해보는게 도움이 될 것 같았다. 근..

목차 1. flat() 이란? 2. flat() 예제 3. flatMap() 이란? 1. flat()이란? flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다. - MDN 간단히 말해 배열 내부의 하위 배열을 쉽게 합칠 수 있는 메서드이다. 2. flat() 예제 const exampleArray = ["a", ["b"], ["c"]]; 위와 같은 배열을 ['a', 'b', 'c'] 와 같이 만들고 싶을 때 기존에는 concat과 reduce를 사용해서 배열을 합했다. 이 때 flat을 사용하면 간단히 배열을 합칠 수 있다. const exampleArray = ["a", ["b"], ["c"]]; const newArray = exampleArray...

목차 1. 옵셔널 체이닝 2. 단락평가 3. ?.()와 ?.[] 4. 정리 1. 옵셔널 체이닝 옵셔널 체이닝(.?)을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근 할 수 있다. 이해하기 쉽도록 예제를 통해 알아보자. 사용자가 여러 명 있는데 그 중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이때 사용자의 주소정보를 알기 위해 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 옵셔널 체이닝이 추가되기 전에는 이런 문제를 해결하기 위..

컴포넌트 전환 애니메이션 주는 법 (transition) - 전환애니이션 만드는 법 1. 애니메이션 동작 전 className 만들기 2. 애니메이션 동작 후 className 만들기 3. className에 transition 속성 추가 4. 원할 때 2번 className 부착 - useEffect: 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행 할 수 있도록 하는 Hook임 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 업데이트 됐을 때, 특정 작업을 처리할 수 있음. - 기본형태 : useEffect(function, deps) - function: 수행하고자 하는 작업 - deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 1. 컴포넌트가 언마운트 됐을 때( 처음 ..