Today Hailie Learned

배운점 1. 왜 리덕스를 배울까? 2. 왜 리덕스가 리액트 생태계에서 중요하지? 3. 리덕스를 리액트에서 어떻게 사용하지? 왜 리덕스를 배울까? 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다. 우리가 상태, 즉 우리 애플리케이션을 변경학 화면에 표시하는 데이터를 관리하도록 도와준다. 리덕스는 우리가 그런 데이터를 다수의 컴포넌트나 심지어는 앱 전체에서 관리하도록 도와준다. 앞에서 배운 state를 3가지로 구분할 수 있다. 1. local state : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태. (useState() 나 useReducer() 사용) 2. cross-component state : 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을..

한 달전에 읽었지만 리마인드 하기 위해서 읽으면서 핵심이라고 생각하고 기록한 부분을 정리해서 포스팅합니다. 나중에 제가 보기 위해 기록하였기 때문에 보기 쉽게 정리한 글은 아닙니다. 이 책을 통해 얻고 싶은 것 개발자로 성공적으로 입문하는 방법 효과적인 공부방법 좋은 일자리 구하는 방법 재밌게 프로그래밍 하는 방법 웹 개발에 대한 대략적인 정보 좋은 개발자되기 앞으로의 방향성과 자기계발 방법 핵심! 이 책에서 배운 내용을 반복하며 실천하자! p. 43 무언가를 자동화하기 전에 그 작업을 수동으로 하는 방법부터 깨우쳐야 한다. [문제이해하기] - 코딩을 하기 전에 자신이 무엇을 만드는지, 어떤 문제를 해결해야하는지 알고 그것을 이해하는 지점에서 시작한다. [설계하기] - 바로 코딩에 뛰어들기 전에 일정 ..

에러 원인 map을 쓰는 구문에서 오류가 발생했습니다. 문법 오류이기 때문에 다음에 작성할 때도 같은 에러가 발생하지 않도록 해야합니다. 에러 해결 1. return 을 쓰지 않을때 👉 map(() => ()) {menuArr.map((menu, index) => ( selectMenuHandler(index)} > {menu.name} ); )} 2. return 을 쓴다면 👉 map(() => { return() }) {menuArr.map((menu, index) => { return ( selectMenuHandler(index)} > {menu.name} ); })}

let user = {name: 'Mike', age: 30}; let {name, age} = user; console.log(name); // 'Mike' console.log(age); // 30 위 식에서 let {name, age} = user; 는 let name = user.name; let age = user.age; 와 같다. ⭐️순서를 바꾸어도 동일하게 작동한다. (배열 구조분해와 다른점)⭐️ let user = {name: 'Mike', age: 30}; let {age, name} = user; console.log(name); // 'Mike' console.log(age); // 30 ⭐️프로퍼티의 키 값을 무조건 동일하게 사용할 필요없다. ⭐️ ⭐️⭐️변수 이름을 바꿀 수 있다..

Storybook이란? ➥ CDD (Component Driven Development)를 하기 위한 도구 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 👉 전체 UI를 한눈에 보고 개발 가능! 주요 기능 UI 컴포넌트들을 카탈로그화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기 리액트를 포함한 다양한 뷰 레이어 지원하기 장점 1. 컴포넌트 문서화 👉 재사용성 확대 2. 자동으로 컴포넌트 시각화 👉 시뮬레이션 할 수 있는 다양한 테스트 상태 확인 가능 👉 버그 사전에 차단 가능 3. 테스트 및 개발 속도 개선 Storybook 설치 방법 // 리액트 프로젝트를 다운받았다는 가정 하에, npx storyboo..

CDD ( Component Driven Development ) ➥ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 ➥ 재사용할 수 있는 컴포넌트를 개발한다. ➥ 상향식 개발 Styled-Component (CSS-in-JS가 나오게 된 배경) CSS 전처리기 ( CSS Preprocessor ) ➥ CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 * 각 CSS 전처리기에 맞는 Compiler를 사용해야 한다. (CSS 전처리기 자체만으로는 웹 서버가 인지하지 못함) ➥ 그래서 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생긴 것이다. - CSS 전처리기로 가장 유명한 SASS (CSS를 확장해 주는 스크립팅 언어) 장점 :..

DFS에서 기본 중의 기본 코드를 공부했습니다. 전위순회 출력하기 ➥ 두 가닥으로 뻗는 재귀함수(여기서는 DFS(v*2), DFS(v*2+1)) 위에 출력하면 된다. function solution(v){ let answer; function DFS(v){ if(v > 7) return; // 종료할거야 else{ console.log(v); // 여기는 뻗을거야! 일단 부모 출력 DFS(v*2); // 왼쪽 자식 출력 DFS(v*2+1); // 오른쪽 자식 출력 } } DFS(v); return answer; } console.log(solution(1)); // 1 2 4 5 3 6 7 중위순회 출력하기 function solution(v){ let answer; function DFS(v){ if(..

자바스크립트로 a부터 z까지 출력하기 let str = ''; for (let i = 97; i

Each child in a list should have a unique "key" prop. 오류의 원인 ➥ 간단히 배열의 길이를 체크하고 이미 렌더링된 아이템의 수만 확인한다. 리액트에게는 각각의 아이템들이 모두 비슷해 보인다. 그래서 새로운 아이템이 어느 위치에 추가되어야 하는지 모르기 때문에 오류가 나타났다. "key" prop이 없다면 리액트는 새로운 아이템을 div 목록에 있는 마지막 아이템으로 렌더링하고 모든 아이템을 업데이트해서 컨텐츠를 교체한다. 이 방법은 별로 좋지 않은데, 그 이유는 리액트에게 이 모든 아이템들이 비슷해 보이고 배열만 전보다 더 길어진 것을 보았기 때문에 벌어진 일이다. 그래서 추가로 div를 넣어 렌더링해서 끝부분에 추가한 것이다. 그런 다음 모든 아이템들을 지나면..