I'm a Fig, Not a Pig

*피드백은 언제나 환영합니다🙌 프로젝트 소개일정을 관리 할 수 있는 투두리스트 + 집중력을 높여주는 뽀모도로 타이머가 결합된 웹페이지를 만들었다. 뽀모도로 타이머란 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. 컴포넌트가 언마운트 됐을 때( 처음 ..

1. 컴포넌트의 Lifecycle 우선 컴포넌트의 Lifecycle이라는 개념을 알아보자. 컴포넌트는 1. 생성이 될 수도 있고(mount) 2. 재렌더링 될 수도 있고(update) 3. 삭제가 될 수도 있다(unmount) 컴포넌트의 Lifecycle을 알면 컴포넌트 인생 중간중간에 간섭할 수 있다. 여기서 간섭이란 코드실행을 말한다. 따라서 컴포넌트가 장착 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트 될 때 특정 코드를 실행할 수도 있다. 2. 간섭하는 방법 "Detail 컴포넌트 등장 전에 이것좀 해줘" "Detail 컴포넌트 사라지기 전에 이것좀 해줘" "Detail 컴포넌트 업데이트 되고나서 이것좀 해줘" 이렇게 코드를 실행해달라고 간섭할 수 있는데 간섭은 갈고리(hook)를 달아..

새로운 프로젝트 생성 & Bootstrap 사용하기 - Bootstrap 라이브러리: 레이아웃을 복사붙여넣기 식으로 편하게 개발가능함 (라이브러리 홈 들어가서 설치하면 됨) 설치 후 react-bootstrap 사이트에서 UI 복사 붙여넣기 가능 ex. button 검색 후 코드 복붙하기 - Navbar import {Navbar, Container, Nav} from 'react-bootstrap'; // 상단에 import 적고 import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; function App() { return ( // 코드 복붙하기 Navbar Home Features Pricing ); } export default A..

목차 1. Array.prototype.reduce() 2. 예제 1. Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. -MDN reduce는 보통 배열의 요소들을 하나의 결과로 합치는 용도로 많이 사용한다. - 구문 arr.reduce(callback[, initialValue]) 구문을 이루는 각 요소들은 다음과 같다. 1. callback function reduce 함수는 네 개의 인자를 가진다. 누산기 (acc): accumulator는 callback함수의 반환값을 누적함 현재 값 (cur): 배열의 현재 요소 현재 인덱스 (idx): 배열의 현재 요소의 인덱스 원본 배열 ..

목차 1. Array.prototype.filter() 2. 예제 3. filter 특징 1. Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. -MDN filter 함수는 해석 그대로 걸러주는 역할을 하는 함수이므로 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용한다. - 구문 arr.filter(callback(element, index, array), thisArg) 구문을 이루는 각 요소들은 다음과 같다. ▷ arr - 순회하고자 하는 배열 ▷ element - 현재 배열의 요소 ▷ index(생략 가능) - 현재 배열 요소의 index ▷ array(생략 가능) - filter 함수를 호..

for() forEach() map() 기본 형식 for ( 초기문; 조건문 증감문 ) { 실행문; } 배열명.forEach(function(매개변수) { 실행문; }); 배열명.map(function(매개변수){ 실행문; }); 설명 - 조건식에 부합하면 멈추지 않고 계속 순회한다. - 멈추고 싶은 경우 'break';를 사용하면 된다. - 반복문 기능을 지닌 배열 메서드이다. - 배열의 요소를 순회하며, 모두 순회하면 실행을 멈춘다. - 'break'; 사용이 불가하다. - for문보다 속도가 빠르다. - map도 반복문 기능을 가지지만, 반환값이 있다는 점에서 forEach와 다르다. - 배열의 요소를 순회하며, 모두 순회하면 실행을 멈춘다. - 'break'; 사용이 불가하다. - 기존 배열의 값..